/* ============================================================
   MORASHOP MAYORISTA — rediseño (port del prototipo mayorista-home/)
   Archivo GLOBAL: se carga en todas las plantillas desde layout.tpl.

   Va como .css PLANO a propósito: el compilador de Tiendanube (libsass)
   rompe con clamp(), y acá se usa en varios lugares.

   Sistema visual tomado del sitio en vivo morashop.ar para que las dos
   tiendas sean la misma marca (navy #001C4B, rojo #E8341A,
   Barlow Condensed + Inter).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* JERARQUÍA DEL MAYORISTA: crema primero, navy segundo, rojo de acento.
   Es la MISMA paleta que morashop.ar pero al revés: allá manda el navy.
   Así se nota de una que estás en el mayorista, sin dejar de ser Morashop. */
:root {
  --cv-cream: #E4D9BD;      /* header y superficies principales */
  --cv-cream-2: #D3C49C;    /* bordes sobre crema */
  --cv-bg: #F5EEDF;         /* fondo de página: crema claro, para que la tarjeta blanca resalte */
  --cv-ink: #001C4B;
  --cv-ink-2: #0A2A63;
  --cv-red: #E8341A;
  --cv-red-deep: #C72D17;
  --cv-green: #00A650;
  --cv-line: rgba(0, 28, 75, .12);
  --cv-muted: #5A6377;
  --cv-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --cv-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cv-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ============================================================
   1. HEADER Y NAV — se pintan SOLO con CSS, sin tocar header.tpl
   (ese .tpl está lleno de lógica de settings; cuanto menos se toque, mejor)
   Ojo: la "Edición avanzada de CSS" del admin se imprime ANTES que este
   archivo y usa !important en casi todo, por eso acá también se usa.
   ============================================================ */
/* La franja del logo va en CREMA: es lo primero que se ve y lo que diferencia
   al mayorista de la minorista (que tiene el header navy). */
.head-main,
.head-main .head-logo-row {
  background: var(--cv-cream) !important;
  color: var(--cv-ink) !important;
}

/* La nav sí en navy: es el segundo color y hace de separación entre el
   header crema y el contenido. El filete rojo cierra la jerarquía. */
.head-main .menu-and-banners-row {
  background: var(--cv-ink) !important;
  border-bottom: 2px solid var(--cv-red) !important;
}

/* sobre el crema, textos e íconos en navy.
   Los íconos del theme vienen con stroke BLANCO (medido en vivo): sobre crema desaparecían.
   Hay que pisar el stroke del svg Y el de sus hijos, con !important. */
.head-main .head-logo-row a,
.head-main .head-logo-row .icon-inline { color: var(--cv-ink) !important; }
.head-main .head-logo-row svg,
.head-main .head-logo-row svg path,
.head-main .head-logo-row svg circle,
.head-main .head-logo-row svg line,
.head-main .head-logo-row svg polyline { stroke: var(--cv-ink) !important; }
/* el globito rojo del contador queda con su color y texto blanco */
.head-main .head-logo-row .cart-widget-amount,
.head-main .head-logo-row .js-cart-widget-amount {
  background: var(--cv-red) !important; color: #fff !important;
}

/* dentro de la nav navy siguen en blanco */
.head-main .menu-and-banners-row a,
.head-main .nav-list-item a,
.head-main .js-nav-item a { color: #fff !important; }
.head-main .menu-and-banners-row svg { stroke: #fff; }

/* Nav: mayúscula condensada como en morashop.ar.

   OJO CON EL SELECTOR. Antes esto apuntaba a `.nav-list-item > a`, una clase que NO
   existe en este theme: los ítems del menú son `.nav-item`/`.nav-main-item`, y los que
   tienen subcategorías llevan el enlace metido dentro de un `div.nav-item-container`.
   O sea que la regla no le pegaba a NINGUNO y el nav se mostraba con el estilo de
   fábrica: Inter 12px peso 400 (medido en vivo el 13/09/2026). Por eso se veía chico
   y finito.

   Se apunta a las dos formas y SOLO a la fila de arriba (`.nav-main-item`, que el
   theme pone únicamente en los ítems de primer nivel): los enlaces del panel
   desplegable también son `.nav-list-link` y tienen su propio estilo en la sección 9. */
.head-main .nav-main-item > a.nav-list-link,
.head-main .nav-main-item > .nav-item-container > a.nav-list-link {
  font-family: var(--cv-display) !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* buscador blanco: sobre crema necesita borde, si no se pierde contra el fondo */
.head-main input[type="search"],
.head-main .js-search-input {
  border: 1.5px solid var(--cv-ink) !important;
  background: #fff !important;
  color: var(--cv-ink) !important;
}
.head-main input[type="search"]:focus { box-shadow: 0 0 0 4px rgba(232, 52, 26, .28) !important; }

/* ============================================================
   2. TIPOGRAFÍA GLOBAL
   ============================================================ */
body { font-family: var(--cv-font); background: var(--cv-bg); }
h1, h2, h3, h4, .section-title {
  font-family: var(--cv-display);
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* ============================================================
   3. SECCIONES DE LA HOME (grillas nuevas)
   ============================================================ */
.cv-sec { padding: 34px 0 6px; }
/* Alterna entre dos cremas, NO crema/blanco: con secciones blancas de 600-1200px el blanco
   terminaba mandando y el crema quedaba en un hilo. El blanco se reserva para las tarjetas. */
.cv-sec--alt { background: #FBF6EA; }

/* El contenedor del banner viene con fondo blanco propio del theme y sobre el crema
   quedaba como un parche. Se deja pasar el fondo de la página. */
.ms-hero-slider { background: transparent !important; }
.cv-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }

.cv-sec__hd { margin-bottom: 20px; }
.cv-sec__h {
  position: relative;
  margin: 0;
  padding-left: 14px;
  /* la minorista titula a 26px, no a 44: condensado y compacto */
  font: 800 clamp(23px, 1.9vw, 28px)/1.05 var(--cv-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--cv-ink);
}
.cv-sec__h::before {
  content: "";
  position: absolute; left: 0; top: .1em; bottom: .1em;
  width: 4px; border-radius: 2px; background: var(--cv-red);
}
.cv-sec__sub { margin: 6px 0 0 14px; color: var(--cv-muted); font-size: 15px; }

/* grilla: 4 en escritorio, 2 en celular (pedido del dueño) */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- tarjeta ---------- */
/* la tarjeta es lo ÚNICO blanco: sobre el crema es lo que resalta el producto */
.cv-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--cv-cream-2);
  border-radius: 12px;
  padding: 12px;
  transition: box-shadow .25s var(--cv-ease), border-color .25s var(--cv-ease);
}
/* sin translateY en hover: con el cursor en el borde la caja se escapa y titila */
.cv-card:hover { box-shadow: 0 14px 30px -18px rgba(0, 28, 75, .45); border-color: rgba(0, 28, 75, .22); }

.cv-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #fff; }
.cv-card__img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s var(--cv-ease); }
.cv-card:hover .cv-card__img { transform: scale(1.05); }

.cv-card__new {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 4px 8px; border-radius: 5px;
  background: var(--cv-red); color: #fff;
  font: 700 13px/1 var(--cv-display); letter-spacing: .08em; text-transform: uppercase;
}

/* La tarjeta NO lleva línea de marca: Tiendanube no expone ese dato a las plantillas.
   Si algún día se carga la marca como etiqueta o campo propio, va acá arriba del nombre. */
.cv-card__name { display: block; margin: 10px 0 8px; font: 400 14.5px/1.3 var(--cv-font); color: var(--cv-ink); text-decoration: none; }
.cv-card__name:hover { text-decoration: underline; }

.cv-card__price { display: block; font: 700 27px/1 var(--cv-display); color: var(--cv-ink); font-variant-numeric: tabular-nums; }
.cv-card__cash { display: block; margin-top: 2px; font: 600 12.5px/1.3 var(--cv-font); color: var(--cv-green); }

.cv-card__foot { margin-top: auto; padding-top: 10px; }

/* cantidad + agregar */
.cv-qty { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; background: #F1F3F6; border-radius: 10px; padding: 3px; }
.cv-qty__b { flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--cv-ink); font: 500 22px/1 var(--cv-font); cursor: pointer; }
.cv-qty__b:hover { background: #E4E8EF; }
.cv-qty__i {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; text-align: center;
  font: 700 18px/1 var(--cv-display); color: var(--cv-ink); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.cv-qty__i::-webkit-outer-spin-button, .cv-qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* El !important no es capricho: la Edición avanzada de CSS del admin trae
   `.js-item-product .btn-small-quickshop, …{background:#0B1A3A !important}` y le pega a estos
   botones porque la tarjeta lleva la clase js-item-product (la necesita el quickshop).
   Solución de fondo: vaciar ese campo del admin y mover su CSS a un archivo por FTP. */
.cv-add {
  width: 100%; height: 44px; border: 0; border-radius: 10px;
  background: var(--cv-ink) !important; color: #fff !important;
  font: 700 17px/1 var(--cv-display); letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.cv-add:hover { background: var(--cv-ink-2) !important; }

/* Producto con variantes: abre el quickshop nativo para elegir el sabor/talle sin salir
   de la home. Es un <span>, no un <a>, así que necesita cursor propio. */
.cv-choose {
  display: grid; place-items: center;
  width: 100%; height: 44px; border-radius: 10px;
  /* sin el !important el admin lo pintaba navy y el texto navy quedaba ILEGIBLE */
  background: #fff !important; color: var(--cv-ink) !important; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--cv-ink);
  font: 700 16px/1 var(--cv-display); letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.cv-choose:hover { background: var(--cv-ink) !important; color: #fff !important; }
/* el formulario que el theme mueve al modal no se ve en la tarjeta */
.cv-card .js-item-variants.hidden { display: none; }

.cv-nostock {
  display: grid; place-items: center;
  width: 100%; height: 44px; border-radius: 10px;
  background: #E2E6EE !important; color: #5A6377 !important;
  font: 700 16px/1 var(--cv-display); letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- botón "Ver todos" con relleno tipo burbuja ---------- */
.cv-more { display: flex; justify-content: center; margin: 26px 0 8px; }
.cv-more__b {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 30px; border-radius: 12px;
  background: transparent; color: var(--cv-ink); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--cv-ink);
  font: 700 17px/1 var(--cv-display); letter-spacing: .05em; text-transform: uppercase;
  transition: color .3s var(--cv-ease);
}
.cv-more__b span { position: relative; z-index: 1; }
.cv-more__b::before {
  content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: 0; height: 0; border-radius: 50%;
  background: var(--cv-ink); transform: translate(-50%, -50%);
  transition: width .5s var(--cv-ease), height .5s var(--cv-ease);
}
.cv-more__b:hover, .cv-more__b:focus-visible { color: #fff; }
.cv-more__b:hover::before, .cv-more__b:focus-visible::before { width: 260%; height: 800%; }

/* ============================================================
   4. FOOTER — cierre "El mejor precio siempre." (calcado de morashop.ar)
   ============================================================ */
.cv-ft-cta { position: relative; background: var(--cv-ink); color: #fff; overflow: hidden; }
.cv-ft-cta__in { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 52px 16px 40px; }
.cv-ft-cta::before {
  content: "MORA";
  position: absolute; right: -1.5vw; top: 50%; transform: translateY(-50%);
  font: 900 clamp(140px, 23vw, 320px)/.78 var(--cv-display);
  letter-spacing: -.02em; color: rgba(255, 255, 255, .05);
  pointer-events: none; user-select: none;
}
.cv-slogan { margin: 0; font: 900 clamp(42px, 6.6vw, 88px)/.9 var(--cv-display); text-transform: uppercase; letter-spacing: .01em; }
.cv-slogan span { color: var(--cv-red); }
.cv-ft-cta__p { margin: 14px 0 0; max-width: 46ch; color: rgba(255, 255, 255, .72); font-size: 15px; }

/* logo + descripción: van acá porque las columnas del footer nativo dependen del admin */
.cv-ft-marca { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cv-ft-marca img, .cv-ft-logo { height: 46px !important; width: auto !important; border-radius: 8px; }
.cv-ft-marca__txt { margin: 14px 0 0; max-width: 56ch; color: rgba(255, 255, 255, .72); font-size: 14.5px; line-height: 1.5; }

/* el footer nativo, en navy para que siga al cierre */
.js-footer { background: var(--cv-ink) !important; color: rgba(255, 255, 255, .78) !important; }
.js-footer a { color: rgba(255, 255, 255, .78) !important; }
.js-footer a:hover { color: #fff !important; }
.js-footer .footer-legal { background: #00133A !important; border-top: 1px solid rgba(255, 255, 255, .08); }

/* título de columna con el filete rojo corto */
.js-footer .font-weight-bold.text-uppercase {
  position: relative; padding-bottom: 10px;
  font-family: var(--cv-display) !important; letter-spacing: .08em;
}
.js-footer .font-weight-bold.text-uppercase::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 28px; height: 3px; background: var(--cv-red);
}

/* ============================================================
   4 bis. CARRITO (el panel lateral)

   Es el modal genérico del theme (snipplets/modal.tpl) con id #modal-cart. Se viste SOLO por
   CSS y acotado a ese id: esa plantilla también la usan el buscador y el menú hamburguesa,
   así que tocarla rompería los tres.
   ============================================================ */
#modal-cart { background: var(--cv-bg) !important; }

/* cabecera navy con el título condensado, como el resto del sitio */
#modal-cart .modal-header {
  background: var(--cv-ink) !important;
  color: #fff !important;
  border-bottom: 2px solid var(--cv-red) !important;
  padding: 14px 4px !important;
}
#modal-cart .modal-header,
#modal-cart .modal-header * { color: #fff !important; }
#modal-cart .modal-header .page-header-text,
#modal-cart .modal-header .col.px-3 {
  font-family: var(--cv-display) !important;
  font-weight: 800 !important;
  font-size: 23px !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#modal-cart .modal-close svg { stroke: #fff !important; }

/* cuerpo en crema, con los productos en tarjetas blancas */
#modal-cart .modal-body { background: var(--cv-bg) !important; }
#modal-cart .js-ajax-cart-list {
  background: transparent !important;
  border: 0 !important;
}
#modal-cart .js-ajax-cart-list > * {
  background: #fff !important;
  border: 1px solid var(--cv-cream-2) !important;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* totales */
#modal-cart .cart-row {
  background: #fff !important;
  border: 1px solid var(--cv-cream-2) !important;
  border-radius: 10px;
  padding: 12px !important;
}
#modal-cart .cart-row .h4,
#modal-cart .cart-row strong {
  font-family: var(--cv-display) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

/* el botón de finalizar, en rojo: es la acción principal del carrito.
   #go-to-checkout va aparte porque la página /carrito/ NO está dentro de #modal-cart. */
#modal-cart .btn-primary,
#modal-cart input[type="submit"],
#go-to-checkout {
  background: var(--cv-red) !important;
  background-image: none !important;
  border-color: var(--cv-red) !important;
  color: #fff !important;
  font-family: var(--cv-display) !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#modal-cart .btn-primary:hover,
#modal-cart input[type="submit"]:hover,
#go-to-checkout:hover { background: var(--cv-red-deep) !important; }

/* Tamaño del botón de finalizar.
   Medido en vivo: el del theme sale en 12px de letra y 48px de alto, con radio 2px. Al lado
   del botón verde de WhatsApp (17px / 52px / radio 8px) se leía como un botón secundario,
   siendo la acción que cierra la venta. Se agranda y se alinea con el resto del rediseño.
   box-sizing explícito para que la altura no dependa del padding heredado del theme. */
#modal-cart input[name="go_to_checkout"],
#modal-cart .js-ajax-cart-submit input[type="submit"],
#go-to-checkout {
  box-sizing: border-box !important;
  height: 58px !important;
  padding: 0 14px !important;
  font-size: 19px !important;
  line-height: normal !important;
  border-radius: 8px !important;
  letter-spacing: .06em;
}

/* el aviso del mínimo de compra, en crema con filete rojo */
#modal-cart .alert-warning,
#modal-cart .js-cart-minimum-value {
  background: #FBF6EA !important;
  border: 1px solid var(--cv-cream-2) !important;
  border-left: 4px solid var(--cv-red) !important;
  color: var(--cv-ink) !important;
  border-radius: 8px;
}

/* ---------- sin sesión: en lugar de "Iniciar Compra" va el contacto con el vendedor ----------
   Van SIN #modal-cart adelante y también con él, porque cart-totals.tpl se usa en el panel
   lateral Y en la página del carrito: tienen que verse igual en los dos lados. */
.cv-cta-wa,
#modal-cart .cv-cta-wa {
  display: block; height: 52px; line-height: 52px; border-radius: 8px;
  background: #25D366 !important; background-image: none !important; color: #062E17 !important;
  text-align: center; text-decoration: none;
  font-family: var(--cv-display); font-weight: 700; font-size: 17px;
  letter-spacing: .04em; text-transform: uppercase;
}
.cv-cta-wa:hover, #modal-cart .cv-cta-wa:hover { background: #1FBA5A !important; }
.cv-cta-login,
#modal-cart .cv-cta-login {
  display: block; margin-top: 10px; text-align: center;
  font-size: 13.5px; color: var(--cv-ink) !important; text-decoration: underline;
}

/* ---------- carrito: único aviso, sin textos explicativos (decisión del dueño) ----------
   Se quitaron los bloques de "opciones de entrega" y de cupón: el carrito va limpio,
   con el calculador de código postal nativo y nada más.
   Igual que arriba: con y sin #modal-cart, para el panel y para la página del carrito. */
.cv-cuenta {
  background: #fff; border: 1px solid var(--cv-cream-2); border-left: 4px solid var(--cv-red);
  border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.cv-cuenta__t {
  margin: 0 0 10px; font-family: var(--cv-display); font-weight: 800; font-size: 18px;
  letter-spacing: .01em; text-transform: uppercase; color: var(--cv-ink); line-height: 1.15;
}
.cv-cuenta__wa {
  display: block; height: 46px; line-height: 46px; border-radius: 8px;
  background: #25D366 !important; color: #062E17 !important; text-align: center; text-decoration: none;
  font-family: var(--cv-display); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
}
.cv-cuenta__login { display: block; margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--cv-ink) !important; }
#modal-cart .cv-cuenta {
  background: #fff; border: 1px solid var(--cv-cream-2); border-left: 4px solid var(--cv-red);
  border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
#modal-cart .cv-cuenta__t {
  margin: 0 0 10px; font-family: var(--cv-display); font-weight: 800; font-size: 18px;
  letter-spacing: .01em; text-transform: uppercase; color: var(--cv-ink); line-height: 1.15;
}
#modal-cart .cv-cuenta__wa {
  display: block; height: 46px; line-height: 46px; border-radius: 8px;
  background: #25D366; color: #062E17 !important; text-align: center; text-decoration: none;
  font-family: var(--cv-display); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
}
#modal-cart .cv-cuenta__login { display: block; margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--cv-ink) !important; }

/* ============================================================
   5. Accesibilidad
   ============================================================ */
.cv-sec :focus-visible, .cv-ft-cta :focus-visible { outline: 2px solid var(--cv-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cv-card, .cv-card__img, .cv-more__b, .cv-more__b::before { transition: none !important; }
}

/* ============================================================
   6. PARCHE DE ESPECIFICIDAD contra la Edición avanzada de CSS del admin

   El admin trae:  .js-item-product .btn-small-quickshop, …{ background:#0B1A3A !important }
   y le pega a estos botones porque la tarjeta lleva js-item-product (la exige el quickshop).

   Ojo con el razonamiento: poner !important NO alcanzó. Cuando las dos reglas lo tienen,
   gana la de MAYOR especificidad, y la del admin usa dos clases contra una mía. Estos
   selectores llevan tres clases y por eso sí ganan.

   Esto es un parche. La solución de fondo es vaciar ese campo del admin y mover su CSS
   a un archivo por FTP (ver PORT-FINAL.md, sección 1).
   ============================================================ */
/* Segunda vuelta: no alcanzaba con el color de fondo. El admin ADEMÁS le aplica un
   linear-gradient (el "brillo"), y eso se dibuja por encima del background-color: por eso
   "Elegir opción" seguía invisible en reposo y solo aparecía al pasar el mouse.
   Hay que anular background-image explícitamente, y con un selector más. */
.cv-sec .cv-card .cv-card__foot .cv-add {
  background: var(--cv-ink) !important; background-image: none !important; color: #fff !important;
}
.cv-sec .cv-card .cv-card__foot .cv-add:hover { background: var(--cv-ink-2) !important; background-image: none !important; }

.cv-sec .cv-card .cv-card__foot .cv-choose {
  background: #fff !important; background-image: none !important; color: var(--cv-ink) !important;
}
.cv-sec .cv-card .cv-card__foot .cv-choose:hover {
  background: var(--cv-ink) !important; background-image: none !important; color: #fff !important;
}

.cv-sec .cv-card .cv-card__foot .cv-nostock {
  background: #E2E6EE !important; background-image: none !important; color: #5A6377 !important;
}

/* ============================================================
   7. LISTADO DE CATEGORÍA Y BUSCADOR — tarjeta mayorista con cantidad

   TODO va scopeado a .js-product-table, que es el contenedor que arma
   snipplets/grid/products-list.tpl y que existe SOLO en categoría y buscador.
   Importa: el mismo snipplets/grid/item.tpl alimenta además los productos
   relacionados, el carrito, la home y el 404. Sin este scope, rediseñar la
   tarjeta de categoría cambiaría esas cuatro pantallas de rebote.
   ============================================================ */

.js-product-table > .js-item-product { display: flex; margin-bottom: 16px; }

.js-product-table .js-item-container.item {
  display: flex; flex-direction: column; width: 100%;
  background: #fff;
  border: 1px solid var(--cv-cream-2);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .25s var(--cv-ease), border-color .25s var(--cv-ease);
}
.js-product-table .js-item-container.item:hover {
  box-shadow: 0 14px 30px -18px rgba(0, 28, 75, .45);
  border-color: rgba(0, 28, 75, .22);
}

/* el bloque de texto crece: así el pie queda pegado abajo y las tarjetas de una
   misma fila terminan parejas aunque el nombre ocupe una línea o dos */
.js-product-table .item-description {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 12px !important;
}
.js-product-table .item-link { display: block; text-decoration: none; }

.js-product-table .item-name {
  font: 400 13.5px/1.35 var(--cv-font) !important;
  color: var(--cv-ink);
  opacity: 1 !important;              /* el theme lo sirve con opacity-80 */
  margin: 0 0 8px !important;
}
.js-product-table .item-price {
  font: 700 23px/1 var(--cv-display) !important;
  color: var(--cv-ink); font-variant-numeric: tabular-nums;
}
.js-product-table .payment-discount-price-product-container {
  display: block; margin-top: 3px !important;
  font: 600 12px/1.3 var(--cv-font) !important;
  color: var(--cv-green) !important;
}

/* La fila de acciones del theme mete botón y stock lado a lado. A 201px de ancho
   no entran, así que se apilan: cantidad, botón, y el stock abajo como pie. */
.js-product-table .js-quickshop-or-stock-container {
  margin: auto 0 0 !important; display: block !important;
}
.js-product-table .js-item-quickshop-container,
.js-product-table .js-item-stock-container {
  width: 100%; max-width: 100%; flex: none; padding: 0 !important;
}
.js-product-table .js-item-stock-container {
  margin: 8px 0 0 !important; text-align: center;
  font: 600 11px/1 var(--cv-font) !important; color: var(--cv-muted);
}
/* el ícono de bolsita va centrado en absoluto sobre el botón: con el texto
   propio se superponen */
.js-product-table .item-quickshop-icon { display: none !important; }

/* Botón de compra.
   Pelea contra la Edición avanzada de CSS del admin, que trae
   `.js-item-product .btn-small-quickshop-md`(0,2,0) con background-color
   !important MÁS un background-image: linear-gradient dorado y un transform en
   hover. Con !important de los dos lados gana la especificidad, por eso estos
   selectores usan cuatro clases; y el gradiente hay que anularlo aparte, porque
   background-color solo no lo tapa. */
.js-product-table .js-item-product .js-item-submit-container input.js-addtocart,
.js-product-table .js-item-product .js-item-quickshop-container .js-quickshop-modal-open {
  /* El !important va en CADA propiedad, no solo en el fondo. Medido en vivo el
     13/09/2026: con la altura sin !important el botón salía en 38px en vez de 46,
     porque el admin la fija con !important y ahí no alcanza con tener más
     especificidad — hay que empatarle la marca y ganarle por especificidad. */
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; height: 46px !important; min-height: 46px !important;
  padding: 0 10px !important; line-height: 1 !important;
  border: 0 !important; border-radius: 10px !important;
  background: var(--cv-ink) !important;
  background-image: none !important;
  color: #fff !important;
  font: 700 16px/1 var(--cv-display) !important;
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: none !important; transform: none !important;
  cursor: pointer;
}
.js-product-table .js-item-product .js-item-submit-container input.js-addtocart:hover,
.js-product-table .js-item-product .js-item-quickshop-container .js-quickshop-modal-open:hover {
  background: var(--cv-ink-2) !important; background-image: none !important;
  box-shadow: none !important; transform: none !important;
}

/* Contador de unidades del listado.
   Va aparte de .cv-qty (el de la grilla propia de la home) porque el markup que
   lo rodea es distinto y no quiero que un ajuste en una pantalla mueva la otra. */
.cv-lqty {
  display: flex; align-items: center; gap: 2px; margin-bottom: 8px;
  background: #F1F3F6; border-radius: 10px; padding: 3px;
}
.cv-lqty__b {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--cv-ink);
  font: 500 20px/1 var(--cv-font); cursor: pointer;
}
.cv-lqty__b:hover { background: #E4E8EF; }
.cv-lqty__i {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent;
  text-align: center; font: 700 17px/1 var(--cv-display); color: var(--cv-ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.cv-lqty__i::-webkit-outer-spin-button,
.cv-lqty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 900px) {
  .js-product-table > .js-item-product { margin-bottom: 12px; }
  .js-product-table .item-description { padding: 10px !important; }
  .js-product-table .item-price { font-size: 21px !important; }
}

/* ---------- volver a la categoría madre ---------- */
/* El theme ya trae la clase .category-back para esto, pero sin ningún estilo y en un
   bloque que casi nunca se dibuja. Este es propio y va arriba a la izquierda del título. */
.cv-volver {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding: 7px 14px 7px 11px;
  border: 1px solid var(--cv-cream-2); border-radius: 999px;
  background: #fff; color: var(--cv-ink) !important; text-decoration: none !important;
  font: 600 13px/1 var(--cv-font);
  transition: background .2s var(--cv-ease), border-color .2s var(--cv-ease);
}
.cv-volver:hover { background: var(--cv-ink); color: #fff !important; border-color: var(--cv-ink); }
.cv-volver__f { font-size: 15px; line-height: 1; }

/* ============================================================
   8. MODAL DE VARIANTES (quickshop)

   Es donde se elige sabor o tamaño sin salir del listado, así que es parte del
   flujo de compra, no un extra. Se rediseña entero por CSS: el markup lo arma
   snipplets/grid/quick-shop.tpl y el theme MUEVE ahí adentro el formulario de la
   tarjeta, así que tocar ese HTML es riesgoso y no hace falta.

   Estados que maneja el theme y que hay que contemplar (store.js.tpl:2052 y 2525):
     .selected              -> la opción elegida
     .btn-variant-no-stock  -> opción sin stock
     .nostock               -> el botón cuando la variante elegida no está disponible
   ============================================================ */

#quickshop-modal .modal-body { padding: 0 !important; }

/* columna de la foto: fondo crema para que el envase recorte y no flote en blanco */
#quickshop-modal .col-md-6:first-child { background: var(--cv-bg); }
#quickshop-modal .quickshop-image-container {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; padding: 18px;
}

/* columna de datos */
#quickshop-modal .js-item-variants { padding: 22px 22px 24px !important; }

#quickshop-modal .js-item-name {
  font: 700 24px/1.15 var(--cv-display) !important;
  color: var(--cv-ink); text-transform: none; margin-bottom: 10px !important;
}
#quickshop-modal .item-price-container { margin-bottom: 20px !important; }
#quickshop-modal .js-price-display {
  font: 700 34px/1 var(--cv-display) !important;
  color: var(--cv-ink) !important; font-variant-numeric: tabular-nums;
}
/* el efectivo viene con .text-accent (rojo). En verde, igual que en las tarjetas:
   el rojo acá compite con el precio y confunde cuál es cuál. */
#quickshop-modal .payment-discount-price-product-container {
  color: var(--cv-green) !important;
  font: 600 14px/1.3 var(--cv-font) !important; margin-top: 4px !important;
}

/* rótulo de la variante: "Sabor: Sin sabor" */
#quickshop-modal .form-label {
  display: block; margin-bottom: 8px;
  font: 600 12px/1 var(--cv-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cv-muted);
}
#quickshop-modal .form-label strong { color: var(--cv-ink); text-transform: none; font-size: 14px; }

/* pastillas de opción */
#quickshop-modal .js-product-variants-group { margin-bottom: 6px; }
#quickshop-modal .btn-variant {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; height: 42px; margin: 0 8px 8px 0; padding: 0 16px;
  border: 1.5px solid var(--cv-cream-2) !important; border-radius: 10px;
  background: #fff !important; background-image: none !important;
  color: var(--cv-ink) !important;
  font: 600 14px/1 var(--cv-font); text-decoration: none !important;
  transition: border-color .18s var(--cv-ease), background .18s var(--cv-ease);
}
#quickshop-modal .btn-variant:hover { border-color: var(--cv-ink) !important; }
#quickshop-modal .btn-variant.selected {
  border-color: var(--cv-ink) !important;
  background: var(--cv-ink) !important; color: #fff !important;
}
/* sin stock: se ve, pero se nota que no se puede */
#quickshop-modal .btn-variant.btn-variant-no-stock {
  opacity: .45; cursor: not-allowed;
  text-decoration: line-through !important;
  border-style: dashed !important;
}
#quickshop-modal .btn-variant.btn-variant-no-stock:hover { border-color: var(--cv-cream-2) !important; }

/* cantidad: el grupo nativo con chevrons, alineado al alto del botón */
#quickshop-modal .form-quantity {
  border: 1px solid var(--cv-cream-2); border-radius: 10px;
  background: #F1F3F6; overflow: hidden;
}
#quickshop-modal .form-quantity .form-control {
  border: 0 !important; background: transparent !important; text-align: center;
  font: 700 17px/1 var(--cv-display) !important; color: var(--cv-ink) !important;
}
#quickshop-modal .form-quantity-icon { color: var(--cv-ink); }

/* botón agregar: mismo criterio que en las tarjetas. El cascarón del modal lleva
   .js-item-product, así que la Edición avanzada del admin también le pega acá con
   su fondo y su degradado dorado; se anulan los dos y con !important en cada
   propiedad, que es la lección que ya costó una corrección. */
#quickshop-modal input.js-addtocart {
  width: 100% !important; height: 52px !important; min-height: 52px !important;
  padding: 0 14px !important; border: 0 !important; border-radius: 10px !important;
  background: var(--cv-ink) !important; background-image: none !important;
  color: #fff !important;
  font: 700 17px/1 var(--cv-display) !important;
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: none !important; transform: none !important;
}
#quickshop-modal input.js-addtocart:hover {
  background: var(--cv-ink-2) !important; background-image: none !important;
  transform: none !important; box-shadow: none !important;
}
#quickshop-modal input.js-addtocart.nostock,
#quickshop-modal input.js-addtocart[disabled] {
  background: #E2E6EE !important; color: #5A6377 !important; cursor: not-allowed;
}

/* la X de cerrar, que hoy se pierde arriba a la derecha */
#quickshop-modal .modal-close { color: var(--cv-ink); opacity: .55; }
#quickshop-modal .modal-close:hover { opacity: 1; }

@media (max-width: 767px) {
  #quickshop-modal .quickshop-image-container { min-height: 230px; padding: 12px; }
  #quickshop-modal .js-item-variants { padding: 16px 16px 20px !important; }
  #quickshop-modal .js-price-display { font-size: 29px !important; }
  #quickshop-modal .js-item-name { font-size: 21px !important; }
}

/* ============================================================
   9. PANEL DE SUBCATEGORÍAS DEL MENÚ (al pasar el mouse)

   ARREGLA UN BUG PROPIO. El panel del theme viene con fondo BLANCO
   (.desktop-dropdown { background-color: var(--main-background) },
   style-colors.scss:1571) y enlaces oscuros. Al pintar la barra de navegación en
   navy, la regla de la sección 1 —.head-main .menu-and-banners-row a { color:#fff
   !important }— también alcanzó a los enlaces del panel y quedaron BLANCOS SOBRE
   BLANCO. Medido en vivo: el panel de Suplementos tenía sus 14 enlaces (Creatinas,
   Proteinas, Vitaminas y Minerales…) con color rgb(255,255,255) sobre fondo
   rgb(255,255,255). Nunca estuvo vacío: estaba invisible.

   Se pinta el panel en navy, que además continúa la barra de la que cuelga, y así
   los enlaces blancos que ya había pasan a leerse.

   SEGURO DE TOCAR: el panel se oculta con visibility:hidden + opacity:0
   (style-async.scss:862-868), no por falta de fondo. Verificado midiendo con y sin
   hover: lo único que cambia es opacity/visibility. Darle color no lo deja visible
   cuando está cerrado.
   ============================================================ */
.head-main .desktop-dropdown {
  background: var(--cv-ink) !important;
  border-top: 2px solid var(--cv-red);
  border-bottom: 0 !important;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55);
  padding: 22px 40px 26px !important;
  /* el theme lo deja en z-index:auto y las tarjetas del listado llevan z-index:9
     (.item-product, style-critical.scss:1799): sin esto el panel puede quedar debajo */
  z-index: 60;
}

/* subcategoría de primer nivel: hace de encabezado de columna */
.head-main .desktop-list-subitems > .nav-item > .nav-list-link {
  font-family: var(--cv-display) !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff !important;
}

/* Segundo nivel: más liviano, para que se note la jerarquía.
   OJO CON EL SELECTOR: el <ul> de afuera lleva LAS DOS clases
   (class="desktop-list-subitems list-subitems", ver navigation-nav-list.tpl:24), así que
   un `.desktop-dropdown .list-subitems .nav-list-link` matchea también los de primer nivel
   y —al tener la misma especificidad y venir después— les pisaba el estilo de encabezado.
   Medido en vivo: los de primer nivel salían en rgba(255,255,255,.78) en vez de blanco.
   Por eso se exige la lista ANIDADA: .desktop-list-subitems .list-subitems */
.head-main .desktop-list-subitems .list-subitems .nav-list-link {
  font-family: var(--cv-font) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  text-transform: none;
  color: rgba(255, 255, 255, .78) !important;
}

.head-main .desktop-dropdown .nav-list-link { transition: color .15s var(--cv-ease); }
.head-main .desktop-dropdown .nav-list-link:hover {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--cv-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* la barra de scroll interna, para las categorías con muchas subcategorías */
.head-main .desktop-dropdown::-webkit-scrollbar-track { background: rgba(255, 255, 255, .10); }
.head-main .desktop-dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); }
.head-main .desktop-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .6); }