/**
 * Tienda — grid, filtros y carrito lateral.
 *
 * Mobile-first: el layout base es de una columna con los filtros fuera de
 * pantalla; a partir de 1024px el panel pasa a ser un sidebar fijo.
 *
 * Breakpoints: 375 (base) · 768 (tablet) · 1024 (desktop) · 1440 (ancho)
 */

/* =========================================================================
   LAYOUT
   ========================================================================= */

.hbg-tienda {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hbg-e5);
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
	width: 100%;
}

.hbg-tienda__resultados {
	min-width: 0; /* sin esto el grid interno desborda en pantallas chicas */
}

/* Barra con el botón "Filtrar": sólo hasta 1023px. */
.hbg-tienda__barra {
	display: flex;
	align-items: center;
	gap: var(--hbg-e3);
	position: sticky;
	top: 0;
	z-index: 20;
	padding-block: var(--hbg-e3);
	background: var(--hbg-negro);
}

.hbg-abrir-filtros {
	display: inline-flex;
	align-items: center;
	gap: var(--hbg-e2);
	min-height: 44px;
	padding-inline: var(--hbg-e4);
	background: var(--hbg-superficie-1);
	color: var(--hbg-texto);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: var(--hbg-radio-full);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--hbg-transicion), color var(--hbg-transicion);
}

.hbg-abrir-filtros:hover {
	border-color: var(--hbg-neon);
	color: var(--hbg-neon);
}

.hbg-abrir-filtros__badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	border-radius: var(--hbg-radio-full);
	font-size: 0.75rem;
	font-weight: 700;
}

/* =========================================================================
   PANEL DE FILTROS
   Mobile: drawer desde la izquierda. Desktop: columna fija.
   ========================================================================= */

.hbg-filtros {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 1000;
	width: min(88vw, 340px);
	padding: var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border-inline-end: 1px solid var(--hbg-borde);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform var(--hbg-transicion), visibility var(--hbg-transicion);
}

.hbg-filtros[data-abierto="true"] {
	transform: translateX(0);
	visibility: visible;
}

/*
 * Los cajones tienen que quedar por ENCIMA de la barra fija (z-index 500), que
 * si no los tapa: al abrir el carrito se veía el panel por debajo del header.
 */
.hbg-tienda__velo,
.hbg-carrito-velo {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(2px);
}

.hbg-sin-scroll {
	overflow: hidden;
}

.hbg-filtros__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hbg-e3);
	margin-bottom: var(--hbg-e4);
}

.hbg-filtros__titulo {
	margin: 0;
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.25rem;
	color: var(--hbg-texto);
}

.hbg-filtros__cerrar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: var(--hbg-texto-suave);
	cursor: pointer;
	border-radius: var(--hbg-radio-sm);
}

.hbg-filtros__cerrar:hover {
	color: var(--hbg-neon);
	background: var(--hbg-superficie-2);
}

.hbg-filtros__limpiar {
	display: block;
	margin-bottom: var(--hbg-e4);
	padding: var(--hbg-e2) var(--hbg-e3);
	background: rgba(57, 255, 20, 0.1);
	border: 1px solid rgba(57, 255, 20, 0.35);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-neon);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.hbg-filtros__limpiar:hover {
	background: rgba(57, 255, 20, 0.18);
}

/* ------------------------------- grupos ------------------------------- */

.hbg-grupo {
	border-bottom: 1px solid var(--hbg-borde);
	padding-block: var(--hbg-e3);
}

.hbg-grupo:last-of-type {
	border-bottom: none;
}

.hbg-grupo__titulo {
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
	min-height: 44px;
	font-family: var(--hbg-fuente-titulo);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--hbg-texto);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Flecha propia: el marcador nativo no se puede estilar de forma consistente. */
.hbg-grupo__titulo::-webkit-details-marker {
	display: none;
}

.hbg-grupo__titulo::after {
	content: "";
	margin-inline-start: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--hbg-texto-suave);
	border-bottom: 2px solid var(--hbg-texto-suave);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--hbg-transicion);
}

.hbg-grupo[open] > .hbg-grupo__titulo::after {
	transform: rotate(-135deg) translateY(-2px);
}

.hbg-grupo__badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	border-radius: var(--hbg-radio-full);
	font-size: 0.75rem;
	font-weight: 700;
}

.hbg-grupo__cuerpo {
	padding-block: var(--hbg-e2) var(--hbg-e3);
}

/* ------------------------------ opciones ------------------------------ */

.hbg-opciones {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbg-opciones--scroll {
	max-height: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline-end: var(--hbg-e2);
}

.hbg-opcion {
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
	min-height: 40px;
	padding: var(--hbg-e2) var(--hbg-e3);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto-suave);
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color var(--hbg-transicion), color var(--hbg-transicion);
}

.hbg-opcion:hover {
	background: var(--hbg-superficie-2);
	color: var(--hbg-texto);
}

.hbg-opcion.is-activa {
	color: var(--hbg-neon);
	background: rgba(57, 255, 20, 0.08);
	font-weight: 600;
}

.hbg-opcion__texto {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.hbg-opcion__total {
	flex: 0 0 auto;
	color: var(--hbg-texto-tenue);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.hbg-opcion--volver {
	color: var(--hbg-texto-tenue);
	font-size: 0.85rem;
}

/* Casilla dibujada para el filtro de marca. */
.hbg-check {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border: 2px solid var(--hbg-borde-fuerte);
	border-radius: 5px;
	color: var(--hbg-negro);
	transition: background-color var(--hbg-transicion), border-color var(--hbg-transicion);
}

.hbg-opcion--check.is-activa .hbg-check {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
}

.hbg-buscar-marca {
	width: 100%;
	min-height: 40px;
	margin-bottom: var(--hbg-e2);
	padding-inline: var(--hbg-e3);
	background: var(--hbg-superficie-2);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto);
	font-size: 0.875rem;
}

/* ------------------------------- precio ------------------------------- */

.hbg-precio__campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hbg-e3);
}

.hbg-precio__campo label {
	display: block;
	margin-bottom: var(--hbg-e1);
	color: var(--hbg-texto-tenue);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hbg-precio__campo input {
	width: 100%;
	min-height: 44px;
	padding-inline: var(--hbg-e3);
	background: var(--hbg-superficie-2);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto);
	font-size: 0.95rem;
}

.hbg-precio__ayuda {
	margin: var(--hbg-e2) 0 var(--hbg-e3);
	color: var(--hbg-texto-tenue);
	font-size: 0.78rem;
}

.hbg-precio__aplicar {
	width: 100%;
	min-height: 44px;
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	border: none;
	border-radius: var(--hbg-radio-sm);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
	cursor: pointer;
}

.hbg-precio__aplicar:hover {
	background: #ffffff;
}

/* --------------------------- pie del drawer --------------------------- */

.hbg-filtros__pie {
	position: sticky;
	bottom: calc( var(--hbg-e5) * -1 );
	margin: var(--hbg-e5) calc( var(--hbg-e5) * -1 ) calc( var(--hbg-e5) * -1 );
	padding: var(--hbg-e4) var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border-top: 1px solid var(--hbg-borde);
}

.hbg-filtros__ver {
	width: 100%;
	min-height: 48px;
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	border: none;
	border-radius: var(--hbg-radio-sm);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

/* =========================================================================
   GRID DE PRODUCTOS
   ========================================================================= */

.woocommerce ul.products,
.hbg-tienda__resultados ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hbg-e4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Astra aplica floats y anchos por columna; los neutralizamos para que el
   grid gobierne el layout. */
.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio);
	overflow: hidden;
	transition: border-color var(--hbg-transicion),
	            transform var(--hbg-transicion),
	            box-shadow var(--hbg-transicion);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--hbg-neon);
	transform: translateY(-4px);
	box-shadow: var(--hbg-sombra), var(--hbg-glow-fuerte);
}

/* Imagen con relación fija: evita que el grid salte según la altura de cada
   foto y elimina el layout shift al cargar. */
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--hbg-negro);
	margin: 0;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	padding: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: var(--hbg-e3) var(--hbg-e3) 0;
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--hbg-texto);
	/* Dos líneas máximo para que todas las cards midan igual. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .price {
	padding: var(--hbg-e2) var(--hbg-e3) 0;
	margin-top: auto;
	font-size: 1.05rem;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: var(--hbg-e3);
	text-align: center;
}

/* Badge de oferta. */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: var(--hbg-e3);
	inset-inline-start: var(--hbg-e3);
	z-index: 2;
	min-height: 0;
	padding: 4px 10px;
	background: var(--hbg-lima);
	color: var(--hbg-negro);
	border-radius: var(--hbg-radio-full);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
}

.woocommerce ul.products li.product {
	position: relative;
}

/* ---------------------- barra de orden y conteo ----------------------- */

.hbg-tienda__resultados .woocommerce-result-count,
.hbg-tienda__resultados .woocommerce-ordering {
	margin-bottom: var(--hbg-e4);
	color: var(--hbg-texto-suave);
	font-size: 0.875rem;
}

.hbg-tienda__resultados .woocommerce-ordering select {
	min-height: 44px;
	padding-inline: var(--hbg-e3);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto);
}

/* =========================================================================
   CARRITO LATERAL
   ========================================================================= */

.hbg-carrito {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	width: min(92vw, 400px);
	background: var(--hbg-superficie-1);
	border-inline-start: 1px solid var(--hbg-borde);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--hbg-transicion), visibility var(--hbg-transicion);
}

.hbg-carrito[data-abierto="true"] {
	transform: translateX(0);
	visibility: visible;
}

.hbg-carrito__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hbg-e3);
	padding: var(--hbg-e4) var(--hbg-e5);
	border-bottom: 1px solid var(--hbg-borde);
}

.hbg-carrito__titulo {
	margin: 0;
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.15rem;
	color: var(--hbg-texto);
}

.hbg-carrito__cerrar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: var(--hbg-texto-suave);
	cursor: pointer;
	border-radius: var(--hbg-radio-sm);
}

.hbg-carrito__cerrar:hover {
	color: var(--hbg-neon);
	background: var(--hbg-superficie-2);
}

.hbg-carrito__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--hbg-e4) var(--hbg-e5);
}

.hbg-carrito .woocommerce-mini-cart-item {
	display: flex;
	gap: var(--hbg-e3);
	padding-block: var(--hbg-e3);
	border-bottom: 1px solid var(--hbg-borde);
}

.hbg-carrito .woocommerce-mini-cart-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--hbg-radio-sm);
	order: -1;
}

.hbg-carrito .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding-block: var(--hbg-e4);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.05rem;
	color: var(--hbg-texto);
}

.hbg-carrito .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--hbg-e2);
}

.hbg-carrito .woocommerce-mini-cart__buttons .button {
	width: 100%;
	text-align: center;
}

/* El botón secundario ("Ver carrito") no compite con "Finalizar compra". */
.hbg-carrito .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent;
	color: var(--hbg-neon);
	border: 1px solid var(--hbg-neon);
	box-shadow: none;
}

.hbg-carrito .woocommerce-mini-cart__empty-message {
	padding-block: var(--hbg-e6);
	color: var(--hbg-texto-suave);
	text-align: center;
}

/* -------------------------- botón del carrito -------------------------- */

/* Flotante: Astra Header Builder no expone un punto de inserción confiable en
   la barra del header, así que el acceso al carrito va acá. Se ubica sobre el
   botón "volver arriba" de Astra para no taparlo. */
.hbg-carrito-fab {
	position: fixed;
	inset-block-end: calc( var(--hbg-e5) + 52px );
	inset-inline-end: var(--hbg-e5);
	z-index: 80;
}

.hbg-contador-carrito {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--hbg-e2);
	min-height: 52px;
	padding-inline: var(--hbg-e4);
	background: var(--hbg-negro);
	border: 2px solid var(--hbg-neon);
	border-radius: var(--hbg-radio-full);
	box-shadow: var(--hbg-sombra), 0 0 16px rgba(57, 255, 20, 0.35);
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--hbg-transicion),
	            color var(--hbg-transicion),
	            box-shadow var(--hbg-transicion);
}

.hbg-contador-carrito:hover {
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	box-shadow: var(--hbg-sombra), var(--hbg-glow-fuerte);
}

.hbg-contador-carrito__n {
	position: absolute;
	top: 2px;
	inset-inline-start: 22px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	border-radius: var(--hbg-radio-full);
	font-size: 0.7rem;
	font-weight: 700;
}

/* =========================================================================
   BREAKPOINTS
   ========================================================================= */

/* --- 768px: tres columnas de producto ------------------------------------ */
@media (min-width: 768px) {
	.woocommerce ul.products,
	.hbg-tienda__resultados ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--hbg-e5);
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1rem;
	}

}

/* --- 1024px: el panel de filtros deja de ser drawer y pasa a sidebar ------ */
@media (min-width: 1024px) {
	.hbg-tienda {
		grid-template-columns: var(--hbg-sidebar) minmax(0, 1fr);
		align-items: start;
		gap: var(--hbg-e6);
	}

	.hbg-tienda__barra {
		display: none;
	}

	.hbg-filtros {
		position: sticky;
		top: var(--hbg-e5);
		inset-inline-start: auto;
		inset-block: auto;
		z-index: 1;
		width: auto;
		max-height: calc(100vh - var(--hbg-e7));
		padding: var(--hbg-e4);
		border: 1px solid var(--hbg-borde);
		border-radius: var(--hbg-radio);
		transform: none;
		visibility: visible;
		grid-row: 1 / -1;
	}

	/* En desktop el panel está siempre visible: cerrar y "ver resultados"
	   sólo tienen sentido en el drawer. */
	.hbg-filtros__cerrar,
	.hbg-filtros__pie {
		display: none;
	}

	.hbg-tienda__velo {
		display: none;
	}

	.woocommerce ul.products,
	.hbg-tienda__resultados ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- 1440px: cuarta columna ---------------------------------------------- */
@media (min-width: 1440px) {
	.woocommerce ul.products,
	.hbg-tienda__resultados ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* En pantallas anchas sin sidebar (categorías sin filtros) el grid respira. */
@media (min-width: 1024px) {
	.hbg-tienda:not(:has(.hbg-filtros)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   PLACAS DE CATEGORÍA
   La tienda lista categorías en vez de productos sueltos.
   ========================================================================= */

.woocommerce ul.products li.product-category {
	position: relative;
	display: flex;
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio);
	overflow: hidden;
	transition: border-color var(--hbg-transicion),
	            transform var(--hbg-transicion),
	            box-shadow var(--hbg-transicion);
}

.woocommerce ul.products li.product-category:hover {
	border-color: var(--hbg-neon);
	transform: translateY(-4px);
	box-shadow: var(--hbg-sombra), var(--hbg-glow-fuerte);
}

.woocommerce ul.products li.product-category > a {
	position: relative;
	display: block;
	width: 100%;
	text-decoration: none;
}

/*
 * 3:2, la relación en la que están hechas las portadas de categoría
 * (1920x1280). Con el 4:3 anterior `object-fit: cover` recortaba ~11% de los
 * costados, justo donde estas composiciones tienen el resplandor verde.
 */
.woocommerce ul.products li.product-category img,
.woocommerce-js ul.products li.product.product-category a img {
	display: block;
	width: 100%;
	/* `height: auto` es imprescindible: Astra fija `height: 100%` con la misma
	   cadena y, con un alto definido, el navegador ignora `aspect-ratio`. */
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0;
	background: var(--hbg-negro);
	transition: transform 400ms ease;
}

.woocommerce ul.products li.product-category:hover img {
	transform: scale(1.05);
}

/*
 * DESTELLO BLANCO AL PASAR EL MOUSE — de dónde salía.
 *
 * Astra, en `woocommerce-grid.min.css`:
 *
 *     .woocommerce-js ul.products li.product.product-category > a:hover
 *     .woocommerce-loop-category__title { background-color: #fff }        (0,6,3)
 *
 * El título es una barra absoluta al pie con un degradé que arranca
 * transparente; ese `background-color` blanco se pinta DEBAJO del degradé y
 * asoma por la parte translúcida. Al entrar y salir con el mouse se lee como
 * un flash.
 *
 * Sólo se neutraliza el color de fondo. El degradé (que va en
 * `background-image`) y el zoom `scale(1.05)` de la imagen quedan intactos.
 */
.woocommerce-js ul.products li.product.product-category > a:hover .woocommerce-loop-category__title,
.woocommerce ul.products li.product.product-category > a:hover .woocommerce-loop-category__title,
.woocommerce-js ul.products li.product.product-category > a:focus .woocommerce-loop-category__title {
	background-color: transparent;
}

/* El título se apoya sobre la imagen con un degradado, para que se lea sobre
   cualquier foto cuando se carguen las definitivas. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin: 0;
	padding: var(--hbg-e6) var(--hbg-e4) var(--hbg-e3);
	background: linear-gradient(180deg, transparent, rgba(13, 13, 13, 0.92) 62%);
	color: #ffffff;
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: start;
}

.woocommerce ul.products li.product-category .count {
	display: block;
	margin-top: 2px;
	background: none;
	color: var(--hbg-neon);
	font-size: 0.78rem;
	font-weight: 600;
}

@media (min-width: 768px) {
	.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
		font-size: 1.15rem;
	}
}

/* =========================================================================
   TARJETA DE PRODUCTO — ajustes pedidos
   Bordes rectos, botón centrado bajo la imagen, corazón fuera de la foto.
   ========================================================================= */

.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category,
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product-category img {
	border-radius: 0;
}

.woocommerce ul.products li.product .onsale {
	border-radius: 0;
}

/* Fila del corazón: fuera de la imagen, alineado a la derecha y por encima del
   botón de compra. */
.hbg-fav-fila {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--hbg-e2);
	padding: 0 var(--hbg-e3);
	margin-top: var(--hbg-e2);
}

/*
 * Los dos íconos de la fila —favorito y carrito— comparten exactamente la misma
 * caja para que ninguno se vea más grande que el otro. Astra dibujaba el de
 * carrito flotando ENCIMA de la foto y con otro tamaño; ese se elimina en PHP
 * (ver `hbg_sacar_carrito_de_la_foto`) y este lo reemplaza acá abajo.
 */
.woocommerce ul.products li.product .hbg-fav,
.woocommerce ul.products li.product .hbg-tarjeta-carrito {
	position: static;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	/* Astra le pone `min-height: 44px` a todo `.button` del catálogo y estiraba
	   el de carrito a 32x44 al lado de un corazón de 32x32. */
	min-height: 32px;
	line-height: 1;
	padding: 0;
	background: transparent;
	backdrop-filter: none;
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: 50%;
	color: var(--hbg-texto-tenue);
	text-decoration: none;
	transition: color var(--hbg-transicion),
	            border-color var(--hbg-transicion),
	            background-color var(--hbg-transicion),
	            transform var(--hbg-transicion);
}

.woocommerce ul.products li.product .hbg-fav:hover,
.woocommerce ul.products li.product .hbg-tarjeta-carrito:hover,
.woocommerce ul.products li.product .hbg-tarjeta-carrito:focus-visible {
	color: var(--hbg-neon);
	border-color: var(--hbg-neon);
	transform: scale(1.1);
}

/* Mientras Woo procesa el alta por AJAX. */
.woocommerce ul.products li.product .hbg-tarjeta-carrito.loading {
	opacity: 0.55;
	pointer-events: none;
}

.woocommerce ul.products li.product .hbg-tarjeta-carrito.added {
	color: var(--hbg-negro);
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
}

/*
 * El enlace "Ver carrito" que WooCommerce agrega después de un alta por AJAX no
 * aporta nada acá: el cajón se abre solo.
 */
.woocommerce ul.products li.product .hbg-fav-fila + .added_to_cart,
.woocommerce ul.products li.product .hbg-fav-fila ~ .added_to_cart {
	display: none;
}

/* Red de seguridad por si Astra vuelve a inyectar el botón sobre la imagen. */
.astra-shop-thumbnail-wrap .ast-on-card-button.ast-select-options-trigger {
	display: none;
}

.woocommerce ul.products li.product .hbg-fav.is-activo {
	color: var(--hbg-neon);
	border-color: var(--hbg-neon);
}

.woocommerce ul.products li.product .hbg-fav.is-activo svg path {
	fill: var(--hbg-neon);
}

/*
 * Botón de compra: centrado, en el flujo normal, al pie de la tarjeta.
 *
 * Invierte respecto del resto del sitio a pedido: en reposo va blanco con texto
 * oscuro y al pasar el mouse pasa a verde con texto blanco.
 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	width: calc(100% - var(--hbg-e3) * 2);
	margin: var(--hbg-e2) var(--hbg-e3) var(--hbg-e3);
	padding-inline: var(--hbg-e3);
	background-color: #ffffff;
	color: var(--hbg-negro);
	border-radius: 0;
	box-shadow: none;
	font-size: 0.85rem;
	line-height: 1.2;
	text-align: center;
	transition: background-color var(--hbg-transicion),
	            color var(--hbg-transicion),
	            box-shadow var(--hbg-transicion);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible,
.woocommerce ul.products li.product .added_to_cart:hover {
	background-color: var(--hbg-neon);
	color: #ffffff;
	transform: none;
	box-shadow: 0 0 16px rgba(57, 255, 20, 0.45);
}

/* =========================================================================
   GRILLA DE MARCAS (paso categoría → marca)
   ========================================================================= */

.hbg-paso {
	margin: 0 0 var(--hbg-e4);
	color: var(--hbg-texto-suave);
	font-size: 0.9rem;
}

.woocommerce ul.products li.product.hbg-marca {
	border-radius: 0;
	text-align: center;
}

.hbg-marca > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 150px;
	padding: var(--hbg-e4);
	text-decoration: none;
}

.hbg-marca__inicial {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	background: rgba(57, 255, 20, 0.1);
	border: 1px solid var(--hbg-borde-fuerte);
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.5rem;
	font-weight: 800;
}

.hbg-marca__nombre {
	margin: var(--hbg-e2) 0 0;
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--hbg-texto);
}

.hbg-marca__n {
	color: var(--hbg-texto-tenue);
	font-size: 0.78rem;
}

.hbg-marca:hover .hbg-marca__inicial {
	background: rgba(57, 255, 20, 0.2);
	border-color: var(--hbg-neon);
}

/* =========================================================================
   SIDEBAR DE FILTROS — más compacto y con la tipografía de la marca
   ========================================================================= */

@media (min-width: 1024px) {
	.hbg-tienda {
		/* Antes 264px: el panel se comía demasiado ancho del listado. */
		grid-template-columns: 216px minmax(0, 1fr);
		gap: var(--hbg-e5);
	}
}

.hbg-filtros {
	font-family: var(--hbg-fuente-texto);
	font-size: 0.82rem;
}

.hbg-filtros__titulo {
	font-size: 1rem;
}

.hbg-grupo {
	padding-block: 2px;
}

.hbg-grupo__titulo {
	min-height: 36px;
	font-size: 0.82rem;
	letter-spacing: 0.01em;
}

.hbg-grupo__cuerpo {
	padding-block: 2px var(--hbg-e2);
}

.hbg-opcion {
	min-height: 32px;
	padding: 3px var(--hbg-e2);
	font-size: 0.8rem;
}

.hbg-opcion__total {
	font-size: 0.72rem;
}

.hbg-opciones--scroll {
	max-height: 220px;
}

.hbg-filtros__limpiar {
	padding: 5px var(--hbg-e2);
	font-size: 0.78rem;
}

.hbg-precio__campo label {
	font-size: 0.7rem;
}

.hbg-precio__campo input {
	min-height: 36px;
	font-size: 0.85rem;
}

.hbg-precio__ayuda {
	font-size: 0.72rem;
}

.hbg-precio__aplicar {
	min-height: 36px;
	font-size: 0.82rem;
}

.hbg-buscar-marca {
	min-height: 34px;
	font-size: 0.8rem;
}

/* Aviso del acordeón progresivo: los grupos que dependen de una elección
   previa quedan atenuados hasta que haya algo seleccionado. */
.hbg-grupo__pista {
	display: block;
	padding: var(--hbg-e2) var(--hbg-e3);
	color: var(--hbg-texto-tenue);
	font-size: 0.74rem;
	font-style: italic;
}

/* =========================================================================
   FICHA DE PRODUCTO — galería

   La foto principal venía de 600x600 y se comía la pantalla, dejando el precio
   y el botón de compra fuera del primer viewport. Se achica un escalón; el
   `max-width` va en px y no en %, para que no vuelva a crecer si cambia el
   ancho del contenedor.
   ========================================================================= */

.single-product .woocommerce-product-gallery {
	max-width: 480px;
	margin-inline: auto;
}

@media (min-width: 992px) {
	.single-product .woocommerce-product-gallery {
		margin-inline: 0;
	}
}

/*
 * El cursor de lupa sobre la foto lo ponía jquery.zoom, que ya no se carga.
 * Se deja el cursor normal para no prometer una ampliación que ahí no ocurre:
 * la ampliación vive en el botón de lupa.
 */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery__image img {
	cursor: default;
}

/* =========================================================================
   BOTÓN DE LUPA — ahora es el ÚNICO acceso visible a la ampliación

   El de WooCommerce sólo existe con el zoom activo, así que lo imprime
   `hbg_lupa_galeria()` y lo dispara `tienda.js`.
   ========================================================================= */

.woocommerce div.product .woocommerce-product-gallery .hbg-lupa {
	position: absolute;
	top: var(--hbg-e3);
	inset-inline-end: var(--hbg-e3);
	z-index: 4;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	background: var(--hbg-negro);
	border: 1px solid var(--hbg-neon);
	border-radius: 50%;
	color: var(--hbg-neon);
	cursor: pointer;
	opacity: 0.92;
	transition: background-color var(--hbg-transicion),
	            color var(--hbg-transicion),
	            transform var(--hbg-transicion),
	            opacity var(--hbg-transicion);
}

.woocommerce div.product .woocommerce-product-gallery .hbg-lupa:hover,
.woocommerce div.product .woocommerce-product-gallery .hbg-lupa:focus-visible {
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	opacity: 1;
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product .woocommerce-product-gallery .hbg-lupa:hover {
		transform: none;
	}
}

/* =========================================================================
   FICHA DE PRODUCTO — selector de variación

   El `<select>` heredaba el ancho de la celda de la tabla `.variations` y salía
   de 552px, o sea toda la columna derecha, para mostrar «Elige una opción».
   Se lo lleva a 240px (~43% de lo anterior), que es lo que necesita el texto
   más largo del catálogo con aire para la flecha.
   ========================================================================= */

/*
 * Sobre la especificidad: WooCommerce fija el ancho con
 *
 *     .woocommerce-js div.product form.cart .variations select
 *     { width: 100%; min-width: 75% }
 *
 * que empata en especificidad con `.woocommerce div.product …` pero su hoja
 * carga DESPUÉS de la del tema, así que ganaba por orden. Anteponer
 * `.single-product` suma una clase y resuelve sin `!important`. El
 * `min-width: 75%` también hay que pisarlo o el control no baja de 414px.
 *
 * OJO con el punto de unión: `.single-product` y `.woocommerce` viven en el
 * MISMO elemento (el <body>), así que van pegadas. Con un espacio en medio el
 * selector pide que `.woocommerce` sea descendiente de `.single-product` y no
 * matchea nunca — me pasó en la primera versión de esta regla.
 */
.single-product.woocommerce div.product form.cart .variations td.value,
.single-product.woocommerce-js div.product form.cart .variations td.value {
	/* La celda ya no se estira: sin esto el <select> sigue midiendo el ancho de
	   la tabla aunque se le fije un ancho al control. */
	width: auto;
}

.single-product.woocommerce div.product form.cart .variations select,
.single-product.woocommerce-js div.product form.cart .variations select {
	width: 240px;
	max-width: 100%;
	min-width: 0;
}

/* En pantallas chicas el control vuelve a ocupar todo el ancho: 240px al lado
   de un dedo es incómodo y ahí sobra espacio horizontal. */
@media (max-width: 767px) {
	.single-product.woocommerce div.product form.cart .variations select,
	.single-product.woocommerce-js div.product form.cart .variations select {
		width: 100%;
	}
}


/* =========================================================================
   FICHA DE PRODUCTO — nombre del producto

   Astra lo fija en `.entry-title { font-size: 1.25rem }` (20px) desde su hoja
   inline del personalizador, que carga después de esta. `.entry-title` sola es
   (0,1,0); acá se usan tres clases para ganar por especificidad y no depender
   del orden de carga.
   ========================================================================= */

.single-product .product_title.entry-title {
	/*
	 * 20px -> 24px, un 20% más. El `clamp` lo deja en 22px (+10%) en pantallas
	 * angostas y sube a 24px a partir de unos 800px de ancho: 24px con la caja
	 * de texto de un celular parte los nombres largos del catálogo —hay varios
	 * de tres palabras con guión— en una línea de más.
	 */
	font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.5rem);
	/* Astra deja `line-height` en 24px fijos, que con 24px de fuente pega las
	   dos líneas de los nombres largos. En proporción respira. */
	line-height: 1.2;
}

/* =========================================================================
   FICHA DE PRODUCTO — selector de variación destacado

   Todo cuelga de `.hbg-con-variantes`, que el PHP pone en el <body> sólo
   cuando el producto tiene DOS O MÁS variantes reales para elegir (ver
   `hbg_body_class_variantes`). En un producto simple no existe ni el selector
   ni la clase, así que ninguna de estas reglas llega a evaluarse.
   ========================================================================= */

/*
 * El panel: el bloque entero se despega del resto del formulario con un fondo
 * apenas verde. `border-collapse` está en `separate`, así que el <table> acepta
 * padding; con `collapse` el padding de una tabla se ignora y esto no andaría.
 */
.hbg-con-variantes.single-product div.product form.cart .variations,
.hbg-con-variantes.single-product.woocommerce-js div.product form.cart .variations {
	padding: var(--hbg-e3) var(--hbg-e4);
	background: rgba(57, 255, 20, 0.05);
	border: 1px solid rgba(57, 255, 20, 0.28);
	border-radius: var(--hbg-radio-sm);
}

.hbg-con-variantes.single-product div.product form.cart .variations th,
.hbg-con-variantes.single-product.woocommerce-js div.product form.cart .variations th {
	color: var(--hbg-neon);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * El campo: borde de 2px en el verde de marca y un halo permanente. El halo va
 * como segunda sombra del `box-shadow` que también anima el pulso, para que al
 * terminar la animación el campo no pierda el resalte.
 */
.hbg-con-variantes.single-product div.product form.cart .variations select,
.hbg-con-variantes.single-product.woocommerce-js div.product form.cart .variations select {
	border: 2px solid var(--hbg-neon);
	box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.12);
	font-weight: 600;

	/*
	 * Dos pulsos y se calla. `animation-iteration-count: 2` es lo que garantiza
	 * que no quede latiendo en loop: no hay JS que lo apague, se apaga solo.
	 * El retraso deja que la página termine de pintar; disparando en el mismo
	 * cuadro del primer render el pulso se pierde entre el resto que aparece.
	 */
	animation: hbg-pulso-variante 1200ms ease-out 500ms 2;
}

@keyframes hbg-pulso-variante {
	0%, 100% { box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.12); }
	50%      { box-shadow: 0 0 0 9px rgba(57, 255, 20, 0.28); }
}

/* El foco tiene que seguir distinguiéndose del resalte de reposo. */
.hbg-con-variantes.single-product div.product form.cart .variations select:focus-visible,
.hbg-con-variantes.single-product.woocommerce-js div.product form.cart .variations select:focus-visible {
	outline: 2px solid var(--hbg-neon);
	outline-offset: 3px;
	/* Si el pulso todavía está corriendo cuando llega el foco, se corta: ya
	   consiguió lo que buscaba. */
	animation: none;
}

@media (max-width: 767px) {
	.hbg-con-variantes.single-product div.product form.cart .variations,
	.hbg-con-variantes.single-product.woocommerce-js div.product form.cart .variations {
		padding: var(--hbg-e3);
	}
}

/*
 * `style.css` ya recorta toda animación con `prefers-reduced-motion`, pero ahí
 * la deja en una iteración de 0,01ms: el campo igual queda resaltado, que es lo
 * que importa. Acá sólo se la saca del todo para no dejar un parpadeo suelto.
 */
@media (prefers-reduced-motion: reduce) {
	.hbg-con-variantes.single-product div.product form.cart .variations select,
	.hbg-con-variantes.single-product.woocommerce-js div.product form.cart .variations select {
		animation: none;
	}
}

/* =========================================================================
   AGOTADO

   Astra dibuja su cartel `.ast-shop-product-out-of-stock` con texto
   #e7f6ff sobre fondo rgba(255,255,255,.88): blanco sobre blanco, contraste
   1,05:1. En la práctica no se leía; sólo aparecía un instante al pasar el
   mouse, porque ahí el hover del enlace le cambiaba el color al texto.
   ========================================================================= */

.woocommerce ul.products li.product .ast-shop-product-out-of-stock {
	/* Franja oscura sobre la foto, centrada en la mitad de la imagen. */
	background: rgba(13, 13, 13, 0.86);
	color: #ffffff;
	border-block: 1px solid var(--hbg-error);
	border-radius: 0;
	padding: var(--hbg-e2) var(--hbg-e3);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Encima de la foto y del corazón, que también flota. */
	z-index: 3;
}

/* El hover del enlace le cambiaba el color al texto y lo hacía aparecer y
   desaparecer. Ahora el cartel se lee igual en los dos estados. */
.woocommerce ul.products li.product a:hover .ast-shop-product-out-of-stock,
.woocommerce ul.products li.product a:focus .ast-shop-product-out-of-stock {
	color: #ffffff;
}

/* La tarjeta agotada se apaga un poco, para que la que sí se puede comprar
   gane el ojo. La foto, no el texto: el nombre y el precio tienen que seguir
   legibles. */
.woocommerce ul.products li.product.outofstock img {
	opacity: 0.55;
}

.woocommerce ul.products li.product.outofstock:hover img {
	opacity: 0.75;
}

/* ------------------------- ficha del producto ------------------------- */

/*
 * WooCommerce lo pinta en rojo puro (#f00) sobre el negro del sitio. Pasa el
 * mínimo de contraste por poco, pero el rojo saturado sobre negro se lee mal
 * de verdad. `--hbg-error` es el mismo rojo ya aclarado que usa el resto del
 * sitio para los avisos.
 */
.single-product.woocommerce div.product .stock.out-of-stock,
.single-product.woocommerce-js div.product .stock.out-of-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--hbg-e2);
	margin-bottom: var(--hbg-e4);
	padding: var(--hbg-e2) var(--hbg-e4);
	background: rgba(255, 92, 92, 0.12);
	border: 1px solid rgba(255, 92, 92, 0.55);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-error);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Punto rojo a la izquierda: se reconoce antes que el texto. */
.single-product.woocommerce div.product .stock.out-of-stock::before,
.single-product.woocommerce-js div.product .stock.out-of-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hbg-error);
}