/* store.css — Tienda mayorista (matriz de compra). Marca Mini Ánima. */
:root {
  --pink: #c48182;
  --pink-dark: #a96768;
  --pink-soft: #f3e3e3;
  --bg: #f5f2ee;
  --card: #ffffff;
  --ink: #2c2724;
  --muted: #8a817b;
  --line: #e9e3dc;
  --ok: #5a9367;
  --low: #d39a3c;
  --off: #c9c2bb;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(44,39,36,.06), 0 6px 18px rgba(44,39,36,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Sin scroll horizontal accidental en mobile (red de seguridad). */
html, body { overflow-x: hidden; }
/* Touch: sin delay de 300ms y sin flash gris; feedback inmediato al tocar. */
button, a, .chip, .cell, .vt, .ht { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chip:active, .iconbtn:active, .vt:active, .ht:active, .step button:active, .btn:active, .li-rm:active { filter: brightness(.95); }
body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1160px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-sub {
  font-size: 11px; color: var(--muted); letter-spacing: .3px; text-transform: uppercase;
  padding-left: 10px; border-left: 1px solid var(--line); line-height: 1;
}
@media (max-width: 480px) { .brand-logo { height: 22px; } .brand-sub { display: none; } }
.spacer { flex: 1; }
.hello { font-size: 13px; color: var(--muted); }
.hello b { color: var(--ink); font-weight: 600; }
.iconbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px;
  cursor: pointer; font-weight: 600;
}
.iconbtn:hover { border-color: var(--pink); color: var(--pink-dark); }
/* Toggle de vista (solo cuentas preview): tu vista = rosa; publicado = oscuro. */
.vista-toggle { border-color: var(--pink); color: var(--pink-dark); font-weight: 700; }
.vista-toggle.vt-publicado { background: var(--ink); border-color: var(--ink); color: #fff; }
.vista-toggle[hidden] { display: none; }
.hb-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.cartbtn { position: relative; }
.cartbtn .count {
  position: absolute; top: -7px; right: -7px;
  background: var(--pink); color: #fff; border-radius: 999px;
  min-width: 19px; height: 19px; padding: 0 5px;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* Aviso de modo demo (acceso interno sin clave; los pedidos no se registran). */
.demobar {
  background: #2c2724; color: #fff; text-align: center;
  font-size: 12.5px; font-weight: 600; padding: 8px 14px; line-height: 1.35;
}
.demobar[hidden] { display: none; }

/* ── Layout ── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 18px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.search-wrap { position: relative; flex: 1 1 260px; min-width: 200px; }
.search {
  width: 100%;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 10px 12px; font: inherit; font-size: 14px;
}
.search:focus { outline: none; border-color: var(--pink); }

/* Autocompletado (dropdown de sugerencias) — foto + nombre + precio, tipo TN. */
.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(44,39,36,.16); overflow: hidden auto; max-height: 68vh;
}
.search-suggest[hidden] { display: none; }
.ss-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; background: none; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left; font: inherit;
}
.ss-item:hover, .ss-item:focus { background: var(--pink-soft); }
.ss-thumb {
  width: 46px; height: 46px; flex: none; border-radius: 8px;
  background: #faf7f3 center/cover no-repeat; border: 1px solid var(--line);
}
.ss-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-nm { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; line-height: 1.2; }
.ss-pr { font-size: 12px; font-weight: 700; color: var(--pink-dark); }
.ss-all {
  display: block; width: 100%; padding: 11px 12px; background: var(--pink-soft); border: none;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--pink-dark); text-align: center;
}
.ss-all:hover { background: #f0d0d1; }
.ss-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.chips { width: 100%; }
.cat-sec { width: 100%; }
.cat-sec + .cat-sub + .cat-sec, .cat-sub + .cat-sec, .cat-sec + .cat-sec { margin-top: 12px; }
.cat-lbl {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 7px;
}
.cat-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Las 3 entradas primarias (temporadas + Todas las categorías) agrupadas en una
   bandeja, para que se lean como un solo control de navegación. */
.cat-top {
  display: inline-flex; gap: 7px; flex-wrap: wrap; align-items: center;
  padding: 6px; background: #faf7f3; border: 1px solid var(--line); border-radius: 14px;
}
.cat-sub {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  padding: 9px 11px; background: #faf7f3; border: 1px solid var(--line); border-radius: 10px;
}
.cat-sub[hidden] { display: none; }

/* ═══ Home nav: colecciones (cards) + accesos rápidos ═══
   Selectores SCOPEADOS (.collections .coll-card, etc.) para ganarle a la regla .chip
   base (que las cards conservan solo para reusar el click/estado, no el estilo). */
.cat-lbl2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted, #9088a8); margin: 0 0 10px;
}
.cat-lbl2::after { content: ""; flex: 1; height: 1px; background: var(--line, #e6e0d8); }
.cat-sec + .cat-sec { margin-top: 18px; }

/* Cards de categoría: TODAS iguales (básicas), se pintan de ROSA al seleccionar. */
.collections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.collections .coll-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 130px; padding: 20px 22px; border-radius: 16px;
  cursor: pointer; text-align: left; font-family: inherit; white-space: normal; overflow: hidden;
  /* No seleccionada = MISMO rosa del seleccionado pero rebajado (rosa seco, suave pero
     presente, ni chillón ni casi-blanco). Seleccionada = rosa pleno. Es el control PRINCIPAL. */
  background: #fdf6f6; border: 1.5px solid #f2e4e4; border-left: 4px solid var(--pink);
  color: var(--ink, #1c1828);
  box-shadow: 0 3px 12px rgba(196,129,130,.14);
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.collections .coll-card:hover { border-color: var(--pink); box-shadow: 0 5px 16px rgba(196,129,130,.22); }
.collections .coll-top { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.collections .coll-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-dark); }
.collections .coll-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.06; }
.collections .coll-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.collections .coll-count { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.collections .coll-arrow { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; background: rgba(196,129,130,.18); color: var(--pink-dark); }
/* SELECCIONADA = rosa pleno */
.collections .coll-card.active { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 8px 20px rgba(196,129,130,.42); }
.collections .coll-card.active .coll-label,
.collections .coll-card.active .coll-count { color: #fff; opacity: .9; }
.collections .coll-card.active .coll-arrow { background: rgba(255,255,255,.28); color: #fff; }

.shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shortcuts .shortcut {
  display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border-radius: 11px;
  border: 1px solid var(--line, #e6e0d8); border-left: 3px solid var(--muted); background: var(--card, #fff);
  cursor: pointer; text-align: left; font-family: inherit; white-space: normal; box-shadow: none;
  transition: transform .14s ease, background .14s ease;
}
.shortcuts .shortcut:hover { border-color: var(--pink); }
.shortcuts .sc-repet { border-left-color: #1a9090; }
.shortcuts .sc-disc  { border-left-color: #c94580; }
.shortcuts .sc-top   { border-left-color: #c07838; }
.shortcuts .sc-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #9088a8); }
.shortcuts .sc-title { font-size: 14px; font-weight: 800; color: var(--ink, #1c1828); }
.shortcuts .shortcut.active { background: var(--ink, #1c1828); border-color: var(--ink, #1c1828); }
.shortcuts .shortcut.active .sc-label, .shortcuts .shortcut.active .sc-title { color: #fff; }

@media (max-width: 640px) {
  .collections { grid-template-columns: 1fr; gap: 10px; }
  .collections .coll-card { min-height: 104px; }
  .collections .coll-title { font-size: 23px; }
  .shortcuts { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  /* Accesos rápidos más compactos en mobile → las categorías dominan. */
  .shortcuts .shortcut { padding: 10px 11px; }
  .shortcuts .sc-title { font-size: 12px; }
  .shortcuts .sc-label { font-size: 9px; }
}

/* Zona de resultados: subcats + filtros + cómo verlo, todo apilado full-width. */
#resultZone { width: 100%; scroll-margin-top: 74px; }

/* Paneles suaves para subcategorías, "Filtrá por talle", "Ordená" y "Cómo verlo". */
#catSub, #talleChips, #sortBar, #viewSec { margin-top: 14px; }
#catSub > .cat-sec, #talleChips > .cat-sec, #sortBar > .cat-sec, #viewSec.cat-sec {
  background: var(--card, #fff); border: 1px solid var(--line, #e6e0d8);
  border-radius: 12px; padding: 14px 16px;
}
#catSub .cat-top, #talleChips .cat-top, #sortBar .cat-top { margin-top: 10px; }
#viewSec .viewtoggle { margin-top: 10px; }

/* Todos los filtros son 2 renglones: ENCABEZADO arriba + CONTROL abajo (desplegable
   tipo select en talle/ordenar, iconos en "cómo verlo"). */
.drop-lbl {
  display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.drop .drop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  margin-top: 8px; padding: 9px 12px; cursor: pointer; text-align: left; font: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
}
.drop .drop-head:hover, .drop.open .drop-head { border-color: var(--pink); }
.drop .drop-sum { font-size: 13px; font-weight: 700; color: var(--ink); }
.drop .drop-chev { flex: none; font-size: 12px; color: var(--muted); transition: transform .18s ease; }
.drop.open .drop-chev { transform: rotate(180deg); }
.drop .drop-body { display: none; margin-top: 10px; }
.drop.open .drop-body { display: block; }
#viewSec .viewtoggle { margin-top: 8px; width: 100%; }
#viewSec .viewtoggle .vt { flex: 1; }   /* los 3 botones llenan el ancho por igual (centrado/parejo) */

/* Desktop: los 3 controles quedan en una fila (cada uno con sus 2 renglones). Subcats full-width. */
@media (min-width: 760px) {
  #resultZone { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
  #catSub { flex: 1 1 100%; margin-top: 0; }
  #talleChips, #sortBar, #viewSec { flex: 1 1 240px; min-width: 0; margin-top: 0; }
}
/* Rótulo del padre en la sub-fila: deja claro de qué categoría son estas subcategorías. */
.cat-sub-lbl {
  display: inline-flex; align-items: center; align-self: center; white-space: nowrap;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: #a85757; margin-right: 4px; padding-right: 8px; border-right: 1px solid var(--line);
}
.cat-sub-lbl .cat-sub-arrow { margin-left: 5px; font-weight: 400; opacity: .6; }
.chip .chev { margin-left: 5px; font-size: 10px; opacity: .5; display: inline-block; transition: transform .18s; }
.chip.expanded { border-color: var(--pink); color: var(--pink-dark); }
.chip.expanded .chev { transform: rotate(180deg); }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap; font-weight: 500;
}
.chip:hover { border-color: var(--pink); }
.chip.active { background: var(--pink); border-color: var(--pink); color: #fff; font-weight: 600; }
.chip .n { opacity: .65; font-size: 11px; margin-left: 4px; }
/* Subcategoría (hija en la jerarquía de TN): más chica y tenue que su padre. */
.chip.sub { font-size: 12px; padding: 6px 11px; color: var(--muted); background: #fafafa; }
.chip.sub.active { color: #fff; background: var(--pink); }

/* "Todas las categorías": va al final / a la derecha, con formato oscuro propio
   para diferenciarla de las temporadas. Mantiene el estilo oscuro en todos los
   estados (hover/activo/abierto). */
.chip-allcats {
  background: var(--ink); border-color: var(--ink);
  color: #fff; font-weight: 600;
}
.chip-allcats:hover { border-color: var(--ink); color: #fff; opacity: .92; }
.chip-allcats.active, .chip-allcats.expanded { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-allcats .chev { opacity: .7; }

/* Separador entre las 3 de categoría y las 2 especiales. */
.cat-div { width: 1px; align-self: stretch; min-height: 24px; background: var(--line); margin: 0 4px; }
/* Botones "especiales" (listas curadas): rellenos, con onda destacado/oferta,
   distintos de las categorías (blancas) y de "Todas" (oscura). */
.chip-esp { border: none; color: #fff; font-weight: 700; }
.chip-esp-recompra { background: linear-gradient(135deg, #4a9d9d, #3d8080); }
.chip-esp-desc { background: linear-gradient(135deg, #e0654e, #c14b6e); }
.chip-esp-vend { background: linear-gradient(135deg, #e0a23c, #d3853c); }
.chip-esp:hover { filter: brightness(1.05); }
.chip-esp.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }

/* Fila de orden / filtro (mismo look que la de talles). */
.sort-bar { width: 100%; margin-top: 12px; }
.sort-bar[hidden] { display: none; }

/* ── Filtro por talle (agrupaciones por edad del Monitor de Chips) ──
   Acento verde-oliva para diferenciarlo a simple vista del rosa de categorías. */
.talle-chips { width: 100%; margin-top: 12px; }
.talle-chips[hidden] { display: none; }
.tchip { font-size: 12px; padding: 6px 12px; }
.tchip:hover { border-color: var(--pink); }
.tchip.active { background: var(--pink); border-color: var(--pink); color: #fff; font-weight: 600; }
.tchip.disabled, .tchip:disabled { opacity: .4; cursor: default; }
.tchip.disabled:hover, .tchip:disabled:hover { border-color: var(--line); }
.tchip-clear { font-size: 12px; padding: 6px 12px; color: var(--muted); background: #fafafa; }
.tchip-clear:hover { border-color: var(--pink); color: var(--pink-dark); }

/* ── Toggle de formato de compra (tarjetas / lista densa) ── */
.viewtoggle { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.viewtoggle .vt {
  border: none; background: #fff; color: var(--muted); padding: 8px 12px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.viewtoggle .vt + .vt { border-left: 1px solid var(--line); }
.viewtoggle .vt:hover { color: var(--pink-dark); }
.viewtoggle .vt.active { background: var(--pink); color: #fff; }
.viewtoggle .vt.disabled { opacity: .4; cursor: not-allowed; }
.viewtoggle .vt.disabled:hover { color: var(--muted); }

/* ── Toggle de inicio (Destacados vs Catálogo) ── */
.hometoggle { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.hometoggle .ht-lbl { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 0 8px 0 10px; white-space: nowrap; }
.hometoggle .ht {
  border: none; background: #fff; color: var(--muted); padding: 8px 12px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  border-left: 1px solid var(--line);
}
.hometoggle .ht:hover { color: var(--pink-dark); }
.hometoggle .ht.active { background: var(--pink); color: #fff; }

/* ── Lista densa ── */
.grid.list { grid-template-columns: none; display: flex; flex-direction: column; gap: 9px; }
.lrow {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 9px 12px;
  display: flex; align-items: center; gap: 13px;
}
.lrow { align-items: flex-start; }
.lrow-img {
  width: 76px; height: 76px; border-radius: 10px; flex: none; position: relative;
  background: var(--pink-soft) center/cover no-repeat; cursor: zoom-in;
}
.lrow-badge {
  position: absolute; top: -6px; left: -6px;
  background: var(--ink); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
}
.lrow-info { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.lrow-name { font-weight: 600; font-size: 13.5px; line-height: 1.2; text-transform: uppercase; }
.lrow-talles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.lrow .cell { min-width: 46px; padding: 4px 5px; }
.lrow .cell-talle { font-size: 11px; }

@media (max-width: 640px) {
  .lrow { flex-wrap: wrap; }
  .lrow-talles { justify-content: flex-start; width: 100%; }
  .lrow-img { width: 88px; height: 88px; }

  /* ── Mobile: layout sin overflow lateral + targets de dedo ── */
  .wrap { padding: 14px; }
  .dest { padding: 4px 14px 24px; }

  /* Header compacto: el saludo no es esencial en pantalla chica. */
  .topbar-in { padding: 10px 12px; gap: 8px; }
  .hello { display: none; }
  .brand-mark { width: 30px; height: 30px; font-size: 16px; }
  .iconbtn { padding: 8px 10px; font-size: 12px; }
  /* En mobile, los botones del header van SOLO con icono (evita desborde). */
  header .iconbtn { padding: 8px; gap: 0; }
  header .iconbtn span:not(.count) { display: none; }

  /* Botoneras a ancho completo: evita el scroll horizontal del documento. */
  .toolbar { gap: 8px; }
  .viewtoggle, .hometoggle { width: 100%; }
  .viewtoggle .vt, .hometoggle .ht {
    flex: 1 1 0; text-align: center; padding: 11px 6px; white-space: normal;
  }

  /* Chips: un poco más altos para tocar cómodo. */
  .chip { padding: 9px 13px; }
  .chip.sub, .tchip, .tchip-clear { padding: 8px 12px; }

  /* Inputs a 16px: evita el auto-zoom de iOS al enfocar. */
  .search { font-size: 16px; }

  /* Steppers de talle: targets de dedo. */
  .cell { min-width: 56px; padding: 6px 7px; }
  .step button { width: 32px; height: 32px; font-size: 16px; }
  .step .q { min-width: 24px; font-size: 14px; }

  /* Carrito: que el precio nunca empuje fuera de la fila. */
  .litem { gap: 8px; }
  .litem .li-price { font-size: 12.5px; }
}

/* ── Vista Matriz (3er formato: matriz variante × talle con inputs) ── */
.grid.matriz { display: block; grid-template-columns: none; }
.mx-card {
  background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--pink);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden;
}
.mx-top { display: flex; gap: 14px; padding: 14px 16px 12px; }
.mx-photo {
  width: 96px; height: 96px; flex: none; border-radius: 9px; position: relative;
  background: var(--pink-soft) center/cover no-repeat; border: 1px solid var(--line);
}
.mx-badge {
  position: absolute; top: 6px; left: 6px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
.mx-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mx-cat { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-dark); }
.mx-name { font-size: 16px; font-weight: 800; line-height: 1.15; margin: 3px 0 8px; text-transform: uppercase; }
.mx-prices { display: flex; flex-direction: column; gap: 1px; }
.mx-may { font-size: 13px; color: var(--muted); }
.mx-may b { font-size: 18px; font-weight: 800; color: var(--pink-dark); letter-spacing: -.02em; margin-left: 4px; }
/* "hasta $X" del Precio Mayorista: negro y chiquito, igual que el del Precio al Público. */
.mx-may-hasta { font-size: 12px; color: var(--muted); font-weight: 600; }
.mx-may .mx-may-hasta b { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0; margin-left: 3px; }
.mx-pvp { font-size: 12px; color: var(--muted); }
.mx-pvp b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.mx-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pink-dark);
  background: rgba(196,129,130,.12); padding: 3px 8px; border-radius: 6px; margin-top: 8px; align-self: flex-start;
}
.mx-tag.solo { color: var(--muted); background: var(--bg); }
.mx-wrap { overflow-x: auto; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mx-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.mx-table th, .mx-table td { padding: 0; text-align: center; }
.mx-table thead th {
  font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; padding: 8px 6px 7px; background: #faf7f3;
  border-bottom: 1px solid var(--line); width: 68px; min-width: 68px; font-variant-numeric: tabular-nums;
}
.mx-table th.mx-est-h, .mx-table td.mx-est-c {
  position: sticky; left: 0; z-index: 2; text-align: left; min-width: 188px; max-width: 188px;
  padding: 7px 12px; background: var(--card); border-right: 1px solid var(--line);
}
.mx-table thead th.mx-est-h { background: #faf7f3; z-index: 3; }
.mx-est-c { border-bottom: 1px solid var(--line); }
.mx-table tbody tr:hover td { background: rgba(44,39,36,.025); }
.mx-table tbody tr:hover td.mx-est-c { background: var(--card); }
.mx-est { display: flex; align-items: center; gap: 9px; }
.mx-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
.mx-est-img { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; flex: none; border: 1px solid var(--line); background: #faf7f3; }
.mx-est-nm { font-size: 13px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.mx-cell { width: 68px; padding: 5px 4px; border-bottom: 1px solid var(--line); position: relative; }
.mx-dash { color: var(--off); font-size: 13px; }
.mx-qty {
  width: 44px; height: 34px; text-align: center; border: 1px solid var(--line); border-radius: 8px;
  background: #faf7f3; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.mx-qty::-webkit-outer-spin-button, .mx-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mx-qty:focus { outline: none; border-color: var(--pink); background: #fff; box-shadow: 0 0 0 2px rgba(196,129,130,.18); }
.mx-qty.has { border-color: var(--pink); background: rgba(196,129,130,.12); color: var(--pink-dark); }
.mx-cell.mx-poco .mx-qty { border-color: rgba(211,154,60,.5); }
.mx-cell.mx-poco::after { content: ''; position: absolute; top: 7px; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--low); }
.mx-cell.mx-sin .mx-qty { background: transparent; border-style: dashed; color: var(--off); pointer-events: none; }
.mx-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: #faf7f3; border-top: 1px solid var(--line);
}
.mx-legend { font-size: 11px; color: var(--muted); font-weight: 600; }
.mx-sub { font-size: 13px; color: var(--muted); font-weight: 700; }
.mx-sub b { color: var(--ink); font-size: 15px; margin-left: 6px; }

/* Barra de progreso del scroll horizontal de la matriz: comunica que se desliza
   y cuánto avanzaste. El thumb es arrastrable. Se auto-oculta si no hay scroll. */
.mx-sb { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; background: #faf7f3; }
.mx-sb[hidden] { display: none; }
.mx-sb-hint { font-size: 11px; font-weight: 700; color: var(--pink-dark); white-space: nowrap; }
.mx-sb-track { position: relative; flex: 1; height: 6px; background: #e6ddd6; border-radius: 999px; }
.mx-sb-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--pink); border-radius: 999px; cursor: grab; touch-action: none; }
.mx-sb-thumb:active { cursor: grabbing; }

@media (max-width: 520px) {
  .mx-photo { width: 72px; height: 72px; }
  .mx-name { font-size: 14px; }
  /* Columna de variante (sticky) más angosta → entran más talles antes de scrollear. */
  .mx-table th.mx-est-h, .mx-table td.mx-est-c { min-width: 116px; max-width: 116px; padding: 7px 8px; }
  .mx-est { gap: 7px; }
  .mx-est-img { width: 26px; height: 26px; }
  .mx-est-nm { font-size: 12px; }
  /* Sombra al borde de la columna fija: deja claro que hay más talles hacia la derecha. */
  .mx-table td.mx-est-c, .mx-table th.mx-est-h { box-shadow: 6px 0 6px -6px rgba(0,0,0,.12); }
  /* Celdas de cantidad compactas (16px evita zoom iOS, alto cómodo para tocar). */
  .mx-qty { width: 42px; height: 40px; font-size: 16px; }
  /* Columnas de talle: MISMO ancho fijo (th y celda) para que queden parejas. */
  .mx-table thead th { width: 56px; min-width: 56px; padding: 8px 3px 7px; font-size: 10px; }
  .mx-cell { width: 56px; padding: 5px 3px; }
}

/* ── Product grid ── */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.prod {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
}
.prod-img {
  aspect-ratio: 1/1; background: var(--pink-soft) center/cover no-repeat;
  position: relative;
}
.prod-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.prod-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.prod-name { font-weight: 600; font-size: 14px; line-height: 1.25; text-transform: uppercase; }
.prod-cat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
/* Badge SALE: rebaja MINORISTA de +30% sobre el precio real. Va a la derecha para
   no chocar con .prod-badge (izquierda) si algún día se vuelve a prender. */
.prod-sale {
  position: absolute; top: 10px; right: 10px;
  background: #b23c3c; color: #fff; font-size: 12px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .04em;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
/* Cucarda de entrega diferida / pre-venta (abajo-izquierda de la foto, para no
   pisar SALE arriba-derecha). Color de marca para que se distinga del rojo de SALE. */
.prod-entrega {
  position: absolute; bottom: 10px; left: 10px;
  background: #c47474; color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .03em;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); text-transform: uppercase;
}
.prod-entrega.preventa { background: #7b5ea7; }   /* pre-venta: violeta, distinto del diferido */
/* Chip inline (al lado del nombre) para vista lista y matriz. */
.entrega-chip {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  background: #c47474; color: #fff; font-size: 9.5px; font-weight: 800; line-height: 1;
  padding: 3px 8px; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap; position: relative; top: -1px;
}
.entrega-chip.preventa { background: #7b5ea7; }
/* Precio por variante en la matriz (cuando la familia tiene precios distintos). */
.mx-est-txt { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.mx-est-precio { font-size: 11px; font-weight: 700; color: #a85757; white-space: nowrap; }
/* Leyenda bajo el precio: fecha + seña, para que la clienta entienda antes de agregar. */
.prod-entrega-info {
  display: flex; gap: 5px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.35; color: var(--ink);
  background: rgba(196,116,116,.1);
  border: 1px solid rgba(196,116,116,.25); border-radius: 8px;
  padding: 6px 8px; margin-top: 2px;
}
.prod-entrega-info .pei-ico { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: #c47474; }
.prod-entrega-info b { color: #a85757; }
/* Escalera de precio: real (tachado) → promo minorista → MAYORISTA (el que paga,
   por eso es el más grande y el único con color de marca). */
.prod-price { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.prod-price .pp-real { font-size: 11.5px; color: var(--muted); }
.prod-price .pp-real s { opacity: .8; margin-left: 4px; }
.prod-price .pp-may { margin-top: 1px; }
.prod-price .pp-may b { color: var(--pink-dark); font-size: 18px; font-weight: 800; margin-left: 4px; }
.prod-price .pp-pub { font-size: 12px; color: var(--muted); }
.prod-price .pp-pub b { color: var(--ink); font-weight: 600; margin-left: 4px; }
/* Precio de lista tachado (solo en "Mejores descuentos"): la rebaja natural. */
.pp-lista, .mx-lista { font-size: 11.5px; color: var(--muted); }
.pp-lista s, .mx-lista s { color: var(--muted); opacity: .8; margin-left: 4px; }

/* talle steppers */
.talles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.cell {
  border: 1px solid var(--line); border-radius: 10px; padding: 5px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 50px;
}
.cell.off { opacity: .45; }
.cell-talle { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.dot.low { background: var(--low); }
.dot.off { background: var(--off); }
.step { display: flex; align-items: center; gap: 2px; }
.step button {
  width: 22px; height: 22px; border: 1px solid var(--line); background: #fff;
  border-radius: 6px; cursor: pointer; font-weight: 700; color: var(--pink-dark);
  display: grid; place-items: center; font-size: 14px; line-height: 1;
}
.step button:disabled { opacity: .4; cursor: not-allowed; }
.step .q { min-width: 20px; text-align: center; font-size: 13px; font-weight: 600; }
.cell.has .cell-talle { color: var(--pink-dark); }

/* ── Pedido confirmado ── */
.order-ok { text-align: center; padding: 32px 16px; }
.order-ok .ok-mark {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 30px; font-weight: 800;
  display: grid; place-items: center;
}
.order-ok h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.order-ok .ok-num { margin: 0; font-size: 15px; font-weight: 700; color: var(--pink-dark); }
.order-ok .ok-sub { margin: 2px 0 14px; color: var(--muted); font-size: 13px; }
.order-ok .ok-msg { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ── Empty / loading ── */
.note { color: var(--muted); text-align: center; padding: 40px 16px; font-size: 14px; }

/* Llamado a la acción: "Elegí una categoría" — destacado y con pulso suave. */
.note.cta {
  max-width: 540px; margin: 6px auto 0; padding: 24px 22px;
  border: 2px dashed var(--pink); border-radius: var(--radius);
  background: var(--pink-soft); color: var(--pink-dark);
  font-size: 16px; font-weight: 700;
  animation: ctaPulse 1.6s ease-in-out infinite;
}
.note.cta .cta-ico {
  display: inline-block; font-size: 20px; margin-right: 4px;
  animation: ctaBob 1.6s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,129,130,.40); }
  50%      { box-shadow: 0 0 0 9px rgba(196,129,130,0); }
}
@keyframes ctaBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .note.cta, .note.cta .cta-ico { animation: none; }
}
/* Resalta el panel de categorías cuando hay que elegir una (misma pulsación que el cartel). */
#catSub.catsub-pulse > .cat-sec {
  border-color: var(--pink); animation: ctaPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { #catSub.catsub-pulse > .cat-sec { animation: none; } }

/* Banda de contexto de búsqueda ("Buscando «x» en …") */
.searchscope {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  background: var(--pink-soft); border: 1px solid #e7c3c4;
  color: var(--muted); font-size: 13px; scroll-margin-top: 74px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.searchscope .ss-count { font-weight: 800; color: var(--pink-dark); }
.searchscope b { color: var(--ink); font-weight: 600; }
.searchscope a { color: var(--pink-dark); font-weight: 600; text-decoration: none; }
.searchscope a:hover { text-decoration: underline; }

/* ── Cart drawer ── */
.overlay {
  position: fixed; inset: 0; background: rgba(44,39,36,.4);
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40;
}
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: var(--bg); z-index: 50; transform: translateX(100%);
  transition: transform .2s ease; display: flex; flex-direction: column;
  box-shadow: -8px 0 30px rgba(44,39,36,.12);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; background: #fff;
}
.drawer-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.drawer-scroll { flex: 1; overflow-y: auto; }
.drawer-body { padding: 12px 14px 0; }
.litem {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start;
}
.litem img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--pink-soft); cursor: zoom-in; flex: none; }
.litem .li-main { flex: 1; min-width: 0; }
.litem .li-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.litem .li-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* Precio anterior cuando bajó (liquidación): que se vea la baja, no solo el número nuevo. */
.litem .li-baja { text-decoration: line-through; opacity: .75; margin-left: 2px; }
.litem .li-agotado {
  color: #b23c3c; font-weight: 700; margin-left: 4px;
  text-transform: uppercase; letter-spacing: .02em;
}
.litem .li-step { display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; }
.litem .li-step button {
  width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  color: var(--pink-dark); font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer;
}
.litem .li-step button:disabled { opacity: .4; cursor: not-allowed; }
.litem .li-step button:active { filter: brightness(.95); }
.litem .li-q { min-width: 20px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.litem .li-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.litem .li-price { font-size: 14px; font-weight: 800; color: var(--pink-dark); white-space: nowrap; }
.litem .li-rm { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; text-decoration: underline; }

/* Feedback: badge del carrito "salta" al sumar. */
@keyframes badgeBump { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
.cartbtn .count.bump { animation: badgeBump .32s ease; }

/* Barra de carrito fija (mobile). */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  border: none; width: 100%; padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--pink); color: #fff; font: inherit; cursor: pointer;
  box-shadow: 0 -4px 18px rgba(44,39,36,.18);
}
.cart-bar[hidden] { display: none; }
.cart-bar .cb-left { font-size: 14px; }
.cart-bar .cb-left b { font-size: 16px; font-weight: 800; }
.cart-bar .cb-cta { font-size: 14px; font-weight: 800; }
/* Visible en TODAS las pantallas (también desktop): resumen N productos + total. */
.cart-bar:not([hidden]) { display: flex; }
body.has-cartbar .wrap { padding-bottom: 96px; }
/* Subo los FABs para que no los tape la barra (en cualquier ancho). */
body.has-cartbar .search-fab, body.has-cartbar .help-fab { bottom: 88px; }
@media (min-width: 641px) {
  .cart-bar { padding: 16px 28px; }
  .cart-bar .cb-left { font-size: 15px; }
  .cart-bar .cb-left b { font-size: 18px; }
  .cart-bar .cb-cta { font-size: 15px; }
}

/* Feedback al agregar al carrito: la celda pulsa con un anillo rosa. */
.cell.added { animation: cellAdded .55s ease; }
@keyframes cellAdded {
  0%   { box-shadow: 0 0 0 3px var(--pink); }
  60%  { box-shadow: 0 0 0 3px var(--pink); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Tope de stock alcanzado: + deshabilitado + cartel "máx stock" claro. */
.cell .step button:disabled { opacity: .35; cursor: not-allowed; }
.cell-max { display: none; margin-top: 3px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #c2410c; }
.cell.atmax .cell-max { display: block; }
.cell.atmax { outline: 1px solid #fed7aa; outline-offset: -1px; }
.cell.atmax .step button[data-act="inc"] { opacity: .3; }
.drawer-foot { padding: 16px 18px; border-top: 1px solid var(--line); background: #fff; }
.totrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.totrow .tlabel { color: var(--muted); font-size: 13px; }
.totrow .tval { font-size: 22px; font-weight: 800; }
.btn {
  width: 100%; border: none; border-radius: 12px; padding: 14px;
  background: var(--pink); color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer;
}
.btn:hover { background: var(--pink-dark); }
.btn:disabled { background: var(--off); cursor: not-allowed; }
.foot-note { text-align: center; color: var(--muted); font-size: 11px; margin-top: 8px; }

/* ── Destacados (rieles del home) ── */
.dest { max-width: 1160px; margin: 0 auto; padding: 4px 18px 24px; }
.dest[hidden] { display: none; }
.rail { margin: 22px 0; }
.rail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rail-head h2 { font-size: 19px; font-weight: 800; margin: 0; }
.rail-sub { font-size: 12px; color: var(--muted); }
.rail-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 220px;
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.rail-strip .rcard { scroll-snap-align: start; }
/* "Joya": temporadas anteriores, acento más cálido para que destaque. */
.rail-joya .rail-head h2 { color: var(--pink-dark); }
.rail-joya .rcard { border-color: var(--pink-soft); }

.rcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.rcard-img {
  position: relative; aspect-ratio: 1/1; background: var(--pink-soft) center/cover no-repeat;
}
.rcard-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--pink-dark); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 3px 8px;
}
.rcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.rcard-name {
  font-size: 13px; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.rcard-price { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.rcard-price .pp-may b { color: var(--ink); font-size: 15px; font-weight: 800; margin-left: 4px; }
.rcard-price .pp-pub b { margin-left: 4px; color: var(--ink); font-weight: 600; }
.rcard-talles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.rcard-talles .cell { flex: 0 0 auto; }

/* Señal de que la foto es ampliable */
.prod-img, .mx-photo, .mx-est-img, .rcard-img { cursor: zoom-in; }

/* ── Lightbox (ampliar foto al tocar) ── */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,17,15,.88);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 12px 44px rgba(0,0,0,.5); }
.lb-close {
  position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92); color: var(--ink); font-size: 20px; cursor: pointer;
}

/* ── Modal de cantidad (vista matriz: −/+ en vez de tipear) ── */
.qm-overlay {
  position: fixed; inset: 0; z-index: 1500; display: none;  /* arriba del modal de variantes (cb-overlay z1400) */
  align-items: flex-end; justify-content: center; background: rgba(44,39,36,.45);
}
.qm-overlay.open { display: flex; }
.qm-card {
  background: #fff; width: 100%; max-width: 440px; border-radius: 18px 18px 0 0;
  padding: 20px 18px 22px; box-shadow: 0 -8px 30px rgba(44,39,36,.2);
}
@media (min-width: 560px) { .qm-overlay { align-items: center; } .qm-card { border-radius: 18px; } }
.qm-name { font-size: 16px; font-weight: 800; line-height: 1.2; }
.qm-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.qm-price { margin-top: 8px; font-size: 13px; color: var(--muted); }
.qm-price b { color: var(--pink-dark); font-size: 18px; font-weight: 800; margin-left: 4px; }
.qm-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 4px; }
.qm-stepper button {
  width: 58px; height: 58px; border-radius: 16px; border: 1px solid var(--line);
  background: #faf7f3; color: var(--pink-dark); font-size: 28px; font-weight: 700;
  cursor: pointer; display: grid; place-items: center; line-height: 1;
}
.qm-stepper button:active { filter: brightness(.95); }
.qm-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.qm-qty { min-width: 70px; text-align: center; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qm-actions { display: flex; gap: 10px; margin-top: 18px; }
.qm-actions button { flex: 1; border-radius: 12px; padding: 14px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.qm-remove { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.qm-done { background: var(--pink); border: none; color: #fff; }

/* Celda de la matriz: botón (abre el modal) en vez de input numérico. */
.mx-qtybtn {
  width: 46px; height: 38px; border: 1px solid var(--line); border-radius: 8px;
  background: #faf7f3; color: var(--off); font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.mx-qtybtn.has { border-color: var(--pink); background: rgba(196,129,130,.14); color: var(--pink-dark); }
.mx-qtybtn:active { filter: brightness(.96); }

/* ── FAB de búsqueda (lupita sticky cuando hay mucho scroll) ── */
.search-fab {
  position: fixed; right: 16px; bottom: 18px; z-index: 35;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--ink); color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(44,39,36,.3); display: none; place-items: center;
}
.search-fab.show { display: grid; }

/* ── Botón de ayuda (?) fijo — reabre el tour ── */
.help-fab {
  position: fixed; left: 16px; bottom: 18px; z-index: 35;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--pink-dark); font-size: 20px; font-weight: 800;
  cursor: pointer; box-shadow: 0 6px 18px rgba(44,39,36,.2); display: grid; place-items: center;
}
.help-fab:hover { border-color: var(--pink); }

/* ── Tour de onboarding (spotlight por pasos) ── */
#tour { position: fixed; inset: 0; z-index: 70; display: none; }
#tour.open { display: block; }
#tour.dim { background: rgba(20,17,15,.62); }
#tourSpot {
  position: fixed; border-radius: 12px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 9999px rgba(20,17,15,.62); transition: all .25s ease;
}
#tourPop {
  position: fixed; width: min(330px, calc(100vw - 24px));
  background: #fff; border-radius: 16px; padding: 16px 16px 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.32);
}
.tour-count { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .05em; }
#tourTitle { margin: 4px 0 6px; font-size: 17px; font-weight: 800; }
#tourText { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-right { display: flex; gap: 8px; }
.tour-nav button { border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
#tourSkip { background: none; border: none; color: var(--muted); padding: 9px 4px; }
#tourPrev { background: #fff; border: 1px solid var(--line); color: var(--ink); }
#tourNext { background: var(--pink); border: none; color: #fff; }
#tourNext:hover { background: var(--pink-dark); }

/* ── Sugerencias del carrito (carrusel mini, solo visual, sin botones) ── */
/* Panel destacado, en el flujo (debajo de los items) — no pegado al footer. */
.cart-cross {
  margin: 14px; padding: 12px 12px 6px;
  background: #faf3f1; border: 1px solid #f0e4e1; border-radius: 14px;
}
.cart-cross[hidden] { display: none; }
.xhead { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.xhead h2 { font-size: 13px; font-weight: 800; color: var(--pink-dark); margin: 0; }
.xhead span { font-size: 11px; color: var(--muted); }
.xstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 0 10px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.xcard { scroll-snap-align: start; cursor: zoom-in; }
.xcard-img { aspect-ratio: 1/1; border-radius: 10px; background: #fff center/cover no-repeat; border: 1px solid #ecd6d6; }
.xcard-name {
  font-size: 11px; font-weight: 600; line-height: 1.2; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xcard-price { font-size: 12px; font-weight: 800; color: var(--pink-dark); margin-top: 2px; }

/* ── Acciones por producto: Ver detalle / Combina con ───────────────────────── */
.prod-actions { display: flex; gap: 8px; margin: 9px 0 3px; flex-wrap: wrap; }
.act-btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  border: 1px solid #e7d3d3; background: #fff; color: var(--ink);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .06s ease;
}
.act-btn:hover { background: #fbf3f3; border-color: var(--pink); box-shadow: 0 2px 8px rgba(216,138,150,.16); }
.act-btn:active { transform: translateY(1px); }
.act-btn .act-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.act-combina { border-color: #cfe9e4; background: #f3fbf9; color: #1f7a6b; }
.act-combina:hover { background: #e6f6f2; border-color: #2a9d8a; box-shadow: 0 2px 8px rgba(31,122,107,.16); }
.lrow-info .prod-actions { margin: 7px 0 0; }
.lrow-info .act-btn { flex: 0 0 auto; padding: 6px 10px; font-size: 11px; }
.lrow-info .act-btn .act-ic { width: 13px; height: 13px; }

/* ── Swatches de variantes (familias de color) en cada card ── */
.sw-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; margin: 8px 0 2px; padding: 6px 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; text-align: left; font: inherit;
}
.sw-row:hover { border-color: var(--pink); background: #fbf3f3; box-shadow: 0 2px 8px rgba(216,138,150,.14); }
.sw-row:active { transform: translateY(1px); }
.sw-dots { display: inline-flex; align-items: center; gap: 4px; }
.sw-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.sw-dot.cur { box-shadow: 0 0 0 2px var(--pink); }
.sw-more { font-size: 11px; font-weight: 700; color: var(--off); margin-left: 2px; }
.sw-cta { font-size: 11.5px; font-weight: 700; color: #b06b6b; }
.sw-count {
  margin-left: auto; font-size: 11px; font-weight: 800; color: #fff;
  background: #c47474; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.sw-count[hidden] { display: none; }
.lrow-info .sw-row { margin: 6px 0 0; padding: 5px 8px; }
.lrow-info .sw-dot { width: 16px; height: 16px; }

/* Link "Combina con esto" en el ítem del carrito */
.li-combina {
  margin-top: 7px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: #1f7a6b;
}
.li-combina .act-ic { width: 13px; height: 13px; flex: 0 0 auto; }
.li-combina:hover { color: #2a9d8a; }
.li-combina:hover span { text-decoration: underline; }

/* ── Modal "Ver detalle" (fotos + descripción) ──────────────────────────────── */
.dt-overlay, .cb-overlay {
  position: fixed; inset: 0; z-index: 1400; display: none;
  background: rgba(40, 20, 24, .55); padding: 16px; overflow-y: auto;
}
.dt-overlay.open, .cb-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.dt-card, .cb-card {
  background: #fff; border-radius: 16px; width: 100%; max-width: 560px; margin: auto;
  padding: 18px; box-shadow: 0 12px 48px rgba(0,0,0,.28); position: relative;
}
.dt-close, .cb-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: #f1e4e4; color: var(--ink); font-size: 16px; cursor: pointer; z-index: 2;
}
.dt-main {
  width: 100%; aspect-ratio: 1/1; border-radius: 12px; background: #faf3f1 center/contain no-repeat;
  cursor: zoom-in; border: 1px solid #f0e4e1;
}
.dt-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dt-th {
  width: 56px; height: 56px; border-radius: 9px; background: #fff center/cover no-repeat;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.dt-th.active { border-color: var(--pink); }
.dt-noimg { padding: 30px; text-align: center; color: var(--muted); background: #faf3f1; border-radius: 12px; }
.dt-name { font-size: 16px; font-weight: 800; margin: 14px 0 8px; color: var(--ink); }
.dt-desc { font-size: 13.5px; line-height: 1.55; color: #4a3f3f; }
.dt-desc img { max-width: 100%; height: auto; border-radius: 8px; }
.dt-desc table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.dt-desc td, .dt-desc th { border: 1px solid #eadede; padding: 5px 8px; text-align: center; }
.dt-empty { color: var(--muted); }

/* ── Modal "Combina con" (crossup, tipo matriz) ─────────────────────────────── */
.cb-card { max-width: 620px; }
/* Modal de variantes: el card se ensancha según la matriz para NO cortar
   horizontalmente (la tabla familia × talles puede ser ancha). Crece con el
   contenido hasta 96vw; mínimo razonable para que no quede angosto. */
#matrizModal .cb-card { width: max-content; min-width: min(560px, 94vw); max-width: 96vw; }
.cb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cb-head h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.cb-head .cb-close { position: static; }
.cb-body { display: flex; flex-direction: column; gap: 14px; }
.cb-prod { border: 1px solid #f0e4e1; border-radius: 12px; padding: 12px; }
.cb-prod-top { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.cb-prod-img { width: 64px; height: 64px; border-radius: 10px; background: #faf3f1 center/cover no-repeat; flex: 0 0 auto; cursor: zoom-in; }
.cb-prod-meta { min-width: 0; }
.cb-prod .talles { display: flex; flex-wrap: wrap; gap: 6px; }


/* Banner de ANTICIPO (envío diferido / pre-lanzamiento). Color de marca, con una
   cinta "vista previa" cuando lo ve solo la cuenta preview antes de lanzar. */
.anticipo-banner {
  margin: 0 0 16px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(120deg, #ffe3c9 0%, #ffd6b0 30%, #ffe9c2 52%, #bfe9e2 100%);
  border: 1px solid rgba(255,183,120,.55);
  box-shadow: 0 6px 22px rgba(240,150,90,.18);
}
.anticipo-banner .anticipo-preview {
  display: block; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 4px 10px; opacity: .92;
}
/* Todo el banner es un botón: al tocarlo lleva a los productos del anticipo. */
.anticipo-banner .anticipo-in {
  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; border: none;
  background: transparent; padding: 16px 20px; cursor: pointer; font: inherit; position: relative;
  transition: transform .12s ease;
}
.anticipo-banner .anticipo-in:hover { transform: translateY(-1px); }
.anticipo-banner .anticipo-in:active { transform: translateY(0); }
/* Decoración: sol radiante + palmera */
.anticipo-banner .anticipo-deco {
  position: relative; flex: 0 0 auto; width: 62px; height: 62px; display: flex;
  align-items: center; justify-content: center; font-size: 30px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(180,90,40,.25));
}
.anticipo-banner .anticipo-sun {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle, #ffd24d 0%, #ffb64a 65%, #ff9d3a 100%);
  box-shadow: 0 0 0 6px rgba(255,208,90,.28), 0 0 22px rgba(255,170,70,.5);
  z-index: 0;
}
.anticipo-banner .anticipo-deco > :not(.anticipo-sun) { position: relative; z-index: 1; }
.anticipo-banner .anticipo-body { display: block; min-width: 0; }
.anticipo-banner .anticipo-kicker {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #b5541f; background: rgba(255,255,255,.55); border-radius: 999px; padding: 2px 9px; margin-bottom: 5px;
}
.anticipo-banner .anticipo-tag {
  display: block; font-weight: 800; color: #9a3f1e; font-size: 17px; line-height: 1.2; margin-bottom: 3px;
}
.anticipo-banner .anticipo-txt { display: block; color: #6a4632; font-size: 13.5px; line-height: 1.5; }
.anticipo-banner .anticipo-cta {
  display: inline-block; margin-top: 10px; background: #e2703a; color: #fff; font-weight: 800; font-size: 13px;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 3px 10px rgba(226,112,58,.35);
  transition: background .12s ease;
}
.anticipo-banner .anticipo-in:hover .anticipo-cta { background: #cf5f2c; }
@media (max-width: 640px) {
  .anticipo-banner .anticipo-in { gap: 12px; padding: 14px; }
  .anticipo-banner .anticipo-deco { width: 46px; height: 46px; font-size: 22px; }
  .anticipo-banner .anticipo-sun { width: 34px; height: 34px; }
  .anticipo-banner .anticipo-tag { font-size: 15px; }
}

/* Seña en el resumen del checkout (envío diferido). */
/* El estilo de .rv-sena vive en ensureReviewStyles() (index.html), que se inyecta
   al abrir el resumen — no duplicar acá para no pisar su layout de grid. */

/* Pill de la categoría ANTICIPO (solo la ve la cuenta preview). Color de marca. */
.chip.chip-anticipo { border-color: #c47474; color: #a85757; font-weight: 700; background: rgba(196,116,116,.08); }
.chip.chip-anticipo.active, .chip.chip-anticipo.expanded { background: #c47474; border-color: #c47474; color: #fff; }