/*
Theme Name: SIXS (Kadence Child)
Theme URI: https://sixs.com.ar
Description: Child theme de Kadence para SIXS. Todo el código custom del sitio vive acá — nunca en el theme padre, que se sobrescribe en cada actualización de Kadence.
Author: Bieri Studio
Author URI: https://bieri.studio
Template: kadence
Version: 1.60.0
Text Domain: kadence-child
*/

/* ==========================================================================
   PDP-4 — Cuotas y precio con transferencia, debajo del precio.
   El HTML lo genera el shortcode [sixs_payment_highlight] (functions.php).
   ========================================================================== */

.sixs-payment {
	margin: 0.35rem 0 0.75rem;
}

.sixs-payment p {
	margin: 0 0 0.2rem;
	font-size: 14px;
	line-height: 1.4;
	color: #4a5568;
}

/* El monto ya no va en <strong> sino en un span propio (ver functions.php).
 * Esta regla apuntaba a strong y quedo muerta al hacer ese cambio: en la
 * ficha el monto de transferencia perdio tamano y color sin que se notara. */
.sixs-payment__transfer .sixs-payment__amount {
	color: var(--sixs-ink);
	font-size: 16px;
	font-weight: 700;
}

/* wc_price() envuelve el monto en .woocommerce-Price-amount. */
.sixs-payment__installments .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--sixs-ink);
}

@media (max-width: 767px) {
	.sixs-payment p {
		font-size: 13px;
	}
}

/* CARD-3 — misma info, comprimida para la grilla del catálogo. */
.sixs-payment--card {
	margin: 0.25rem 0 0.4rem;
}

.sixs-payment--card p {
	font-size: 12px;
	line-height: 1.35;
	margin-bottom: 0.1rem;
}

.sixs-payment--card .sixs-payment__transfer strong {
	font-size: 13px;
}

@media (max-width: 767px) {
	.sixs-payment--card p {
		font-size: 11px;
	}
}

/* ==========================================================================
   PDP-1 — Bloque de beneficios en la ficha de producto
   Va entre el precio y la descripción, arriba del selector de talle.
   El markup lo inserta el WooTemplate de Kadence (post 306).
   ========================================================================== */

.sixs-benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 1.25rem 0 1.5rem;
	border: 1px solid #e5e5e5;
}

.sixs-benefit {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 0.9rem;
	border-right: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

/* Sin bordes colgando en la última columna ni en la última fila. */
.sixs-benefit:nth-child(2n) {
	border-right: 0;
}

.sixs-benefit:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.sixs-benefit svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	stroke: var(--sixs-ink);
}

.sixs-benefit span {
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sixs-ink);
}

@media (max-width: 767px) {
	.sixs-benefits {
		grid-template-columns: 1fr;
	}

	.sixs-benefit {
		border-right: 0;
	}

	.sixs-benefit:nth-last-child(-n + 2) {
		border-bottom: 1px solid #e5e5e5;
	}

	.sixs-benefit:last-child {
		border-bottom: 0;
	}

	.sixs-benefit span {
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------
 * HOME-1 / HOME-2 — Hero de la home
 *
 * Antes: slider full-bleed 16:9 que en desktop ocupaba el viewport
 * entero, con la columna entera clickeable (kb-section-link-overlay).
 * Ahora: alto acotado para que se asomen los productos de abajo, a
 * ancho completo, con un CTA visible en lugar del banner clickeable.
 *
 * OJO con la especificidad: Kadence imprime CSS inline con selectores
 * por uniqueID (.kb-btns18_xxx .kb-button) DESPUES de este stylesheet.
 * A igual especificidad gana el suyo, asi que lo que el pisa va con
 * !important.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * El hero: la foto limpia arriba, la informacion en una barra abajo
 * (2026-08-21)
 *
 * Antes el badge "live" y los dos botones iban ENCIMA de la foto, en
 * absolute. Funcionaba, pero obligaba a defender la legibilidad contra una
 * imagen que cambia sola cada 5 segundos: text-shadow, botones con sombra,
 * blanco sobre lo que toque. Con tres fotos de campana rotando, el peor
 * slide manda.
 *
 * Ahora la foto va sin nada arriba y la informacion baja a una barra
 * propia: a la izquierda el estado del drop, a la derecha los dos CTA.
 * El texto deja de pelearse con la imagen y los botones pasan a leerse
 * siempre igual, no "segun el slide".
 *
 * 🔑 Se resuelve con GRID sobre el contenedor que ya existe, sin envolver
 * nada: el `.kt-inside-inner-col` tiene exactamente tres hijos —slider,
 * badge y botones—, asi que el slider toma la fila 1 a lo ancho y los
 * otros dos se reparten la fila 2. Un wrapper nuevo habria que meterlo en
 * el post_content, que es contenido del cliente y no viaja con el rsync.
 *
 * ⚠️ Si alguien agrega un cuarto bloque a esa columna desde el editor, cae
 * en la fila 3 a lo ancho. No rompe nada, pero no es lo que se espera:
 * hay que darle su `grid-column` aca.
 * ------------------------------------------------------------------ */
.sixs-hero-col > .kt-inside-inner-col {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 24px;
	background: var(--sixs-paper, #efedea);
	border-bottom: 1px solid var(--sixs-hairline);
}

/* La foto sigue a sangre: ocupa las dos columnas. */
/* La foto define la fila 1 a lo ancho. `grid-row` explicito porque ahora
 * comparte celda con la portada y el contador: sin declararlo, el
 * auto-placement les daria filas propias y cada uno agregaria alto. */
.sixs-hero-col > .kt-inside-inner-col > .kb-advanced-slider {
	grid-column: 1 / -1;
	grid-row: 1;
}

/* El alto de la foto: 78vh en vez de los 70 que trae el bloque (21/08).
 *
 * Con la informacion ahora ABAJO de la imagen, el hero no termina en la
 * foto: termina en la barra. A 70vh sobraba pantalla y la seccion siguiente
 * se asomaba de mas; a 78 + los ~60 de la barra el corte cae justo debajo
 * del CTA, que es donde se quiere que caiga.
 *
 * ⚠️ El valor original vive en el `minHeight` del bloque slider, o sea en el
 * post_content — contenido del cliente, que NO viaja con el rsync. Se pisa
 * desde aca a proposito: asi el alto es una linea de CSS versionada y no una
 * config mas para replicar a mano en prod.
 *
 * El min-height efectivo lo pone Kadence en `.kb-advanced-slide-inner-wrap`,
 * inline y por uniqueID: de ahi el !important. No sirve ponerlo en el
 * `.kb-advanced-slider` de afuera, que mide `auto`. */
@media (min-width: 901px) {
	.sixs-hero-slider .kb-advanced-slide-inner-wrap {
		min-height: 78vh !important;
	}
}

/* El aire de la barra va como padding de los DOS hijos y no del
 * contenedor: el contenedor tambien envuelve la foto, y ahi el padding la
 * dejaria de estar a sangre. */
.sixs-hero-col > .kt-inside-inner-col > .sixs-hero-cta {
	position: static;
	grid-column: 2;
	justify-self: end;
	padding: 18px var(--sixs-gutter) 18px 0;
	margin: 0 !important;
}

/* 🔑 Los dos botones tienen que medir EXACTAMENTE lo mismo.
 *
 * El secundario lleva `border: 1px solid` y el primario no, asi que con el
 * mismo padding el de contorno salia 2px mas alto y 2px mas ancho — poco,
 * pero uno al lado del otro se ve. Por eso el primario lleva un borde
 * TRANSPARENTE: no se ve, y las dos cajas miden igual.
 *
 * El `font-size` tambien va forzado: Kadence guarda la tipografia POR BOTON
 * en el bloque, o sea en el post_content, y los dos se cargaron en momentos
 * distintos. Atado aca, no depende de que el cliente los deje parejos. */
.sixs-hero-cta .kb-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.85em;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	padding: 0.95em 1.7em !important;
	font-size: 13px !important;
	font-weight: 500;
	letter-spacing: 1.5px !important;
	line-height: 1.2 !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Los dos botones se dan vuelta: venian resueltos en blanco para
 * despegarse de la foto y ahora viven sobre una barra clara. El primario
 * pasa a solido oscuro y el secundario a contorno oscuro. Se cae tambien
 * la `box-shadow`, que existia para separarlos de la imagen. */
.sixs-hero-cta .kb-button {
	background: var(--sixs-ink) !important;
	color: #ffffff !important;
}

.sixs-hero-cta .kb-button:hover {
	background: var(--sixs-ink-hover) !important;
	color: #ffffff !important;
}

/* En mobile la barra se apila: el estado arriba, los botones abajo, los
 * dos alineados a la izquierda. En una fila no entran ni con los botones
 * al minimo. */
@media (max-width: 900px) {
	.sixs-hero-col > .kt-inside-inner-col {
		grid-template-columns: minmax(0, 1fr);
	}

	.sixs-hero-col > .kt-inside-inner-col > .sixs-hero-cta {
		grid-column: 1;
		justify-self: start;
		padding: 0 var(--sixs-gutter) 20px;
	}

	/* Los dos botones en UNA fila, colgados del mismo margen izquierdo que el
	 * texto de arriba (21/08). Antes iban uno por renglon: con dos anchos
	 * distintos apilados quedaban dos ejes que no coincidian con nada.
	 *
	 * `nowrap` + el padding y el cuerpo reducidos de abajo: en 390px los dos
	 * entran holgados (medido), y el `nowrap` garantiza que no se partan en el
	 * celular mas angosto — ahi se achican, que es preferible a apilarse. */
	.sixs-hero-col > .kt-inside-inner-col > .sixs-hero-cta,
	.sixs-hero-cta .kb-buttons-wrap {
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
	}
}

@media (max-width: 767px) {
	.sixs-hero-cta .kb-button {
		padding: 0.85em 1.15em !important;
		font-size: 11px !important;
		letter-spacing: 1px !important;
		/* El `nowrap` del contenedor evita que los dos botones se apilen, pero no
		 * que el TEXTO de adentro parta en dos renglones: "VER LA COLECCIÓN"
		 * caia en dos lineas y los botones quedaban del doble de alto. Son dos
		 * wraps distintos y hay que apagar los dos. */
		white-space: nowrap;
	}

	.sixs-hero-cta .kb-button::after {
		font-size: 1em;
	}
}

.sixs-hero-cta .kb-button::after {
	content: "\2192";
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.25s ease;
}

.sixs-hero-cta .kb-button:hover::after {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------
 * Barra de beneficios (top header bar) en negro #101215
 *
 * El header queda TRANSPARENTE sobre el hero a proposito (post meta
 * _kad_post_transparent = enable en la home); lo unico que lleva color
 * es esta barra.
 *
 * Historia del color, para no volver a darla vueltas: negro (6cee5a3,
 * 07/08) -> beige #ded6c9 (1bf6c15, mismo dia) -> negro de nuevo
 * (09/08, pedido de Matias). Ahora es #101215, el mismo oscuro que la
 * banda de beneficios y los botones de la ficha, en vez del #1a202c
 * viejo que tiraba a azul.
 *
 * ⚠️ El !important NO es opcional: el custom CSS del cliente tiene una
 * regla que pone esta misma barra en `background: transparent` y se
 * imprime DESPUES de este stylesheet.
 *
 * Kadence dibuja DOS barras, una desktop y otra mobile, y comparten
 * el wrap. Por eso alcanza con apuntarle a .site-top-header-wrap.
 * ------------------------------------------------------------------ */

.site-top-header-wrap .site-header-row-container-inner {
	background: #e8e0d5 !important;
	border-bottom: 0 !important;
}

/* Texto en TINTA, no blanco: la barra volvio a un fondo claro (#e8e0d5,
 * pedido del 21/08) y el blanco de la etapa negra la dejaba ilegible.
 * El #101215 sobre ese beige da 14.3:1.
 *
 * ⚠️ El color del texto y el `background` de la regla de arriba se cambian
 * SIEMPRE juntos, y con ellos el `background-color` de .sixs-hero-row, que
 * es la franja que esta barra empuja. Los tres desacoplados es como se
 * llega a texto invisible o a un escalon de color abajo del ticker.
 *
 * Los iconos ya NO siguen al texto: tienen color propio (ver
 * .sixs-ticker::before).
 *
 * ⚠️ En mobile el contenedor del ticker NO es `.header-html` sino
 * `.mobile-html`: son dos elementos distintos, uno por breakpoint. Con
 * la lista incompleta el texto del celular se quedaba en el negro que
 * hereda del theme —negro sobre el #101215 de la barra— y la barra de
 * beneficios era, literalmente, ilegible. El `*` cubre los dos y
 * cualquier markup que Kadence meta ahi adentro en el futuro. */
.site-top-header-wrap .site-header-row-container-inner,
.site-top-header-wrap .site-header-row-container-inner * {
	color: #101215 !important;
}

/* ------------------------------------------------------------------
 * Que la barra de beneficios EMPUJE el hero
 *
 * El transparent header de Kadence es todo-o-nada: pone el header
 * entero en position:absolute y el contenido arranca en top:0. Con la
 * barra de beneficios adentro, la imagen del hero le quedaba por
 * DEBAJO y perdia sus primeros pixeles.
 *
 * Se corrige empujando el row del hero exactamente el alto de la
 * barra. El menu sigue flotando transparente encima de la foto, que
 * es lo buscado.
 *
 * Los valores estan MEDIDOS en el navegador (34px desktop, 44px el
 * header mobile, que es otro elemento). Si se cambia el min-height del
 * ticker o su tipografia, hay que volver a medirlos: ya paso una vez,
 * al bajar la barra de 39 a 34 quedaron 6px de relleno de mas.
 *
 * El padding va en el row y no como margin en la columna para que el
 * fondo negro cubra la franja: si el alto real y el declarado se
 * desfasan, se ve negro (sigue la barra) y no crema.
 * ------------------------------------------------------------------ */

.wp-block-kadence-rowlayout.sixs-hero-row {
	/* Del mismo color que la barra: esta franja es la que la barra
	 * empuja, y si los dos tonos no coinciden se ve un escalon entre la
	 * barra y la foto del hero. Al cambiar el color de la barra hay que
	 * cambiar este tambien. */
	background-color: #e8e0d5;
	/* 🔑 El alto lo MIDE assets/js/header.js y lo publica en
	 * --sixs-topbar-real. Estuvo hardcodeado y se desfaso DOS veces: la
	 * primera dejo 6px de beige de mas, la segunda una franja negra abajo
	 * del ticker (confirmada pintandola de rojo el 2026-08-10). El valor
	 * fijo queda solo como fallback sin JS. */
	padding-top: var(--sixs-topbar-real, calc(var(--sixs-topbar-h) + 4px));
}

@media (max-width: 1024px) {
	.wp-block-kadence-rowlayout.sixs-hero-row {
		padding-top: var(--sixs-topbar-real, 44px);
	}
}

/* ------------------------------------------------------------------
 * CARD-3 — Card de la grilla
 *
 * Jerarquia pedida (mockup 2026-08-07): el precio con transferencia es
 * el protagonista y el de lista pasa a ser el "antes", tachado y gris.
 *
 * Orden: badge sobre la foto, titulo, precio tachado, transferencia,
 * cuotas. Las estrellas todavia no se dibujan: Woo no muestra promedio
 * de cero y los productos no tienen resenas cargadas (REV-1).
 * ------------------------------------------------------------------ */

/* Verde de "ahorro". Es un color ajeno a la paleta blanco/negro/crema
 * de SIXS, elegido a proposito para que el precio con descuento sea lo
 * unico que rompe el gris del resto de la card.
 *
 * #0f7040 y no un verde mas claro: sobre el #eeedeb de la card da
 * 5.26:1 de contraste (AA). El #1b7f3b que estaba antes se quedaba en
 * 4.33 y el rojo que se probo, en 3.44 — abajo del minimo. */
:root {
	--sixs-save: #0f7040;
}

/* --- Badge sobre la foto --- */

.sixs-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	padding: 0.45em 0.9em;
	border-radius: 999px;
	background: #ffffff;
	color: var(--sixs-ink);
	/* 11px es el tamano de diseno y se mantiene en todos los telefonos
	 * normales: a 390px de ancho el 2.9vw da 11.3px y gana el tope. El
	 * clamp existe SOLO para el extremo angosto (iPhone SE, 320px), donde
	 * la card mide ~139px y el pill de 11px no entra ni con el texto corto.
	 * Ahi baja a 9.3px en vez de desbordar la foto.
	 *
	 * Es deliberado que escale con vw y no con el ancho de la card: las dos
	 * grillas de mobile (categoria y PRODUCTOS RELACIONADOS) son de 2
	 * columnas, asi que el ancho de card es proporcional al del viewport. */
	font-size: clamp(9.3px, 2.9vw, 11px);
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

/* El badge se posiciona contra la card entera; sin esto se anclaria a
 * un ancestro lejano y terminaria fuera de la foto. */
.woocommerce ul.products li.product,
.wp-block-kadence-productcarousel .product,
li.product {
	position: relative;
}

/* --- Titulo --- */

.wp-block-kadence-wootemplate-blocks-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 700;
}

/* --- Precio de lista: pasa a ser el "antes" --- */

/* El precio vuelve a ser el protagonista de la card (mockup del
 * 2026-08-07): grande, oscuro y SIN tachar. La transferencia baja a
 * dato de apoyo debajo del separador.
 *
 * El :not() NO es opcional. La ficha usa la MISMA clase
 * .kwt-price-wrap que la card, y sin excluirla se le pisa el tamano al
 * precio de la PDP. Shop Kit la distingue con .kwt-price-single. */
.kwt-price-wrap:not(.kwt-price-single),
.kwt-price-wrap:not(.kwt-price-single) .woocommerce-Price-amount {
	color: var(--sixs-ink) !important;
	font-weight: 700 !important;
	text-decoration: none;
	font-size: 22px !important;
	line-height: 1.15 !important;
}

/* Si el producto tiene oferta real de Woo, el bloque ya trae <del> y <ins>.
 * Ahi manda el markup nativo: no se tacha el precio nuevo. */
.kwt-price-wrap ins,
.kwt-price-wrap ins .woocommerce-Price-amount {
	text-decoration: none;
}

/* --- Bloque de pagos --- */

/* Espaciado de la card: 6px parejos entre TODO.
 *
 * Se resuelve con un gap en el contenedor, no ajustando cinco margenes
 * distintos: title, price, el bloque de pagos y el boton traen cada
 * uno los suyos, mas el line-height, y perseguirlos de a uno es lo que
 * habia dejado el espaciado en -8 / 6 / 9 / 9 / 38 px.
 *
 * Requiere que el bloque price NO tenga su margin-top:-40px (se saco
 * en el template 529): ese negativo existia para compensar justamente
 * estos margenes. */
li.product .kb-row-layout-id529_83b6f4-d4 .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	gap: 0;
}

li.product .kb-row-layout-id529_83b6f4-d4 .kt-inside-inner-col > * {
	margin: 0 !important;
}

/* El titulo venia con line-height 27.2px para 17px de fuente y una caja
 * de 42px: casi 30px de aire alrededor de un texto de 13px. Por eso un
 * gap parejo de 6px se veia como 24px aca y como 8px mas abajo. */
li.product .kwt-title-wrap,
li.product .kwt-title-wrap * {
	font-size: 15px !important;
	line-height: 1.2 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Gaps calibrados contra la referencia del cliente.
 *
 * Se miden entre GLIFOS, no entre cajas: cada elemento tiene distinto
 * line-height, asi que un mismo gap de caja se ve distinto en cada par
 * (con 6px parejos daba 24/12/8/9/8 px reales).
 *
 * Referencia (card de 463px): 15 / 15 / 11 / 13 / 18 px entre glifos.
 * Normalizado contra la altura del texto de cuotas (la referencia tiene
 * el precio mas grande y el titulo mas chico que nuestra card, asi que
 * escalar por ancho no alcanza): 11 / 11 / 8 / 10 / 14 px.
 *
 * ⚠️ Estas reglas necesitan el mismo prefijo largo que el reset
 * `> * { margin: 0 !important }`. Con un selector mas corto pierden por
 * especificidad y los margenes quedan en cero sin aviso: paso, y dejo
 * al boton pegado a 2px de la transferencia. */
li.product .kb-row-layout-id529_83b6f4-d4 .kt-inside-inner-col > .kwt-price-wrap {
	margin-top: 4px !important;
}

li.product .kb-row-layout-id529_83b6f4-d4 .kt-inside-inner-col > .sixs-payment--card {
	margin-top: 6px !important;
}

.sixs-payment--card {
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1.25;
}

.sixs-payment--card p {
	margin: 0 !important;
}

/* Cuotas: dato de apoyo pegado al precio. */
.sixs-payment--card .sixs-payment__installments {
	color: #6b7280;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.25;
}

/* Transferencia: separada por una linea, en oscuro y con peso.
 * El separador es un border-top del propio parrafo, asi no hace falta
 * meter un <hr> en el markup del shortcode. */
/* La linea es el border-top de este parrafo. El gap del contenedor da
 * los 6px de arriba de la linea; el padding-top, los 6px de abajo. */
.sixs-payment--card .sixs-payment__transfer {
	margin-top: 6px !important;
	padding-top: 7px;
	border-top: 1px solid rgba(26, 32, 44, 0.14);
	color: var(--sixs-ink);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.25;
	text-decoration: none;
}

.sixs-payment--card .sixs-payment__transfer .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* --- Boton AGREGAR --- */

.wp-block-kadence-wootemplate-blocks-add-to-cart .button,
.wp-block-kadence-wootemplate-blocks-add-to-cart .kt-woo-add-to-cart-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.95em 1.2em;
	border: 0;
	border-radius: 999px;
	background: var(--sixs-ink);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	transition: background-color 0.25s ease;
}

.wp-block-kadence-wootemplate-blocks-add-to-cart .button:hover,
.wp-block-kadence-wootemplate-blocks-add-to-cart .kt-woo-add-to-cart-btn:hover {
	background: #000000;
	color: #ffffff;
}

/* El monto va en un span propio, no en <strong>: el theme pone los
 * <strong> en display:block y un bloque en medio de texto inline parte
 * "Desde $136.566 con Transferencia" en TRES lineas. */
.sixs-payment__amount {
	display: inline !important;
	font-weight: inherit;
}

.sixs-payment .woocommerce-Price-amount {
	display: inline;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Header sticky transparente, con la barra de beneficios en beige
 *
 * Kadence fija .site-header-upper-inner-wrap (no #main-header, que
 * queda static) y le pinta el fondo #eeedeb al pegarse. Ese wrapper
 * contiene las DOS filas, asi que ponerlo transparente deja pasar el
 * contenido por detras del menu; la barra de beneficios conserva su
 * negro porque el color lo lleva su propia fila.
 *
 * Para que la barra tambien quede pegada hace falta el theme_mod
 * header_sticky = "top_main" (venia en "main"). Eso es CONFIG: no
 * viaja con el rsync, hay que repetirlo en prod.
 * ------------------------------------------------------------------ */

/* ⚠️ SOLO en la home. El header transparente sobre el contenido tiene
 * sentido ahi porque abajo hay un hero a pantalla casi completa. En el
 * resto del sitio —y sobre todo en la ficha de producto, donde la
 * galeria son 12 fotos apiladas— el menu queda flotando sobre las
 * imagenes e ilegible, y parece que el header "se corta a la mitad".
 * Fuera de la home conserva el fondo solido de Kadence. */
body.home .site-header-upper-inner-wrap.kadence-sticky-header.item-is-stuck {
	background: transparent !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------
 * Grilla de Instagram (@sixs.ba)
 *
 * Replica el bloque del front de Vercel (InstagramGrid.tsx): 5 columnas
 * en desktop, 3 en mobile, cuadradas y casi sin separacion.
 *
 * Las imagenes son las MISMAS 10 estaticas del repo
 * (web/public/instagram/), subidas a la biblioteca. No hay feed
 * automatico: en Vercel tampoco lo habia. Para actualizarlas hay que
 * reemplazarlas a mano.
 * ------------------------------------------------------------------ */

.sixs-ig-title {
	font-size: clamp(22px, 2.2vw, 30px);
	letter-spacing: -0.01em;
	margin-bottom: 0.6em;
}

.sixs-ig-title a {
	color: inherit;
	text-decoration: none;
}

.sixs-ig-title a:hover {
	text-decoration: underline;
}

.sixs-ig-grid .kb-gallery-figure,
.sixs-ig-grid .kadence-blocks-gallery-item {
	overflow: hidden;
}

.sixs-ig-grid img {
	transition: transform 0.5s ease;
}

.sixs-ig-grid a:hover img {
	transform: scale(1.03);
}

/* ------------------------------------------------------------------
 * Cards grandes de categoria: mismo radius que las de producto
 *
 * El radius de las cards del catalogo son 4px y NO estan en la imagen
 * sino en el <li> de la card (li.entry.content-bg). Aca se aplica a la
 * figure de la galeria, con overflow hidden para que recorte tambien
 * el titulo superpuesto.
 *
 * El :not(.sixs-ig-grid) deja la grilla de Instagram sin radius: son
 * los 6 bloques de categoria los que lo llevan.
 * ------------------------------------------------------------------ */

.wp-block-kadence-advancedgallery:not(.sixs-ig-grid) .kb-gallery-figure {
	border-radius: 4px;
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * CTA al lado del titulo de seccion
 *
 * El link va DENTRO del <h2>, no como bloque hermano: el contenedor
 * (.kt-inside-inner-col) es flex column, asi que dos hermanos nunca
 * comparten linea por mas display:inline-block que se les ponga.
 * ------------------------------------------------------------------ */

a.sixs-section-cta {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.9em;
	padding: 0.55em 1.2em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

a.sixs-section-cta:hover {
	background: #000000;
	color: #ffffff;
}

/* En MOBILE el CTA del titulo no va (21/08).
 *
 * Es el tercero de tres caminos al mismo destino: el titulo de la seccion, la
 * grilla entera y el boton "VER TODO" que la cierra. En desktop entra en la
 * misma linea del titulo y no cuesta nada; en el celular se apila debajo,
 * empuja la grilla y compite con el "VER TODO" que esta a un scroll de
 * distancia. Sacarlo ademas le devuelve el ancho al titulo, que es lo que
 * permite agrandarlo. */
@media (max-width: 767px) {
	a.sixs-section-cta {
		display: none;
	}

	/* De 17,6px a 28. Con el CTA al lado, el titulo tenia que entrar en el
	 * hueco que le quedaba; solo, puede ocupar el renglon entero.
	 *
	 * El `:has()` apunta EXACTAMENTE a los titulos de seccion —los unicos h2
	 * que llevan ese CTA adentro— y no a cualquier heading de Kadence, que
	 * incluiria los de la ficha y los del footer. */
	h2.wp-block-kadence-advancedheading:has(> a.sixs-section-cta) {
		font-size: 28px !important;
		line-height: 1.1 !important;
	}
}

/* ------------------------------------------------------------------
 * Ticker del top header: iconos y separacion
 *
 * Los iconos van por CSS y no en el theme_mod: el contenido del header
 * pasa por sanitizacion y un <svg> inline ahi es fragil. Aca viajan
 * versionados con el child theme.
 *
 * mask-image + background-color en vez de background-image: asi el
 * icono hereda el color del texto, sin duplicar SVG por color.
 * ------------------------------------------------------------------ */

/* El espaciado va como margin de cada item y el gap del flex se anula.
 *
 * Esto NO es capricho: la animacion del ticker (custom CSS del cliente)
 * termina en translateX(calc(-50% - 2rem)), donde ese 2rem es medio gap
 * de los 4rem originales. Cualquier cambio de espaciado desalinea el
 * loop y el marquee "salta" al reiniciar. Con gap:0 y margenes
 * simetricos en cada item, cada mitad del contenido mide exactamente lo
 * mismo y -50% cae siempre justo, valga lo que valga el margen.
 *
 * La otra mitad del problema es el ANCHO: si media pasada mide menos
 * que el viewport, se ve el hueco. Con 4 repeticiones daba 1508px y ya
 * fallaba en un monitor de 1920. Por eso el ticker lleva 8. */
.site-top-header-wrap .loop-content {
	gap: 0 !important;
	animation-name: sixs-ticker-scroll !important;
	/* 120s y no los 60s originales: el contenido se duplico a 8
	 * repeticiones, asi que recorrer -50% es el doble de distancia. Sin
	 * esto el ticker iria al doble de velocidad. */
	animation-duration: 120s !important;
}

@keyframes sixs-ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* El texto del ticker se perdia: 11px, peso normal, blanco plano sobre
 * negro y en movimiento. Es la barra que comunica envio gratis, cuotas y
 * el 15% de transferencia — o sea los tres argumentos de venta — y era lo
 * menos visible de la home. Pedido del cliente (21/08): "la haria mas
 * llamativa, al menos el texto".
 *
 * El TAMANO vuelve a los 11px originales (segunda pasada del 21/08): con
 * el fondo claro la barra ya no necesitaba crecer para leerse. Lo que si
 * queda del primer intento es el peso 700 y el letter-spacing, que es de
 * donde sale la legibilidad de un texto chico y en movimiento.
 *
 * El color de atencion lo ponen el icono y el punto separador, no el
 * texto. */
.sixs-ticker {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 1.5rem;
	white-space: nowrap;
	font-size: 11px !important;
	/* De 700 a 400 (21/08). El peso habia entrado cuando la barra era NEGRA y
	 * el texto blanco: ahi el bold compensaba el halo que hace el texto claro
	 * sobre fondo oscuro. Con la barra en beige y el texto en tinta ese
	 * problema no existe, y el bold en 11px con letter-spacing se lee apretado.
	 * El `letter-spacing` se queda: es lo que sostiene la legibilidad de un
	 * texto chico en movimiento, y sin el peso pesa mas todavia. */
	font-weight: 400 !important;
	letter-spacing: 0.05em;
}

/* El alto de la barra lo fija un min-height del wrapper (theme_mod
 * top_header_height, venia en 35px), no el padding de los hijos: todos
 * tienen padding 0 y el contenido mide 16px.
 *
 * ⚠️ Si se cambia este numero hay que reajustar el padding-top de
 * .sixs-hero-row, que empuja el hero justo el alto de la barra. */
/* 🔑 El alto de la barra y el empuje del hero salen de la MISMA variable.
 * Son dos numeros que tienen que ser identicos —el hero se empuja
 * exactamente el alto de la barra— y ya se desfasaron una vez. Atados a una
 * variable no se pueden separar.
 *
 * El +4px es el `padding: 2px 0` que Kadence le pone al .site-container de
 * adentro de la barra: el alto real es min-height + ese padding. */
:root {
	/* De vuelta en 30px, junto con el texto en 11px (21/08). Subio a 34
	 * mientras el texto estuvo en 12.5. El empuje del hero no hay que
	 * tocarlo: lo mide header.js y lo publica en --sixs-topbar-real. */
	--sixs-topbar-h: 30px;
}

#main-header .site-top-header-inner-wrap {
	min-height: var(--sixs-topbar-h) !important;
}

/* La fila del menu baja de 80px a 62.
 *
 * El menu mide 31px de alto y Kadence lo centraba en 80: 25px de aire arriba
 * y 25 abajo. Contra el ticker, que mide 34, esos 25 se leian como un hueco
 * entre las dos filas del header en vez de como una sola pieza.
 *
 * Con 62 quedan ~15 de cada lado. No baja mas porque el menu flota sobre la
 * foto del hero: por debajo de ~56 los items empiezan a tocar el borde del
 * ticker y la fila deja de tener aire propio.
 *
 * ⚠️ En MOBILE no se toca: ahi el alto lo mide `header.js` para saber donde
 * arranca el drawer del menu, y este selector es solo `#main-header`. */
@media (min-width: 1025px) {
	#main-header .site-main-header-inner-wrap {
		min-height: 62px !important;
	}
}

/* El icono deja de heredar el color del texto y tiene color propio: el
 * azul #2b70cc que pidio el cliente (21/08). Sobre el beige #e8e0d5 da
 * 3.48:1 — pasa el minimo de 3:1 que le corresponde a un grafico, pero no
 * llega al 4.5 de un texto: por eso el azul es SOLO el icono y el punto, y
 * las palabras siguen en tinta.
 *
 * ⚠️ Esto rompe a proposito la razon original del mask-image (que el icono
 * siguiera al texto solo, para sobrevivir a un cambio de fondo). Si la
 * barra vuelve a un fondo oscuro hay que revisar este azul: sobre el
 * #101215 se cae a 3.2:1 y con un icono de 1.15em queda al limite. */
.sixs-ticker::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background-color: #2b70cc;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sixs-ticker--envio::before {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%2F%3E%3Cpath%20d%3D%22M15%2018H9%22%2F%3E%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.62l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%2F%3E%3Cpath%20d%3D%22M15%2018H9%22%2F%3E%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.62l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.sixs-ticker--cuotas::before {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%225%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%2010h20%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%225%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%2010h20%22%2F%3E%3C%2Fsvg%3E");
}

.sixs-ticker--transfer::before {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%203-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22m16%2021%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22M20%2017H4%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%203-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22m16%2021%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22M20%2017H4%22%2F%3E%3C%2Fsvg%3E");
}


/* Punto separador entre mensajes — el mismo recurso que ya usan los
 * beneficios del carrito (.sixs-cart-perks__row::before), que es de donde
 * salio el pedido: "algun color como en la parte de beneficios que pones
 * esos puntos rojos".
 *
 * Va en el color del TEXTO, no en el azul del icono (pedido del 21/08):
 * el separador es puntuacion, no informacion. Con los tres elementos en
 * azul el ojo no distinguia el icono —que si marca de que habla cada
 * mensaje— del punto que solo corta. El azul queda para el icono solo.
 *
 * Va como ::after DENTRO del span y no como un elemento aparte: el marquee
 * necesita que las dos mitades del contenido midan exactamente lo mismo
 * para que el translateX(-50%) caiga justo. Un pseudo-elemento por item se
 * repite identico en todas las copias, asi que el loop no se desalinea. */
.sixs-ticker::after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	flex: 0 0 auto;
	margin-left: 1.05rem;
	margin-right: -1.05rem;
	border-radius: 999px;
	background: #101215;
}

@media (max-width: 767px) {
	/* Los 13px son de HOME-4: abajo de eso la barra era ilegible en el
	 * celular. No bajarlos para igualar el desktop. */
	.sixs-ticker {
		margin: 0 1rem;
		font-size: 13px !important;
	}

	/* El separador se acompaña al margen mas chico de mobile. */
	.sixs-ticker::after {
		margin-left: 0.7rem;
		margin-right: -0.7rem;
	}
}

/* ------------------------------------------------------------------
 * PORTADA DEL HERO — el nombre del drop, grande, sobre la foto (2026-08-21)
 *
 * La home abria con una foto de campana muda: linda, pero sin decir de que
 * coleccion era. El nombre estaba dos pantallas mas abajo, como titulo de la
 * grilla. Ahora entra al hero como PORTADA y abajo queda como BAJADA de su
 * propia seccion — el mismo texto en dos jerarquias, que es lo que hace una
 * tapa de revista.
 *
 * Va absoluto contra `.kt-inside-inner-col`, que ya es `relative`: asi no
 * ocupa fila en el grid del hero y la barra de abajo no se entera de que
 * existe.
 * ------------------------------------------------------------------ */

/* 🔑 La portada NO va en `absolute` contra una variable medida por JS.
 *
 * La primera version se anclaba con `bottom: calc(var(--sixs-hero-cta-h) +
 * 66px)`. Esa variable la mide `header.js` DESPUES del primer render, asi que
 * en cada carga el titulo se dibujaba con el fallback y despues SALTABA al
 * valor real. Un bloque de 96px moviendose solo al entrar a la home.
 *
 * Ahora es un item mas del grid del hero, en la MISMA CELDA que la foto
 * (`grid-row: 1`), pegado abajo con `align-self: end`. La fila la define la
 * foto, que es mas alta, asi que el titulo no agrega alto: se apoya en el
 * borde inferior de la imagen sin que nadie tenga que medir nada.
 *
 * Sin JS de por medio no hay primer valor ni segundo: el navegador lo
 * posiciona una sola vez, con el layout. */
.sixs-hero-cover {
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: end;
	justify-self: start;
	z-index: 3;
	margin: 0 var(--sixs-gutter) 40px;
	max-width: calc(100% - 2 * var(--sixs-gutter));
	display: flex;
	flex-direction: column;
	color: #ffffff !important;
	text-decoration: none !important;
	/* `clamp` y no un tamano fijo: es el bloque mas grande de la pagina y en un
	 * monitor de 1920 un valor pensado para 1440 se queda corto. El maximo esta
	 * atado a que "CONCEPTUALIZE" —la palabra mas larga del catalogo de drops—
	 * entre en un renglon. */
	font-size: clamp(38px, 6.6vw, 96px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 0.92;
	text-transform: uppercase;
	/* La sombra es el precio de poner texto sobre tres fotos que rotan solas:
	 * el peor slide manda, y a este cuerpo un contraste flojo se nota. */
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
	transition: opacity 0.2s ease;
}

.sixs-hero-cover:hover {
	color: #ffffff !important;
	opacity: 0.88;
}

.sixs-hero-cover__line {
	display: block;
}

/* --- Contador de slides --- */

/* Arriba a la derecha. Las flechas y los puntos de Kadence estan apagados a
 * proposito —eran los de sistema— asi que no habia ninguna senal de que la
 * foto rotaba ni de cuantas hay. Esto lo dice sin devolver los controles.
 *
 * `pointer-events: none` porque es un INDICADOR, no un control: no lleva a
 * ningun slide y algo que parece boton y no responde es peor que no estar. */
/* Mismo criterio que la portada: item del grid en la celda de la foto,
 * pegado arriba a la derecha. Antes dependia de `--sixs-topbar-real`, que
 * tambien la mide el JS — y tambien saltaba.
 *
 * El `margin-top` de 76px es fijo y no necesita medirse: la celda arranca
 * donde arranca la FOTO, o sea ya debajo del ticker. Los 76px son para pasar
 * la fila del menu, que flota encima. */
.sixs-hero-count {
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: start;
	justify-self: end;
	z-index: 3;
	/* 108px y no 76: a 76 quedaba pegado a la fila del menu, que flota encima
	 * de la foto — se leia como parte del header y no como algo de la imagen.
	 * Con 108 tiene aire propio y se entiende que pertenece al slider. */
	margin: 108px var(--sixs-gutter) 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 7px 14px;
	border-radius: 999px;
	/* Sin `backdrop-filter`: el contador se repinta en cada cambio de clase que
	 * Splide hace durante la transicion, y un blur de fondo en un elemento que
	 * se repinta seguido le cuesta caro al compositor — con el blur puesto, la
	 * pagina dejo de poder capturarse (el renderer se colgaba). El mismo
	 * contraste se consigue con un poco mas de opacidad y sin costo. */
	background: rgba(16, 18, 21, 0.45);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	pointer-events: none;
}

.sixs-hero-count:empty {
	display: none;
}

.sixs-hero-count__bars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sixs-hero-count__bars span {
	width: 16px;
	height: 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
	transition: background-color 0.25s ease, width 0.25s ease;
}

.sixs-hero-count__bars span.is-on {
	width: 24px;
	background: #ffffff;
}

.sixs-hero-count__num {
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	/* En el celular la portada compite con el estado del drop, que tambien
	 * vive sobre la foto: baja de cuerpo y se apoya mas arriba. */
	.sixs-hero-cover {
		/* 52px = el renglon del estado del drop (18 de margen + ~19 de texto) mas
		 * el aire entre los dos. Fijo, porque el estado es siempre una linea. */
		margin-bottom: 52px;
		font-size: clamp(30px, 10.5vw, 46px);
		letter-spacing: -0.03em;
	}

	/* En MOBILE el contador baja: va a la derecha, en la MISMA LINEA que el
	 * estado del drop (21/08).
	 *
	 * Arriba a la derecha, en 390px, caia pegado al header y competia con el
	 * logo — es la zona mas cargada de la pantalla, y una capsula gris ahi se
	 * lee como un elemento suelto. Abajo, la informacion del hero queda toda en
	 * un renglon: estado a la izquierda, contador a la derecha. Deja de ser un
	 * elemento flotando y pasa a ser el final de una linea.
	 *
	 * El `bottom` es el MISMO valor que el de `.sixs-hero-live`: si se cambia
	 * uno hay que cambiar el otro, o los dos dejan de compartir renglon.
	 *
	 * Pierde la capsula: sobre la foto ya hay dos elementos con fondo propio
	 * (los botones), y un tercero sumaba ruido. Se sostiene con el mismo
	 * `text-shadow` que el estado, que es el recurso que ya usa el hero. */
	/* Arriba a la derecha, como en desktop, pero chico y SIN capsula.
	 *
	 * Se probo abajo, en la linea del estado del drop, y se volvio: la capsula
	 * gris arriba era lo que molestaba, no la posicion. Sin fondo y a 9px el
	 * contador no compite con el logo, y arriba es donde el ojo lo busca —es
	 * el lugar del indicador de slides en cualquier carrusel. */
	.sixs-hero-count {
		margin-top: 62px;
		gap: 8px;
		padding: 0;
		border-radius: 0;
		background: transparent;
		font-size: 9px;
		letter-spacing: 0.12em;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	}

	.sixs-hero-count__bars {
		gap: 4px;
	}

	.sixs-hero-count__bars span {
		width: 9px;
		height: 1.5px;
	}

	.sixs-hero-count__bars span.is-on {
		width: 14px;
	}
}

/* ------------------------------------------------------------------
 * Badge "live" del hero
 *
 * Punto rojo que late + texto, sobre la foto. El contenido lo emite el
 * shortcode [sixs_hero_live] (functions.php) para que el texto se
 * edite en un solo lugar y no haya que tocar el markup del slider.
 *
 * La animacion se apaga con prefers-reduced-motion: un elemento que
 * late sin parar es justo lo que esa preferencia pide evitar.
 * ------------------------------------------------------------------ */

/* En DESKTOP el badge no flota sobre la foto: es la mitad izquierda de la
 * barra del hero (21/08). Con eso se cae todo el andamiaje que existia para
 * sobrevivir arriba de una imagen: el `bottom` calculado, el z-index, el
 * blanco y el text-shadow. (En mobile si va sobre la foto — ver mas abajo.)
 *
 * ⚠️ `--sixs-hero-cta-h` ya no existe: se dejo de medir el 21/08 porque
 * ninguno de los tres elementos que la usaban se posiciona ya contra ella.
 *
 * El punto rojo se queda: es lo unico de color de la barra y es lo que
 * hace que "DROP N ONLINE" se lea como un estado y no como un texto mas. */
.sixs-hero-live {
	position: static;
	grid-column: 1;
	justify-self: start;
	padding: 20px var(--sixs-gutter);
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	color: var(--sixs-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

a.sixs-hero-live:hover {
	color: var(--sixs-ink);
	opacity: 0.6;
}

/* En MOBILE el estado del drop vuelve SOBRE la foto (21/08), y abajo quedan
 * solo los dos botones.
 *
 * En desktop la barra tiene dos mitades —estado a la izquierda, CTA a la
 * derecha— y funciona porque hay ancho para las dos. En el celular se apilan,
 * asi que la barra pasaba a tres renglones y empujaba la grilla fuera de
 * pantalla. Sobre la foto el estado no ocupa alto propio, y la barra queda
 * con una sola cosa adentro.
 *
 * Vuelve con el blanco y el text-shadow que se le habian sacado: arriba de
 * una imagen que rota cada 5 segundos los necesita de nuevo.
 *
 * Se posiciona como item del grid, no en `absolute`: mismo motivo que la
 * portada — anclado contra una variable medida por JS, saltaba en cada
 * carga. */
@media (max-width: 900px) {
	/* El estado del drop tambien pasa a item del grid, por lo mismo que la
	 * portada: en `absolute` contra `--sixs-hero-cta-h` saltaba en cada carga.
	 *
	 * Comparte celda con la portada; el escalonado lo da el `margin-bottom` de
	 * cada uno. El del titulo es mayor —le deja el renglon a este— y son dos
	 * numeros fijos porque el estado es SIEMPRE una linea. */
	.sixs-hero-col > .kt-inside-inner-col > .sixs-hero-live {
		grid-row: 1;
		grid-column: 1 / -1;
		align-self: end;
		justify-self: start;
		z-index: 3;
		margin: 0 var(--sixs-gutter) 18px;
		padding: 0;
		color: #ffffff;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	}

	a.sixs-hero-live:hover {
		color: #ffffff;
	}

	/* Con el estado afuera del flujo, los botones toman la fila entera. */
	.sixs-hero-col > .kt-inside-inner-col > .sixs-hero-cta {
		grid-column: 1 / -1;
		padding: 16px var(--sixs-gutter);
	}
}

.sixs-hero-live__dot {
	position: relative;
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #e8412c;
}

/* El halo es un pseudo-elemento y no un box-shadow animado: asi la
 * animacion corre en transform/opacity y no repinta en cada frame. */
.sixs-hero-live__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #e8412c;
	animation: sixs-live-pulse 1.8s ease-out infinite;
}

@keyframes sixs-live-pulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}

	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sixs-hero-live__dot::after {
		animation: none;
	}
}

@media (max-width: 767px) {
	.sixs-hero-live {
		font-size: 12px;
	}
}

/* ==========================================================================
   Color: el rojo SIXS como senal comercial
   ==========================================================================

   La grilla habia quedado en una escala de grises entera: gris el fondo,
   gris la foto de producto, negro el texto, negro el boton. Sin jerarquia
   de color, el ojo no tiene donde caer.

   El rojo es el de la marca (el gorro del hero, el punto "live"), y se usa
   en TRES lugares y no mas, siempre para lo mismo: senalar la accion o el
   ahorro. Un color que aparece en todos lados deja de significar algo.
   ========================================================================== */

:root {
	/* Margen lateral del sitio. Lo usan el hero y ahora tambien el catalogo:
	 * era el mismo numero escrito en varios lados y las dos zonas se
	 * desalinearon —la grilla quedo 9px mas adentro que el hero—. Con una
	 * variable no se pueden separar. */
	--sixs-gutter: clamp(20px, 3.4vw, 52px);

	--sixs-red: #e8412c;

	/* El oscuro del sitio. Es #101215 y NO #1a202c, que era el que se
	 * venia usando y tira a azul: se notaba en las superficies grandes
	 * (la barra del header, los botones solidos). Sale del handoff del
	 * cliente. Todo lo que sea "negro" en la UI usa esta variable. */
	--sixs-ink: #101215;
	--sixs-ink-hover: #2a2d33;
}

/* El ahorro se senala con el MONTO en verde, no con un chip.
 * El chip funcionaba pero sumaba un elemento mas a una card que ya
 * tiene cinco lineas; el color sobre la cifra dice lo mismo sin
 * agregar nada. El texto "por transferencia" queda oscuro para que el
 * rojo caiga solo sobre el numero. */
.sixs-payment--card .sixs-payment__transfer .sixs-payment__amount,
.sixs-payment--card .sixs-payment__transfer .sixs-payment__amount .woocommerce-Price-amount {
	color: var(--sixs-save);
}

/* 3. La foto respira en hover. El overflow:hidden lo pone el radius de
 *    la card, asi que el zoom no se desborda. */
li.product .kwt-image-wrap {
	overflow: hidden;
	border-radius: 4px;
}

li.product .kwt-image-wrap img {
	transition: transform 0.55s ease;
}

li.product:hover .kwt-image-wrap img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	li.product .kwt-image-wrap img,
	li.product:hover .kwt-image-wrap img {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * "Ver todo" al pie de cada grilla
 *
 * Eran un link de 12px subrayado, heredado del diseno anterior, y al
 * lado del resto de la home quedaban invisibles.
 *
 * Se resuelven como boton SOLIDO, a diferencia del CTA del titulo de
 * seccion (.sixs-section-cta), que es un pill con borde. Dos CTA al
 * mismo destino en la misma seccion tienen que verse distinto: el de
 * arriba acompana al titulo, el de abajo cierra el recorrido de la
 * grilla y es el que se pisa despues de mirar los productos.
 * ------------------------------------------------------------------ */

/* El aire de arriba y el de abajo, parejos (21/08).
 *
 * Estaba en 1,6rem de `margin-top` y quedaba a 42px de la grilla contra 20px
 * de la seccion siguiente: el boton se leia como parte de lo de ABAJO y no
 * como el cierre de la grilla que acompana.
 *
 * Los numeros salen de medir, no de tantear: sin margen el hueco de arriba
 * son 16px (lo que deja el carrusel) y el de abajo 20px (el padding del row
 * siguiente). Con 0,72rem arriba y 0,5rem abajo los dos dan ~28px. */
.sixs-verall {
	margin-top: 0.72rem !important;
	margin-bottom: 0.5rem !important;
	text-align: center;
}

/* Contorno tambien en desktop (21/08), igual que en mobile.
 *
 * Era el unico solido negro que aparecia DESPUES de la grilla, y con las
 * cards ya en pill negro el "AGREGAR" de cada producto competia con el. En
 * contorno cierra la seccion sin pelearse con los CTA que si tienen que
 * ganar, que son los de comprar.
 *
 * Y mas ancho: 320px de minimo y 3,4em de padding lateral. Un boton de
 * contorno pesa menos que uno solido, asi que necesita mas caja para sostener
 * el mismo lugar en la pagina. */
.sixs-verall .kb-button {
	display: inline-flex !important;
	align-items: center;
	gap: 0.7em;
	min-width: 320px;
	justify-content: center;
	padding: 1em 3.4em !important;
	border-radius: 999px !important;
	background: transparent !important;
	border: 1px solid var(--sixs-ink) !important;
	color: var(--sixs-ink) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.25s ease;
}

.sixs-verall .kb-button::after {
	content: "\2192";
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.25s ease;
}

/* El hover es el mismo negro aclarado, no un color nuevo.
 *
 * Antes pasaba al rojo de la marca. El rojo es la senal de "esto es
 * urgente / esto es lo importante" y gastarlo en el hover de un boton
 * secundario lo devalua: si aparece en todos lados deja de significar
 * algo. Queda reservado para el punto "live" del hero. */
.sixs-verall .kb-button:hover {
	background: var(--sixs-ink) !important;
	color: #ffffff !important;
}

.sixs-verall .kb-button:hover::after {
	transform: translateX(4px);
}

@media (max-width: 767px) {
	/* Mas cerca de la grilla que de lo que sigue: el boton CIERRA la grilla que
	 * acompana, no abre la seccion de abajo. Con 28/28 quedaba equidistante y
	 * por lo tanto ambiguo; con 10 arriba y 28 abajo se agrupa con lo suyo.
	 *
	 * Es el criterio contrario al de desktop a proposito: alla hay dos CTA a la
	 * vista al mismo tiempo y el aire parejo ordena; en el celular se ve de a
	 * uno y lo que manda es a que bloque pertenece. */
	.sixs-verall {
		margin-top: 0.05rem !important;
		margin-bottom: 1.2rem !important;
	}

	/* Invertido: contorno en vez de solido.
	 *
	 * En mobile este boton ocupa el ancho completo, y un rectangulo negro de
	 * borde a borde pesa mas que la grilla de productos que viene a cerrar. En
	 * contorno cumple la misma funcion sin robarle el primer plano a las fotos.
	 * En desktop sigue solido: ahi mide 240px y no compite con nada. */
	/* El contorno ya viene de la regla base; aca solo cambia la caja: ancho
	 * completo y menos padding lateral, que a 390px los 3,4em no entran. */
	.sixs-verall .kb-button {
		min-width: 0;
		width: 100%;
		padding: 0.95em 1.4em !important;
	}
}

/* ------------------------------------------------------------------
 * Credito "Desarrollado por Bieri"
 *
 * Sutil a proposito: no compite con el footer del cliente, pero el
 * link es real y sigue al hover. Lo imprime sixs_bieri_credit() en
 * wp_footer.
 * ------------------------------------------------------------------ */

.sixs-credit {
	padding: 18px 1.5rem 22px;
	/* Sin fondo propio: el blanco hacia un salto de tono contra el
	 * crema del footer. Asi toma el de la pagina y no se nota la
	 * costura. */
	background: transparent;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9aa0a6;
}

.sixs-credit a {
	color: #6b7280;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.sixs-credit a:hover,
.sixs-credit a:focus-visible {
	color: var(--sixs-ink);
	border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------
 * PDP-2 — Selector de talle en grilla
 *
 * Shop Kit dibuja los talles como radio + label (tipo radio_box, ver
 * sixs_talle_swatch_type en functions.php) pero sin estilo propio:
 * quedaban como texto suelto. Aca se los convierte en botones.
 *
 * El radio real se esconde con opacity y NO con display:none, para que
 * siga siendo enfocable con el teclado.
 *
 * La marca de "sin stock" la pone talles.js leyendo el stock que
 * WooCommerce publica en data-product_variations.
 * ------------------------------------------------------------------ */

.kad_radio_variations {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.kad_radio_variations input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ⚠️⚠️ Todo va con `!important`, y no es capricho.
 *
 * Shop Kit imprime SU CSS para estos labels inline y despues de esta hoja, asi
 * que de esta regla solo sobrevivia el `border-radius` —lo unico que el plugin
 * no declara—. El resultado: labels de 115px de ancho con `padding: 0 4px` y
 * SIN borde, o sea cuatro textos sueltos dentro de las celdas de una tabla,
 * que es lo que se veia como talles superpuestos. No era un problema de
 * espaciado: los botones nunca se habian dibujado.
 *
 * ⚠️ El contenedor es un `<fieldset>` dentro de un `<td>` de la tabla de
 * variaciones de WooCommerce. De ahi que los labels se estiraran: en un flex,
 * cuatro items sin ancho propio se reparten la celda entera. El `flex: 0 0
 * auto` los devuelve a su tamano de contenido. */
.kad_radio_variations label {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 46px !important;
	margin: 0 !important;
	padding: 0.62em 0.9em !important;
	border: 1px solid #c9c9c9 !important;
	/* Pill, como el resto de los CTA del sitio. */
	border-radius: 999px !important;
	background: #ffffff !important;
	color: var(--sixs-ink) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	line-height: 1 !important;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* La tabla de variaciones de Woo aporta sus propios bordes y padding de
 * celda, que con los labels ya dibujados como pills se ven como una reja
 * alrededor de los talles. */
.single-product .sixs-pdp-info .variations td.value,
.single-product .sixs-pdp-info .variations th.label,
.single-product .sixs-pdp-info .kt-radio-variation-container {
	padding: 0 !important;
	border: 0 !important;
}

.kad_radio_variations label:hover {
	border-color: var(--sixs-ink);
}

.kad_radio_variations input[type="radio"]:checked + label {
	background: var(--sixs-ink);
	border-color: var(--sixs-ink);
	color: #ffffff;
}

/* Foco visible: el radio esta oculto, asi que el anillo lo tiene que
 * mostrar el label. */
.kad_radio_variations input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--sixs-ink);
	outline-offset: 2px;
}

/* --- Talles sin stock --- */

.kad_radio_variations label.sixs-talle-agotado {
	border-color: #e4e4e4;
	background: #f4f4f3;
	color: #b0b0b0;
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.kad_radio_variations label.sixs-talle-agotado:hover {
	border-color: #e4e4e4;
}

/* El separador que en la card divide cuotas de transferencia: en la
 * ficha no va, porque el bloque de transferencia pasa a ser un chip con
 * fondo propio y el borde quedaba cortandolo por dentro. */
.single-product .sixs-payment:not(.sixs-payment--card) .sixs-payment__transfer {
	border-top: 0;
	padding-top: 0;
}

/* ==========================================================================
   PDP v2 — bloque de decision (2026-08-08)

   La ficha se lee como una sola columna que decide la compra: de que
   drop es, que cuesta, cuanto se ahorra, que talle, comprar. Todo lo
   que no decide (descripcion, composicion, envios) baja a acordeones.

   Los tamanos estan medidos sobre el mockup del cliente a 1988px de
   ancho, con la columna de info en 703px.
   ========================================================================== */

.single-product .sixs-pdp-info .kt-inside-inner-col {
	--sixs-pdp-gap: 18px;
}

/* --- Galeria propia: miniaturas en columna + foto grande ---
 *
 * El markup lo genera [sixs_gallery] (functions.php). Reemplaza al
 * bloque de Shop Kit, que decidia el alto de cada miniatura por dos
 * caminos que no coincidian nunca y dejaba aire muerto abajo de cada
 * una. Ver el comentario largo en functions.php.
 *
 * Las fotos del catalogo son 2:3 (1707x2560) y toda la galeria respeta
 * esa proporcion: no se recorta nada en ningun lado.
 * ------------------------------------------------------------------ */

.sixs-gallery {
	display: grid;
	grid-template-columns: clamp(84px, 7.5vw, 124px) minmax(0, 1fr);
	gap: 12px;
}

.sixs-gallery__thumbs {
	display: none;
	flex-direction: column;
	gap: 8px;
	/* 🔑 El truco de las dos alturas: `height: 0` hace que la columna de
	 * miniaturas NO empuje el alto de la fila (si no, con muchas fotos
	 * la galeria volveria a ser mas alta que la foto), y el
	 * `min-height: 100%` la estira contra el alto que fija la foto
	 * grande. Lo que sobra scrollea. Con 4 fotos no llega a scrollear. */
	height: 0;
	min-height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* La clase la pone gallery.js. Sin JS no hay miniaturas y se ven todas
 * las fotos apiladas: es como estaba la ficha antes, degrada a algo
 * usable y no a algo roto. */
.sixs-gallery.is-enhanced .sixs-gallery__thumbs {
	display: flex;
}

.sixs-gallery__thumb {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.sixs-gallery__thumb:hover,
.sixs-gallery__thumb.is-active {
	opacity: 1;
}

/* 🔑 El thumbnail NO lleva recuadro en ningun estado: ni hover, ni
 * activo. El unico que hay es el que Kadence le pone a `button:hover` y
 * a `button:focus` desde su paleta, que es de donde salia el negro; se
 * apaga con !important porque su CSS se imprime despues de esta hoja.
 * Cual esta activo se marca solo con la opacidad. */
.sixs-gallery__thumb,
.sixs-gallery__thumb:hover,
.sixs-gallery__thumb:focus,
.sixs-gallery__thumb.is-active,
.sixs-gallery__thumb.is-active:hover {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0;
}

/* El foco de teclado si tiene que verse, pero no se confunde con el
 * borde del activo. */
.sixs-gallery__thumb:focus-visible {
	outline: 2px solid var(--sixs-red) !important;
	outline-offset: 2px;
}

.sixs-gallery__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sixs-gallery__slide {
	margin: 0;
}

.sixs-gallery.is-enhanced .sixs-gallery__slide {
	display: none;
}

.sixs-gallery.is-enhanced .sixs-gallery__slide.is-active {
	display: block;
}

/* Sin JS las fotos quedan apiladas: hace falta separarlas. */
.sixs-gallery:not(.is-enhanced) .sixs-gallery__slide + .sixs-gallery__slide {
	margin-top: 8px;
}

.sixs-gallery__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: zoom-in;
}

/* Sin lightbox el cursor no puede prometer que amplia. */
.sixs-gallery.sin-lightbox .sixs-gallery__open {
	cursor: default;
}

.sixs-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	/* Las miniaturas pasan abajo, en fila. El `order` invierte el orden
	 * visual sin tocar el del DOM, que es el que sigue el teclado. */
	.sixs-gallery {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.sixs-gallery__main {
		order: 1;
	}

	.sixs-gallery__thumbs {
		order: 2;
		flex-direction: row;
		height: auto;
		min-height: 0;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.sixs-gallery__thumb {
		flex: 0 0 76px;
	}
}

/* --- Lightbox --- */

.sixs-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	padding: 0;
	border: 0;
	background: transparent;
}

.sixs-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.9);
}

.sixs-lightbox__img {
	display: block;
	max-width: min(92vw, 720px);
	max-height: 88vh;
	margin: 6vh auto 0;
	object-fit: contain;
}

.sixs-lightbox__close,
.sixs-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	line-height: 1;
	cursor: pointer;
}

.sixs-lightbox__close {
	top: 12px;
	right: 16px;
	font-size: 34px;
}

.sixs-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 44px;
}

.sixs-lightbox__nav--prev {
	left: 8px;
}

.sixs-lightbox__nav--next {
	right: 8px;
}

.sixs-lightbox__close:hover,
.sixs-lightbox__nav:hover {
	opacity: 0.65;
}

.sixs-lightbox__counter {
	position: absolute;
	bottom: 16px;
	left: 0;
	width: 100%;
	margin: 0;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-align: center;
}

/* --- Padding de la columna de info --- */

.single-product .sixs-pdp-info > .kt-inside-inner-col {
	padding: 30px 40px 40px;
}

@media (max-width: 1024px) {
	.single-product .sixs-pdp-info > .kt-inside-inner-col {
		padding: 24px 20px 32px;
	}
}

/* --- Tokens de la ficha ---
 *
 * Salen del handoff del cliente (design_handoff_pdp_columna_derecha).
 *
 * ⚠️ El oscuro es #101215, NO el #1a202c que se venia usando: ese tira
 * a azul y se notaba en las bandas grandes. El verde de la ficha es
 * #1E6B4E (5,42:1 sobre el fondo de la columna, AA). La card sigue con
 * su --sixs-save #0f7040; si se quieren unificar, es una sola linea.
 * ------------------------------------------------------------------ */

.single-product .sixs-pdp-info {
	--sixs-ink-2: #4a4d52;
	--sixs-ink-3: #6e7175;
	--sixs-line: rgba(16, 18, 21, 0.16);
	--sixs-line-strong: rgba(16, 18, 21, 0.28);
	--sixs-accent: #1e6b4e;
	--sixs-paper: #efedea;
}

/* --- Eyebrow del drop --- */

.sixs-eyebrow {
	display: block;
	margin: 0;
	color: var(--sixs-ink-3);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

/* Sobre fondo claro el hover va al reves: el eyebrow ya es gris, asi
 * que se oscurece hasta el color del texto en vez de aclararse. */
.sixs-eyebrow:hover {
	color: var(--sixs-ink);
}

/* El titulo lo dibuja el bloque de Shop Kit y trae el margen del <h1>
 * del theme; el aire contra el eyebrow se fija aca. */
.single-product .sixs-pdp-info .entry-title {
	margin: 14px 0 0 !important;
	color: var(--sixs-ink);
	letter-spacing: -0.025em;
}

/* --- Precio: la transferencia es el protagonista (2026-08-09) ---
 *
 * El markup lo genera [sixs_price_block]. Reemplaza al bloque `price`
 * de Shop Kit: ya no hay un precio suelto arriba, los dos salen del
 * mismo componente para que la relacion entre ellos se lea de una.
 *
 * El de lista NO va tachado: quien paga con tarjeta paga exactamente
 * ese precio. Gris dice "hay uno mejor"; tachado diria "ya no existe",
 * que es falso.
 * ------------------------------------------------------------------ */

.sixs-price {
	display: flex;
	align-items: stretch;
	margin: 22px 0 0;
	color: var(--sixs-ink);
}

.sixs-price__deal {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sixs-price__chip {
	display: inline-flex;
	align-self: flex-start;
	padding: 6px 9px;
	border: 1px solid var(--sixs-accent);
	color: var(--sixs-accent);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.sixs-price__main {
	margin: 0;
	color: var(--sixs-ink);
	font-size: 50px;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 0.88;
}

.sixs-price__saving {
	margin: 0;
	color: var(--sixs-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* La linea divisoria es el `border-left` de esta columna y no un
 * elemento aparte: con `align-items: stretch` toma el alto completo de
 * la fila, que es exactamente lo que hace el div del handoff. El margen
 * y el padding de 22px dejan la misma calle de los dos lados.
 *
 * `justify-content: center` es lo que centra este bloque contra el de
 * la izquierda: alineado arriba quedaba a la altura del chip y muy
 * lejos del "Ahorrás". */
.sixs-price__alt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	margin-left: 22px;
	padding: 2px 0 2px 22px;
	border-left: 1px solid var(--sixs-line);
}

.sixs-price__alt-label {
	margin: 0;
	color: var(--sixs-ink-3);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.sixs-price__list {
	margin: 5px 0 0;
	color: var(--sixs-ink-2);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
}

.sixs-price__installments {
	margin: 0;
	color: var(--sixs-ink-3);
	font-size: 12px;
	line-height: 1.4;
}

.sixs-price__installments span,
.sixs-price__installments .woocommerce-Price-amount {
	color: var(--sixs-ink);
	font-weight: 600;
}

@media (max-width: 600px) {
	/* En una columna angosta los dos bloques uno al lado del otro dejan
	 * el precio grande sin aire. Se apilan y la linea pasa a horizontal. */
	.sixs-price {
		flex-direction: column;
	}

	.sixs-price__main {
		font-size: 40px;
	}

	.sixs-price__alt {
		margin: 16px 0 0;
		padding: 16px 0 0;
		border-top: 1px solid var(--sixs-line);
		border-left: 0;
	}
}

/* --- Selector de talle: label + guia --- */

.single-product .sixs-pdp-info .kt-variation-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.single-product .sixs-pdp-info .kt-variation-label > label {
	margin: 0;
	color: var(--sixs-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

.sixs-size-guide-open {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sixs-ink);
	font-size: 12px;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sixs-size-guide-open:hover {
	color: var(--sixs-ink-2);
}

/* La tabla de variaciones de WooCommerce trae su propio <th> con el
 * label; con el de Shop Kit arriba quedaban dos "TALLE" seguidos. */
.single-product .sixs-pdp-info .variations th.label {
	display: none;
}

/* --- Talles: cuatro cajas contiguas, de punta a punta ---
 *
 * ⚠️ La tabla de variaciones de WooCommerce es de ancho automatico: sin
 * forzarle el 100% las cajas solo llegan hasta donde da su contenido y
 * no cruzan la columna.
 *
 * ⚠️ El custom CSS del cliente trae
 *   `.variations .kad_radio_variations label { float:left; margin:5px; border:none }`
 * con la MISMA especificidad (0,2,1) que un `.single-product
 * .kad_radio_variations label`, y se imprime DESPUES de esta hoja: a
 * igual especificidad gana el ultimo. Por eso todo lo que el toca va
 * con !important.
 *
 * El borde exterior lo lleva el contenedor y cada caja solo el suyo a
 * la izquierda (menos la primera): asi las divisorias miden 1px y no
 * 2px, que es lo que pasaria si cada caja llevara borde completo.
 * ------------------------------------------------------------------ */

.single-product .sixs-pdp-info table.variations,
.single-product .sixs-pdp-info table.variations tbody,
.single-product .sixs-pdp-info table.variations tr,
.single-product .sixs-pdp-info table.variations td {
	display: block;
	width: 100%;
}

.single-product .sixs-pdp-info .kad_radio_variations {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sixs-line-strong);
}

.single-product .sixs-pdp-info .kad_radio_variations label {
	flex: 1 1 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	height: 44px;
	min-width: 0;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-left: 1px solid var(--sixs-line-strong) !important;
	background: transparent;
	color: var(--sixs-ink);
	font-size: 13px;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.single-product .sixs-pdp-info .kad_radio_variations label:first-of-type {
	border-left: 0 !important;
}

.single-product .sixs-pdp-info .kad_radio_variations label:hover {
	background: rgba(16, 18, 21, 0.06);
}

.single-product .sixs-pdp-info .kad_radio_variations input[type="radio"]:checked + label {
	background: var(--sixs-ink);
	color: var(--sixs-paper);
	font-weight: 600 !important;
}

/* El radio se oculta con opacity y no con display:none para que siga
 * siendo enfocable con teclado; el anillo lo dibuja el label. */
.single-product .sixs-pdp-info .kad_radio_variations input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--sixs-red);
	outline-offset: -2px;
}

/* Los agotados: en gris y tachados. Es la senal de PDP-2 y tiene que
 * ganarle al estado normal, por eso va despues. */
.single-product .sixs-pdp-info .kad_radio_variations label.sixs-talle-agotado,
.single-product .sixs-pdp-info .kad_radio_variations label.sixs-talle-agotado:hover {
	background: rgba(16, 18, 21, 0.05);
	color: #a8a8a8;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* --- Ritmo vertical del bloque de compra ---
 *
 * Los huecos entre talle y boton no eran margenes propios sino los que
 * traen la tabla de variaciones de WooCommerce y el wrap del bloque
 * add-to-cart de Shop Kit. Se anulan y se reponen medidos. */

.single-product .sixs-pdp-info .kwt-add-to-cart-wrap,
.single-product .sixs-pdp-info form.cart,
.single-product .sixs-pdp-info .single_variation_wrap,
.single-product .sixs-pdp-info .woocommerce-variation-add-to-cart {
	margin: 0;
	padding: 0;
}

.single-product .sixs-pdp-info table.variations {
	margin: 28px 0 0;
	border: 0;
}

/* Producto SIN talles: el mismo aire que aporta la tabla de variaciones.
 *
 * El reset de arriba pone el wrap del add-to-cart en `margin: 0` porque los
 * 28px los daba `table.variations`. Pero esa tabla solo existe en los
 * productos variables: en un simple el boton quedaba pegado al precio.
 *
 * Va con los mismos 28px y no con un valor propio para que el ritmo vertical
 * sea identico en los dos casos — el comprador no tiene que notar si el
 * producto tiene talles o no. */
body.single-product.product-type-simple .sixs-pdp-info .kwt-add-to-cart-wrap {
	margin-top: 28px;
}

.single-product .sixs-pdp-info table.variations td,
.single-product .sixs-pdp-info table.variations th {
	padding: 0;
	border: 0;
}

.single-product .sixs-pdp-info .woocommerce-variation-add-to-cart {
	margin-top: 20px;
}

/* El "Limpiar" de WooCommerce y el aviso de variacion vacio ocupaban
 * una linea entera entre los talles y el boton. */
.single-product .sixs-pdp-info .reset_variations {
	display: none !important;
}

.single-product .sixs-pdp-info .woocommerce-variation.single_variation:empty {
	display: none;
}

/* La cantidad no va en la ficha: el 100% de las ventas son de una
 * unidad y el campo le robaba el ancho al boton. */
.single-product .sixs-pdp-info .quantity {
	display: none !important;
}

/* --- Botones --- */

.single-product .sixs-pdp-info .single_add_to_cart_button,
.sixs-buy-now {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	min-height: 54px;
	margin: 0;
	padding: 0 16px;
	/* Pill, igual que el AGREGAR de la card y los CTA del hero (21/08). Eran
	 * los unicos botones rectangulares del sitio: la ficha se leia como de otra
	 * plantilla. */
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.single-product .sixs-pdp-info .single_add_to_cart_button {
	border: 1px solid var(--sixs-ink) !important;
	background: var(--sixs-ink) !important;
	color: var(--sixs-paper) !important;
}

.single-product .sixs-pdp-info .single_add_to_cart_button:hover {
	border-color: #2a2d33 !important;
	background: var(--sixs-ink-hover) !important;
}

.sixs-buy-now {
	margin-top: 8px;
	border: 1px solid var(--sixs-ink);
	background: transparent;
	color: var(--sixs-ink);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sixs-buy-now:hover {
	background: rgba(16, 18, 21, 0.06);
}

/* --- Banda de beneficios, en negativo ---
 *
 * Es lo unico invertido de la columna: cierra el bloque de compra sin
 * competir con los dos botones de arriba. Antes era una linea gris de
 * 13px y desaparecia justo donde se duda. */

/* Sin el bloque negro (21/08).
 *
 * El negro se habia puesto para que la banda no desapareciera —antes era una
 * linea gris de 13px—, pero se paso al otro extremo: un rectangulo solido
 * debajo de dos botones ya oscuros, que competia con el CTA en vez de
 * acompanarlo. Y era la unica superficie negra de la columna.
 *
 * Ahora se sostiene con estructura, no con peso: fondo claro, hairline arriba
 * y abajo, y el ICONO en el azul del ticker. Ese azul es el color que en el
 * resto del sitio significa "esto es un beneficio" —barra de arriba, pie del
 * menu mobile— asi que la banda se lee como parte del mismo sistema y no como
 * un cartel. */
.sixs-assurance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 18px;
	padding: 14px 0;
	border-top: 1px solid var(--sixs-line, rgba(16, 18, 21, 0.16));
	border-bottom: 1px solid var(--sixs-line, rgba(16, 18, 21, 0.16));
	background: transparent;
	color: var(--sixs-ink);
}

/* ⚠️ El punto azul va en el TITULO y no en el item.
 *
 * Puesto en el item, este pasaba a ser un flex de tres cosas —punto, titulo y
 * dato— y los dos textos quedaban UNO AL LADO DEL OTRO: "ENVÍO GRATIS" partia
 * en dos renglones para dejarle lugar a "DESDE $120.000" al costado. El item
 * tiene que seguir siendo un bloque que apila titulo arriba y dato abajo. */
.sixs-assurance__item {
	min-width: 0;
}

.sixs-assurance__title::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 0.5em;
	border-radius: 999px;
	background: #2b70cc;
	vertical-align: 0.15em;
}


.sixs-assurance__title,
.sixs-assurance__meta {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.sixs-assurance__title {
	color: var(--sixs-ink);
	font-weight: 700;
}

.sixs-assurance__meta {
	color: var(--sixs-ink-3, #6e7175);
	font-weight: 400;
}

@media (max-width: 480px) {
	/* Tres columnas en un celular angosto parten cada titulo en dos
	 * renglones; apiladas se leen de corrido. La separacion entre items ahora
	 * es una hairline del mismo color que las de arriba y abajo — antes era un
	 * blanco translucido, que sobre el fondo claro no se veia. */
	.sixs-assurance {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 2px 0;
	}

	.sixs-assurance__item {
		justify-content: flex-start;
		gap: 0.5em;
		padding: 9px 0;
	}

	.sixs-assurance__item + .sixs-assurance__item {
		border-top: 1px solid var(--sixs-line, rgba(16, 18, 21, 0.16));
	}

	/* Apilados, titulo y dato entran en un renglon: "ENVÍO GRATIS · DESDE
	 * $120.000". Uno arriba del otro serian seis renglones para tres datos. */
	.sixs-assurance__title,
	.sixs-assurance__meta {
		display: inline;
	}

	.sixs-assurance__meta::before {
		content: "·";
		margin: 0 0.35em;
		color: var(--sixs-line, rgba(16, 18, 21, 0.16));
	}
}

/* --- Acordeones --- */

.sixs-accordions {
	margin-top: 28px;
	border-top: 1px solid var(--sixs-line, rgba(16, 18, 21, 0.16));
}

.sixs-accordion + .sixs-accordion {
	border-top: 1px solid var(--sixs-line, rgba(16, 18, 21, 0.16));
}

.sixs-accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	color: var(--sixs-ink, #101215);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

/* Safari dibuja su propio triangulo con ::-webkit-details-marker y
 * ademas ignora `list-style: none` sin este selector. */
.sixs-accordion > summary::-webkit-details-marker {
	display: none;
}

.sixs-accordion > summary::after {
	content: "+";
	color: var(--sixs-ink-3, #6e7175);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.sixs-accordion[open] > summary::after {
	content: "\2212";
}

.sixs-accordion__body {
	padding-bottom: 18px;
	color: var(--sixs-ink-2, #4a4d52);
	font-size: 13.5px;
	line-height: 1.6;
}

.sixs-accordion__body p {
	margin: 0 0 0.8em;
}

.sixs-accordion__body p:last-child {
	margin-bottom: 0;
}

/* --- Modal de la guia de talles --- */

.sixs-size-guide {
	width: min(520px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--sixs-ink);
}

.sixs-size-guide::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.sixs-size-guide__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #e4e2de;
}

.sixs-size-guide__head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.sixs-size-guide__close {
	padding: 0 4px;
	border: 0;
	background: none;
	color: #6b7280;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.sixs-size-guide__body {
	padding: 24px;
	font-size: 15px;
	line-height: 1.65;
}

.sixs-size-guide__body table {
	width: 100%;
	border-collapse: collapse;
}

.sixs-size-guide__body th,
.sixs-size-guide__body td {
	padding: 8px 10px;
	border-bottom: 1px solid #e4e2de;
	text-align: left;
}

/* ==========================================================================
   Mega menu de CATALOGO (2026-08-10)

   El markup lo genera sixs_mega_menu_panel() en functions.php, colgado del
   <li> del item con walker_nav_menu_start_el.

   Se abre con :hover / :focus-within del propio <li> — sin JavaScript. Eso
   hace que funcione igual con teclado: al tabular hacia adentro el panel
   sigue abierto porque el foco esta adentro.
   ========================================================================== */

/* El submenu normal de Kadence se oculta, pero sigue en el DOM: es el que le
 * da al item la clase menu-item-has-children, la flecha y el manejo de foco
 * del theme. Reemplazarlo obligaria a reimplementar las tres cosas. */
.sixs-has-mega > .sub-menu {
	display: none !important;
}

.sixs-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 99;
	visibility: hidden;
	opacity: 0;
	background: var(--sixs-surface, #fff);
	border-top: 1px solid var(--sixs-hairline, rgba(16, 18, 21, 0.10));
	box-shadow: 0 18px 40px rgba(16, 18, 21, 0.08);
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* El panel es hijo del <li>, que mide lo que mide su texto: sin anclarlo a
 * un contenedor a lo ancho no habria contra que estirarse.
 *
 * ⚠️ El ancla es `.site-header-row-container-inner` y NO
 * `.site-header-upper-inner-wrap`: ese ultimo es **el elemento que Kadence
 * hace sticky** al scrollear, y ponerle un `position` propio es jugar con
 * fuego. Los intermedios se fuerzan a `static` para que ninguno se convierta
 * en el contexto de posicionamiento por accidente.
 *
 * El `static` va solo en el <li> del mega menu: los demas items conservan su
 * `relative` y sus desplegables normales siguen anclados a si mismos. */
.site-header-row-container-inner {
	position: relative;
}

/* 🔑 Los dos mega menus se pelean por el mismo `position`, y la regla es
 * CONDICIONAL a proposito.
 *
 * Kadence pone `position: relative` en `.header-menu-container ul.menu`
 * (o sea #primary-menu). Con eso:
 *
 *  - Si se lo dejamos, el mega menu propio se ancla al ANCHO DEL MENU en vez
 *    de a la pantalla y sale angosto.
 *  - Si se lo forzamos a `static`, se rompe el mega menu de DROPS, que es de
 *    Kadence Pro y se posiciona por JavaScript (`getBoundingClientRect` +
 *    `style.left/width`): al cambiarle el marco de referencia calcula mal y
 *    el panel abre despegado del header, con el fondo de la pagina asomando.
 *
 * Ninguna regla fija sirve para los dos. Con `:has()` el `static` corre SOLO
 * mientras se esta abriendo el panel propio; el resto del tiempo #primary-menu
 * conserva su `relative` y el JS de Kadence calcula sobre lo que espera.
 *
 * Si `:has()` no estuviera soportado, el panel propio sale angosto pero nada
 * se rompe: degrada a feo, no a roto. */
.header-menu-container ul.menu:has(> .sixs-has-mega:hover),
.header-menu-container ul.menu:has(> .sixs-has-mega:focus-within) {
	position: static;
}

.sixs-has-mega {
	position: static !important;
}

/* --- El hueco entre el menu y el mega menu de DROPS ---
 *
 * El sitio separa los desplegables 25px del header y tiende un puente
 * `::before` de esos mismos 25px para no perder el hover en el camino. El
 * puente esta en `background: transparent`, asi que en el mega menu de DROPS
 * —que ocupa todo el ancho— se veia la pagina de atras por esa banda: sobre
 * la home, el hero.
 *
 * Se le pone el mismo blanco que el panel SOLO al mega de ancho completo: en
 * un desplegable angosto una banda blanca de 25px colgando del item se leeria
 * como una pestana flotante, y ahi el hueco no molesta porque atras hay
 * header, no contenido.
 *
 * ⚠️ Va con `!important` porque la regla del puente vive en el `wp-custom-css`
 * del cliente, que WordPress imprime DESPUES de esta hoja. Sin el, pierde.
 *
 * ⚠️ Se tapa el hueco con color y NO se mueve el panel: el mega de Kadence Pro
 * se posiciona por JS y bajarle el `top` desde el CSS es pelearle al script. */
.header-navigation ul.menu > li.kadence-menu-mega-enabled.kadence-menu-mega-width-full > ul.sub-menu::before {
	background: #ffffff !important;
}

.sixs-has-mega:hover > .sixs-mega,
.sixs-has-mega:focus-within > .sixs-mega {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0s;
}

/* La primera columna se ensancha (0.9fr → 1.3fr) porque los destacados
 * crecieron: "NUEVOS INGRESOS" a 36px mide ~370px y con los 298px que
 * daba el reparto viejo partia en dos lineas. En la referencia cada
 * destacado entra en una sola linea; eso es parte del efecto. */
.sixs-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.15fr) minmax(0, 1.05fr);
	gap: 0;
	align-items: start;
	max-width: 100%;
}

/* --- Destacados --- */

/* El contraste entre la columna izquierda y el resto es lo que ordena el
 * panel: en la referencia el destacado es ~2,8x el link de categoria.
 * Estaba en 1,75x (24,5 contra 14) y las dos zonas competian — se leia
 * como tres columnas de links con la primera un poco mas grande.
 *
 * Ahora: 36px contra 13px = 2,8x. El destacado sube y, sobre todo, el
 * resto BAJA: agrandar solo la izquierda hubiera estirado el panel sin
 * resolver la competencia. */
/* ⚠️ El `clamp()` del tamaño vive ACA y no en el link, para que el `gap`
 * en `em` mida contra el texto de los destacados y no contra los 17px
 * que hereda el contenedor. Escrito al reves, `gap: 0.72em` rendia
 * 12px en vez de los 26 buscados y la columna quedaba apretada aunque
 * el CSS dijera otra cosa. */
.sixs-mega__featured {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 38px 40px 42px 40px;
	font-size: clamp(24px, 2.3vw, 36px);
}

.sixs-mega__feature {
	color: var(--sixs-ink, #101215);
	font-size: 1em;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: none !important;
	text-transform: none;
	transition: opacity 0.15s ease;
}

.sixs-mega__feature:hover {
	opacity: 0.55;
}

/* --- Columnas de categorias --- */

.sixs-mega__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	padding: 42px 40px 42px 0;
}

/* Los 6px de mas arriba que los destacados NO son un error de alineacion:
 * el titulo de columna es de 10px y su caja empieza donde el ojo espera
 * la linea, mientras que el destacado de 36px trae media interlinea de
 * aire adentro. Alineando las cajas, el titulito se veia mas alto. */
.sixs-mega__col-title {
	margin: 0 0 12px;
	color: var(--sixs-ink, #101215);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sixs-mega__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El interlineado se fija en las dos puntas —el <li> y el <a>— porque el
 * <a> es inline y sin un line-height propio hereda el del theme, que es
 * el que mandaba de verdad: con margin de 11px las lineas median 40, no
 * los 28 que decia la cuenta. */
.sixs-mega__col li {
	margin: 0 0 6px;
	line-height: 1.25;
}

.sixs-mega__col a {
	display: inline-block;
	color: var(--sixs-ink-2, #4a4d52);
	font-size: 13px;
	line-height: 1.25;
	text-decoration: none !important;
	text-transform: none;
	transition: color 0.15s ease;
}

.sixs-mega__col a:hover {
	color: var(--sixs-ink, #101215);
}

/* --- Foto --- */

/* La foto llega al borde derecho de la pantalla, como en la referencia: es
 * lo que hace que el panel se lea como una pieza editorial y no como una
 * caja de links. */
.sixs-mega__media {
	display: block;
	align-self: stretch;
	overflow: hidden;
}

/* La foto de campaña es 2:3 (1708x2560) y el hueco es casi cuadrado, asi
 * que `cover` recorta si o si. El encuadre se corre hacia arriba: el
 * centro geometrico de un retrato de cuerpo medio cae en el pecho y
 * dejaba la cara afuera. */
.sixs-mega__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 400px;
	object-fit: cover;
	object-position: center 22%;
	transition: transform 0.5s ease;
}

.sixs-mega__media:hover .sixs-mega__img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.sixs-mega,
	.sixs-mega__img {
		transition: none;
	}

	.sixs-mega__media:hover .sixs-mega__img {
		transform: none;
	}
}

/* Abajo de 1025px manda el menu mobile de Kadence, que es otro menu (el 34)
 * con su propio drawer: el panel no tiene por que existir ahi. */
@media (max-width: 1024px) {
	.sixs-mega {
		display: none;
	}

	.sixs-has-mega > .sub-menu {
		display: block !important;
	}
}

/* ==========================================================================
   El header se "enciende" con el hover (2026-08-10)

   Al pasar el mouse por cualquier parte del header, la fila del menu toma
   fondo blanco. Si desde ahi se entra a un desplegable, se queda blanco: el
   panel es descendiente de la misma fila, asi que el :hover del ancestro no
   se pierde y los dos quedan del MISMO color, leyendose como una sola
   superficie. Entre medio queda una hairline que los separa sin cortarlos.

   Va por CSS y no por JS: `:hover` sobre el contenedor ya describe
   exactamente la condicion ("el mouse esta en el header o en algo que cuelga
   de el"). Con JS habria que replicar a mano el momento de salida, que es la
   parte que siempre queda mal.

   `:focus-within` lo replica para teclado: al tabular al menu se enciende
   igual, que es cuando mas falta hace (sobre la foto del hero, con el header
   transparente, los links no se leen).
   ========================================================================== */

:root {
	--sixs-surface: #fff;
	--sixs-hairline: rgba(16, 18, 21, 0.10);
}

.site-main-header-wrap .site-header-row-container-inner {
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* ⚠️ Va con !important porque en la home el header es TRANSPARENTE por post
 * meta (_kad_post_transparent) y Kadence impone ese fondo con su propio CSS,
 * despues de esta hoja. */
.site-main-header-wrap:hover .site-header-row-container-inner,
.site-main-header-wrap:focus-within .site-header-row-container-inner {
	background: var(--sixs-surface) !important;
}

/* La linea separadora es un `inset box-shadow` y no un `border-bottom`: el
 * borde suma 1px al alto de la fila y, con el header sticky, correria todo
 * el contenido de abajo 1px cada vez que se prende. El inset se dibuja
 * adentro y no mueve nada. */
.site-main-header-wrap:hover .site-header-row-container-inner,
.site-main-header-wrap:focus-within .site-header-row-container-inner {
	box-shadow: inset 0 -1px 0 var(--sixs-hairline);
}

/* Los links del header en la home son claros mientras flota sobre la foto;
 * con el fondo blanco encendido hay que devolverlos a oscuro o desaparecen. */
.site-main-header-wrap:hover .site-header-row-container-inner .header-navigation a,
.site-main-header-wrap:focus-within .site-header-row-container-inner .header-navigation a,
.site-main-header-wrap:hover .site-header-row-container-inner .header-account-label,
.site-main-header-wrap:hover .site-header-row-container-inner .kadence-cart-total {
	color: var(--sixs-ink) !important;
}

@media (max-width: 1024px) {
	/* En mobile no hay hover y el header no es transparente: encenderlo solo
	 * agregaria un parpadeo al tocar. */
	.site-main-header-wrap:hover .site-header-row-container-inner,
	.site-main-header-wrap:focus-within .site-header-row-container-inner {
		background: none !important;
		box-shadow: none;
	}
}

/* ==========================================================================
   Comportamiento de los items del menu (2026-08-10)
   ========================================================================== */

/* 1. Fuera el subrayado que se despliega en hover.
 *
 * Lo dibuja Kadence con un ::after de 2px y `transform: scale(0,0)` que pasa
 * a `scale(1,1)` en hover. Se apaga con `content: none` en vez de
 * `display:none` o `opacity:0`: sin `content` el pseudo-elemento no llega a
 * generarse, asi que tampoco queda la transicion corriendo de gusto.
 *
 * ⚠️ El mismo ::after marca el item de la pagina actual
 * (`.current-menu-item`), asi que tambien se va ese indicador. Hoy la
 * senal de "estas aca" queda en el estado del propio link. */
.header-navigation[class*="header-navigation-style-underline"] .header-menu-container > ul > li > a::after {
	content: none !important;
}

/* 2. Hover: se apaga el link, y el cursor avisa que es clickeable.
 *
 * El `cursor` hace falta porque CATALOGO es un item sin URL y DROPS apunta a
 * "#": el navegador no les pone la manito solo, y los dos ABREN algo, que es
 * justamente lo que el cursor tiene que anticipar. */
.header-navigation .menu-item > a,
.header-navigation .menu-item > a > span {
	cursor: pointer;
}

/* El peso del menu sube a 600 (21/08).
 *
 * El menu flota transparente sobre la foto del hero, que cambia sola cada 5
 * segundos: en 400 los items se apoyaban sobre lo que hubiera atras y con un
 * slide claro se diluian. El peso es lo que los sostiene sin tener que
 * meterles sombra ni una caja de fondo.
 *
 * Va desde el child y no desde el Customizer a proposito: la tipografia del
 * header es theme_mod, o sea config que no viaja con el rsync y habria que
 * replicar a mano en prod. */
.header-navigation .header-menu-container > ul > li > a {
	transition: opacity 0.18s ease;
	font-weight: 600;
}

/* BUSCAR y CARRITO no son items de menu —son los toggles de Kadence, con
 * clases propias— asi que la regla de arriba no los alcanzaba y quedaban en
 * 400 al lado de un menu en 600. PERFIL si es un item de menu y por eso
 * habia subido solo: el desparejo era entre los tres de la derecha.
 *
 * El `*` cubre los <span> internos (label y contador del carrito), que es
 * donde Kadence puede poner el peso segun la variante de header. */
#main-header .search-toggle-open,
#main-header .search-toggle-open *,
#main-header .header-cart-wrap > a,
#main-header .header-cart-button,
#main-header .header-cart-button * {
	font-weight: 600;
}

/* CARRITO venia en 15px contra los 14 de todo el resto del header. No lo
 * causo el peso: el desajuste ya estaba, y pasar de 400 a 600 fue lo que lo
 * hizo visible —a peso normal un punto de diferencia se disimula, en bold
 * no—. El !important es porque el 15 lo pone Kadence despues de esta hoja. */
#main-header .header-cart-label {
	font-size: 14px !important;
}

.header-navigation .header-menu-container > ul > li > a:hover {
	opacity: 0.55;
}

/* 3 y 4. Los desplegables normales, con el mismo lenguaje que el mega menu.
 *
 * El de DROPS era una caja de Kadence con su propio fondo y sin la hairline,
 * asi que al lado del mega parecian dos componentes distintos. Ahora los dos
 * cuelgan de la misma linea, con el mismo fondo y el mismo aire vertical.
 *
 * El padding vertical sale de una sola variable para los dos: era lo que
 * estaba disparejo (el panel tenia 40 arriba y 44 abajo). */
:root {
	--sixs-panel-pad: 34px;
}

.header-navigation .header-menu-container ul li:not(.kadence-menu-mega-enabled) > ul.sub-menu {
	padding: var(--sixs-panel-pad) 0;
	border-top: 1px solid var(--sixs-hairline);
	border-radius: 0;
	background: var(--sixs-surface) !important;
	box-shadow: 0 18px 40px rgba(16, 18, 21, 0.08);
}

.header-navigation .header-menu-container ul li:not(.kadence-menu-mega-enabled) > ul.sub-menu > li > a {
	padding: 8px 26px;
	color: var(--sixs-ink-2, #4a4d52) !important;
	font-size: 14px;
	text-transform: none;
	transition: color 0.15s ease;
}

.header-navigation .header-menu-container ul li:not(.kadence-menu-mega-enabled) > ul.sub-menu > li > a:hover {
	color: var(--sixs-ink) !important;
	background: transparent !important;
}

/* Del mega menu de Kadence Pro (DROPS) se toca la hairline de arriba, para
 * que cuelgue de la misma linea que el mega menu propio, y el FONDO. El
 * padding sigue sin tocarse: el panel lo armo el cliente con un
 * kadence_element y pisarle el padding fue lo que lo rompio la primera vez. */
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu {
	border-top: 1px solid var(--sixs-hairline);
}

/* El `ul.sub-menu` de DROPS ya era blanco; el gris #efeceb lo pintaba el
 * ROWLAYOUT de adentro del kadence_element, asi que pisar el ul no cambiaba
 * nada. Por eso el selector baja hasta `.kb-row-layout-wrap`.
 *
 * Son dos rows, no uno: el element trae una variante desktop
 * (`kb-v-sm-hidden`) y otra mobile (`kb-v-lg-hidden`), las dos con el mismo
 * gris. Por eso el selector no nombra ningun uniqueID — los agarra a los dos
 * y sobrevive a que el cliente edite el element.
 *
 * ⚠️ Esto vale mientras adentro del panel NINGUN row quiera un fondo propio.
 * Si algun dia se le agrega una tarjeta con color, hay que exceptuarla. */
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu .kb-row-layout-wrap {
	background-color: var(--sixs-surface) !important;
}

/* El segundo CTA del hero: invertido respecto del primero.
 *
 * El primero es solido (fondo claro, texto oscuro) y lleva al drop en curso;
 * este es de contorno y lleva a la lista de todos los drops. La jerarquia es
 * a proposito: el drop nuevo es lo que se quiere vender, el archivo es para
 * el que ya sabe que esta buscando.
 *
 * ⚠️ Va con !important porque Kadence imprime el CSS del boton inline, con
 * selectores por uniqueID y DESPUES de esta hoja. */
/* ⚠️ Kadence pone el className en el <a> mismo, no en un wrapper: el
 * selector es `.kb-button.sixs-hero-cta-alt`, no un descendiente. */
.sixs-hero-cta .kb-button.sixs-hero-cta-alt {
	background: transparent !important;
	/* Solo el COLOR del borde: el ancho ya lo declara la regla de arriba para
	 * los dos botones, justamente para que midan igual. */
	border-color: var(--sixs-ink) !important;
	color: var(--sixs-ink) !important;
}

.sixs-hero-cta .kb-button.sixs-hero-cta-alt:hover {
	background: var(--sixs-ink) !important;
	color: #ffffff !important;
}

/* Los dos botones del hero, uno al lado del otro y con la misma altura. */
.sixs-hero-cta .kb-buttons-wrap,
.sixs-hero-cta {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* ==========================================================================
   CARRITO — el panel lateral es EL carrito (2026-08-12)

   El HTML sale de los hooks del mini-cart en functions.php. Referencia de
   estructura: freres.ar. Lo que aca se resuelve por CSS es el layout de
   columna (header arriba, lista scrolleable, totales y CTA anclados abajo),
   que Kadence hace con un max-height calculado a mano sobre la lista y se
   rompe al agregarle bloques nuevos al panel.
   ========================================================================== */

/* Un poco mas ancho que los 400px de Kadence: entran la tira de accesorios y
 * el nombre del producto en una linea. */
#cart-drawer.popup-drawer .drawer-inner {
	max-width: min(480px, 92vw);
	overflow: hidden; /* el scroll lo toma .drawer-content, no el inner */
}

#cart-drawer.popup-drawer .drawer-header {
	padding: 0 1.35em;
	border-bottom: 1px solid #ececec;
	min-height: 56px;
}

#cart-drawer h2.side-cart-header {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}

/* 🔑 EL SCROLL ES DEL PANEL, NO DE LA LISTA (2026-08-21)
 *
 * Hasta el 21/08 la lista era el unico elemento que scrolleaba: `flex: 1` con
 * `overflow-y: auto`, y todo lo demas —barra de envio, subtotal, cuotas,
 * medios de envio, accesorios, CTA— anclado abajo con alto fijo.
 *
 * Eso tiene un problema que crece con cada bloque que se agrega: la lista es
 * la unica que cede espacio. Con tres productos y el acordeon de envio
 * abierto, quedaba de ~90px —medio producto— con una barrita de scroll
 * interna de 40px. Nadie va a scrollear ESE contenedor: lo que se ve es un
 * carrito que perdio los productos.
 *
 * Se da vuelta: scrollea `.drawer-content` completo y la lista crece lo que
 * necesite. Cuando no entra, baja todo junto —un solo scroll, el del panel,
 * que es el gesto que el usuario ya conoce—. Es lo que hace la referencia
 * (shakaclothing).
 *
 * El costo de esa decision es que el CTA se va abajo del fondo, y por eso el
 * bloque de botones queda `sticky` (mas abajo): se scrollea todo el
 * contenido, pero PAGAR nunca se va de la pantalla. */
#cart-drawer.popup-drawer .drawer-content,
#cart-drawer .mini-cart-container,
#cart-drawer .kadence-mini-cart-refresh {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

#cart-drawer.popup-drawer .drawer-content {
	/* Sin padding abajo: ese aire pasa al bloque sticky del CTA, para que su
	 * fondo blanco llegue hasta el borde del panel. Con el padding aca, el
	 * contenido que scrollea se veia pasar por esa franja de 23px que quedaba
	 * debajo del boton. */
	padding: 0 1.35em 0;
	overflow-y: auto;
}

#cart-drawer .woocommerce-mini-cart {
	/* `flex: 0 0 auto` y no `1 1 auto`: la lista ya no es el elemento elastico
	 * del panel, mide lo que miden sus productos. Es el cambio que hace que
	 * dejen de comprimirse. */
	flex: 0 0 auto;
	/* `!important` porque Kadence le pone su propio `overflow-y: auto` a
	 * `ul.product_list_widget` y gana por especificidad: sin esto la lista
	 * sigue teniendo scroll propio y el problema vuelve tal cual. */
	overflow: visible !important;
	margin: 0;
	padding: 0.5em 0 0;
	/* ⚠️ Kadence clava `max-height: calc(100vh - (3.7em + 24px + 55px + 105px))`
	 * sobre `ul.product_list_widget`, contando a ojo el alto del header y del
	 * pie del panel. Esa cuenta nunca cerro con los bloques que le agregamos, y
	 * ahora ademas sobra: el que limita la altura es el panel. */
	max-height: none !important;
}

/* El CTA no se va de la pantalla.
 *
 * Es la contrapartida de que scrollee el panel entero: sin esto, con tres
 * productos hay que scrollear hasta el fondo para encontrar PAGAR.
 *
 * ⚠️ `sticky` necesita que NINGUN ancestro entre este bloque y el contenedor
 * que scrollea (`.drawer-content`) tenga `overflow` propio. Por eso la lista
 * quedo en `overflow: visible` arriba y no en `auto`. */
#cart-drawer .woocommerce-mini-cart__buttons {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 0.9em 0 1.35em;
	background: #fff;
	/* La sombra avisa que abajo del boton sigue habiendo contenido: sin ella,
	 * el bloque blanco corta el scroll de golpe y parece el final del panel. */
	box-shadow: 0 -12px 16px -12px rgba(16, 18, 21, 0.18);
}

#cart-drawer .kadence-mini-cart-refresh.sixs-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* Kadence deja un bloque vacio para el aviso de envio arriba de la lista, con
 * fondo propio y margenes negativos: sin aviso que mostrar queda como una
 * banda gris de 40px entre la barra de envio y el primer producto. */
#cart-drawer .kadence-mini-cart-shipping:empty {
	display: none;
}

/* --- Barra de envio gratis --- */

/* La barra de envio gratis, mas fuerte y debajo de los productos (21/08).
 *
 * Cambia el orden: primero la BARRA y despues el texto, como la referencia
 * (shakaclothing). Ese orden no es decorativo — la barra es un grafico que se
 * entiende de un vistazo y el texto es la explicacion; al reves, el ojo lee
 * la explicacion de algo que todavia no vio.
 *
 * ⚠️ Todo esto son `<span>` puestos en bloque, no divs: el hook que lo
 * imprime lo envuelve WooCommerce en un `<p>` y un `<div>` ahi adentro corta
 * el parrafo. Ver el comentario del `add_action` en functions.php. */
.sixs-ship {
	display: block;
	padding: 1.1em 0 1.2em;
	border-bottom: 1px solid #ececec;
}

.sixs-ship__text {
	display: block;
	margin: 0.75em 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
}

/* El monto va en el azul del header y en 700: es el unico numero de la
 * frase y es lo que decide si conviene sumar una prenda mas. Sobre el fondo
 * blanco del panel el azul da 5.9:1, o sea que aca si alcanza para texto
 * —a diferencia del ticker, donde el beige lo dejaba en 3.48 y por eso
 * quedo solo en el icono. */
.sixs-ship__text strong {
	color: #2b70cc;
	font-weight: 700;
}

.sixs-ship--done .sixs-ship__text {
	color: var(--sixs-save);
	font-weight: 700;
}

/* De 3px a 6px. A 3 era una linea de separacion mas entre las muchas que
 * tiene el panel; a 6 se lee como una barra de progreso. */
.sixs-ship__track {
	display: block;
	height: 6px;
	background: #e4e4e4;
	border-radius: 999px;
	overflow: hidden;
}

.sixs-ship__fill {
	display: block;
	height: 100%;
	background: #2b70cc;
	transition: width 0.35s ease;
}

.sixs-ship--done .sixs-ship__fill {
	background: var(--sixs-save);
}

/* --- Medios de envio: el acordeon del CP --- */

.sixs-shipcalc {
	margin: 0 0 1.1em;
	border-bottom: 1px solid #ececec;
}

/* El marker propio en vez del triangulo del navegador: el nativo no se
 * puede posicionar a la derecha ni rotar, que es el gesto de la referencia. */
.sixs-shipcalc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 0;
	color: var(--sixs-ink);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.sixs-shipcalc__summary::-webkit-details-marker {
	display: none;
}

.sixs-shipcalc__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	margin-right: 3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.sixs-shipcalc[open] .sixs-shipcalc__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.sixs-shipcalc__body {
	padding: 0 0 1.2em;
	transition: opacity 0.15s ease;
}

.sixs-shipcalc__body.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.sixs-shipcalc__intro,
.sixs-shipcalc__note {
	margin: 0 0 0.8em;
	color: #6b6b6b;
	font-size: 0.78rem;
	line-height: 1.4;
}

.sixs-shipcalc__note {
	margin: 0.9em 0 0;
}

.sixs-shipcalc__error {
	margin: 0 0 0.8em;
	color: var(--sixs-red);
	font-size: 0.78rem;
	line-height: 1.4;
}

.sixs-shipcalc__form {
	display: flex;
	gap: 8px;
}

.sixs-shipcalc__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7em 0.9em;
	border: 1px solid #d6d5d2;
	border-radius: 0;
	background: #fff;
	font-size: 0.88rem;
}

.sixs-shipcalc__input:focus {
	border-color: var(--sixs-ink);
	outline: none;
}

.sixs-shipcalc__submit {
	flex: 0 0 auto;
	padding: 0.7em 1.3em;
	border: 0;
	background: var(--sixs-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sixs-shipcalc__submit:hover {
	background: var(--sixs-ink-hover);
}

.sixs-shipcalc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 0.9em;
}

.sixs-shipcalc__cp {
	font-size: 0.82rem;
}

.sixs-shipcalc__change {
	flex: 0 0 auto;
	padding: 0.5em 0.9em;
	border: 1px solid #d6d5d2;
	background: transparent;
	color: #6b6b6b;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sixs-shipcalc__change:hover {
	border-color: var(--sixs-ink);
	color: var(--sixs-ink);
}

.sixs-shipcalc__list {
	display: block;
}

.sixs-shipcalc__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0.55em 0;
	border-top: 1px solid #f2f2f2;
	font-size: 0.85rem;
}

.sixs-shipcalc__row:first-child {
	border-top: 0;
}

.sixs-shipcalc__cost {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

/* --- Items --- */

#cart-drawer .woocommerce-mini-cart .mini_cart_item {
	position: relative;
	/* La foto va absoluta y el contenido corrido: la imagen y el nombre estan
	 * dentro del MISMO <a> del template de Woo, asi que no se pueden poner en
	 * dos celdas de una grilla sin romper el link. */
	padding: 1.1em 0 1.1em 88px;
	margin: 0;
	border-bottom: 1px solid #f2f2f2;
	min-height: 118px;
	list-style: none;
}

#cart-drawer .woocommerce-mini-cart .mini_cart_item img {
	position: absolute;
	left: 0;
	top: 1.1em;
	width: 74px;
	height: auto;
	margin: 0;
	float: none;
	background: #f5f5f5;
}

#cart-drawer .woocommerce-mini-cart .mini_cart_item > a:not(.remove) {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.3;
	/* Deja lugar para el "Quitar" del angulo, que va absoluto. */
	padding-right: 3.8em;
	text-decoration: none;
	color: inherit;
}

#cart-drawer .woocommerce-mini-cart .mini_cart_item a.remove {
	position: absolute;
	right: 0;
	top: 1.1em;
	width: auto;
	height: auto;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.4;
	color: #767676 !important;
	background: none !important;
	text-decoration: underline;
}

#cart-drawer .woocommerce-mini-cart .mini_cart_item a.remove:hover {
	color: var(--sixs-red) !important;
}

/* La línea de variación queda pegada a la izquierda, como el nombre.
 *
 * ⚠️ El `dl` es una lista de definición: el navegador le pone a los `dd` un
 * `margin-inline-start` de 40px por defecto, y con `dt` y `dd` en linea el
 * conjunto terminaba flotando en el MEDIO de la fila, sin alinearse con nada.
 * Los margenes del `dd` hay que anularlos a mano.
 *
 * Hoy esta linea casi nunca se imprime: `sixs_cart_hide_redundant_variation()`
 * la saca cuando el talle ya esta en el nombre, que es el caso normal. Queda
 * estilada para cuando SI aparece. */
#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation dt,
#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation dd,
#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation dd p {
	display: inline;
	margin: 0 !important;
	padding: 0;
}

#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation {
	display: block;
	text-align: left;
	margin: 0.3em 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: #6b6b6b;
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.45em;
}

#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation dt,
#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation dd,
#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation dd p {
	margin: 0;
	font-weight: 400;
}

/* --- Cantidad + total de la linea --- */

.sixs-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-top: 0.85em;
}

.sixs-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #dcdcdc;
	border-radius: 999px;
}

.sixs-qty__btn {
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	width: 28px;
	height: 28px;
	line-height: 1;
	font-size: 0.95rem;
	color: var(--sixs-ink);
	cursor: pointer;
	border-radius: 999px;
}

.sixs-qty__btn:hover {
	background: #f0f0f0;
}

.sixs-qty__btn[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

.sixs-qty__n {
	min-width: 1.6em;
	text-align: center;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.sixs-line__total {
	font-size: 0.92rem;
	font-weight: 600;
}

/* --- Tira "para completar tu outfit" --- */

/* Sin `border-top`: desde que existe el acordeon de medios de envio, el
 * bloque de arriba ya cierra con su propio `border-bottom` y las dos lineas
 * quedaban pegadas una debajo de la otra (21/08). La separacion la pone el
 * de arriba; este no la repite. */
.sixs-upsell {
	padding: 0.9em 0 0.2em;
	margin: 0;
}

.sixs-upsell__title {
	margin: 0 0 0.7em;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #6b6b6b;
}

/* Scroll horizontal y no grilla: la cantidad de accesorios en stock varia y
 * una grilla de dos filas se come el alto que necesita el CTA. */
.sixs-upsell__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 0.6em;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.sixs-upsell__item {
	flex: 0 0 auto;
	width: 84px;
	margin: 0;
	list-style: none;
}

.sixs-upsell__link {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Cuadradas y recortadas: las fotos del catalogo son 2:3 y a lo alto la tira
 * se comia 220px del panel, que es justo el espacio que necesita la lista de
 * productos para no obligar a scrollear con dos items. */
.sixs-upsell__link img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: center top;
	margin: 0 0 0.35em;
	background: #f5f5f5;
	border: 1px solid #ececec;
}

.sixs-upsell__name,
.sixs-upsell__price {
	display: block;
	font-size: 0.66rem;
	line-height: 1.3;
	/* Un nombre de dos lineas desalinea toda la tira; el precio es el dato que
	 * decide, asi que el que se corta es el nombre. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sixs-upsell__name {
	font-weight: 600;
}

.sixs-upsell__price {
	color: #6b6b6b;
}

.sixs-upsell__plus {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #ffffff;
	color: var(--sixs-ink);
	font-size: 0.8rem;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.sixs-upsell__link:hover .sixs-upsell__plus {
	background: var(--sixs-ink);
	color: #ffffff;
}

/* WooCommerce cuelga un "Ver carrito" despues de cada boton de alta por AJAX.
 * Dentro del panel no tiene a donde llevar. */
.sixs-upsell .added_to_cart {
	display: none !important;
}

/* --- Totales, cuotas y transferencia --- */

/* ⚠️ Woo envuelve este bloque en un <p>, asi que los hijos son <span>: se
 * ponen en bloque desde aca. */
#cart-drawer .woocommerce-mini-cart__total.total {
	display: block;
	border-top: 1px solid #ececec;
	border-bottom: 0;
	margin: 0;
	padding: 0.9em 0 0;
}

.sixs-cart-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
}

.sixs-cart-total__label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.sixs-cart-total__amount {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.1;
}

.sixs-cart-perks {
	display: block;
	margin-top: 0.7em;
	padding: 0.7em 0.85em;
	background: #f6f6f6;
	border-radius: 4px;
}

.sixs-cart-perks__row {
	display: block;
	position: relative;
	padding-left: 0.95em;
	font-size: 0.78rem;
	line-height: 1.5;
}

.sixs-cart-perks__row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: var(--sixs-red);
}

.sixs-cart-perks__row--deal {
	font-weight: 600;
}

/* --- CTA --- */

#cart-drawer .woocommerce-mini-cart__buttons.buttons {
	display: block;
	margin: 0.9em 0 0;
	padding: 0;
}

#cart-drawer .button.sixs-pay,
.sixs-cart-empty-cta .button.sixs-pay {
	display: block;
	width: 100%;
	padding: 1.05em 1em;
	background: var(--sixs-ink);
	color: #ffffff;
	border: 0;
	border-radius: 2px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

#cart-drawer .button.sixs-pay:hover,
.sixs-cart-empty-cta .button.sixs-pay:hover {
	background: var(--sixs-ink-hover);
	color: #ffffff;
}

.sixs-cart-fine {
	margin: 0.7em 0 0;
	font-size: 0.68rem;
	line-height: 1.4;
	color: #767676;
	text-align: center;
}

/* --- Carrito vacio --- */

#cart-drawer .woocommerce-mini-cart__empty-message {
	padding: 2.5em 0 1.2em;
	text-align: center;
	font-size: 0.9rem;
	color: #6b6b6b;
}

.sixs-cart-empty-cta {
	margin: 0;
}

@media (max-width: 480px) {
	/* En vw y no en %: el % lo resuelve contra el ancho del contenedor, que en
	 * una pagina con desborde horizontal es mas ancho que la pantalla y deja
	 * media columna del panel fuera de cuadro. */
	#cart-drawer.popup-drawer .drawer-inner {
		max-width: 100vw;
	}

	.sixs-cart-total__amount {
		font-size: 1.2rem;
	}
}

/* ==========================================================================
   CARD-1 / CARD-2 — Agregar + talle desde la card (2026-08-14)

   El markup lo imprime [sixs_card_add] al pie del WooTemplate 529.

   ⚠️ El margen superior repite el prefijo largo del reset
   `li.product .kb-row-layout-id529_83b6f4-d4 .kt-inside-inner-col > *`,
   que va con !important y especificidad (0,3,1). Un selector mas corto
   pierde y el margen queda en cero sin ningun aviso: ya paso con el
   boton de la version del 07/08, que termino a 2px de la transferencia.
   ========================================================================== */

li.product .kb-row-layout-id529_83b6f4-d4 .kt-inside-inner-col > .sixs-add {
	margin-top: 12px !important;
}

/* En mobile, 8px en vez de 12. La card del celular es mas angosta y todo el
 * bloque de texto queda mas apretado, asi que los mismos 12px de desktop se
 * leen como un hueco: el boton se despega del precio al que pertenece. */
@media (max-width: 767px) {
	li.product .kb-row-layout-id529_83b6f4-d4 .kt-inside-inner-col > .sixs-add {
		margin-top: 8px !important;
	}
}

.sixs-add {
	position: relative;
}

/* Pill negro como el resto de los CTA del sitio. El <a> es el fallback
 * sin JS (lleva a la ficha), asi que hay que sacarle el subrayado y el
 * color de link heredados. */
.sixs-add__btn {
	display: block;
	width: 100%;
	padding: 0.9em 1em;
	border: 0;
	border-radius: 999px;
	background: var(--sixs-ink);
	color: #ffffff !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.sixs-add__btn:hover,
.sixs-add__btn:focus {
	background: var(--sixs-ink-hover);
	color: #ffffff !important;
}

.sixs-add--out .sixs-add__btn {
	background: transparent;
	border: 1px solid #d6d5d2;
	color: #9a9a97 !important;
	cursor: default;
}

/* Los talles se abren FLOTANDO sobre la card y no empujando el contenido:
 * las cards de una fila comparten alto, y abrir la tira dentro del flujo
 * estiraba a las cuatro vecinas de la fila. */
.sixs-add__sizes {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 3;
	display: flex;
	gap: 6px;
	/* Mas aire a los costados que arriba y abajo, a proposito. Con el padding
	 * uniforme los talles LLEGABAN al borde: son `flex: 1`, o sea que reparten
	 * todo el ancho que les dejes, asi que el unico margen lateral que existe
	 * es este padding. Arriba y abajo, en cambio, el boton tiene su propia
	 * altura y el aire se percibe mayor con el mismo numero. */
	padding: 8px 12px;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.sixs-add__sizes[hidden] {
	display: none;
}

.sixs-add__size {
	flex: 1 1 0;
	min-width: 0;
	padding: 0.5em 0;
	border: 1px solid #d6d5d2;
	border-radius: 6px;
	background: #ffffff;
	color: var(--sixs-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sixs-add__size:hover,
.sixs-add__size:focus {
	background: var(--sixs-ink);
	border-color: var(--sixs-ink);
	color: #ffffff;
}

/* Mismo tratamiento que los talles agotados de la ficha (PDP-2): gris y
 * tachado, sin numero de stock. Un talle que no esta se muestra igual
 * —no se esconde— porque saberlo es parte de decidir. */
.sixs-add__size--out,
.sixs-add__size--out:hover,
.sixs-add__size--out:focus {
	background: rgba(16, 18, 21, 0.05);
	border-color: #e4e4e4;
	color: #a8a8a8;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Mientras viaja el alta. El pointer-events evita el doble clic sin
 * tocar `disabled`, que en el <a> del fallback no hace nada. */
.sixs-add--busy {
	opacity: 0.55;
	pointer-events: none;
}

/* En mobile la grilla va a 2 columnas y la card mide 157px a 390px de
 * viewport (medido, no estimado): con el padding de escritorio cada
 * talle quedaba en 31x28 px, chico para el dedo.
 *
 * La tira se desborda 4px de cada lado de la card —puede, es absolute— y
 * el boton se hace mas alto: 35x38 px. Sigue abajo de los 44 que
 * recomienda Apple, pero en una grilla de dos columnas el ancho es lo
 * que hay; el alto, que es lo que si se podia dar, se da.
 *
 * El wrap es la red por si algun dia hay un atributo con mas de cuatro
 * valores: pasan a dos filas en vez de aplastarse. */
@media (max-width: 767px) {
	.sixs-add__sizes {
		left: -4px;
		right: -4px;
		flex-wrap: wrap;
		gap: 4px;
		/* Mismo criterio que en desktop: mas aire a los costados que arriba y
		 * abajo. Los talles son `flex: 1` y se comen todo el ancho, asi que el
		 * unico margen lateral posible es este padding — y a 6px llegaban
		 * literalmente al borde de la caja. */
		padding: 6px 11px;
	}

	.sixs-add__size {
		min-width: 34px;
		padding: 0.85em 0;
	}
}

/* ==========================================================================
   Carruseles de producto: el gap de la grilla se le suma al de Splide
   (2026-08-14)

   En mobile la segunda card de cada carrusel salia cortada ~16px.

   La causa: el `.splide__list` es **el mismo elemento** que la grilla de
   productos del theme, y arrastra sus clases (`products grid-cols
   grid-ss-col-2 ...`). O sea recibe DOS separaciones a la vez: el `gap`
   flex de la grilla y el `margin-right` que Splide le pone a cada slide.
   Splide dimensiona los slides como `calc(50% - 2.5px)` contando solo su
   propio margen, asi que con el gap de la grilla encima los dos slides
   suman mas que el track y el segundo se sale.

   Kadence intenta anular ese gap, pero su regla apunta a
   `.kt-blocks-product-carousel-block` y el wrapper que renderiza hoy es
   `.kt-product-carousel-wrap`: la regla no matchea nada. Esto lo arregla
   de verdad.

   ⚠️ Tiene que estar en la hoja ANTES de que Splide arranque. Inyectado
   despues, el ancho de los slides se corrige pero el carrusel queda
   corrido: Splide guarda el paso al inicializar y ya no lo recalcula
   (ni con resize).
   ========================================================================== */

.kt-product-carousel-wrap .splide__list {
	gap: 0 !important;
}

/* ==========================================================================
   Header mobile sobre el hero: velo de legibilidad (2026-08-14)

   En la home el header es transparente a proposito y flota sobre la foto
   (post meta `_kad_post_transparent`). En desktop funciona: la fila del
   menu se enciende en blanco al hover. En mobile no hay hover, y los tres
   elementos —hamburguesa, carrito y logo— son NEGROS sobre una foto que
   cambia sola cada 3 segundos. Cuando el slide de turno tiene algo oscuro
   arriba (el pelo del modelo, una campera negra), los controles
   desaparecen: no es que se vean mal, es que no se ven.

   Se resuelve con un degradado blanco muy suave que solo existe donde
   estan los controles y se desvanece antes de la mitad del hero. Es lo
   minimo que garantiza contraste sin apagar el efecto de foto a sangre,
   que es lo que se buscaba con el header transparente.

   Va con `pointer-events: none` para no comerse los toques del
   hamburguesa ni del carrito, y detras de ellos (z-index 0 contra el
   contenido del header, que Kadence deja arriba).
   ========================================================================== */

@media (max-width: 1024px) {
	/* De 190px a 92, y de 0.92 de opacidad a 0.55 (21/08).
	 *
	 * El velo existe por una razon real: los tres controles del header mobile
	 * —hamburguesa, carrito, logo— son NEGROS sobre un header transparente, y
	 * con un slide oscuro atras desaparecen. Pero a 190px y casi opaco tapaba
	 * el cuarto superior de la foto y se leia como una sombra puesta a
	 * proposito, no como un recurso invisible.
	 *
	 * Achicado a la franja que ocupan los controles y con la mitad de carga:
	 * sostiene el contraste donde hace falta y deja la foto a la vista. */
	body.mobile-transparent-header #mobile-header::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 92px;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0.32) 45%,
			rgba(255, 255, 255, 0) 100%
		);
	}

	/* El velo se pinta sobre el row del header, asi que hay que devolver
	 * el contenido arriba o los controles quedan abajo del degradado. */
	body.mobile-transparent-header #mobile-header .site-header-row-container-inner,
	body.mobile-transparent-header #mobile-header .site-top-header-wrap {
		position: relative;
		z-index: 1;
	}
}

/* ==========================================================================
   Los importes no se parten al medio (2026-08-14)

   En la card de mobile "$136.566 por transferencia" rompia el renglon
   DENTRO del numero ("$136." arriba, "566" abajo) y la linea pasaba a
   tres renglones. Con las cards de una fila compartiendo alto, una sola
   asi descuadra las dos.

   Con `nowrap` el importe viaja entero y lo unico que baja de renglon es
   "por transferencia": dos renglones siempre, mida lo que mida el precio.

   La linea de cuotas ya entra en uno solo desde que se le sacaron los
   decimales ("6 cuotas sin interes de $26.778" mide 155px de los 177 que
   tiene la card).
   ========================================================================== */

.sixs-payment .woocommerce-Price-amount,
.sixs-payment__amount,
.sixs-price__main .woocommerce-Price-amount,
.sixs-price__list .woocommerce-Price-amount {
	white-space: nowrap;
}

/* En mobile la card mide 177px y "$136.566 por transferencia" no entra
 * en un renglon, mientras que "$72.816 por transferencia" si. O sea que
 * el alto de la card terminaba dependiendo del precio, y en una fila de
 * dos las vecinas quedaban desparejas.
 *
 * Se le reserva el alto de dos renglones a todas. Es la unica salida que
 * no toca ni el tamano de la tipografia ni el texto: con el precio mas
 * caro del catalogo ($160.666) la linea no entra en uno solo, y bajar la
 * tipografia era justo lo que Matias pidio no hacer.
 *
 * El numero sale de la medicion: 7px de padding + 19 de la linea del
 * monto (16px) + 18,5 de la del texto (13px). */
@media (max-width: 767px) {
	.sixs-payment--card .sixs-payment__transfer {
		min-height: 44px;
	}
}

/* ==========================================================================
   MENÚ MOBILE — el drawer de la hamburguesa (2026-08-21)

   El markup del buscador y del pie lo imprime functions.php; el porque de
   cada decision esta en el comentario de ese bloque. Aca va lo visual.
   ========================================================================== */

/* 🔑 EL PANEL NO TAPA EL HEADER.
 *
 * Kadence lo abre a pantalla completa desde `top: 0`, cubriendo el ticker y
 * la fila de controles. Ahora arranca DEBAJO del header: al abrir el menu no
 * se mueve nada de lo que ya estaba en pantalla.
 *
 * Eso ademas resuelve el boton de cerrar sin agregar ninguno: la hamburguesa
 * sigue visible —el header nunca se fue— y es la que cierra, que es lo que ya
 * hacia.
 *
 * ⚠️ El alto NO se hardcodea: lo mide `header.js` y lo publica en
 * `--sixs-mheader-h`, porque depende del alto real del ticker, de cuantas
 * filas tenga el header y del cuerpo de la tipografia. El fallback de 100px
 * es para el primer frame, antes de que corra el script. */
/* 🔑 El que se corre es el CONTENEDOR, no solo el panel de adentro.
 *
 * `#mobile-drawer` es `position: fixed` con `z-index: 99999` y arranca en
 * `top: 46` (debajo de la admin bar). Bajar solo el `.drawer-inner` movia lo
 * que se VE, pero el contenedor seguia tapando el header entero: el header se
 * veia perfecto y no respondia a ningun clic — ni la X, ni el carrito, ni el
 * logo. `elementFromPoint` sobre los tres devolvia `.popup-drawer`.
 *
 * Es el tipo de bug que no se diagnostica mirando: no hay nada mal dibujado.
 * Con el contenedor corrido, el header queda libre y sus controles vuelven a
 * recibir los clics. */
#mobile-drawer.popup-drawer {
	top: var(--sixs-mheader-h, 100px) !important;
}

/* ⚠️ El `.drawer-inner` y el overlay son `position: FIXED`, no `absolute`:
 * su `top` cuenta contra el viewport, no contra `#mobile-drawer`. Poner
 * `top: 0` aca —creyendo que heredaban del contenedor ya corrido— los mandaba
 * al tope de la pantalla otra vez, y los botones del acordeon, que miden 375
 * de ancho, quedaban ENCIMA del header capturando todos sus clics.
 *
 * Los tres llevan el mismo valor: el contenedor para que no tape el header, y
 * estos dos porque no lo heredan. */
#mobile-drawer.popup-drawer .drawer-inner {
	top: var(--sixs-mheader-h, 100px) !important;
	height: auto !important;
	max-height: none !important;
	bottom: 0 !important;
	background: #ffffff !important;
}

#mobile-drawer.popup-drawer::before,
#mobile-drawer .drawer-overlay {
	top: var(--sixs-mheader-h, 100px) !important;
}

/* El header, mientras el panel esta abierto: BLANCO y en negro.
 *
 * Viene transparente sobre la foto del hero, que es lo correcto con el panel
 * cerrado. Abierto, el header quedaria flotando sobre una imagen mientras
 * abajo hay una superficie blanca: dos fondos distintos en un mismo bloque.
 *
 * La clase la pone Kadence en el <body> desde el `data-toggle-body-class` del
 * boton; no es nuestra, pero es estable. */
body.showing-popup-drawer-from-full #mobile-header .site-header-row-container-inner {
	background: #ffffff !important;
}

/* El ticker conserva SU beige: es la unica fila que ya tenia fondo propio y
 * la consigna es que no cambie nada de lo que estaba en pantalla. */
body.showing-popup-drawer-from-full #mobile-header .site-top-header-wrap .site-header-row-container-inner {
	background: #e8e0d5 !important;
}

/* Con el header ya en blanco, el velo que le da contraste a los controles
 * sobre la foto no tiene nada que hacer: si se deja, se ve una banda gris
 * arriba del blanco. */
body.showing-popup-drawer-from-full #mobile-header::before {
	opacity: 0;
}

/* Los controles en negro. Ya lo son, pero el header transparente puede
 * llevarlos en blanco segun la variante que el cliente elija en el
 * Customizer: atado aca, no depende de esa config. */
body.showing-popup-drawer-from-full #mobile-header .site-header-row-container-inner:not(.sixs-x) *,
body.showing-popup-drawer-from-full #mobile-header .drawer-toggle,
body.showing-popup-drawer-from-full #mobile-header .drawer-toggle .toggle-bar {
	color: var(--sixs-ink) !important;
}

body.showing-popup-drawer-from-full #mobile-header .drawer-toggle .toggle-bar {
	background: var(--sixs-ink) !important;
}

/* La fila de la X propia del drawer no va: el header de arriba es el que
 * cierra. */
#mobile-drawer .drawer-header {
	display: none;
}

/* Y con el panel abierto, la hamburguesa SE CONVIERTE en una X.
 *
 * Sin esto el mismo icono significa dos cosas opuestas segun el estado, que
 * es justo lo que el usuario no puede saber mirando. El boton ya era un
 * toggle y ya cerraba; lo que faltaba era decirlo.
 *
 * ⚠️ Kadence dibuja la hamburguesa con un SVG, no con barras: no se puede
 * animar a X transformando spans. Se apaga el SVG y la X se dibuja con
 * pseudo-elementos sobre el contenedor del icono. */
body.showing-popup-drawer-from-full #mobile-header .menu-toggle-open .menu-toggle-icon {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 22px;
}

body.showing-popup-drawer-from-full #mobile-header .menu-toggle-open .kadence-svg-iconset {
	opacity: 0;
}

body.showing-popup-drawer-from-full #mobile-header .menu-toggle-open .menu-toggle-icon::before,
body.showing-popup-drawer-from-full #mobile-header .menu-toggle-open .menu-toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.8px;
	background: var(--sixs-ink);
}

body.showing-popup-drawer-from-full #mobile-header .menu-toggle-open .menu-toggle-icon::before {
	transform: translateY(-50%) rotate(45deg);
}

body.showing-popup-drawer-from-full #mobile-header .menu-toggle-open .menu-toggle-icon::after {
	transform: translateY(-50%) rotate(-45deg);
}

#mobile-drawer .drawer-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}

/* El item que envuelve la navegacion viene como FILA y con `align-items:
 * center`. Sin esto el buscador y el pie se acomodan al costado del menu y de
 * 259px de ancho en vez de los 375 del panel: paso, y costo un diagnostico. */
#mobile-drawer .site-header-item-mobile-navigation {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	align-items: stretch;
}

#mobile-drawer .mobile-navigation,
#mobile-drawer .mobile-navigation > ul {
	width: 100%;
}

/* --- Los items del menu --- */

/* Tipografia grande, del mismo cuerpo que los destacados del mega menu de
 * desktop. Tres items en una pantalla de 780px no compiten por espacio: lo
 * que sobra es lugar, asi que el menu puede permitirse ser editorial en vez
 * de una lista de sistema. */
#mobile-drawer .mobile-navigation ul li a {
	padding: 0.85em 1.25rem !important;
	color: var(--sixs-ink) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	line-height: 1.15 !important;
	text-transform: uppercase;
}

/* La hairline va en el <li> y no como `border-bottom` del <a>: el <a> de un
 * item con submenu no ocupa el ancho completo —le comparte la fila al boton
 * del acordeon— asi que la linea quedaria cortada antes del chevron. */
#mobile-drawer .mobile-navigation ul > li {
	border-bottom: 1px solid var(--sixs-hairline);
}

#mobile-drawer .mobile-navigation ul > li:last-child {
	border-bottom: 0;
}

/* HOME no va en mobile: el logo del header —que ahora queda visible con el
 * panel abierto— ya lleva ahi, y en un menu de tres items gastaba el primer
 * renglon, el mas visible, en el destino al que se llega tocando cualquier
 * logo. La clase `menu-item-home` la pone WordPress solo. */
#mobile-drawer .mobile-navigation ul > li.menu-item-home {
	display: none;
}

/* Solo el hover se apaga. El `current-menu-item` NO: en la home eso dejaba
 * "HOME" en gris claro, o sea el item activo era el unico que se leia peor
 * que los demas — al reves de lo que un estado activo tiene que hacer. */
#mobile-drawer .mobile-navigation ul li a:hover {
	background: transparent !important;
	opacity: 0.55;
}

#mobile-drawer .mobile-navigation ul li.current-menu-item > a {
	background: transparent !important;
	opacity: 1;
}

/* El boton del acordeon toma el alto de su fila y su color, en vez del gris
 * de sistema que traia. */
#mobile-drawer .drawer-nav-drop-wrap button {
	color: var(--sixs-ink) !important;
	background: transparent !important;
	padding-right: 1.25rem !important;
}

/* --- Submenus --- */

/* Bajan de golpe de 26px a 15px y se corren hacia adentro: la sangria es lo
 * que dice "esto cuelga de lo de arriba" sin necesidad de una caja ni de un
 * fondo distinto. */
/* 🔑 El submenu de CATALOGO va en DOS COLUMNAS, no en lista.
 *
 * Son 14 categorias. En una columna median ~560px: al abrir el acordeon el
 * panel se convertia en un scroll largo, DROPS se iba abajo de todo y no
 * habia forma de ver la oferta completa de un vistazo. En dos columnas entra
 * casi entero en pantalla, que es lo que un menu tiene que hacer.
 *
 * Se va tambien el fondo `#faf9f7`: con la sangria de 2,1rem el submenu ya se
 * leia como dependiente del padre, y la caja gris sumaba una superficie mas a
 * un panel que ya tiene beige arriba, blanco en el medio y papel abajo. Lo
 * que separa ahora es una hairline y el aire.
 *
 * El padding lateral es el MISMO que el de los items de primer nivel
 * (1,25rem), no una sangria: en dos columnas la sangria dejaba la segunda
 * columna descolgada de todo. La jerarquia la da el cuerpo, no la posicion. */
/* ⚠️ El `display` NO se declara acá, y es a proposito.
 *
 * Kadence cierra el acordeon con `display: none` sobre el `ul.sub-menu`.
 * Declarar `display: grid` en la regla base lo pisaba, asi que los dos
 * submenus quedaban ABIERTOS siempre y el boton no hacia nada visible: el
 * `aria-expanded` cambiaba de false a true y de vuelta, pero el panel nunca
 * se movia. Se veia como "el acordeon no cierra".
 *
 * El display va abajo, condicionado al estado abierto, y con `!important`
 * porque Kadence anima con jQuery y deja un `display: block` INLINE mientras
 * dura el slide — sin el `!important` la grilla de dos columnas se pierde
 * justo despues de abrir. */
#mobile-drawer .mobile-navigation ul ul.sub-menu {
	grid-template-columns: 1fr 1fr;
	column-gap: 0.75rem;
	background: transparent;
	border-top: 1px solid var(--sixs-hairline);
	padding: 0.7rem 1.25rem 1.1rem;
}

#mobile-drawer .mobile-navigation li:has( button[aria-expanded="true"] ) > ul.sub-menu {
	display: grid !important;
}

#mobile-drawer .mobile-navigation ul ul.sub-menu li {
	border-bottom: 0;
	min-width: 0;
}

#mobile-drawer .mobile-navigation ul ul.sub-menu li a {
	display: block;
	padding: 0.5em 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em;
	line-height: 1.3 !important;
	text-transform: uppercase;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #4a4d52 !important;
}

#mobile-drawer .mobile-navigation ul ul.sub-menu li a:hover {
	color: var(--sixs-ink) !important;
	opacity: 1;
}

/* --- DROPS: la lista propia que reemplaza al mega menu de Pro --- */

/* Vuelve a UNA columna: son cuatro entradas con dos lineas cada una, no un
 * indice. Y el `!important` en el grid-template va porque la regla de arriba
 * agarra a todos los `ul.sub-menu` del panel. */
/* Los drops van en UNA columna: son cuatro fichas de dos lineas, no un
 * indice. Y sin fondo propio — el papel queda reservado para el pie del
 * panel, que es el unico bloque que tiene que leerse como otra cosa. */
#mobile-drawer .mobile-navigation li:has( button[aria-expanded="true"] ) > ul.sub-menu.sixs-drops-sub {
	display: block !important;
}

#mobile-drawer .mobile-navigation ul.sub-menu.sixs-drops-sub {
	padding: 0.4rem 1.25rem 1.1rem;
	background: transparent;
}

.sixs-drops {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sixs-drops li {
	border-bottom: 1px solid var(--sixs-hairline);
}

.sixs-drops li:last-child {
	border-bottom: 0;
}

/* Cada drop es una FICHA, no un link mas: numero grande a la izquierda,
 * nombre de campana y estado. Es la unica parte del menu donde hay algo que
 * contar —el drop en curso, cuantas prendas tiene— y contarlo es lo que hace
 * que la lista se lea como un archivo y no como cuatro categorias iguales. */
#mobile-drawer .sixs-drops a {
	display: flex !important;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 0 !important;
	font-size: inherit !important;
	font-weight: 400 !important;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none !important;
}

.sixs-drops__num {
	flex: 0 0 auto;
	min-width: 1.6em;
	color: var(--sixs-ink);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sixs-drops__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sixs-drops__title {
	color: var(--sixs-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sixs-drops__meta {
	display: flex;
	align-items: center;
	gap: 0.45em;
	color: #6b6b6b;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* "EN CURSO" con el punto rojo del hero: es la misma senal en los dos lugares
 * —esto es lo que se esta vendiendo ahora— y no un adorno nuevo. */
.sixs-drops__live {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--sixs-ink);
	font-weight: 700;
}

.sixs-drops__live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sixs-red, #e8412c);
}

.sixs-drops__live::after {
	content: "\00B7";
	color: #6b6b6b;
	font-weight: 400;
}

/* --- El pie --- */

/* `margin-top: auto` lo empuja contra el borde de abajo. Ese vacio era el
 * problema visual del panel; ahora es aire a proposito entre el menu y el
 * pie, que es donde se apoya el pie. */
.sixs-mnav-foot {
	margin-top: auto;
	padding: 1.3rem 1.25rem 1.7rem;
	border-top: 1px solid var(--sixs-hairline);
	background: var(--sixs-paper, #efedea);
}

.sixs-mnav-perks {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

/* Reusa las mascaras de los iconos del ticker (`.sixs-ticker--envio` y
 * compania) para no duplicar los data-URI de los SVG. Lo unico que se pisa es
 * el layout, que alla es un marquee horizontal y aca una lista.
 *
 * ⚠️ Si cambia el tamano o el color del icono del ticker, cambia tambien aca.
 * Es lo buscado —son el mismo icono— pero conviene saberlo antes de tocarlo. */
.sixs-mnav-perks .sixs-ticker {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6b6b;
	white-space: normal;
}

/* Sin el punto separador del ticker: aca cada beneficio es su propio renglon
 * y no hay nada que separar. */
.sixs-mnav-perks .sixs-ticker::after {
	content: none;
}

/* ==========================================================================
   En MOBILE las grillas de producto dejan de ser carrusel (2026-08-21)

   Los bloques de producto de la home son carruseles de Kadence (Splide). En
   desktop tienen sentido: cuatro columnas y el resto a un swipe. En el
   celular mostraban UNA card y media, y el resto del drop quedaba escondido
   detras de un gesto que nadie hace en una home.

   Pasan a grilla de dos columnas. Todas las cards a la vista, sin gesto que
   descubrir.

   🔑 No se toca el JS del plugin ni su config: Splide sigue montado y sigue
   creyendo que es un carrusel. Lo que se hace es anular su layout por CSS —el
   `transform` del track, el ancho de los slides y los clones del loop— asi el
   cambio es 100% reversible sacando este bloque, y una actualizacion de
   Kadence no lo rompe.

   ⚠️ El selector va por `.kt-blocks-product-carousel-block`, NO por
   `.kt-blocks-carousel`. El SLIDER DEL HERO tambien lleva esa segunda clase:
   con el selector generico la foto de campana se partia en dos columnas y el
   hero mostraba dos slides uno al lado del otro. Cualquier regla que apunte a
   carruseles de Kadence tiene que decir CUAL.

   Y tampoco sirve `.kt-product-carousel`: esa clase la lleva el carrusel de
   productos en algunos breakpoints y en otros aparece como
   `kt-product-carousel-loop`. La del bloque es la unica estable.

   ⚠️ Los `!important` NO son opcionales: Splide escribe `transform`, `width`
   y `margin` INLINE sobre esos elementos. Sin `!important` no se le gana.
   ========================================================================== */

@media (max-width: 767px) {
	/* El track deja de recortar: la grilla crece hacia abajo y con
	 * `overflow: hidden` se veria solo la primera fila. */
	.kt-blocks-product-carousel-block .splide__track {
		overflow: visible !important;
	}

	.kt-blocks-product-carousel-block .splide__list {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		/* ⚠️ El `!important` va tambien en el `gap`: sin el daba 0 y las cards
		 * quedaban pegadas una contra la otra. El `display: grid` de esta misma
		 * regla si aplicaba, asi que el sintoma era una grilla sin separacion —
		 * facil de leer como "quedo mal el diseno" y no como una declaracion
		 * perdida.
		 *
		 * Los valores son los MISMOS que los del catalogo (28 vertical, 18
		 * horizontal): las dos grillas de producto del sitio tienen que medir
		 * igual, o la home y el catalogo se ven como dos sitios. */
		gap: 28px 18px !important;
		/* Splide desplaza el track con `transform`, y el autoplay lo sigue
		 * haciendo aunque ya no se vea: sin esto la grilla entera se correria
		 * sola cada 5 segundos. */
		transform: none !important;
		width: auto !important;
	}

	.kt-blocks-product-carousel-block .splide__list > li {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	/* Los clones son las copias que Splide agrega a los costados para que el
	 * loop no tenga corte. En una grilla son productos repetidos. */
	.kt-blocks-product-carousel-block .splide__slide--clone {
		display: none !important;
	}

	/* Las flechas y los puntos quedan sin funcion: el contenido ya no se
	 * desplaza. */
	.kt-blocks-product-carousel-block .splide__arrows,
	.kt-blocks-product-carousel-block .splide__pagination {
		display: none !important;
	}
}

/* ==========================================================================
   PÁGINA DE CATÁLOGO — la grilla de productos (2026-08-21)

   El template es un WooTemplate de Shop Kit (post 498), o sea contenido: lo
   que se pueda resolver desde el child se resuelve aca, para que viaje con el
   rsync en vez de ser otra cosa a rehacer a mano en prod.
   ========================================================================== */

/* 🔑 La grilla se alinea con el hero.
 *
 * Estaba 9px mas adentro (58px de borde contra 49 del hero) y con la home
 * arriba se notaba: dos bloques que arrancan en verticales distintas.
 *
 * Los 58 salen de dos sumandos: el `padding: 48px` del row del WooTemplate
 * mas los 10px que Kadence le pone al `main#inner-wrap`. Por eso el calc
 * resta esos 10: lo que se quiere fijar es la distancia al BORDE DE LA
 * VENTANA, no al contenedor.
 *
 * ⚠️ Si algun dia Kadence cambia el padding de `main`, este 10 hay que
 * revisarlo. Es el unico numero de esta hoja que depende del theme padre. */
/* ⚠️⚠️ El selector apunta al row de CONTENIDO —hijo directo de
 * `main#inner-wrap`— y no a cualquier `.kt-row-column-wrap`.
 *
 * La primera version usaba el descendiente suelto, y **cada card del catalogo
 * es tambien un row layout**: el padding de 39px se le aplico a las 92 cards,
 * que quedaron con el nombre, el precio y el boton metidos 39px para adentro
 * mientras en la home ocupaban la card entera. Es el mismo error que con
 * `.kt-blocks-carousel` y el slider del hero: una clase de Kadence que se
 * repite en dos niveles distintos del arbol. */
/* ⚠️ El `:not(.kt-row-has-bg)` es lo que deja la portada del drop a sangre.
 *
 * Sin el, el gutter se le aplicaba tambien a la banda del drop —que es un row
 * con imagen de fondo— y en el archivo de una categoria la portada quedaba
 * con dos margenes blancos a los costados, mientras en prod va de punta a
 * punta. Una banda con fondo es justamente lo que tiene que tocar los bordes.
 *
 * Las cards del catalogo tambien son rows con fondo, pero NO son hijas
 * directas de `main#inner-wrap`, asi que el `>` no las alcanza: siguen
 * recibiendo su padding. */
body.archive main#inner-wrap > .kb-row-layout-wrap:not(.kt-row-has-bg) > .kt-row-column-wrap,
body.post-type-archive-product main#inner-wrap > .kb-row-layout-wrap:not(.kt-row-has-bg) > .kt-row-column-wrap {
	padding-left: calc(var(--sixs-gutter) - 10px) !important;
	padding-right: calc(var(--sixs-gutter) - 10px) !important;
}

/* Cuatro columnas en desktop.
 *
 * Shop Kit las define por config del bloque —o sea en el post_content— y
 * venia en tres. A 1440px una columna de tres da cards de 414px: la foto de
 * producto queda enorme y entran menos de dos filas en pantalla. Con cuatro,
 * la card mide ~310px, que es el mismo ancho que ya tienen las cards de la
 * home; el catalogo y la home pasan a hablar el mismo idioma. */
@media (min-width: 1025px) {
	body.archive ul.products,
	body.post-type-archive-product ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* El gap baja de 40px a 18.
 *
 * A 40 las cuatro columnas se leian como cuatro bloques sueltos y no como una
 * grilla; y esos 40px salian del ancho de las fotos, que es lo unico que el
 * comprador vino a mirar. Con 18 la card gana ~16px de foto y la grilla se
 * lee como una sola pieza.
 *
 * El vertical se queda mas grande que el horizontal (28 contra 18): las
 * filas necesitan mas aire porque abajo de cada foto hay cinco lineas de
 * texto y un boton, no un borde. */
body.archive ul.products,
body.post-type-archive-product ul.products {
	gap: 28px 18px !important;
}

/* --- Encabezado del archivo --- */

/* Reemplaza al `<h2>` de 17px que decia "CATÁLOGO" en todas las categorias.
 * El markup lo arma `sixs_archive_header_block()` en functions.php. */

/* 🔑 El aire de arriba y el de abajo de la hairline son EL MISMO (22px).
 *
 * Estaba en 35px de margen mas los 30px que el wrap de la grilla trae de
 * fabrica: 65px entre la linea y la primera card, contra 22 entre la linea y
 * el titulo. La linea se leia como el techo de la grilla y no como el piso
 * del encabezado — quedaba flotando, mas cerca de lo de arriba.
 *
 * Ahora el margen es cero y el unico aire de ese lado es el padding del wrap,
 * bajado a los mismos 22. Todo el bloque superior se comprime ~45px, que es
 * lo que hace falta para que la primera fila de productos asome en pantalla
 * en vez de quedar entera abajo del fold. */
/* Una sola linea: la familia en chico y el nombre al lado.
 *
 * El titulo estuvo un dia en 62px, como portada de la seccion. Es demasiado
 * peso para lo que dice: el nombre de la categoria ya esta en el menu, en la
 * URL y en la pestana, y a ese cuerpo se comia media pantalla del unico
 * contenido que importa, que son los productos. A 22px sigue diciendo donde
 * estas y deja de competir con la grilla.
 *
 * El eyebrow ("CATÁLOGO / POLOS") duro unas horas: al lado de un titulo ya
 * chico se leia como ruido. Queda el nombre pelado. */
.sixs-archive {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.55em;
	margin: 0;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--sixs-hairline);
}

/* Los 30px de fabrica del wrap de Shop Kit, igualados al padding del
 * encabezado. Va con `!important` porque Shop Kit lo imprime inline, por
 * uniqueID y despues de esta hoja. */
body.archive .kwt-products-wrap,
body.post-type-archive-product .kwt-products-wrap {
	padding-top: 0.65rem !important;
}

/* Y el row de contenido arranca mas arriba: 24px de aire antes del eyebrow
 * eran otro renglon perdido. */
body.archive main#inner-wrap > .kb-row-layout-wrap > .kt-row-column-wrap,
body.post-type-archive-product main#inner-wrap > .kb-row-layout-wrap > .kt-row-column-wrap {
	padding-top: 10px !important;
}

/* El eyebrow es la unica pista de jerarquia de la pagina: no hay breadcrumb,
 * asi que en una subcategoria dice el nombre de la madre. */
/* El titulo es un `h1` y no un `h2`: es el nombre de lo que estas mirando,
 * y hasta ahora la pagina no tenia h1 — ni para el lector ni para Google. */
.sixs-archive__title {
	margin: 0;
	color: var(--sixs-ink);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.sixs-archive__meta {
	margin: 0.7rem 0 0;
	color: #6b6b6b;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* La descripcion se limita en ancho: un parrafo a 1324px son ~200 caracteres
 * por renglon y el ojo pierde el hilo al volver. */
.sixs-archive__desc {
	max-width: 62ch;
	margin: 0.9rem 0 0;
	color: #4a4d52;
	font-size: 15px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	/* Compacto a proposito: el encabezado no puede comerse la primera fila de
	 * productos. Con el titulo en 30px y este margen, la primera card ya asoma
	 * arriba del fold. */
	/* En el celular la pantalla es el recurso escaso: el encabezado se
	 * comprime todavia mas para que la primera fila entre en el fold. */
	.sixs-archive {
		margin-bottom: 0;
		padding-bottom: 0.55rem;
	}

	body.archive .kwt-products-wrap,
	body.post-type-archive-product .kwt-products-wrap {
		padding-top: 0.55rem !important;
	}

	.sixs-archive__title {
		font-size: 19px;
	}
}

/* ==========================================================================
   FICHA DE PRODUCTO — radios y mobile (2026-08-21)

   El radio de 4px que la card de la grilla ya tenia en su foto no estaba en
   ningun otro lado, asi que la ficha se leia como de otra plantilla: fotos a
   escuadra al lado de botones que ahora son pills.
   ========================================================================== */

/* La foto grande y las miniaturas, con el MISMO radio que la card de la
 * grilla. El valor sale de `li.product .kwt-image-wrap`, que es el unico
 * lugar donde ya existia. */
.sixs-gallery__slide,
.sixs-gallery__slide img,
.sixs-gallery__thumb {
	border-radius: 4px;
	overflow: hidden;
}

/* El zoom de Shop Kit envuelve la foto en su propio contenedor: si el radio va
 * solo en la imagen, el contenedor le pinta las esquinas por detras. */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image img,
.single-product .kwt-single-gallery-item img {
	border-radius: 4px;
}

@media (max-width: 1024px) {
	/* 🔑 En MOBILE no van las miniaturas.
	 *
	 * Ocupaban una columna al costado de la foto y con eso la foto se
	 * achicaba, pero el bloque seguia midiendo lo mismo de alto: el nombre del
	 * producto y el precio quedaban afuera del primer pantallazo. La galeria
	 * pasa a una sola columna —la foto a lo ancho— y las otras fotos se ven
	 * deslizando, que es el gesto que el celular ya tiene.
	 *
	 * No se apagan desde `gallery.js` sino por CSS: el JS es el mismo en los
	 * dos breakpoints y al rotar el telefono la columna tiene que volver sola. */
	/* ⚠️ `display: block`, no un grid de una columna.
	 *
	 * Con `grid-template-columns: minmax(0,1fr)` la columna computaba **0px** y
	 * la foto quedaba de ancho cero: el grid base tiene DOS columnas y los
	 * hijos estan colocados contra esa plantilla, asi que redefinir solo la
	 * primera deja al slide en una columna implicita sin ancho. Sacando el grid
	 * del medio, el slide es un bloque y ocupa el ancho disponible. */
	.sixs-gallery {
		display: block;
	}

	.sixs-gallery.is-enhanced .sixs-gallery__thumbs {
		display: none;
	}

	.sixs-gallery__slide,
	.sixs-gallery__slide img {
		width: 100%;
	}

	/* La columna de info se alinea con la foto.
	 *
	 * Tenia 20px de padding lateral propio, sumados a los que ya trae el row
	 * del template: el texto arrancaba mas adentro que el borde de la imagen de
	 * arriba y las dos zonas no compartian vertical. El padding lateral pasa a
	 * cero y lo unico que separa del borde de la pantalla es el del row, que es
	 * el mismo que respeta la foto. */
	.single-product .sixs-pdp-info > .kt-inside-inner-col {
		padding: 20px 0 28px;
	}
}

/* ==========================================================================
   FICHA — las tres declaraciones que perdian por especificidad (2026-08-21)

   De la regla base de los talles y de la de los botones solo sobrevivia el
   `border-radius`: lo unico que ni Shop Kit ni Kadence declaran para esos
   elementos. Todo lo demas —borde, padding, ancho, radio del boton solido— lo
   pisaban ellos, con `!important` propio y desde CSS impreso DESPUES de esta
   hoja.

   `!important` solo no alcanza cuando el otro lado tambien lo tiene: ahi
   decide la especificidad. Por eso estas reglas repiten el prefijo largo
   `.single-product .sixs-pdp-info`, que suma dos clases mas.
   ========================================================================== */

/* El recuadro que quedaba alrededor de los talles no era del fieldset: lo
 * dibuja la TABLA de variaciones de WooCommerce, que trae bordes de celda. Con
 * los labels ya como pills se veia como una reja encerrandolos. */
.single-product .sixs-pdp-info table.variations,
.single-product .sixs-pdp-info table.variations tr,
.single-product .sixs-pdp-info table.variations td,
.single-product .sixs-pdp-info table.variations th,
.single-product .sixs-pdp-info .kad_radio_variations {
	border: 0 !important;
	background: transparent !important;
}

/* El eyebrow del drop, sin bold: es contexto, no titulo. En 600 competia con
 * el nombre del producto que tiene justo abajo. */
.single-product .sixs-pdp-info .sixs-eyebrow,
.single-product .sixs-pdp-info a.sixs-eyebrow {
	font-weight: 400 !important;
}

.single-product .sixs-pdp-info .kad_radio_variations {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Los talles dejan de estirarse: en un flex, cuatro items sin ancho propio se
 * reparten la celda entera de la tabla de variaciones y salian de 115px cada
 * uno. Con `flex: 0 0 auto` miden su contenido. */
/* ⚠️ Alto FIJO y ancho minimo mayor que el alto.
 *
 * Antes salian de 46x44: con `border-radius: 999px` una caja casi cuadrada no
 * da un pill, da una elipse — el "S" se veia como un circulo mal cerrado. Un
 * pill necesita ser claramente mas ancho que alto.
 *
 * Los 58px de minimo estan medidos contra el talle mas largo del catalogo
 * ("XL" mide 17px + 28 de padding = 45), asi que los cuatro salen del MISMO
 * ancho y la fila queda pareja. El alto va en `height` y no en padding para
 * que no dependa del cuerpo de la tipografia. */
.single-product .sixs-pdp-info .kad_radio_variations label {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 58px !important;
	height: 38px !important;
	padding: 0 14px !important;
	border: 1px solid #c9c9c9 !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	font-size: 12px !important;
	line-height: 1 !important;
}

.single-product .sixs-pdp-info .kad_radio_variations label:hover {
	border-color: var(--sixs-ink) !important;
}

/* El talle elegido, en negativo: es el unico estado que el comprador tiene que
 * poder ver de un vistazo antes de apretar AGREGAR. */
.single-product .sixs-pdp-info .kad_radio_variations input:checked + label,
.single-product .sixs-pdp-info .kad_radio_variations label.selected {
	border-color: var(--sixs-ink) !important;
	background: var(--sixs-ink) !important;
	color: #ffffff !important;
}

/* El boton solido tambien es pill. El de contorno (`.sixs-buy-now`) ya lo era
 * porque es markup propio y nadie le declara el radio; este lo pisaba Kadence
 * desde su paleta de botones. */
.single-product .sixs-pdp-info .single_add_to_cart_button,
.single-product .sixs-pdp-info button.single_add_to_cart_button {
	border-radius: 999px !important;
}

/* ==========================================================================
   FICHA — segunda pasada (2026-08-22)
   ========================================================================== */

/* 🔴 El salto de la columna derecha al cargar.
 *
 * `gallery.js` es el que decide que se ve una sola foto; hasta que corre, las
 * cuatro estan apiladas y la galeria mide 1011px (medido). Cuando el JS entra,
 * el bloque colapsa de golpe y todo lo de al lado se reacomoda: eso es lo que
 * se veia como "la columna derecha arranca mas arriba y despues baja".
 *
 * Se arregla en CSS, no acelerando el JS: sin `is-enhanced` se muestra SOLO LA
 * PRIMERA foto. Asi el alto del primer render ya es el definitivo y el JS no
 * cambia el layout, solo cambia cual foto esta visible.
 *
 * El `aspect-ratio` reserva el lugar antes de que la imagen cargue: es la otra
 * mitad del salto, la que depende de la red y no del JS. */
.sixs-gallery__main > .sixs-gallery__slide {
	aspect-ratio: 2 / 3;
}

.sixs-gallery:not(.is-enhanced) .sixs-gallery__main > .sixs-gallery__slide:not(:first-child) {
	display: none;
}

/* El primer acordeon no lleva linea arriba: ya la tiene el bloque de
 * beneficios que esta justo encima, y dos hairlines pegadas se leen como un
 * borde grueso. Las de entre items se quedan. */
.sixs-accordions {
	border-top: 0;
}

/* WooCommerce imprime "Hay existencias" al elegir un talle: un cartel que
 * aparece de la nada, empuja el boton hacia abajo y no dice nada que el
 * comprador no sepa —si el talle se pudo elegir, hay stock—.
 *
 * Lo que SI hace falta es la senal inversa, y ya existe: los talles sin stock
 * salen tachados y en gris (`.sixs-talle-agotado`, que marca `talles.js`
 * leyendo el stock que WooCommerce publica en `data-product_variations`). La
 * ausencia de stock se muestra; la presencia se da por sentada. */
.single-product .sixs-pdp-info .woocommerce-variation-availability,
.single-product .sixs-pdp-info .woocommerce-variation-description:empty,
.single-product .sixs-pdp-info p.stock.in-stock {
	display: none !important;
}

/* El calculador de envio dentro del acordeon: el componente es el mismo del
 * carrito, asi que solo hay que sacarle el padding que alla lo separaba de los
 * bordes del panel. */
.sixs-shipcalc__body--pdp {
	padding: 0;
}

.sixs-shipcalc__body--pdp .sixs-shipcalc__input {
	background: #ffffff;
}

@media (max-width: 1024px) {
	/* 🔑 En mobile la galeria es un carrusel que se pasa con el dedo.
	 *
	 * Sin miniaturas hacia falta OTRA forma de llegar a las demas fotos. Se
	 * resuelve con scroll-snap nativo: las cuatro fotos en una fila que
	 * scrollea horizontal y se enclava foto por foto. Sin JS, sin autoplay, y
	 * con el gesto que el celular ya tiene.
	 *
	 * ⚠️ Hay que volver a MOSTRAR todos los slides: `gallery.js` deja visible
	 * solo el activo, que en desktop es correcto y aca dejaria una sola foto
	 * sin nada para deslizar. De ahi el `!important` — pelea contra el estilo
	 * inline que pone el JS. */
	.sixs-gallery__main {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Sangra hasta el borde de la pantalla y devuelve el margen como
		 * padding: asi la foto siguiente se asoma en el borde y se entiende que
		 * hay mas, en vez de que el carrusel parezca terminar ahi. */
		margin: 0 calc(-1 * var(--sixs-gutter));
		padding: 0 var(--sixs-gutter);
	}

	.sixs-gallery__main::-webkit-scrollbar {
		display: none;
	}

	.sixs-gallery:not(.is-enhanced) .sixs-gallery__main > .sixs-gallery__slide:not(:first-child),
	.sixs-gallery.is-enhanced .sixs-gallery__main > .sixs-gallery__slide {
		display: block !important;
	}

	.sixs-gallery__main > .sixs-gallery__slide {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	/* Menos aire entre la foto y lo que sigue: eran 20px del padding de la
	 * columna de info mas el margen propio de la galeria. */
	.sixs-gallery {
		margin-bottom: 0;
	}

	.single-product .sixs-pdp-info > .kt-inside-inner-col {
		padding: 8px 0 24px;
	}

	/* Y menos aire entre el ultimo acordeon y PRODUCTOS RELACIONADOS: el
	 * acordeon cierra con su hairline, asi que el bloque siguiente no necesita
	 * ademas el margen de seccion completo. */
	.single-product .sixs-accordions {
		margin-bottom: 0;
	}

	.single-product .related.products,
	.single-product .kwt-related-products {
		margin-top: 1.4rem;
	}
}

/* ------------------------------------------------------------------
 * PRODUCTOS RELACIONADOS — misma geometria que la grilla de categoria
 *
 * La card de relacionados y la de la archive son EL MISMO template (529):
 * se comparo el HTML de las dos y las clases son identicas salvo el post_id
 * y las categorias. Lo unico distinto era el ancho, y por eso "parecia otro
 * template". Medido con Chrome headless a 390px de viewport:
 *
 *                    margen   gap    card    badge
 *   archive            20      18     166    entra, sobran 18px
 *   relacionados       26      24     157    DESBORDA 18px
 *
 * Dos causas sumadas, no una: 6px mas de padding por lado y 6px mas de gap.
 * Entre las dos se comian 9px de card por columna, y con 157px el badge se
 * cortaba y la transferencia rompia en un renglon mas.
 *
 * Los 10px de padding no son un numero de gusto: el `.kt-row-column-wrap`
 * arranca en x=10 y traia 16px de padding, o sea contenido en x=26. Con 10
 * queda en 20, el de la archive. Y con gap 18 la card da (370-20-18)/2 = 166,
 * el ancho exacto de la archive.
 *
 * NO se toca la tipografia del precio: ver el bloque de `min-height: 44px`
 * mas arriba. La transferencia sigue pudiendo usar dos renglones cuando el
 * numero es largo, igual que en la archive — lo que se arregla aca es que
 * relacionados rompia ANTES que la archive por ser mas angosta.
 *
 * El `!important` no es pereza: Kadence imprime padding y gap en un <style>
 * inline DENTRO del body, con clases hasheadas (`kwt-related-_d8efd5-ad`,
 * `kb-row-layout-id306_6d8d0b-61`). Ganarles por especificidad obligaria a
 * repetir esos hashes, que cambian cada vez que se guarda el bloque. El
 * `:has()` apunta a la estructura, que no cambia.
 *
 * Solo mobile: es donde se reporto y donde se midio. En desktop la card
 * tiene aire de sobra en los dos lados.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.kwt-related-wrap .related.products ul.products {
		column-gap: 18px !important;
		row-gap: 18px !important;
	}

	.kt-row-column-wrap:has(> .wp-block-kadence-column > .kt-inside-inner-col > .kwt-related-wrap) {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}