/**
 * Barra superior fija, buscador, cuenta y carrito.
 *
 * No se tocan los colores del menú: siguen saliendo de la configuración de
 * Astra en el Customizer. Acá sólo se define lo nuevo, usando los mismos tokens
 * de marca para que quede integrado.
 */

/* =========================================================================
   CONTENEDOR FIJO
   ========================================================================= */

.hbg-sticky {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--hbg-negro);
	transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Al bajar se esconde entero; al subir vuelve. Lo alterna el JS. */
.hbg-sticky[data-oculto="true"] {
	transform: translateY(-100%);
}

/* La sombra sólo aparece cuando la página ya se desplazó, para que en el tope
   la barra se funda con el fondo. */
.hbg-sticky[data-desplazado="true"] {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.hbg-sticky {
		transition: none;
	}
	.hbg-sticky[data-oculto="true"] {
		transform: none;
	}
}

/* =========================================================================
   BUSCADOR
   ========================================================================= */

.hbg-buscador {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 560px;
}

/*
 * El selector lleva `input` adelante a propósito: Astra pinta el fondo con
 * `input[type="search"]`, que tiene más especificidad que una clase suelta, y
 * por eso el campo se veía blanco.
 */
.hbg-buscador input.hbg-buscador__campo,
.hbg-buscador input[type="search"].hbg-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 46px 0 var(--hbg-e4);
	background: var(--hbg-superficie-2);
	border: 2px solid var(--hbg-borde-fuerte);
	border-radius: var(--hbg-radio-full);
	color: var(--hbg-texto);
	font-size: 0.95rem;
	box-shadow: none;
	transition: border-color var(--hbg-transicion), box-shadow var(--hbg-transicion);
}

.hbg-buscador input.hbg-buscador__campo::placeholder {
	color: var(--hbg-texto-tenue);
	opacity: 1;
}

.hbg-buscador input.hbg-buscador__campo:focus,
.hbg-buscador input[type="search"].hbg-buscador__campo:focus {
	background: var(--hbg-superficie-2);
	border-color: var(--hbg-neon);
	box-shadow: var(--hbg-glow);
	outline: none;
}

/* Quitamos la cruz nativa de los input[type=search] en WebKit: choca con
   nuestro botón de lupa. */
.hbg-buscador__campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.hbg-buscador__boton {
	position: absolute;
	inset-inline-end: 4px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--hbg-transicion);
}

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

/* ---------------------------- sugerencias ---------------------------- */

/*
 * Estética común de TODOS los desplegables del sitio.
 *
 * El del buscador es la referencia; el menú de cuenta y el submenú de "Tienda"
 * se enganchan a estas mismas reglas para que no parezcan tres componentes de
 * sitios distintos.
 */
.hbg-sugerencias,
.hbg-cuenta__menu,
.main-navigation ul ul {
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-neon);
	border-radius: var(--hbg-radio);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
	padding: var(--hbg-e2);
}

.hbg-sugerencias {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline: 0;
	z-index: 60;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hbg-sugerencia {
	display: flex;
	align-items: center;
	gap: var(--hbg-e3);
	padding: var(--hbg-e2);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto);
	text-decoration: none;
	transition: background-color var(--hbg-transicion);
}

.hbg-sugerencia:hover,
.hbg-sugerencia.is-activa {
	background: rgba(57, 255, 20, 0.1);
}

.hbg-sugerencia__img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--hbg-radio-sm);
	background: var(--hbg-negro);
}

.hbg-sugerencia__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.hbg-sugerencia__nombre {
	display: block;
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	/* Una sola línea: el desplegable tiene que dejar ver varios resultados. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hbg-sugerencia__meta {
	display: block;
	color: var(--hbg-texto-tenue);
	font-size: 0.75rem;
}

/*
 * El precio no puede quedarse con la fila.
 *
 * Con `flex: 0 0 auto` + `nowrap`, un precio largo —el rango de un producto
 * variable— tomaba todo el ancho y, como el nombre tiene `min-width: 0`, lo
 * aplastaba a cero: el texto se partía en una letra por renglón. El origen se
 * arregló en PHP (`hbg_precio_sugerencia()`), pero acá queda el tope por si
 * alguna moneda o formato futuro vuelve a alargarlo.
 */
.hbg-sugerencia__precio {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 40%;
	color: var(--hbg-neon);
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hbg-sugerencia__agotado {
	flex: 0 0 auto;
	color: var(--hbg-texto-tenue);
	font-size: 0.75rem;
}

.hbg-sugerencias__pie,
.hbg-sugerencias__vacio {
	display: block;
	padding: var(--hbg-e3);
	color: var(--hbg-texto-suave);
	font-size: 0.85rem;
	text-align: center;
	text-decoration: none;
}

.hbg-sugerencias__pie {
	margin-top: var(--hbg-e1);
	border-top: 1px solid var(--hbg-borde);
	color: var(--hbg-neon);
	font-weight: 600;
}

.hbg-sugerencias__cargando {
	padding: var(--hbg-e4);
	color: var(--hbg-texto-tenue);
	font-size: 0.85rem;
	text-align: center;
}

/* =========================================================================
   CUENTA
   ========================================================================= */

.hbg-cuenta {
	position: relative;
}

.hbg-cuenta__disparador {
	display: inline-flex;
	align-items: center;
	gap: var(--hbg-e2);
	height: 42px;
	padding-inline: var(--hbg-e3);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--hbg-radio-full);
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color var(--hbg-transicion),
	            border-color var(--hbg-transicion),
	            color var(--hbg-transicion);
}

/* Miniatura de la foto de perfil, cuando el usuario subió una. */
.hbg-cuenta__foto {
	width: 24px;
	height: 24px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

/*
 * Hover del botón de cuenta (y del carrito, que es el mismo patrón al lado).
 *
 * Antes el fondo se ponía blanco —lo pintaba una regla genérica de Astra sobre
 * `button:hover`— y como el ícono y el texto también son claros, el contenido
 * desaparecía. Ahora sigue el mismo criterio que el resto del sitio: fondo verde
 * de marca y contenido en blanco.
 *
 * Va con `background-color` explícito y selector propio para ganarle a la regla
 * genérica del tema sin recurrir a `!important`.
 */
.hbg-utilbar .hbg-cuenta__disparador:hover,
.hbg-utilbar .hbg-cuenta__disparador:focus-visible,
.hbg-cuenta__disparador:hover,
.hbg-cuenta__disparador:focus-visible,
.hbg-utilbar .hbg-contador-carrito:hover,
.hbg-utilbar .hbg-contador-carrito:focus-visible {
	background-color: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
	box-shadow: 0 0 14px rgba(57, 255, 20, 0.4);
}

/* El SVG hereda `currentColor`, así que acompaña al texto. */
.hbg-cuenta__disparador:hover svg,
.hbg-utilbar .hbg-contador-carrito:hover svg {
	color: #ffffff;
}

/* El contador del carrito invierte para seguir legible sobre el verde. */
.hbg-utilbar .hbg-contador-carrito:hover .hbg-contador-carrito__n {
	background: #ffffff;
	color: var(--hbg-negro);
}

.hbg-cuenta__texto {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hbg-cuenta__menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: 60;
	min-width: 232px;
	display: flex;
	flex-direction: column;
}

/* `hidden` pierde contra `display:flex`, así que hay que reponerlo. */
.hbg-cuenta__menu[hidden] {
	display: none;
}

.hbg-cuenta__menu a {
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
	min-height: 42px;
	padding-inline: 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-cuenta__menu a:hover {
	background: rgba(57, 255, 20, 0.1);
	color: var(--hbg-texto);
}

.hbg-cuenta__salir {
	margin-top: var(--hbg-e1);
	border-top: 1px solid var(--hbg-borde);
	border-radius: 0 !important;
	color: var(--hbg-texto-tenue) !important;
}

.hbg-google {
	margin-bottom: var(--hbg-e1);
	background: #ffffff;
	color: #1f1f1f !important;
	font-weight: 600;
}

.hbg-google:hover {
	background: #f1f1f1 !important;
	color: #000000 !important;
}

/* =========================================================================
   CARRITO EN LA BARRA
   ========================================================================= */

.hbg-utilbar .hbg-contador-carrito {
	height: 42px;
	padding-inline: var(--hbg-e3);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: var(--hbg-radio-full);
	transition: border-color var(--hbg-transicion), color var(--hbg-transicion);
}

.hbg-utilbar .hbg-contador-carrito:hover {
	border-color: var(--hbg-neon);
}

.hbg-utilbar .hbg-contador-carrito__n {
	top: -4px;
	inset-inline-start: 24px;
}

/* =========================================================================
   CORAZÓN DE FAVORITOS
   ========================================================================= */

.hbg-fav {
	position: absolute;
	top: var(--hbg-e3);
	inset-inline-end: var(--hbg-e3);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: rgba(13, 13, 13, 0.72);
	backdrop-filter: blur(4px);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: 50%;
	color: var(--hbg-texto-suave);
	cursor: pointer;
	transition: color var(--hbg-transicion), border-color var(--hbg-transicion),
	            transform var(--hbg-transicion);
}

.hbg-fav:hover {
	color: var(--hbg-neon);
	border-color: var(--hbg-neon);
	transform: scale(1.08);
}

.hbg-fav.is-activo {
	color: var(--hbg-neon);
	border-color: var(--hbg-neon);
}

.hbg-fav.is-activo svg path {
	fill: var(--hbg-neon);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Hasta 900px el buscador pasa a una fila propia debajo de las acciones. */
@media (max-width: 900px) {
	.hbg-utilbar__inner {
		flex-wrap: wrap;
		gap: var(--hbg-e2);
		padding-block: var(--hbg-e2);
	}

	.hbg-utilbar__acciones {
		order: 1;
		margin-inline-start: auto;
	}

	.hbg-utilbar__buscador {
		order: 2;
		flex-basis: 100%;
	}

	.hbg-buscador {
		max-width: none;
	}

	.hbg-cuenta__texto {
		display: none;
	}

}

@media (max-width: 480px) {
}

/* =========================================================================
   WHATSAPP FLOTANTE
   ========================================================================= */

.hbg-wa {
	position: fixed;
	inset-inline-end: clamp(12px, 2.5vw, 26px);
	inset-block-end: clamp(12px, 2.5vw, 26px);
	/* Por debajo de los cajones (900/1000) para no taparlos cuando se abren. */
	z-index: 850;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--hbg-e3);
}

.hbg-wa__boton {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	/* El disco verde y su degradé los dibuja el SVG, no el botón: así el color
	   acompaña al logo en cualquier tamaño en vez de ser un círculo aparte
	   debajo. El botón queda de puro andamio. */
	background: none;
	border: none;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
	transition: transform var(--hbg-transicion), box-shadow var(--hbg-transicion);
}

.hbg-wa__boton .hbg-wa__glifo {
	display: block;
}

.hbg-wa__boton:hover {
	transform: scale(1.07);
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
}

/* Anillo que late para llamar la atención sin ser molesto. */
.hbg-wa__pulso {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #25D366;
	animation: hbg-wa-pulso 2.6s ease-out infinite;
	pointer-events: none;
}

@keyframes hbg-wa-pulso {
	0%        { transform: scale(1);    opacity: 0.65; }
	70%, 100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hbg-wa__pulso { animation: none; opacity: 0; }
}

.hbg-wa__panel {
	width: min(86vw, 310px);
	padding: var(--hbg-e2);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-neon);
	border-radius: var(--hbg-radio);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.hbg-wa__panel[hidden] { display: none; }

.hbg-wa__cabecera {
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
	padding: var(--hbg-e2);
	border-bottom: 1px solid var(--hbg-borde);
}

.hbg-wa__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.hbg-wa__titulo {
	display: block;
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.9rem;
	color: var(--hbg-texto);
}

.hbg-wa__estado {
	display: block;
	font-size: 0.74rem;
	color: #25D366;
}

.hbg-wa__cerrar {
	margin-inline-start: auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto-tenue);
	cursor: pointer;
}

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

.hbg-wa__intro {
	margin: var(--hbg-e3) var(--hbg-e2) var(--hbg-e2);
	font-size: 0.82rem;
	color: var(--hbg-texto-suave);
}

.hbg-wa__opciones {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

.hbg-wa__opcion:hover {
	background: rgba(57, 255, 20, 0.1);
	color: var(--hbg-neon);
}

.hbg-wa__opcion--humano {
	margin-top: var(--hbg-e1);
	border-top: 1px solid var(--hbg-borde);
	color: var(--hbg-texto-tenue);
}

/* =========================================================================
   UTILIDADES DEL HEADER — DOS FILAS AL EXTREMO DERECHO

   Layout de la fila primaria, con el menú ya movido a la columna central
   (opción `astra-settings[header-desktop-items]`):

     ┌──────────────────────────────────────────────────────────────────┐
     │ LOGO            Inicio Tienda Servicios Contacto   [👤] [🛒]     │
     │                                                    [ buscador  ] │
     └──────────────────────────────────────────────────────────────────┘

   El bloque de utilidades se estira a lo alto de la fila y reparte sus dos
   hijos con `space-between`: acciones arriba, buscador abajo.
   ========================================================================= */

.hbg-utilbar {
	/* Contexto de apilamiento propio: los desplegables (sugerencias y menú de
	   cuenta) tienen que quedar por encima del resto de la fila. */
	position: relative;
	z-index: 20;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hbg-e2);
	/* Que ocupe todo el alto de la fila: es lo que separa las dos filas. */
	align-self: stretch;
	margin-inline-start: auto;
	padding-block: var(--hbg-e3);
}

/*
 * El menú vuelve a estar centrado verticalmente, que es como Astra lo trae.
 * Las reglas que lo bajaban al pie eran para que compartiera línea de base con
 * el buscador; ahora el menú está en el centro del header y el buscador a la
 * derecha, así que ya no tienen que alinearse entre sí.
 */
.hbg-sticky .ast-primary-header-bar .ast-builder-grid-row {
	align-items: stretch;
}

/*
 * El menú va pegado al logo, en la columna izquierda.
 *
 * Convive con el logo en `primary_left` (opción
 * `astra-settings[header-desktop-items]`), así que la columna izquierda toma
 * el ancho de los dos y el bloque de utilidades queda a la derecha.
 *
 * Acá NO se toca `grid-template-columns`: se dejan los tracks que calcula
 * Astra por contenido. Hubo una versión con
 * `minmax(0, 1fr) auto minmax(0, 1fr)` para centrar el menú en la columna del
 * medio; se revirtió a pedido, el menú vuelve a la izquierda.
 */

/* La columna derecha tiene que poder crecer y empujar todo al borde. */
.hbg-sticky .site-header-primary-section-right {
	flex: 1 1 auto;
	justify-content: flex-end;
	align-items: stretch;
}

/* El logo y el menú, juntos y arrimados al borde izquierdo. */
.hbg-sticky #ast-desktop-header .site-header-primary-section-left {
	flex: 0 0 auto;
	justify-content: flex-start;
}

/*
 * Los ítems del menú ocupan TODO el alto de la fila, con el texto centrado
 * adentro.
 *
 * No es cosmético: el submenú se posiciona con `top: 100%` sobre el `<li>`. Con
 * el `<li>` de 80px centrado en una fila de 190, el panel abría en y=135, es
 * decir 55px por encima del borde del header, y le tapaba la esquina izquierda
 * al buscador (que arranca en y=138). Estirando el `<li>`, `top: 100%` cae
 * justo en el borde inferior del header.
 *
 * Hay que estirar la CADENA COMPLETA. Medido: la sección mide 190px pero todo
 * lo que cuelga de ella —envoltorio del builder, alineador, nav y `<ul>`—
 * quedaba en 80px centrado, porque la sección usa `align-items: center` y los
 * intermedios son `display: block`, que no se estiran solos.
 *
 * Se estira SÓLO el bloque del menú, con `align-self`, y no la sección que lo
 * contiene: ahora el menú comparte columna con el logo, y un
 * `align-items: stretch` en la sección deformaría también al logo.
 *
 * Beneficio extra: el área sensible al hover pasa a ser toda la franja del
 * menú, no una banda de 80px en el medio.
 */
.hbg-sticky #ast-desktop-header .ast-builder-menu-1 {
	align-self: stretch;
}

.hbg-sticky #ast-desktop-header .ast-builder-menu-1,
.hbg-sticky #ast-desktop-header .ast-main-header-bar-alignment,
.hbg-sticky #ast-desktop-header .main-header-bar-navigation,
.hbg-sticky #ast-desktop-header nav.site-navigation,
.hbg-sticky #ast-desktop-header .main-navigation {
	height: 100%;
}

.hbg-sticky #ast-desktop-header .main-header-menu {
	align-self: stretch;
	height: 100%;
}

/* `height: auto` es imprescindible: Astra le fija un alto al ítem y con un alto
   definido `align-self: stretch` no hace nada. */
.hbg-sticky #ast-desktop-header .main-header-menu > .menu-item {
	align-self: stretch;
	height: auto;
	display: flex;
	align-items: center;
}

.hbg-utilbar__acciones {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
}

/* =========================================================================
   ANCHO DEL BUSCADOR — 512px

   El borde DERECHO ya coincide exacto con el del ícono de carrito (medido: 0px
   de diferencia a 1280, 1440 y 1920), y así se mantiene: los dos cuelgan del
   mismo borde del bloque de utilidades.

   Los 512px salen de una cuenta, no de tantear. En la ficha de producto la
   columna derecha —breadcrumb, título, precio y selector de variación— arranca
   siempre en el mismo eje vertical:

       galería (480) + separación entre columnas (168) − inset del header (40)

   Con 512px de ancho, el borde IZQUIERDO del buscador cae justo sobre ese eje.
   Verificado a 1440 (columna en x=768, buscador 768→1280) y a 1920 (columna en
   x=1008, buscador 1008→1520): el número da 512 en los dos, porque el
   contenedor está topeado en 1200px y la galería y la separación son fijas.

   Antes eran 560px a 1920 y 461px a 1440, es decir el buscador se estiraba 48px
   más a la izquierda que la columna.
   ========================================================================= */

.hbg-utilbar__buscador {
	flex: 0 0 auto;
	min-width: 0;
	width: 512px;
	/* Nunca más ancho que su columna del grid. */
	max-width: 100%;
}

.hbg-utilbar .hbg-buscador {
	max-width: none;
	width: 100%;
}

.hbg-utilbar .hbg-buscador input.hbg-buscador__campo {
	height: 40px;
	font-size: 0.92rem;
}

.hbg-utilbar .hbg-buscador__boton {
	width: 34px;
	height: 34px;
}

.hbg-utilbar .hbg-cuenta__disparador,
.hbg-utilbar .hbg-contador-carrito {
	height: 36px;
}

/*
 * Por debajo de 1200px el contenedor deja de estar topeado y los 512px ya no
 * corresponden a nada: el buscador cede ancho antes que el menú, pero nunca
 * baja de 380px, que es donde el desplegable empieza a apretarse.
 */
@media (max-width: 1200px) {
	.hbg-utilbar__buscador {
		width: clamp(380px, 30vw, 440px);
	}
}

/* =========================================================================
   HEADER MÓVIL

   Astra imprime dos headers y esconde uno con CSS. `.hbg-utilbar` vive en el de
   escritorio; en el móvil las piezas van sueltas: las acciones al lado del menú
   hamburguesa y el buscador en franja propia debajo.
   ========================================================================= */

/* La franja del buscador móvil no existe en escritorio. */
.hbg-busqueda-movil {
	display: none;
}

.hbg-acciones-movil {
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
	margin-inline-end: var(--hbg-e2);
}

@media (max-width: 921px) {
	.hbg-busqueda-movil {
		display: block;
		padding: var(--hbg-e2) var(--hbg-e4) var(--hbg-e3);
		background: var(--hbg-negro);
		border-top: 1px solid var(--hbg-borde);
	}

	.hbg-busqueda-movil .hbg-buscador {
		max-width: none;
	}

	/* Con el pulgar, 44px es el mínimo cómodo. */
	.hbg-busqueda-movil .hbg-buscador input.hbg-buscador__campo {
		height: 44px;
	}

	.hbg-acciones-movil .hbg-cuenta__disparador,
	.hbg-acciones-movil .hbg-contador-carrito {
		height: 40px;
		padding-inline: var(--hbg-e2);
	}

	/* Sólo el ícono: el nombre no entra. */
	.hbg-cuenta__texto {
		display: none;
	}

	/* El desplegable de cuenta no puede desbordar la pantalla por la derecha. */
	.hbg-acciones-movil .hbg-cuenta__menu {
		min-width: 200px;
		max-width: calc(100vw - 24px);
	}
}

/* =========================================================================
   BOTÓN DE CUENTA CON SESIÓN INICIADA

   Verde permanente, no sólo en hover: es el indicador de que hay sesión activa.
   ========================================================================= */

/*
 * Va con `background-color` y tres clases de especificidad (0,3,0) porque Astra
 * pinta los `button` del header con reglas propias bastante específicas. Sin
 * esto haría falta `!important`.
 */
.hbg-utilbar .hbg-cuenta__disparador.is-logueado,
.hbg-cuenta__disparador.is-logueado {
	background-color: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
}

.hbg-cuenta__disparador.is-logueado svg {
	color: #ffffff;
}

/* Con el desplegable abierto se apaga un poco, para que se lea como "activo". */
.hbg-utilbar .hbg-cuenta__disparador.is-logueado:hover,
.hbg-utilbar .hbg-cuenta__disparador.is-logueado[aria-expanded="true"],
.hbg-cuenta__disparador.is-logueado:hover,
.hbg-cuenta__disparador.is-logueado[aria-expanded="true"] {
	background-color: var(--hbg-lima);
	border-color: var(--hbg-lima);
	color: var(--hbg-negro);
	box-shadow: 0 0 14px rgba(196, 229, 56, 0.45);
}

.hbg-cuenta__disparador.is-logueado:hover svg,
.hbg-cuenta__disparador.is-logueado[aria-expanded="true"] svg {
	color: var(--hbg-negro);
}

/* =========================================================================
   DESPLEGABLE DE CUENTA — APERTURA POR HOVER
   ========================================================================= */

/*
 * El menú abre 8px por debajo del botón. Ese hueco hace que el `mouseleave` se
 * dispare al cruzarlo con el mouse y el menú se cierre en la cara del usuario.
 * Este puente invisible cubre la separación sin moverlo visualmente.
 */
.hbg-cuenta__menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: 10px;
}

.hbg-cuenta__menu a svg {
	flex: 0 0 auto;
	opacity: 0.75;
}

.hbg-cuenta__menu a:hover svg {
	opacity: 1;
	color: var(--hbg-neon);
}

/* Encabezado del desplegable: nombre de quien tiene la sesión abierta. */
.hbg-cuenta__saludo {
	padding: var(--hbg-e2) var(--hbg-e3) var(--hbg-e3);
	margin-bottom: var(--hbg-e1);
	border-bottom: 1px solid var(--hbg-borde);
	color: var(--hbg-texto-tenue);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hbg-cuenta__saludo strong {
	display: block;
	margin-top: 2px;
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
}

/* =========================================================================
   AVISO FLOTANTE (favoritos sin sesión, etc.)
   ========================================================================= */

.hbg-aviso {
	position: fixed;
	inset-block-end: clamp(12px, 2.5vw, 26px);
	inset-inline-start: clamp(12px, 2.5vw, 26px);
	/* Por debajo del overlay de edad (99999) y por encima de los cajones. */
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: var(--hbg-e3);
	max-width: min(380px, calc(100vw - 24px));
	padding: var(--hbg-e3) var(--hbg-e4);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-neon);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
	color: var(--hbg-texto);
	font-size: 0.9rem;
	animation: hbg-aviso-entra 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes hbg-aviso-entra {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.hbg-aviso__accion {
	flex: 0 0 auto;
	padding: 8px var(--hbg-e3);
	background: #ffffff;
	color: var(--hbg-negro);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--hbg-transicion), color var(--hbg-transicion);
}

.hbg-aviso__accion:hover,
.hbg-aviso__accion:focus-visible {
	background: var(--hbg-neon);
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.hbg-aviso {
		animation: none;
	}
}