/*
Theme Name: Snilkovia
Theme URI: https://snilkovia.com
Author: Snilkovia
Description: Tema de Snilkovia para WooCommerce. Réplica fiel del tema Shopify "Snilkovia V12 premium" (Dawn 15.2). Valores tomados de los estilos COMPUTADOS del sitio real, no a ojo.
Version: 2026.09.03.1402
Requires at least: 6.0
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: snilkovia
*/

/* ─── Tokens EXACTOS medidos en snilkovia.com ─────────────────────────────── */
:root {
  --snk-turquesa: #33cccc;          /* rgb(51,204,204) — barra de anuncio y botones base */
  --snk-turquesa-claro: #4fd5e1;
  --snk-negro: #0b0b0b;
  --snk-negro-profundo: #050d13;
  --snk-texto: rgba(0, 0, 0, .75);  /* color de texto real del body */
  --snk-fondo: #ffffff;             /* el body del Shopify es BLANCO */
  --snk-borde: rgba(0, 0, 0, .08);
  --snk-font: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --snk-ancho: 1200px;

  /* Las secciones portadas de Shopify usan estas variables de Dawn.
     El original define --font-heading-family: Assistant, sans-serif (medido en snilkovia.com).
     Sin esto, los títulos caen a un fallback distinto y el texto rompe en más líneas. */
  --font-heading-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading-weight: 700;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--snk-font);
  font-size: 16px;                  /* medido en snilkovia.com: 16px */
  line-height: 1.8;                 /* medido: 28.8px = 1.8 */
  color: var(--snk-texto);
  background: var(--snk-fondo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.snk-wrap { max-width: var(--snk-ancho); margin: 0 auto; padding: 0 18px; }

/* ─── Barra de anuncio (medida: bg #33cccc, texto blanco) ─────────────────── */
.snk-announcement {
  background: var(--snk-turquesa);
  color: #fff;
  text-align: center;
  padding: 10.5px 16px;
  font-size: 13px;                  /* medido: 13px / 400 / ls 1px */
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* ─── Header: UNA fila en desktop (menú izq · logo centrado · iconos der) ─── */
.snk-header { background: #fff; border-bottom: 1px solid var(--snk-borde); position: sticky; top: 0; z-index: 60; }
.snk-header-inner {
  max-width: var(--snk-ancho); margin: 0 auto; padding: 12px 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.snk-logo { justify-self: center; grid-column: 2; }
.snk-logo img { width: 170px; height: auto; }
.snk-header-actions { justify-self: end; grid-column: 3; display: flex; align-items: center; gap: 4px; }
.snk-menu-toggle { justify-self: start; grid-column: 1; }
.snk-icon-btn {
  background: none; border: 0; padding: 8px; cursor: pointer; color: #121212;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.snk-icon-btn .icon { width: 22px; height: 22px; }
.snk-icon-btn .icon-cart-empty, .snk-icon-btn .icon-cart { width: 26px; height: 26px; }
/* La pelota va a 22px como la lupa: el carrito viejo era un glifo relleno de 26 y pesaba
   más que su vecina. Dibujada con trazo, al mismo grosor. */
.snk-icon-btn .icon-pelota { width: 22px; height: 22px; }
.snk-cart-link { color: #121212; transition: color .25s ease; }
.snk-cart-link.is-lleno { color: var(--snk-turquesa); }
.snk-cart-count {
  position: absolute; top: 2px; right: 0;
  background: var(--snk-turquesa-claro, #4fd5e1); color: #050d13;
  border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
/* en DESKTOP el menú va DENTRO de la primera columna del header (una sola fila, como el original) */
@media (min-width: 901px) {
  .snk-header-inner { position: relative; }
  .snk-nav { grid-column: 1; grid-row: 1; justify-self: start; padding: 0; margin: 0; }
}

/* ─── Nav con MEGA MENÚ (misma estructura que el Shopify) ─── */
.snk-nav {
  max-width: var(--snk-ancho); margin: 0 auto; padding: 0 18px 10px;
  display: flex; gap: 26px; justify-content: center;
}
.snk-nav-item { position: relative; }
.snk-nav-top {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: #121212; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.snk-nav-top:hover { color: var(--snk-turquesa); }
.snk-caret { transition: transform .15s ease; }
.snk-has-mega.is-open .snk-caret { transform: rotate(180deg); }

/* panel del mega menú */
.snk-mega {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--snk-borde); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12); padding: 22px 26px; z-index: 70;
  opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility .14s ease;
}
.snk-has-mega:hover .snk-mega, .snk-has-mega.is-open .snk-mega { opacity: 1; visibility: visible; }
.snk-mega-inner { display: flex; gap: 40px; align-items: flex-start; }
.snk-mega-col { display: flex; flex-direction: column; gap: 9px; min-width: 118px; }
.snk-mega-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--snk-turquesa); margin-bottom: 3px;
}
.snk-mega-col a { font-size: 14px; color: #121212; white-space: nowrap; }
.snk-mega-col a:hover { color: var(--snk-turquesa); }
.snk-mega-col--cta { justify-content: center; border-left: 1px solid var(--snk-borde); padding-left: 34px; }
.snk-mega-nota { font-size: 12.5px; line-height: 1.45; color: #5b6b6f; margin: 0 0 12px; max-width: 190px; }
.snk-mega-nota strong { color: #121212; font-weight: 800; }
/* En el tema oscuro el #121212 de arriba queda NEGRO SOBRE NEGRO: medido, 1,01:1, o sea
   invisible. Y no es un detalle: el <strong> es justo lo que resalta "$6.000" y "40 días
   hábiles", los dos números por los que existe el panel. */
body.snk-oscuro .snk-mega-nota strong { color: #eafafb; }
/* El título de marca del mega de encargue es un link (lleva a la marca entera), el de stock es
   un span. Hereda el look del título para que las dos columnas se lean igual. */
a.snk-mega-title--link { color: var(--snk-turquesa); text-decoration: none; }
a.snk-mega-title--link:hover { text-decoration: underline; }

/* Los paneles se anclan al NAV, no a cada entrada.
   Con una sola entrada daba igual. Con dos, el panel de STOCK centrado bajo su propio botón
   se salía 29px por la izquierda de la pantalla entre 900 y 1024px de ancho (medido en el
   staging el 29/08). Anclados al nav, que ya está centrado en la página, los dos paneles
   quedan centrados y entran siempre, sea cual sea el ancho.
   Solo en escritorio: abajo de 900px el mega se vuelve una lista adentro de su item y ahí el
   posicionamiento absoluto no corre. */
@media (min-width: 901px) {
  .snk-nav { position: relative; }
  .snk-nav-item { position: static; }
}
.snk-mega-vertodo {
  background: var(--snk-turquesa); color: #fff !important; border-radius: 999px;
  padding: 12px 22px; font-size: 13px; font-weight: 800; white-space: nowrap; text-align: center;
}

/* móvil: el nav se despliega con la hamburguesa y el mega se vuelve lista */
@media (max-width: 900px) {
  .snk-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 18px 14px; border-top: 1px solid var(--snk-borde); }
  .snk-nav.is-open { display: flex; }
  .snk-nav-item { border-bottom: 1px solid var(--snk-borde); }
  .snk-nav-top { width: 100%; justify-content: space-between; padding: 13px 0; font-size: 15px; }
  .snk-mega {
    position: static; transform: none; opacity: 1; visibility: visible; display: none;
    border: 0; box-shadow: none; padding: 0 0 12px; background: transparent;
  }
  .snk-has-mega.is-open .snk-mega { display: block; }
  .snk-mega-inner { flex-direction: column; gap: 16px; }
  .snk-mega-col--cta { border-left: 0; padding-left: 0; }
  .snk-mega-vertodo { width: 100%; }
}
@media (min-width: 901px) { .snk-menu-toggle { display: none; } }

/* ─── Footer: como el original (BLANCO, solo el logo centrado + copyright) ─── */
.snk-footer { background: #fff; color: rgba(0,0,0,.75); padding: 71px 0 57px;  /* el footer del Shopify mide 276px de alto; con 44/30 quedaba en 222 */ margin-top: 56px; border-top: 1px solid var(--snk-borde); text-align: center; }
.snk-footer-logo { display: inline-block; margin-bottom: 14px; }
.snk-footer-logo img { width: 100px; height: auto; margin: 0 auto; }
.snk-copy { font-size: 13px; color: rgba(0,0,0,.6); }

/* ─── WooCommerce: grilla de productos ────────────────────────────────────── */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px;
  list-style: none; padding: 0; margin: 26px 0;
}
/* WooCommerce mete ::before/::after de clearfix (viene de layout float).
   En CSS Grid esos pseudo-elementos OCUPAN UNA CELDA y dejan un hueco. */
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; }
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 749px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } }
.woocommerce ul.products li.product {
  margin: 0 !important; width: auto !important; float: none !important;
  text-align: left;               /* medido: el original alinea a la IZQUIERDA */
}
.woocommerce ul.products li.product a img {
  margin: 0 0 12px; border-radius: 6px; background: #fff;
  aspect-ratio: 1 / 1; object-fit: contain;   /* FOTOS COMPLETAS, no cortadas */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px; font-weight: 400; color: #000; padding: 0 0 4px; line-height: 1.3;
}
.woocommerce ul.products li.product .price { color: #000; font-weight: 400; font-size: 16px; }
.woocommerce ul.products li.product .price del { font-size: 13px; color: rgba(0,0,0,.75); opacity: 1; font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: #000; font-weight: 400; }
.woocommerce span.onsale {
  position: absolute; top: 10px; right: 10px; left: auto;
  background: var(--snk-turquesa-claro, #4fd5e1); color: #050d13;
  border-radius: 40px; padding: 5px 14px;
  font-size: 12px; font-weight: 400;
  margin: 0; z-index: 2; line-height: 1.5; min-height: 0; min-width: 0;
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: #666; font-size: 14px; }

/* ─── Botones (base Shopify: turquesa, texto blanco) ──────────────────────── */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.wc-block-components-button {
  background: var(--snk-turquesa) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 13px 26px !important; font-size: 15px !important; font-weight: 700 !important;
  line-height: 1.3 !important; transition: opacity .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { opacity: .88; }

/* ─── Ficha de producto ───────────────────────────────────────────────────── */
.woocommerce div.product .product_title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; color: #121212; line-height: 1.2; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: #121212; font-size: 26px; font-weight: 700; }
.woocommerce div.product p.price del { opacity: .5; font-weight: 400; font-size: 20px; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product div.images img { border-radius: 8px; background: #fff; object-fit: contain; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: #121212; font-weight: 600; }

/* Talles como botones (swatches) */
.snk-talles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.snk-talle {
  border: 1.5px solid rgba(0,0,0,.18); background: #fff; color: #121212;
  border-radius: 8px; padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.snk-talle:hover { border-color: #121212; }
.snk-talle.is-active { border-color: var(--snk-turquesa); color: var(--snk-turquesa); border-width: 2px; }
.snk-talle.is-out {
  opacity: 1; background: #f0f0f0; border-color: #e2e2e2; color: #b8b8b8;
  cursor: not-allowed; position: relative; overflow: hidden; text-decoration: none;
}
.snk-talle.is-out::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%;
  height: 1.5px; background: #b8b8b8; transform: rotate(-18deg);
}

/* Badges de confianza en la ficha */
.snk-trust { display: flex; gap: 18px; flex-wrap: wrap; color: #555; font-size: 14px; margin: 16px 0; }
.snk-trust span { display: inline-flex; align-items: center; gap: 6px; }

/* ─── Carrito / checkout ──────────────────────────────────────────────────── */
.woocommerce table.shop_table { border-radius: 8px; }
.woocommerce-cart table.cart img { width: 78px; border-radius: 6px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  padding: 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,.18); font-size: 15px;
}
.woocommerce-message, .woocommerce-info { border-top-color: var(--snk-turquesa); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--snk-turquesa); }

/* ─── Las secciones custom del home van de borde a borde ──────────────────── */
.snk-seccion-full { width: 100%; }

/* ─── Home: contenedor de los productos (donde iba la featured_collection) ─── */
.snk-home-productos { padding: 8px 18px 20px; }
.snk-home-vertodo { text-align: center; margin: 8px 0 0; }
.snk-btn-vertodo {
  display: inline-block; background: var(--snk-turquesa-claro, #4fd5e1); color: #050d13;
  border-radius: 999px; padding: 14px 34px; font-weight: 700; font-size: 15px;
}
.snk-btn-vertodo:hover { opacity: .9; }

/* ══════════════════════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO — valores medidos en snilkovia.com (no a ojo)
   ═══════════════════════════════════════════════════════════════════════ */

/* FOTO COMPLETA, CON LA PROPORCIÓN DE CADA UNA

   Antes acá se forzaba 1005/663 a TODAS las fotos. Funciona para los 52 botines, que son
   justo de esa proporción, pero destroza las otras 15: los accesorios son verticales
   (1080x1350) y con 'cover' se les recortaba más de la mitad — los guantes térmicos
   perdían el 63% y quedaban un parche negro irreconocible.

   Shopify usa el ratio natural de cada foto y deja la grilla despareja a propósito. Acá
   se hace igual: functions.php emite el aspect-ratio real de cada imagen en una variable,
   y el 1005/663 queda solo de respaldo para cuando no se conozca. */
.woocommerce ul.products li.product a img {
  aspect-ratio: var(--snk-ratio, 1005 / 663);
  object-fit: cover;
  background: #000;             /* igual que .card__inner del original */
  border-radius: 0;
  margin-bottom: 10px;
  width: 100%;
}

/* Badge OFERTA (arriba a la derecha, turquesa) */
.woocommerce ul.products li.product { position: relative; }
.woocommerce span.onsale {
  position: absolute; top: 10px; right: 10px; left: auto;
  background: var(--snk-turquesa-claro, #4fd5e1); color: #050d13;
  border-radius: 40px; padding: 5px 14px;
  font-size: 12px; font-weight: 400;
  margin: 0; z-index: 2; line-height: 1.5; min-height: 0; min-width: 0;
}

/* CHIPS DE TALLE en la tarjeta (medido: bg #33cccc, radius 5px, 6px 14px, 13px) */
.snk-card-talles {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin: 10px 0 12px;
}
.snk-card-talle {
  background: var(--snk-turquesa-claro, #4fd5e1); color: #050d13;
  border-radius: 5px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
/* Encargue: el rango en un renglón en vez de los 13 chips. Ver el porqué en
   functions.php, donde se decide cuál de los dos se dibuja. */
.snk-card-talles--rango {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: .72;
}

.snk-card-talle.is-out {        /* agotado: gris + barra diagonal, se nota de una */
  background: #f0f0f0; color: #b8b8b8;
  position: relative; overflow: hidden;
}
.snk-card-talle.is-out::after {  /* la barra tachada */
  content: ""; position: absolute; left: -12%; right: -12%; top: 50%;
  height: 1.5px; background: #b8b8b8; transform: rotate(-18deg); transform-origin: center;
}

/* Botón de la tarjeta */
.snk-card-btn {
  display: inline-block; background: #121212; color: #fff !important;
  border-radius: 6px; padding: 12px 26px;
  font-size: 14px; font-weight: 700; margin-top: 2px;
}
.snk-card-btn:hover { opacity: .88; }


/* ══ FICHA DE PRODUCTO: CSS ORIGINAL del Shopify (portado literal) ══ */

/* Píldora de valoración */
.snilko-rating-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:9999px;
  border:1px solid rgba(79,213,225,.38);
  background:rgba(51,204,204,.1);
  line-height:1;
  margin-top:10px;
}
.snilko-rating-pill__stars{
  font-size:13px;
  letter-spacing:1px;
  color:#4FD5E1;
  line-height:1;
}
.snilko-rating-pill__score{
  font-family:var(--font-heading-family,'Montserrat',Arial,sans-serif);
  font-weight:900;
  font-size:13.5px;
  color:#111;
  white-space:nowrap;
}
.snilko-rating-pill__dot{ opacity:.55; }
.snilko-rating-pill__claim{
  font-size:13px;
  opacity:.85;
  white-space:nowrap;
}

/* Barra sticky 'Comprar ahora' */
:root{ --snilko-accent:#33CCCC; }

  .snilko-stickybuy{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,.10);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .snilko-stickybuy__inner{
    max-width: 980px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }

  .snilko-stickybuy__left{
    min-width: 0;
  }

  .snilko-stickybuy__title{
    font-family: var(--font-heading-family, Arial, sans-serif);
    font-weight: 900;
    font-size: 13.5px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48vw;
  }

  .snilko-stickybuy__price{
    margin-top: 3px;
    opacity: .8;
    font-size: 13px;
    font-weight: 900;
  }

  .snilko-stickybuy__btn{
    background: var(--snilko-accent);
    color:#fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 16px;
    font-weight: 900;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(51,204,204,.18);
    white-space: nowrap;
  }

  /* Solo móvil */
  @media (min-width: 750px){
    .snilko-stickybuy{ display:none !important; }
  }

/* Badge OFERTA en la ficha (debajo del precio, como en Shopify) */
.snk-oferta-ficha {
  display: inline-block; background: var(--snk-turquesa-claro, #4fd5e1); color: #050d13;
  border-radius: 6px; padding: 5px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; margin: 0 0 12px;
}
/* La galería de la ficha: foto completa, sin recorte */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  aspect-ratio: var(--snk-ratio, 1005 / 663); object-fit: contain; background: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   IMÁGENES DE PRODUCTO: grandes y completas, móvil y escritorio
   ═══════════════════════════════════════════════════════════════════════ */
/* Galería de la ficha: grande, sin recorte, con el ratio real de las fotos */
.woocommerce div.product div.images { margin-bottom: 22px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100%; height: auto;
  aspect-ratio: var(--snk-ratio, 1005 / 663);
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}
/* miniaturas de la galería */
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 0; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; flex: 0 0 calc(25% - 6px); }
.woocommerce div.product div.images .flex-control-thumbs img {
  aspect-ratio: var(--snk-ratio, 1005 / 663); object-fit: contain; background: #fff;
  border: 1px solid var(--snk-borde); border-radius: 8px; opacity: 1;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs .flex-active { border-color: var(--snk-turquesa); }

/* En ESCRITORIO: galería y datos lado a lado, foto grande */
@media (min-width: 990px) {
  /* La proporción es la del Shopify: 65% para la foto y 35% para la info. Estaba en
     56/40, o sea que la columna de texto se comía espacio y la foto salía más chica que
     en el original (652px contra los 715 de allá). Medido en las dos webs. */
  .woocommerce div.product div.images.woocommerce-product-gallery { width: 63%; float: left; margin-right: 3%; }
  .woocommerce div.product div.summary { width: 34%; float: right; margin-bottom: 0; }
}
/* En MÓVIL: foto a todo el ancho */
@media (max-width: 989px) {
  .woocommerce div.product div.images.woocommerce-product-gallery,
  .woocommerce div.product div.summary { width: 100%; float: none; margin: 0 0 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARRUSEL de "Stock recién llegado" (como el slider del Shopify:
   3 por fila en desktop con "peek" del siguiente, flechas y contador)
   ═══════════════════════════════════════════════════════════════════════ */
.snk-carrusel { position: relative; }
.snk-carrusel-track {
  display: flex !important; grid-template-columns: none !important;
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 0 14px; margin: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.snk-carrusel-track::-webkit-scrollbar { display: none; }
.snk-carrusel-track > li.product {
  flex: 0 0 calc((100% - 36px) / 3 - 22px);   /* 3 por fila + peek del siguiente */
  scroll-snap-align: start;
}
@media (max-width: 989px) { .snk-carrusel-track > li.product { flex: 0 0 calc(50% - 26px); } }
@media (max-width: 640px) { .snk-carrusel-track > li.product { flex: 0 0 78%; } }

.snk-carrusel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.snk-car-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--snk-borde); background: #fff; color: #121212;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.snk-car-btn:hover { border-color: var(--snk-turquesa); color: var(--snk-turquesa); }
.snk-car-btn[disabled] { opacity: .35; cursor: default; }
.snk-car-count { font-size: 14px; color: rgba(0,0,0,.7); min-width: 74px; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   FILTRO POR TALLE (colecciones)
   ═══════════════════════════════════════════════════════════════════════ */
.snk-filtros { margin: 6px 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--snk-borde); }
.snk-filtros-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.snk-filtros-label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #121212; }
.snk-filtros-limpiar { font-size: 13px; color: var(--snk-turquesa); text-decoration: underline; }
.snk-filtros-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.snk-filtro-chip {
  border: 1.5px solid rgba(0,0,0,.16); background: #fff; color: #121212;
  border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.snk-filtro-chip:hover { border-color: #121212; }
.snk-filtro-chip.is-active { background: var(--snk-turquesa); border-color: var(--snk-turquesa); color: #fff; }
.snk-filtro-n { font-weight: 400; opacity: .6; font-size: 12px; }
.snk-filtro-chip.is-active .snk-filtro-n { opacity: .85; }
@media (max-width: 600px) { .snk-filtros-chips { gap: 6px; } .snk-filtro-chip { padding: 7px 11px; font-size: 13px; } }

/* ══════════════════════════════════════════════════════════════════════════
   AUDITORÍA FINAL — diferencias medidas contra snilkovia.com
   ═══════════════════════════════════════════════════════════════════════ */

/* Dawn aplica letter-spacing a TODO el body (medido: 0.6px). Ojo: el original
   usa .06rem con html a 62.5%; en WP el html está a 16px, así que va en px. */
body { letter-spacing: .6px; }

/* Títulos: el original usa line-height 1.3 y negro pleno (en Woo heredaban el 1.8
   del body y el gris del texto base) */
h1, h2, h3, h4 { line-height: 1.3; color: #000; }

/* Título de la tarjeta: 13px / 400 / sin márgenes de h2 (medido).
   Sin el prefijo .woocommerce para que aplique también al carrusel de la home. */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important; line-height: 1.3 !important; font-weight: 400 !important;
  color: #000; margin: 0 !important; padding: 0 0 4px !important;
}
@media (max-width: 749px) {
  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 12px !important; }
}

/* La franja de confianza NO muestra separadores en ningún ancho (medido: display:none
   en 375 y en 1440). Con ellos la franja crecía 62px en móvil. */
.snk-trust-bar__divider { display: none !important; }

/* El carrusel en móvil muestra 2 tarjetas + asomo de la tercera (medido: 154px, gap 4px) */
@media (max-width: 749px) {
  .snk-carrusel-track { gap: 4px; padding-left: 15px; padding-right: 15px; }
  .snk-carrusel-track > li.product { flex: 0 0 154px; max-width: 154px; }
}

/* Instagram en el menú (el original lo tiene al final del drawer móvil) */
.snk-nav-social { display: none; }
@media (max-width: 900px) {
  .snk-nav-social { display: flex; padding: 14px 0 4px; }
  .snk-nav-social a { color: #121212; display: inline-flex; }
  .snk-nav-social a:hover { color: var(--snk-turquesa); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MENÚ MÓVIL: panel deslizante (como el drawer de Dawn), no acordeón
   ═══════════════════════════════════════════════════════════════════════ */
.snk-nav-overlay { display: none; }
.snk-nav-cerrar { display: none; }

@media (max-width: 900px) {
  .snk-nav-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 95; opacity: 0; transition: opacity .25s ease;
  }
  .snk-nav-overlay[hidden] { display: none; }
  .snk-nav-overlay.is-visible { opacity: 1; }

  .snk-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 360px);
    max-width: none; height: 100%; margin: 0; padding: 62px 20px 24px;
    background: #fff; z-index: 100; overflow-y: auto;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0;
    /* El .snk-nav de escritorio trae justify-content:center. Acá, con flex-direction
       column, eso centra TODO en vertical: el drawer arrancaba con 420px en blanco arriba
       y los ítems empujados al medio, o sea que parecía un panel vacío. */
    justify-content: flex-start;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 2px 0 24px rgba(0,0,0,.14); border-top: 0;
  }
  .snk-nav.is-open { transform: translateX(0); }
  .snk-nav-cerrar {
    display: inline-flex; position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; align-items: center; justify-content: center;
    background: none; border: 0; color: #121212; cursor: pointer;
  }
  body.snk-menu-abierto { overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BUSCADOR: modal con resultados en vivo (el original abre un modal, no navega)
   ═══════════════════════════════════════════════════════════════════════ */
.snk-buscador { position: fixed; inset: 0; z-index: 120; }
.snk-buscador[hidden] { display: none; }
.snk-buscador-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.snk-buscador-caja {
  position: relative; background: #fff; max-width: 720px; margin: 0 auto;
  border-radius: 0 0 12px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 18px 20px 10px;
}
.snk-buscador-form { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--snk-borde); padding-bottom: 12px; }
.snk-buscador-lupa { color: #666; flex: none; }
.snk-buscador-form input[type="search"] {
  flex: 1; border: 0; outline: none; font-family: inherit; font-size: 17px; color: #121212; background: transparent; padding: 6px 0;
}
.snk-buscador-cerrar { background: none; border: 0; cursor: pointer; color: #666; padding: 6px; display: inline-flex; }
.snk-buscador-cerrar:hover { color: #121212; }
.snk-buscador-resultados { max-height: min(60vh, 420px); overflow-y: auto; padding: 6px 0 12px; }
.snk-bres {
  display: flex; align-items: center; gap: 12px; padding: 10px 4px;
  border-bottom: 1px solid var(--snk-borde); color: #121212;
}
.snk-bres:last-child { border-bottom: 0; }
.snk-bres:hover { background: #fafafa; }
.snk-bres img { width: 68px; height: 45px; object-fit: contain; background: #fff; border-radius: 6px; flex: none; }
.snk-bres-info { min-width: 0; }
/* Los dos son <span>: sin display block el precio se pegaba al final del título en la
   misma línea, y el margin-top no hacía nada. */
.snk-bres-titulo { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.snk-bres-precio { display: block; font-size: 14px; color: #000; margin-top: 2px; }
.snk-bres-precio del { color: rgba(0, 0, 0, .5); margin-right: 6px; }
.snk-bres-precio ins { text-decoration: none; font-weight: 700; }
.snk-buscador-vacio, .snk-buscador-cargando { padding: 16px 4px; color: #666; font-size: 14px; }
@media (max-width: 600px) { .snk-buscador-caja { border-radius: 0; padding: 14px 16px 8px; } }

/* ──────────────────────────────────────────────────────────────────────────
   ÁREA TÁCTIL EN MÓVIL
   Los iconos del header miden 38px y el de Instagram 20px. Apple y Google piden
   44px mínimo para tocar cómodo con el dedo. En vez de agrandar los botones —que
   movería el header y cambiaría el diseño— extendemos SOLO la zona sensible con un
   pseudo-elemento centrado. El icono se sigue viendo exactamente igual.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* OJO: .snk-nav-cerrar NO va acá. Esta regla le ponía position:relative y le pisaba el
     absolute con el que se ancla arriba a la derecha del drawer: la X terminaba en
     top:354 / left:4, o sea flotando en el medio del panel. Su área táctil se resuelve
     abajo, sin tocarle el position. */
  .snk-icon-btn,
  .snk-car-btn,
  .snk-stories__nav,
  .snilko-storyproof__nav,
  .snk-buscador-cerrar,
  .snk-nav-social a {
    position: relative;
  }
  /* Las flechas del carrusel de la ficha medían 40x40 en el celular y 44 en escritorio,
     o sea al revés de donde hace falta. Y la X del buscador, 28x28.
     El `position: relative` de arriba es OBLIGATORIO para las dos nuevas: sin él, el
     pseudo-elemento invisible de 44x44 se ancla al primer ancestro posicionado (para la
     X, el panel de resultados) y aterriza encima del 2º y 3er producto, comiéndose sus
     clicks. Es la misma trampa que documenta el comentario de arriba. */
  .snk-icon-btn::after,
  .snk-nav-cerrar::after,
  .snk-car-btn::after,
  .snk-stories__nav::after,
  .snilko-storyproof__nav::after,
  .snk-buscador-cerrar::after,
  .snk-nav-social a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* Solo amplía el área de toque: no se ve ni empuja nada. */
  }
}


/* Visible solo para lectores de pantalla (el "de" del contador del carrusel, que en
   Shopify iba en un visually-hidden y al portarlo se había quedado a la vista). */
.snk-solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   FOTOS DE LOS CARRUSELES DE CLIENTES — que WooCommerce no las aplaste

   Las secciones portadas de Shopify le dan a estas imágenes `height: 100%` para que
   llenen un contenedor con aspect-ratio 9/16. Pero WooCommerce trae
   `.woocommerce img { height: auto }`, que con UNA clase y UN elemento (0,1,1) le gana
   a `.snilko-storyproof__img`, que es una sola clase (0,1,0). Resultado: la foto queda
   en altura 0, y como el navegador no carga imágenes de tamaño cero, el carrusel se ve
   vacío. En Shopify no pasaba porque ahí esa regla no existe.

   Se arregla subiendo la especificidad (contenedor + clase = 0,2,0), sin !important.
   ────────────────────────────────────────────────────────────────────────── */
.snilko-storyproof .snilko-storyproof__img,
.snilko-storyproof__story .snilko-storyproof__img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.snk-stories .snk-stories__img,
.snk-stories__card .snk-stories__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}


/* ──────────────────────────────────────────────────────────────────────────
   ELEGIR EL TALLE ES LO QUE MÁS SE TOCA EN LA FICHA
   Los botones medían 41px de alto en móvil, por debajo de los 44 que se consideran
   cómodos para el dedo. Y acá errarle no es un detalle: es elegir mal el talle o no
   poder elegirlo. Se agrandan de verdad (no con un pseudo-elemento como los iconos
   del header), porque hay lugar de sobra y se ven mejor.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .snk-talles .snk-talle {
    min-height: 46px;
    min-width: 46px;
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   EL BADGE "OFERTA" TIENE QUE LEERSE
   Lo había puesto en blanco sobre turquesa: contraste 1.97, prácticamente ilegible.
   TODOS los demás badges del sitio, los que vienen portados de Shopify (el kicker del
   hero, "🆕 NUEVO", "CLIENTES REALES", "TU TALLE, TU STOCK"), usan texto oscuro
   #050d13 sobre el turquesa claro #4fd5e1, que da 11.12 de contraste. Este desentonaba
   con la marca además de no leerse.
   ────────────────────────────────────────────────────────────────────────── */
.woocommerce span.onsale,
ul.products li.product span.onsale,
span.onsale {
  background: #4fd5e1;
  color: #050d13;
}

/* ──────────────────────────────────────────────────────────────────────────
   NADA SE DESPLAZA DE COSTADO, TENGA O NO BARRA DE SCROLL

   Varias secciones portadas usan el truco de "full-bleed" para romper el contenedor:
   width:100vw con márgenes negativos. El detalle es que 100vw INCLUYE el ancho de la
   barra de scroll: en un Mac no se nota (la barra es superpuesta y mide 0), pero en
   Windows la página queda desplazándose ~15px de costado. Ese es justo el defecto que
   más se siente en una web.

   overflow-x: clip corta ese sobrante SIN crear un contenedor de scroll, así que —a
   diferencia de overflow:hidden— no rompe la barra sticky de "Comprar ahora" ni ningún
   position:sticky.
   ────────────────────────────────────────────────────────────────────────── */
/* OJO: esto NO puede ir en html ni en body. overflow distinto de visible en el elemento
   raíz crea un contenedor de posicionamiento, y eso rompe el position:fixed del menú
   deslizante: la clase is-open se aplicaba pero el panel se quedaba fuera de pantalla.
   Va en el contenido, que es donde están las secciones full-bleed; el header y el drawer
   quedan afuera y siguen fijos al viewport. */
#snk-main,
.snk-contenido {
  overflow-x: clip;
  max-width: 100%;
}

/* El área táctil de la X de cerrar, sin tocarle el position (se ancla con absolute al
   drawer). El pseudo-elemento se centra sobre el botón y lo lleva a 44px de zona sensible. */
@media (max-width: 900px) {
  .snk-nav-cerrar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   EN MÓVIL EL MEGA MENÚ SE VUELVE LISTA, DENTRO DEL DRAWER

   El mega está pensado para escritorio (panel flotante al pasar el mouse) y en móvil
   quedaba en display:none. Resultado: el drawer mostraba solo dos entradas y todas las
   líneas —Nike con Mercurial, Phantom, Tiempo, Mixtos, y Adidas con F50, Predator, Copa—
   no aparecían por ningún lado. En Shopify el menú de celular sí las lista.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .snk-nav .snk-mega {
    /* CERRADO por defecto. Acá decía `display: block` a secas, y como este selector le gana
       por especificidad al `.snk-mega { display:none }` de la media query de arriba, el panel
       quedaba SIEMPRE abierto: el acordeón estaba escrito (el JS ya hace el toggle de is-open
       y de aria-expanded) pero anulado por esta línea.
       Medido a 375px con un solo bloque cargado: el drawer llegaba a 817px contra 812px de
       pantalla, o sea que ya había que scrollear para ver el menú entero. Con el catálogo de
       encargue arriba se duplica. */
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: auto;
    min-width: 0;
    background: transparent;
    pointer-events: auto;
  }
  .snk-nav .snk-has-mega.is-open .snk-mega { display: block; }

  /* dark.css se carga después de esta hoja y le devuelve al mega su borde, su fondo y su
     sombra de panel flotante de escritorio. Adentro del drawer eso sobra, y con el acordeón
     cerrado se veía como una franja de 2px (el borde de arriba más el de abajo) colgando
     debajo de cada entrada. Se le gana con un selector más específico, en vez de tocar
     dark.css, que es donde vive el aspecto del tema oscuro. */
  body.snk-oscuro .snk-nav .snk-mega {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Sin animación a propósito. Se probó el despliegue suave con `grid-template-rows: 0fr → 1fr`,
     que es LA técnica para animar una altura desconocida, y acá no funciona: el panel necesita
     `overflow: hidden` en el hijo para recortarse mientras crece, y por la especificación de
     Grid un ítem con overflow distinto de `visible` tiene tamaño mínimo automático CERO, así
     que el `1fr` se queda sin nada contra qué crecer y la fila resuelve a 0px. Medido: al sacar
     el `overflow: hidden` la fila salta de 0 a 591px, con todo lo demás igual.
     Se puede resolver con `max-height` y un número inventado, pero eso ata la animación a un
     alto que hoy es de 591px y cambia en cuanto se cargue el catálogo de encargue. Abrir y
     cerrar seco funciona en todos los teléfonos y no tiene forma de romperse.
     El caret sí se anima: eso ya estaba resuelto arriba (.snk-has-mega.is-open .snk-caret). */

  .snk-nav .snk-mega-inner {
    display: block;
    padding: 0;
  }
  .snk-nav .snk-mega-col {
    width: auto;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--snk-borde);
  }
  .snk-nav .snk-mega-col--cta { border-bottom: 0; padding-top: 14px; }
  .snk-nav .snk-mega-title {
    display: block;
    padding: 6px 0 2px;
    font-size: 12px;
    letter-spacing: .96px;
  }
  /* Los enlaces de cada marca, con área táctil cómoda */
  .snk-nav .snk-mega-col a {
    display: block;
    padding: 11px 0 11px 14px;
    font-size: 15px;
    min-height: 44px;
    line-height: 22px;
    box-sizing: border-box;
  }
  .snk-nav .snk-mega-vertodo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
  }
}

/* El badge de agotado: mismo lugar y forma que el de OFERTA, pero en gris, para que se
   distinga de lejos. Shopify usa el color inverso para lo mismo. */
.onsale.is-agotado,
span.onsale.is-agotado {
  background: #6b7280;
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   LA SEGUNDA FOTO DE LA TARJETA (al pasar el mouse)
   Va encima de la primera, en el mismo hueco, así la tarjeta no cambia de alto ni
   mueve la grilla. Solo en pantallas con mouse: en celular no hay hover.
   ────────────────────────────────────────────────────────────────────────── */
.snk-card-fotos {
  display: block;
  position: relative;
  overflow: hidden;
}
/* El selector va con TODO el prefijo de la grilla a propósito: `.woocommerce ul.products
   li.product a img` (más arriba) tiene 3 clases + 4 elementos y le ganaba a un
   `.snk-card-fotos .snk-card-foto2` de 2 clases, así que el arreglo no se aplicaba nunca
   aunque el archivo estuviera bien subido. Medido en el navegador: object-fit seguía en
   `cover` y aspect-ratio en `1005 / 663` con el CSS nuevo ya cargado. */
.woocommerce ul.products li.product a img.snk-card-foto2,
.snk-card-fotos .snk-card-foto2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `aspect-ratio: auto` anula el `var(--snk-ratio, 1005 / 663)` que traen todas las imágenes de
     la grilla. La primera foto recibe su proporción real por style inline (functions.php), pero
     la segunda no la recibía nunca y se quedaba con el default de botín: en un accesorio vertical
     eso le daba 188px de alto dentro de un hueco de 366, o sea la mitad de la tarjeta.
     Y `contain` en vez de `cover`: cover recorta para llenar, y con una foto vertical en un hueco
     horizontal (o al revés) se come medio producto. Medido el 02/09/2026 en Canilleras. */
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  ul.products li.product:hover .snk-card-fotos .snk-card-foto2 { opacity: 1; }
  /* El mismo zoom leve que hace Shopify */
  ul.products li.product .snk-card-fotos img { transition: transform .35s ease, opacity .25s ease; }
  ul.products li.product:hover .snk-card-fotos img { transform: scale(1.03); }
}

/* Con el teclado también, para quien no usa mouse */
ul.products li.product:focus-within .snk-card-fotos .snk-card-foto2 { opacity: 1; }

/* El campo de cantidad de la ficha: Shopify no lo tiene, del talle se va derecho al
   botón. Se oculta a la vista pero el formulario lo sigue enviando (queda en 1), así que
   nadie pierde la posibilidad de agregar dos veces el mismo par. */
.woocommerce div.product form.cart .quantity {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   "SUMALO CON 10% OFF" — el complemento, abajo del botón de comprar
   Mismo lugar y misma idea que en Shopify, con una diferencia: acá el descuento se
   aplica de verdad, así que el precio tachado es el precio real y no uno inflado.
   ────────────────────────────────────────────────────────────────────────── */
.snk-upsell {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid rgba(51, 204, 204, .35);
  border-radius: 16px;
  background: rgba(51, 204, 204, .07);
}
.snk-upsell__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.snk-upsell__titulo { font-size: 14.5px; font-weight: 900; color: #0b0b0b; }
.snk-upsell__sub { font-size: 13px; color: #555; margin-top: 2px; }

/* El switch */
.snk-upsell__switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.snk-upsell__switch input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.snk-upsell__palanca {
  width: 52px; height: 30px; border-radius: 999px; background: #cfd4d6;
  transition: background .2s ease; display: block; position: relative;
}
.snk-upsell__palanca::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.snk-upsell__switch input:checked + .snk-upsell__palanca { background: #33cccc; }
.snk-upsell__switch input:checked + .snk-upsell__palanca::after { transform: translateX(22px); }
.snk-upsell__switch input:focus-visible + .snk-upsell__palanca { outline: 2px solid #050d13; outline-offset: 2px; }

/* Cada accesorio es una fila: foto · datos (se estira) · switch pegado a la derecha.
   `min-width:0` en los datos para que un nombre largo no empuje el switch fuera de la caja. */
.snk-upsell__item { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.snk-upsell__datos { flex: 1 1 auto; min-width: 0; }
.snk-upsell__item + .snk-upsell__item { padding-top: 12px; border-top: 1px solid rgba(51, 204, 204, .22); }
.snk-upsell__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.snk-upsell__nombre { font-size: 13.5px; font-weight: 700; color: #0b0b0b; }
.snk-upsell__precios { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.snk-upsell__precios del { font-size: 13px; color: #888; }
.snk-upsell__precios ins { font-size: 15px; font-weight: 900; color: #0b0b0b; text-decoration: none; }
.snk-upsell__ahorro { font-size: 12px; font-weight: 700; color: #1a8f5f; }
.snk-upsell__nota { font-size: 11.5px; color: #666; margin: 10px 0 0; }
.snk-upsell.is-cargando { opacity: .6; pointer-events: none; }

@media (max-width: 600px) {
  .snk-upsell__cabeza { align-items: flex-start; }
  .snk-upsell__titulo { font-size: 14px; }
}

/* ── ENCARGUE: el aviso de plazo (carrito, cajón lateral y checkout) ──────────
   Ámbar y no turquesa a propósito. El turquesa de la marca es el color de "lo tenemos acá":
   pintar un plazo de 40 días hábiles con el mismo color es la forma más barata de que el
   cliente pase de largo la única diferencia que importa entre $6.000 y $6.990. */
.snk-aviso-encargue{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(224,160,60,.42);
  background:rgba(224,160,60,.10);
  font-size:14px;
  line-height:1.4;
  color:#0b0b0b;
}
.snk-aviso-encargue--mixto{
  border-color:rgba(224,120,40,.55);
  background:rgba(224,120,40,.13);
}
.snk-aviso-encargue strong{ font-weight:800; }

/* En el cajón lateral respira menos: el panel es angosto. */
#snk-cajon-aviso{ margin:0 16px 12px; font-size:13.5px; }

/* La etiqueta por renglón, para saber CUÁL de los pares es el que espera. */
.snk-cajon__encargue{
  display:inline-block;
  margin:2px 0;
  padding:1px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  color:#8a5504;
  background:rgba(224,160,60,.20);
  border:1px solid rgba(224,160,60,.42);
}

/* El modo oscuro de esto vive en assets/dark.css, que es el que se carga cuando está activo.
   OJO: en este archivo hay 3 reglas con `body.snk-dark` que NO se aplican nunca, porque la
   clase que el tema agrega es `snk-oscuro` (inc/tema-dark.php:55). Son código muerto. */

/* ── Link a la política en el footer ──────────────────────────────────────────
   Discreto pero legible: es información obligatoria (Ley 17.250 art. 16), no
   decoración, así que no puede quedar en un gris que no se lee. */
.snk-footer-links { margin: 10px 0 6px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.snk-footer-links a { font-size: 13px; color: inherit; opacity: .85; text-decoration: none; }
.snk-footer-links a:hover { opacity: 1; text-decoration: underline; }

/* ── La página de cambios y devoluciones ───────────────────────────────────── */
.page .entry-content h2 { font-size: 20px; font-weight: 800; margin: 30px 0 10px; }
.page .entry-content p, .page .entry-content li { line-height: 1.65; }
.page .entry-content ul, .page .entry-content ol { margin: 10px 0 10px 20px; }
.page .entry-content li { margin-bottom: 7px; }
.snk-pol__intro { font-size: 17px; line-height: 1.6; }
.snk-pol__nota { font-size: 14px; opacity: .8; border-left: 3px solid var(--snk-turquesa, #33cccc); padding-left: 12px; }

/* ── .snk-btn fuera de la home ──────────────────────────────────────────────
   La estructura de este botón vivía SOLO en el <style> inline de secciones/hero.php,
   que se imprime únicamente en la portada. Las páginas de contenido usan la misma
   clase en su HTML, así que se quedaban sin nada de forma: dark.css sí les pintaba
   el fondo celeste, y el resultado era un rectángulo de texto de 88×21px.
   Medido en /contacto/: display inline, padding 0, border-radius 0, font-weight 400.
   El CTA de WhatsApp, que es por donde entran las consultas, no parecía un botón y
   quedaba menos de la mitad de los 44px de zona táctil que pide un dedo en el celu.

   Acá va SOLO la estructura, nunca el color: los colores los sigue poniendo dark.css.
   En la home no cambia un pixel, porque el <style> inline de hero.php va dentro del
   body, después de esta hoja, y con la misma especificidad declara exactamente estos
   mismos valores. Verificado midiendo la home antes y después. */
.snk-btn {
	display: inline-block;
	text-decoration: none;
	font-family: var(--font-heading-family, 'Montserrat', Arial, sans-serif);
	font-weight: 700;
	font-size: 14.5px;
	padding: 15px 32px;
	border-radius: 9999px;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.snk-btn:hover { transform: translateY(-2px); }

/* ── Carrito en el celular: zonas táctiles sin solaparse ────────────────────
   Los controles de cada línea son de WooCommerce Blocks (React), así que el HTML
   no se toca: va todo por CSS.

   Medido a 375px: los botones −/+ eran de 30×25 y el "Eliminar" de 24×24, contra
   los 44×44 que necesita un dedo. Lo obvio (agrandar los tres a 44) ROMPE algo peor,
   y la cuenta lo dice: el + y el Eliminar están a 40px entre centros, así que
   44/2 + 44/2 − 40 = 4px de SOLAPE. El cliente que quiere sumar cantidad termina
   borrando el par del carrito. Con los tamaños viejos había 13px de aire
   (30/2 + 24/2 − 40 = −13), o sea que agrandar sin pensar creaba el problema.

   Tampoco alcanza con estirar sólo uno: si crecen los dos su suma tiene que quedar
   abajo de 2×40 = 80px, así que a lo sumo 39px cada uno. Nunca 44.

   La salida es sacarlos del mismo renglón: el selector de cantidad arriba, el
   Eliminar debajo, con 8px de aire. Ahí los tres pueden medir 44×44 de verdad, no
   un área invisible pegada encima. La otra técnica candidata, un ::after de 44px,
   quedaba descartada por la misma cuenta: las áreas se seguían pisando 4px.

   El corte va en 735px porque es donde Woo entra en su layout compacto: su
   contenedor es de 699px y .snk-wrap le resta 18px de cada lado (699 + 36). Arriba
   de eso no cambia nada, y el escritorio quedó medido igual antes y después. */
@media (max-width: 735px) {
  .wp-block-woocommerce-cart table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity {
    display: grid;
    grid-template-columns: 134px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    row-gap: 8px;
    padding-right: 0;
  }

  /* 44 + 44 + 44 adentro, más los 2px del borde del selector. */
  .wp-block-woocommerce-cart table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    > .wc-block-components-quantity-selector {
    grid-row: 1;
    width: 134px;
    min-height: 46px;
    margin: 0;
  }

  .wp-block-woocommerce-cart
    .wc-block-components-quantity-selector
    > .wc-block-components-quantity-selector__button,
  .wp-block-woocommerce-cart
    .wc-block-components-quantity-selector
    > .wc-block-components-quantity-selector__input {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  /* Le gana al display:none / 24×24 que Woo aplica en su modo compacto. */
  .wp-block-woocommerce-cart table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    > .wc-block-cart-item__remove-link {
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
  }
}