/** Shopify CDN: Minification failed

Line 1296:0 Unexpected "}"

**/
/* ==========================================================================
   THORO 650 — Rediseño del sitio (WEBSITETHOROMOVIL)
   --------------------------------------------------------------------------
   Todo lo que no es el menú overlay, que vive en thoro-nav.css.

   Igual que allí, las medidas salen del artboard del PDF (1126 px = 375 @3x),
   divididas entre 3 y ancladas al extremo bajo de cada clamp() para que a
   375 px de ancho el render calque el mockup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Botón flotante "Contáctanos"
   -------------------------------------------------------------------------- */
.thoro-contact-fab {
  position: fixed;
  left: var(--fab-left, 18px);
  bottom: var(--fab-bottom, 20px);
  z-index: 2300; /* por debajo del drawer (5600) y del carrito */
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 2.4vw, 16px);
  color: var(--fab-color, var(--THORO-BONE, #fffdf0));
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  transition: opacity 0.25s ease;
}

.thoro-contact-fab__logo {
  display: block;
  flex: 0 0 auto;
  width: var(--fab-logo, 27px);
}

.thoro-contact-fab__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.thoro-contact-fab__text {
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: var(--fab-size, 35px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (hover: hover) {
  .thoro-contact-fab:hover {
    opacity: 0.72;
  }
}

@media only screen and (max-width: 749px) {
  .thoro-contact-fab--desktop-only {
    display: none;
  }
}

/* Se aparta cuando hay un drawer abierto para no quedar por encima. */
.js__scroll__lock .thoro-contact-fab {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Hero — botones del banner slider
   El mockup usa Marlboro para el CTA ("Comprar") en una píldora de contorno
   fina (~90 × 26 px a 375). El color, el borde y el radio siguen saliendo de
   los ajustes de cada slide en el editor.

   Animación "switch" (.banner-btn--switch): al pasar el ratón o al pulsar, un
   relleno del color del texto barre la píldora de izquierda a derecha mientras
   una bolita cruza de un lado al otro, como un interruptor; el texto pasa al
   color --switch-on-text. El JS de la sección navega cuando termina.
   -------------------------------------------------------------------------- */
.banner-btn {
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Prefijado con .banner-btn-wrap para ganarle al <style> de la sección.
   Mismo interruptor que "Agregar al carrito" de la ficha: bolita de contorno
   visible a la izquierda en reposo; al pasar/pulsar el relleno barre y la
   bolita cruza a la derecha. */
.banner-btn-wrap .banner-btn--switch {
  --knob: clamp(24px, 7vw, 30px);
  --gap: 6px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(40px, 11.7vw, 50px);
  padding: 0 calc(var(--knob) + 18px);
  line-height: 1;
  font-weight: 400;
}

.banner-btn-wrap .banner-btn--switch:hover {
  transform: none;
  opacity: 1;
}

/* El color del texto se cambia en el <span>, no en el <a>: el <a> lleva el
   color inline desde el editor y una clase no podría pisarlo. */
.banner-btn__label {
  position: relative;
  z-index: 2;
  color: inherit;
  transition: color 0.3s ease 0.12s;
}

/* Relleno: parte fuera por la izquierda y barre hacia la derecha. */
.banner-btn__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--switch-fill, currentColor);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Bolita del interruptor: contorno a la izquierda en reposo; viaja a la
   derecha y se rellena al encender. */
.banner-btn__knob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--gap);
  width: var(--knob);
  height: var(--knob);
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transform: translate3d(0, -50%, 0);
  transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease, border-color 0.3s ease;
}

/* Encendido: por hover en escritorio, por .is-on (JS) al pulsar. */
.banner-btn-wrap .banner-btn--switch.is-on .banner-btn__label,
.banner-btn-wrap .banner-btn--switch:active .banner-btn__label {
  color: var(--switch-on-text, #000);
}

.banner-btn-wrap .banner-btn--switch.is-on .banner-btn__fill,
.banner-btn-wrap .banner-btn--switch:active .banner-btn__fill {
  transform: translate3d(0, 0, 0);
}

.banner-btn-wrap .banner-btn--switch.is-on .banner-btn__knob,
.banner-btn-wrap .banner-btn--switch:active .banner-btn__knob {
  left: calc(100% - var(--knob) - var(--gap));
  background: var(--switch-on-text, #000);
  border-color: var(--switch-on-text, #000);
}

@media (hover: hover) {
  .banner-btn-wrap .banner-btn--switch:hover .banner-btn__label {
    color: var(--switch-on-text, #000);
  }

  .banner-btn-wrap .banner-btn--switch:hover .banner-btn__fill {
    transform: translate3d(0, 0, 0);
  }

  .banner-btn-wrap .banner-btn--switch:hover .banner-btn__knob {
    left: calc(100% - var(--knob) - var(--gap));
    background: var(--switch-on-text, #000);
    border-color: var(--switch-on-text, #000);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-btn-wrap .banner-btn--switch,
  .banner-btn__fill,
  .banner-btn__knob,
  .banner-btn__label {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   3. Footer
   Dos columnas: el logo a la izquierda y los bloques desde el 51,8 % del
   ancho (x = 194,2 de 375 en el mockup). Los <details> del tema ya son los
   acordeones SOCIAL / AYUDA / INFORMACIÓN / CONTACTO del diseño.
   -------------------------------------------------------------------------- */
.site-footer-wrapper {
  --bg: var(--THORO-BLACK, #000);
  --text: var(--THORO-BONE, #fffdf0);
  --text-dark: var(--THORO-BONE, #fffdf0);
  --link: var(--THORO-BONE, #fffdf0);
  --link-hover: var(--THORO-BONE, #fffdf0);
  --border: rgba(255, 253, 240, 0.35);

  --thoro-foot-col: 51.8%;
  --thoro-foot-title: clamp(20px, 6.3vw, 34px); /* 23,6 px a 375 */
  --thoro-foot-row: clamp(28px, 8.6vw, 44px); /* paso ~32 px       */

  background: var(--bg);
  color: var(--text);
}

.site-footer {
  display: grid;
  grid-template-columns: var(--thoro-foot-col) 1fr;
  align-items: start;
  column-gap: 0;
}

.site-footer > collapsible-elements {
  display: block;
  grid-column: 2;
  min-width: 0;
  margin-top: clamp(48px, 17vw, 120px); /* el mockup deja un gran hueco entre © y SOCIAL */
}

/* "©THORO650 2026" arriba a la derecha, a la altura del logo. */
.site-footer .footer__copyright-top {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
  padding-top: 6px;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 14px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer__logo__wrapper {
  grid-column: 1;
}

/* Los bloques se apilan en una sola columna: el mockup no los pone en fila. */
.site-footer .footer__blocks {
  display: block;
}

.site-footer .footer__block {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer__block--menu,
.site-footer .footer__block--page {
  border-bottom: 1px solid var(--border);
}

.site-footer .footer__block__title {
  min-height: var(--thoro-foot-row);
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: var(--thoro-foot-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* El mockup pone los sublinks a 5 px, ilegible y por debajo del mínimo táctil.
   Se sube a 11,5 px, que es lo más pequeño que sigue siendo usable. */
.site-footer .footer__quicklinks a,
.site-footer .footer__block--text p,
.site-footer .footer__block--text {
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(11.5px, 3.1vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.site-footer .footer__quicklinks {
  padding-bottom: 10px;
}

.site-footer .footer__quicklinks a {
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .site-footer .footer__quicklinks a:hover {
    opacity: 1;
    text-decoration: underline;
  }
}

@media only screen and (min-width: 990px) {
  .site-footer-wrapper {
    --thoro-foot-col: 40%;
  }
}

/* --------------------------------------------------------------------------
   3b. Barra inferior del footer (sections/section-supporting-menu.liquid)
   El mockup dibuja "TODOS LOS DERECHOS RESERVADOS / ALL RIGHTS RESERVED /
   DESIGNED BY…" como tres líneas apiladas dentro del mismo negro del footer,
   no como una barra clara aparte. Se fuerza el mismo negro y se apilan las
   líneas del copyright en vez de dejarlas en fila.
   -------------------------------------------------------------------------- */
.supporting-menu {
  --bg: var(--THORO-BLACK, #000);
  --text: var(--THORO-BONE, #fffdf0);
  --text-dark: var(--THORO-BONE, #fffdf0);
  --link: var(--THORO-BONE, #fffdf0);
  --link-hover: var(--THORO-BONE, #fffdf0);
  --border: rgba(255, 253, 240, 0.35);
  padding-top: clamp(16px, 4.3vw, 32px);
}

.supporting-menu__copyright {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* El mockup pone las tres líneas del copyright en la columna derecha del
   footer (51,8 %) y el sello 650 a la izquierda; se reserva ese hueco. */
.supporting-menu .supporting-menu__item--copyright,
.supporting-menu .supporting-menu__item--payment {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--thoro-foot-col, 51.8%);
}

.supporting-menu__payment {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media only screen and (min-width: 990px) {
  .supporting-menu .supporting-menu__item--copyright,
  .supporting-menu .supporting-menu__item--payment {
    padding-left: 40%;
  }
}

.supporting-menu__copyright li {
  display: block;
  padding: 0;
}

.supporting-menu__copyright a {
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
}

@media (hover: hover) {
  .supporting-menu__copyright a:hover {
    opacity: 1;
    text-decoration: underline;
  }
}

.supporting-menu__payment {
  margin-top: clamp(12px, 3.2vw, 20px);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   4. Marquee (snippets/thoro-marquee.liquid)
   Tira de texto a sangre completa que se repite por todo el rediseño.
   -------------------------------------------------------------------------- */
.thoro-marquee {
  overflow: hidden;
  width: 100%;
  color: var(--mq-color, currentColor);
  -webkit-user-select: none;
  user-select: none;
}

.thoro-marquee__track {
  display: flex;
  width: max-content;
  animation: thoro-marquee-scroll var(--mq-speed, 30s) linear infinite;
}

.thoro-marquee__item {
  display: block;
  flex: 0 0 auto;
  padding-right: 0.35em;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: var(--mq-size, 40px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes thoro-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Variante quieta: el texto sangra por ambos lados sin moverse. */
.thoro-marquee--static .thoro-marquee__track {
  animation: none;
  transform: translate3d(-0.6%, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .thoro-marquee__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   5. Sucursales
   Marquee sobre negro y, encima de la foto, logo + nombre + domicilio + mapa.
   Medidas del mockup a 375: etiquetas 12 px, dirección 8,1 px (se sube a 11).
   -------------------------------------------------------------------------- */
.sucursales-thoro {
  background: var(--THORO-BLACK, #000);
  color: var(--THORO-BONE, #fffdf0);
}

.sucursales-thoro .sucursal-card {
  --card-pad: clamp(16px, 5.5vw, 48px);
  position: absolute;
  inset: auto 0 0 0;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(12px, 4.3vw, 28px);
  width: auto;
  max-width: 720px;
  padding: var(--card-pad) var(--card-pad) clamp(28px, 9vw, 56px);
  color: var(--THORO-BONE, #fffdf0);
}

.sucursales-thoro .sucursal-card p,
.sucursales-thoro .sucursal-card h2 {
  margin: 0;
}

.sucursal-card__logo {
  width: clamp(96px, 29.3vw, 200px); /* 110 px a 375 */
}

.sucursal-card__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Rejilla del mockup:
     [ DOMICILIO ]  [ dirección    ]
     [ LA PERLA  ]  [   VER MAPA   ] */
.sucursal-card__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(6px, 2.1vw, 14px) clamp(10px, 3.3vw, 24px);
}

.sucursales-thoro .sucursal-card__label,
.sucursales-thoro .sucursal-card__name {
  margin: 0;
  justify-self: end;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 16px); /* 12 px a 375 */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sucursales-thoro .sucursal-card__address,
.sucursales-thoro .sucursal-card__address p {
  margin: 0;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(11px, 2.9vw, 14px); /* el mockup pone 8,1: ilegible */
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.sucursales-thoro .sucursal-card__map {
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 clamp(14px, 4.3vw, 30px);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

@media (hover: hover) {
  .sucursales-thoro .sucursal-card__map:hover {
    background: var(--THORO-BONE, #fffdf0);
    color: var(--THORO-BLACK, #000);
  }
}

/* --------------------------------------------------------------------------
   6. Categorías — hero de scroll (sections/thoro-categorias.liquid)

   Cada categoría ocupa la pantalla entera y el índice va fijo en el centro: la
   foto que se está viendo enciende su nombre y su enlace. El montaje es una
   rejilla de una sola celda con las fotos y el índice superpuestos; el índice
   es sticky dentro de esa celda, así que se queda quieto mientras las fotos
   pasan por detrás. Sin escuchar el scroll: quién manda lo decide un
   IntersectionObserver en el liquid.

   Sustituye a la lista escalonada (número + título + foto solapada). La versión
   anterior está guardada por si hiciera falta volver.
   -------------------------------------------------------------------------- */
.thoro-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  color: var(--th-text, #fffdf0);
}

/* Fotos e índice comparten celda: uno encima del otro. */
.thoro-hero > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.thoro-hero__media {
  position: relative;
  width: 100%;
}

/* El svh evita el salto de la barra del navegador en móvil; el vh queda de
   respaldo para los navegadores que no lo entienden. */
.thoro-hero__slide {
  position: relative;
  height: 100vh;
  height: var(--th-height, 100svh);
  overflow: hidden;
}

.thoro-hero__link {
  position: absolute;
  inset: 0;
  display: block;
}

.thoro-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thoro-hero__img--mob {
  display: none;
}

@media only screen and (max-width: 749px) {
  .thoro-hero__img--desk {
    display: none;
  }

  .thoro-hero__img--mob {
    display: block;
  }
}

/* Velo: el rótulo va en hueso sobre foto y sin él no siempre se lee. */
.thoro-hero__veil {
  position: absolute;
  inset: 0;
  background: var(--th-veil-color, #000);
  opacity: var(--th-veil, 0.35);
  pointer-events: none;
}

/* --- Índice fijo --------------------------------------------------------- */
/* pointer-events: none en el contenedor y auto solo en lo pulsable: así el
   hueco muerto del índice deja pasar el clic a la foto de debajo, que es un
   enlace a la colección. */
.thoro-hero__content {
  position: relative;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

/* El índice es una capa del alto de la pantalla, pegada arriba, con su
   contenido centrado: así queda siempre en el eje, tanto al entrar como
   mientras las fotos pasan por detrás. Antes iba con un top fijo y un
   translate del 50 %, y en la entrada aparecía descolgado hacia arriba porque
   el desplazamiento se aplica también antes de que el sticky se pegue. */
.thoro-hero__menu {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(12px, 3vw, 24px);
  text-align: center;
}

.thoro-hero__item,
.thoro-hero__cta {
  pointer-events: auto;
}

@media only screen and (max-width: 749px) {
  .thoro-hero__menu {
    gap: clamp(10px, 2.8vw, 16px);
  }
}

/* Cabecera: mismo par kicker + marca que el resto de secciones (ver 8b). */
.thoro-hero__head {
  display: flex;
  align-items: baseline;
  gap: var(--thoro-sec-gap, 8px);
}

.thoro-hero__kicker {
  margin: 0;
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: var(--thoro-sec-kicker, 24px);
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

.thoro-hero__brand {
  padding-top: 0.15em;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: var(--thoro-sec-brand, 10px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Nombres ------------------------------------------------------------- */
.thoro-hero__items {
  display: grid;
  justify-items: center;
  gap: clamp(2px, 0.8vw, 10px);
}

.thoro-hero__item {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(32px, 7.4vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  /* La sombra es lo único que sostiene el rótulo cuando la foto de detrás es
     clara justo bajo el texto y el velo no basta. */
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
  opacity: 0.42;
  transition: opacity 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

.thoro-hero__item.is-active {
  opacity: 1;
}

@media (hover: hover) {
  .thoro-hero__item:hover {
    opacity: 1;
  }
}

.thoro-hero__item-alt {
  display: block;
  margin-top: 0.25em;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.4vw, 12px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.75;
}

/* --- Enlace de la categoría activa --------------------------------------- */
/* Solo se pinta el del bloque activo; los demás quedan en display:none, de ahí
   el min-height, que evita que el índice pegue un salto al cambiar de foto. */
.thoro-hero__ctas {
  display: flex;
  justify-content: center;
  min-height: 1.4em;
}

.thoro-hero__cta {
  display: none;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.thoro-hero__cta.is-active {
  display: inline-flex;
}

@media (hover: hover) {
  .thoro-hero__cta:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 0.35em;
  }
}

.thoro-hero__cta svg {
  width: 12px;
  height: 9px;
  flex: 0 0 auto;
}

/* --- Contador lateral ---------------------------------------------------- */
.thoro-hero__indicator {
  position: fixed;
  top: 50%;
  right: clamp(14px, 3vw, 40px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: clamp(90px, 14vw, 130px);
  z-index: 10;
  color: var(--th-text, #fffdf0);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.4vw, 12px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thoro-hero.in-view .thoro-hero__indicator {
  opacity: 1;
}

.thoro-hero__total {
  opacity: 0.45;
}

.thoro-hero__line {
  position: relative;
  flex: 1;
  width: 1px;
  margin: 6px 0;
  background: rgba(255, 253, 240, 0.3);
  overflow: hidden;
}

.thoro-hero__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: currentColor;
  transition: height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .thoro-hero__item,
  .thoro-hero__cta,
  .thoro-hero__progress,
  .thoro-hero__indicator {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   7. Tarjeta de producto
   El mockup la repite igual en home, colección, producto y relacionados:

     [ imagen sobre gris claro          ]
       TÍTULO                    $ PRECIO
     ────────────────────────────────────
       CH   M   G        AÑADIR A CARRITO
     ────────────────────────────────────

   Medidas a 375: título y precio 8,9 px, tallas y botón 5,3 px. Los dos
   últimos se suben porque son controles clicables y 5 px queda por debajo de
   cualquier mínimo táctil legible.
   -------------------------------------------------------------------------- */
.product-item {
  /* Sin uso desde que el botón pasó a ser una píldora: las dos reglas que
     enmarcaban la fila del botón sobraban con el contorno. Se deja declarada
     por si vuelve a hacer falta una línea en la tarjeta. */
  --thoro-card-rule: 1px solid currentColor;
  --thoro-card-label: clamp(11px, 2.9vw, 14px);
  --thoro-card-control: clamp(9.5px, 2.5vw, 12px);
}

/* :not(.image--empty) en el tema pesa más que una sola clase — sin igualar
   esa especificidad el fondo gris del mockup nunca llegaba a pintarse. */
.product-item__image:not(.image--empty) {
  --bg: var(--thoro-card-bg, #f4f4f2);
  background: var(--thoro-card-bg, #f4f4f2);
}

/* Fila 1: título arriba, a todo el ancho, y el precio en su propia línea
   debajo (nuevo, tachado y "Ahorra $X"). Antes iban lado a lado y los nombres
   largos aplastaban la columna del precio hasta cortarlo. */
.product-item__info .product-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 1.3vw, 8px);
  padding: clamp(10px, 3.5vw, 16px) 0 clamp(6px, 1.9vw, 10px);
  text-decoration: none;
}

.product-item__title {
  width: 100%;
  min-width: 0;
  margin: 0;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: var(--thoro-card-label);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.product-item__price__holder {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.product-item__price {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 4px 8px;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: var(--thoro-card-label);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: left;
}

.product-item__price .price {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 4px 8px;
}

.product-item__price .new-price {
  margin-right: 0;
  white-space: nowrap;
}

.product-item__price .old-price {
  font-size: 0.9em;
  opacity: 0.5;
  white-space: nowrap;
}

/* "-$270": el tema lo pinta como píldora roja grande (0.9rem); se reduce a la
   escala de la tarjeta manteniendo el rojo macizo, que es lo que hace que el
   descuento salte por encima del precio tachado que lleva al lado. */
.product-item__price .savings-badge {
  margin-top: 0;
  padding: 1px 8px;
  background: var(--THORO-RED, #e40e20);
  border: 1px solid var(--THORO-RED, #e40e20);
  border-radius: 999px;
  color: #fff;
  font-size: 0.78em;
  font-weight: 400;
  white-space: nowrap;
}

/* El tema mete un padding de 12 px alrededor de la info; el mockup alinea
   título, precio y reglas con los bordes de la foto. */
.product-item .product-item__info {
  padding: 0;
}

/* Fila 2: tallas a la izquierda, "Añadir a carrito" a la derecha.
   En el markup real (snippets/quick-add-product.liquid) el holder envuelve un
   <form> compartido con las tallas y el botón. El tema lo posiciona en
   absoluto sobre la foto; product-grid-item.liquid lo mueve ahora debajo del
   título, así que aquí vuelve al flujo normal. */
.product-item .quick-add__holder {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  padding: clamp(4px, 1.3vw, 8px) 0;
  opacity: 1;
  transition: none;
}

.product-item .quick-add__shared-form {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

/* Las tallas se desplazan en horizontal si no caben (calzado trae ~11); el
   degradado del borde derecho avisa de que hay más. El gap del mockup (~30 px)
   no deja sitio para que "Añadir a carrito" quepa en una columna de 158 px,
   así que se aprieta lo justo para que ambos convivan sin partirse. */
.product-item .quick-add__sizes {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: clamp(8px, 3.2vw, 22px);
  width: auto;
  min-width: 0;
  padding-right: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}

.product-item .quick-add__sizes::-webkit-scrollbar {
  display: none;
}

.product-item .quick-add__size-btn {
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: inherit;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: var(--thoro-card-control);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-item .quick-add__size-btn--soldout {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Talla elegida: píldora negra, como las tallas activas de "Arma tu outfit". */
.product-item .quick-add__size-btn.is-selected {
  background: var(--THORO-BLACK, #000);
  color: var(--THORO-BONE, #fffdf0);
}

/* Mismo botón que el CTA del banner y que "Agregar al carrito" de la ficha:
   píldora de contorno en Marlboro con el interruptor —bolita a la izquierda en
   reposo; al pasar el ratón el relleno barre y la bolita cruza—. Aquí va en
   versión reducida (bolita de 14-18 px) porque comparte fila con las tallas,
   que además tienen scroll propio. */
.product-item .quick-add__submit,
.product-item .quick-add__button {
  --knob: clamp(14px, 3.4vw, 18px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: clamp(28px, 7.4vw, 34px);
  margin: 0 0 0 auto;
  padding: 0 calc(var(--knob) + 12px);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(11px, 3vw, 14px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  visibility: visible;
  opacity: 1;
  transition: color 0.3s ease 0.12s;
}

.product-item .quick-add__submit::before,
.product-item .quick-add__button::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 5px;
  width: var(--knob);
  height: var(--knob);
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate3d(0, -50%, 0);
  transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease,
    border-color 0.3s ease;
}

/* El relleno va a negro fijo, no a currentColor: al encenderse el texto pasa a
   hueso y el relleno se habría ido con él. */
.product-item .quick-add__submit::after,
.product-item .quick-add__button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--THORO-BLACK, #000);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.product-item .quick-add__submit > *,
.product-item .quick-add__button > * {
  position: relative;
  z-index: 2;
}

@media (hover: hover) {
  .product-item .quick-add__submit:not([disabled]):hover,
  .product-item .quick-add__button:not([disabled]):hover {
    color: var(--THORO-BONE, #fffdf0);
    text-decoration: none;
  }

  .product-item .quick-add__submit:not([disabled]):hover::after,
  .product-item .quick-add__button:not([disabled]):hover::after {
    transform: translate3d(0, 0, 0);
  }

  .product-item .quick-add__submit:not([disabled]):hover::before,
  .product-item .quick-add__button:not([disabled]):hover::before {
    left: calc(100% - var(--knob) - 5px);
    background: var(--THORO-BONE, #fffdf0);
    border-color: var(--THORO-BONE, #fffdf0);
  }
}

/* En móvil la tarjeta baja a ~186 px y el botón comparte fila con las tallas:
   la bolita se lleva 30 px que hacen falta ahí. Se queda la píldora, el trazo
   y la tipografía —el lenguaje del banner—, sin el interruptor. */
@media only screen and (max-width: 749px) {
  .product-item .quick-add__submit {
    padding: 0 12px;
  }

  .product-item .quick-add__submit::before {
    display: none;
  }
}

/* Mientras añade, el interruptor encendido ya es el aviso. */
.product-item .quick-add__submit.is-loading,
.product-item .quick-add__submit.is-added {
  color: var(--THORO-BONE, #fffdf0);
}

.product-item .quick-add__submit.is-loading::after,
.product-item .quick-add__submit.is-added::after {
  transform: translate3d(0, 0, 0);
}

.product-item .quick-add__submit.is-loading::before,
.product-item .quick-add__submit.is-added::before {
  left: calc(100% - var(--knob) - 5px);
  background: var(--THORO-BONE, #fffdf0);
  border-color: var(--THORO-BONE, #fffdf0);
}

.product-item .quick-add__submit.is-loading,
.product-item .quick-add__submit[disabled] {
  opacity: 0.4;
  cursor: progress;
}

/* Se pulsó "Añadir" sin talla: las tallas parpadean en rojo. */
.product-item .quick-add__holder.needs-size .quick-add__size-btn:not(.quick-add__size-btn--soldout) {
  animation: thoro-size-flash 0.9s ease;
}

@keyframes thoro-size-flash {
  0%,
  100% {
    color: inherit;
  }
  25%,
  60% {
    color: var(--THORO-RED, #e40e20);
  }
}

/* "Añadir a carrito" (abre el panel de tallas; o añade directo si el producto
   tiene una sola variante). Es el mismo botón que el CTA del banner y que el
   "Agregar al carrito" de la ficha: píldora de contorno en Marlboro con el
   interruptor —bolita a la izquierda en reposo, relleno que barre y bolita que
   cruza al pasar el ratón—. Va a lo ancho de la tarjeta, no a ancho de
   contenido como en el hero, porque aquí la caja es estrecha y así se pulsa
   mejor.

   El relleno no es un pseudo-elemento: el liquid ya trae un <span
   class="quick-add__fill"> dentro del botón, y es el que barre. */
.product-item .quick-add__holder {
  padding: 0;
}

.product-item .quick-add__button.btn,
.product-item .quick-add__button--mini,
.product-item .quick-add__button {
  --btn-text: currentColor;
  --knob: clamp(16px, 4.2vw, 22px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: clamp(32px, 8.6vw, 40px);
  margin: 0;
  padding: 0 calc(var(--knob) + 14px);
  background: none;
  box-shadow: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-size: var(--thoro-card-control);
  text-decoration: none;
  transition: color 0.3s ease 0.12s;
}

/* Bolita del interruptor. */
.product-item .quick-add__button::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 6px;
  width: var(--knob);
  height: var(--knob);
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate3d(0, -50%, 0);
  transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease,
    border-color 0.3s ease;
}

.product-item .quick-add__button .btn__text {
  position: relative;
  z-index: 2;
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: color 0.3s ease 0.12s;
}

/* Mismos tiempos que el CTA del banner (sección 2): 0,45 s para el barrido y
   0,12 s de espera antes de que el texto cambie de color. Con 0,40 s y 0,08 s
   la tarjeta terminaba antes que el hero y se notaba más seca. */
.product-item .quick-add__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--THORO-BLACK, #000);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* En táctil no hay hover, así que el interruptor no se encendía nunca al
   añadir desde el móvil: el botón se quedaba quieto y no daba ninguna señal.
   Aquí se engancha a estados que sí existen sin ratón — :active mientras el
   dedo está encima, y las clases is-loading / is-added que pone el tema
   mientras añade al carrito y al terminar—. */
.product-item .quick-add__button:active,
.product-item .quick-add__button.is-switching,
.product-item .quick-add__button.is-loading,
.product-item .quick-add__button.is-added,
.product-item .quick-add__submit:active,
.product-item .quick-add__submit.is-switching {
  color: var(--THORO-BONE, #fffdf0);
}

.product-item .quick-add__button:active .quick-add__fill,
.product-item .quick-add__button.is-switching .quick-add__fill,
.product-item .quick-add__button.is-loading .quick-add__fill,
.product-item .quick-add__button.is-added .quick-add__fill {
  transform: translate3d(0, 0, 0);
}

.product-item .quick-add__button:active::before,
.product-item .quick-add__button.is-switching::before,
.product-item .quick-add__button.is-loading::before,
.product-item .quick-add__button.is-added::before,
.product-item .quick-add__submit:active::before,
.product-item .quick-add__submit.is-switching::before {
  left: calc(100% - var(--knob) - 6px);
  background: var(--THORO-BONE, #fffdf0);
  border-color: var(--THORO-BONE, #fffdf0);
}

.product-item .quick-add__submit:active::after,
.product-item .quick-add__submit.is-switching::after {
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) {
  .product-item .quick-add__button:hover::before {
    left: calc(100% - var(--knob) - 6px);
    background: var(--THORO-BONE, #fffdf0);
    border-color: var(--THORO-BONE, #fffdf0);
  }

  .product-item .quick-add__button:hover .quick-add__fill {
    transform: translate3d(0, 0, 0);
  }

  .product-item .quick-add__button:hover .btn__text {
    color: var(--THORO-BONE, #fffdf0);
  }

  .product-item .quick-add__size-btn:not(.quick-add__size-btn--soldout):not(.is-selected):hover,
}

.product-item .quick-add__button:active .quick-add__fill {
  transform: translate3d(0, 0, 0);
}

.product-item .quick-add__button:active .btn__text {
  color: var(--THORO-BONE, #fffdf0);
}

@media (prefers-reduced-motion: reduce) {
  .product-item .quick-add__fill,
  .product-item .quick-add__button .btn__text {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-item .quick-add__holder.needs-size .quick-add__size-btn {
    animation: none;
    color: var(--THORO-RED, #e40e20);
  }
}

/* Badges (sold out / new / % de rebaja) — el mockup los dibuja como píldora
   con solo contorno, no rellena: rojo para rebaja, negro para el resto. */
.product-item .badge-box-container {
  padding: clamp(8px, 2.7vw, 14px);
  gap: 6px;
}

.product-item .badge-box:not(.sale-box--image) {
  --padding-vertical: 0;
  display: inline-flex;
  align-items: center;
  height: clamp(22px, 6.4vw, 30px);
  padding: 0 clamp(10px, 3vw, 16px);
  background: var(--badge-bg, var(--THORO-BONE, #fffdf0));
  border: 1px solid var(--badge-border, var(--THORO-BLACK, #000));
  border-radius: 999px;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.35vw, 12px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sobre la foto: roja maciza con la letra en blanco. Es la que se ve de lejos
   al recorrer la parrilla, así que va a bandera desplegada; la del precio se
   queda de contorno porque compite con el importe. */
.product-item .sale-box {
  --badge-border: var(--THORO-RED, #e40e20);
  --badge-bg: var(--THORO-RED, #e40e20);
  color: #fff;
}

.product-item .new-box,
.product-item .sold-box {
  --badge-border: var(--THORO-BLACK, #000);
  color: var(--THORO-BLACK, #000);
}

.product-item .sold-box {
  background: rgba(255, 253, 240, 0.85);
}

/* Oculta el widget de estrellas que inyecta la app de reseñas (Burbuxa /
   Whatacart, cargada en footer.liquid) dentro de la tarjeta de producto. El
   mockup no las lleva. No se toca la integración — solo se oculta aquí, así
   que sigue funcionando en la página de producto y donde no se oculte. */
.product-item [class*='whata-star'],
.product-item [class*='burbuxa-title-stars'],
.product-item [class*='ratingContainer'],
.product-item [class*='stars-container'] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. Arma tu outfit (sections/arma-look.liquid)
   La mecánica (carrusel con talla rápida + panel resumen de 2 slots) ya
   coincide con el mockup — incluido el copy. Es puro restyling.

   El <style> de esa sección vive en el <body>, así que en un empate de
   especificidad le gana a este archivo por orden de aparición. Por eso cada
   selector de aquí va prefijado con un ancestro real (.contendor-armar,
   #ob-summary, #ob-sticky) para tener más peso y ganar siempre, sin usar
   !important salvo donde el propio JS ya lo hace.
   -------------------------------------------------------------------------- */
/* 8b. Cabecera estándar de sección: nombre en Marlboro + "THORO 650" en
   Panama, con la sangría de 21 px de las tarjetas. La comparten Arma tu
   outfit, Categorías (.thoro-hero__head) y Colección destacada
   (.thoro-collection__head) a través de las mismas variables. */
:root {
  --thoro-sec-pad: clamp(16px, 5.6vw, 32px);
  --thoro-sec-kicker: clamp(22px, 6.4vw, 40px); /* 24 px a 375 */
  --thoro-sec-brand: clamp(9px, 2.5vw, 13px);
  --thoro-sec-gap: clamp(4px, 1.3vw, 10px);
}

.thoro-sec-head {
  display: flex;
  align-items: flex-start;
  gap: var(--thoro-sec-gap);
  margin: 0 0 clamp(20px, 6.4vw, 40px);
  padding-inline: var(--thoro-sec-pad);
}

.thoro-sec-head--arma {
  padding-top: clamp(24px, 8vw, 56px);
}

.thoro-sec-head .thoro-sec-head__kicker,
h2.thoro-sec-head__kicker.TEXTO-CENTER {
  margin: 0;
  padding: 0;
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: var(--thoro-sec-kicker);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.thoro-sec-head__brand {
  padding-top: 0.15em;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: var(--thoro-sec-brand);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La card de cada prenda sigue el mismo esquema que la tarjeta de producto:

     [ imagen sobre gris claro ]
       TÍTULO
       $ PRECIO  $ tachado  (Ahorra $X)
     ────────────────────────────────
       CH   M   G   EG
     ────────────────────────────── */
.contendor-armar .outfit-item {
  align-items: stretch;
  gap: 0;
}

.contendor-armar .ob-card-media {
  background: var(--thoro-card-bg, #f4f4f2);
}

.contendor-armar .ob-card-title {
  margin: 0;
  padding: clamp(10px, 3.5vw, 16px) 0 0;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 2.9vw, 14px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
}

.contendor-armar .ob-card-prices {
  justify-content: flex-start;
  align-items: baseline;
  gap: 4px 8px;
  margin: clamp(4px, 1.3vw, 8px) 0 0;
  padding-bottom: clamp(6px, 1.9vw, 10px);
  border-bottom: 1px solid currentColor;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 2.9vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.contendor-armar .ob-card-price,
.contendor-armar .ob-total-compare {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: inherit;
  font-weight: 400;
}

.contendor-armar .ob-card-price--sale {
  color: inherit;
}

.contendor-armar .ob-card-price--compare {
  font-size: 0.9em;
  color: inherit;
  opacity: 0.5;
}

/* Badge de descuento y "Ahorra $X": contorno en vez del relleno sólido del
   tema, igual que en la tarjeta de producto. */
.contendor-armar .ob-discount-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  background: var(--THORO-BONE, #fffdf0);
  border: 1px solid var(--THORO-RED, #e40e20);
  border-radius: 999px;
  color: var(--THORO-RED, #e40e20);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: 11px;
  font-weight: 400;
}

.contendor-armar .savings-badge,
#ob-summary .savings-badge {
  padding: 1px 8px;
  background: var(--THORO-RED, #e40e20);
  border: 1px solid var(--THORO-RED, #e40e20);
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
}

/* Tallas: texto plano en una fila con regla inferior, igual que la fila de
   tallas de la tarjeta de producto; la elegida pasa a píldora negra. */
.contendor-armar .size-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(8px, 3.2vw, 22px);
  margin: 0;
  padding: clamp(4px, 1.3vw, 8px) 0;
  border-bottom: 1px solid currentColor;
}

.contendor-armar .size-btn {
  min-width: 24px;
  min-height: 24px;
  padding: 0 6px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: inherit;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(9.5px, 2.5vw, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contendor-armar .size-btn.active {
  background: var(--THORO-BLACK, #000);
  border: 0;
  color: var(--THORO-BONE, #fffdf0);
}

.contendor-armar .size-btn[disabled] {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: not-allowed;
}

@media (hover: hover) {
  .contendor-armar .size-btn:not([disabled]):not(.active):hover {
    text-decoration: underline;
  }
}

/* Panel "Tu outfit": negro sólido, como en el mockup. Los slots vacíos usan
   un borde discontinuo hueso en vez del gris genérico del tema. */
#ob-summary {
  background: var(--THORO-BLACK, #000);
  border: none;
}

#ob-summary .ob-summary-title {
  text-align: left;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(24px, 8.5vw, 44px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--THORO-BONE, #fffdf0);
}

#ob-summary .ob-slot {
  border-color: rgba(255, 253, 240, 0.35);
  color: var(--THORO-BONE, #fffdf0);
}

#ob-summary .ob-slot[data-empty='false'] {
  border-color: var(--THORO-BONE, #fffdf0);
  background: rgba(255, 253, 240, 0.08);
}

#ob-summary .ob-slot-empty {
  color: rgba(255, 253, 240, 0.6);
}

#ob-summary .ob-slot-num {
  border-color: rgba(255, 253, 240, 0.6);
  color: var(--THORO-BONE, #fffdf0);
}

#ob-summary .ob-slot-img {
  background: rgba(255, 253, 240, 0.1);
}

#ob-summary .ob-slot-name,
#ob-summary .ob-slot-price,
#ob-summary .ob-total-row {
  font-family: var(--FONT-THORO-NAV, inherit);
  color: var(--THORO-BONE, #fffdf0);
}

#ob-summary .ob-slot-size,
#ob-summary .ob-slot-compare,
#ob-summary .ob-total-compare {
  color: rgba(255, 253, 240, 0.6);
}

#ob-summary .ob-summary-plus {
  color: rgba(255, 253, 240, 0.4);
}

#ob-summary .ob-divider {
  border-top-color: rgba(255, 253, 240, 0.35);
}

/* El mockup dibuja "Outfit con envío gratis" como texto suelto, sin la caja
   con borde que trae el tema. */
#ob-summary .ob-free-shipping-outfit {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--THORO-BONE, #fffdf0);
  font-family: var(--FONT-THORO-BODY, inherit);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* CTA: el botón del tema es negro sólido — invisible sobre el panel negro.
   Se invierte a hueso sólido con texto negro, y el rótulo pasa a Marlboro
   como en el botón "Comprar" del hero (mismo tratamiento en el mockup). */
#ob-summary .outfit-builder__btn {
  background: var(--THORO-BONE, #fffdf0);
  color: var(--THORO-BLACK, #000);
  border-radius: 999px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

#ob-summary .outfit-builder__btn .ob-cta-text {
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: 1.1em;
}

#ob-summary .outfit-builder__btn:disabled {
  background: rgba(255, 253, 240, 0.3);
  color: var(--THORO-BLACK, #000);
}

#ob-summary .outfit-builder__btn:not(:disabled):hover {
  background: #ffffff;
}

#ob-summary .ob-go-cart {
  color: var(--THORO-BONE, #fffdf0);
}

#ob-summary .ob-trust {
  color: rgba(255, 253, 240, 0.55);
  font-family: var(--FONT-THORO-BODY, inherit);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Barra sticky de móvil: no está en el mockup (es una ayuda de UX del tema),
   se retoca solo lo justo para que no desentone con la tipografía nueva. */
#ob-sticky {
  border-radius: 4px;
}

#ob-sticky .ob-sticky-toggle,
#ob-sticky .ob-sticky-label,
#ob-sticky .ob-sticky-name,
#ob-sticky .ob-sticky-price,
#ob-sticky-total {
  font-family: var(--FONT-THORO-NAV, inherit);
}

#ob-sticky .ob-sticky-btn {
  border-radius: 999px;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   9. Título de "Featured collection" (sections/section-collection.liquid)
   Ej. "ULTIMOS PARES" / "BEST SELLERS" en el home. Mismo tratamiento display
   que el resto de titulares de marca (Categorías, Arma tu outfit, colección).
   Scoped a .index-products para no tocar el mismo .grid__heading en otras
   secciones del tema que no forman parte de este rediseño.
   -------------------------------------------------------------------------- */
.index-products .grid__heading {
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(28px, 8vw, 52px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Barra de categorías (sections/thoro-categorias-barra.liquid)
   Una fila de enlaces entre dos reglas finas, a la altura del menú. Sustituye
   a la franja roja con los nombres en TT Espina a 35 px: aquella hacía de
   cartel y esta hace de navegación, así que va con el cuerpo y la fuente del
   menú y se desplaza a lo ancho cuando no caben todos los enlaces.
   -------------------------------------------------------------------------- */
/* Va pegada al menú y viaja con él al bajar, como una segunda fila suya. El
   color sale de --COLOR-MENU-BG, la misma variable que pinta el menú: con el
   hueso de marca (#fffdf0) se veía un escalón de tono entre las dos franjas,
   y así el día que se cambie el color del menú en el editor esta lo sigue.

   El z-index queda por debajo del 5600 que usa el menú fijo, para que al
   desplazar la barra pase por debajo y no lo tape. */
.thoro-catbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--COLOR-MENU-BG, var(--THORO-BONE, #fffdf0));
  color: var(--THORO-BLACK, #000);
}

/* El sticky va en el contenedor de la sección, no en la barra: un elemento
   pegajoso solo se mueve dentro de su padre, y el padre medía exactamente lo
   mismo que la barra —45 px—, así que no tenía por dónde correr y se iba con
   la página. Colgado de la sección, el recorrido es el alto del <main>. */
.section-thoro-catbar {
  position: sticky;
  top: 0;
  z-index: 5500;
}

/* Con el menú fijo la barra se para justo debajo; sin él, arriba del todo.
   La clase la pone el tema en el <body> según el ajuste de menú fijo. */
.has-header-sticky .section-thoro-catbar {
  top: var(--header-height, 0px);
}

/* La fila de filtros deja de ir fija: el tema la pegaba a la altura del menú,
   justo donde ahora se queda la barra de categorías, y con dos franjas
   pegajosas encima la rejilla perdía media pantalla. Se queda donde está y
   sube con la página; la que acompaña al desplazar es la barra.

   El panel lateral de filtros y la línea de carga sí siguen anclados, y a
   ellos se les suma el alto de la barra —lo publica su propia sección en
   --thoro-catbar-height—. En las páginas sin barra la variable no existe, se
   toma 0 y el tope vuelve a ser el del tema. */
.collection__nav,
.has-header-sticky .collection__nav {
  position: static;
}

.has-header-sticky .collection__sidebar__slider {
  top: calc(
    var(--collection-nav-height) + var(--header-height) + var(--thoro-catbar-height, 0px) - var(--border-width, 0px)
  );
}

.has-header-sticky .grid__loader-line {
  top: calc(var(--collection-nav-height) + var(--header-height) + var(--thoro-catbar-height, 0px));
}

/* El scroll lateral es la razón de ser de este formato: con veinte categorías
   la fila sigue siendo una fila. La barra del navegador se esconde porque el
   propio corte de los enlaces ya avisa de que hay más a la derecha. */
.thoro-catbar__nav {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.thoro-catbar__nav::-webkit-scrollbar {
  display: none;
}

.thoro-catbar__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(18px, 5.5vw, 40px);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: clamp(10px, 3.2vw, 14px) clamp(16px, 5.6vw, 40px);
}

.thoro-catbar__item {
  flex: 0 0 auto;
  margin: 0;
}

.thoro-catbar__link {
  display: block;
  color: inherit;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* La categoría en la que se está, subrayada: es la única señal de sitio que
   queda al haber soltado el fondo de color. */
.thoro-catbar__item.is-current .thoro-catbar__link {
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .thoro-catbar__link:hover {
    opacity: 0.55;
  }
}

/* La sección no lleva el aire que el tema pone entre secciones: va pegada al
   menú, como una segunda fila suya. */
.section-thoro-catbar {
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   11. Marquee como sección (sections/thoro-marquee.liquid)
   -------------------------------------------------------------------------- */
.thoro-marquee-section {
  background: var(--tmq-bg, transparent);
  padding-top: var(--tmq-pad-top, 6px);
  padding-bottom: var(--tmq-pad-bottom, 6px);
}

/* --------------------------------------------------------------------------
   12. Página de colección (sections/collection.liquid) — p.7
   -------------------------------------------------------------------------- */

/* Sangría del grid: el mockup deja 21 px a cada lado y 16 entre columnas
   (tarjetas de 158 px a 375). El tema pone 16/16. Solo en móvil. */
@media only screen and (max-width: 749px) {
  .collection__products .grid-outer {
    padding-left: clamp(16px, 5.6vw, 32px);
    padding-right: clamp(16px, 5.6vw, 32px);
    /* .grid-outer es un flex item (flex: 1 1 auto) dentro de
       .collection__products. Con el min-width: auto que traen por defecto los
       flex items, se negaba a encogerse por debajo del min-content de la
       rejilla: medía 393,98 px en un viewport de 390 y dejaba 4 px de arrastre
       horizontal en toda la página de colección en móvil. min-width: 0 le
       permite ajustarse al ancho disponible. */
    min-width: 0;
  }
}

/* Barra de filtros / orden: no está en el mockup (se conserva por utilidad)
   y se pasa a la tipografía de marca para que no desentone. */
.collection__nav {
  --border: rgba(0, 0, 0, 0.35);
}

.collection__nav .popout__toggle,
.collection__nav .popout__toggle__text,
.collection__nav .popout-list__option,
.collection__nav .popout-list__item {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Paginación del mockup:
     BACK TO TOP            ANTERIOR   1  2  3   SIGUIENTE
   Sin cajas ni flechas; la página activa va subrayada. */
.thoro-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(40px, 16vw, 80px) 0 clamp(40px, 16vw, 72px);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 14px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thoro-pagination__top {
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.thoro-pagination .pagination-custom {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 5vw, 32px);
  width: auto;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: inherit;
}

.thoro-pagination .pagination-custom__inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 4.5vw, 24px);
  margin: 0;
}

.thoro-pagination .pagination-custom__page,
.thoro-pagination .pagination-custom__sep {
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}

.thoro-pagination .pagination-custom__page--active {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.thoro-pagination .pagination-custom__prev,
.thoro-pagination .pagination-custom__next {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

/* El tema esconde el texto y deja la flecha en móvil; el mockup hace justo
   lo contrario. */
.thoro-pagination .pagination-custom__prev span,
.thoro-pagination .pagination-custom__next span {
  display: inline;
}

.thoro-pagination .pagination-custom__prev .icon,
.thoro-pagination .pagination-custom__next .icon,
.thoro-pagination .pagination-custom__prev svg,
.thoro-pagination .pagination-custom__next svg {
  display: none;
}

.thoro-pagination .pagination-custom__prev.is-hidden,
.thoro-pagination .pagination-custom__next.is-hidden {
  visibility: hidden;
}

@media (hover: hover) {
  .thoro-pagination a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

/* --------------------------------------------------------------------------
   13. Colección destacada (sections/thoro-coleccion.liquid) — p.11
   Cabecera "Norte Origen THORO 650 · COLECCIÓN · SPRING SUMMER 2026",
   VER COLECCIÓN a la derecha, marquee y rejilla de tarjetas.
   -------------------------------------------------------------------------- */
.thoro-collection {
  background: var(--tco-bg, transparent);
  color: var(--tco-text, #000);
  padding-top: var(--tco-pad-top, 28px);
  padding-bottom: var(--tco-pad-bottom, 40px);
}

.thoro-collection__inner {
  padding-inline: var(--thoro-sec-pad, 21px); /* alineado con las tarjetas: 21 px a 375 */
}

.thoro-collection__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(8px, 3vw, 24px);
}

.thoro-collection__name {
  display: flex;
  align-items: flex-start;
  gap: clamp(4px, 1.3vw, 10px);
  min-width: 0;
}

.thoro-collection__kicker {
  margin: 0;
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: var(--thoro-sec-kicker, 24px); /* estándar de cabeceras (8b) */
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.thoro-collection__brand {
  padding-top: 0.15em;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: var(--thoro-sec-brand, 10px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.thoro-collection__label,
.thoro-collection__season {
  padding-top: 0.45em; /* baja a la altura de la base del nombre */
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.7vw, 13px); /* ~10 px a 375 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.thoro-collection__year {
  margin-left: clamp(8px, 3.5vw, 20px);
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: 0.85em;
  letter-spacing: 0.02em;
  vertical-align: 0.4em;
}

.thoro-collection__cta {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(16px, 6.4vw, 40px); /* ~24 px a 375 */
}

.thoro-collection__link {
  color: inherit;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(10px, 2.8vw, 14px); /* ~10,5 px a 375 */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .thoro-collection__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.thoro-collection__marquee {
  margin: clamp(8px, 3.2vw, 20px) 0 clamp(12px, 4.5vw, 28px);
}

/* Puesta encima del título (ajuste "Colocar encima del título"), la tira entra
   pegada al borde de la sección: el aire de arriba ya lo pone la sección y solo
   hace falta separarla del título que viene debajo. */
.thoro-collection > .thoro-collection__marquee:first-child {
  margin-top: 0;
  margin-bottom: clamp(10px, 3.6vw, 24px);
}

/* Con la tira arriba, la separación entre "VER COLECCIÓN" y la primera fila de
   tarjetas la daba ella al ir en medio; ahora la pone la propia cabecera. El
   enlace se acerca al título en la misma proporción: sin la tira entre medias,
   los 40 px que tenía encima dejaban un claro enorme en escritorio. */
.thoro-collection > .thoro-collection__marquee:first-child ~ .thoro-collection__inner {
  padding-bottom: clamp(14px, 4.5vw, 28px);
}

.thoro-collection > .thoro-collection__marquee:first-child ~ .thoro-collection__inner .thoro-collection__cta {
  margin-top: clamp(8px, 2.4vw, 16px);
}

/* Rejilla: mismos márgenes que la página de colección (21 px a 375, 16 de
   hueco). En escritorio hereda los del tema. */
.thoro-collection__products.grid-outer {
  padding-top: 0;
  padding-bottom: 0;
}

@media only screen and (max-width: 749px) {
  .thoro-collection__products.grid-outer {
    padding-left: clamp(16px, 5.6vw, 32px);
    padding-right: clamp(16px, 5.6vw, 32px);
  }
}

/* --- Carril deslizable ---------------------------------------------------
   La rejilla del tema pasa a ser una fila con scroll y anclaje: el
   desplazamiento lo hace el navegador, sin librería. Se anula
   grid-template-columns porque los items ahora se colocan en columnas
   automáticas, no en una plantilla fija.

   Se enseña un trozo de la tarjeta siguiente (las 0,3 columnas de más) para
   que se vea que hay más y no parezca una rejilla cortada. En móvil se ven 2,2
   en vez de las 2 de antes, por lo mismo. */
.thoro-collection__products {
  position: relative;
}

.thoro-collection__products .grid {
  --tco-per-view: calc(var(--COLUMNS, 4) + 0.3);
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--tco-per-view) - 1) * var(--gap, 16px)) / var(--tco-per-view));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Sin barra visible: el carril ya se explica con el corte de la tarjeta
     siguiente y con las flechas. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.thoro-collection__products .grid::-webkit-scrollbar {
  display: none;
}

.thoro-collection__products .grid > * {
  scroll-snap-align: start;
}

@media only screen and (max-width: 749px) {
  .thoro-collection__products .grid {
    --tco-per-view: 2.2;
  }
}

@media only screen and (min-width: 750px) and (max-width: 989px) {
  .thoro-collection__products .grid {
    --tco-per-view: 3.2;
  }
}

/* Flechas: solo con ratón. En táctil se desliza con el dedo y ocuparían
   espacio sobre las tarjetas sin aportar nada. */
.thoro-collection__arrow {
  display: none;
}

@media (hover: hover) {
  .thoro-collection__arrow {
    position: absolute;
    top: calc(50% - 2.2em);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    background: var(--THORO-BONE, #fffdf0);
    color: var(--THORO-BLACK, #000);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.25s ease, background 0.25s ease;
  }

  .thoro-collection__arrow svg {
    width: 18px;
    height: 18px;
  }

  .thoro-collection__arrow--prev {
    left: calc(var(--thoro-sec-pad, 21px) - 20px);
  }

  .thoro-collection__arrow--next {
    right: calc(var(--thoro-sec-pad, 21px) - 20px);
  }

  .thoro-collection__arrow:hover {
    background: #fff;
  }

  /* Al llegar a un extremo la flecha se apaga, pero se queda en su sitio: si
     se ocultara, la fila daría un salto. */
  .thoro-collection__arrow[disabled] {
    opacity: 0.25;
    cursor: default;
  }
}

/* --------------------------------------------------------------------------
   14. Panel de tallas (dialog.product-quick-add, snippets/product-quick-add-
   modal-template + sections/api-product-upsell.liquid)
   Se abre desde "Añadir a carrito" de la tarjeta. Sin descripción; título y
   precio en Panama, tallas en píldoras de contorno (la elegida negra) y CTA
   en píldora negra con el rótulo en Marlboro, como el "Comprar" del hero.
   -------------------------------------------------------------------------- */
.product-quick-add .product__block--description {
  display: none;
}

.product-quick-add .product__title {
  margin: 0;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-quick-add .product__price__wrap .price,
.product-quick-add .product__price__wrap .money {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(13px, 3.7vw, 16px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.product-quick-add .product__price__wrap .old-price {
  opacity: 0.5;
}

.product-quick-add .radio__legend__label,
.product-quick-add .radio__legend__values {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

.product-quick-add .radio__buttons {
  gap: 6px 10px;
}

/* Tallas como texto plano, sin borde (igual que las de Arma tu outfit); la
   elegida pasa a píldora negra. Texto centrado en su caja. */
.product-quick-add .radio__button label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 32px;
  margin: 0;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-quick-add .radio__button label .option-title {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

/* "Ahorra $X" y precio rebajado: mismo tratamiento que en la tarjeta (píldora
   roja maciza, precio en el color del texto). */
.product-quick-add .product__price__wrap .savings-badge,
.product-quick-add .product__price__wrap .tag-ahorro,
.product-quick-add .product__price__wrap [class*="savings"] {
  padding: 1px 8px;
  background: var(--THORO-RED, #e40e20);
  border: 1px solid var(--THORO-RED, #e40e20);
  border-radius: 999px;
  color: #fff;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.product-quick-add .product__price__wrap .price,
.product-quick-add .product__price__wrap .price.sale,
.product-quick-add .product__price__wrap .new-price,
.product-quick-add .product__price__wrap .price.sale .new-price {
  color: var(--THORO-BLACK, #000);
  opacity: 1;
}

.product-quick-add .product__price__wrap .tag-ahorro .money {
  font-size: inherit;
}

.product-quick-add .radio__button input:checked + label,
.product-quick-add .radio__button input:checked ~ label {
  background: var(--THORO-BLACK, #000);
  color: var(--THORO-BONE, #fffdf0);
}

.product-quick-add .radio__button input.disabled + label,
.product-quick-add .radio__button input[disabled] + label,
.product-quick-add .radio__button input.disabled ~ label {
  opacity: 0.35;
  text-decoration: line-through;
  background: transparent;
}

.product-quick-add .radio__button .variant-icon {
  display: none;
}

.product-quick-add .product__submit__buttons .btn,
.product-quick-add .product__submit__buttons .btn.btn--solid {
  --btn-bg: var(--THORO-BLACK, #000);
  --btn-text: var(--THORO-BONE, #fffdf0);
  background: var(--THORO-BLACK, #000);
  border: 1px solid var(--THORO-BLACK, #000);
  border-radius: 999px;
  color: var(--THORO-BONE, #fffdf0);
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(16px, 4.8vw, 20px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.product-quick-add .product__submit__buttons .btn .btn__price {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: 0.75em;
  letter-spacing: 0.02em;
}

.product-quick-add .product-quick-add__close {
  color: inherit;
}

/* --------------------------------------------------------------------------
   15. Página de producto (sections/product.liquid + snippets/product.liquid,
   sections/related.liquid) — p.8

     [ foto centrada sobre gris, 60 px de margen ]
     [ tira de miniaturas 71 × 97, hueco 16 ]
     TENNESSEE BLANCO                     (TT Espina, ~71 px)
     ( 50% OFF )                 $ 3800.00 (TT Espina light ~30 px)
     ─────────────────────────────────────
     25  25.5  26  26.5  27  27.5  28  28.5
     29  29.5  30
     ─────────────────────────────────────
     (○ Agregar al carrito)               (píldora de contorno, Marlboro)
     ─────────────────────────────────────
     CAMBIOS DE TALLA GRATIS - ENVIOS SEGUROS - MATERIALES PREMIUM
     TU PEDIDO LLEGARÍA ENTRE JUN 18 Y JUN 22
     CAMBIOS / DESCRIPCIÓN                (acordeones)
     PRODUCTOS RELACIONADOS               (TT Espina) + tarjetas

   Sangría del contenido: 27 px a 375 (el tema pone 16). Todo scoped a
   .index-product (product-info) y .related__wrapper.
   -------------------------------------------------------------------------- */
:root {
  --thoro-pdp-pad: clamp(20px, 7.2vw, 48px); /* 27 px a 375 */
  --thoro-pdp-rule: 1px solid currentColor;
}

@media only screen and (max-width: 749px) {
  .index-product .product__page {
    padding-inline: calc(var(--thoro-pdp-pad) - 16px);
  }
}

/* --- Galería: columna de miniaturas -----------------------------------
   Miniaturas de pie a la izquierda y la foto grande al lado, igual en móvil
   que en escritorio. La columna va encuadrada con la foto: mide exactamente
   lo que mide la foto, ni un pixel más, y por dentro se desliza hacia abajo
   hasta llegar a todas. El tema ya la mueve sola al cambiar de foto
   (product-thumbs.js hace scroll sobre [data-thumbs-slider], que es el
   holder: por eso el overflow va ahí y no en .product__thumbs).

   El alto de la miniatura sigue la proporción de las fotos de producto (0,72)
   para que la foto llene el recuadro y no queden franjas de fondo a los
   lados. --thoro-photo-ratio es el recorte de la foto grande: las de producto
   vienen en 0,72, demasiado altas, y esto las deja algo más cuadradas sin
   tocar los archivos. */
.index-product {
  --thoro-thumb-col: 56px;
  --thoro-thumb-h: 78px;
  --thoro-thumb-gap: 8px;
  --thoro-photo-ratio: 0.8; /* 4:5; el archivo viene en 0,72 */
}

.index-product .product__images {
  display: flex;
  flex-direction: row;
  /* La columna se estira al alto de la fila, que lo marca la foto. Puede
     hacerlo porque su contenido va absoluto (ver el holder, más abajo) y por
     tanto no aporta altura propia: si estuviera en el flujo, sería la columna
     la que mandara y las miniaturas colgarían por debajo de la foto. */
  align-items: stretch;
  gap: 0;
}

.index-product .product__thumbs {
  order: -1;
  flex: 0 0 var(--thoro-thumb-col);
  width: var(--thoro-thumb-col);
  /* Marco del slide: alto el de la foto (por el stretch), nada asoma fuera y
     es la referencia contra la que se posiciona el holder. */
  position: relative;
  align-self: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* El scroll vive en el holder porque es el elemento que busca el JS del tema
   para llevar a la vista la miniatura activa. */
.index-product .product__images .product__thumbs__holder {
  /* Absoluto contra la columna: así el listado no le da altura a la columna
     —que la toma de la foto— y el sobrante se resuelve como scroll. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--thoro-thumb-gap);
  /* El tema saca la tira horizontal fuera de la sangría con márgenes
     negativos (--outer-offset). Puesta de pie, eso descolocaba la columna
     medio dedo a la izquierda y la dejaba asomando por la derecha contra la
     foto: de ahí el trozo de fondo que sobraba. */
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
}

.index-product .product__images .product__thumbs__holder::-webkit-scrollbar {
  display: none;
}

/* En móvil el tema le cuelga a la tira un pseudo-elemento de relleno para que
   la última miniatura no quede pegada al canto de la pantalla. De pie, eso es
   un hueco muerto al final de la columna que hacía aparecer scroll aunque las
   cuatro miniaturas cupieran. */
.index-product .product__images .product__thumbs__holder::after {
  display: none;
}

.index-product .product__images .product__thumb {
  flex: 0 0 var(--thoro-thumb-h);
  width: 100%;
  height: var(--thoro-thumb-h);
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.index-product .product__images .product__thumb.is-active,
.index-product .product__images .product__thumb:hover {
  opacity: 1;
}

/* El tema le fija 75 × 75 al enlace. Dentro de una columna de 56 se salía por
   la derecha, y en escritorio el overflow de la columna lo cortaba. */
.index-product .product__images .product__thumb__link {
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Sin recuadro de color: la miniatura ya lleva la proporción de la foto, así
   que la foto lo llena. El fondo pintado solo se notaba como un trozo suelto
   cuando la foto traía el suyo propio (blanco en calzado, gris en textil). */
.index-product .product__images .product__thumb .image-wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding-top: 0 !important;
  background: transparent;
}

.index-product .product__images .product__thumb .image-wrapper img,
.index-product .product__images .product__thumb .image-wrapper--cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Sin la raya de "activa" del tema: aquí se distingue por opacidad. */
.index-product .product__thumb::after,
.index-product .product__thumb__link::after {
  display: none;
}

.index-product .product__slides .product__photo,
.index-product .product__slides .product__slide {
  background: transparent;
}

/* Recorte de la foto grande. El tema reserva el alto con
   `padding-top: calc(1 / var(--aspect-ratio) * 100%)`, y esa variable la trae
   cada foto con la proporción de su archivo (0,72: muy alargada). Basta con
   pisarle la variable —no el padding, y menos con `aspect-ratio`, que deja el
   alto sin resolver y colapsa la fila entera— para que el hueco se recalcule
   solo. El <img> ya va en cover dentro de una figura absoluta, así que recorta
   por arriba y por abajo a partes iguales. Vale para todas las slides, así que
   ninguna salta al pasar de una a otra. */
.index-product .product__slides .product__photo {
  /* !important porque el tema escribe --aspect-ratio en el style del elemento
     y un estilo en línea gana a cualquier selector de esta hoja. */
  --aspect-ratio: var(--thoro-photo-ratio) !important;
}

.index-product .product__slides .product__photo img {
  background: var(--thoro-card-bg, #f4f4f2);
}

@media only screen and (max-width: 749px) {
  /* La galería se queda dentro de la sangría de la ficha, alineada con el
     título y el precio. */
  .index-product .product__images {
    margin-inline: 0;
  }

  .index-product .product__slides {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0;
    /* Aire entre la columna y la foto. */
    padding-left: 10px;
    /* El tema le deja 10 px por debajo para separarla de la tira horizontal de
       miniaturas. Aquí la tira va al lado, y ese hueco estiraba la columna 10
       px por debajo del borde de la foto. */
    margin-bottom: 0;
    background: transparent;
  }
}

@media only screen and (min-width: 750px) {
  .index-product {
    --thoro-thumb-col: 84px;
    --thoro-thumb-h: 116px;
    --thoro-thumb-gap: 12px;
  }

  /* El tema le da a esta columna 85 px fijos y 28 de sangría a cada lado en el
     holder, con lo que el enlace de 75 px del tema se salía y lo cortaba el
     overflow. Aquí manda el ancho de la variable y el alto lo pone el stretch
     contra la foto. */
  /* En escritorio la ficha son dos columnas y la de la galería se estiraba a
     lo que midiera la de texto (título, precio, tallas, acordeones), que es
     bastante más alta que la foto. Como la columna de miniaturas se estira a
     su vez contra la galería, acababa sobresaliendo por debajo de la foto.
     Con align-self la galería vuelve a medir lo que mide la foto. */
  .index-product .product__wrapper--thumbnails-left .product__images {
    align-self: start;
  }

  .index-product .product__wrapper--thumbnails-left .product__thumbs {
    height: auto;
    margin: 0 20px 0 0;
    /* El tema la deja pegajosa con un desplazamiento igual al alto del header;
       encuadrada con la foto no tiene adónde pegarse y ese top solo la bajaba
       medio header respecto a la primera foto. */
    top: auto;
  }

  .index-product .product__wrapper--thumbnails-left .product__thumbs__holder {
    padding: 0;
  }

  .index-product .product__slides {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Badge sobre la foto (–50 %): píldora de contorno como en las tarjetas. */
.index-product .product__images .discount-badge,
.index-product .product__images .badge-box:not(.sale-box--image) {
  --padding-vertical: 0;
  display: inline-flex;
  align-items: center;
  height: clamp(22px, 6.4vw, 30px);
  padding: 0 clamp(10px, 3vw, 16px);
  background: var(--THORO-RED, #e40e20);
  border: 1px solid var(--THORO-RED, #e40e20);
  border-radius: 999px;
  color: #fff;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.35vw, 12px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Título ----------------------------------------------------------- */
.index-product .product__head {
  padding-top: clamp(14px, 4.8vw, 28px);
  padding-bottom: 0;
}

.index-product .product__title {
  margin: 0;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(36px, 15vw, 96px); /* ~56 px a 375 (mockup 71, pero con nombres largos) */
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Estrellas de la app de reseñas dentro del título: fuera (no van en el mockup). */
.index-product .product__title__wrapper > div:not(.product__title),
.index-product .product__title [class*='whata-star'],
.index-product .product__title__wrapper [class*='whata-star'] {
  display: none !important;
}

/* --- Precio: badge a la izquierda, precio a la derecha, regla debajo ---- */
.index-product .product__price__wrap {
  padding-top: clamp(10px, 3.2vw, 18px);
  padding-bottom: clamp(10px, 3.2vw, 18px);
  border-bottom: var(--thoro-pdp-rule);
}

.index-product .product__price__wrap .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: inherit;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-weight: 700;
  font-size: clamp(22px, 8vw, 40px); /* ~30 px a 375 */
  line-height: 1;
  letter-spacing: 0;
}

.index-product .product__price__wrap .price .new-price,
.index-product .product__price__wrap .price .new-price .money {
  order: 3;
  margin-left: auto;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.index-product .product__price__wrap .price .old-price .money {
  font-size: inherit;
}

.index-product .product__price__wrap .price .old-price {
  order: 2;
  font-size: 0.6em;
  opacity: 0.5;
}

.index-product .product__price__wrap .price .tag-ahorro,
.index-product .product__price__wrap .price .savings-badge {
  order: 1;
  display: inline-flex;
  align-items: center;
  height: clamp(24px, 7.5vw, 32px);
  padding: 0 clamp(10px, 3.5vw, 18px);
  background: var(--THORO-RED, #e40e20);
  border: 1px solid var(--THORO-RED, #e40e20);
  border-radius: 999px;
  color: #fff;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.index-product .product__price__wrap .price .tag-ahorro .money {
  font-size: inherit;
}

.index-product .product__price__wrap .shop-pay-terms {
  display: none;
}

/* --- Colores hermanos (bloque related_products del tema) -------------- */
/* La tira de miniaturas nacia pegada a la regla del precio. El aire va en
   margin y no en padding porque el bloque trae su propio flex con gap desde el
   liquid, y el margen no entra en ese calculo. */
.index-product .related-products {
  margin-top: clamp(14px, 4.5vw, 26px);
}

.index-product .related-products-heading,
.index-product .selected-product-title {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Tallas: texto plano, 8 por fila, elegida en píldora negra ---------- */
.index-product .product__form__holder {
  padding-top: clamp(10px, 3.2vw, 18px);
  padding-bottom: clamp(10px, 3.2vw, 18px);
  border-bottom: var(--thoro-pdp-rule);
}

.index-product .radio__legend {
  margin-bottom: 8px;
}

.index-product .radio__legend__label,
.index-product .radio__legend__label small,
.index-product .radio__legend__values {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

.index-product .radio__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  justify-content: flex-start;
}

.index-product .radio__button {
  flex: 0 0 12.5%; /* 8 por fila a 375, como el mockup */
  display: flex;
  justify-content: flex-start;
}

.index-product .radio__button label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 30px;
  margin: 0;
  padding: 0 8px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: inherit;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.index-product .radio__button label .option-title {
  line-height: 1;
}

.index-product .radio__button input:checked + label,
.index-product .radio__button input:checked ~ label {
  background: var(--THORO-BLACK, #000);
  color: var(--THORO-BONE, #fffdf0);
}

.index-product .radio__button input.disabled + label,
.index-product .radio__button input[disabled] + label,
.index-product .radio__button input.disabled ~ label {
  opacity: 0.35;
  text-decoration: line-through;
  background: transparent;
}

.index-product .radio__button .variant-icon {
  display: none;
}

@media only screen and (min-width: 750px) {
  .index-product .radio__button {
    flex: 0 0 auto;
    margin-right: clamp(10px, 1.6vw, 22px);
  }
}

/* --- Agregar al carrito: píldora de contorno con "interruptor" ---------- */
.index-product .product__block--buttons {
  padding-top: clamp(14px, 4.8vw, 28px);
  padding-bottom: clamp(14px, 4.8vw, 28px);
  border-bottom: var(--thoro-pdp-rule);
}

.index-product .product__submit__buttons {
  display: flex;
  justify-content: flex-start;
}

.index-product .product__submit__item {
  width: auto;
}

.index-product .product__submit__buttons .btn,
.index-product .product__submit__buttons .btn.btn--solid,
.index-product .product__submit__buttons .btn.btn--black {
  --btn-bg: transparent;
  --btn-text: currentColor;
  --knob: 26px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 calc(var(--knob) + 18px); /* sitio para la bolita a ambos lados */
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  box-shadow: none;
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(16px, 4.8vw, 20px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: color 0.3s ease 0.1s;
}

/* Bolita del interruptor (círculo de contorno a la izquierda). */
.index-product .product__submit__buttons .btn::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 6px;
  width: var(--knob);
  height: var(--knob);
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate3d(0, -50%, 0);
  transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease, border-color 0.3s ease;
}

/* Relleno que barre de izquierda a derecha al pasar el ratón / pulsar. */
.index-product .product__submit__buttons .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--THORO-BLACK, #000);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.index-product .product__submit__buttons .btn > span {
  position: relative;
  z-index: 2;
}

.index-product .product__submit__buttons .btn .btn__text {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* El tema mete el precio dentro del botón; el mockup no. */
.index-product .product__submit__buttons .btn .btn__price {
  display: none;
}

.index-product .product__submit__buttons .btn:hover,
.index-product .product__submit__buttons .btn.is-loading,
.index-product .product__submit__buttons .btn.is-added,
.index-product .product__submit__buttons .btn:active {
  color: var(--THORO-BONE, #fffdf0);
  background: transparent;
  border-color: var(--THORO-BLACK, #000);
}

.index-product .product__submit__buttons .btn:hover::after,
.index-product .product__submit__buttons .btn.is-loading::after,
.index-product .product__submit__buttons .btn.is-added::after,
.index-product .product__submit__buttons .btn:active::after {
  transform: translate3d(0, 0, 0);
}

.index-product .product__submit__buttons .btn:hover::before,
.index-product .product__submit__buttons .btn.is-loading::before,
.index-product .product__submit__buttons .btn.is-added::before,
.index-product .product__submit__buttons .btn:active::before {
  left: calc(100% - var(--knob) - 6px);
  background: var(--THORO-BONE, #fffdf0);
  border-color: var(--THORO-BONE, #fffdf0);
}

.index-product .product__submit__buttons .btn[disabled],
.index-product .product__submit__buttons .btn.is-disabled {
  opacity: 0.4;
}

/* Mientras añade, el interruptor "encendido" ya es el feedback: el texto se
   queda visible en hueso y se oculta el spinner del tema. */
.index-product .product__submit__buttons .btn.is-loading .btn__text,
.index-product .product__submit__buttons .btn.is-added .btn__text {
  opacity: 1;
  visibility: visible;
  color: var(--THORO-BONE, #fffdf0);
}

.index-product .product__submit__buttons .btn .btn__loader,
.index-product .product__submit__buttons .btn .btn__added {
  display: none;
}

.index-product .payment-icons {
  justify-content: flex-start;
  gap: 8px;
  margin: clamp(10px, 3.2vw, 18px) 0 0;
  opacity: 0.6;
}

/* --- Beneficios: texto corrido separado por guiones -------------------- */
.index-product .form__width .benefits-bar,
.index-product .benefits-bar {
  display: flex;
  justify-content: flex-start;
  box-shadow: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: clamp(14px, 4.8vw, 28px) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  text-align: left;
}

.index-product .benefit-item {
  position: relative;
  padding: 0;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
}

/* El separador iba de ::before en el beneficio siguiente, asi que al saltar de
   linea bajaba con el y la segunda linea empezaba con un guion suelto
   ("- MATERIALES PREMIUM"). Puesto de ::after en el anterior, el guion se
   queda arriba, donde le corresponde. El nowrap evita ademas que un beneficio
   se parta por la mitad. */
.index-product .benefit-item {
  white-space: nowrap;
}

.index-product .benefit-item:not(:last-child)::after {
  content: '-';
  margin-left: 14px;
}

/* --- Entrega estimada: texto plano en Panama --------------------------- */
.index-product .form__width .delivery-estimate,
.index-product .delivery-estimate,
.index-product #delivery-date-estimator {
  margin: clamp(14px, 4.8vw, 28px) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
}

/* El tema deja aqui un <span> vacio para su punto animado, que este rediseño
   no usa. En vez de ocultarlo se aprovecha de caja para el icono de reparto:
   asi el icono entra sin tocar el liquid y va delante del texto, que es donde
   lo pone el marcado. Va como mascara y no como imagen de fondo para que tome
   el color del texto y acompañe cualquier esquema de color. */
.index-product .delivery-estimate .icon--pulsing {
  display: inline-block;
  flex: 0 0 auto;
  width: clamp(16px, 4.4vw, 19px);
  height: clamp(16px, 4.4vw, 19px);
  margin-right: clamp(6px, 1.8vw, 9px);
  background: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1.8%205.8h11.4v10.4H1.8z%27%2F%3E%3Cpath%20d%3D%27M13.2%209.4h3.9l3.1%203v3.8h-7z%27%2F%3E%3Ccircle%20cx%3D%276.4%27%20cy%3D%2718.4%27%20r%3D%271.9%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%2718.4%27%20r%3D%271.9%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1.8%205.8h11.4v10.4H1.8z%27%2F%3E%3Cpath%20d%3D%27M13.2%209.4h3.9l3.1%203v3.8h-7z%27%2F%3E%3Ccircle%20cx%3D%276.4%27%20cy%3D%2718.4%27%20r%3D%271.9%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%2718.4%27%20r%3D%271.9%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* La fila lleva el icono y el texto: se centran entre si. */
.index-product .delivery-estimate .flex-date {
  display: flex;
  align-items: center;
}

.index-product .delivery-estimate .flex-date,
.index-product #delivery-date-estimator .flex-date,
.index-product #delivery-date-estimator {
  justify-content: flex-start;
  text-align: left;
}

.index-product .delivery-estimate #earliest-day,
.index-product .delivery-estimate #latest-day {
  font-weight: 700;
}

.index-product .delivery-estimate p {
  margin: 0;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.index-product .delivery-estimate p span,
.index-product .delivery-estimate p strong {
  font-weight: 700;
}

/* --- Iconos: medios de pago en silueta y el icono de "Cambios" ---------- */
/* Los SVG de los medios de pago los sirve Shopify a todo color y con su caja
   blanca y su marco gris: al lado de una pagina en blanco y negro cantaban.
   Desde CSS no se pueden redibujar, pero si desmontar por capas, que en todos
   son las mismas: un rectangulo de fondo con opacity, un relleno blanco y
   encima el logotipo. Se apagan las dos primeras y el logotipo pasa a
   currentColor: queda la silueta. */
.index-product .payment-icons {
  gap: clamp(14px, 4.5vw, 22px);
  color: var(--THORO-BLACK, #000);
}

.index-product .payment-icons__icon svg {
  display: block;
  height: clamp(18px, 5.2vw, 22px);
  width: auto;
}

.index-product .payment-icons__icon svg [opacity],
.index-product .payment-icons__icon svg [fill='#fff'] {
  display: none !important;
}

.index-product .payment-icons__icon svg path {
  fill: currentColor !important;
}

/* American Express va al reves que los demas: el color es el rectangulo y el
   logotipo esta calado en blanco. Con la regla general saldria un rectangulo
   negro macizo. */
.index-product .payment-icons__icon svg[aria-labelledby='pi-american_express'] [fill='#006FCF'] {
  display: none !important;
}

.index-product .payment-icons__icon svg[aria-labelledby='pi-american_express'] [fill='#FFF'] {
  display: block !important;
  fill: currentColor !important;
}

/* Mastercard son dos circulos solapados: en un solo color se fundirian en una
   mancha, asi que van de contorno, que es como se reconoce la marca. */
.index-product .payment-icons__icon svg[aria-labelledby='pi-master'] circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6;
}

.index-product .payment-icons__icon svg[aria-labelledby='pi-master'] path[fill='#FF5F00'] {
  display: none !important;
}

/* Mercado Pago llega como <img> de un SVG remoto, asi que por dentro no se
   puede tocar: o entra entero o no entra. En negativo, su ovalo es una mancha
   maciza que no pega con las demas, que son caladas, asi que se recorta y se
   deja solo el logotipo, como Visa o Amex.

   El recorte se hace con object-fit: cover — la caja es mas estrecha que el
   archivo (que es muy apaisado), asi que cover escala por alto y sobra ancho —
   y object-position: right, que decide que lo que sobra es el ovalo de la
   izquierda. El brightness(0) pasa a negro todo lo opaco y respeta la
   transparencia. Los estilos en linea del snippet (fondo blanco, marco y
   ancho) hay que anularlos uno a uno.

   Si algun dia se quiere el ovalo de vuelta: ancho auto y fuera el object-fit. */
.index-product .payment-icons img[alt='Mercado Pago'] {
  width: clamp(44px, 12.5vw, 52px) !important;
  height: clamp(18px, 5.2vw, 22px) !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: right center;
  filter: brightness(0);
}

/* El bloque "Cambios" ya trae icono elegido en el editor (icon-box, un cubo de
   linea) y estaba oculto por CSS. Se recupera: es de trazo, del mismo grosor
   que el resto de la pagina, y por eso pega con las siluetas de pago. */
.index-product .product__feature .block__icon {
  display: inline-block;
  width: clamp(18px, 5vw, 22px);
  height: clamp(18px, 5vw, 22px);
  margin: 0 clamp(8px, 2.4vw, 10px) 0 0;
  vertical-align: middle;
  color: inherit;
}

.index-product .product__feature .block__icon svg,
.index-product .product__feature .block__icon .icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* --- Bloque "Cambios" (features) y acordeones -------------------------- */
.index-product .product__features {
  padding-top: clamp(20px, 6.4vw, 40px);
}

/* El tema le mete 16 px de sangria propia a este bloque. Era el unico de toda
   la columna con ella: el titulo, el precio, las tallas, el boton, los pagos,
   los beneficios, la entrega y los acordeones arrancan todos en el mismo eje,
   y "CAMBIOS" salia 16 px mas adentro (medido: 47 px frente a 31). */
.index-product .product__feature {
  padding-inline: 0;
}
.index-product .product__feature .block__icon__text,
.index-product .product__feature__heading {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-product .product__feature .rte,
.index-product .product__feature .rte p {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.index-product .product__feature .rte strong {
  font-weight: 700;
}

.index-product .product-accordion .accordion__title {
  padding: clamp(10px, 3.2vw, 16px) 0;
  border-bottom: var(--thoro-pdp-rule);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-product .product-accordion .accordion__title svg,
.index-product .product-accordion .accordion__title .icon {
  width: 12px;
  height: 12px;
}

.index-product .product-accordion .accordion__body,
.index-product .product-accordion .accordion__body p,
.index-product .product-accordion .accordion__body li {
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(11px, 3.2vw, 13px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.index-product .product-accordion .accordion__body h3,
.index-product .product-accordion .accordion__body h4 {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Productos relacionados ------------------------------------------- */
/* Aire por arriba: el bloque venia pegado al acordeon anterior y los titulares
   de las pestañas, que son enormes, necesitan respirar para leerse como el
   arranque de una seccion nueva y no como la continuacion de la ficha. */
.related__wrapper {
  padding-top: clamp(28px, 9vw, 72px);
}


.related__wrapper .related__products .tabs,
.related__wrapper .related__products .tabs.text-center {
  display: flex;
  justify-content: flex-start;
  gap: clamp(16px, 5vw, 40px);
  padding-inline: var(--thoro-sec-pad, 21px);
  text-align: left;
}

.related__wrapper .grid__heading-holder {
  text-align: left;
}

.related__products .tabs .tab-link {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(34px, 13.6vw, 84px); /* ~51 px a 375 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.related__products .tabs .tab-link.current {
  opacity: 1;
  text-decoration: none;
}

.related__products .tabs .tab-link::after {
  display: none;
}

.related__products .tabs__arrow {
  display: none;
}

@media only screen and (max-width: 749px) {
  .related__products .grid-outer {
    padding-left: var(--thoro-sec-pad, 21px);
    padding-right: var(--thoro-sec-pad, 21px);
  }
}

/* Precio en las tarjetas: siempre en el color del texto y sin negrita (el
   tema lo pinta rojo y en bold en Relacionados). */
.product-item .price.sale .new-price,
.product-item .product-item__price .new-price,
.related__wrapper .product-item .price,
.related__wrapper .product-item .price .money,
.related__wrapper .product-item .new-price {
  color: inherit;
  font-weight: 400;
}

/* --- Barra fija de añadir (móvil) y su hoja de tallas ------------------- */
.sticky-atc__title,
.sticky-atc__price,
.sticky-atc-sheet__header__title,
.sticky-atc-sheet__header__price,
.sticky-atc-sheet__label,
.sticky-atc__banner__item {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sticky-atc__btn,
.sticky-atc-sheet__cta {
  background: var(--THORO-BLACK, #000);
  border-radius: 999px;
  color: var(--THORO-BONE, #fffdf0);
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.sticky-atc-sheet__size {
  min-width: 40px;
  min-height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: inherit;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: 12px;
  text-transform: uppercase;
}

.sticky-atc-sheet__size.is-selected,
.sticky-atc-sheet__size[aria-pressed='true'],
.sticky-atc-sheet__size.active {
  background: var(--THORO-BLACK, #000);
  color: var(--THORO-BONE, #fffdf0);
}

/* --- Carrusel de recomendados de la app (Selleasy, "No olvides llevar") --- */
/* Lo pinta la app lb-upsell con TODOS sus estilos en linea —tamaños, colores,
   bordes y hasta el fondo de las flechas—, asi que aqui todo va con
   !important; no es exceso, es la unica forma de ganarle a un style="".

   Se le pasa el mismo lenguaje que al resto: rotulo en TT Espina, nombre en
   caja alta, precio en sans, y el CTA como la pildora negra del carrito.
   Cubre los dos widgets de la app (cpac e icuc) con el prefijo lb-widget. */

/* La app monta más piezas que el carrusel de la ficha —la lista con casillas
   de "No olvides llevarte", su botón de añadir y el aviso de pago—, y todas
   entran con la tipografía del navegador. Estas reglas van por el prefijo de
   la app en vez de por su id porque el widget solo existe en la tienda real:
   en el servidor de desarrollo no se monta, así que no hay dónde mirar los
   nombres exactos. Solo se toca la familia y el cuerpo; el resto de su
   maquetación se respeta. */
[class^='lb-'],
[class*=' lb-'],
[class^='lb-'] *,
[class*=' lb-'] * {
  font-family: var(--FONT-THORO-BODY, inherit) !important;
}

/* Los rótulos del widget, en la fuente de titulares. */
[class^='lb-'] h1,
[class^='lb-'] h2,
[class^='lb-'] h3,
[class*=' lb-'] h1,
[class*=' lb-'] h2,
[class*=' lb-'] h3,
[class*='lb-'] .lb-title,
[class*='lb-'] .lb-heading {
  color: var(--THORO-BLACK, #000) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* Nombres de producto y precios de la lista, en el sans de marca y con el
   cuerpo del resto de tarjetas. */
[class*='lb-'] [class*='title'],
[class*='lb-'] [class*='name'] {
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

[class*='lb-'] [class*='price'] {
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  letter-spacing: 0.02em !important;
}

[class*='lb-widget-'] .lb-addon-title {
  color: var(--THORO-BLACK, #000) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-size: clamp(22px, 6vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

/* Flechas: la app las pinta como cuadrados macizos casi negros, con el trazo
   del svg tambien en negro (invisible sobre su propio fondo). Pasan a circulo
   de contorno, como las del resto del sitio. */
[class*='lb-widget-'] .lb-carousel-nav {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  stroke: var(--THORO-BLACK, #000) !important;
}

[class*='lb-widget-'] .lb-carousel-nav svg path {
  stroke: var(--THORO-BLACK, #000) !important;
}

[class*='lb-widget-'] .lb-carousel-nav.lb-nav-disable {
  opacity: 0.3;
}

/* Tarjeta */
[class*='lb-widget-'] .lb-long-card {
  border-color: rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  padding: 10px !important;
}

[class*='lb-widget-'] .lb-card-title {
  color: var(--THORO-BLACK, #000) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

[class*='lb-widget-'] .lb-price-sale-price {
  color: var(--THORO-BLACK, #000) !important;
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

[class*='lb-widget-'] .lb-price-compare-price {
  color: rgba(0, 0, 0, 0.45) !important;
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-size: 12px !important;
  text-decoration: line-through;
}

/* OJO con las medidas: la app calcula cuantas tarjetas caben midiendo el
   contenido de una, y lo hace DESPUES de que cargue este CSS. La primera
   version daba al CTA alto y padding propios y al selector de talla mas
   relleno y caja alta; con eso el contenido dejaba de caber en los 124 px de
   tarjeta y la app se pasaba a una sola tarjeta por vista, a pantalla
   completa. De ahi que aqui solo se toquen color, tipografia y radios: ni
   alto, ni padding, ni white-space, ni nada que ensanche el contenido. */
[class*='lb-widget-'] .lb-variant-picker {
  border-color: rgba(0, 0, 0, 0.18) !important;
  border-radius: 6px !important;
  color: var(--THORO-BLACK, #000) !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
}

/* Cuántas tarjetas se ven a la vez.
   La app decide el ancho de cada tarjeta en JS, midiendo su contenedor, y en
   móvil este rediseño le mete 15 px de sangría por lado a la ficha (ver la
   cabecera de la sección 15). Con esos 30 px menos la app cruza su umbral y se
   pasa de tres tarjetas por vista a UNA a pantalla completa, con la foto
   gigante. Fijando el ancho aquí se recupera el paso de tres, que es como se
   ve en la tienda actual. El 24 px que se descuenta son los dos huecos de 12
   que la app pone entre tarjetas. */
@media only screen and (max-width: 749px) {
  [class*='lb-widget-'] lb-upsell-long-card {
    min-width: calc((100% - 24px) / 3) !important;
    width: calc((100% - 24px) / 3) !important;
  }
}

/* CTA: la pildora negra del resto del sitio, sin tocar su caja. */
[class*='lb-widget-'] .lb-button {
  border-radius: 999px !important;
  background-color: var(--THORO-BLACK, #000) !important;
  color: #fff !important;
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* --------------------------------------------------------------------------
   16. Carrito — drawer de la app Corner Cart (#corner-cowi-*)

   MEZCLA de los dos diseños. La base sigue siendo el carrito que entregó el
   cliente después del PDF —fondo crema, tarjeta blanca por línea con sombra,
   miniatura, "Eliminar", resumen con subtotal y ahorro, y botón negro de pago
   seguro—, y encima se le montan los acentos editoriales de la p.9 del
   WEBSITETHOROMOVIL: titular "CARRITO" gigante en TT Espina, rótulos en
   mayúsculas y el total del botón de pago alineado a la derecha.

   Lo que NO se trae de la p.9 (a propósito, para no perder lo que ya funciona):
   el fondo negro, las líneas sin tarjeta ni miniatura y la barra de pago clara.

   El carrito que ve el cliente lo pinta la app Corner, no el drawer del tema,
   así que se rebrandea por CSS sobre sus ids, que son estables entre versiones.

   Lo que este CSS NO puede resolver y hay que cambiar en el panel de la app:
     · el rótulo del título: con el titular gigante conviene dejarlo en
       "Carrito" a secas, como la p.9,
     · el texto del botón de pago ("Pagar carrito" → "Proceder al pago seguro"),
     · el badge de porcentaje por línea ("20% OFF"): la app solo pinta el
       precio tachado, el porcentaje no está en el DOM,
     · la fila de confianza (reseñas / cambios sin costo / entrega),
     · el rótulo de recomendados ("También te puede interesar…").
   -------------------------------------------------------------------------- */
#corner-cowi-open-primary-card {
  --cowi-bg: #ffffff; /* blanco: el crema del diseño tiraba a beige */
  --cowi-card: #ffffff;
  --cowi-fg: #111111;
  --cowi-muted: #6f6f6f;
  --cowi-line: rgba(0, 0, 0, 0.12);
  --cowi-radius: 12px;
  background: var(--cowi-bg) !important;
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-BODY, inherit);
}

/* La app tiñe medio panel con utilidades propias; se neutraliza el color pero
   NO los bordes, que ahora sí forman parte del diseño. */
#corner-cowi-open-primary-card [class*='text-cowi-primary-type'] {
  color: var(--cowi-fg) !important;
}

#corner-cowi-open-primary-card [class*='text-cowi-secondary-type'] {
  color: var(--cowi-muted) !important;
}

/* --- Cabecera: titular "CARRITO" gigante, y la X arriba a la derecha ------- */
/* Aqui entra el acento de la p.9: el titulo deja de ser un rotulo pequeño
   encima de la foto del banner y pasa a ser el bloque editorial que manda en
   la pantalla. Como ya no se lee sobre imagen, vuelve al negro y suelta la
   sombra, y la foto del banner se oculta: debajo de un titular de este tamaño
   no aporta nada y se comia todo el aire de la cabecera.

   Para volver al banner: borrar la regla que oculta las imagenes del header y
   devolver el titulo a #fff con su text-shadow y un font-size de 22-28 px. */
#corner-cowi-header {
  position: relative;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between;
  padding: clamp(6px, 2vw, 12px) clamp(14px, 4vw, 20px) clamp(8px, 2.5vw, 14px) !important;
  background: var(--cowi-bg, #f4f2ee) !important;
  background-image: none !important;
  overflow: visible;
}

/* La foto NO cuelga del header: es un hermano en absolute (h-60, 240 px) que
   asoma por detras de todo el bloque superior, con su degradado propio. Hay que
   apagar los dos o el titular gigante negro cae encima de la imagen. */
#corner-cowi-banner,
#corner-cowi-banner-blend-gradient {
  display: none !important;
}

/* El titular ocupa la fila entera y la X se queda sola en la de arriba: con
   flex-wrap, order y flex-basis del 100 % se consigue sin tocar el DOM de la
   app, que no se puede reparentar desde CSS. */
#cowi-corner-header-page-title {
  order: 2;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  /* El margen sube en negativo para comerse el hueco que TT Espina deja sobre
     las mayusculas: a este cuerpo son varios pixeles de aire que hacian que el
     titular pareciera caido. Va en em para que escale con el tamaño. */
  margin: -0.1em 0 0 !important;
}

/* Sin white-space: nowrap a proposito. El rotulo lo escribe el panel de la
   app y puede ser mas largo que "Carrito" ("Tu carrito"): a este cuerpo, con
   nowrap, se saldria por la derecha. Que parta linea es preferible. */
#cowi-corner-header-page-title,
#cowi-corner-header-page-title span {
  display: block;
  color: var(--cowi-fg, #111111) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-size: clamp(64px, 21vw, 104px) !important;
  font-weight: 700 !important;
  line-height: 0.84 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Cuadrado con borde, como en el diseño.
   Las medidas van con !important y flex-basis fijo porque la app trae sus
   propias utilidades de ancho sobre el mismo elemento: sin forzarlo, y con
   font-size:0 anulando el texto "Cerrar", la caja se quedaba en 2 px de ancho
   —tecnicamente pulsable, pero imposible de acertar con el dedo—. */
/* La app ya mete la palabra "Cerrar" dentro del botón junto al aspa; antes se
   anulaba con font-size:0 para dejar solo el icono y ahora se hace al revés:
   se muestra el texto y se esconde el aspa. Un rótulo se acierta mejor con el
   dedo que un icono de 14 px, y en un carrito conviene que la salida se lea. */
#corner-cowi-close-btn {
  order: 0;
  align-self: center;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--cowi-line);
  border-radius: 999px;
  background: transparent;
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(10px, 2.7vw, 12px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* Con el titular ya en su propia fila, el space-between del header no basta
   para llevar la X a la derecha: es el unico elemento de la fila de arriba. */
#corner-cowi-close-btn {
  margin-left: auto !important;
}

#corner-cowi-close-btn-icon {
  display: none !important;
}

/* --- Tarjetas: al ras del fondo ------------------------------------------ */
/* Antes eran tarjetas blancas con sombra sobre el crema. Ahora el panel entero
   va de un color: sin cambios de tono ni sombras, los bloques se separan por
   el aire y por las reglas finas, que es como se ordena el resto del sitio. */
#corner-cowi-cart-item-list-card,
#corner-cowi-cart-summary-card {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cowi-fg) !important;
}

/* Cada línea del carrito y cada recomendado venían también en su propia caja
   blanca con sombra. Se apagan igual, y las líneas se separan con una regla
   fina para que no se peguen unas a otras. */
[id^='corner-cowi-cart-item-'],
[id^='cowi-cart-recommended-item-carousel-wrapper-'] {
  background: transparent !important;
  box-shadow: none !important;
}

[id^='corner-cowi-cart-item-']:not([id*='qty']):not([id*='list']) {
  border-bottom: 1px solid var(--cowi-line) !important;
  border-radius: 0 !important;
}

/* El selector de cantidad se queda sin relleno; lo que lo señala como control
   es el contorno, que le pone su propia regla más abajo. */
[id^='corner-cowi-cart-item-qty-'] {
  background: transparent !important;
}

/* La app le pone flex-grow a la tarjeta de la lista para que ocupe toda la
   altura del panel: con uno o dos productos dejaba un vacio blanco enorme
   entre la nota y el bloque de descuento. Con flex: 0 1 auto la tarjeta llega
   solo hasta donde llega su contenido —debajo se ve el fondo crema, como en el
   diseño— y sigue pudiendo encogerse y hacer scroll cuando hay muchos. */
#corner-cowi-cart-item-list-card {
  flex: 0 1 auto !important;
}

#corner-cowi-cart-item-list-card-inner-elements-wrapper,
#corner-cowi-related-items,
#corner-cowi-cart-note-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cowi-fg) !important;
}

/* --- Envío gratis: mensaje y barra de progreso --------------------------- */
/* Mismo tratamiento que los precios y la tarjeta de producto: Panama en peso
   normal, con el cuerpo y el espaciado de la card. */
#corner-cowi-cart-progress-bar-text {
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(11px, 2.9vw, 14px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase !important;
}

/* La app YA trae pista gris (.corner-cowi-progress-bar-track) y relleno oscuro
   (.corner-cowi-progress-bar-track-fill). Lo unico que hace falta es
   redondearlos. La version anterior de este bloque pintaba de fondo el wrapper
   y, sobre todo, .corner-cowi-progress-bar-segment-1-tier —que no es la barra
   sino el contenedor de 322 px de la meta—: de ahi salia el barrote negro
   grueso que no se parecia en nada al diseño. */
#corner-cowi-open-primary-card .corner-cowi-progress-bar-wrapper,
#corner-cowi-open-primary-card .corner-cowi-progress-bar,
#corner-cowi-open-primary-card [class*='corner-cowi-progress-bar-segment'] {
  background: transparent !important;
}

#corner-cowi-open-primary-card .corner-cowi-progress-bar-track {
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.12) !important;
}

/* El relleno va en rojo de marca: es el único indicador de progreso del
   carrito y en negro se confundía con la pista. */
#corner-cowi-open-primary-card .corner-cowi-progress-bar-track-fill {
  border-radius: 999px !important;
  background: var(--THORO-RED, #e40e20) !important;
}

/* El camioncito que la app engancha a la punta del relleno se va: el rótulo de
   la meta ya dice lo que pasa y el icono no es de la casa. */
#corner-cowi-open-primary-card [class*='corner-cowi-progress-bar'] svg,
#corner-cowi-open-primary-card [class*='corner-cowi-progress-bar'] img,
#corner-cowi-open-primary-card [id*='progress-bar'] svg,
#corner-cowi-open-primary-card [id*='progress-bar'] img,
#corner-cowi-open-primary-card [id*='milestone-icon'],
#corner-cowi-open-primary-card [class*='milestone-icon'] {
  display: none !important;
}

/* Las flechas son para pasar entre metas; con una sola meta sobran y en el
   diseño no aparecen. */
#corner-cowi-cart-progress-bar-container-1 > div > #slider-left-btn,
#corner-cowi-cart-progress-bar-container-1 > div > #slider-right-btn {
  display: none !important;
}

/* La etiqueta de la meta vive en una celda de 80 px de un grid, asi que
   "Envio Gratis" se partia en dos lineas; al soltarle el ancho se salia por la
   derecha y quedaba cortada ("ENVIO GRATI"). Se saca del grid y se ancla al
   borde derecho de la barra, que es donde la pone el diseño, con el wrapper en
   relative y una altura minima para que no colapse la fila. */
#corner-cowi-open-primary-card .corner-cowi-progress-milestones-wrapper {
  position: relative;
  min-height: 18px;
}

#corner-cowi-goal-milestone-label-1-1,
[id^='corner-cowi-goal-milestone-label-'] {
  position: absolute;
  right: 0;
  top: 0;
  width: auto !important;
  text-align: right;
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap !important;
}

/* El rotulo de la meta lleva dentro un <span> al que la app le pone su propia
   familia, asi que estilar solo el contenedor no basta: el texto seguia
   saliendo en la fuente del sistema. */
[id^='corner-cowi-goal-milestone-label-'] span {
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  white-space: nowrap !important;
}

/* --- Línea de producto: tarjeta propia con miniatura --------------------- */
/* position: relative para poder colgar "Eliminar" debajo de la miniatura, que
   es donde lo pone el diseño; el DOM de la app lo tiene dentro de la columna
   de texto y el CSS no puede reparentar. */
#corner-cowi-open-primary-card .corner-cowi-cart-item {
  position: relative;
  margin-bottom: 10px;
  padding: 12px !important;
  padding-bottom: 26px !important; /* hueco para el "Eliminar" */
  border: 0 !important;
  border-radius: 0 !important;
  /* Sin tarjeta: el panel va de un solo tono y las líneas se separan por el
     aire y por la regla fina de abajo, no por un rectángulo blanco. */
  background: transparent !important;
  box-shadow: none !important;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-primary-info {
  align-items: flex-start;
  gap: 12px;
}

/* La miniatura vuelve: el diseño la lleva en cada línea, sobre blanco. */
/* Miniatura cuadrada: ademas de parecerse al diseño, fija la altura y hace
   predecible la posicion del "Eliminar" que va debajo. */
#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-list-item-image-'] {
  display: block !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 76px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f2f0ec !important;
  overflow: hidden;
}

#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-list-item-image-'] img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-title-wrapper p,
#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-title-wrapper a {
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-size: clamp(17px, 4.6vw, 20px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  text-transform: uppercase;
  line-height: 1.15;
}

/* Talla: el diseño la rotula ("Talla: EG"); la app solo escribe el valor. */
#corner-cowi-open-primary-card .corner-cowi-cart-item-variant-options {
  margin-top: 2px;
  padding: 0;
  border: 0 !important;
  color: var(--cowi-muted) !important;
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  letter-spacing: 0;
  text-transform: none;
}

/* Solo se rotula si de verdad hay variante: productos de una sola variante
   (una gorra, por ejemplo) traen el elemento vacio y saldria un "Talla:"
   suelto sin valor detras. */
#corner-cowi-open-primary-card .corner-cowi-cart-item-variant-options:not(:empty)::before {
  content: 'Talla: ';
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-variant-options:empty {
  display: none !important;
}

/* La papelera de la app pasa a ser un enlace "Eliminar" bajo la miniatura.

   El boton trae de la app las clases opacity-50, transition-all,
   hover:rotate-90 y hover:opacity-100: pensadas para el icono de papelera, que
   gira 90 grados al pasar por encima. Como ahora el contenido es la palabra
   "Eliminar", lo que giraba era el texto, y el opacity-50 lo dejaba
   descolorido. Se anulan las dos cosas; el aviso de hover es el subrayado, que
   ya lleva. */
#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn,
#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn:hover,
#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn:focus {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  rotate: none !important;
  opacity: 1 !important;
  color: var(--cowi-muted) !important;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn:hover {
  color: var(--cowi-fg) !important;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn corner-icon,
#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn svg {
  display: none !important;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn::after {
  content: 'Eliminar';
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(10px, 2.8vw, 12px);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Se saca del flujo y se cuelga bajo la miniatura (12 px de padding + 76 px de
   foto + 6 px de aire), que es donde lo coloca el diseño. */
#corner-cowi-open-primary-card .corner-cowi-cart-item-list-item-info-remove-btn {
  position: absolute;
  left: 12px;
  top: 94px;
  z-index: 2;
}

/* --- Stepper: sin caja, solo los signos y la cifra ----------------------- */
#corner-cowi-open-primary-card .corner-cowi-cart-item-qty {
  gap: 0;
  border-radius: 999px !important;
  background: transparent !important;
  overflow: hidden;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-customiser-qty-decrease,
#corner-cowi-open-primary-card .corner-cowi-cart-item-customiser-qty-increase {
  width: 30px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cowi-fg) !important;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-customiser-qty-decrease svg,
#corner-cowi-open-primary-card .corner-cowi-cart-item-customiser-qty-increase svg,
#corner-cowi-open-primary-card .corner-cowi-cart-item-customiser-qty-decrease path,
#corner-cowi-open-primary-card .corner-cowi-cart-item-customiser-qty-increase path {
  fill: var(--cowi-fg) !important;
  stroke: var(--cowi-fg) !important;
}

/* --- Precio de línea: actual en negrita, anterior tachado encima ---------- */
#corner-cowi-open-primary-card .corner-cowi-cart-item-price {
  flex-direction: column;
  align-items: flex-end !important;
  gap: 2px;
}

/* Los precios del carrito llevan la misma tipografia que la tarjeta de
   producto (seccion 7): Panama en peso normal, con el mismo cuerpo y el mismo
   espaciado. El clamp se repite en vez de reutilizar --thoro-card-label
   porque esa variable vive en .product-item y aqui no llega. */
#corner-cowi-open-primary-card .corner-cowi-cart-item-price p {
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-weight: 400 !important;
  font-size: clamp(11px, 2.9vw, 14px) !important;
  letter-spacing: 0.02em;
}

#corner-cowi-open-primary-card .corner-cowi-cart-item-price p:first-child:not(:only-child) {
  order: 2; /* el tachado va DEBAJO del precio vigente, como en el diseño */
  color: inherit !important;
  font-size: 0.9em !important;
  font-weight: 400 !important;
  opacity: 0.5;
  text-decoration: line-through;
}

/* --- "También te puede interesar" ---------------------------------------- */
/* La app monta esto como un carrusel de una tarjeta por paso: la tarjeta ocupa
   el ancho entero y las dos flechas van ENCIMA, en absolute, asi que pisaban la
   miniatura y el CTA. Ademas la tarjeta venia sin aire ni contorno y la
   miniatura traia un width del 15 % EN LINEA sobre un relleno gris (bg-gray-300
   de la app), asi que cambiaba de forma con cada foto.

   Aqui se le da caja: rotulo centrado en TT Espina bold, miniatura cuadrada
   fija, tarjeta con aire y contorno, texto alineado al centro vertical y el CTA
   en pildora anclado a la derecha sin encogerse. Las flechas solo salen cuando
   hay raton; en tactil se pasa deslizando y estorbaban. */
#corner-cowi-related-items {
  margin-top: clamp(10px, 3vw, 16px) !important;
}

#corner-cowi-related-items-text {
  margin-bottom: clamp(8px, 2.5vw, 12px);
  color: var(--cowi-fg, #111111) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-size: clamp(24px, 6.4vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-align: center !important;
  text-transform: uppercase !important;
}

#corner-cowi-cart-related-products-list {
  position: relative;
  padding: 0 !important;
}

/* El contorno va con box-shadow inset y el padding con box-sizing de la app
   (box-border): la app calcula el ancho de cada paso del carrusel en linea, y
   un border de 2 px descuadraba el paso dejando los vecinos cortados
   ("REGAR", "AG…"). Un inset no ocupa caja. */
#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-wrapper {
  align-items: center;
  gap: 12px;
  padding: 10px !important;
  border-radius: 12px !important;
  /* Sin relleno blanco. El contorno que delimita cada tarjeta del carrusel va
     como borde, no como sombra interior: es lo mismo a la vista y así el
     carrito se queda sin un solo box-shadow. */
  background: transparent !important;
  border: 1px solid var(--cowi-line, rgba(0, 0, 0, 0.12)) !important;
}

/* Miniatura cuadrada. El width del 15 % es un style en linea y el max-h-16 una
   utilidad de la app: los dos necesitan !important para caer. */
#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-image {
  flex: 0 0 62px !important;
  width: 62px !important;
  min-width: 62px !important;
  height: 62px !important;
  max-height: none !important;
  border-radius: 8px !important;
  background: #f2f0ec !important;
  overflow: hidden;
}

#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-image a,
#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-info-wrapper {
  gap: 10px;
  padding: 0 !important;
}

#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Nombre: mismo tratamiento que las lineas del carrito —TT Espina bold en caja
   alta—, a dos lineas como maximo para que un nombre largo no descuadre la
   tarjeta. */
#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-info-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--cowi-fg, #111111) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-size: clamp(17px, 4.5vw, 19px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-info-price {
  gap: 6px;
  color: var(--cowi-fg, #111111) !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(11px, 2.9vw, 14px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* El precio anterior lo pinta la app con .line-through y su gris; se le quita
   el peso para que no compita con el vigente. */
#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-info-price .line-through {
  margin-right: 0 !important;
  color: inherit !important;
  font-size: 0.9em !important;
  font-weight: 400 !important;
  opacity: 0.5;
}

/* El CTA toma el lenguaje del botón del banner y del "Agregar al carrito" de
   la ficha: píldora de contorno en Marlboro que se rellena al pasar por encima.

   Sin la bolita del interruptor, a diferencia de la tarjeta de producto: aquí
   la tarjeta mide 124 px y su contenido es justo lo que la app mide para
   decidir cuántas caben por vista. Un botón más ancho la hacía saltar a una
   tarjeta por pantalla (ver la nota del ancho más abajo), así que se respeta
   la caja y solo cambian el trazo, la tipografía y el relleno. */
#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px !important;
  border: 1px solid var(--cowi-fg, #111111) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--cowi-fg, #111111) !important;
  font-family: var(--FONT-THORO-SCRIPT, inherit) !important;
  font-size: clamp(12px, 3.2vw, 14px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  transition: color 0.3s ease 0.1s;
}

#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cowi-fg, #111111);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-cta > * {
  position: relative;
  z-index: 2;
}

@media (hover: hover) {
  #corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-cta:hover {
    color: #fff !important;
  }

  #corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-cta:hover::after {
    transform: translate3d(0, 0, 0);
  }
}

/* Las flechas y los puntos del carrusel NO se pueden tocar desde aqui: los
   pinta <corner-carousel> dentro de su shadow root y no expone ::part, asi que
   ni el CSS del tema ni un !important llegan. Quedan con el aspecto de la app,
   por fuera de la tarjeta. Si algun dia molestan, la unica via es inyectar un
   <style> en el shadowRoot por JS. Lo que si es alcanzable es la tarjeta: la
   app la reparte por slot y vive en el DOM normal.

   Las que si se ocultan mas arriba son las del medidor de envio gratis: esas
   comparten los ids #slider-left-btn / #slider-right-btn pero estan en el DOM
   normal. */
#corner-cowi-cart-related-products-list button:not(.cowi-cart-recommended-item-carousel-cta) svg,
#corner-cowi-cart-related-products-list button:not(.cowi-cart-recommended-item-carousel-cta) path {
  fill: var(--cowi-fg, #111111) !important;
  stroke: var(--cowi-fg, #111111) !important;
}

/* --- Nota y código de descuento ------------------------------------------ */
/* La nota es un extra que casi nadie usa: pierde el recuadro y el icono y se
   queda en un enlace subrayado, para que no compita con el botón de pago. */
#corner-cowi-cart-note-btn {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#corner-cowi-cart-note-btn svg,
#corner-cowi-cart-note-btn img {
  display: none !important;
}

#corner-cowi-cart-note-btn,
#corner-cowi-cart-note-btn span {
  color: var(--cowi-muted) !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-transform: uppercase !important;
}

#corner-cowi-cart-apply-discount-input {
  border: 1px solid var(--cowi-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-size: clamp(11px, 3vw, 13px) !important;
}

#corner-cowi-cart-apply-discount-section-cta-btn {
  border: 1px solid var(--cowi-fg) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
}

/* --- Resumen: subtotal, envío y ahorro ----------------------------------- */
#corner-cowi-cart-summary-items-wrapper span {
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(11px, 2.9vw, 14px) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#corner-cowi-cart-summary-subtotal span:last-child,
#corner-cowi-cart-summary-shipping span:last-child {
  color: var(--cowi-fg) !important;
  font-weight: 700 !important;
}

/* El ahorro va en rojo de marca, que es el acento del diseño. */
#corner-cowi-cart-summary-discount span,
#corner-cowi-cart-summary-discount-value {
  color: var(--THORO-RED, #e40e20) !important;
  font-weight: 700 !important;
}

/* --- Botón de pago: negro, ancho completo -------------------------------- */
/* La app lo pega a los tres bordes de la tarjeta de resumen. El aire se le da
   al contenedor, no al boton: asi el boton sigue midiendo el 100 % de lo que
   le queda y no hace falta pelear con su width. */
#corner-cowi-cart-cta-wrapper {
  padding: clamp(8px, 2.5vw, 12px) !important;
}


/* De la p.9 se toma el reparto de la barra: el rotulo pegado a la izquierda y
   el total pegado a la derecha, en vez del bloque centrado con separador que
   trae la app. */
#corner-cowi-cart-summary-card-cta-button {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 10px;
  width: 100% !important;
  min-height: 56px;
  padding: 0 clamp(16px, 5vw, 28px) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--cowi-fg) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#corner-cowi-cart-summary-card-cta-button-text,
#corner-cowi-cart-summary-card-cta-button-price {
  color: #fff !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(13px, 3.6vw, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
}

/* El separador solo tenia sentido con los dos textos juntos en el centro. */
#corner-cowi-cart-summary-card-cta-button-seperator {
  display: none !important;
}

/* El total, un punto por encima del rotulo: es el dato que se busca al pagar. */
#corner-cowi-cart-summary-card-cta-button-price {
  font-size: clamp(15px, 4.2vw, 18px) !important;
  white-space: nowrap;
}

/* --- Carrito vacío ------------------------------------------------------- */
/* La app pinta aquí un pictograma de bolsa de 70 px y el aviso en la fuente
   del sistema, en gris. El pictograma se va —el rediseño no usa dibujos de ese
   tipo— y el aviso pasa a TT Espina, como los demás rótulos del carrito.

   Se oculta también el contenedor del icono, no solo el <svg>: la app le pone
   márgenes propios (mt-5 mb-6) y, con el dibujo fuera, dejaban un hueco de 60
   px sin explicación. */
#corner-corner-cart-item-list-empty svg,
#corner-corner-cart-item-list-empty *:has(> svg) {
  display: none !important;
}

#corner-corner-cart-item-list-empty {
  padding: clamp(24px, 8vw, 48px) clamp(14px, 4vw, 24px);
}

#corner-corner-cart-item-list-empty .text-center {
  color: var(--cowi-fg, #111111) !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-size: clamp(20px, 5.4vw, 26px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* --- Fila de confianza bajo el botón de pago ----------------------------- */
/* Los tres avales van sin pictogramas, a petición del cliente, y el botón se
   queda como está.

   El texto entra por content: la app no deja añadir nada bajo su CTA y aquí no
   hay liquid que tocar; el carrito entero lo pinta Corner. Al ir en un
   pseudo-elemento no lo lee un lector de pantalla, cosa asumible en un aval
   decorativo que repite lo que ya dicen la ficha y el pie.

   Para cambiar los textos, editar la variable de aquí abajo: es una sola
   cadena y los puntos hacen de separador. */
#corner-cowi-cart-cta-wrapper {
  /* Se acortó "Entrega en 4-5 días hábiles" a "Entrega 4-5 días": con el cuerpo
     grande, la frase entera se partía en dos líneas en móvil. */
  --thoro-avales: '(4.9) +10,000 reseñas · Cambios sin costo · Entrega 4-5 días';
}

/* En una sola línea: el cuerpo va atado al ancho (2,3vw) en vez de a un mínimo
   fijo, así que la frase encoge con la pantalla y nunca parte. A 430 px salen
   unos 10 px y ocupa ~336 de los ~390 disponibles; en pantallas más estrechas
   baja en la misma proporción. El letter-spacing se queda en 0 porque a este
   cuerpo cada centésima cuenta para que quepa. */
#corner-cowi-cart-cta-wrapper::after {
  content: var(--thoro-avales);
  display: block;
  padding: clamp(8px, 2.4vw, 12px) 0 0;
  /* Negro y con cuerpo: estos avales están para verse. El tamaño va atado al
     ancho para que la frase siga entrando en una sola línea hasta en un móvil
     de 320 px, que es el caso más justo. */
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Pestañas inferiores (Carrito / Ofertas) ----------------------------- */
#corner-cowi-page-selectors,
#corner-cowi-page-selectors button,
#corner-cowi-page-selectors span {
  background: transparent !important;
  color: var(--cowi-fg) !important;
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  text-transform: uppercase;
}

/* --- Sin bordes sueltos --------------------------------------------------
   La app reparte border-bottom por dentro de cada línea del carrito —uno bajo
   la talla, otro bajo el bloque de cantidad—, y quedaban rayas a media altura
   que no separaban nada: cortaban la línea por el medio y llegaban hasta el
   precio. Fuera, junto con el marco de las tarjetas del carrusel y el del
   botón de cerrar.

   Lo que se conserva: las reglas que separan un bloque de otro (el medidor de
   envío, cada línea de producto) y el contorno de lo que se pulsa o se
   escribe —botones de acción y campo del código—, que sin él desaparecen. */
/* Todos cuelgan del id del panel: la app marca estos bloques con utilidades
   propias (.border-b y compañía) desde una hoja que se carga después de esta,
   así que a igual peso ganaba ella y las rayas seguían ahí. */
#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-primary-info-'],
#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-customiser-'],
#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-qty-'],
#corner-cowi-open-primary-card .corner-cowi-cart-item-qty,
#corner-cowi-open-primary-card .cowi-cart-recommended-item-carousel-wrapper,
#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-list-item-image-'],
#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-price-'],
#corner-cowi-open-primary-card [id^='corner-cowi-cart-item-line-properties-'],
#corner-cowi-open-wrapper #corner-cowi-close-btn {
  border: 0 !important;
}

/* --- Sin sombras --------------------------------------------------------
   Ni las de la app —la tarjeta del panel, los botones— ni las que quedaban de
   este rebrandeo. El carrito es una superficie plana: lo que separa un bloque
   de otro son las reglas finas y el aire, no la profundidad. Los contornos que
   hacen falta van como border. */
#corner-cowi-open-primary-card,
#corner-cowi-open-primary-card *,
#corner-cowi-open-wrapper > * {
  box-shadow: none !important;
}

/* --- Velo del fondo cuando el carrito esta abierto ------------------------
   OJO con el selector: #corner-cowi-open-wrapper esta SIEMPRE en el DOM, es
   fixed, ocupa todo el viewport y lleva z-index 2147483647. La app le añade la
   clase bg-black solo mientras el carrito esta abierto.

   Aplicar el fondo al id sin condicion —como estaba— dejaba un velo negro del
   35 % encima de TODA la web de forma permanente. No bloqueaba los clics
   porque el wrapper es pointer-events:none, pero oscurecia el sitio entero.
   Por eso el velo se cuelga de .bg-black, que es el estado abierto. */
#corner-cowi-open-wrapper.bg-black {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* --- Botones en píldora ---------------------------------------------------
   La app impone su propio radio de esquina a TODO lo que hay dentro del
   carrito con una regla comodín marcada !important:

     .widgets-by-corner.corner-widget #corner-cowi-open-wrapper * { border-radius: 4px !important }

   Un id suelto pesa menos que ese id + dos clases, así que los redondeos que
   define esta hoja más arriba no llegaban a verse: todo salía con las mismas
   esquinas de 4 px. Para que valgan hay que igualar el peso de la app —su
   mismo prefijo más el id o la clase del elemento—, y eso es lo que hace este
   bloque. Los botones quedan en píldora, como los de las tarjetas de producto
   y los de la ficha. */
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper #corner-cowi-cart-summary-card-cta-button,
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper #corner-cowi-cart-apply-discount-section-cta-btn,
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper #corner-cowi-cart-apply-discount-input,
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper #corner-cowi-cart-note-input,
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper .cowi-cart-recommended-item-carousel-cta,
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper #corner-cowi-close-btn {
  border-radius: 999px !important;
}

/* El campo de descuento y su botón van pegados; con la píldora hay que darles
   aire por dentro o el texto queda montado en la curva. */
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper #corner-cowi-cart-apply-discount-input {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.widgets-by-corner.corner-widget #corner-cowi-open-wrapper #corner-cowi-cart-apply-discount-section-cta-btn {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* El relleno que entra al pasar por encima del "Agregar" de recomendados es un
   pseudo-elemento a inset 0: sin la misma curva se salía por las esquinas. */
.widgets-by-corner.corner-widget #corner-cowi-open-wrapper .cowi-cart-recommended-item-carousel-cta::after {
  border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   17. Lista de colecciones (sections/thoro-colecciones-lista.liquid) — p.10
   -------------------------------------------------------------------------- */
.thoro-collist {
  background: var(--tcl-bg, #f4f4f2);
  color: var(--tcl-text, #000);
  padding-bottom: var(--tcl-pad-bottom, 64px);
}

.thoro-collist__hero {
  height: var(--tcl-hero-h, 80vh);
  max-height: 900px;
  overflow: hidden;
}

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

.thoro-collist__band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(64px, 19vw, 120px);
  padding: 8px var(--thoro-sec-pad, 21px);
  background: var(--tcl-band-bg, #fff);
}

.thoro-collist__title {
  margin: 0;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(38px, 13.3vw, 96px); /* ~50 px a 375 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
}

.thoro-collist__list {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 8vw, 56px) var(--thoro-sec-pad, 21px) 0;
}

/* Fila: [temporada + enlace] [foto] [nombre] */
.thoro-collist__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 4vw, 32px);
  padding: clamp(14px, 4.5vw, 32px) 0;
}

.thoro-collist__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.thoro-collist__season {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.7vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.thoro-collist__year {
  margin-left: clamp(8px, 3.5vw, 20px);
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: 0.85em;
  vertical-align: 0.4em;
}

.thoro-collist__link {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 clamp(10px, 3vw, 16px);
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.7vw, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.thoro-collist__img {
  display: block;
  width: clamp(80px, 23.5vw, 160px); /* 88 px a 375 */
  aspect-ratio: 1;
  overflow: hidden;
  background: #e6e6e3;
}

.thoro-collist__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.thoro-collist__name {
  justify-self: end;
  color: inherit;
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(16px, 5.1vw, 34px); /* ~19 px a 375 */
  line-height: 1.05;
  text-align: right;
  text-decoration: none;
  text-transform: none;
}

@media (hover: hover) {
  .thoro-collist__link:hover {
    background: var(--tcl-text, #000);
    color: var(--tcl-bg, #f4f4f2);
  }

  .thoro-collist__row:hover .thoro-collist__img img {
    transform: scale(1.06);
  }
}

/* 13b. Colección destacada con foto de portada (landing Hombres/Mujer, p.6):
   la cabecera se superpone al pie de la foto en hueso. */
.thoro-collection--banner {
  position: relative;
}

/* La proporción 375/300 es la del mockup, que es de móvil. En escritorio daba
   dos problemas: al toparse con el max-height, la caja mantenía la proporción y
   encogía el ANCHO —el banner se quedaba en 788 px de los 1440, alineado a la
   izquierda—, y además metía una foto de 2,4 de proporción en una caja de 1,25,
   recortando por los lados más de la mitad de la escena.

   Con width: 100 % la caja ya no encoge, y en escritorio la proporción pasa a
   21/9 (2,33), casi la de las fotos de banner que se usan, así que el recorte
   es mínimo. */
.thoro-collection__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 300;
  max-height: 70vh;
  overflow: hidden;
  background: #111;
}

@media only screen and (min-width: 750px) {
  .thoro-collection__banner {
    aspect-ratio: 21 / 9;
    max-height: 80vh;
  }
}

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

.thoro-collection__banner::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.thoro-collection--banner .thoro-collection__head {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'season season name'
    'label  .      name';
  row-gap: 6px;
  align-items: end;
  padding: 0 var(--thoro-sec-pad, 21px) clamp(16px, 5.6vw, 36px);
  color: var(--THORO-BONE, #fffdf0);
}

.thoro-collection--banner .thoro-collection__season {
  grid-area: season;
  padding-top: 0;
}

.thoro-collection--banner .thoro-collection__label {
  grid-area: label;
  padding-top: 0;
}

.thoro-collection--banner .thoro-collection__name {
  grid-area: name;
  align-self: end;
  justify-self: end;
}

.thoro-collection--banner .thoro-collection__kicker {
  font-size: clamp(22px, 7.2vw, 44px); /* ~27 px a 375 */
  text-align: right;
}

.thoro-collection--banner .thoro-collection__brand {
  display: none;
}

.thoro-collection--banner .thoro-collection__inner {
  position: static;
}

.thoro-collection--banner .thoro-collection__cta {
  margin-top: clamp(14px, 4.8vw, 28px);
}

/* --------------------------------------------------------------------------
   18. Página de sucursales y contacto (p.14)
   sections/sucursales-all.liquid + section-rich-text (bloque CONTACTO)
   -------------------------------------------------------------------------- */
.sucursales-wrapper {
  padding: clamp(24px, 8vw, 56px) var(--thoro-sec-pad, 21px) clamp(32px, 10vw, 72px) !important;
}

.sucursales-wrapper .sucursales-grid {
  gap: clamp(28px, 9vw, 64px) !important;
}

/* Fila: foto (36 %) + info; sin caja ni borde. */
.sucursales-wrapper .sucursal-card {
  display: grid !important;
  grid-template-columns: 36% 1fr !important;
  gap: clamp(12px, 4.3vw, 28px);
  align-items: start;
  border: 0 !important;
  background: transparent;
}

.sucursales-wrapper .sucursal-img img {
  height: auto !important;
  aspect-ratio: 135 / 145;
  object-fit: cover;
}

.sucursales-wrapper .sucursal-info {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.7vw, 14px) !important;
  padding: 0 !important;
}

.sucursales-wrapper .sucursal-info__head {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 5vw, 32px);
}

.sucursales-wrapper .sucursal-info__name,
.sucursales-wrapper .sucursal-info h3.titulo-popup {
  margin: 0 !important;
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(11px, 3.2vw, 15px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sucursales-wrapper .sucursal-info__label,
.sucursales-wrapper .sucursal-info__key {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sucursales-wrapper .sucursal-info__address {
  margin: 0 0 0 clamp(40px, 22vw, 120px) !important; /* debajo de DOMICILIO */
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  font-size: clamp(10px, 2.9vw, 13px) !important;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.sucursales-wrapper .sucursal-info__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 !important;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(10px, 2.9vw, 13px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.sucursales-wrapper .sucursal-info__line a {
  color: inherit;
  text-decoration: none;
}

.sucursales-wrapper .sucursal-info__hours,
.sucursales-wrapper .sucursal-info__hours p {
  margin: 0;
  font: inherit;
}

.sucursales-wrapper .estado {
  margin: 0 !important;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(10px, 2.9vw, 12px) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sucursales-wrapper .sucursal-info__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.sucursales-wrapper .sucursal-info__map {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 clamp(12px, 4vw, 20px);
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 14px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.sucursales-wrapper .btn-ver-mas {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit;
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (hover: hover) {
  .sucursales-wrapper .sucursal-info__map:hover {
    background: var(--THORO-BLACK, #000);
    color: var(--THORO-BONE, #fffdf0);
  }
}

/* Popup del mapa: tipografía de marca. */
.popup-box .titulo-popup,
.popup-box h2 {
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}

.popup-box .btn-mapa,
.popup-box .popup-close {
  font-family: var(--FONT-THORO-BODY, inherit) !important;
  text-transform: uppercase;
}

/* Bloque CONTACTO (rich text): negro, título TT Espina gigante a la
   izquierda y datos en Panama a la derecha; la última línea a todo el ancho. */
.thoro-contacto-block,
.thoro-contacto-block .rich-text,
.thoro-contacto-block .section-rich-text {
  background: var(--THORO-BLACK, #000) !important;
  color: var(--THORO-BONE, #fffdf0) !important;
}

.thoro-contacto-block .rich-text__heading,
.thoro-contacto-block h1,
.thoro-contacto-block h2,
.thoro-contacto-block h3 {
  margin: 0 !important;
  font-family: var(--FONT-THORO-DISPLAY, inherit) !important;
  font-size: clamp(56px, 22vw, 150px) !important;
  font-weight: 700 !important;
  line-height: 0.85 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  text-align: left !important;
}

.thoro-contacto-block .rte,
.thoro-contacto-block .rte p {
  font-family: var(--FONT-THORO-NAV, inherit) !important;
  font-size: clamp(12px, 3.5vw, 16px) !important;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left !important;
  color: var(--THORO-BONE, #fffdf0) !important;
}

.thoro-contacto-block .rte a {
  color: inherit;
}

/* Bloque CONTACTO de la página de sucursales (section-rich-text = .index-rte
   con color-scheme-2 negro, justo después de la lista de sucursales): título
   TT Espina gigante y datos en Panama, todo a la izquierda. */
.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte.color-scheme-2 {
  background: var(--THORO-BLACK, #000);
  color: var(--THORO-BONE, #fffdf0);
}

.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte .hero__content__wrapper {
  padding-inline: var(--thoro-sec-pad, 21px);
}

.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte .hero__content {
  max-width: none;
  padding: 0;
}

.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte .hero__title {
  margin: 0 0 clamp(8px, 3vw, 16px);
  padding: 0;
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(56px, 22vw, 150px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: left;
  color: var(--THORO-BONE, #fffdf0);
}

.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte .hero__rte,
.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte .hero__rte p,
.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte .hero__rte a,
.template-page .shopify-section:has(.sucursales-wrapper) ~ .shopify-section .index-rte .hero__rte strong {
  padding: 0;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(12px, 3.5vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--THORO-BONE, #fffdf0);
  text-decoration: none;
}
/* --------------------------------------------------------------------------
   19. Preguntas frecuentes (sections/section-accordion-group.liquid)
   Va en la página de producto, justo encima de "Productos relacionados", y
   era lo único de ese tramo que seguía con la tipografía del tema base:
   titular y preguntas en Helvetica bold sobre el resto de la ficha ya
   rotulada en TT Espina / Panama.

   No se inventa un estilo nuevo: el titular toma la misma escala que las
   pestañas de Relacionados (son secciones contiguas y deben leerse como un
   par) y las preguntas copian el acordeón de la ficha (DESCRIPCIÓN), que ya
   estaba con marca. La sangría pasa a --thoro-sec-pad para que FAQ, la rejilla
   de producto y Relacionados caigan sobre la misma vertical.
   -------------------------------------------------------------------------- */
/* El .wrapper del tema se centra con max-width, así que a 1440 el FAQ
   arrancaba 94 px a la derecha de Relacionados. La sangría estándar de estas
   secciones es --outer + --thoro-sec-pad (82 px a 1440, 62 a 768, 38 a 390):
   con esta fórmula FAQ, Relacionados y la rejilla caen en la misma vertical en
   los tres anchos. */
.accordion-group .faq.wrapper {
  max-width: none;
  padding-inline: calc(var(--outer, 16px) + var(--thoro-sec-pad, 21px));
}

.accordion-group .accordion__heading {
  margin: 0 0 clamp(12px, 4vw, 28px);
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(34px, 13.6vw, 84px); /* misma escala que Relacionados */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.accordion-group .accordion {
  border-bottom: 1px solid currentColor;
}

/* La primera pregunta lleva regla arriba para que el bloque cierre por los dos
   lados, como el acordeón de la ficha. */
.accordion-group .accordion:first-of-type {
  border-top: 1px solid currentColor;
}

.accordion-group .accordion__title {
  padding: clamp(10px, 3.2vw, 16px) 30px clamp(10px, 3.2vw, 16px) 0;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.accordion-group .accordion__title svg,
.accordion-group .accordion__title .icon {
  width: 12px;
  height: 12px;
}

.accordion-group .accordion__body,
.accordion-group .accordion__body p,
.accordion-group .accordion__body li {
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(11px, 3.2vw, 13px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.accordion-group .accordion__body strong {
  font-weight: 400;
}
/* --------------------------------------------------------------------------
   20. Buscador (sections/predictive-search.liquid + snippets/header-search-
   popdown.liquid + templates/search.json)

   Las tarjetas de resultado ya estaban con marca (sección 7), pero todo lo que
   las rodea seguía con el tema base: campo de búsqueda en caja con botón negro
   cuadrado, rótulos y filtros en Helvetica bold. Aquí se pasa al mismo
   lenguaje que el resto del sitio:

     · el campo deja la caja y se queda en una regla fina, como los acordeones
       de la ficha y el FAQ;
     · los rótulos ("BÚSQUEDAS POPULARES", "PRODUCTOS POPULARES", filtros) van
       en Panama versalita con tracking, que es el registro de etiqueta usado
       en toda la ficha de producto;
     · las sugerencias van en TT Espina, para que el desplegable se lea como
       una extensión del menú y no como otro componente.
   -------------------------------------------------------------------------- */

/* --- Campo de búsqueda: regla fina en vez de caja ---------------------- */
.search-form,
.search-form .input-holder,
.search-form input[type='search'],
.search-form input[type='text'] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.search-form .input-holder {
  border-bottom: 1px solid currentColor;
}

.search-form input[type='search'],
.search-form input[type='text'] {
  padding-inline: 0;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(13px, 3.2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-form input::placeholder {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.45;
}

/* El tema pinta la lupa como cuadro negro; aquí es solo el icono. */
.search-form .search-popdown__submit {
  border: 0;
  background: transparent;
  color: inherit;
}

/* El desplegable enfoca el campo nada más abrirse y Chrome trata ese foco
   programático como :focus-visible, así que su anillo por defecto
   (outline: 1px auto) dibujaba una caja redondeada justo encima de la regla
   fina. No sirve reservar el contorno para :focus-visible porque este caso
   entra ahí igualmente.

   El indicador de foco pasa a ser el propio subrayado, que dobla su grosor:
   son 2 px a todo el ancho del campo en el color del texto, perfectamente
   visible y sin romper el trazo del diseño. */
.search-form .input-holder:focus-within {
  border-bottom-width: 2px;
}

.search-form input:focus,
.search-form input:focus-visible {
  outline: none;
}

.search-form .search-reset {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Rótulos y sugerencias del desplegable ----------------------------- */
.predictive-search__heading {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.predictive-search__link {
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
}

/* El listado de productos del desplegable ya usa la tarjeta de la sección 7;
   solo se iguala el rótulo de su columna, que es un heading aparte. */
.predictive-search__products__list .product-item__title {
  font-family: var(--FONT-THORO-NAV, inherit);
}

/* --- Página de resultados ---------------------------------------------- */
.search__caption {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Filtros (también los usa la página de colección) ------------------- */
.collection__filters .filter-group__heading {
  padding-block: clamp(10px, 3.2vw, 14px);
  border-bottom: 1px solid currentColor;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.collection__filters .filter-group__body,
.collection__filters .filter-group__body label,
.collection__filters .filter-group__body a {
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(10px, 2.9vw, 12px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* --------------------------------------------------------------------------
   21. Bloqueo de scroll de los overlays del tema

   La app del carrito (Corner Cart) inyecta en su CSS personalizado una regla
   global:

       body { overflow: auto !important; }

   El tema bloquea el scroll de fondo poniendo overflow:hidden EN LÍNEA sobre
   <body> y marcando <html data-scroll-locked>. Como el estilo en línea no
   lleva !important, la regla de la app le gana y el bloqueo queda anulado en
   TODOS los overlays: menú, panel de tallas y desplegable de búsqueda.

   Efectos medidos antes de esta regla: al abrir el menú estando a 800 px de
   scroll la página saltaba a 0 y, en móvil, el fondo seguía desplazándose por
   detrás del overlay; al cerrar no se recuperaba la posición.

   Aquí se devuelve el bloqueo con un selector más específico que {body}, de
   modo que gane entre dos declaraciones !important. Solo actúa mientras el
   tema tiene un overlay abierto, así que no interfiere con el carrito de la
   app, que nunca pone data-scroll-locked.

   Lo correcto a medio plazo es borrar esa línea del CSS personalizado de
   Corner Cart en el panel de la app; mientras siga ahí, esta regla la
   compensa. */
html[data-scroll-locked] body {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* --------------------------------------------------------------------------
   22. "Shop the look" y "Slider Colección"

   Las dos secciones venían con la tipografía del tema (Helvetica) y botones
   macizos. Aquí se les pasa el mismo lenguaje que al resto: TT Espina en los
   titulares, Panama en las etiquetas y píldora de contorno en los botones.

   Los estilos originales viven en un <style> dentro de cada sección, es decir
   en el <body> y por tanto DESPUÉS de esta hoja: en un empate de especificidad
   ganarían ellos. Por eso cada regla se ancla a .shopify-section, que suma una
   clase y las deja por debajo sin necesidad de !important.
   -------------------------------------------------------------------------- */
/* --- Shop the look (sections/shop-look.liquid) --------------------------- */
.shopify-section .influencer-look__title {
  margin-bottom: clamp(8px, 2.4vw, 14px);
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(28px, 7.4vw, 56px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

/* El pie que acompaña al titular. */
.shopify-section .influencer-look__title + p,
.shopify-section .influencer-look__header p {
  margin: 0 0 clamp(16px, 4vw, 28px);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Botón sobre la foto: píldora de contorno en hueso, que es como se comporta
   el CTA del hero sobre imagen. */
.shopify-section .influencer-btn {
  padding: 0 clamp(16px, 4vw, 26px);
  min-height: clamp(34px, 9vw, 42px);
  background: transparent;
  border: 1px solid var(--THORO-BONE, #fffdf0);
  border-radius: 999px;
  color: var(--THORO-BONE, #fffdf0);
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(13px, 3.6vw, 17px);
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: background 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
  .shopify-section .influencer-btn:hover {
    background: var(--THORO-BONE, #fffdf0);
    color: var(--THORO-BLACK, #000);
  }
}

/* Ficha emergente: títulos, precios y botones con las tipografías de marca. */
.shopify-section .influencer-popup__title,
.shopify-section .influencer-popup__product-title {
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.shopify-section .influencer-popup__price,
.shopify-section .influencer-popup__product-price {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 2.9vw, 14px);
  letter-spacing: 0.02em;
}

/* Botones de la ficha emergente: el mismo interruptor que el CTA del banner y
   que "Añadir a carrito" de la tarjeta —píldora de contorno en Marlboro, con
   la bolita a la izquierda y el relleno que barre al encenderse—.

   Aquí el texto del botón es un nodo suelto, sin <span> que envolver, así que
   no se le puede subir el z-index. Se resuelve al revés: el botón aísla su
   contexto y los dos pseudo-elementos van con z-index negativo —el relleno más
   atrás que la bolita—, de modo que ambos quedan sobre el fondo del botón pero
   por debajo de su texto. */
.shopify-section .influencer-popup__add-btn,
.shopify-section .influencer-popup__add-all-btn {
  --knob: clamp(16px, 4.2vw, 22px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(34px, 9vw, 44px);
  padding: 0 calc(var(--knob) + 16px);
  background: transparent;
  border: 1px solid var(--THORO-BLACK, #000);
  border-radius: 999px;
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(13px, 3.6vw, 17px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: color 0.3s ease 0.12s;
}

.shopify-section .influencer-popup__add-btn::before,
.shopify-section .influencer-popup__add-all-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 6px;
  width: var(--knob);
  height: var(--knob);
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate3d(0, -50%, 0);
  transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease,
    border-color 0.3s ease;
}

.shopify-section .influencer-popup__add-btn::after,
.shopify-section .influencer-popup__add-all-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--THORO-BLACK, #000);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Encendido: con ratón al pasar por encima, y en táctil con la marca que pone
   el script al pulsar (ver snippets/thoro-boton-switch.liquid). */
.shopify-section .influencer-popup__add-btn.is-switching,
.shopify-section .influencer-popup__add-all-btn.is-switching {
  color: var(--THORO-BONE, #fffdf0);
}

.shopify-section .influencer-popup__add-btn.is-switching::after,
.shopify-section .influencer-popup__add-all-btn.is-switching::after {
  transform: translate3d(0, 0, 0);
}

.shopify-section .influencer-popup__add-btn.is-switching::before,
.shopify-section .influencer-popup__add-all-btn.is-switching::before {
  left: calc(100% - var(--knob) - 6px);
  background: var(--THORO-BONE, #fffdf0);
  border-color: var(--THORO-BONE, #fffdf0);
}

@media (hover: hover) {
  .shopify-section .influencer-popup__add-btn:hover:not([disabled]),
  .shopify-section .influencer-popup__add-all-btn:hover:not([disabled]) {
    background: transparent;
    color: var(--THORO-BONE, #fffdf0);
  }

  .shopify-section .influencer-popup__add-btn:hover:not([disabled])::after,
  .shopify-section .influencer-popup__add-all-btn:hover:not([disabled])::after {
    transform: translate3d(0, 0, 0);
  }

  .shopify-section .influencer-popup__add-btn:hover:not([disabled])::before,
  .shopify-section .influencer-popup__add-all-btn:hover:not([disabled])::before {
    left: calc(100% - var(--knob) - 6px);
    background: var(--THORO-BONE, #fffdf0);
    border-color: var(--THORO-BONE, #fffdf0);
  }
}

/* Agotado: sin interruptor, solo el contorno apagado. */
.shopify-section .influencer-popup__add-btn[disabled],
.shopify-section .influencer-popup__add-all-btn[disabled] {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.35);
}

.shopify-section .influencer-popup__add-all-note {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.6vw, 11px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Slider Colección (sections/slider-colecciones.liquid) --------------- */
.shopify-section .slider-coleccion-title {
  margin-bottom: clamp(8px, 2.4vw, 14px);
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(28px, 7.4vw, 56px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.shopify-section .slider-coleccion-text {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Flechas de las dos: las mismas que en las secciones de colección ----- */
.shopify-section .influencer-look__slider .swiper-button-prev,
.shopify-section .influencer-look__slider .swiper-button-next,
.shopify-section .slider-coleccion-general > .swiper-button-prev,
.shopify-section .slider-coleccion-general > .swiper-button-next,
.shopify-section .slider-productos > .swiper-button-prev,
.shopify-section .slider-productos > .swiper-button-next {
  width: 40px;
  height: 40px;
  /* El liquid las encoge con un scale(0.65) y las tiñe de blanco; se anula para
     que midan lo mismo que las del resto del sitio. */
  transform: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: var(--THORO-BONE, #fffdf0);
  color: var(--THORO-BLACK, #000);
}

.shopify-section .influencer-look__slider .swiper-button-prev::after,
.shopify-section .influencer-look__slider .swiper-button-next::after,
.shopify-section .slider-coleccion-general > .swiper-button-prev::after,
.shopify-section .slider-coleccion-general > .swiper-button-next::after,
.shopify-section .slider-productos > .swiper-button-prev::after,
.shopify-section .slider-productos > .swiper-button-next::after {
  font-size: 15px;
  font-weight: 400;
}

/* --- Tarjetas de producto de estas dos secciones -------------------------
   Ninguna de las dos usa la tarjeta del rediseño: el Slider Colección monta
   'product-card-simple' y la ficha emergente de Shop the look trae marcado
   propio. Por eso, con las tipografías ya puestas en los titulares, los
   productos seguían saliendo en Helvetica y sin el aire de la tarjeta buena.

   Aquí se les copia el mismo tratamiento que a .product-item (sección 7):
   nombre en Panama y caja alta, precio del mismo cuerpo y el anterior a media
   opacidad en vez de en gris. La etiqueta de descuento ya venía bien: las dos
   usan el snippet sale-badge, que es el que pinta la píldora roja. */
.shopify-section .product-card__title,
.shopify-section .influencer-popup__product-info h6 {
  margin: 0 0 clamp(3px, 1vw, 6px);
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 2.9vw, 14px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
}

.shopify-section .product-card__price,
.shopify-section .influencer-popup__product-info .precios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 2.9vw, 14px);
  letter-spacing: 0.02em;
}

/* El precio vigente primero y el anterior detrás, como en la tarjeta buena;
   en el marcado del popup vienen al revés. */
.shopify-section .product-card__price .price-current,
.shopify-section .influencer-popup__product-info .precio-actual {
  order: 1;
  color: var(--THORO-BLACK, #000);
  /* El <style> de la sección le pone 18 px y quedaba más grande que el nombre;
     en la tarjeta del rediseño los dos miden lo mismo. */
  font-size: inherit;
  white-space: nowrap;
}

.shopify-section .product-card__price .price-old,
.shopify-section .influencer-popup__product-info .precio-compare {
  order: 2;
  color: inherit;
  font-size: 0.9em;
  opacity: 0.5;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Etiqueta de descuento: la píldora de contorno rojo del resto del sitio.
   El estilo de la sección 7 está acotado a .product-item, así que en estas
   tarjetas —que son .product-card— el badge seguía saliendo como el rectángulo
   rojo macizo que trae el tema. Mismo tratamiento, mismos valores. */
.shopify-section .product-card .badge-box:not(.sale-box--image) {
  --padding-vertical: 0;
  display: inline-flex;
  align-items: center;
  height: clamp(22px, 6.4vw, 30px);
  padding: 0 clamp(10px, 3vw, 16px);
  background: var(--badge-bg, var(--THORO-BONE, #fffdf0));
  border: 1px solid var(--badge-border, var(--THORO-BLACK, #000));
  border-radius: 999px;
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(9px, 2.35vw, 12px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* El color lo pone cada tipo de badge, no la regla base: con :not() la base
   pesa más y dejaba el "-35 %" en negro en vez de en rojo. */
.shopify-section .product-card .sale-box {
  --badge-border: var(--THORO-RED, #e40e20);
  --badge-bg: var(--THORO-RED, #e40e20);
  color: #fff;
}

.shopify-section .product-card .new-box,
.shopify-section .product-card .sold-box {
  --badge-border: var(--THORO-BLACK, #000);
  color: var(--THORO-BLACK, #000);
}

/* La caja del badge trae del tema su propio ancho para la versión de imagen. */
.shopify-section .product-card .badge-box-container {
  padding: clamp(8px, 2.7vw, 14px);
  gap: 6px;
}

/* Foto a cuadro limpio, sin esquinas redondeadas: la tarjeta del rediseño no
   las lleva. */
.shopify-section .product-card__image img,
.shopify-section .influencer-popup__product-card > img {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   23. Velo bajo el menú cuando el header va superpuesto

   Con el header transparente, el menú va en hueso sobre la foto de portada. En
   las fotos claras —un camión blanco, un cielo, una pared— se perdía.

   El velo cubre solo la franja de arriba, la del menú, y se desvanece: no
   oscurece la foto entera. Va en un pseudo-elemento de la sección, así que
   queda sobre la imagen pero por debajo de los rótulos del banner, que llevan
   z-index propio.

   Se aplica donde el tema decide superponer el header, así que sirve igual en
   la home, en las colecciones y en cualquier plantilla donde se active.
   -------------------------------------------------------------------------- */
body:has([data-header-transparent]) .main-content > .shopify-section.section-overlay-header:first-of-type {
  position: relative;
}

body:has([data-header-transparent])
  .main-content
  > .shopify-section.section-overlay-header:first-of-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(110px, 20vh, 210px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   24. Reseñas (sections/review-general.liquid)

   Va al final de la ficha, tras las preguntas frecuentes. Los estilos propios
   de la sección viven en un <style> dentro de su liquid —es decir, en el
   <body>, después de esta hoja—, así que cada regla se ancla a
   .shopify-section para pasarles por encima sin !important, igual que en la
   sección 22.
   -------------------------------------------------------------------------- */
.shopify-section .revie-simple {
  --border: rgba(0, 0, 0, 0.14);
  --muted: rgba(0, 0, 0, 0.55);
  --bg: var(--THORO-BONE, #fffdf0);
  padding: clamp(32px, 9vw, 72px) var(--thoro-sec-pad, 21px);
}

.shopify-section .revie-title {
  margin: 0 0 clamp(6px, 1.8vw, 12px);
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(28px, 7.4vw, 56px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.shopify-section .revie-subtitle {
  margin: 0 0 clamp(18px, 4.5vw, 32px);
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.9vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Resumen: caja limpia, sin el gris de relleno ni las esquinas redondeadas. */
.shopify-section .revie-summary {
  padding: clamp(10px, 3vw, 16px) clamp(12px, 3.4vw, 20px);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
}

.shopify-section .revie-avg__num {
  font-family: var(--FONT-THORO-DISPLAY, inherit);
  font-size: clamp(24px, 6vw, 38px);
  font-weight: 700;
  line-height: 1;
}

.shopify-section .revie-count,
.shopify-section .revie-id {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Tarjeta de reseña: mismo trazo fino que las tarjetas del carrito y de los
   recomendados. Las .card-2 —la variante sin foto, que va en negro con el texto
   en blanco— se quedan fuera: al ponerles fondo transparente, su texto blanco
   desaparecía sobre el fondo claro de la página. */
.shopify-section .revie-item:not(.card-2) {
  padding: clamp(12px, 3.2vw, 18px);
  background: transparent;
  border: 1px solid var(--border);
}

/* Las de solo texto venían en negro con la letra en blanco. Ahora van en
   blanco con la letra negra, como el resto; conservan el centrado y el aire
   que traen de la sección, que es lo que las distingue de las que llevan foto. */
.shopify-section .revie-item.card-2 {
  padding: clamp(16px, 4vw, 26px);
  background: #fff;
  border: 1px solid var(--border);
  color: var(--THORO-BLACK, #000);
}

.shopify-section .revie-item.card-2 .revie-name,
.shopify-section .revie-item.card-2 .revie-comment,
.shopify-section .revie-item.card-2 .revie-stars {
  color: var(--THORO-BLACK, #000);
}

/* Mosaico. La sección repartía las tarjetas en una rejilla dándoles 3 o 4
   filas fijas de alto (grid-row: span), así que una reseña de una línea
   ocupaba lo mismo que una con foto y dejaba medio recuadro vacío.

   Con columnas CSS cada tarjeta mide lo que mide su contenido y se colocan
   encajando, que es el mosaico que se buscaba. break-inside evita que una
   tarjeta se parta entre dos columnas. */
.shopify-section .revie-list {
  display: block;
  columns: 4;
  column-gap: clamp(12px, 2vw, 18px);
}

.shopify-section .revie-item {
  width: 100%;
  margin: 0 0 clamp(12px, 2vw, 18px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Los spans de la rejilla anterior ya no pintan nada, pero se anulan para que
   no reaparezcan si vuelve a activarse el display: grid. */
.shopify-section .revie-item:nth-child(odd),
.shopify-section .revie-item:nth-child(even) {
  grid-row: auto;
}

@media only screen and (max-width: 989px) {
  .shopify-section .revie-list {
    columns: 2;
  }
}

@media only screen and (max-width: 599px) {
  .shopify-section .revie-list {
    columns: 1;
  }
}

/* Aire entre la foto del cliente y lo que dice: venían pegados. */
.shopify-section .revie-thumb {
  display: block;
  margin-bottom: clamp(10px, 2.4vw, 16px);
}

.shopify-section .revie-head {
  margin-bottom: clamp(6px, 1.6vw, 10px);
}

.shopify-section .revie-name {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shopify-section .revie-comment {
  font-family: var(--FONT-THORO-BODY, inherit);
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.55;
}

.shopify-section .revie-stars,
.shopify-section .revie-avg__stars {
  color: var(--THORO-BLACK, #000);
}

/* "Ver más": la píldora con interruptor del resto del sitio. */
.shopify-section .revie-btn {
  --knob: clamp(16px, 4.2vw, 22px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(36px, 9.5vw, 46px);
  padding: 0 calc(var(--knob) + 18px);
  background: transparent;
  border: 1px solid var(--THORO-BLACK, #000);
  border-radius: 999px;
  color: var(--THORO-BLACK, #000);
  font-family: var(--FONT-THORO-SCRIPT, inherit);
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  transition: color 0.3s ease 0.12s;
}

.shopify-section .revie-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 6px;
  width: var(--knob);
  height: var(--knob);
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate3d(0, -50%, 0);
  transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease,
    border-color 0.3s ease;
}

.shopify-section .revie-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--THORO-BLACK, #000);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.shopify-section .revie-btn.is-switching {
  color: var(--THORO-BONE, #fffdf0);
}

.shopify-section .revie-btn.is-switching::after {
  transform: translate3d(0, 0, 0);
}

.shopify-section .revie-btn.is-switching::before {
  left: calc(100% - var(--knob) - 6px);
  background: var(--THORO-BONE, #fffdf0);
  border-color: var(--THORO-BONE, #fffdf0);
}

@media (hover: hover) {
  .shopify-section .revie-btn:hover {
    color: var(--THORO-BONE, #fffdf0);
  }

  .shopify-section .revie-btn:hover::after {
    transform: translate3d(0, 0, 0);
  }

  .shopify-section .revie-btn:hover::before {
    left: calc(100% - var(--knob) - 6px);
    background: var(--THORO-BONE, #fffdf0);
    border-color: var(--THORO-BONE, #fffdf0);
  }
}

.shopify-section .revie-empty {
  font-family: var(--FONT-THORO-NAV, inherit);
  font-size: clamp(11px, 2.9vw, 13px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   25. Cabecera

   El menú venía con 15 px de aire arriba y otros 15 abajo (.section-padding),
   que sobre un logo de 46 dejaban una franja de 76 px casi vacía. Se recorta a
   6 y la barra baja a ~58, que es lo que ocupa el logo y poco más.
   -------------------------------------------------------------------------- */
.theme__header .section-padding {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   25b. Contador del carrito
   -------------------------------------------------------------------------- */
/* El paréntesis va en CSS, no en el marcado: el componente <cart-count> del
   tema reescribe su innerText entero cada vez que cambia el carrito, así que
   cualquier carácter que se ponga dentro se pierde en la primera adición.

   Los selectores llevan .navlink delante para pesar más que la regla del tema
   que escribe ": " en el mismo ::before. Y cuelgan de .navtext, que es la
   variante con rótulo: la de icono no lleva palabra a la que acompañar. */
/* Los dos van al flujo con position: static. El ::before del tema viene en
   absolute —lo usa como burbuja sobre el icono— y así el paréntesis de apertura
   se salía de la línea y caía encima de la cifra: se leía "CARRITO 2()". */
.navlink .header__cart__status.navtext::before,
.navlink .header__cart__status.navtext::after {
  position: static;
  display: inline;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  transform: none;
}

.navlink .header__cart__status.navtext::before {
  content: '(';
}

.navlink .header__cart__status.navtext::after {
  content: ')';
}

/* Con el carrito vacío no se enseña "(0)": el rótulo se queda solo. */
.navlink .header__cart__status.navtext[data-cart-count='0'] {
  display: none;
}

/* Un punto por encima del resto del menú: es la cifra que se consulta de
   pasada, y a la altura de los demás enlaces se perdía. */
.navlink .header__cart__status.navtext {
  font-size: 1.12em;
}