/*
 * components.css — Piezas.
 *
 * Convención: .bloque, .bloque__elemento, .bloque--variante.
 * Mobile first: los @media son siempre min-width.
 * Ningún valor literal: todo sale de tokens.css.
 */

/* =========================================================================
 * BOTONES
 *
 * El principal es NEGRO con texto blanco: 18.88:1, el par más fuerte del
 * sistema, y es el color de las cajas del packaging. El rosa quedó descartado
 * como fondo de botón porque con texto blanco da 1.86:1 y porque su borde
 * contra la página blanca da 1.86:1 contra los 3:1 que pide WCAG 1.4.11.
 *
 * Esquinas rectas: el packaging es anguloso y el logotipo geométrico. El radio
 * redondeado suaviza y abarata.
 * ====================================================================== */

.boton,
.single_add_to_cart_button,
.checkout-button,
.woocommerce-button,
.woocommerce-notices-wrapper .button,
#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--esp-2xs);
	min-height: var(--boton-alto);
	padding-inline: var(--esp-lg);
	border: var(--boton-borde) solid transparent;
	border-radius: var(--radio-nulo);
	font-family: var(--fuente-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	line-height: var(--alto-linea-ajustado);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion), opacity var(--transicion);
}

.boton--principal,
.single_add_to_cart_button,
.checkout-button,
.woocommerce-button,
.woocommerce-notices-wrapper .button,
#place_order {
	background-color: var(--color-accion);
	border-color: var(--color-accion);
	color: var(--color-accion-texto);
}

.boton--principal:hover,
.boton--principal:focus-visible,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
	background-color: var(--color-accion-hover);
	border-color: var(--color-accion-hover);
	color: var(--color-accion-texto);
}

.boton--secundario {
	background-color: transparent;
	border-color: var(--color-borde-fuerte);
	color: var(--color-texto);
}

.boton--secundario:hover,
.boton--secundario:focus-visible {
	background-color: var(--color-accion);
	color: var(--color-accion-texto);
}

/* Sobre superficies negras se invierte: ahí el rosa sí cumple, 10.14:1 */
.boton--inverso {
	background-color: var(--color-accion-inversa);
	border-color: var(--color-accion-inversa);
	color: var(--color-accion-inversa-texto);
}

.boton--inverso:hover,
.boton--inverso:focus-visible {
	background-color: var(--color-accion-inversa-hover);
	border-color: var(--color-accion-inversa-hover);
	color: var(--color-accion-inversa-texto);
}

.boton--contorno-claro {
	background-color: transparent;
	border-color: var(--color-texto-inverso);
	color: var(--color-texto-inverso);
}

.boton--contorno-claro:hover,
.boton--contorno-claro:focus-visible {
	background-color: var(--color-texto-inverso);
	color: var(--color-texto);
}

.boton--texto {
	min-height: var(--boton-alto);
	padding-inline: 0;
	border-color: transparent;
	color: var(--color-texto);
	text-decoration: none;
	border-block-end: 1px solid var(--color-borde-fuerte);
}

.boton--texto:hover {
	color: var(--color-enlace);
	border-block-end-color: var(--color-enlace);
}

/* Sobre fotografía oscura. Blanco da 18.88:1 contra el velo del hero, y al pasar
   el mouse va al rosa de marca, que sobre negro da 10.14:1 — el único lugar del
   sistema donde el rosa puede ser texto. */
.boton--texto-inverso {
	color: var(--color-texto-inverso);
	border-block-end-color: var(--color-texto-inverso);
}
.boton--texto-inverso:hover {
	color: var(--color-acento);
	border-block-end-color: var(--color-acento);
}

.boton--bloque { width: 100%; }

.boton--sm {
	min-height: calc(var(--boton-alto) - var(--esp-2xs));
	padding-inline: var(--esp-sm);
}

.boton--lg {
	min-height: calc(var(--boton-alto) + var(--esp-2xs));
	padding-inline: var(--esp-xl);
	font-size: var(--txt-sm);
}

/* Respuesta al toque.
 *
 * En un teléfono no existe el hover: sin esto, el único aviso de que el dedo
 * acertó llega cuando cambia la pantalla. Va sin transición a propósito — la
 * respuesta a un toque no se anima, ocurre. */
.boton:active,
.single_add_to_cart_button:active,
.checkout-button:active,
#place_order:active {
	transform: translateY(1px);
}

.boton:disabled,
.boton[aria-disabled="true"] {
	background-color: var(--color-accion-desactivada);
	border-color: var(--color-accion-desactivada);
	color: var(--color-accion-desactivada-texto);
	cursor: not-allowed;
	transform: none;
}

/* WooCommerce le pone .loading al botón mientras espera la respuesta del alta
   al carrito. Sin esto el cliente toca y no pasa nada durante medio segundo,
   que es el peor momento de toda la tienda para dejarlo sin respuesta. */
.boton.loading {
	opacity: 0.6;
	cursor: wait;
}

.single_add_to_cart_button,
.checkout-button { width: 100%; }

@media (min-width: 48em) {
	.single_add_to_cart_button,
	.checkout-button { width: auto; }
}

/* =========================================================================
 * LÍNEA DE CONFIANZA — negra con texto rosa, como el packaging
 *
 * Ocupa el lugar de dos cosas que se fueron: la barra de aviso que iba arriba de
 * todo, y la tira de beneficios con iconos que iba justo debajo del hero. Las
 * dos decían lo mismo, separadas por una fotografía.
 *
 * No lleva separación con el hero ni borde propio. El hero termina en negro y
 * esto es negro: se leen como una sola pieza. Un borde acá la devolvería al
 * estado de widget que tenía la tira.
 * ====================================================================== */

.linea-confianza {
	background-color: var(--color-fondo-inverso);
	color: var(--color-acento);
	text-align: center;
}

/* Un punto por debajo de la navegación. Es un respaldo, no un destino:
   compartir firma con los enlaces del menú los ponía al mismo nivel. */
.linea-confianza__texto {
	max-width: none;
	padding: var(--esp-xs) var(--margen-lateral);
	font-size: var(--txt-2xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	line-height: var(--alto-linea-ajustado);
	/* En teléfono las tres frases no entran en un renglón. Con flex se reparten
	   enteras en dos; con texto corrido se cortaría una por la mitad y el punto
	   separador podría quedar colgado al final de la línea. */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0 var(--esp-2xs);
}

.linea-confianza__separador { opacity: 0.55; }

/* =========================================================================
 * CABECERA
 * ====================================================================== */

/*
 * Negra, como el pie y como las cajas del packaging.
 *
 * El fondo y el color de texto los pone `.es-inverso` desde base.css; acá queda
 * solo la geometría. Y sin borde inferior: una barra negra sobre contenido
 * blanco ya se separa sola, y en la tienda el borde dibujaría una línea justo
 * donde la cabecera y la banda del título tienen que leerse como un solo bloque.
 */
.cabecera {
	position: sticky;
	top: 0;
	z-index: var(--z-cabecera);
	transition: box-shadow var(--transicion);
}

/* La sombra aparece recién cuando la cabecera se despegó del principio de la
   página. Puesta desde el primer píxel se ve pesada; no ponerla nunca deja que
   el contenido pase por debajo sin que se note que hay una capa encima.

   Sigue siendo la sombra clara aunque la barra sea negra: no se pinta sobre la
   cabecera, se pinta debajo, sobre el contenido de la página, que es blanco. */
.cabecera.esta-fija {
	box-shadow: var(--sombra-md);
}

/* Testigo de 1px que el JS inserta arriba de todo para enterarse, sin escuchar
   el scroll, de que la cabecera ya se despegó. El margen negativo lo deja sin
   ningún efecto sobre el layout. */
.centinela-cabecera {
	height: 1px;
	margin-block-end: -1px;
}

/*
 * En teléfono, tres columnas: 1fr · logo · 1fr.
 *
 * Menú y buscador a la izquierda, moneda y carrito a la derecha, el logotipo en
 * el medio. Con flex y `margin-inline: auto` el logo no se centra en la pantalla
 * sino en lo que sobra, y sobraba de un solo lado. Con dos columnas flexibles
 * iguales a los costados cae en el centro exacto, pase lo que pase a los lados.
 */
.cabecera__fila {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--esp-2xs);
	min-height: var(--header-alto);
}

.cabecera__grupo {
	display: flex;
	align-items: center;
	grid-column: 1;
	justify-self: start;
	/*
	 * El botón mide 44px para el dedo pero el ícono mide 24: sin este tirón, el
	 * trazo arranca 10px más adentro que las migas, el título y los chips, y la
	 * hamburguesa se ve despegada del borde. Es el mismo recurso que usan los
	 * íconos de redes del pie por el mismo motivo.
	 */
	margin-inline-start: -10px;
}

.cabecera__acciones {
	grid-column: 3;
	justify-self: end;
	/* Y el mismo tirón del otro lado, para que el carrito cierre contra el borde */
	margin-inline-end: -10px;
}

.cabecera__hamburguesa,
.cabecera__accion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--color-texto-inverso);
	text-decoration: none;
}

/* El hover NO puede ser --color-enlace: ese rosa oscurecido existe para texto
   sobre claro y contra el negro da 3.3:1. Acá va el rosa de marca, que sobre
   negro da 10.14:1. Es el mismo criterio que usa el pie con sus íconos. */
.cabecera__hamburguesa:hover,
.cabecera__accion:hover { color: var(--color-acento); }

.cabecera__logo {
	display: flex;
	align-items: center;
	margin-inline: auto;
}

/* El logotipo en texto: Bodoni con el tracking del logo real, en rosa. Es
   exactamente lo que ya hace .pie__marca: el rosa como firma de la marca, que
   sobre negro es el único lugar donde el sistema lo deja ser texto. */
.cabecera__marca {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--fuente-display);
	font-size: var(--txt-marca);
	font-weight: var(--peso-normal);
	letter-spacing: var(--track-marca);
	text-transform: uppercase;
	text-indent: var(--track-marca);   /* compensa el espacio que el tracking deja a la derecha */
	color: var(--color-acento);
	text-decoration: none;
}

.cabecera__marca:hover { color: var(--color-texto-inverso); }

.cabecera__logo img,
.pie__columna--marca img {
	width: auto;
	max-height: var(--esp-lg);
	object-fit: contain;
}

.cabecera__acciones {
	display: flex;
	align-items: center;
	gap: var(--esp-3xs);
}

/* El selector de moneda va en la barra en todos los anchos: es una decisión de
   compra, no una preferencia escondida. En teléfono se ajusta el padding para
   que entre sin empujar el logotipo fuera del centro. */
.cabecera__acciones .wesh-selector__opcion { padding-inline: var(--esp-3xs); }

.cabecera__accion--carrito { position: relative; }
.cabecera__accion--cuenta { display: none; }

.cabecera__contador {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	display: grid;
	place-items: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: var(--esp-3xs);
	background-color: var(--color-acento);
	border-radius: var(--radio-full);
	color: var(--color-texto-sobre-rosa);
	font-size: var(--txt-xs);
	font-weight: var(--peso-fuerte);
	line-height: 1;
}

.cabecera__contador:empty,
.cabecera__contador[data-vacio] { display: none; }

/* El acuse de recibo del carrito.
 *
 * Es la interacción con más valor de toda la tienda: si agregar un producto no
 * devuelve nada visible, el cliente vuelve a tocar el botón o se va creyendo
 * que falló. El único rebote del sitio está acá y no se repite en ningún otro
 * lado: un festejo que ocurre en cada menú deja de ser un festejo. */
@keyframes contador-suma {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.cabecera__contador.esta-sumando {
	animation: contador-suma 400ms var(--curva-entrada);
}

.nav-principal { display: none; }

/* El buscador se despliega animando grid-template-rows de 0fr a 1fr, que es la
   única forma de llegar a "alto automático" sin fijar una altura a mano.
   El padding vive en la caja de adentro: en el contenedor de afuera dejaría una
   franja de 16px visible con el buscador cerrado. */
.buscador {
	display: grid;
	grid-template-rows: 0fr;
	border-block-start: 1px solid var(--color-borde-inverso);
	transition: grid-template-rows var(--transicion-salida);
}

.buscador.esta-abierto {
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--transicion-panel);
}

.buscador__caja {
	overflow: hidden;
	padding-block: var(--esp-sm);
}

/*
 * El formulario de búsqueda de WooCommerce.
 *
 * Viene con un <label> oculto, un input y un <button> con class="search-submit"
 * que ninguna regla del tema tocaba: el botón salía como la palabra "Buscar" en
 * texto plano debajo del campo, sin parecer un botón ni estar alineado con nada.
 * Acá el campo y el botón comparten una sola línea y la misma altura.
 */
.buscador .woocommerce-product-search,
.buscador form[role="search"],
.buscador .search-form {
	display: flex;
	gap: var(--esp-2xs);
	align-items: stretch;
}

/*
 * El campo, sobre el negro de la cabecera.
 *
 * Los tres colores son obligatorios, no decorativos. base.css le da al input
 * `color: inherit` y `background-color: var(--color-fondo)`: sin declararlos acá,
 * el campo se queda blanco y hereda el texto blanco de la cabecera, así que lo
 * que la clienta escribe se vuelve invisible. Y el bug no se ve en una captura,
 * porque el ::placeholder sí tiene color propio y se sigue leyendo: aparece
 * recién cuando alguien escribe.
 */
.buscador .woocommerce-product-search .search-field,
.buscador form[role="search"] input[type="search"] {
	flex: 1;
	min-width: 0;
	background-color: transparent;
	border-color: var(--color-borde-inverso);
	color: var(--color-texto-inverso);
}

.buscador .woocommerce-product-search .search-field::placeholder,
.buscador form[role="search"] input[type="search"]::placeholder {
	color: var(--color-texto-secundario-inverso);
}

.buscador .woocommerce-product-search .search-field:focus,
.buscador form[role="search"] input[type="search"]:focus {
	border-color: var(--color-texto-inverso);
}

.buscador .woocommerce-product-search button[type="submit"],
.buscador form[role="search"] button[type="submit"],
.buscador .search-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--boton-alto);
	padding-inline: var(--esp-md);
	/* Sobre negro la acción se invierte: rosa con texto negro, 10.14:1. El botón
	   negro que había acá era un rectángulo invisible con la palabra flotando. */
	background-color: var(--color-accion-inversa);
	border: var(--boton-borde) solid var(--color-accion-inversa);
	border-radius: var(--radio-nulo);
	color: var(--color-accion-inversa-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--transicion);
}

.buscador .woocommerce-product-search button[type="submit"]:hover,
.buscador form[role="search"] button[type="submit"]:hover,
.buscador .search-submit:hover {
	background-color: var(--color-accion-inversa-hover);
	border-color: var(--color-accion-inversa-hover);
}

/* La etiqueta del campo existe para el lector de pantalla, no para la vista */
.buscador .woocommerce-product-search label.screen-reader-text,
.buscador .search-form label > span.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
 * NAVEGACIÓN
 * ====================================================================== */

.nav-principal__lista {
	display: flex;
	align-items: center;
	gap: var(--esp-md);
}

.nav-principal__item { position: relative; }

/*
 * Sobre por qué la navegación, la marca de la card y los títulos del mosaico
 * NO comparten tamaño aunque compartan el recurso de versalitas + tracking.
 *
 * Medido en la home: había 31 elementos en mayúsculas con tracking en la primera
 * pantalla, y cinco roles distintos usaban exactamente 12px con 2.16px. Las
 * versalitas son la voz de la marca y se quedan, pero cuando la navegación, un
 * aviso de envío, un beneficio, un título de categoría y el nombre de una marca
 * se dibujan idénticos, el ojo no puede jerarquizar y la página se lee como una
 * sola superficie gris.
 *
 * La separación es por PESO y COLOR antes que por tamaño, para no mover la
 * maqueta: navegación en texto pleno, metadatos en tenue y un punto más chicos.
 */
.nav-principal__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	/* Blanco y no negro: esta lista vive en dos lugares y los dos son oscuros
	   —la cabecera y el panel del menú móvil—. No aparece sobre blanco en
	   ninguna pantalla del sitio. */
	color: var(--color-texto-inverso);
}

/*
 * El hover hay que declararlo, no alcanza con el color de arriba: `a:hover` de
 * base.css es (0,1,1) y le gana a esta clase, que es (0,1,0). Sin esta regla el
 * menú se iba a --color-enlace, que sobre negro da 3.5:1 y falla AA — y solo se
 * habría visto pasando el mouse, nunca en una captura.
 */
.nav-principal__enlace:hover,
.nav-principal__enlace-hijo:hover { color: var(--color-acento); }

/* El subrayado de "acá estoy" pasa a rosa: el negro sobre negro no existe */
.nav-principal__item.esta-activo > .nav-principal__enlace {
	border-block-end: 1px solid var(--color-acento);
}

.nav-principal__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: inherit;
}

/* La transición va en el svg y no en el botón: el que rota es el ícono. */
.nav-principal__toggle svg {
	transform: rotate(90deg);
	transition: transform var(--transicion);
}

.nav-principal__toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }

/* Cerrado por CSS y no con el atributo hidden: así el :hover de escritorio lo
   puede abrir sin depender del JS, y display:none lo saca del alcance de los
   lectores de pantalla cuando está cerrado. */
.nav-principal__panel,
.nav-principal__sublista {
	display: none;
	padding-block: var(--esp-2xs);
}

.nav-principal__panel.esta-abierto,
.nav-principal__sublista.esta-abierto { display: block; }

/* El panel entra con un desvanecido corto en vez de aparecer de golpe.
 *
 * Transicionar `display` necesita allow-discrete y @starting-style, que son
 * recientes: por eso todo el bloque va dentro de @supports. Donde no estén, el
 * panel abre instantáneamente —exactamente lo que hace hoy— y no queda nada
 * roto que arreglar. El origen es arriba y no el centro: el panel pertenece al
 * ítem que lo abrió y tiene que crecer desde él.
 *
 * 200ms y no más: un menú se abre muchas veces por visita y lo que se repite
 * tiene que ser rápido antes que vistoso. */
@supports (transition-behavior: allow-discrete) {

	.nav-principal__panel {
		opacity: 0;
		transform: translateY(-6px);
		transform-origin: top center;
		transition:
			opacity var(--transicion),
			transform var(--transicion),
			display var(--transicion);
		transition-behavior: allow-discrete;
	}

	.nav-principal__panel.esta-abierto {
		opacity: 1;
		transform: none;
	}

	@starting-style {
		.nav-principal__panel.esta-abierto {
			opacity: 0;
			transform: translateY(-6px);
		}
	}
}

.nav-principal__enlace-hijo {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-inline-start: var(--esp-sm);
	font-size: var(--txt-sm);
	text-decoration: none;
}

.nav-principal__lista--movil {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.nav-principal__lista--movil .nav-principal__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-block-end: 1px solid var(--color-borde-inverso);
}

.nav-principal__lista--movil .nav-principal__enlace { flex: 1; }
.nav-principal__lista--movil .nav-principal__panel { flex-basis: 100%; }

/* =========================================================================
 * MENÚ MÓVIL
 * ====================================================================== */

.menu-movil {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu);
}

/* Entrada y salida con transiciones, no con @keyframes.
 *
 * Un keyframe no se puede interrumpir a mitad de camino: si alguien abre y
 * cierra rápido, el panel salta a la posición final en vez de volver desde
 * donde estaba. Con transiciones el navegador reencamina el movimiento solo.
 * Ese cambio es además lo que permite que el menú TENGA salida: antes entraba
 * animado y desaparecía de golpe.
 *
 * La salida es más corta que la entrada. Aparecer pide anunciarse; irse, no. */
.menu-movil__fondo {
	position: absolute;
	inset: 0;
	background-color: var(--velo-oscuro);
	opacity: 0;
	transition: opacity var(--transicion-salida);
}

.menu-movil.esta-abierto .menu-movil__fondo {
	opacity: 1;
	transition: opacity var(--transicion-panel);
}

.menu-movil__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	width: min(88%, 22rem);
	/* El fondo lo pone .es-inverso: el panel sale de una barra negra y un panel
	   blanco saliendo de ahí se lee como un error, no como una capa. */
	box-shadow: var(--sombra-md);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block-end: env(safe-area-inset-bottom);
	transform: translateX(-100%);
	transition: transform var(--transicion-salida);
	will-change: transform;
}

.menu-movil.esta-abierto .menu-movil__panel {
	transform: none;
	transition: transform var(--transicion-panel);
}

.menu-movil__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-sm);
	min-height: var(--header-alto);
	padding-inline: var(--esp-sm);
	border-block-end: 1px solid var(--color-borde-inverso);
}

.menu-movil__titulo {
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
}

.menu-movil__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.menu-movil__nav {
	flex: 1;
	padding-inline: var(--esp-sm);
}

/* Lo que en escritorio vive en la barra: hoy, el selector de moneda. El bloque
   solo se imprime si algún módulo se enganchó, así que no hay caso vacío. */
.menu-movil__extras {
	display: flex;
	align-items: center;
	padding-inline: var(--esp-sm);
	border-block-start: 1px solid var(--color-borde-inverso);
}

.menu-movil__pie {
	padding: var(--esp-sm);
	border-block-start: 1px solid var(--color-borde-inverso);
}

/* =========================================================================
 * BANNER — HERO
 *
 * La fotografía se generó con el espacio negativo ya reservado: el tercio
 * izquierdo vacío y en sombra en escritorio, la mitad superior en móvil. Por eso
 * el texto se superpone en los dos tamaños y va en blanco, sin caja ni velo:
 * el contraste está garantizado por la propia imagen.
 * ====================================================================== */

/*
 * El hero llena la primera pantalla.
 *
 * Antes era 8:3 en escritorio y 1:1 en teléfono. A 390px de ancho eso daba
 * 390px de alto: el 51% de la pantalla. Las tiendas del rubro que sirven de
 * referencia van entre 1.65:1 y 2.04:1 — el doble de presencia vertical. Y el
 * 90% del tráfico de Wesh es teléfono.
 *
 * svh y no vh: en el teléfono, vh mide la ventana SIN la barra de URL, así que
 * el hero queda más alto que la pantalla y el titular se corta hasta que la
 * barra se esconde. svh mide la ventana chica, la que se ve al cargar.
 *
 * El min-block-size además fija el alto ANTES de que baje la imagen, así que no
 * hay salto de maquetado aunque la foto llene por object-fit y no por
 * aspect-ratio.
 */
.banner-hero {
	position: relative;
	display: grid;
	isolation: isolate;
	background-color: var(--color-fondo-inverso);
	min-block-size: 86vh;
	min-block-size: 86svh;
}

.banner-hero__medio,
.banner-hero__contenido {
	grid-area: 1 / 1;
}

.banner-hero__medio {
	position: relative;
}

/*
 * Velo bajo el texto.
 *
 * La foto del hero cambia con cada campaña, así que no hay forma de garantizar
 * contraste AA contra una imagen que todavía no existe: alcanza con que la
 * próxima pieza traiga un reflejo claro justo donde cae la bajada para que el
 * texto deje de leerse. Medido sobre la pieza actual, la última línea rozaba el
 * halo de la tapa del frasco y ahí bajaba a 1.23:1.
 *
 * El degradado arranca del lado donde vive el texto y se apaga antes de llegar
 * al producto, así que sostiene el piso de contraste sin apagar la fotografía.
 * El texto ahora vive abajo en las dos medidas, así que el velo sube desde el
 * borde inferior. Antes bajaba desde arriba en teléfono y entraba de izquierda
 * en escritorio, que es de cuando el titular iba arriba.
 */
.banner-hero__medio::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 0.78) 0%,
		rgb(0 0 0 / 0.72) 32%,
		rgb(0 0 0 / 0.45) 52%,
		rgb(0 0 0 / 0) 76%
	);
}

/* Llena la sección en vez de imponerle su proporción: el alto lo manda el
   min-block-size de arriba y la foto se recorta a lo que haga falta. */
.banner-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El titular se ancla ABAJO. Arriba se lee como banner publicitario; abajo, como
   placa de título de película, que es el registro que buscan las tiendas de este
   rubro. Es el mismo cambio que convierte la foto en portada y no en cabezal. */
.banner-hero__contenido {
	z-index: 1;
	display: grid;
	align-content: end;
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
	padding: var(--esp-lg) var(--margen-lateral) var(--esp-xl);
}

.banner-hero__caja {
	display: grid;
	justify-items: start;
	gap: var(--esp-sm);
	max-width: 22ch;
}

.banner-hero__titulo {
	margin: 0;
	color: var(--color-texto-inverso);
}

.banner-hero__bajada {
	color: var(--color-texto-secundario-inverso);
	font-size: var(--txt-base);
}

/* =========================================================================
 * BANNER — MOSAICO
 * ====================================================================== */

/* Sin separación entre azulejos y pegado a los bordes de la ventana, también en
   teléfono: la fila se lee como una tira continua de fotografía. Con hueco cada
   azulejo volvía a parecer una tarjeta suelta. El recorte del último contra el
   borde derecho es lo que avisa que hay más para arrastrar. */
.banner-mosaico {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 64%;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-inline: calc(var(--margen-lateral) * -1);
	padding-block-end: var(--esp-2xs);
}

.banner-mosaico::-webkit-scrollbar { display: none; }

.banner-mosaico__item { scroll-snap-align: start; }

.banner-mosaico__enlace {
	display: block;
	text-decoration: none;
}

.banner-mosaico__medio {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--color-fondo-alt);
}

/*
 * Velo bajo la etiqueta.
 *
 * La etiqueta es texto chico —11px en versalitas—, así que necesita 4.5:1 y no
 * 3:1. Estas fotos ya llegan casi negras al borde inferior, pero "casi" no es
 * una medida: la tile de Cuerpo tiene el tubo blanco entrando por abajo y ahí
 * el blanco sobre blanco desaparece. El velo pone un piso que no depende de qué
 * foto toque.
 */
.banner-mosaico__medio::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 45%;
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 0.72) 0%,
		rgb(0 0 0 / 0.5) 42%,
		rgb(0 0 0 / 0) 100%
	);
	pointer-events: none;
}

.banner-mosaico__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform var(--transicion);
}

.banner-mosaico__enlace:hover .banner-mosaico__img { transform: scale(1.03); }

/* El pie va DENTRO del encuadre, abajo a la izquierda, encima del velo. Afuera
   convertía cada tile en una tarjeta de interfaz; adentro es una fotografía con
   su epígrafe. */
.banner-mosaico__pie {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: var(--esp-2xs);
	padding: var(--esp-sm);
}

.banner-mosaico__titulo {
	font-family: var(--fuente-texto);
	font-size: var(--txt-2xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	color: var(--color-texto-inverso);
}

/* =========================================================================
 * BANNER — FRANJA
 *
 * La imagen ya trae una banda central tranquila y oscura, así que el velo es
 * mucho más liviano que antes: si se carga la mano, el rosa pálido se ensucia
 * y termina leyéndose malva.
 * ====================================================================== */

.banner-franja {
	position: relative;
	display: grid;
	isolation: isolate;
	background-color: var(--color-fondo-inverso);
}

.banner-franja__medio { grid-area: 1 / 1; }

/* Velo apenas perceptible: solo asienta la imagen. El contraste del texto NO
   depende de él — lo resuelve el panel negro de abajo. */
.banner-franja__medio::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(17, 17, 17, 0.18);
}

.banner-franja__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.banner-franja__contenido {
	grid-area: 1 / 1;
	z-index: 1;
	display: grid;
	align-content: center;
}

/*
 * El texto va en un panel negro, no directamente sobre la seda.
 *
 * Medido sobre la imagen real: con un velo del 34% el 39,8% de los píxeles bajo
 * el titular no llegaba a 4.5:1, con un peor caso de 2.39:1. Para arreglarlo con
 * velo hacía falta subirlo al 62%, y a esa altura la seda rosa se apaga y se
 * ensucia. El panel resuelve el contraste en 18.88:1 sin tocar la imagen, y de
 * paso repite el gesto de la marca: una caja negra sobre rosa.
 */
.banner-franja__caja {
	display: grid;
	justify-items: center;
	gap: var(--esp-sm);
	max-width: 34ch;
	padding: var(--esp-lg) var(--esp-md);
	background-color: var(--color-fondo-inverso);
	text-align: center;
}

.banner-franja__titulo {
	margin: 0;
	color: var(--color-texto-inverso);
}

.banner-franja__bajada {
	color: var(--color-texto-inverso);
	font-size: var(--txt-sm);
}

/* =========================================================================
 * BANNER — EDITORIAL
 *
 * La única pieza pensada para LEERSE. El texto nunca va sobre la imagen.
 * ====================================================================== */

.banner-editorial {
	display: grid;
	gap: var(--esp-md);
	align-items: center;
}

.banner-editorial__medio { overflow: hidden; }

.banner-editorial__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.banner-editorial__texto {
	display: grid;
	justify-items: start;
	gap: var(--esp-sm);
}

.banner-editorial__titulo { margin: 0; }

.banner-editorial__bajada { color: var(--color-texto-secundario); }

/* =========================================================================
 * TIRA DE BENEFICIOS
 * ====================================================================== */

.tira-beneficios {
	padding-block: var(--esp-md);
	border-block: 1px solid var(--color-borde-sutil);
}

.tira-beneficios__lista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(13rem, 1fr);
	gap: var(--esp-md);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	margin-inline: calc(var(--margen-lateral) * -1);
	padding-inline: var(--margen-lateral);
}

.tira-beneficios__lista::-webkit-scrollbar { display: none; }

.tira-beneficios__item {
	display: flex;
	align-items: center;
	gap: var(--esp-2xs);
	scroll-snap-align: start;
}

.tira-beneficios__icono { color: var(--color-texto); }

.tira-beneficios__texto { display: grid; }

/* Los beneficios se leen de un vistazo o no se leen: el título en versalitas y
   el detalle en caja baja, que es más rápido de leer que otra línea de
   mayúsculas. Antes las dos líneas competían. */
.tira-beneficios__titulo {
	font-size: var(--txt-2xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	color: var(--color-texto);
}

.tira-beneficios__detalle {
	font-size: var(--txt-sm);
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-texto-tenue);
}

/* =========================================================================
 * CARRUSEL
 * ====================================================================== */

.carrusel { margin-inline: calc(var(--margen-lateral) * -1); }

.carrusel__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 58%;
	gap: var(--esp-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--margen-lateral);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-inline: var(--margen-lateral);
	padding-block-end: var(--esp-2xs);
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > li { scroll-snap-align: start; }

.carrusel__flechas {
	display: none;
	gap: var(--esp-3xs);
}

.carrusel__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-borde-sutil);
	color: var(--color-texto);
	transition: border-color var(--transicion), color var(--transicion), opacity var(--transicion);
}

.carrusel__flecha:hover {
	border-color: var(--color-borde-fuerte);
}

.carrusel__flecha--previa svg { transform: rotate(180deg); }

.carrusel__flecha:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* =========================================================================
 * CARD DE PRODUCTO
 * ====================================================================== */

.producto-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--esp-2xs);
	height: 100%;
	padding-block-end: var(--esp-xs);
}

.producto-card__medio {
	position: relative;
	overflow: hidden;
	background-color: var(--color-fondo-alt);
	transition: transform var(--transicion);
}

.producto-card__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--transicion);
}

.producto-card:hover .producto-card__img { transform: scale(1.04); }

/* El acercamiento de arriba solo existe con mouse, y el 90% del tráfico es
   móvil: sin esto, tocar una card no devuelve absolutamente nada hasta que
   termina de cargar la ficha. Se usa :has() porque el enlace real es una capa
   transparente estirada con ::after, y hay que reaccionar a su :active desde
   el contenedor. */
.producto-card:has(.producto-card__enlace:active) .producto-card__medio {
	transform: scale(0.98);
}

/*
 * El sello de oferta.
 *
 * Es el lacre rosado de las cajas convertido en etiqueta de descuento: círculo,
 * rosa de marca, número en negro. Es el uso más rentable del rosa en toda la
 * tienda —10.14:1— y el detalle que más separa esto de una plantilla.
 */
.producto-card__etiqueta {
	position: absolute;
	inset-block-start: var(--esp-2xs);
	inset-inline-end: var(--esp-2xs);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	background-color: var(--color-sello-fondo);
	border-radius: var(--radio-full);
	color: var(--color-sello-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-fuerte);
	letter-spacing: 0;
	line-height: 1;
}

/* Siempre arriba a la izquierda, en la home y en la tienda. Es lo primero que
   se lee en un idioma que va de izquierda a derecha, y alternar el lado entre
   secciones obliga a buscarlo de nuevo en cada bloque. */
.producto-card__etiqueta {
	inset-inline: var(--esp-2xs) auto;
}

/*
 * El sello en sus otros dos estados.
 *
 * El lacre es el elemento por el que se reconoce la tienda, y hasta ahora solo
 * se dibujaba cuando había descuento: en una categoría sin ofertas la marca
 * perdía su firma. Mismo círculo, mismo rosa, mismo negro; cambia el contenido.
 *
 * "Nuevo" y "Últimas" llevan dos palabras cortas en dos líneas, así que bajan
 * un punto de tamaño para no tocar el borde del círculo.
 */
.producto-card__etiqueta--nuevo,
.producto-card__etiqueta--ultimas {
	font-size: var(--txt-2xs);
	line-height: 1.15;
	text-align: center;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Si un producto está en oferta Y le quedan pocas unidades, manda la oferta:
   dos sellos encimados son ruido, y el precio pesa más que la urgencia. */
.producto-card__medio .producto-card__etiqueta ~ .producto-card__etiqueta {
	display: none;
}

.producto-card__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--esp-3xs);
	flex: 1;
	padding-block-start: var(--esp-2xs);
}

/* La marca arriba del nombre, chica y en versalitas. Es lo que ordena la card:
   el ojo lee marca, producto, precio, en ese orden y sin volver atrás.
   Un punto por debajo de la navegación: es un metadato, no un destino. */
.producto-card__marca {
	max-width: none;
	margin: 0;
	font-size: var(--txt-2xs);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	color: var(--color-texto-tenue);
}

.producto-card__marca:empty { display: none; }

.producto-card__titulo {
	font-family: var(--fuente-texto);
	font-size: var(--txt-sm);
	font-weight: var(--peso-normal);
	line-height: var(--alto-linea-base);
	color: var(--color-texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.producto-card__enlace { text-decoration: none; }

/* Estira el enlace del título por toda la card. El botón queda por encima. */
.producto-card__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.producto-card__precio {
	font-size: var(--txt-md);
	font-weight: var(--peso-medio);
	color: var(--color-precio);
	font-variant-numeric: tabular-nums;
}

.producto-card__precio del {
	margin-inline-end: var(--esp-3xs);
	color: var(--color-precio-tachado);
	font-size: var(--txt-sm);
	font-weight: var(--peso-normal);
}

.producto-card__precio ins {
	text-decoration: none;
	color: var(--color-precio-oferta);
}

.producto-card__cuotas {
	font-size: var(--txt-xs);
	color: var(--color-texto-tenue);
	font-variant-numeric: tabular-nums;
}

/* El precio queda abajo de todo aunque el nombre ocupe una línea o dos: así los
   precios de una fila se alinean entre sí en vez de bailar según el título. */
.producto-card__precio { margin-block-start: auto; }

/* "Ver carrito" lo inyecta WooCommerce por JS después del alta. Aparecido de
   golpe se lee como un salto del layout; entrando desde abajo se lee como la
   consecuencia de lo que la persona acaba de hacer. */
@keyframes aparece-suave {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

.added_to_cart {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-enlace);
	font-size: var(--txt-sm);
	animation: aparece-suave var(--transicion-panel) both;
}

/* =========================================================================
 * BARRA DE COMPRA FIJA (móvil)
 * ====================================================================== */

.barra-compra {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--z-barra-compra);
	display: flex;
	align-items: center;
	gap: var(--esp-sm);
	padding: var(--esp-2xs) var(--margen-lateral);
	padding-block-end: calc(var(--esp-2xs) + env(safe-area-inset-bottom));
	background-color: var(--color-fondo);
	border-block-start: 1px solid var(--color-borde-sutil);
	box-shadow: var(--sombra-md);
	transform: translateY(100%);
	transition: transform var(--transicion-salida);
	will-change: transform;
}

/* Sube desde abajo en vez de aparecer de la nada: el gesto explica de dónde
   salió y que sigue estando ahí abajo. Como en el menú, la salida es más
   corta que la entrada. */
.barra-compra.esta-visible {
	transform: none;
	transition: transform var(--transicion-panel);
}

.barra-compra__info {
	display: grid;
	min-width: 0;
}

.barra-compra__nombre {
	font-size: var(--txt-xs);
	color: var(--color-texto-tenue);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.barra-compra__precio {
	font-size: var(--txt-md);
	font-weight: var(--peso-medio);
	font-variant-numeric: tabular-nums;
}

.barra-compra__precio del { display: none; }

.barra-compra__boton {
	margin-inline-start: auto;
	white-space: nowrap;
}

/* =========================================================================
 * ENTRADAS Y PAGINACIÓN
 * ====================================================================== */

.entrada-card { display: grid; gap: var(--esp-2xs); }

.entrada-card__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.entrada-card__titulo { font-size: var(--txt-lg); }
.entrada-card__enlace { text-decoration: none; }
.entrada-card__extracto { color: var(--color-texto-secundario); }

.pagination,
.woocommerce-pagination { margin-block-start: var(--esp-lg); }

.pagination .nav-links,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--esp-3xs);
}

.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--esp-2xs);
	border: 1px solid var(--color-borde-sutil);
	text-decoration: none;
	font-size: var(--txt-sm);
}

.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background-color: var(--color-accion);
	border-color: var(--color-accion);
	color: var(--color-accion-texto);
}

/* =========================================================================
 * PIE — negro, como las cajas
 * ====================================================================== */

.pie {
	margin-block-start: var(--esp-seccion);
	padding-block: var(--esp-xl);
	background-color: var(--color-fondo-inverso);
	color: var(--color-texto-inverso);
}

.pie__columnas { display: grid; gap: var(--esp-lg); }

/* El mismo cuerpo que el de la cabecera: es la misma marca, y verlas de dos
   tamaños distintos en la misma pantalla se lee como un descuido. */
.pie__marca {
	font-family: var(--fuente-display);
	font-size: var(--txt-marca);
	letter-spacing: var(--track-marca);
	text-transform: uppercase;
	color: var(--color-acento);
}

.pie__descripcion {
	margin-block-start: var(--esp-2xs);
	color: var(--color-texto-secundario-inverso);
	font-size: var(--txt-sm);
}

.pie__titulo {
	margin-block-end: var(--esp-2xs);
	font-family: var(--fuente-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	color: var(--color-texto-inverso);
}

.pie__lista { display: grid; }

.pie__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--txt-sm);
	color: var(--color-texto-secundario-inverso);
	text-decoration: none;
}

.pie__lista a:hover { color: var(--color-texto-inverso); }

/* Redes: solo el ícono. El nombre de la red va en .solo-lectores porque el
   logotipo de Instagram ya dice "Instagram" mejor que la palabra, pero un lector
   de pantalla no ve logotipos. */
.pie__redes {
	display: flex;
	margin-block-start: var(--esp-2xs);
	/* El área táctil de 44px deja 12px de aire alrededor del ícono de 20. Sin
	   este corrimiento el primer logo arrancaría 12px más adentro que el texto
	   de arriba y la columna se vería desalineada. */
	margin-inline-start: -12px;
}

.pie__red {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	color: var(--color-texto-secundario-inverso);
}

.pie__red:hover { color: var(--color-acento); }

/* Contacto: ícono y dato en la misma línea, con el ícono fuera del flujo del
   texto para que una dirección de dos renglones no se meta debajo de él. */
.pie__contacto {
	display: grid;
	gap: var(--esp-3xs);
}

.pie__dato {
	display: flex;
	align-items: center;
	gap: var(--esp-2xs);
	min-block-size: 36px;
	font-size: var(--txt-sm);
	color: var(--color-texto-secundario-inverso);
}

.pie__dato .icono {
	flex-shrink: 0;
	color: var(--color-acento);
}

.pie__dato a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;   /* un correo largo parte antes de desbordar la columna */
}

.pie__dato a:hover { color: var(--color-texto-inverso); }

/* Medios de pago: los dos que se cobran de verdad, en texto. Una tira de logos
   de tarjetas prometería más de lo que el checkout acepta. */
.pie__pagos {
	margin-block-start: var(--esp-lg);
}

.pie__pagos-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs) var(--esp-md);
}

.pie__pago {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-2xs);
	font-size: var(--txt-sm);
	color: var(--color-texto-secundario-inverso);
}

.pie__pago .icono {
	flex-shrink: 0;
	color: var(--color-acento);
}

.pie__legal {
	display: grid;
	gap: var(--esp-3xs);
	margin-block-start: var(--esp-lg);
	padding-block-start: var(--esp-md);
	border-block-start: 1px solid var(--color-borde-inverso);
	color: var(--color-texto-secundario-inverso);
	font-size: var(--txt-xs);
}

.pie__legal p { max-width: none; }

.pie__credito a {
	color: var(--color-texto-secundario-inverso);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pie__credito a:hover { color: var(--color-acento); }

/* Deja lugar para la barra de compra fija */
body.single-product .pie {
	padding-block-end: calc(var(--esp-xl) + var(--boton-alto));
}

/* =========================================================================
 * AVISOS DE WOOCOMMERCE
 *
 * "Se agregó al carrito", errores del alta, avisos del cupón. Los imprime
 * WooCommerce con su markup; sin su CSS quedaban como texto suelto arriba de
 * la página.
 * ====================================================================== */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-notices-wrapper p { max-width: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-block-end: var(--esp-md);
	padding: var(--esp-xs) var(--esp-sm);
	background-color: var(--color-fondo-alt);
	border-inline-start: 2px solid var(--color-borde-fuerte);
	font-size: var(--txt-sm);
}

.woocommerce-message,
.woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-2xs) var(--esp-sm);
}

/* WooCommerce pone el botón ANTES del texto ("Ver carrito" + "X se agregó").
   Leerlo así es al revés: primero qué pasó, después qué hacer al respecto. */
.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	margin-inline-start: auto;
}

.woocommerce-message {
	background-color: var(--color-exito-fondo);
	border-inline-start-color: var(--color-exito);
}

/* Los errores vienen como <ul> con un <li> por problema: uno debajo del otro */
.woocommerce-error {
	display: grid;
	gap: var(--esp-3xs);
	background-color: var(--color-error-fondo);
	border-inline-start-color: var(--color-error);
	color: var(--color-error);
}

/* =========================================================================
 * CANTIDAD
 *
 * Las flechitas nativas del input[type=number] miden menos de 20px: con el
 * dedo no se aciertan. Los dos botones los pone PHP en los hooks de la propia
 * plantilla de WooCommerce, así que esto sirve igual en la ficha y el carrito.
 * ====================================================================== */

.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-borde);
}

/* Producto que se vende de a uno: WooCommerce imprime un input oculto */
.quantity.hidden { display: none; }

.cantidad__paso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--boton-alto);
	height: var(--boton-alto);
	color: var(--color-texto);
	font-size: var(--txt-md);
	line-height: 1;
	transition: background-color var(--transicion);
}

.cantidad__paso:hover { background-color: var(--color-fondo-alt); }

.cantidad__paso:disabled {
	color: var(--color-accion-desactivada-texto);
	cursor: not-allowed;
	background-color: transparent;
}

.quantity .qty {
	width: 2.75rem;
	min-height: var(--boton-alto);
	padding-inline: 0;
	border: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* El anillo de foco va hacia adentro: afuera lo recorta el borde de la caja */
.quantity .qty:focus-visible { outline-offset: -2px; }

/* =========================================================================
 * ACORDEÓN
 *
 * <details> nativo: abre y cierra sin JavaScript, responde al teclado solo y
 * el buscador lee el contenido aunque esté plegado.
 * ====================================================================== */

.acordeon__item { border-block-end: 1px solid var(--color-borde-sutil); }

.acordeon__item:first-child { border-block-start: 1px solid var(--color-borde-sutil); }

.acordeon__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-sm);
	min-height: var(--boton-alto);
	padding-block: var(--esp-2xs);
	cursor: pointer;
	/* Saca el triangulito del navegador; el nuestro es el chevron de ::after */
	list-style: none;
}

.acordeon__titulo::-webkit-details-marker { display: none; }

.acordeon__titulo::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-block-start: -0.25rem;
	border-inline-end: 1px solid currentColor;
	border-block-end: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transicion);
}

.acordeon__item[open] > .acordeon__titulo::after {
	margin-block: 0.25rem -0.25rem;
	transform: rotate(-135deg);
}

.acordeon__cuerpo {
	padding-block-end: var(--esp-md);
	color: var(--color-texto-secundario);
}

.acordeon__cuerpo p + p { margin-block-start: var(--esp-sm); }

/* base.css saca las viñetas de todo <ul>; en un texto corrido sí hacen falta */
.acordeon__cuerpo ul {
	display: grid;
	gap: var(--esp-3xs);
	padding-inline-start: var(--esp-md);
	list-style: disc;
}

/* =========================================================================
 * FICHA DE PRODUCTO
 *
 * El markup lo imprime WooCommerce, así que acá los selectores son los suyos
 * (.summary, .price, .flex-control-thumbs) bajo .ficha, la clase que el tema le
 * agrega al contenedor con el filtro woocommerce_post_class. El scope importa:
 * los relacionados también son .product.
 *
 * Mobile: galería, panel de compra, relacionados. Una columna.
 * Desktop: galería y panel lado a lado, con las miniaturas en columna al
 * costado de la foto. Los relacionados cruzan las dos columnas.
 * ====================================================================== */

.ficha {
	--ficha-miniaturas: 4.5rem;

	display: grid;
	/* minmax(0, 1fr) y no la columna implícita: `auto` la dimensiona al
	   max-content de sus hijos, o sea al ancho del párrafo de la descripción
	   escrito en una sola línea. La columna se iba a 780px, arrastraba a la
	   galería —flexslider mide el contenedor— y la ficha desbordaba a lo ancho
	   en cualquier teléfono. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--esp-lg);
}

/*
 * Colocación explícita de las cuatro piezas.
 *
 * El sello de oferta es HERMANO de la galería, no hijo: con colocación
 * automática se comería una fila entera antes de la foto. Mandándolo a la misma
 * celda que la galería queda encima de la imagen en los dos layouts, sin
 * position: absolute y sin un solo número mágico.
 */
.ficha > .woocommerce-product-gallery { grid-area: 1 / 1; }
.ficha > .ficha__sello { grid-area: 1 / 1; }
.ficha > .summary { grid-area: 2 / 1; }

/* -- Migas ------------------------------------------------------------- */

.woocommerce-breadcrumb {
	margin-block-end: var(--esp-md);
	color: var(--color-texto-tenue);
	font-size: var(--txt-sm);
}

.woocommerce-breadcrumb a { text-decoration: none; }

.woocommerce-breadcrumb a:hover { color: var(--color-enlace); }

/* -- Sello de oferta --------------------------------------------------- */

/* El mismo lacre rosado de las cards, un punto más grande */
.ficha__sello {
	z-index: 1;
	justify-self: end;
	align-self: start;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: var(--esp-2xs);
	background-color: var(--color-sello-fondo);
	border-radius: var(--radio-full);
	color: var(--color-sello-texto);
	font-size: var(--txt-sm);
	font-weight: var(--peso-fuerte);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* -- Galería ----------------------------------------------------------- */

.ficha .woocommerce-product-gallery {
	position: relative;
	display: grid;
	gap: var(--esp-2xs);
	/* Sin esto la imagen de 800px estira la columna de la grilla */
	min-width: 0;
}

/* El alto de .flex-viewport lo escribe flexslider inline (smoothHeight): acá
   solo el fondo, nada de alto ni de aspect-ratio. */
.ficha .flex-viewport { background-color: var(--color-fondo-alt); }

.ficha .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1;
	/* contain y no cover: la foto viene con fondo blanco y encuadrarla le corta
	   la tapa al envase. El marco gris hace el resto. */
	object-fit: contain;
	background-color: var(--color-fondo-alt);
}

/* Sin JavaScript no hay carrusel: el wrapper queda como hijo directo y las
   imágenes se apilarían a 800px cada una. Primera grande, el resto en fila. */
.ficha .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--esp-2xs);
}

.ficha .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

/* Colocación de las tres piezas de la galería. Igual que el sello: celdas de
   grilla en vez de position:absolute. La lupa comparte celda con la foto, así
   que cae adentro de la foto y no encima de las miniaturas —que es donde
   terminaba anclándola al contenedor. */
.ficha .flex-viewport,
.ficha .woocommerce-product-gallery__trigger { grid-area: 1 / 1; }

.ficha .flex-control-thumbs { grid-area: 2 / 1; }

/* z-index sin position: los ítems de una grilla lo respetan igual, y hace
   falta porque la lupa va primera en el HTML y si no queda debajo de la foto. */
.ficha .woocommerce-product-gallery__trigger {
	z-index: 1;
	justify-self: end;
	align-self: end;
	margin: var(--esp-2xs);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background-color: var(--color-fondo);
	border: 1px solid var(--color-borde-fuerte);
	color: var(--color-texto);
	text-decoration: none;
	transition: background-color var(--transicion), color var(--transicion);
}

.ficha .woocommerce-product-gallery__trigger:hover {
	background-color: var(--color-accion);
	color: var(--color-accion-texto);
}

/* Miniaturas: fila que se arrastra en mobile, columna al costado en desktop */
.ficha .flex-control-thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--ficha-miniaturas);
	gap: var(--esp-2xs);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ficha .flex-control-thumbs::-webkit-scrollbar { display: none; }

.ficha .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background-color: var(--color-fondo-alt);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--transicion), box-shadow var(--transicion);
}

.ficha .flex-control-thumbs img:hover { opacity: 1; }

/* box-shadow y no border ni outline: el borde movería la caja y el outline es
   del foco de teclado, que tiene que poder verse encima de la activa. */
.ficha .flex-control-thumbs img.flex-active {
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--color-borde-fuerte);
}

/* -- Panel de compra --------------------------------------------------- */

.ficha .summary {
	display: grid;
	align-content: start;
	gap: var(--esp-xs);
}

/* La escala de h1 llega a 56px, que es tamaño de portada. Con --txt-xl el
   nombre sigue en Bodoni y por encima de su piso de 28px. */
.ficha .product_title { font-size: var(--txt-xl); }

.ficha .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--esp-2xs);
	max-width: none;
	font-size: var(--txt-lg);
	font-weight: var(--peso-medio);
	color: var(--color-precio);
	font-variant-numeric: tabular-nums;
}

.ficha .price del {
	color: var(--color-precio-tachado);
	font-size: var(--txt-base);
	font-weight: var(--peso-normal);
}

.ficha .price ins {
	text-decoration: none;
	color: var(--color-precio-oferta);
}

/* El porcentaje dice qué tan grande es el descuento; esto, cuánta plata queda
   en el bolsillo. Es el número que la gente compara. */
.ficha__ahorro {
	color: var(--color-precio-oferta);
	font-size: var(--txt-sm);
	font-weight: var(--peso-medio);
	font-variant-numeric: tabular-nums;
}

.ficha .woocommerce-product-details__short-description {
	margin-block-start: var(--esp-2xs);
	color: var(--color-texto-secundario);
}

.ficha .stock {
	justify-self: start;
	font-size: var(--txt-sm);
	color: var(--color-texto-secundario);
}

.ficha form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs);
	margin-block-start: var(--esp-2xs);
}

.ficha .single_add_to_cart_button { flex: 1 1 12rem; }

.ficha__agotado {
	display: grid;
	justify-items: start;
	gap: var(--esp-2xs);
	margin-block-start: var(--esp-2xs);
}

.ficha__agotado .boton--bloque { justify-self: stretch; }

/* -- Garantías --------------------------------------------------------- */

.ficha__garantias {
	display: grid;
	gap: var(--esp-2xs);
	margin-block-start: var(--esp-2xs);
	padding-block: var(--esp-sm);
	border-block: 1px solid var(--color-borde-sutil);
}

.ficha__garantia {
	display: flex;
	align-items: center;
	gap: var(--esp-2xs);
	font-size: var(--txt-sm);
}

.ficha__garantia strong { font-weight: var(--peso-medio); }

.ficha__garantia-detalle { color: var(--color-texto-tenue); }

.ficha__garantia-detalle::before {
	content: "·";
	margin-inline: var(--esp-3xs);
}

/* -- Meta -------------------------------------------------------------- */

.ficha .product_meta {
	display: grid;
	gap: var(--esp-3xs);
	margin-block-start: var(--esp-2xs);
	color: var(--color-texto-tenue);
	font-size: var(--txt-xs);
}

.ficha .product_meta a { text-decoration: none; }

.ficha .product_meta a:hover { color: var(--color-enlace); }

/* -- Relacionados ------------------------------------------------------ */

/* La sección ya vive dentro del padding vertical de la ficha: acá alcanza con
   la línea que la separa del panel. */
.seccion--relacionados {
	padding-block: 0;
	padding-block-start: var(--esp-xl);
	border-block-start: 1px solid var(--color-borde-sutil);
}

/* =========================================================================
 * BOTÓN FLOTANTE DE WHATSAPP
 * ====================================================================== */

.wa-flotante {
	position: fixed;
	inset-block-end: var(--esp-sm);
	inset-inline-end: var(--esp-sm);
	z-index: var(--z-flotante);
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	background-color: var(--vidrio-fondo);
	border: 1px solid var(--color-borde-fuerte);
	border-radius: var(--radio-full);
	box-shadow: var(--sombra-md);
	color: var(--color-texto-sobre-rosa);
	backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(160%);
	transition: transform var(--transicion), background-color var(--transicion);
}

.wa-flotante:hover,
.wa-flotante:focus-visible {
	transform: translateY(-2px);
	background-color: var(--color-acento);
	color: var(--color-texto-sobre-rosa);
}

/* Sin desenfoque el translúcido se lee turbio: ahí va el rosa sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.wa-flotante { background-color: var(--color-acento); }
}

/* Cuando aparece la barra de compra, el botón se corre arriba de ella */
body:has(.barra-compra.esta-visible) .wa-flotante {
	inset-block-end: calc(var(--boton-alto) + var(--esp-lg) + env(safe-area-inset-bottom));
}

/* =========================================================================
 * PÁGINAS Y ENTRADAS
 * ====================================================================== */

.pagina__cabecera { margin-block-end: var(--esp-lg); }

.pagina__titulo { margin: 0; }

/* La medida de lectura por defecto; las pantallas de compra la anulan porque
   necesitan el ancho para tablas y formularios de dos columnas. */
.pagina__contenido { max-width: var(--ancho-texto); }

.pagina--ancha .pagina__contenido { max-width: none; }

.pagina__contenido > * + * { margin-block-start: var(--esp-sm); }

.pagina__contenido h2,
.pagina__contenido h3 { margin-block-start: var(--esp-lg); }

.pagina__contenido ul,
.pagina__contenido ol {
	padding-inline-start: var(--esp-md);
	list-style: revert;
}

.pagina__contenido li + li { margin-block-start: var(--esp-3xs); }

.pagina__contenido a { color: var(--color-enlace); }

.entrada__fecha {
	margin-block-start: var(--esp-2xs);
	font-size: var(--txt-xs);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	color: var(--color-texto-tenue);
}

.entrada__medio { margin-block-end: var(--esp-lg); }

.entrada__img { width: 100%; }

/* =========================================================================
 * CABECERA DE LA TIENDA — migas, título, filtros y orden
 *
 * Es la pantalla donde se elige, y hasta ahora era la única sin diseñar. El
 * patrón es el de las casas de moda: una línea fina con el conteo a un lado y
 * el orden al otro, sin cajas ni fondos que compitan con el producto.
 * ====================================================================== */

/* --- La banda negra ------------------------------------------------------
 *
 * Migas, título y chips sobre negro, a sangre de borde a borde de la ventana.
 * El color de texto lo pone .es-inverso; acá va la geometría.
 *
 * SE PINTA EL FONDO, NO SE MUEVE LA CAJA. La banda queda dentro del contenedor
 * y es un pseudo-elemento el que sangra por detrás.
 *
 * El mosaico de la home sangra con `width: 100vw` + margen negativo, y acá esa
 * fórmula no sirve: 100vw incluye el ancho de la barra de scroll, así que en
 * escritorio la caja arranca ~7px a la izquierda del contenedor. En el mosaico
 * no se nota —son fotos a sangre, sin nada al lado con qué comparar—, pero acá
 * justo debajo hay una grilla alineada al contenedor, y el título corrido siete
 * píxeles contra la primera card se ve.
 *
 * Con las dos inset en calc(50% - 50vw) el desborde es simétrico, o sea negro
 * de más de los dos lados, que html { overflow-x: clip } recorta y nadie ve.
 * ---------------------------------------------------------------------- */

/*
 * El aire de la banda es más chico en teléfono que en escritorio.
 *
 * Con las migas ocultas, el título arranca directo bajo la cabecera y 32px de
 * respiro se leen como un hueco: en una pantalla donde el primer producto
 * aparecía pasada la mitad, cada píxel de arriba se paga abajo. Desde 48em
 * vuelve el respiro completo, que ahí no compite con nada.
 */
.tienda-portada {
	position: relative;
	z-index: 0;   /* contexto de apilado propio, para que el ::before no se escape */
	margin-block-end: var(--esp-md);
	padding-block: var(--esp-md);
}

.tienda-portada::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: calc(50% - 50vw);
	background-color: var(--color-fondo-inverso);
	z-index: -1;
}

.tienda-portada .woocommerce-breadcrumb,
.tienda-portada .woocommerce-breadcrumb a {
	color: var(--color-texto-secundario-inverso);
}

.tienda-portada .woocommerce-breadcrumb a:hover {
	color: var(--color-texto-inverso);
}

/* El nombre de la categoría en rosa. Es el sello de la marca y el único lugar
   de la tienda donde el rosa puede ser texto: sobre negro da 10.14:1. */
.tienda-portada .woocommerce-products-header__title {
	color: var(--color-acento);
}

.tienda-portada .woocommerce-products-header {
	margin-block-end: var(--esp-sm);
}

.tienda-portada .term-description p {
	color: var(--color-texto-secundario-inverso);
}

/* El aire de abajo lo pone el padding de la banda, no el margen del componente */
.tienda-portada .filtros {
	margin-block-end: 0;
}

.tienda-portada .filtros__chip {
	border-color: var(--color-borde-inverso);
	color: var(--color-texto-secundario-inverso);
}

.tienda-portada .filtros__chip:hover {
	border-color: var(--color-texto-inverso);
	color: var(--color-texto-inverso);
}

/* El chip activo se invierte con la banda: era negro sobre blanco, ahora es
   rosa con texto negro. Sobre negro, un chip negro no marca nada. */
.tienda-portada .filtros__chip.esta-activo {
	background-color: var(--color-accion-inversa);
	border-color: var(--color-accion-inversa);
	color: var(--color-accion-inversa-texto);
}

/* --- Migas, título y filtros --------------------------------------------- */

.woocommerce-breadcrumb {
	margin-block-end: var(--esp-sm);
	font-size: var(--txt-xs);
	letter-spacing: 0.04em;
	color: var(--color-texto-tenue);
}

/* Área de toque sin cambiar el dibujo: el texto mide 14px de alto, que para un
   enlace en línea está permitido, pero con el padding el dedo no falla. */
.woocommerce-breadcrumb a {
	display: inline-block;
	padding-block: var(--esp-2xs);
	text-decoration: none;
	color: var(--color-texto-secundario);
}

.woocommerce-breadcrumb a:hover { color: var(--color-texto); }

.migas__sep { margin-inline: var(--esp-3xs); }

.woocommerce-products-header {
	margin-block-end: var(--esp-md);
}

.woocommerce-products-header__title {
	margin: 0;
}

.term-description,
.woocommerce-product-search { margin-block-start: var(--esp-2xs); }

.term-description p {
	color: var(--color-texto-secundario);
	max-width: var(--ancho-texto);
}

/* --- Filtros por categoría ----------------------------------------------- */

.filtros {
	margin-block-end: var(--esp-sm);
}

.filtros__lista {
	display: flex;
	gap: var(--esp-2xs);
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	margin-inline: calc(var(--margen-lateral) * -1);
	padding-inline: var(--margen-lateral);
}

.filtros__lista::-webkit-scrollbar { display: none; }

/*
 * El tracking de versalitas se afloja en teléfono.
 *
 * Con --track-etiqueta (2,16px POR LETRA a 12px) los ocho chips suman 985px de
 * carril dentro de una ventana de 390: el 60% queda fuera de vista, entran tres,
 * y en una categoría como Body Lotion el chip activo arrancaba en x=373, o sea
 * invisible. La pantalla no decía en ninguna parte dónde estabas parado.
 *
 * De los 985, unos 136 son solo tracking y padding. Aflojarlos no arregla el
 * carril —sigue siendo más ancho que la pantalla, y eso está bien: el chip
 * cortado en el borde es lo que avisa que hay más— pero sube de tres a cinco
 * chips visibles. Lo de "dónde estoy" lo resuelve el JS, que arranca el carril
 * posicionado en el activo.
 *
 * Desde 48em vuelve el tracking de la marca: ahí el ancho sobra.
 */
.filtros__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: var(--esp-xs);
	border: 1px solid var(--color-borde-sutil);
	white-space: nowrap;
	font-size: var(--txt-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-texto-secundario);
	transition: border-color var(--transicion), color var(--transicion), background-color var(--transicion);
}

.filtros__chip:hover {
	border-color: var(--color-borde-fuerte);
	color: var(--color-texto);
}

.filtros__chip.esta-activo {
	background-color: var(--color-accion);
	border-color: var(--color-accion);
	color: var(--color-accion-texto);
}

/* --- Barra de conteo y orden --------------------------------------------- */

.barra-tienda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-2xs) var(--esp-sm);
	margin-block-end: var(--esp-md);
	padding-block: var(--esp-2xs);
	border-block: 1px solid var(--color-borde-sutil);
}

/* Mismo motivo que los chips: con el tracking de marca, "48 PRODUCTOS" y
   "ORDEN PREDETERMINADO" no entran juntos en 358px y la barra se partía en dos
   renglones de 85px de alto. Aflojado, entran en uno solo. */
.barra-tienda__conteo {
	max-width: none;
	margin: 0;
	font-size: var(--txt-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-texto-tenue);
}

.barra-tienda__orden .woocommerce-ordering { margin: 0; }

/*
 * El desplegable de orden se comporta como texto, no como un campo.
 *
 * Un <select> con borde y fondo blanco arriba de la grilla pesa más que
 * cualquier producto. Acá queda sin caja, con el chevron dibujado de fondo, y
 * ocupando solo lo que mide su opción más larga. Conserva el alto táctil.
 */
.barra-tienda__orden select,
.woocommerce-ordering select {
	width: auto;
	min-height: 40px;
	padding-block: 0;
	padding-inline: 0 var(--esp-md);
	border: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 12px 8px;
	appearance: none;
	-webkit-appearance: none;
	font-size: var(--txt-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-texto);
	cursor: pointer;
}

.barra-tienda__orden select:focus { border: 0; }

/* =========================================================================
 * CARRITO Y CHECKOUT
 *
 * WooCommerce imprime acá tablas y formularios que su propio CSS maqueta, y
 * ese CSS está desactivado en todo el tema. Sin este bloque, la pantalla donde
 * se cobra es una tabla HTML desnuda y veinte campos apilados a ancho completo.
 *
 * La tabla del carrito se convierte en tarjetas apiladas por debajo de 48em.
 * Una tabla de cinco columnas en un teléfono de 360px no se arregla con scroll
 * horizontal: se arregla dejando de ser una tabla. Cada celda muestra su
 * etiqueta desde data-title, que es el atributo que Woo ya escribe solo.
 * ====================================================================== */

.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-order {
	--carrito-linea: 1px solid var(--color-borde-sutil);
}

/* --- Tabla del carrito --------------------------------------------------- */

.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--txt-sm);
}

.shop_table th {
	padding-block: var(--esp-2xs);
	border-block-end: 1px solid var(--color-borde-fuerte);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	text-align: start;
}

.shop_table td {
	padding-block: var(--esp-sm);
	border-block-end: var(--carrito-linea);
	vertical-align: middle;
}

.shop_table .product-thumbnail img {
	width: 88px;
	height: auto;
	background-color: var(--color-fondo-alt);
}

.shop_table .product-name a {
	text-decoration: none;
	font-weight: var(--peso-medio);
}

.shop_table .product-price,
.shop_table .product-subtotal,
.shop_table .product-total {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.shop_table .product-subtotal,
.shop_table .product-total {
	font-weight: var(--peso-medio);
	text-align: end;
}

/* La X de quitar: discreta hasta que la buscás, nunca un botón rojo */
.shop_table .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-texto-tenue);
	font-size: var(--txt-md);
	line-height: 1;
	text-decoration: none;
	transition: color var(--transicion);
}

.shop_table .product-remove a.remove:hover {
	color: var(--color-error);
}

/* Cupón y actualizar, en la última fila de la tabla */
.woocommerce-cart-form .actions {
	padding-block: var(--esp-md);
}

.woocommerce-cart-form .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs);
	margin-block-end: var(--esp-sm);
}

.woocommerce-cart-form .coupon .input-text {
	flex: 1 1 12rem;
	width: auto;
}

/*
 * Los botones sueltos de WooCommerce.
 *
 * Aplicar cupón, actualizar carrito, volver a la tienda y los de mi cuenta
 * salen con class="button" a secas, sin ninguna de las clases del tema. Sin
 * esto se ven como texto plano y no parecen accionables. Van en secundario:
 * son acciones de apoyo, y el negro sólido queda reservado para pagar.
 */
.woocommerce-cart-form .button,
.cart-collaterals .button:not(.checkout-button),
.return-to-shop .button,
.woocommerce-MyAccount-content .button,
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-ResetPassword .button,
.woocommerce-EditAccountForm .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--boton-alto);
	padding-inline: var(--esp-md);
	background-color: transparent;
	border: var(--boton-borde) solid var(--color-borde-fuerte);
	border-radius: var(--radio-nulo);
	color: var(--color-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transicion), color var(--transicion);
}

.woocommerce-cart-form .button:hover,
.return-to-shop .button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover {
	background-color: var(--color-accion);
	color: var(--color-accion-texto);
}

/* Woo deshabilita "actualizar carrito" hasta que cambia una cantidad */
.woocommerce-cart-form .button:disabled {
	border-color: var(--color-borde-sutil);
	color: var(--color-texto-tenue);
	cursor: not-allowed;
}

.woocommerce-cart-form .button:disabled:hover {
	background-color: transparent;
	color: var(--color-texto-tenue);
}

/* --- Totales y resumen --------------------------------------------------- */

.cart-collaterals { margin-block-start: var(--esp-xl); }

.cart_totals h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	margin-block-end: var(--esp-sm);
	font-family: var(--fuente-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	color: var(--color-texto);
}

.cart_totals table,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--txt-sm);
}

.cart_totals th,
.woocommerce-checkout-review-order-table th {
	padding-block: var(--esp-2xs);
	border-block-end: var(--carrito-linea);
	font-weight: var(--peso-normal);
	text-align: start;
}

.cart_totals td,
.woocommerce-checkout-review-order-table td {
	padding-block: var(--esp-2xs);
	border-block-end: var(--carrito-linea);
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* El total es el número que se mira antes de pagar: es el único que crece */
.cart_totals .order-total th,
.cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	padding-block: var(--esp-sm);
	border-block-end: 0;
	border-block-start: 1px solid var(--color-borde-fuerte);
	font-size: var(--txt-md);
	font-weight: var(--peso-medio);
}

.cart_totals .wc-proceed-to-checkout { margin-block-start: var(--esp-md); }

/* --- Checkout ------------------------------------------------------------ */

.woocommerce-checkout .col2-set { display: grid; gap: var(--esp-lg); }

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	padding-block-start: var(--esp-md);
	border-block-start: var(--carrito-linea);
}

.woocommerce-checkout .form-row {
	display: grid;
	gap: var(--esp-3xs);
	margin-block-end: var(--esp-sm);
}

.woocommerce-checkout .form-row label {
	font-size: var(--txt-xs);
	letter-spacing: 0.04em;
	color: var(--color-texto-secundario);
}

.woocommerce-checkout .required {
	color: var(--color-error);
	text-decoration: none;
}

/* El resumen del pedido se despega del formulario con el negro de la marca */
#order_review {
	padding: var(--esp-md);
	border: 1px solid var(--color-borde-fuerte);
}

.woocommerce-checkout-payment {
	margin-block-start: var(--esp-md);
	padding-block-start: var(--esp-md);
	border-block-start: var(--carrito-linea);
}

.wc_payment_methods { display: grid; gap: var(--esp-2xs); }

.wc_payment_method label {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-2xs);
	min-height: 44px;
	font-size: var(--txt-sm);
}

.wc_payment_method input[type="radio"] { width: auto; min-height: 0; }

.payment_box {
	padding: var(--esp-2xs) var(--esp-sm);
	background-color: var(--color-fondo-alt);
	font-size: var(--txt-sm);
}

.woocommerce-terms-and-conditions-wrapper { margin-block: var(--esp-sm); }

/*
 * selectWoo (el Select2 de WooCommerce) trae su propia hoja y dibuja un control
 * con esquinas redondeadas y bordes celestes que no tiene nada que ver con el
 * resto. Se lo iguala a los campos del tema en vez de dejarlo suelto.
 */
.select2-container--default .select2-selection--single {
	height: var(--boton-alto);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-nulo);
	background-color: var(--color-fondo);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: var(--boton-alto);
	padding-inline-start: var(--esp-xs);
	color: var(--color-texto);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: var(--boton-alto);
}

.select2-dropdown {
	border: 1px solid var(--color-borde-fuerte);
	border-radius: var(--radio-nulo);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--color-accion);
	color: var(--color-accion-texto);
}

/* --- Carrito vacío y mi cuenta ------------------------------------------- */

.cart-empty { font-size: var(--txt-lg); }

.return-to-shop { margin-block-start: var(--esp-md); }

/* El reset de lista va acá y no en el salto de escritorio: en fila los marcadores
   no se dibujaban y el bullet apareció recién al pasar la lista a grid. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-sm);
	margin-block-end: var(--esp-lg);
	padding: 0;
	padding-block-end: var(--esp-2xs);
	border-block-end: var(--carrito-linea);
	list-style: none;
}

/*
 * El menú de la cuenta es navegación, no prosa: va en negro. Sin esta regla
 * hereda el rosa de `.pagina__contenido a`, que existe para los enlaces dentro
 * de un texto, y las seis secciones de la cuenta salían todas en rosa.
 */
.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-texto-secundario);
	font-size: var(--txt-xs);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover { color: var(--color-texto); }

.woocommerce-MyAccount-navigation .is-active a {
	border-block-end: 1px solid var(--color-borde-fuerte);
	color: var(--color-texto);
	font-weight: var(--peso-medio);
}

/*
 * Por debajo de 48em la tabla deja de ser tabla.
 *
 * Cada fila pasa a ser una tarjeta y cada celda muestra su encabezado desde
 * data-title, que WooCommerce ya escribe en el HTML. La miniatura se saca del
 * flujo porque en una tarjeta angosta compite con el nombre.
 */
@media (max-width: 47.99em) {

	.woocommerce-cart-form .shop_table thead { display: none; }

	.woocommerce-cart-form .shop_table,
	.woocommerce-cart-form .shop_table tbody,
	.woocommerce-cart-form .shop_table tr,
	.woocommerce-cart-form .shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce-cart-form .shop_table tr.cart_item {
		position: relative;
		padding-block: var(--esp-sm);
		border-block-end: var(--carrito-linea);
	}

	.woocommerce-cart-form .shop_table tr.cart_item td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--esp-sm);
		padding-block: var(--esp-3xs);
		border: 0;
		text-align: end;
	}

	.woocommerce-cart-form .shop_table tr.cart_item td::before {
		content: attr(data-title);
		font-size: var(--txt-xs);
		letter-spacing: var(--track-etiqueta);
		text-transform: uppercase;
		color: var(--color-texto-tenue);
		text-align: start;
	}

	/* La foto y el nombre no llevan etiqueta: se explican solos */
	.woocommerce-cart-form .shop_table .product-thumbnail::before,
	.woocommerce-cart-form .shop_table .product-name::before,
	.woocommerce-cart-form .shop_table .product-remove::before {
		content: none;
	}

	.woocommerce-cart-form .shop_table .product-thumbnail,
	.woocommerce-cart-form .shop_table .product-name {
		justify-content: flex-start;
		text-align: start;
	}

	.woocommerce-cart-form .shop_table .product-remove {
		position: absolute;
		inset-block-start: var(--esp-2xs);
		inset-inline-end: 0;
		width: auto;
		padding: 0;
	}

	.woocommerce-cart-form .coupon .input-text,
	.woocommerce-cart-form .coupon .button { flex: 1 1 100%; }
}

@media (min-width: 48em) {

	.shop_table th,
	.shop_table td { padding-inline-end: var(--esp-sm); }

	.cart-collaterals {
		display: flex;
		justify-content: flex-end;
	}

	.cart_totals { width: min(24rem, 100%); }

	.woocommerce-checkout .col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* El nombre y el apellido no merecen una fila cada uno */
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { display: inline-grid; }

	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { grid-column: 1 / -1; }
}

@media (min-width: 64em) {

	/*
	 * Checkout en una sola columna, centrado y angosto.
	 *
	 * La versión de dos columnas con el resumen pegado al scroll se probó y se
	 * descartó: WooCommerce imprime el título del resumen y el resumen como dos
	 * hijos sueltos del formulario, así que en un grid quedan atados a las filas
	 * que define la columna izquierda y el recuadro cae varios cientos de píxeles
	 * por debajo de su propio título. Ordenarlo bien exige envolverlos, y eso
	 * significa copiar la plantilla del checkout: deuda de mantenimiento en la
	 * pantalla más delicada de la tienda.
	 *
	 * Una columna angosta no es el premio consuelo: es el patrón de Aesop y
	 * Glossier. Una sola cosa por vez, cero distracción lateral, y el resumen
	 * inmediatamente antes del botón de pagar, que es cuando se mira.
	 */
	.woocommerce-checkout form.checkout {
		max-width: 44rem;
		margin-inline: auto;
	}

	.woocommerce-checkout .woocommerce-form-coupon-toggle,
	.woocommerce-checkout .checkout_coupon {
		max-width: 44rem;
		margin-inline: auto;
	}

	#order_review_heading { margin-block-start: var(--esp-xl); }
}

/* =========================================================================
 * PANTALLA DE CUENTA
 *
 * Era la única pantalla del sitio con la salida cruda de WooCommerce: el
 * formulario apoyado contra el borde izquierdo del contenedor ancho de compra,
 * la mitad derecha de un escritorio de 1440 vacía, y «Recordarme» compartiendo
 * renglón con el botón porque Woo los imprime dentro del mismo párrafo.
 *
 * Sin sesión iniciada es un split: fotografía a sangre y una columna angosta.
 * Con la sesión abierta vuelve a ser una página ancha con el menú de la cuenta
 * en barra lateral.
 *
 * NO se copió ninguna plantilla de Woo. El #customer_login de dos columnas que
 * imprime form-login.php se re-maqueta acá; los tres textos que el CSS no puede
 * tocar salen de un filtro en inc/woocommerce.php.
 * ====================================================================== */

/* --- Portada ------------------------------------------------------------- */

.cuenta-portada { display: grid; }

/*
 * En teléfono no hay foto, y no es que se esconda: no se descarga. La imagen
 * llega por --cuenta-foto desde la plantilla y recién se consume dentro de la
 * media query de escritorio. Un valor de custom property que ningún property
 * usa todavía no dispara ninguna petición; un <img> con display:none sí.
 */
.cuenta-portada__figura {
	--cuenta-foto: none;
	display: none;
}

.cuenta-portada__panel {
	padding-block: var(--esp-seccion);
	padding-inline: var(--margen-lateral);
}

.cuenta-portada__columna {
	width: min(26rem, 100%);
	margin-inline: auto;
}

.cuenta-portada__titulo { margin: 0 0 var(--esp-lg); }

/* Los avisos de error caen acá adentro, arriba del formulario que los provocó */
.cuenta-portada__columna .woocommerce-notices-wrapper:not(:empty) {
	margin-block-end: var(--esp-md);
}

/*
 * "Iniciar sesión" y "Crear cuenta" son rótulos, no titulares: a tres
 * centímetros del h1 en Bodoni, otro Bodoni de 28px pelea con él por la misma
 * jerarquía. Bajan a versalitas, que es lo que el sistema usa para rotular.
 */
.cuenta-portada__columna h2 {
	margin: 0 0 var(--esp-sm);
	font-family: var(--fuente-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--track-etiqueta);
	text-transform: uppercase;
}

/* --- Los dos formularios ------------------------------------------------- */

/* La columna ya es angosta: las dos mitades del col2-set se apilan solas y el
   registro se separa con una línea de pelo. */
#customer_login { display: grid; }

#customer_login .col-2 {
	margin-block-start: var(--esp-xl);
	padding-block-start: var(--esp-xl);
	border-block-start: 1px solid var(--color-borde-sutil);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm {
	display: grid;
	gap: var(--esp-sm);
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-ResetPassword .form-row,
.woocommerce-EditAccountForm .form-row {
	display: grid;
	gap: var(--esp-3xs);
	margin: 0;
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-ResetPassword label,
.woocommerce-EditAccountForm label {
	font-size: var(--txt-xs);
	letter-spacing: 0.04em;
	color: var(--color-texto-secundario);
}

/*
 * "Recordarme" y el botón vienen en el MISMO párrafo, uno al lado del otro: la
 * casilla se leía como parte del botón. Es la única fila que Woo imprime sin la
 * clase woocommerce-form-row, así que se la puede separar sin copiar la
 * plantilla entera para meterle un <div>.
 */
.woocommerce-form-login .form-row:not(.woocommerce-form-row) {
	gap: var(--esp-sm);
	margin-block-start: var(--esp-2xs);
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-2xs);
	justify-self: start;
	min-height: 44px;
	font-size: var(--txt-sm);
	color: var(--color-texto-secundario);
}

.woocommerce-form-login__rememberme input {
	width: auto;
	min-height: 0;
}

/*
 * Entrar y crear cuenta pasan a negro sólido.
 *
 * Venían en secundario por compartir la clase .button con "aplicar cupón" y
 * "volver a la tienda", que son acciones de apoyo. Estas son LA acción de la
 * pantalla, y el negro está reservado justo para eso.
 *
 * El nombre del formulario va delante de la clase del botón aunque parezca
 * redundante: la regla secundaria es `.woocommerce-form-login .button`, dos
 * clases. Con `.woocommerce-form-login__submit` a secas —una sola clase— el
 * botón perdía y seguía saliendo en contorno.
 */
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-ResetPassword .button,
.woocommerce-EditAccountForm .button {
	width: 100%;
	background-color: var(--color-accion);
	border-color: var(--color-accion);
	color: var(--color-accion-texto);
}

.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-form-register .woocommerce-form-register__submit:hover,
.woocommerce-ResetPassword .button:hover,
.woocommerce-EditAccountForm .button:hover {
	background-color: var(--color-accion-hover);
	border-color: var(--color-accion-hover);
	color: var(--color-accion-texto);
}

.woocommerce-LostPassword {
	margin: 0;
	font-size: var(--txt-sm);
}

.woocommerce-LostPassword a { color: var(--color-enlace); }
.woocommerce-LostPassword a:hover { color: var(--color-enlace-hover); }

/* La línea que dice para qué sirve la cuenta, y el aviso de privacidad de Woo */
.cuenta-nota,
.woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: var(--txt-sm);
	color: var(--color-texto-secundario);
}

/* --- Contraseña: el ojo y el medidor -------------------------------------
 *
 * Los dos los inyecta el JavaScript de WooCommerce y los maqueta su hoja de
 * estilos, que en este tema está apagada. Sin estas reglas el ojo sale como un
 * botón vacío sin dibujo —su ícono es una fuente que no cargamos— y el medidor
 * como una línea de texto suelta debajo del campo.
 *
 * El dibujo va por mask en vez de background: así el color sale de un token y
 * cambia de estado sin tener que generar un segundo archivo.
 * ---------------------------------------------------------------------- */

.password-input {
	position: relative;
	display: block;
}

/* El texto de la contraseña deja de correr por debajo del botón */
.password-input .input-text { padding-inline-end: var(--esp-xl); }

.show-password-input {
	--icono-ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1.8 12S5.6 5.8 12 5.8 22.2 12 22.2 12 18.4 18.2 12 18.2 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3C/svg%3E");
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: var(--boton-alto);
	background-color: var(--color-texto-tenue);
	-webkit-mask: var(--icono-ojo) center / 20px 20px no-repeat;
	mask: var(--icono-ojo) center / 20px 20px no-repeat;
	transition: background-color var(--transicion);
}

.show-password-input:hover { background-color: var(--color-texto); }

/* Con la contraseña a la vista, el ojo se tacha */
.show-password-input.display-password {
	--icono-ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1.8 12S5.6 5.8 12 5.8 22.2 12 22.2 12 18.4 18.2 12 18.2 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.3'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
	background-color: var(--color-texto);
}

.woocommerce-password-strength {
	padding-block-start: var(--esp-3xs);
	border-block-start: 2px solid currentColor;
	font-size: var(--txt-xs);
	letter-spacing: 0.04em;
	color: var(--color-texto-tenue);
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: var(--color-error); }
.woocommerce-password-strength.good { color: var(--color-texto-secundario); }
.woocommerce-password-strength.strong { color: var(--color-exito); }

.woocommerce-password-hint {
	display: block;
	font-size: var(--txt-xs);
	color: var(--color-texto-tenue);
}

@media (min-width: 64em) {

	/*
	 * Acá aparece el split, y acá aparece la foto. El background-image declarado
	 * dentro de una media query que no matchea no se descarga: es el mecanismo
	 * completo que mantiene la portada en cero bytes de imagen en teléfono.
	 */
	.cuenta-portada {
		grid-template-columns: 1fr 1fr;
		min-block-size: calc(100vh - var(--header-alto));
		min-block-size: calc(100svh - var(--header-alto));
	}

	.cuenta-portada__figura {
		display: flex;
		align-items: flex-end;
		padding: var(--esp-xl);
		background-color: var(--color-fondo-inverso);
		background-image:
			linear-gradient(
				to top,
				rgb(0 0 0 / 0.72) 0%,
				rgb(0 0 0 / 0.46) 26%,
				rgb(0 0 0 / 0) 58%
			),
			var(--cuenta-foto);
		background-size: cover;
		background-position: center;
	}

	/* Placa de título anclada abajo, como el hero: arriba se leería como banner */
	.cuenta-portada__lema {
		max-width: 12ch;
		margin: 0;
		color: var(--color-texto-inverso);
		font-family: var(--fuente-display);
		font-size: var(--txt-xl);
		font-weight: var(--peso-medio);
		line-height: var(--alto-linea-titulo);
		letter-spacing: var(--track-display);
		text-transform: uppercase;
		font-optical-sizing: auto;
	}

	.cuenta-portada__panel {
		display: grid;
		align-content: center;
		padding: var(--esp-2xl);
	}

	/*
	 * Con la sesión abierta el menú de la cuenta pasa a barra lateral. La regla
	 * se ata a .logged-in a propósito: sin sesión, este mismo .woocommerce es el
	 * que envuelve al formulario de acceso, y ahí una columna de 14rem lo
	 * estrangularía.
	 */
	.logged-in.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 14rem minmax(0, 1fr);
		gap: var(--esp-2xl);
		align-items: start;
	}

	.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-MyAccount-navigation ul {
		display: grid;
		gap: var(--esp-3xs);
		margin-block-end: 0;
		padding-block-end: 0;
		border-block-end: 0;
	}

	.woocommerce-MyAccount-navigation a {
		padding-inline-start: var(--esp-2xs);
		border-inline-start: 2px solid transparent;
	}

	/* En vertical, el subrayado de "acá estás" pasa a ser una marca al margen */
	.woocommerce-MyAccount-navigation .is-active a {
		border-block-end: 0;
		border-inline-start-color: var(--color-borde-fuerte);
	}
}

/* =========================================================================
 * SALTOS
 * ====================================================================== */

@media (min-width: 36em) {
	.banner-mosaico { grid-auto-columns: 40%; }
	.carrusel__pista { grid-auto-columns: 36%; }
}

@media (min-width: 48em) {

	.cabecera__accion--cuenta { display: inline-flex; }

	/* Desde acá el ancho sobra y el selector recupera su respiro */
	.cabecera__acciones .wesh-selector__opcion { padding-inline: var(--esp-2xs); }

	.tienda-portada {
		margin-block-end: var(--esp-lg);
		padding-block: var(--esp-lg) var(--esp-md);
	}

	/* Y vuelve el tracking de la marca, que en teléfono partía la fila en dos y
	   estiraba el carril de categorías a 985px */
	.filtros__chip {
		padding-inline: var(--esp-sm);
		letter-spacing: var(--track-etiqueta);
	}

	.barra-tienda__conteo,
	.barra-tienda__orden select,
	.woocommerce-ordering select { letter-spacing: var(--track-etiqueta); }

	/* Tope duro en px además del relativo: en un monitor de 27 pulgadas 80vh son
	   más de mil píxeles de hero y el resto de la home desaparece del mapa. */
	.banner-hero { min-block-size: min(80vh, 820px); }

	/* El velo sigue subiendo desde abajo pero se apaga antes: el encuadre
	   apaisado tiene más aire y el texto no llega tan alto. */
	.banner-hero__medio::after {
		background: linear-gradient(
			to top,
			rgb(0 0 0 / 0.74) 0%,
			rgb(0 0 0 / 0.62) 26%,
			rgb(0 0 0 / 0.34) 46%,
			rgb(0 0 0 / 0) 68%
		);
	}

	.banner-hero__contenido {
		padding-block-end: var(--esp-2xl);
	}

	.banner-hero__caja { max-width: 26ch; }

	.banner-hero__bajada { font-size: var(--txt-lg); }

	.banner-franja__img { aspect-ratio: 16 / 5; }

	/*
	 * A sangre y sin separación: las fotos pegadas de borde a borde de la
	 * ventana. El aire alrededor de un bloque de texto lo hace respirar; el aire
	 * alrededor de un bloque de imágenes las convierte en widgets. Sangrar es lo
	 * que las vuelve una franja de campaña.
	 *
	 * El 100vw es seguro porque base.css pone overflow-x: clip en la raíz. El
	 * titular de la sección sí se queda dentro del contenedor: es texto.
	 *
	 * Las columnas salen de data-columnas, que la plantilla ya imprimía y nadie
	 * leía: acá estaba fijo en tres, y el día que el mosaico pasó de seis piezas
	 * a cinco la última fila quedaba con dos azulejos y un hueco a la derecha
	 * del ancho de la ventana. Cinco no entra en tres ni en dos, así que en esta
	 * franja de anchos se queda como carrusel y recién se vuelve fila en 64em,
	 * donde hay lugar para las cinco de una. Cuatro tampoco entra en tres: va de
	 * a dos.
	 */
	.banner-mosaico:not([data-columnas="5"]) {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		overflow: visible;
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		padding-inline: 0;
		padding-block-end: 0;
	}

	.banner-mosaico:is([data-columnas="2"], [data-columnas="4"]) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.banner-editorial {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--esp-xl);
	}

	.banner-editorial--derecha .banner-editorial__medio { order: 2; }

	.banner-editorial__img { aspect-ratio: 3 / 2; }

	.tira-beneficios__lista {
		grid-auto-columns: 1fr;
		justify-items: center;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.carrusel__pista { grid-auto-columns: 28%; }

	/* Dos y dos. Las columnas del pie son cuatro cuando están los dos menús
	   asignados y dos cuando no, así que la grilla no puede depender de un número
	   fijo de hijos: a esta altura entran de a dos y a partir de 64em se reparten
	   solas. */
	.pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.pie__pagos {
		display: flex;
		align-items: baseline;
		gap: var(--esp-md);
	}

	.pie__pagos .pie__titulo { margin-block-end: 0; }

	.pie__legal {
		grid-auto-flow: column;
		justify-content: space-between;
		align-items: baseline;
	}

	/* Ficha a dos columnas: la foto y el panel de compra entran juntos en la
	   primera pantalla y el botón deja de estar debajo del pliegue. */
	.ficha {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--esp-lg);
		align-items: start;
	}

	.ficha > .summary { grid-area: 1 / 2; }
}

@media (min-width: 64em) {

	.cabecera__hamburguesa { display: none; }
	.cabecera__logo { margin-inline: 0; }

	/*
	 * En escritorio la fila vuelve a ser flex y el buscador se reordena al grupo
	 * de la derecha, al lado de la moneda y el carrito. Es la maqueta de siempre:
	 * logotipo, menú al medio, acciones. El markup no cambia entre anchos porque
	 * el botón del buscador es uno solo —el JS lo toma con querySelector— y lo
	 * único que se mueve es su lugar en la fila.
	 */
	.cabecera__fila { display: flex; }

	.cabecera__logo { order: 1; }
	.nav-principal { order: 2; }
	.cabecera__grupo { order: 3; margin-inline-start: 0; }
	.cabecera__acciones { order: 4; }

	.nav-principal {
		display: block;
		margin-inline: auto;
	}

	/*
	 * El panel cae de una barra negra, así que es negro: las dos cosas se leen
	 * como una sola pieza. La alternativa —panel blanco— obligaba además a
	 * reimponerle color a .nav-principal__enlace-hijo, que no declara ninguno y
	 * heredaría el blanco de la cabecera sobre fondo blanco.
	 */
	.nav-principal__panel {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		min-width: 14rem;
		padding: var(--esp-sm);
		background-color: var(--color-fondo-inverso);
		border: 1px solid var(--color-borde-inverso);
		box-shadow: var(--sombra-md);
	}

	.nav-principal__enlace-hijo { padding-inline-start: 0; }

	/* Acá entran todas de una, sean cuantas sean. El mosaico de cinco llega sin
	   la sangría porque en 48em se quedó como carrusel: se la damos ahora. */
	.banner-mosaico[data-columnas="5"] {
		grid-auto-flow: row;
		gap: 0;
		overflow: visible;
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		padding-inline: 0;
		padding-block-end: 0;
	}

	.banner-mosaico[data-columnas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.banner-mosaico[data-columnas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.banner-mosaico[data-columnas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.banner-mosaico[data-columnas="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.banner-mosaico[data-columnas="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	/* auto-fit y no un template fijo: con los dos menús asignados quedan cuatro
	   columnas parejas, y sin ellos las dos que hay ocupan todo el ancho en vez
	   de amontonarse a la izquierda dejando media franja negra vacía. */
	.pie__columnas { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

	.carrusel { margin-inline: 0; }

	.carrusel__pista {
		grid-auto-columns: calc((100% - var(--esp-md) * 3) / 4);
		gap: var(--esp-md);
		padding-inline: 0;
	}

	.carrusel__flechas { display: flex; }

	.ficha { column-gap: var(--esp-2xl); }

	/* Miniaturas en columna al costado de la foto: la ficha entra entera en la
	   primera pantalla y la foto principal gana todo el ancho de la columna. */
	.ficha .woocommerce-product-gallery {
		grid-template-columns: var(--ficha-miniaturas) minmax(0, 1fr);
		gap: var(--esp-sm);
		align-items: start;
	}

	.ficha .flex-viewport,
	.ficha .woocommerce-product-gallery__trigger { grid-area: 1 / 2; }

	.ficha .flex-control-thumbs {
		grid-area: 1 / 1;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow: visible;
	}

	/* Sin JavaScript no hay columna de miniaturas que valga: la galería de
	   respaldo ocupa las dos. */
	.ficha .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-area: 1 / 1 / auto / -1;
	}

	/* Línea de lectura cómoda para el nombre y la descripción */
	.ficha .summary { max-width: 30rem; }

	/* Con la descripción abierta el panel es más alto que la foto. Fijando la
	   galería, la foto acompaña la lectura en vez de dejar media columna
	   vacía. El sello se fija con ella —comparten celda— y como su desfasaje
	   es su propio margen, los dos quedan pegados mientras viajan. */
	.ficha > .woocommerce-product-gallery,
	.ficha > .ficha__sello {
		position: sticky;
		inset-block-start: calc(var(--header-alto) + var(--esp-md));
	}
}

/* Con puntero fino el mega menú abre al pasar por encima; en táctil solo con
   el botón. */
@media (min-width: 64em) and (hover: hover) {

	.nav-principal__item.tiene-hijos:hover > .nav-principal__panel,
	.nav-principal__item.tiene-hijos:focus-within > .nav-principal__panel {
		display: block;
	}

	/* El mismo desvanecido que en la apertura por clic. Se repite porque acá el
	   panel se abre por :hover y no por una clase: son dos caminos distintos
	   hacia el mismo estado visible. */
	@supports (transition-behavior: allow-discrete) {

		.nav-principal__item.tiene-hijos:hover > .nav-principal__panel,
		.nav-principal__item.tiene-hijos:focus-within > .nav-principal__panel {
			opacity: 1;
			transform: none;
		}

		@starting-style {
			.nav-principal__item.tiene-hijos:hover > .nav-principal__panel,
			.nav-principal__item.tiene-hijos:focus-within > .nav-principal__panel {
				opacity: 0;
				transform: translateY(-6px);
			}
		}
	}
}