/*
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.29.2
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 CTA es UNO solo por row y vive fuera del slider, no adentro de
 * cada slide: adentro viajaria con la transicion. Se ancla contra la
 * columna, que asi queda quieta mientras las imagenes rotan. */
.sixs-hero-col > .kt-inside-inner-col {
	position: relative;
}

.sixs-hero-col > .kt-inside-inner-col > .sixs-hero-cta {
	position: absolute;
	left: clamp(20px, 3.4vw, 52px);
	bottom: clamp(20px, 3.4vw, 52px);
	z-index: 3;
	margin: 0 !important;
}

.sixs-hero-cta .kb-button {
	display: inline-flex !important;
	align-items: center;
	gap: 0.85em;
	border-radius: 999px !important;
	padding: 0.95em 1.7em !important;
	font-weight: 500;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.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);
}

@media (max-width: 767px) {
	.sixs-hero-cta .kb-button {
		padding: 0.85em 1.4em !important;
	}
}

/* ------------------------------------------------------------------
 * 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: #101215 !important;
	border-bottom: 0 !important;
}

/* Texto blanco. Los iconos del ticker no hay que tocarlos: usan
 * currentColor y siguen al texto solos — para eso se habian hecho con
 * mask-image en vez de background-image.
 *
 * ⚠️ 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: #fff !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: #101215;
	/* 🔑 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);
	font-size: 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;
}

/* 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;
}

@media (max-width: 767px) {
	a.sixs-section-cta {
		margin-left: 0;
		margin-top: 0.6em;
		font-size: 11px;
		padding: 0.5em 0.9em;
	}
}

/* ------------------------------------------------------------------
 * 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%);
	}
}

.sixs-ticker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 1.5rem;
	white-space: nowrap;
	font-size: 11px !important;
}

/* 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 {
	--sixs-topbar-h: 30px;
}

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

.sixs-ticker::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background-color: currentColor;
	-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");
}

@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;
	}
}

/* ------------------------------------------------------------------
 * 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.
 * ------------------------------------------------------------------ */

/* El badge se apoya sobre el bloque de botones, midiendolo: el alto lo
 * publica assets/js/header.js en --sixs-hero-cta-h. Estuvo con un offset
 * fijo calculado sobre un CTA de UNA fila, y en mobile —donde los dos
 * botones se apilan y el bloque pasa a 98px— el badge quedaba adentro
 * del CTA, tapado por el boton de arriba.
 *
 * El fallback de 48px es el alto de un boton solo: sin JS queda como
 * estaba antes en desktop, que es donde ese numero funcionaba. */
.sixs-hero-live {
	position: absolute;
	left: clamp(20px, 3.4vw, 52px);
	bottom: calc(clamp(20px, 3.4vw, 52px) + var(--sixs-hero-cta-h, 48px) + 14px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	text-decoration: none;
	transition: opacity 0.18s ease;
}

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

.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 {
	--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.
 * ------------------------------------------------------------------ */

.sixs-verall {
	margin-top: 1.6rem !important;
	text-align: center;
}

.sixs-verall .kb-button {
	display: inline-flex !important;
	align-items: center;
	gap: 0.7em;
	min-width: 240px;
	justify-content: center;
	padding: 1em 2.2em !important;
	border-radius: 999px !important;
	background: var(--sixs-ink) !important;
	color: #ffffff !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-hover) !important;
	color: #ffffff !important;
}

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

@media (max-width: 767px) {
	.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;
}

.kad_radio_variations label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	margin: 0;
	padding: 0.75em 1.1em;
	border: 1px solid #c9c9c9;
	border-radius: 6px;
	background: #ffffff;
	color: var(--sixs-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.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;
}

.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;
	border-radius: 0;
	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. */

.sixs-assurance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
	padding: 15px 18px;
	background: var(--sixs-ink, #101215);
	color: var(--sixs-paper, #efedea);
}

/* La divisoria es un pseudo-elemento de 28px y no un `border-left`:
 * el borde tomaria el alto completo de la celda y el handoff la quiere
 * mas corta que el texto. */
.sixs-assurance__item {
	position: relative;
}

.sixs-assurance__item + .sixs-assurance__item {
	padding-left: 10px;
}

.sixs-assurance__item + .sixs-assurance__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -5px;
	width: 1px;
	height: 28px;
	background: rgba(239, 237, 234, 0.25);
	transform: translateY(-50%);
}

.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 {
	font-weight: 700;
}

.sixs-assurance__meta {
	color: rgba(239, 237, 234, 0.6);
	font-weight: 400;
}

@media (max-width: 420px) {
	/* Tres columnas en un celular angosto parten cada titulo en dos
	 * renglones; apiladas se leen de corrido. */
	.sixs-assurance {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 4px 16px;
	}

	.sixs-assurance__item {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 0;
	}

	.sixs-assurance__item + .sixs-assurance__item {
		padding-left: 0;
		border-top: 1px solid rgba(239, 237, 234, 0.25);
	}

	.sixs-assurance__item + .sixs-assurance__item::before {
		content: none;
	}
}

/* --- 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;
}

.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;
}

.header-navigation .header-menu-container > ul > li > a {
	transition: opacity 0.18s ease;
}

.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 UNA sola cosa: la hairline de
 * arriba, para que cuelgue de la misma linea que el mega menu propio. Ni
 * fondo ni padding: el panel lo armo el cliente con un kadence_element y
 * pisarle esas dos cosas 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 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;
	border: 1px solid #ffffff !important;
	color: #ffffff !important;
}

.sixs-hero-cta .kb-button.sixs-hero-cta-alt:hover {
	background: #ffffff !important;
	color: var(--sixs-ink) !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 es de la lista, no del panel entero */
}

#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;
}

/* La cadena de wrappers hasta la lista tiene que propagar la altura, o el
 * `flex:1` de la lista no tiene contra que crecer. `min-height:0` es lo que
 * habilita que un item flex se encoja por debajo de su contenido y scrollee. */
#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 {
	padding: 0 1.35em 1.35em;
}

#cart-drawer .woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* La lista sangra hacia el padding derecho del panel el ancho exacto de su
	 * propia barra de scroll, que `cart.js` mide y publica en `--sixs-sb`. Sin
	 * eso el scrollbar se come 15px del ancho util de la lista y los totales de
	 * linea terminan 15px a la izquierda del subtotal, que no scrollea: la
	 * columna de precios queda quebrada. Se mide en vez de hardcodear 15px
	 * porque en macOS los scrollbars son overlay y no ocupan ancho: ahi el
	 * valor es 0 y esto no hace nada. */
	margin: 0 calc(-1 * var(--sixs-sb, 0px)) 0 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. Con la barra de envio, la tira de accesorios y el bloque
	 * de cuotas esa cuenta ya no cierra: la lista quedaba mas alta que el
	 * espacio libre y tapaba el boton. */
	max-height: none !important;
}

#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 --- */

.sixs-ship {
	padding: 0.9em 0 1em;
	border-bottom: 1px solid #ececec;
}

.sixs-ship__text {
	margin: 0 0 0.6em;
	font-size: 0.82rem;
	line-height: 1.35;
}

.sixs-ship__text strong {
	font-weight: 700;
}

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

.sixs-ship__track {
	height: 3px;
	background: #e8e8e8;
	border-radius: 999px;
	overflow: hidden;
}

.sixs-ship__fill {
	display: block;
	height: 100%;
	background: var(--sixs-ink);
	transition: width 0.35s ease;
}

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

/* --- 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;
}

#cart-drawer .woocommerce-mini-cart .mini_cart_item dl.variation {
	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" --- */

.sixs-upsell {
	border-top: 1px solid #ececec;
	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;
}

.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.72em 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;
	padding: 8px;
	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;
		padding: 6px;
	}

	.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) {
	body.mobile-transparent-header #mobile-header::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 190px;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(255, 255, 255, 0.72) 38%,
			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;
	}
}