/* ══════════════════════════════════════════════════════════════════════════════
   SNILKOVIA DARK — el mismo lenguaje visual de rastreo.snilkovia.com

   Todo lo de acá sale de medir la web de rastreo: las variables son las suyas, tal cual,
   y los componentes usan sus mismas recetas (el vidrio esmerilado de las tarjetas, el
   resplandor turquesa detrás del logo, la curva de animación).

   LO QUE NO SE TRAJO: la tipografía. Se probó con Sora, la de rastreo, y quedó peor. Bajó
   los títulos de 900 a 800, estiró los eyebrow de 0,6px a 3,52px, pasó los botones a
   mayúsculas, y como las secciones portadas declaran su propia familia en el <style> que
   traen adentro, terminaron conviviendo dos fuentes en la misma pantalla. La del tema ya
   estaba afinada para esta tienda: Assistant es humanista y aguanta los 12-14px de los
   títulos de producto, donde Sora (geométrica) se lee peor.

   La regla que quedó: este archivo cambia el COLOR y la SUPERFICIE, no la letra. Lo único
   tipográfico que sobrevive son dos pesos que marcan un ESTADO (el talle elegido y el
   precio con descuento), porque eso es información, no decoración.

   Se activa con ?tema=dark y se apaga con ?tema=claro, así se pueden comparar las dos
   versiones en vivo sin tocar nada.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Los colores de rastreo.snilkovia.com, medidos uno por uno */
  --bg-primary:   #070d10;
  --bg-secondary: #0b1418;
  --bg-panel:     #10191e;
  --bg-glass:     rgba(16, 25, 30, .6);
  --text-primary:   #eafafb;
  --text-secondary: #9bb3b8;
  /* Un tono más claro que el de la web de rastreo (#5f757b): ahí se usa en textos
     grandes, y acá cae en precios tachados y contadores chicos, donde daba 3,66:1.
     Con #7a9096 el mismo gris pasa a 5,3:1 sobre el vidrio. */
  --text-tertiary:  #7a9096;
  --cel:        #33cccc;
  --cel-bright: #66e6e6;
  --cel-deep:   #108474;
  --cel-glow:   rgba(51, 204, 204, .32);
  --linea:      rgba(234, 250, 251, .08);
  --ease:       cubic-bezier(.16, 1, .3, 1);

  /* Se pisan las del tema claro para que todo lo heredado siga el mismo idioma */
  --snk-turquesa: #33cccc;
  --snk-turquesa-claro: #66e6e6;
  --snk-borde: rgba(234, 250, 251, .08);
}
/* ── Base ─────────────────────────────────────────────────────────────────── */
body.snk-oscuro{
  background: var(--bg-primary);
  color: var(--text-primary);
}
body.snk-oscuro h1,
body.snk-oscuro h2,
body.snk-oscuro h3,
body.snk-oscuro .snk-title,
body.snk-oscuro .product_title{
  color: var(--text-primary);
}
body.snk-oscuro p,
body.snk-oscuro li,
body.snk-oscuro td,
body.snk-oscuro .woocommerce-Price-amount{ color: var(--text-secondary); }
body.snk-oscuro a{ color: var(--text-primary); }
body.snk-oscuro a:hover{ color: var(--cel-bright); }
body.snk-oscuro hr,
body.snk-oscuro .snk-rule{ border-color: var(--linea); }
/* ── Header ───────────────────────────────────────────────────────────────── */
body.snk-oscuro .snk-header,
body.snk-oscuro .snk-header-inner{
  background: var(--bg-primary);
  border-bottom: 1px solid var(--linea);
}
body.snk-oscuro .snk-announcement{
  background: var(--bg-secondary);
  color: var(--cel);
  border-bottom: 1px solid var(--linea);
}
body.snk-oscuro .snk-icon-btn,
body.snk-oscuro .snk-cart-link,
body.snk-oscuro .snk-menu-toggle,
body.snk-oscuro .snk-buscar-abrir{ color: var(--text-primary); }
body.snk-oscuro .snk-nav-item > a,
body.snk-oscuro .snk-nav-top{ color: var(--text-primary); }
body.snk-oscuro .snk-nav-item > a:hover,
body.snk-oscuro .snk-nav-top:hover{ color: var(--cel-bright); }

/* El logo, con el resplandor de la web de rastreo */
body.snk-oscuro .snk-logo{ position: relative; }
body.snk-oscuro .snk-logo::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 180px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--cel-glow), transparent 65%);
  pointer-events: none;
  z-index: -1;
  opacity: .7;
}
body.snk-oscuro .snk-logo img{ filter: brightness(1.6) saturate(1.1); }
/* El mega menú,
body.snk-oscuro como las tarjetas de rastreo: vidrio esmerilado */
body.snk-oscuro .snk-mega{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
body.snk-oscuro .snk-mega-title{ color: var(--cel); }
body.snk-oscuro .snk-mega-col a{ color: var(--text-secondary); }
body.snk-oscuro .snk-mega-col a:hover{ color: var(--cel-bright); }
body.snk-oscuro .snk-mega-vertodo{ background: var(--cel); color: var(--bg-primary); }

/* El menú de celular */
body.snk-oscuro .snk-nav{ background: var(--bg-primary); border-right: 1px solid var(--linea); }
body.snk-oscuro .snk-nav-cerrar{ background: var(--bg-panel); color: var(--text-primary); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
body.snk-oscuro .snk-hero{ background: var(--bg-primary); }
body.snk-oscuro .snk-hero::after{
  background: linear-gradient(90deg,
    rgba(7, 13, 16, .92) 0%,
    rgba(7, 13, 16, .62) 42%,
    rgba(7, 13, 16, 0) 68%,
    rgba(7, 13, 16, 0) 100%);
}
body.snk-oscuro .snk-title{ color: var(--text-primary); }
body.snk-oscuro .snk-kicker{
  background: transparent;
  color: var(--cel);
  border: 1px solid rgba(51, 204, 204, .35);
}
body.snk-oscuro .snk-btn,
body.snk-oscuro .snk-btn--primary{
  background: var(--cel);
  color: var(--bg-primary);
  transition: .3s var(--ease);
}
body.snk-oscuro .snk-btn:hover,
body.snk-oscuro .snk-btn--primary:hover{
  background: var(--cel-bright);
  box-shadow: 0 0 32px var(--cel-glow);
}
body.snk-oscuro .snk-btn--outline{
  background: transparent;
  color: var(--cel);
  border: 1px solid rgba(51, 204, 204, .45);
}
body.snk-oscuro .snk-btn--outline:hover{ background: rgba(51, 204, 204, .1); box-shadow: 0 0 24px var(--cel-glow); }
body.snk-oscuro .snk-trust,
body.snk-oscuro .snk-benefits__item{ color: var(--text-tertiary); }
/* ── Secciones ────────────────────────────────────────────────────────────── */
body.snk-oscuro .snk-trust-bar,
body.snk-oscuro .snk-sizes,
body.snk-oscuro .snk-reviews,
body.snk-oscuro .snk-stories,
body.snk-oscuro .snilko-faq{
  background: var(--bg-primary);
  border-top: 1px solid var(--linea);
}
body.snk-oscuro .snk-sizes{ background: var(--bg-secondary); }
body.snk-oscuro .snk-trust-bar__title,
body.snk-oscuro .snk-sizes__title,
body.snk-oscuro .snk-reviews__title,
body.snk-oscuro .snk-stories__title,
body.snk-oscuro .snilko-faq__title,
body.snk-oscuro .snk-section-header__title{
  color: var(--text-primary);
}
body.snk-oscuro .snk-trust-bar__sub,
body.snk-oscuro .snk-sizes__sub,
body.snk-oscuro .snk-reviews__sub,
body.snk-oscuro .snk-stories__sub,
body.snk-oscuro .snk-section-header__sub{ color: var(--text-tertiary); }
body.snk-oscuro .snk-trust-bar__icon{ background: rgba(51, 204, 204, .12); }
/* Los badges: el eyebrow de rastreo */
body.snk-oscuro .snk-section-header__badge,
body.snk-oscuro .snk-reviews__badge,
body.snk-oscuro .snk-stories__badge,
body.snk-oscuro .snk-sizes__badge,
body.snk-oscuro .snk-kicker{
  background: transparent;
  color: var(--cel);
  border: 1px solid rgba(51, 204, 204, .35);
}
/* Todo lo que sea tarjeta: el vidrio esmerilado */
body.snk-oscuro .snk-review,
body.snk-oscuro .snk-chip,
body.snk-oscuro .snk-sizes__help,
body.snk-oscuro .snk-sizes__table-card,
body.snk-oscuro .snilko-faq__item,
body.snk-oscuro .snk-stories__card,
body.snk-oscuro .snilko-delivery,
body.snk-oscuro .snilko-pdp-acc__item,
body.snk-oscuro .snilko-pdp-acc__tableCard,
body.snk-oscuro .snk-upsell{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  backdrop-filter: blur(20px);
  color: var(--text-secondary);
}
body.snk-oscuro .snk-review__title,
body.snk-oscuro .snk-review__name,
body.snk-oscuro .snilko-faq__q,
body.snk-oscuro .snk-sizes__help-title,
body.snk-oscuro .snk-upsell__titulo,
body.snk-oscuro .snk-upsell__nombre,
body.snk-oscuro .snilko-delivery__title{ color: var(--text-primary); }
body.snk-oscuro .snk-review__text,
body.snk-oscuro .snilko-faq__a,
body.snk-oscuro .snk-sizes__help-sub,
body.snk-oscuro .snk-upsell__sub,
body.snk-oscuro .snilko-delivery__sub{ color: var(--text-secondary); }
body.snk-oscuro .snk-review__verified,
body.snk-oscuro .snilko-pdp-acc__q{ color: var(--cel); }
body.snk-oscuro .snilko-faq__chev{ background: rgba(51, 204, 204, .14); color: var(--cel); }
/* ── Tarjetas de producto ─────────────────────────────────────────────────── */
body.snk-oscuro.woocommerce ul.products li.product,
body.snk-oscuro .woocommerce ul.products li.product{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  border-radius: 20px;
  overflow: hidden;
  transition: .3s var(--ease);
}
body.snk-oscuro.woocommerce ul.products li.product:hover,
body.snk-oscuro .woocommerce ul.products li.product:hover{
  border-color: rgba(51, 204, 204, .35);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5), 0 0 28px var(--cel-glow);
  transform: translateY(-3px);
}
body.snk-oscuro.woocommerce ul.products li.product a img,
body.snk-oscuro .woocommerce ul.products li.product a img{ background: var(--bg-secondary); }
body.snk-oscuro.woocommerce ul.products li.product h2,
body.snk-oscuro .woocommerce ul.products li.product h2,
body.snk-oscuro.woocommerce ul.products li.product h3,
body.snk-oscuro .woocommerce ul.products li.product h3,
body.snk-oscuro.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.snk-oscuro .woocommerce ul.products li.product .woocommerce-loop-product__title{
  color: var(--text-primary);
}
body.snk-oscuro.woocommerce ul.products li.product .price,
body.snk-oscuro .woocommerce ul.products li.product .price{ color: var(--text-primary); }
body.snk-oscuro.woocommerce ul.products li.product .price del,
body.snk-oscuro .woocommerce ul.products li.product .price del{ color: var(--text-tertiary); }

/* El mismo tachado, pero en la FICHA. Acá se había quedado el `opacity: .5` de style.css:223,
   que sobre el fondo oscuro da 2,28:1 (medido): el precio anterior queda casi ilegible justo
   al lado del precio nuevo, que es con lo que se compara. Se le da color en vez de opacidad,
   igual que a las tarjetas de la grilla, así los dos tachados se leen igual en toda la tienda. */
body.snk-oscuro.woocommerce div.product p.price del,
body.snk-oscuro .woocommerce div.product p.price del,
body.snk-oscuro.woocommerce div.product span.price del,
body.snk-oscuro .woocommerce div.product span.price del{
  opacity: 1;
  color: var(--text-tertiary);
}
body.snk-oscuro.woocommerce ul.products li.product .price ins,
body.snk-oscuro .woocommerce ul.products li.product .price ins{ color: var(--cel-bright); }
body.snk-oscuro span.onsale,
body.snk-oscuro.woocommerce span.onsale,
body.snk-oscuro .woocommerce span.onsale{
  background: var(--cel);
  color: var(--bg-primary);
}
body.snk-oscuro span.onsale.is-agotado{ background: rgba(234, 250, 251, .14); color: var(--text-secondary); }
body.snk-oscuro .snk-card-talle{ border-color: var(--linea); color: var(--text-secondary); }
body.snk-oscuro .snk-card-talle.is-out{ color: var(--text-tertiary); }
body.snk-oscuro .snk-card-btn{ background: var(--cel); color: var(--bg-primary); }

/* ── Ficha ────────────────────────────────────────────────────────────────── */
body.snk-oscuro.woocommerce div.product .product_title,
body.snk-oscuro .woocommerce div.product .product_title{ color: var(--text-primary); }
body.snk-oscuro.woocommerce div.product .summary .price,
body.snk-oscuro .woocommerce div.product .summary .price{ color: var(--text-primary); }
body.snk-oscuro.woocommerce div.product .summary .price del,
body.snk-oscuro .woocommerce div.product .summary .price del{ color: var(--text-tertiary); }
body.snk-oscuro.woocommerce div.product .summary .price ins,
body.snk-oscuro .woocommerce div.product .summary .price ins{ color: var(--cel-bright); }
body.snk-oscuro.woocommerce div.product div.images img,
body.snk-oscuro .woocommerce div.product div.images img{ background: var(--bg-secondary); }
body.snk-oscuro .snilko-rating-pill{ background: rgba(51, 204, 204, .1); border: 1px solid rgba(51, 204, 204, .25); }
body.snk-oscuro .snilko-rating-pill__score,
body.snk-oscuro .snilko-rating-pill__claim{ color: var(--text-primary); }
body.snk-oscuro .snk-talle{
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--text-primary);
  transition: .2s var(--ease);
}
body.snk-oscuro .snk-talle:hover{ border-color: var(--cel); color: var(--cel-bright); }
body.snk-oscuro .snk-talle.is-selected,
body.snk-oscuro .snk-talle[aria-pressed="true"]{
  background: var(--cel); color: var(--bg-primary); border-color: var(--cel);
}
body.snk-oscuro .snk-talle.is-out{ color: var(--text-tertiary); border-color: rgba(234, 250, 251, .05); }
body.snk-oscuro.woocommerce div.product form.cart .button,
body.snk-oscuro .woocommerce div.product form.cart .button,
body.snk-oscuro.woocommerce .single_add_to_cart_button,
body.snk-oscuro .woocommerce .single_add_to_cart_button,
body.snk-oscuro .snilko-stickybuy__btn{
  background: var(--cel);
  color: var(--bg-primary);
  border-radius: 999px;
  transition: .3s var(--ease);
}
/* El :not() va sí o sí: WooCommerce apaga el botón con la CLASE disabled, no con el
   atributo, así que sin esto el hover lo encendía cuando todavía no elegiste talle. */
body.snk-oscuro.woocommerce div.product form.cart .button:hover:not(.disabled):not([disabled]),
body.snk-oscuro .woocommerce div.product form.cart .button:hover:not(.disabled):not([disabled]),
body.snk-oscuro.woocommerce .single_add_to_cart_button:hover:not(.disabled):not([disabled]),
body.snk-oscuro .woocommerce .single_add_to_cart_button:hover:not(.disabled):not([disabled]){
  background: var(--cel-bright);
  box-shadow: 0 0 36px var(--cel-glow);
}
body.snk-oscuro .snilko-stickybuy{ background: var(--bg-glass); border-top: 1px solid var(--linea); backdrop-filter: blur(20px); }
body.snk-oscuro .snilko-stickybuy__title,
body.snk-oscuro .snilko-stickybuy__price{ color: var(--text-primary); }

/* ── Carrusel de clientes ─────────────────────────────────────────────────── */
body.snk-oscuro .snilko-storyproof{ background: var(--bg-primary); border-color: var(--linea); }
body.snk-oscuro .snilko-storyproof__title{ color: var(--text-primary); }
body.snk-oscuro .snilko-storyproof__sub{ color: var(--text-tertiary); }
body.snk-oscuro .snilko-storyproof__story{ background: var(--bg-secondary); }
body.snk-oscuro .snilko-storyproof__nav,
body.snk-oscuro .snk-stories__nav,
body.snk-oscuro .snk-car-btn{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  color: var(--text-primary);
  backdrop-filter: blur(20px);
}

/* ── Filtros y buscador ───────────────────────────────────────────────────── */
body.snk-oscuro .snk-filtros{ border-color: var(--linea); }
body.snk-oscuro .snk-filtros-label{ color: var(--text-secondary); }
body.snk-oscuro .snk-filtro-chip{
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--text-secondary);
}
body.snk-oscuro .snk-filtro-chip:hover{ border-color: var(--cel); color: var(--cel-bright); }
body.snk-oscuro .snk-filtro-chip.is-active{ background: var(--cel); color: var(--bg-primary); border-color: var(--cel); }
/* Sin el `opacity: .6` de style.css:521: sobre el fondo oscuro deja el contador en 2,74:1, y
   en el chip activo (turquesa) en 1,58:1, que es lo peor de toda la tienda. Es el número que
   dice cuántos botines hay de ese talle, o sea justo lo que el filtro viene a contestar. */
body.snk-oscuro .snk-filtro-n{ color: var(--text-tertiary); opacity: 1; }
body.snk-oscuro .snk-filtro-chip.is-active .snk-filtro-n,
body.snk-oscuro .snk-filtro-chip.is-activo .snk-filtro-n{ color: var(--bg-primary); opacity: .8; }
body.snk-oscuro .snk-buscador-caja{ background: var(--bg-panel); border: 1px solid var(--linea); }
body.snk-oscuro .snk-buscador-form input{ background: var(--bg-secondary); color: var(--text-primary); border-color: var(--linea); }
body.snk-oscuro .snk-bres{ border-color: var(--linea); color: var(--text-secondary); }
body.snk-oscuro .snk-bres:hover{ background: rgba(51, 204, 204, .08); }
/* ── Footer ───────────────────────────────────────────────────────────────── */
body.snk-oscuro .snk-footer{
  background: var(--bg-secondary);
  border-top: 1px solid var(--linea);
  color: var(--text-secondary);
}
body.snk-oscuro .snk-copy{ color: var(--text-tertiary); }
body.snk-oscuro .snk-footer-logo img{ filter: brightness(1.6); }

/* ── Carrito y checkout (bloques) ─────────────────────────────────────────── */
body.snk-oscuro .wc-block-components-panel,
body.snk-oscuro .wp-block-woocommerce-cart,
body.snk-oscuro .wp-block-woocommerce-checkout{ color: var(--text-primary); }
body.snk-oscuro .wc-block-components-totals-item__value,
body.snk-oscuro .wc-block-components-product-name{ color: var(--text-primary); }
body.snk-oscuro .wc-block-components-text-input input,
body.snk-oscuro .wc-block-components-select select{
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--linea);
}
body.snk-oscuro .wc-block-components-button{
  background: var(--cel);
  color: var(--bg-primary);
}
/* ── El resplandor de fondo, como en rastreo ─────────────────────────────── */
body.snk-oscuro::before{
  content: "";
  position: fixed;
  top: -180px; left: 50%;
  width: 900px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--cel-glow), transparent 68%);
  pointer-events: none;
  z-index: 0;
  opacity: .35;
}
body.snk-oscuro main,
body.snk-oscuro footer{ position: relative; z-index: 1; }
/* La entrada de las secciones,
body.snk-oscuro con la curva de rastreo */
@keyframes snkFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
body.snk-oscuro .snk-trust-bar,
body.snk-oscuro .snk-sizes,
body.snk-oscuro .snk-reviews,
body.snk-oscuro .snk-stories,
body.snk-oscuro .snilko-faq,
body.snk-oscuro.woocommerce ul.products li.product,
body.snk-oscuro .woocommerce ul.products li.product{
    animation: snkFadeUp .6s var(--ease) both;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CIERRE — las secciones portadas de Shopify

   Estas secciones traen su propio <style> dentro del cuerpo de la página, o sea que en
   la cascada van DESPUÉS de esta hoja: con la misma especificidad, ganan ellas. Por eso
   cada selector de acá lleva `body.snk-oscuro` adelante, que suma un punto y las pisa.

   La lista no está escrita a ojo: salió de recorrer el CSSOM y sacar TODAS las reglas de
   esos <style> que ponen un fondo claro o un texto oscuro. Son 25 fondos y 33 textos.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Las secciones grandes: fondo de la casa */
body.snk-oscuro .snk-trust-bar,
body.snk-oscuro .snk-sizes,
body.snk-oscuro .snk-reviews,
body.snk-oscuro .snk-stories,
body.snk-oscuro .snilko-faq{
  background: var(--bg-primary);
  border-top: 1px solid var(--linea);
}

/* Las líneas de acento de 4px: el turquesa nuevo */
/* Eran 4px de cian de borde a borde, lo más brillante de la pantalla, cinco veces
   bajando por la home. Ahora son una línea de 1px con degradado y resplandor: marca la
   división sin competir con el producto. Se suman la del FAQ y la de la ficha, que
   estaban fuera de la lista y se quedaban con el turquesa plano. */
body.snk-oscuro .snk-trust-bar__accent,
body.snk-oscuro .snk-sizes__accent,
body.snk-oscuro .snk-reviews__accent,
body.snk-oscuro .snilko-faq__top,
body.snk-oscuro .snilko-storyproof__top,
body.snk-oscuro .snk-stories__accent{
  height: 1px;
  box-shadow: 0 0 26px 2px var(--cel-glow);
  opacity: .85;
  background: linear-gradient(90deg, var(--cel-deep), var(--cel), var(--cel-bright));
}

/* Todo lo que sea tarjeta: el vidrio esmerilado de rastreo */
body.snk-oscuro .snk-chip,
body.snk-oscuro .snk-sizes__help,
body.snk-oscuro .snk-sizes__table-card,
body.snk-oscuro .snk-reviews__summary,
body.snk-oscuro .snk-review,
body.snk-oscuro .snk-stories__card,
body.snk-oscuro .snilko-faq__item[open]{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  backdrop-filter: blur(20px);
}
body.snk-oscuro .snk-chip:hover{
  background: rgba(51, 204, 204, .12);
  border-color: rgba(51, 204, 204, .35);
}

/* Los badges: el eyebrow de rastreo, transparente con borde */
body.snk-oscuro .snk-kicker,
body.snk-oscuro .snk-section-header__badge,
body.snk-oscuro .snk-sizes__badge,
body.snk-oscuro .snk-reviews__badge,
body.snk-oscuro .snk-stories__badge{
  background: transparent;
  color: var(--cel);
  border: 1px solid rgba(51, 204, 204, .35);
}

/* Los botones llenos: turquesa nuevo, texto oscuro encima */
body.snk-oscuro .snk-btn--primary,
body.snk-oscuro .snk-reviews__toggle{
  background: var(--cel);
  color: var(--bg-primary);
  border-color: var(--cel);
}
body.snk-oscuro .snk-btn--primary:hover,
body.snk-oscuro .snk-reviews__toggle:hover{
  background: var(--cel-bright);
  box-shadow: 0 0 32px var(--cel-glow);
}

/* Los botones de contorno */
body.snk-oscuro .snk-reviews__judgeme,
body.snk-oscuro .snk-stories__ig{
  background: transparent;
  color: var(--cel);
  border: 1px solid rgba(51, 204, 204, .45);
}
body.snk-oscuro .snk-reviews__judgeme:hover,
body.snk-oscuro .snk-stories__ig:hover{
  background: rgba(51, 204, 204, .12);
  color: var(--cel-bright);
  box-shadow: 0 0 24px var(--cel-glow);
}

/* Los títulos */
body.snk-oscuro .snk-trust-bar__title,
body.snk-oscuro .snk-section-header__title,
body.snk-oscuro .snk-sizes__title,
body.snk-oscuro .snk-sizes__help-title,
body.snk-oscuro .snk-reviews__title,
body.snk-oscuro .snk-reviews__score,
body.snk-oscuro .snk-review__title,
body.snk-oscuro .snk-review__name,
body.snk-oscuro .snk-stories__title,
body.snk-oscuro .snk-chip__eur{
  color: var(--text-primary);
}

/* Los textos de apoyo */
body.snk-oscuro .snk-trust-bar__sub,
body.snk-oscuro .snk-section-header__sub,
body.snk-oscuro .snk-sizes__sub,
body.snk-oscuro .snk-sizes__help-sub,
body.snk-oscuro .snk-sizes__table-label,
body.snk-oscuro .snk-reviews__sub,
body.snk-oscuro .snk-reviews__count,
body.snk-oscuro .snk-review__text,
body.snk-oscuro .snk-stories__sub,
body.snk-oscuro .snk-chip__meta{
  color: var(--text-secondary);
}
body.snk-oscuro .snk-chip:hover .snk-chip__eur,
body.snk-oscuro .snk-chip:hover .snk-chip__meta{
  color: var(--cel-bright);
}
body.snk-oscuro .snk-stories__nav,
body.snk-oscuro .snk-car-count{
  color: var(--text-primary);
  background: var(--bg-glass);
  border: 1px solid var(--linea);
}

/* El badge OFERTA venía con el turquesa viejo (#4fd5e1): que hable el mismo idioma */
body.snk-oscuro span.onsale,
body.snk-oscuro.woocommerce span.onsale,
body.snk-oscuro .woocommerce span.onsale{
  background: var(--cel);
  color: var(--bg-primary);
}

/* Los últimos dos que quedaban con el turquesa viejo, pisados desde su propio <style> */
body.snk-oscuro .snk-trust-bar__icon{
  background: rgba(51, 204, 204, .12);
  border-color: rgba(51, 204, 204, .28);
  color: var(--cel);
}
body.snk-oscuro .snk-review__verified{
  color: var(--cel);
  border-color: rgba(51, 204, 204, .35);
}

/* El badge OFERTA es el único que no cede por especificidad: una regla propia con la misma
   especificidad, puesta después, sigue perdiendo (probado inyectándola en vivo). Solo cambia
   con !important, así que va con !important, y solo acá. */
body.snk-oscuro span.onsale,
body.snk-oscuro.woocommerce span.onsale,
body.snk-oscuro .woocommerce span.onsale{
  background: var(--cel) !important;
  color: var(--bg-primary) !important;
}
body.snk-oscuro span.onsale.is-agotado,
body.snk-oscuro.woocommerce span.onsale.is-agotado,
body.snk-oscuro .woocommerce span.onsale.is-agotado{
  background: rgba(234, 250, 251, .14) !important;
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LA FICHA DE PRODUCTO

   Acá también hay secciones con su <style> en el cuerpo, y una que dejaba el texto en
   negro sobre el vidrio oscuro: el gadget de entrega quedaba directamente ilegible.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Los talles: son lo que hay que TOCAR para comprar, así que el borde tiene que verse */
body.snk-oscuro .snk-talle{
  background: var(--bg-glass);
  border: 1px solid rgba(234, 250, 251, .18);
  color: var(--text-primary);
  transition: .25s var(--ease);
}
body.snk-oscuro .snk-talle:hover{
  border-color: rgba(51, 204, 204, .55);
  background: rgba(51, 204, 204, .1);
}
body.snk-oscuro .snk-talle.is-selected,
body.snk-oscuro .snk-talle[aria-pressed="true"]{
  background: var(--cel);
  border-color: var(--cel);
  color: var(--bg-primary);
  box-shadow: 0 0 22px var(--cel-glow);
}
body.snk-oscuro .snk-talle.is-out{
  color: var(--text-tertiary);
  border-color: rgba(234, 250, 251, .07);
  background: transparent;
}
body.snk-oscuro .snk-talles__label,
body.snk-oscuro .variations label,
body.snk-oscuro label[for*="talle"]{ color: var(--text-secondary); }

/* El botón de comprar: turquesa lleno con el texto oscuro, no blanco sobre turquesa */
body.snk-oscuro .single_add_to_cart_button,
body.snk-oscuro button.single_add_to_cart_button{
  background: var(--cel) !important;
  color: var(--bg-primary) !important;
  border-color: var(--cel) !important;
}
body.snk-oscuro .single_add_to_cart_button:hover:not(.disabled):not([disabled]){
  background: var(--cel-bright) !important;
  box-shadow: 0 0 32px var(--cel-glow);
}

/* El gadget de entrega: el título venía en negro sobre el vidrio oscuro */
body.snk-oscuro .snilko-delivery__title{ color: var(--text-primary); }
body.snk-oscuro .snilko-delivery__sub{ color: var(--text-secondary); }
body.snk-oscuro .snilko-delivery__icon{
  background: rgba(51, 204, 204, .12);
  border-color: rgba(51, 204, 204, .3);
  color: var(--cel);
}
body.snk-oscuro .snilko-delivery strong{ color: var(--cel); }

/* Las estrellas, al turquesa de la casa */
body.snk-oscuro .snilko-rating-pill__stars{ color: var(--cel); }
body.snk-oscuro .snilko-rating-pill__texto{ color: var(--text-secondary); }

/* La lupa de la galería */
body.snk-oscuro .woocommerce-product-gallery__trigger{
  background: var(--bg-glass) !important;
  border: 1px solid var(--linea);
  backdrop-filter: blur(20px);
}

/* Las historias de clientes */
body.snk-oscuro .snilko-storyproof{
  background: var(--bg-primary) !important;
  border-top: 1px solid var(--linea);
}
body.snk-oscuro .snilko-storyproof__title{ color: var(--text-primary); }
body.snk-oscuro .snilko-storyproof__sub{ color: var(--text-secondary); }
body.snk-oscuro .snilko-storyproof__story{
  background: var(--bg-glass) !important;
  border: 1px solid var(--linea);
}
body.snk-oscuro .snilko-storyproof__nav{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  color: var(--text-primary);
}

/* El precio con descuento del complemento, que se lea como lo que es: el precio bueno */
body.snk-oscuro .snk-upsell__precios ins,
body.snk-oscuro .snk-upsell__precios ins .amount{ color: var(--cel); font-weight: 700; }
body.snk-oscuro .snk-upsell__precios del,
body.snk-oscuro .snk-upsell__precios del .amount{ color: var(--text-tertiary); }
body.snk-oscuro .snk-upsell__ahorro{ color: var(--cel-bright); }

/* ── El listado de productos (categorías, búsqueda, tienda) ────────────────────
   El título de la tarjeta lo pinta `.woocommerce ul.products li.product .título`,
   que es más específico que un `h3` a secas: quedaba negro sobre el vidrio oscuro. */
body.snk-oscuro.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.snk-oscuro .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.snk-oscuro ul.products li.product .woocommerce-loop-product__title,
body.snk-oscuro.woocommerce ul.products li.product h2,
body.snk-oscuro .woocommerce ul.products li.product h2,
body.snk-oscuro.woocommerce ul.products li.product h3,
body.snk-oscuro .woocommerce ul.products li.product h3{
  color: var(--text-primary);
}

/* Los talles de la tarjeta: venían con fondo turquesa claro y letra gris */
body.snk-oscuro .snk-card-talle{
  background: rgba(51, 204, 204, .12);
  border: 1px solid rgba(51, 204, 204, .28);
  color: var(--cel-bright);
}
body.snk-oscuro .snk-card-talle.is-out,
body.snk-oscuro .snk-card-talle--agotado{
  background: rgba(234, 250, 251, .06);
  border-color: rgba(234, 250, 251, .1);
  color: var(--text-tertiary);
}
body.snk-oscuro .snk-card-talles__label{ color: var(--text-tertiary); }

/* El resto del listado */
body.snk-oscuro.woocommerce ul.products li.product .price,
body.snk-oscuro .woocommerce ul.products li.product .price{ color: var(--text-primary); }
/* --text-secondary, no --text-tertiary: el tachado con el gris más apagado da 3,66:1 */
body.snk-oscuro.woocommerce ul.products li.product .price del,
body.snk-oscuro .woocommerce ul.products li.product .price del,
body.snk-oscuro.woocommerce ul.products li.product .price del .amount,
body.snk-oscuro .woocommerce ul.products li.product .price del .amount{ color: var(--text-secondary); }
body.snk-oscuro.woocommerce ul.products li.product .price ins,
body.snk-oscuro .woocommerce ul.products li.product .price ins,
body.snk-oscuro.woocommerce ul.products li.product .price ins .amount,
body.snk-oscuro .woocommerce ul.products li.product .price ins .amount{ color: var(--cel-bright); }
body.snk-oscuro .woocommerce-result-count,
body.snk-oscuro .woocommerce-ordering select,
body.snk-oscuro .woocommerce-breadcrumb,
body.snk-oscuro .woocommerce-breadcrumb a{ color: var(--text-secondary); }
body.snk-oscuro .woocommerce-ordering select{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
}
body.snk-oscuro.woocommerce nav.woocommerce-pagination ul,
body.snk-oscuro .woocommerce nav.woocommerce-pagination ul,
body.snk-oscuro.woocommerce nav.woocommerce-pagination ul li,
body.snk-oscuro .woocommerce nav.woocommerce-pagination ul li{ border-color: var(--linea); }
body.snk-oscuro.woocommerce nav.woocommerce-pagination ul li a,
body.snk-oscuro .woocommerce nav.woocommerce-pagination ul li a,
body.snk-oscuro.woocommerce nav.woocommerce-pagination ul li span,
body.snk-oscuro .woocommerce nav.woocommerce-pagination ul li span{
  color: var(--text-secondary);
  background: transparent;
}
body.snk-oscuro.woocommerce nav.woocommerce-pagination ul li span.current,
body.snk-oscuro .woocommerce nav.woocommerce-pagination ul li span.current,
body.snk-oscuro.woocommerce nav.woocommerce-pagination ul li a:hover,
body.snk-oscuro .woocommerce nav.woocommerce-pagination ul li a:hover{
  background: var(--cel);
  color: var(--bg-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARRITO Y CHECKOUT

   Acá no hay iframes: los de MercadoPago son de 0x0 (solo huella), así que el bloque
   de pago es DOM propio y se puede vestir igual que el resto.

   El criterio en esta página es distinto al del resto del sitio: es la que mueve plata,
   así que los campos tienen que gritar dónde se escribe. Superficie --bg-panel (más clara
   que el fondo), borde visible al 18% como en la web de rastreo, y foco turquesa.
   ══════════════════════════════════════════════════════════════════════════════ */

body.snk-oscuro .wc-block-components-text-input input,
body.snk-oscuro .wc-block-components-textarea,
body.snk-oscuro .wc-blocks-components-select__select,
body.snk-oscuro .wc-block-components-form input[type="text"],
body.snk-oscuro .wc-block-components-form input[type="email"],
body.snk-oscuro .wc-block-components-form input[type="tel"],
body.snk-oscuro .wc-block-components-address-form input,
body.snk-oscuro .wc-blocks-components-select__container,
body.snk-oscuro .wc-block-components-checkout input[type="text"],
body.snk-oscuro .wc-block-components-checkout input[type="email"]{
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border-color: rgba(234, 250, 251, .18) !important;
}
body.snk-oscuro .wc-block-components-text-input input::placeholder,
body.snk-oscuro .wc-block-components-checkout input::placeholder{ color: var(--text-secondary); }
body.snk-oscuro .wc-block-components-text-input input:focus,
body.snk-oscuro .wc-blocks-components-select__select:focus,
body.snk-oscuro .wc-block-components-address-form input:focus{
  border-color: var(--cel) !important;
  box-shadow: 0 0 0 2px var(--cel-glow) !important;
  outline: none;
}
body.snk-oscuro .wc-block-components-text-input label,
body.snk-oscuro .wc-blocks-components-select__label,
body.snk-oscuro .wc-block-components-checkbox__label,
body.snk-oscuro .wc-block-components-radio-control__label{ color: var(--text-secondary); }
body.snk-oscuro .wc-block-components-text-input.is-active label{ color: var(--cel); }

/* Los paneles del checkout: mismo vidrio que el resto */
body.snk-oscuro .wc-block-components-sidebar .wc-block-components-panel,
body.snk-oscuro .wp-block-woocommerce-checkout-order-summary-block,
body.snk-oscuro .wc-block-components-radio-control-accordion-option,
body.snk-oscuro .wc-block-components-order-summary{
  background: var(--bg-glass);
  border: 1px solid var(--linea);
}
body.snk-oscuro .wc-block-components-totals-item__label,
body.snk-oscuro .wc-block-components-product-name,
body.snk-oscuro .wc-block-components-totals-footer-item{ color: var(--text-primary); }
body.snk-oscuro .wc-block-components-totals-item__value,
body.snk-oscuro .wc-block-components-product-metadata{ color: var(--text-secondary); }
body.snk-oscuro .wc-block-components-product-badge{
  background: rgba(51, 204, 204, .14);
  border-color: rgba(51, 204, 204, .3);
  color: var(--cel-bright);
}
body.snk-oscuro .wc-block-components-panel__button,
body.snk-oscuro .wc-block-components-title,
body.snk-oscuro .wp-block-woocommerce-checkout-order-summary-block h2{ color: var(--text-primary); }

/* Los botones que cierran la compra */
body.snk-oscuro .wc-block-components-button:not(.is-link),
body.snk-oscuro .wc-block-cart__submit-button,
body.snk-oscuro .wc-block-components-checkout-place-order-button{
  background: var(--cel) !important;
  color: var(--bg-primary) !important;
  border-color: var(--cel) !important;
}
body.snk-oscuro .wc-block-components-button:not(.is-link):hover{
  background: var(--cel-bright) !important;
  box-shadow: 0 0 32px var(--cel-glow);
}

/* El bloque de MercadoPago */
body.snk-oscuro .mp-checkout-ticket-container,
body.snk-oscuro .mp-checkout-container,
body.snk-oscuro .mp-input,
body.snk-oscuro .mp-input-document,
body.snk-oscuro .mp-checkout-ticket-payment-methods{
  background: var(--bg-panel) !important;
  border-color: rgba(234, 250, 251, .14) !important;
  color: var(--text-primary) !important;
}
body.snk-oscuro .mp-document,
body.snk-oscuro input.mp-document,
body.snk-oscuro .mp-input select,
body.snk-oscuro .mp-input input{
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border-color: rgba(234, 250, 251, .18) !important;
}
body.snk-oscuro .mp-checkout-ticket-title,
body.snk-oscuro .mp-input-label,
body.snk-oscuro .mp-checkout-ticket-payment-name{ color: var(--text-primary) !important; }
body.snk-oscuro .mp-checkout-ticket-subtitle,
body.snk-oscuro .mp-checkout-ticket-terms-and-conditions{ color: var(--text-secondary) !important; }

/* El badge de OFERTA de los bloques de WooCommerce */
body.snk-oscuro .wc-block-grid__product-onsale{
  background: var(--cel) !important;
  color: var(--bg-primary) !important;
  border-color: var(--cel) !important;
}

/* ── El bloque de MercadoPago ──────────────────────────────────────────────────
   Trae su propio CSS y no cede por especificidad. Las clases salieron de leer el DOM
   del checkout real, no de adivinar: son las 30 que el plugin pinta.
   Solo se cambian colores; la caja del modo test queda bien visible a propósito. */
body.snk-oscuro .mp-checkout-container,
body.snk-oscuro .mp-checkout-ticket-container,
body.snk-oscuro .mp-checkout-ticket-content,
body.snk-oscuro .mp-checkout-ticket-input-document,
body.snk-oscuro .mp-input-document,
body.snk-oscuro .mp-input,
body.snk-oscuro .mp-input-table-container,
body.snk-oscuro .mp-input-table-list,
body.snk-oscuro .mp-input-table-item,
body.snk-oscuro .mp-input-radio-container{
  background: var(--bg-panel) !important;
  border-color: rgba(234, 250, 251, .14) !important;
}
body.snk-oscuro .mp-document,
body.snk-oscuro .mp-document-select,
body.snk-oscuro input.mp-document,
body.snk-oscuro select.mp-document-select{
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border-color: rgba(234, 250, 251, .18) !important;
}
body.snk-oscuro .mp-document::placeholder{ color: var(--text-secondary) !important; }
body.snk-oscuro .mp-input-label,
body.snk-oscuro .mp-checkout-ticket-title,
body.snk-oscuro .mp-input-table-label,
body.snk-oscuro .mp-input-radio-label,
body.snk-oscuro .mp-input-table-option{ color: var(--text-primary) !important; }
body.snk-oscuro .mp-checkout-ticket-text,
body.snk-oscuro .mp-helper-message,
body.snk-oscuro .mp-input-table-row-text-image{ color: var(--text-secondary) !important; }
body.snk-oscuro .mp-vertical-line{ background: rgba(234, 250, 251, .18) !important; }

/* El aviso de modo test: que se siga notando, pero sin fondo blanco */
body.snk-oscuro .mp-test-mode-card,
body.snk-oscuro .mp-test-mode-card-content{
  background: rgba(255, 138, 76, .1) !important;
  border-color: rgba(255, 138, 76, .38) !important;
}
body.snk-oscuro .mp-test-mode-title{ color: #ffb489 !important; }
body.snk-oscuro .mp-test-mode-description{ color: var(--text-secondary) !important; }
body.snk-oscuro .mp-test-mode-link{ color: var(--cel) !important; }

/* Las cuatro piezas de MercadoPago que no cedían: su CSS usa un ID
   (#mp-checkout-ticket-root) y cadenas de tres clases, las dos con !important.
   Se igualan con la misma munición, medida sobre el checkout real. */
body.snk-oscuro #mp-checkout-ticket-root,
body.snk-oscuro #mp-checkout-ticket-root.mp-checkout-ticket-container{
  background-color: var(--bg-panel) !important;
  border-color: rgba(234, 250, 251, .14) !important;
}
body.snk-oscuro .mp-checkout-container .mp-input-document .mp-input,
body.snk-oscuro .mp-checkout-container .mp-input-document .mp-input .mp-document,
body.snk-oscuro .mp-checkout-container .mp-input-document .mp-input .mp-document-select{
  background: var(--bg-panel) !important;
  background-color: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border-color: rgba(234, 250, 251, .18) !important;
}
body.snk-oscuro .mp-checkout-container .mp-checkout-ticket-content .mp-checkout-ticket-text,
body.snk-oscuro .mp-checkout-container p.mp-checkout-ticket-text,
body.snk-oscuro #mp-checkout-ticket-root .mp-checkout-ticket-text{
  color: var(--text-primary) !important;
}

/* Los dos últimos textos de MercadoPago: uno lo pinta una cadena que arranca en el ID
   del root, el otro una de dos clases; los dos con !important. Se replica la cadena. */
body.snk-oscuro #mp-checkout-ticket-root.mp-checkout-ticket-container .mp-checkout-ticket-content .mp-checkout-ticket-text,
body.snk-oscuro #mp-checkout-ticket-root .mp-checkout-ticket-content .mp-checkout-ticket-text,
body.snk-oscuro #mp-checkout-ticket-root .mp-input-table-label,
body.snk-oscuro #mp-checkout-ticket-root .mp-input-radio-label{
  color: var(--text-primary) !important;
}
body.snk-oscuro .mp-checkout-container .mp-terms-and-conditions-text{
  color: var(--text-secondary) !important;
}
body.snk-oscuro .mp-checkout-container .mp-terms-and-conditions-link{
  color: var(--cel) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTRASTE

   Medido con la fórmula de WCAG sobre el fondo real de cada elemento, no a ojo.
   Lo que se arregla acá venía por debajo del mínimo (4,5:1 para texto normal):

     texto blanco sobre turquesa .......... 1,97:1  → texto oscuro:  10,4:1
     texto blanco sobre verde WhatsApp .... 1,98:1  → verde oscuro:   7,5:1
     precio tachado ....................... 3,66:1  → un tono arriba: 6,1:1
     © del pie ............................ 3,83:1  → un tono arriba: 6,4:1
   ══════════════════════════════════════════════════════════════════════════════ */

/* Sobre turquesa nunca va texto blanco: el turquesa es claro, el texto tiene que ser oscuro */
body.snk-oscuro .snk-mega-vertodo,
body.snk-oscuro .snilko-faq__btn,
body.snk-oscuro .snilko-home-cta__btn,
body.snk-oscuro .snk-btn--primary,
body.snk-oscuro .snk-reviews__toggle,
body.snk-oscuro .snilko-storyproof__btn{
  color: var(--bg-primary) !important;
}

/* El CTA de WhatsApp: se mantiene el verde de WhatsApp, pero el oscuro de su propia paleta,
   que con texto blanco sí se lee (7,5:1 contra 1,98:1 del verde claro) */
body.snk-oscuro .snk-sizes__wa,
body.snk-oscuro .snilko-wa,
body.snk-oscuro .snilko-pdp-acc__wa{
  background: #075e54 !important;
  color: #ffffff !important;
  border: 1px solid rgba(37, 211, 102, .45);
}
body.snk-oscuro .snk-sizes__wa:hover,
body.snk-oscuro .snilko-wa:hover{
  background: #0b7d6f !important;
  box-shadow: 0 0 26px rgba(37, 211, 102, .3);
}

/* Los grises que quedaban un tono por debajo del mínimo */
body.snk-oscuro del .woocommerce-Price-amount,
body.snk-oscuro del,
body.snk-oscuro .price del,
body.snk-oscuro .price del .amount,
body.snk-oscuro .snk-copy,
body.snk-oscuro .snk-footer__legal{ color: var(--text-secondary); }

/* ── Los últimos del barrido de contraste ─────────────────────────────────────
   Todo lo que se apoya en el turquesa lleva texto oscuro: el turquesa es un color
   CLARO, y el blanco encima da 1,97:1. Va con !important porque varias de estas
   reglas vienen del <style> de su propia sección. */
body.snk-oscuro .snk-card-btn,
body.snk-oscuro .single_add_to_cart_button,
body.snk-oscuro button.single_add_to_cart_button,
body.snk-oscuro.woocommerce .single_add_to_cart_button,
body.snk-oscuro .woocommerce .single_add_to_cart_button,
body.snk-oscuro.woocommerce ul.products li.product .snk-card-btn,
body.snk-oscuro .woocommerce ul.products li.product .snk-card-btn,
body.snk-oscuro.woocommerce ul.products li.product .button,
body.snk-oscuro .woocommerce ul.products li.product .button,
body.snk-oscuro .snk-sizes__btn,
body.snk-oscuro .snk-stories__btn{
  background: var(--cel) !important;
  color: var(--bg-primary) !important;
  border-color: var(--cel) !important;
}
body.snk-oscuro .snk-card-btn:hover,
body.snk-oscuro .single_add_to_cart_button:hover:not(.disabled):not([disabled]),
body.snk-oscuro.woocommerce ul.products li.product .button:hover,
body.snk-oscuro .woocommerce ul.products li.product .button:hover{
  background: var(--cel-bright) !important;
  box-shadow: 0 0 28px var(--cel-glow);
}

/* Los tachados, en todos lados */
body.snk-oscuro del,
body.snk-oscuro del .amount,
body.snk-oscuro del .woocommerce-Price-amount,
body.snk-oscuro .snk-upsell__precios del,
body.snk-oscuro .snk-upsell__nota{ color: var(--text-secondary); }

/* La palanca del complemento, apagada: gris del tema, no gris claro de sistema */
body.snk-oscuro .snk-upsell__palanca{
  background: rgba(234, 250, 251, .18) !important;
  border: 1px solid var(--linea);
}
body.snk-oscuro .snk-upsell__switch input:checked + .snk-upsell__palanca{
  background: var(--cel) !important;
  border-color: var(--cel);
}

/* El botón de comprar arranca con la clase `disabled` (todavía no elegiste talle), y esa
   regla pesa más que la del botón a secas: por eso el texto seguía blanco sobre turquesa
   (1,97:1). Y de paso se arregla algo que confundía: apagado se veía igual de turquesa
   que encendido. Ahora apagado es apagado, y se enciende al elegir el talle. */
body.snk-oscuro.woocommerce button.single_add_to_cart_button.disabled,
body.snk-oscuro .woocommerce button.single_add_to_cart_button.disabled,
body.snk-oscuro button.single_add_to_cart_button.disabled,
body.snk-oscuro button.single_add_to_cart_button[disabled]{
  background: rgba(234, 250, 251, .08) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
body.snk-oscuro.woocommerce button.single_add_to_cart_button:not(.disabled):not([disabled]),
body.snk-oscuro .woocommerce button.single_add_to_cart_button:not(.disabled):not([disabled]),
body.snk-oscuro button.single_add_to_cart_button:not(.disabled):not([disabled]){
  background: var(--cel) !important;
  color: var(--bg-primary) !important;
  border-color: var(--cel) !important;
  opacity: 1 !important;
}

/* ── Fidelidad con rastreo.snilkovia.com ──────────────────────────────────────
   De los 13 tokens de la web de rastreo, 12 quedaron idénticos (el 13º, el gris más
   apagado, se subió a propósito por contraste). Lo que faltaba era su firma visual en
   la tarjeta de producto: el vidrio esmerilado. Las demás tarjetas ya lo tenían. */
body.snk-oscuro.woocommerce ul.products li.product,
body.snk-oscuro .woocommerce ul.products li.product,
body.snk-oscuro ul.products li.product{
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* ── El velo del hero, por ancho ───────────────────────────────────────────────
   El original tiene DOS degradados: en escritorio va de izquierda a derecha (el texto
   está a la izquierda, la foto a la derecha), y a partir de 749px hacia abajo va de
   abajo hacia arriba, porque el layout se apila y el texto termina sobre la foto.

   La regla oscura de más arriba solo copiaba el de escritorio, así que en el celular el
   título quedaba encima del jugador sin nada que lo despegara. Acá va el de móvil, con
   el mismo corte (749px) y las mismas paradas que el original. */
@media (max-width: 749px) {
  body.snk-oscuro .snk-hero::after {
    /* Las paradas van más arriba que en el original (52% y 78% en vez de 38% y 62%)
       por una razón concreta: Sora es más ancha que la tipografía del tema claro, así
       que la línea de "DAC Uruguay · 48-72h · Cambio 7 días" pasa a dos renglones y todo
       el bloque de texto sube unos 32px, justo hasta donde el velo original ya no cubre.
       Medido: el título quedaba con 0,38 de velo en vez de 0,53. */
    background: linear-gradient(to top,
      rgba(7, 13, 16, .96) 0%,
      rgba(7, 13, 16, .90) 34%,
      rgba(7, 13, 16, .74) 52%,
      rgba(7, 13, 16, 0) 78%,
      rgba(7, 13, 16, 0) 100%);
  }

  /* El badge cae sobre la pierna del jugador, en la parte de la foto donde el velo ya
     está bajando: contra el pixel más brillante del fondo daba 4,37:1, apenas por debajo
     del mínimo. En la web de rastreo el eyebrow nunca va sobre una foto, así que acá se
     le da superficie propia: el mismo vidrio esmerilado del resto, y pasa a 9,8:1. */
  body.snk-oscuro .snk-kicker {
    background: rgba(7, 13, 16, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ESTADOS DE ERROR

   El bloque del checkout fija el borde de los campos con !important, y eso mataba el
   borde rojo que WooCommerce le pone a un campo mal cargado (el suyo va sin !important).
   El label rojo lo perdía por especificidad. Resultado: en la página que mueve la plata,
   un campo con error se veía igual que uno correcto.

   Va al final del archivo a propósito: tiene que ganarle al estado base de más arriba.
   ══════════════════════════════════════════════════════════════════════════════ */
body.snk-oscuro .wc-block-components-text-input.has-error input,
body.snk-oscuro .wc-block-components-address-form .has-error input,
body.snk-oscuro .wc-block-components-text-input.has-error .wc-blocks-components-select__select,
body.snk-oscuro .has-error .wc-blocks-components-select__container,
body.snk-oscuro input[aria-invalid="true"],
body.snk-oscuro select[aria-invalid="true"] {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, .35) !important;
}
body.snk-oscuro .wc-block-components-text-input.has-error label,
body.snk-oscuro .wc-block-components-form .wc-block-components-text-input.has-error label,
body.snk-oscuro .has-error .wc-blocks-components-select__label { color: #ff8a8a !important; }
body.snk-oscuro .wc-block-components-validation-error,
body.snk-oscuro .wc-block-components-validation-error p { color: #ff8a8a !important; }
body.snk-oscuro .wc-block-components-notice-banner.is-error {
  background: rgba(255, 107, 107, .1);
  border-color: rgba(255, 107, 107, .45);
  color: #ffb0b0;
}
body.snk-oscuro .woocommerce-error,
body.snk-oscuro .woocommerce-NoticeGroup .woocommerce-error {
  background: rgba(255, 107, 107, .1);
  border-color: rgba(255, 107, 107, .45);
  color: #ffb0b0;
}
body.snk-oscuro .woocommerce-message,
body.snk-oscuro .wc-block-components-notice-banner.is-success {
  background: rgba(60, 207, 142, .1);
  border-color: rgba(60, 207, 142, .45);
  color: #7de3b6;
}

/* Y el error de MercadoPago: el mensaje de documento inválido sale por .mp-helper-message,
   que el bloque de más arriba dejaba en gris como si fuera una ayuda cualquiera. */
body.snk-oscuro .mp-helper.mp-helper-error .mp-helper-message,
body.snk-oscuro .mp-input.mp-input-error .mp-helper-message,
body.snk-oscuro .mp-helper-message.mp-error { color: #ff8a8a !important; }
body.snk-oscuro .mp-input.mp-input-error,
body.snk-oscuro .mp-input-document.mp-input-error .mp-input { border-color: #ff6b6b !important; }

/* El glifo del acordeón abierto de las preguntas: blanco sobre turquesa daba 1,97:1 */
body.snk-oscuro .snilko-faq__item[open] .snilko-faq__chev {
  color: var(--bg-primary);
  background: var(--cel);
}

/* ══════════════════════════════════════════════════════════════════════════════
   EL TALLE ELEGIDO

   La clase que marca el talle elegido es `is-active`: la pone assets/snilkovia.js al
   tocarlo. Las reglas de más arriba apuntaban a `is-selected` y `[aria-pressed]`, que no
   existen en este HTML, así que nunca aplicaban. Y peor: la regla base del talle usa el
   atajo `border:`, que le borraba al elegido el borde turquesa de 2px que le pone el tema.

   O sea que el talle marcado quedaba idéntico a los demás. En la ficha, elegir el talle es
   lo único que hay que tocar sí o sí para comprar, y en el celular no hay hover que
   compense. Va al final para ganarle a las dos reglas base.
   ══════════════════════════════════════════════════════════════════════════════ */
body.snk-oscuro .snk-talle.is-active {
  background: var(--cel);
  border: 2px solid var(--cel);
  color: var(--bg-primary);
  font-weight: 700;
  box-shadow: 0 0 22px var(--cel-glow);
}
body.snk-oscuro .snk-talle.is-active:hover {
  background: var(--cel-bright);
  border-color: var(--cel-bright);
  color: var(--bg-primary);
}
/* El mismo criterio para el chip de talle de la tarjeta del listado */
body.snk-oscuro .snk-card-talle.is-active {
  background: var(--cel);
  border-color: var(--cel);
  color: var(--bg-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LA TARJETA DE PRODUCTO

   Es la superficie que más se ve: tienda, categorías, el carrusel de la home y los
   relacionados. Tenía radio 20 y overflow hidden pero CERO padding propio, así que se
   venía parchando hijo por hijo: la foto a sangre, el título pegado al borde, el precio
   14px adentro y el botón apoyado en el borde izquierdo Y en el fondo, con la esquina
   comida por el overflow. Cuatro alineaciones distintas en la misma caja.

   Ahora el marco lo da la caja, como en el resto del tema.
   ══════════════════════════════════════════════════════════════════════════════ */
body.snk-oscuro.woocommerce ul.products li.product,
body.snk-oscuro ul.products li.product { padding: 10px 10px 14px; }

/* La foto tiene fondo blanco horneado en el archivo: sin radio propio queda como una
   losa pegada al borde del vidrio */
body.snk-oscuro.woocommerce ul.products li.product a img,
body.snk-oscuro ul.products li.product a img,
body.snk-oscuro .snk-card-fotos { border-radius: 14px; }

body.snk-oscuro ul.products li.product .snk-card-talles { margin: 10px 0 12px; }

/* El badge se corre para no morder la esquina redondeada de la foto */
body.snk-oscuro span.onsale,
body.snk-oscuro.woocommerce span.onsale { top: 18px !important; right: 18px !important; }

/* El botón de la tarjeta pasa a contorno. Con 12 bloques de turquesa lleno por pantalla
   el acento se gasta y deja de señalar nada: el turquesa lleno queda para el botón de
   comprar de la ficha, que es el que cierra la venta. */
body.snk-oscuro .snk-card-btn,
body.snk-oscuro.woocommerce ul.products li.product .snk-card-btn,
body.snk-oscuro .woocommerce ul.products li.product .snk-card-btn {
  display: block;
  margin: 0;
  padding: 12px 10px;
  text-align: center;
  background: transparent !important;
  color: var(--cel) !important;
  border: 1px solid rgba(51, 204, 204, .45) !important;
  border-radius: 8px;
}
body.snk-oscuro .snk-card-btn:hover,
body.snk-oscuro.woocommerce ul.products li.product .snk-card-btn:hover,
body.snk-oscuro .woocommerce ul.products li.product .snk-card-btn:hover {
  background: rgba(51, 204, 204, .12) !important;
  color: var(--cel-bright) !important;
  border-color: var(--cel) !important;
  box-shadow: 0 0 20px var(--cel-glow);
}

/* La galería de la ficha habla el mismo idioma */
body.snk-oscuro.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  border-radius: 14px;
}

@media (max-width: 749px) {
  /* En el carrusel la tarjeta mide 154px: 20px de padding se comerían el 13% */
  body.snk-oscuro.woocommerce ul.products li.product,
  body.snk-oscuro ul.products li.product { padding: 6px 6px 12px; }
  body.snk-oscuro span.onsale,
  body.snk-oscuro.woocommerce span.onsale { top: 14px !important; right: 14px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ESTADOS: que la web reaccione

   Tres agujeros que hacen que el sitio se sienta inerte:
   · No había ni un anillo de foco de marca. El único :focus-visible del tema es un
     outline #050d13 sobre fondo #070d10 (1,10:1, invisible), y como es outline de autor
     el navegador tampoco dibuja el suyo: quien navega con teclado va a ciegas.
   · Las flechas de los carruseles no daban señal al mouse: su hover cambia border-color
     y el estado base usa el atajo `border:`, que gana. El borde nunca cambiaba.
   · El acordeón abierto de la ficha se veía igual que los cerrados, y su glifo era
     blanco sobre turquesa (1,97:1). El gemelo del FAQ ya estaba arreglado; este quedó.
   ══════════════════════════════════════════════════════════════════════════════ */

body.snk-oscuro a:focus-visible,
body.snk-oscuro button:focus-visible,
body.snk-oscuro input:focus-visible,
body.snk-oscuro select:focus-visible,
body.snk-oscuro textarea:focus-visible,
body.snk-oscuro [tabindex]:focus-visible {
  outline: 2px solid var(--cel);
  outline-offset: 3px;
}
/* Los que viven dentro de un overflow:hidden llevan el anillo hacia adentro */
body.snk-oscuro summary:focus-visible,
body.snk-oscuro .snilko-faq__item a:focus-visible,
body.snk-oscuro .snilko-pdp-acc__item a:focus-visible,
body.snk-oscuro ul.products li.product a:focus-visible {
  outline: 2px solid var(--cel);
  outline-offset: -3px;
}
body.snk-oscuro .snk-buscador-form input[type="search"]:focus-visible {
  outline: 2px solid var(--cel);
  outline-offset: 4px;
}
/* El checkbox del switch está oculto y corrido de la palanca: sin esto salen DOS
   anillos, uno flotando al costado */
body.snk-oscuro .snk-upsell__switch input:focus-visible { outline: none; }
body.snk-oscuro .snk-upsell__switch input:focus-visible + .snk-upsell__palanca {
  outline: 2px solid var(--cel);
  outline-offset: 3px;
}

body.snk-oscuro .snk-stories__nav,
body.snk-oscuro .snilko-storyproof__nav,
body.snk-oscuro .snk-car-btn {
  transition: border-color .25s var(--ease), background .25s var(--ease),
              box-shadow .25s var(--ease), color .25s var(--ease);
}
body.snk-oscuro .snk-stories__nav:hover,
body.snk-oscuro .snilko-storyproof__nav:hover,
body.snk-oscuro .snk-car-btn:hover:not([disabled]) {
  border-color: rgba(51, 204, 204, .55);
  background: rgba(51, 204, 204, .12);
  color: var(--cel-bright);
  box-shadow: 0 0 24px var(--cel-glow);
}

/* El acordeón de la ficha abre solo en toda ficha: tiene que distinguirse */
body.snk-oscuro .snilko-pdp-acc__item[open] {
  background: rgba(51, 204, 204, .12);
  border-color: rgba(51, 204, 204, .35);
  box-shadow: 0 0 0 1px rgba(51, 204, 204, .12);
}
body.snk-oscuro .snilko-pdp-acc__item[open] .snilko-pdp-acc__chev {
  background: var(--cel);
  border-color: var(--cel);
  color: var(--bg-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   EL BARRIDO DE COLOR QUE HABÍA QUEDADO A MEDIAS

   Los resultados del buscador los inyecta el JS, así que ningún barrido del DOM los
   vio nunca: el precio salía negro sobre el panel oscuro (1,18:1) y el hover de la X
   la borraba (1,06:1). Y cuatro SVG traen stroke="#4FD5E1" (el turquesa viejo) quemado
   como atributo: las reglas de `color` que había eran código muerto, porque esos SVG
   no usan currentColor.
   ══════════════════════════════════════════════════════════════════════════════ */
body.snk-oscuro .snk-bres-titulo { color: var(--text-primary); }
body.snk-oscuro .snk-bres-precio { color: var(--cel-bright); }
body.snk-oscuro .snk-bres img { background: var(--bg-secondary); }
body.snk-oscuro .snk-buscador-lupa { color: var(--text-tertiary); }
body.snk-oscuro .snk-buscador-cerrar { color: var(--text-secondary); transition: color .25s var(--ease); }
body.snk-oscuro .snk-buscador-cerrar:hover { color: var(--cel-bright); }
body.snk-oscuro .snk-buscador-vacio,
body.snk-oscuro .snk-buscador-cargando { color: var(--text-secondary); }

/* Un atributo de presentación tiene especificidad 0: no hace falta !important */
body.snk-oscuro .snk-trust-bar__icon svg,
body.snk-oscuro .snilko-delivery__icon svg { stroke: var(--cel); }

/* La regla de los bordes: .08 para divisiones y cantos de tarjeta, .18 para lo que se
   toca y no tiene relleno de color. Va al final para ganarle a los bloques repetidos. */
body.snk-oscuro .snk-filtro-chip,
body.snk-oscuro .snk-car-btn,
body.snk-oscuro .snk-stories__nav,
body.snk-oscuro .snilko-storyproof__nav,
body.snk-oscuro .snk-buscador-caja,
body.snk-oscuro .woocommerce-ordering select {
  border-color: rgba(234, 250, 251, .18);
}
/* El chip de filtro es lo primero que se toca en una categoría y estaba transparente:
   aun con el borde al .18 da 1,63:1. Lo que lo hace leer como botón es la superficie. */
body.snk-oscuro .snk-filtro-chip { background: var(--bg-glass); }

/* Los 4 CTA de WhatsApp apuntan al mismo número y tenían dos identidades distintas.
   El filter:none es obligatorio: faq.php le aplica brightness(.95) y oscurece de más. */
body.snk-oscuro .snilko-faq__btn,
body.snk-oscuro .snilko-home-cta__btn {
  background: #075e54 !important;
  color: #ffffff !important;
  border: 1px solid rgba(37, 211, 102, .45);
  box-shadow: none !important;
}
body.snk-oscuro .snilko-faq__btn:hover,
body.snk-oscuro .snilko-home-cta__btn:hover {
  background: #0b7d6f !important;
  filter: none;
  box-shadow: 0 0 26px rgba(37, 211, 102, .3);
}

/* La fecha de entrega usaba un turquesa que no está en ninguna paleta (#0a9aaa, 5,5:1).
   El cutoff lo pinta un ID desde el <style> de la sección: hace falta ganarle al ID. */
body.snk-oscuro #snilko-cutoff-line { color: var(--text-secondary); }
body.snk-oscuro .snilko-delivery__range { color: var(--cel); }

/* El buscador: título y precio son <span>, o sea inline, así que el precio se pegaba al
   final del título en la misma línea (el margin-top del tema no hace nada en un inline). */
body.snk-oscuro .snk-bres-titulo,
body.snk-oscuro .snk-bres-precio { display: block; }
body.snk-oscuro .snk-bres-precio del,
body.snk-oscuro .snk-bres-precio del .amount { color: var(--text-tertiary); margin-right: 6px; }
body.snk-oscuro .snk-bres-precio ins,
body.snk-oscuro .snk-bres-precio ins .amount { color: var(--cel-bright); text-decoration: none; font-weight: 700; }
body.snk-oscuro .snk-bres:hover { background: rgba(51, 204, 204, .08); }

/* Las estrellas hablaban dos idiomas: naranja #f5a623 en la home (compradores.php) y
   turquesa en la píldora de la ficha. El cliente hace ese salto en dos toques. Viene
   heredado del Shopify; el oscuro solo lo dejó a la vista. */
body.snk-oscuro .snk-reviews__stars,
body.snk-oscuro .snk-review__stars { color: var(--cel); }

/* ══════════════════════════════════════════════════════════════════════════════
   RITMO VERTICAL Y GRILLA

   Cada sección se portó de Shopify con sus propios números y nadie los unificó. Medido
   caja a caja en escritorio: 14 · 62 · 52 · 38 · 22 · 18 · 26 · 30. Ocho valores, ninguno
   múltiplo de un paso común: la página arranca aireada y se va apretando hacia abajo.

   Y el borde izquierdo del contenido saltaba 108px mientras scrolleás: los productos
   arrancan en x=138, las reseñas en x=190, el FAQ en x=246.
   ══════════════════════════════════════════════════════════════════════════════ */
body.snk-oscuro { --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; }

/* Los envoltorios que dejó el importador de Shopify dejan de aportar aire propio */
body.snk-oscuro [class*="snk-sec-"] { padding-top: 0; padding-bottom: 0; }

/* El aire ENTRE secciones va todo arriba: los margins verticales colapsan, no se suman */
body.snk-oscuro .snk-trust-bar,
body.snk-oscuro .snk-sizes,
body.snk-oscuro .snk-reviews,
body.snk-oscuro .snk-stories,
body.snk-oscuro .snilko-faq,
body.snk-oscuro .snilko-home-cta { margin-top: var(--sp-6); margin-bottom: 0; }
body.snk-oscuro .snilko-home-cta { margin-bottom: var(--sp-6); }

/* "Stock recién llegado" era el único con padding propio (40/52) y encima su cabecera
   metía 32/8: 94px arriba y el título flotando lejos de los productos */
body.snk-oscuro .snk-section-header { padding: 42px 18px 0; }
body.snk-oscuro .snk-home-productos { padding-top: var(--sp-4); padding-bottom: 0; }
body.snk-oscuro .snk-carrusel-track { padding-top: 0; padding-bottom: var(--sp-2); }

body.snk-oscuro .snk-sizes__inner { padding-top: var(--sp-5); }
body.snk-oscuro .snk-sizes { padding-bottom: var(--sp-5); }
body.snk-oscuro .snk-reviews__inner { padding-top: var(--sp-5); }
body.snk-oscuro .snk-reviews { padding-bottom: var(--sp-5); }
body.snk-oscuro .snk-stories__inner { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
body.snk-oscuro .snilko-faq__inner { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
body.snk-oscuro .snk-trust-bar__row { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

body.snk-oscuro .snk-sizes__head,
body.snk-oscuro .snk-reviews__head,
body.snk-oscuro .snk-stories__head,
body.snk-oscuro .snilko-faq__head { margin-bottom: var(--sp-4); }

/* Un solo riel de contenido, el de .snk-wrap: 1200 + 18 de aire */
body.snk-oscuro .snk-reviews__inner,
body.snk-oscuro .snk-stories__inner,
body.snk-oscuro .snilko-faq__inner,
body.snk-oscuro .snilko-home-cta__inner { max-width: 1200px; }
body.snk-oscuro .snk-reviews__inner,
body.snk-oscuro .snilko-faq__inner,
body.snk-oscuro .snilko-home-cta__inner,
body.snk-oscuro .snk-stories__head,
body.snk-oscuro .snk-stories__wrap { padding-left: 18px; padding-right: 18px; }

@media (min-width: 750px) {
  body.snk-oscuro .snk-trust-bar__row { max-width: 1200px; padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 749px) {
  body.snk-oscuro .snk-trust-bar,
  body.snk-oscuro .snk-sizes,
  body.snk-oscuro .snk-reviews,
  body.snk-oscuro .snk-stories,
  body.snk-oscuro .snilko-faq,
  body.snk-oscuro .snilko-home-cta { margin-top: var(--sp-5); }
  body.snk-oscuro .snk-section-header { padding-top: var(--sp-4); }
  body.snk-oscuro .snk-home-productos { padding-top: var(--sp-3); }
  body.snk-oscuro .snk-sizes__inner,
  body.snk-oscuro .snk-reviews__inner,
  body.snk-oscuro .snk-stories__inner,
  body.snk-oscuro .snilko-faq__inner { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  body.snk-oscuro .snk-sizes,
  body.snk-oscuro .snk-reviews { padding-bottom: var(--sp-4); }
}

/* La columna de compra de la ficha. El tema no resetea el margin de <p> en ningún lado, y
   WooCommerce imprime <p class="price"> a 26px: 1em de 26px son 26 arriba y 26 abajo, o sea
   que el hueco más grande de toda la columna caía justo entre el precio y su badge OFERTA.
   Ojo: acá NO va `.woocommerce` con espacio, porque esa clase vive en el <body>. */
body.snk-oscuro div.product .summary .snilko-rating-pill { margin: 0 0 16px; }
body.snk-oscuro div.product .summary h1.product_title { margin: 0 0 12px; }
body.snk-oscuro div.product .summary p.price { margin: 0 0 8px; }
body.snk-oscuro .snk-oferta-ficha { margin: 0 0 24px; }
body.snk-oscuro .woocommerce-product-details__short-description { margin: 0 0 24px; }
body.snk-oscuro .woocommerce-product-details__short-description p:first-child { margin-top: 0; }
body.snk-oscuro .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
body.snk-oscuro .snilko-delivery { margin: 0 0 24px; }
body.snk-oscuro div.product form.cart .variations { margin-bottom: 16px; }
body.snk-oscuro .snk-talles { margin: 8px 0 0; }
body.snk-oscuro .snilko-pdp-acc { margin-top: 32px; }

/* ══════════════════════════════════════════════════════════════════════════════
   SUPERFICIES QUE HABÍAN QUEDADO SUELTAS
   ══════════════════════════════════════════════════════════════════════════════ */

/* La tarjeta del CTA de WhatsApp tenía borde rgba(0,0,0,.10) sobre #070d10: negro sobre
   negro, invisible literal. Se le deja el lavado turquesa (es un CTA, tiene que despegarse)
   pero con un borde que exista. */
body.snk-oscuro .snilko-home-cta__card {
  background: rgba(51, 204, 204, .08);
  border: 1px solid rgba(51, 204, 204, .35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.snk-oscuro .snilko-home-cta__text strong { color: var(--cel); }

/* El buscador sale del mismo header que el mega menú y estaba hecho de otro material:
   sin vidrio, con una sombra al 18% que sobre negro no existe, y el input era un
   rectángulo pelado sin borde ni radio. */
body.snk-oscuro .snk-buscador-caja {
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
body.snk-oscuro .snk-buscador-form { border-bottom: 0; }
body.snk-oscuro .snk-buscador-form input[type="search"] {
  background: var(--bg-panel);
  border: 1px solid rgba(234, 250, 251, .18);
  border-radius: 12px;
  padding: 10px 12px;
}
/* Abajo de 600px la caja va de borde a borde: ahí no lleva esquinas */
@media (max-width: 600px) {
  body.snk-oscuro .snk-buscador-caja { border-radius: 0; border-left: 0; border-right: 0; }
}

/* Las dos únicas cajas con esquina viva de todo el sitio, entre pastillas y círculos */
body.snk-oscuro .snk-car-count { border-radius: 999px; padding: 6px 14px; }
body.snk-oscuro .woocommerce-ordering select { border-radius: 8px; padding: 8px 12px; }

/* ══════════════════════════════════════════════════════════════════════════════
   DECIRLE AL NAVEGADOR QUE LA PÁGINA ES OSCURA

   color-scheme es la única forma de que el navegador dibuje SUS controles en oscuro. Sin
   esto: el desplegable de "Ordenar por" abre blanco con letra negra, el autocompletado de
   Chrome pinta el campo del checkout con fondo claro (un bloque blanco en el medio del
   formulario, en la página que cobra) y en Windows la barra de scroll es una franja gris
   clara al costado de un sitio negro.

   Va en el <html>, que es de donde el navegador toma el esquema, y se llega con :has()
   porque el header no tiene dónde colgar una clase ahí.
   ══════════════════════════════════════════════════════════════════════════════ */
html:has(body.snk-oscuro) {
  color-scheme: dark;
  scrollbar-color: rgba(234, 250, 251, .22) transparent;
  scrollbar-width: thin;
}
/* Estas dos NO se pueden juntar en una regla: mezclarlas la invalida entera.
   Y el scrollbar NUNCA como `body.snk-oscuro ::-webkit-scrollbar`: ese descendiente le
   ganaría al display:none de los tres carruseles y les devolvería la barra. */
body.snk-oscuro::selection,
body.snk-oscuro ::selection { background: var(--cel); color: var(--bg-primary); }
body.snk-oscuro::-moz-selection,
body.snk-oscuro ::-moz-selection { background: var(--cel); color: var(--bg-primary); }

/* El encabezado de "Stock recién llegado" era el único sin el riel de contenido: su caja
   iba de borde a borde, así que el título arrancaba 35px a la izquierda de todo lo demás. */
body.snk-oscuro .snk-section-header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   AJUSTES PEDIDOS POR LUIS (29/08)
   ══════════════════════════════════════════════════════════════════════════════ */

/* El carrito es una pelota, y cambia de color según tenga algo adentro: apagada cuando
   está vacía, turquesa apenas entra un producto. Así el estado se ve de un vistazo, sin
   tener que leer el número. */
body.snk-oscuro .snk-cart-link { color: var(--text-secondary); transition: color .25s var(--ease); }
body.snk-oscuro .snk-cart-link:hover { color: var(--text-primary); }
body.snk-oscuro .snk-cart-link.is-lleno { color: var(--cel); }
body.snk-oscuro .snk-cart-link.is-lleno:hover { color: var(--cel-bright); }
body.snk-oscuro .snk-cart-count {
  background: var(--cel);
  color: var(--bg-primary);
  font-weight: 700;
}

/* La estrella y los pedidos entregados: turquesa para que la prueba social resalte */
body.snk-oscuro .snk-trust__estrella { color: var(--cel); }
body.snk-oscuro .snk-trust__pedidos { color: var(--cel); }

/* ── El carrusel de la home: tarjetas más grandes ──────────────────────────────
   Medían 154px fijos: en un celular entraban dos enteras y el botín se veía chico. Ahora
   entra una y media, que es lo que invita a arrastrar (se ve que hay más al costado). */
/* Van los TRES: flex, width y max-width. El tema fija los tres en 154px, y el max-width es
   el que manda: con flex-basis 66% aplicado, la tarjeta seguía midiendo 154 porque el
   max-width la recortaba después. (Verificado: ni con !important inline cambiaba, o sea que
   no era cascada sino el layout.) */
@media (max-width: 749px) {
  body.snk-oscuro .snk-carrusel-track > li.product {
    flex: 0 0 66% !important; width: 66% !important; max-width: 66% !important;
  }
}
@media (min-width: 750px) and (max-width: 1099px) {
  body.snk-oscuro .snk-carrusel-track > li.product {
    flex: 0 0 38% !important; width: 38% !important; max-width: 38% !important;
  }
}
@media (min-width: 1100px) {
  body.snk-oscuro .snk-carrusel-track > li.product {
    flex: 0 0 calc(28% - 12px) !important; width: calc(28% - 12px) !important; max-width: calc(28% - 12px) !important;
  }
}
/* Con la tarjeta más grande la foto puede mostrar el botín entero en vez de recortarlo */
body.snk-oscuro .woocommerce .snk-carrusel-track > li.product a img,
body.snk-oscuro.woocommerce .snk-carrusel-track > li.product a img,
body.snk-oscuro .snk-carrusel-track > li.product a img { object-fit: contain; }

/* Los talles en la tarjeta: disponibles en turquesa, agotados grises y tachados.
   Es lo que hace que la tarjeta valga la pena mirar: se ve si está tu talle sin entrar. */
body.snk-oscuro .snk-card-talles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 0;
}
body.snk-oscuro .snk-card-talle {
  background: rgba(51, 204, 204, .12);
  border: 1px solid rgba(51, 204, 204, .3);
  color: var(--cel-bright);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
body.snk-oscuro .snk-card-talle.is-out {
  background: transparent;
  border-color: rgba(234, 250, 251, .1);
  color: var(--text-tertiary);
  text-decoration: line-through;
  font-weight: 400;
}

/* El badge de OFERTA: más chico y bien metido en la esquina, para que no se apoye sobre
   el botín. Las fotos traen fondo blanco horneado, así que ahí arriba siempre hay lugar. */
body.snk-oscuro span.onsale,
body.snk-oscuro.woocommerce span.onsale {
  top: 16px !important;
  right: 16px !important;
  padding: 4px 9px !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  letter-spacing: .06em;
}
@media (max-width: 749px) {
  body.snk-oscuro span.onsale,
  body.snk-oscuro.woocommerce span.onsale { top: 12px !important; right: 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LA FICHA, SEGÚN LO QUE PIDIÓ LUIS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Todo el texto de la columna centrado: con el producto centrado en su foto, la columna
   alineada a la izquierda dejaba el bloque desbalanceado. */
body.snk-oscuro div.product .summary { text-align: center; }
body.snk-oscuro div.product .summary .snilko-rating-pill,
body.snk-oscuro div.product .summary .price,
body.snk-oscuro div.product .summary .snk-talles,
body.snk-oscuro div.product .summary form.cart { justify-content: center; }
body.snk-oscuro div.product .summary .snilko-rating-pill { display: inline-flex; }
/* El gadget de entrega va CENTRADO, como el resto de la columna. Antes estaba
   exceptuado acá y quedaba pegado al borde izquierdo mientras el título, el precio,
   "Talle" y el botón iban centrados: era el único bloque fuera del eje. Lo pidió Luis
   el 01/09 mirando la ficha en el teléfono.
   El upsell y el acordeón siguen a la izquierda: son bloques de lectura, no de dato. */
body.snk-oscuro div.product .summary .snilko-delivery,
body.snk-oscuro div.product .summary .snilko-encargue { text-align: center; }
body.snk-oscuro div.product .summary .snk-upsell { text-align: left; }
body.snk-oscuro .snilko-pdp-acc { text-align: left; }

/* El precio vigente, en turquesa y grande: es el número que decide */
body.snk-oscuro div.product .summary .price ins,
body.snk-oscuro div.product .summary .price ins .amount,
body.snk-oscuro div.product .summary .price ins .woocommerce-Price-amount {
  color: var(--cel);
  text-decoration: none;
  font-weight: 900;
}
body.snk-oscuro div.product .summary .price del,
body.snk-oscuro div.product .summary .price del .amount { color: var(--text-tertiary); }
/* Lo que se ahorra, al lado y más fino: acompaña al precio sin pelearle.
   ⚠️ El `em` es relativo al padre y este texto vive en DOS lugares con padres muy distintos:
   en la ficha cuelga de `.price` (26px) y da 16px, pero en la barra fija de abajo cuelga de
   `.snilko-stickybuy__price` (13px) y daba 8,06px. Medido el 30/08: el argumento de venta,
   ilegible y fijo en pantalla justo mientras el cliente decide.
   Con `max()` el de la ficha queda igual que siempre y el de la barra no baja de 12px. */
body.snk-oscuro .snk-ahorro {
  color: var(--cel);
  font-weight: 400;
  font-size: max(12px, .62em);
  letter-spacing: .02em;
  white-space: nowrap;
}
body.snk-oscuro .snk-ahorro .amount,
body.snk-oscuro .snk-ahorro .woocommerce-Price-amount { color: var(--cel); font-weight: 600; }

/* La lupita de la esquina no se ve, pero NO se saca del DOM ni se pone en display:none:
   es la que abre el visor de WooCommerce, y un elemento en display:none no recibe el click
   programático de jQuery, que es quien escucha. Queda transparente y sin capturar clicks
   propios; el JS le reenvía el de la foto.
   (Se probó moverla dentro de la foto para usarla como capa: rompe el visor, porque
   WooCommerce arma la galería después y su init ya no la encuentra donde la dejó.) */
body.snk-oscuro .woocommerce-product-gallery__trigger,
body.snk-oscuro.woocommerce div.product .woocommerce-product-gallery__trigger {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.snk-oscuro .woocommerce-product-gallery__image,
body.snk-oscuro .woocommerce-product-gallery__image a { cursor: zoom-in; }

/* "Talle" pasa a ser un título de verdad, en turquesa */
body.snk-oscuro div.product .summary .variations label,
body.snk-oscuro div.product .summary label[for*="talle"],
body.snk-oscuro .snk-talles__label {
  color: var(--cel);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

/* Los talles en grilla de ancho fijo: en flex cada uno medía distinto (46, 51, 47, 59) y
   el último renglón quedaba desparejo. Con columnas iguales entran siempre parejos, y el
   ancho mínimo hace que en el celular se acomoden solos sin dejar uno colgado. */
/* Los talles, TODOS en una sola fila.
   Con auto-fit se acomodaban en dos filas y la última quedaba coja. Con las columnas
   repartiendo el ancho disponible, seis talles quedan más anchos que ocho, pero siempre en
   una línea y siempre parejos, igual en el celular que en la compu. El número de columnas
   lo pone el JS al contar los talles del producto. */
body.snk-oscuro .snk-talles {
  display: grid;
  grid-template-columns: repeat(var(--snk-talles, 6), 1fr);
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.snk-oscuro .snk-talle {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 6px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 3.4vw, 15px);
}

/* El "3 disponibles" que aparece al elegir talle: mata la urgencia que hace comprar.
   (Solo se oculta el conteo; el aviso de agotado sigue saliendo por el estado del botón.) */
body.snk-oscuro .woocommerce-variation-availability,
body.snk-oscuro div.product .summary p.stock.in-stock { display: none !important; }

/* El visor de fotos, en oscuro (PhotoSwipe viene con su propio fondo y sus botones) */
body.snk-oscuro .pswp__bg { background: rgba(7, 13, 16, .96); }
body.snk-oscuro .pswp__caption,
body.snk-oscuro .pswp__top-bar { background: transparent; }
body.snk-oscuro .pswp__counter,
body.snk-oscuro .pswp__caption__center { color: var(--text-secondary); }
body.snk-oscuro .pswp__button { filter: brightness(1.4); }

/* ── El carrito, centrado ─────────────────────────────────────────────────────
   Con dos o tres líneas, el bloque alineado a la izquierda dejaba la página desbalanceada
   contra el resumen de la derecha. */
body.snk-oscuro .wp-block-woocommerce-cart .wc-block-cart__main,
body.snk-oscuro .wc-block-cart-items,
body.snk-oscuro .wc-block-cart__totals-title,
body.snk-oscuro .wp-block-woocommerce-empty-cart-block { text-align: center; }
body.snk-oscuro .wc-block-cart-items__header { justify-content: center; }
body.snk-oscuro .wc-block-cart-item__wrap { text-align: center; }
body.snk-oscuro .wc-block-components-product-name,
body.snk-oscuro .wc-block-cart-item__prices,
body.snk-oscuro .wc-block-components-product-metadata { text-align: center; }
body.snk-oscuro .wc-block-cart-item__quantity { display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.snk-oscuro .wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
body.snk-oscuro .wp-block-woocommerce-empty-cart-block h2 { text-align: center; }

/* El cupón: que se lea como una invitación a usarlo, no como una pregunta al pasar */
body.snk-oscuro .wc-block-components-totals-coupon__button,
body.snk-oscuro .wc-block-components-panel__button {
  color: var(--cel) !important;
  font-weight: 700;
}
body.snk-oscuro .wc-block-components-totals-coupon .wc-block-components-text-input input {
  background: var(--bg-panel) !important;
  border-color: rgba(51, 204, 204, .35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LA PANTALLA DE PAGO, MÁS CORTA

   Cada cosa que se saca de acá es una excusa menos para abandonar. Lo que va:
   · El aviso de "estás comprando como invitado": no hay cuentas en esta tienda, así que
     no informa nada, solo sugiere que uno se está perdiendo algo.
   · El checkbox de "usar la misma dirección para facturación": no se factura. Se oculta
     MARCADO (verificado: viene checked por defecto), así WooCommerce sigue copiando la
     dirección y no se rompe nada.
   · El bloque de notas nativo: quedó duplicado con el campo propio, que además dice para
     qué sirve ("dejar en portería…") en vez de un genérico "añade una nota".
   ══════════════════════════════════════════════════════════════════════════════ */
body.snk-oscuro .wc-block-checkout__guest-checkout-notice,
body.snk-oscuro .wc-block-checkout__use-address-for-billing,
body.snk-oscuro .wc-block-checkout__order-notes,
body.snk-oscuro .wp-block-woocommerce-checkout-order-note-block,
body.snk-oscuro .wp-block-woocommerce-checkout-pickup-options-block { display: none !important; }

/* El checkbox de facturación tiene una clase con guion final en el DOM real */
body.snk-oscuro [class*="wc-block-checkout__use-address-"] { display: none !important; }

/* Las dos opciones de envío ahora dicen cuánto tarda cada una: que se lean como una
   decisión, no como una lista de trámites */
body.snk-oscuro .wc-block-components-radio-control__option {
  padding: 14px 16px;
  border-radius: 12px;
  transition: .25s var(--ease);
}
body.snk-oscuro .wc-block-components-radio-control__option--checked-option-highlighted,
body.snk-oscuro .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  background: rgba(51, 204, 204, .1);
  border-color: rgba(51, 204, 204, .4) !important;
}

/* El título de la pantalla de pago: que se lea como lo que es, el último paso */
body.snk-oscuro .wp-block-post-title,
body.snk-oscuro .woocommerce-checkout .entry-title {
  color: var(--text-primary);
  text-align: center;
}

/* El país: la lista quedó con una sola opción (el filtro de países deja solo Uruguay) y
   el campo ya viene con UY puesto. Elegir en una lista de uno no es una decisión, es un
   trámite: se oculta el campo, no el valor, así el pedido sigue viajando con su país. */
body.snk-oscuro .wc-block-components-address-form__country,
body.snk-oscuro #shipping-country,
body.snk-oscuro #billing-country { display: none !important; }
body.snk-oscuro .wc-block-components-address-form__country + * { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   SEGUNDA VUELTA DE LUIS (29/08)
   ══════════════════════════════════════════════════════════════════════════════ */

/* La barra de confianza vuelve a ser HORIZONTAL en el celular. Apilada ocupaba media
   pantalla para decir tres cosas que ya están en la barra de arriba. Ícono arriba, título
   abajo, y el subtítulo se guarda: en 110px por columna no entra y solo hace ruido. */
@media (max-width: 749px) {
  body.snk-oscuro .snk-trust-bar__row {
    flex-direction: row !important;
    padding: 16px 12px !important;
    gap: 4px !important;
  }
  body.snk-oscuro .snk-trust-bar__item {
    flex-direction: column !important;
    gap: 7px !important;
    text-align: center;
    padding: 0 2px;
  }
  body.snk-oscuro .snk-trust-bar__icon { width: 34px !important; height: 34px !important; }
  body.snk-oscuro .snk-trust-bar__icon svg { width: 17px; height: 17px; }
  body.snk-oscuro .snk-trust-bar__title { font-size: 11.5px !important; line-height: 1.25 !important; }
  /* El subtítulo vuelve: es el que explica ("Entrega 48-72h · Envío se paga al recibir").
     Chico y en dos renglones, pero está: sin él los títulos quedan sueltos. */
  body.snk-oscuro .snk-trust-bar__sub {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    margin-top: 2px;
  }
  body.snk-oscuro .snk-trust-bar__divider {
    width: 1px !important;
    height: 46px !important;
    margin: 0 !important;
    align-self: center;
  }
}

/* "Elegir otro talle": Luis lo leyó como "elegí otro par más", que es lo contrario de lo
   que hace (borra la elección). En una ficha con seis talles a la vista, volver atrás es
   tocar otro talle: el link no hace falta. */
body.snk-oscuro .reset_variations,
body.snk-oscuro a.reset_variations { display: none !important; }

/* ── Los filtros, cerrados ─────────────────────────────────────────────────────
   Pasan a <details>: la fila de encabezados ocupa cuatro renglones en vez de media
   pantalla, y los botines quedan a la vista apenas entrás. Se abre el que te interese. */
body.snk-oscuro details.snk-filtros {
  background: var(--bg-glass);
  border: 1px solid var(--linea);
  border-radius: 12px;
  /* el tema le pone padding-bottom:16px a .snk-filtros: cerrado dejaba un hueco */
  margin: 0 0 8px !important;
  padding: 0 !important;
  overflow: hidden;
}
/* En el celular van de a dos por fila: cerrados y en una sola columna seguían siendo
   200px antes del primer botín. Así el bloque entero entra en cuatro dedos. */
/* Los cerrados se reparten el ancho de la pantalla en una sola fila; el que abrís pasa a
   ocupar todo, para que los chips entren cómodos. Se logra con flex sobre el contenedor de
   la tienda, marcando los <details> como los únicos que se estiran. */
/* Sin `.woocommerce` con espacio: esa clase vive en el <body>, así que pedirla como
   descendiente no matchea nada. Ya me pasó antes con 44 reglas. */
body.snk-oscuro .snk-filtros-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
body.snk-oscuro .snk-filtros-fila > details.snk-filtros {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
}
body.snk-oscuro .snk-filtros-fila > details.snk-filtros[open] { flex: 1 1 100%; }
body.snk-oscuro .snk-filtros-fila > details.snk-filtros > summary.snk-filtros-head { padding: 11px 10px; }
body.snk-oscuro .snk-filtros-fila .snk-filtros-label {
  font-size: 12.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 749px) {
  body.snk-oscuro .snk-filtros-fila { gap: 6px; }
  body.snk-oscuro .snk-filtros-fila .snk-filtros-label { font-size: 11.5px; }
  body.snk-oscuro .snk-filtros-fila > details.snk-filtros > summary.snk-filtros-head { padding: 10px 8px; gap: 4px; }
}
body.snk-oscuro details.snk-filtros > summary.snk-filtros-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  transition: background .2s var(--ease);
}
body.snk-oscuro details.snk-filtros > summary::-webkit-details-marker { display: none; }
body.snk-oscuro details.snk-filtros > summary:hover { background: rgba(51, 204, 204, .07); }
body.snk-oscuro .snk-filtros-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 14px;
}
body.snk-oscuro .snk-filtros-chev { color: var(--text-secondary); transition: transform .25s var(--ease); flex: none; }
body.snk-oscuro details.snk-filtros[open] > summary .snk-filtros-chev { transform: rotate(180deg); }
/* Con un filtro aplicado el encabezado se pinta: se ve cuál está activo sin abrirlo */
body.snk-oscuro details.snk-filtros[open] > summary { border-bottom: 1px solid var(--linea); }
body.snk-oscuro details.snk-filtros:has(.is-active) > summary .snk-filtros-label { color: var(--cel); }
body.snk-oscuro details.snk-filtros:has(.is-active) { border-color: rgba(51, 204, 204, .35); }
body.snk-oscuro details.snk-filtros .snk-filtros-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 14px;
}
body.snk-oscuro details.snk-filtros .snk-filtros-limpiar {
  display: inline-block;
  padding: 8px 14px 0;
  color: var(--cel);
  font-size: 13px;
  font-weight: 700;
}

/* ── El checkout: elegir cómo lo recibís ───────────────────────────────────────
   El <select> se dibuja como dos cuadraditos: la elección se ve entera de un vistazo, sin
   desplegar nada, que es lo que hace que se elija rápido. */
body.snk-oscuro [id$="snilkovia-entrega"] {
  background: var(--bg-panel) !important;
  border-color: rgba(51, 204, 204, .35) !important;
  font-weight: 700;
}
body.snk-oscuro .wc-block-components-address-form [id$="snilkovia-entrega"] + label,
body.snk-oscuro label[for$="snilkovia-entrega"] { color: var(--cel); font-weight: 700; }

/* El campo de dirección, mientras no elegiste cómo lo recibís */
body.snk-oscuro .snk-donde-bloqueado input {
  opacity: .55;
  cursor: not-allowed;
  border-style: dashed !important;
}

/* Los métodos de envío se van: el envío es siempre DAC y siempre se paga al recibir, así
   que dos opciones con el mismo precio eran dos nombres para lo mismo. Lo que decide
   (casa o agencia) ya se eligió arriba, en la dirección. */
body.snk-oscuro .wp-block-woocommerce-checkout-shipping-methods-block,
body.snk-oscuro .wp-block-woocommerce-checkout-shipping-method-block,
body.snk-oscuro .wc-block-checkout__shipping-option,
body.snk-oscuro .wc-block-components-shipping-rates-control { display: none !important; }

/* Y la sección "algo más que tengamos que saber", que no aportaba nada */
body.snk-oscuro .wp-block-woocommerce-checkout-additional-information-block { display: none !important; }

/* El selector de "¿cómo lo recibís?" va ARRIBA de la dirección, no al final del bloque:
   la decisión cambia lo que hay que escribir, así que tiene que venir antes.
   (WooCommerce Blocks pone los campos adicionales al final; el orden se corrige con flex.) */
/* El orden real de los campos. WooCommerce Blocks pone los campos propios al final, y la
   pregunta "¿cómo lo recibís?" tiene que ir ANTES de la dirección: es la que decide qué hay
   que escribir ahí. La clase del contenedor salió de leer el DOM del checkout real. */
body.snk-oscuro .wc-block-components-address-form { display: flex; flex-direction: column; }
body.snk-oscuro .wc-block-components-address-form > * { order: 9; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__first_name { order: 1; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__last_name { order: 2; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-select-input-snilkovia-entrega { order: 3; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__address_1 { order: 4; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__address_2-toggle,
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__address_2-hidden-input,
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__address_2 { order: 5; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__city { order: 6; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__state { order: 7; }
body.snk-oscuro .wc-block-components-address-form > .wc-block-components-address-form__phone { order: 8; }

/* La pregunta, destacada: es la primera decisión del formulario */
body.snk-oscuro .wc-block-components-select-input-snilkovia-entrega {
  background: rgba(51, 204, 204, .07);
  border: 1px solid rgba(51, 204, 204, .28);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 4px;
}


/* ── El talle: título arriba y centrado, cards abajo ───────────────────────────
   No se lograba con text-align porque WooCommerce arma las variaciones con una TABLA:
   <td class="label"> a la izquierda y <td class="value"> a la derecha. Por eso el título
   quedaba al costado por más que se centrara. Hay que sacarle el layout de tabla. */
body.snk-oscuro .woocommerce div.product form.cart table.variations,
body.snk-oscuro div.product form.cart table.variations,
body.snk-oscuro table.variations tbody,
body.snk-oscuro table.variations tr,
body.snk-oscuro table.variations th,
body.snk-oscuro table.variations td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Es un <th class="label">, no un <td>: la primera versión de esta regla no lo alcanzaba
   y el título seguía midiendo 34px pegado a la izquierda. */
body.snk-oscuro table.variations th.label,
body.snk-oscuro table.variations td.label {
  margin-bottom: 10px !important;
  text-align: center !important;
}
body.snk-oscuro table.variations th.label label,
body.snk-oscuro table.variations td.label label,
body.snk-oscuro div.product .summary .variations label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: var(--cel) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: .04em;
  margin: 0 !important;
}

/* ── "Agregar al carrito": el botón que cierra la venta ────────────────────────
   Es el más importante de la página y medía 177px de 339 en una esquina. Va a todo el
   ancho, centrado y más alto, como en Shopify. */
body.snk-oscuro .woocommerce div.product form.cart .button.single_add_to_cart_button,
body.snk-oscuro div.product form.cart .single_add_to_cart_button,
body.snk-oscuro button.single_add_to_cart_button {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 18px auto 0 !important;
  padding: 17px 24px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  border-radius: 999px !important;
}
body.snk-oscuro div.product form.cart .single_add_to_cart_button:not(.disabled):not([disabled]) {
  box-shadow: 0 0 34px var(--cel-glow);
}
body.snk-oscuro div.product form.cart { text-align: center; }

/* ── Las formas de pago: el círculo caía encima del texto ──────────────────────
   El input va en position:absolute y el padding que se le puso a la opción lo dejó
   pisando la etiqueta (medido: el radio arranca en x=35 y el texto también). Se le hace
   lugar con padding a la izquierda. */
body.snk-oscuro .wc-block-components-radio-control__option {
  padding: 14px 16px 14px 44px !important;
}
body.snk-oscuro .wc-block-components-radio-control__input {
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}
body.snk-oscuro .wc-block-components-radio-control__label,
body.snk-oscuro .wc-block-components-radio-control__description { padding-left: 0 !important; }
body.snk-oscuro .wc-block-components-radio-control__option-layout { padding-left: 0 !important; }

/* "Añadir apartamento, casa, etc.": un campo más para escribir en el último paso, y la
   dirección de arriba ya pide puerta y esquina. Nadie lo usa y suma una decisión. */
body.snk-oscuro .wc-block-components-address-form__address_2-toggle,
body.snk-oscuro .wc-block-components-address-form__address_2-hidden-input,
body.snk-oscuro .wc-block-components-address-form__address_2 { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   EL CARRITO AL COSTADO
   ══════════════════════════════════════════════════════════════════════════════ */
.snk-cajon { position: fixed; inset: 0; z-index: 200; }
.snk-cajon[hidden] { display: none; }
.snk-cajon__fondo {
  position: absolute; inset: 0;
  background: rgba(3, 7, 9, .6);
  opacity: 0;
  transition: opacity .26s cubic-bezier(.16, 1, .3, 1);
}
.snk-cajon.is-open .snk-cajon__fondo { opacity: 1; }
.snk-cajon__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.snk-cajon.is-open .snk-cajon__panel { transform: none; }

body.snk-oscuro .snk-cajon__panel {
  background: var(--bg-secondary);
  border-left: 1px solid var(--linea);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
}
body.snk-oscuro .snk-cajon__cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--linea);
}
body.snk-oscuro .snk-cajon__titulo { color: var(--text-primary); font-size: 17px; font-weight: 800; }
body.snk-oscuro .snk-cajon__cerrar {
  background: var(--bg-glass); border: 1px solid var(--linea); color: var(--text-primary);
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; transition: .25s var(--ease);
}
body.snk-oscuro .snk-cajon__cerrar:hover { border-color: rgba(51,204,204,.5); color: var(--cel); }

body.snk-oscuro .snk-cajon__cuerpo { flex: 1; overflow-y: auto; padding: 8px 20px; }
body.snk-oscuro .snk-cajon__vacio { color: var(--text-secondary); text-align: center; padding: 40px 0; }
body.snk-oscuro .snk-cajon__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
}
body.snk-oscuro .snk-cajon__item:last-child { border-bottom: 0; }
body.snk-oscuro .snk-cajon__item img {
  width: 64px; height: 64px; object-fit: contain;
  background: #fff; border-radius: 10px; flex: none;
}
body.snk-oscuro .snk-cajon__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
body.snk-oscuro .snk-cajon__nombre { color: var(--text-primary); font-size: 14px; font-weight: 700; line-height: 1.3; }
body.snk-oscuro .snk-cajon__talle { color: var(--cel); font-size: 12.5px; font-weight: 700; }
body.snk-oscuro .snk-cajon__precio { color: var(--text-secondary); font-size: 14px; }
body.snk-oscuro .snk-cajon__quitar {
  background: none; border: 0; color: var(--text-tertiary); cursor: pointer;
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: grid; place-items: center; transition: .2s var(--ease);
}
body.snk-oscuro .snk-cajon__quitar:hover { color: #ff8a8a; background: rgba(255, 107, 107, .1); }

body.snk-oscuro .snk-cajon__pie { padding: 18px 20px 22px; border-top: 1px solid var(--linea); }
body.snk-oscuro .snk-cajon__total {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--text-primary); font-size: 15px; margin-bottom: 2px;
}
body.snk-oscuro .snk-cajon__total strong { color: var(--cel); font-size: 24px; font-weight: 900; }
body.snk-oscuro .snk-cajon__envio { color: var(--text-tertiary); font-size: 12.5px; margin: 0 0 14px; }
body.snk-oscuro .snk-cajon__pagar {
  display: block; text-align: center;
  background: var(--cel); color: var(--bg-primary);
  padding: 16px; border-radius: 999px;
  font-size: 16px; font-weight: 800;
  transition: .25s var(--ease);
}
body.snk-oscuro .snk-cajon__pagar:hover { background: var(--cel-bright); box-shadow: 0 0 30px var(--cel-glow); }
body.snk-oscuro .snk-cajon__seguir {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); font-size: 14px; padding: 10px;
}
body.snk-oscuro .snk-cajon__seguir:hover { color: var(--cel); }

/* Mientras agrega */
body.snk-oscuro .single_add_to_cart_button.is-cargando { opacity: .7; pointer-events: none; }

/* ── ENCARGUE: el aviso de plazo en oscuro ────────────────────────────────────
   El ámbar de style.css está calibrado contra blanco. Sobre #070d10 ese mismo tono se
   apaga y el aviso deja de leerse como aviso, que es justo lo que no puede pasar: es la
   frase que separa "te llega el jueves" de "te llega en dos meses". Se sube el tono y se
   baja el fondo, manteniendo el mismo ámbar de familia. */
.snk-aviso-encargue{
  border-color:rgba(240,176,80,.42);
  background:rgba(240,176,80,.10);
  color:#eef2f4;
}
.snk-aviso-encargue--mixto{
  border-color:rgba(255,150,60,.55);
  background:rgba(255,150,60,.13);
}
.snk-cajon__encargue{
  color:#f2c07a;
  background:rgba(240,176,80,.16);
  border-color:rgba(240,176,80,.40);
}
/* El gadget de la ficha: en claro el texto va sobre blanco, acá no. */
/* ⚠️ Estas cuatro van CON el prefijo `body.snk-oscuro` y no sin él, aunque este archivo se
   cargue solo en oscuro y el prefijo parezca de más. El motivo no es el tema: es la
   ESPECIFICIDAD. El gadget trae su propio <style> inline en el body (en
   secciones/producto-entrega-encargue.php), o sea DESPUÉS de este archivo en el documento.
   Con un solo nivel de clase las dos reglas empatan y gana la última: la del tema claro.
   Medido el 29/08: el título quedaba #0b0b0b sobre #1d1c14 = 1,15:1, invisible, con esta
   regla escrita acá arriba sin efecto ninguno. */
body.snk-oscuro .snilko-encargue{
  border-color:rgba(240,176,80,.40);
  background:rgba(240,176,80,.09);
}
body.snk-oscuro .snilko-encargue__title{ color:#eef2f4; }
body.snk-oscuro .snilko-encargue__fecha{ color:#f2c07a; }