/* =============================================================================
   shop.css — CAPA 2 de 3: COMPONENTES DE COMERCIO
   Chrome compartido por todas las páginas de tienda: barra de anuncio, desplegable
   de sucursales, rejilla de productos, franja COFEPRIS, newsletter, pie, backdrop,
   drawer de carrito y paleta de búsqueda.
   -----------------------------------------------------------------------------
   Carga DESPUÉS de base.css y ANTES de la hoja de página.
   INVARIANTE: aquí no se redefine ningún componente de base.css (.btn, .nav,
   .topbar, .iconbtn, .pcard, .sucrow, .sacts, .chip-f). Si un selector aparece en
   ambos archivos, es un bug.
   ============================================================================= */

/* ---------- BARRA DE ANUNCIO ---------- */
/* Una sola altura para TODOS los controles de la barra. Antes había tres valores
   independientes —34px en el selector de sucursal, ~29px de padding en «Instalar
   app» y ninguno en las utilidades— y por eso se veían desalineados. */
.ann{
  --ann-ctrl-h:28px;
  background:var(--navy-800); color:#fff; font-size:var(--fs-xs); letter-spacing:.02em;
}
.ann .wrap{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.ann .center{ flex:1; text-align:center; font-weight:500; }
.ann .util{ display:flex; gap:14px; align-items:center; }
.ann .util button{
  background:none; border:none; color:rgba(255,255,255,.86); font:inherit;
  font-size:var(--fs-xs); font-weight:600; cursor:pointer;
  display:inline-flex; gap:5px; align-items:center; justify-content:center;
  min-height:var(--ann-ctrl-h); padding:0 6px; border-radius:var(--radius-sm);
}
.ann .util button:hover{ color:#fff; background:rgba(255,255,255,.1); }
/* Botones de solo icono (tema): cuadrados, así su ancho deja de depender del
   idioma ni del tema. Antes llevaban la etiqueta «Oscuro»/«Claro» dentro y la
   barra se movía al conmutar. */
.ann .util #themeBtn{ width:var(--ann-ctrl-h); padding:0; }
.ann .pwa{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff;
  border-radius:var(--radius-pill); padding:5px 14px;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs); cursor:pointer;
}
.ann .pwa:hover{ background:rgba(255,255,255,.2); }
@media(max-width:760px){ .ann .pwa{ display:none; } }

/* ---------- DESPLEGABLE DE SUCURSALES ---------- */
/* `top` se deriva del token de altura del header + los 38px del anuncio. Estaba
   escrito a mano como 106px: cualquier cambio de alto lo despegaba. */
.sucwrap{
  position:fixed; left:0; right:0; top:calc(var(--header-h) + 38px); z-index:49; display:none;
  background:var(--surface); border-bottom:1px solid var(--line-strong);
  box-shadow:var(--shadow-md); animation:sucdown .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sucdown{ from{ opacity:0; transform:translateY(-10px); } }
.sucdrop{
  max-width:var(--maxw); margin:0 auto; padding:26px var(--s6);
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
}
@media(max-width:960px){ .sucdrop{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .sucdrop{ grid-template-columns:1fr; } }

/* ---------- REJILLA DE PRODUCTOS ---------- */
/* La card la define base.css §12; aquí solo la rejilla que la contiene. */
.prods{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
@media(max-width:900px){ .prods{ grid-template-columns:1fr 1fr; } }

/* ---------- FRANJA COFEPRIS ---------- */
/* Bloque FIJO por diseño: la leyenda sanitaria nunca va dentro de un tab ni de un
   acordeón. Ver 01-estrategia-ux/08-cofepris-matriz.md. */
.cofstrip{ border-top:1px solid var(--line-strong); background:var(--accent-tint); }
.cofstrip .wrap{
  display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
  /* El padding horizontal NO se anula: sin él el contenido llega al borde de la
     pantalla y cualquier área táctil ampliada desborda el viewport. */
  padding:16px var(--s6); font-size:12.5px; color:var(--ink-muted); text-align:center;
}
.cofstrip .ic{ color:var(--accent); }

/* ---------- NEWSLETTER ---------- */
.news{ background:var(--sunken); }
.news .wrap{ text-align:center; padding:var(--s9) var(--s6); }
.news h2{ font-size:clamp(26px,3.2vw,38px); }
.news p{ color:var(--ink-muted); margin:12px auto 26px; max-width:48ch; }
.news form{ display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; }
.news input{
  /* min-width:0 es imprescindible: por defecto un hijo flex no encoge por debajo
     de su tamaño intrínseco (min-width:auto), y el <input> con su tamaño por
     defecto más el botón desbordaban 43px a 375px de ancho. */
  flex:1 1 200px; min-width:0; font:inherit; padding:14px 16px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink);
}
.news input:focus{ border-color:var(--accent); }
.news form .btn{ flex:0 0 auto; }

/* ---------- PIE ---------- */
.foot{ background:var(--navy-900); color:#cbd3e6; }
.foot .top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s6); padding:var(--s9) 0 var(--s7); }
@media(max-width:820px){ .foot .top{ grid-template-columns:1fr 1fr; } }
.foot img{ height:30px; width:auto; filter:brightness(0) invert(1); margin-bottom:16px; }
.foot p{ font-size:var(--fs-sm); color:#9aa6c4; max-width:34ch; }
.foot h5{
  font-family:var(--font-display); color:#fff; font-size:var(--fs-xs);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;
}
.foot a{ display:block; font-size:13.5px; color:#9aa6c4; padding:5px 0; }
.foot a:hover{ color:#fff; }
.foot .bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:20px 0;
  display:flex; justify-content:space-between; gap:12px;
  font-size:var(--fs-xs); color:#7f8bab; flex-wrap:wrap;
}

/* ---------- BACKDROP DE OVERLAYS ---------- */
/* .scrim es EXCLUSIVAMENTE el backdrop de carrito y buscador: nace oculto y lo
   enciende closeAll()/openCart() con .on. NUNCA usarlo dentro de una sección —
   el degradado del hero lo hacía y heredaba este opacity:0 (ver .hero-scrim). */
.scrim{
  position:fixed; inset:0; z-index:60;
  background:rgba(8,14,28,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.scrim.on{ opacity:1; pointer-events:auto; }

/* ---------- DRAWER DE CARRITO ---------- */
.cart{
  position:fixed; top:0; right:0; height:100%; width:392px; max-width:92vw; z-index:61;
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.cart.on{ transform:none; }
.cart .ch{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-weight:700;
}
.cart .ci{ display:flex; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.cart .ci .th{ width:60px; height:72px; border-radius:var(--radius-sm); flex:none; overflow:hidden; background:var(--sunken); }
.cart .ci .th img{ width:100%; height:100%; object-fit:cover; }
.cart .ci .info{ flex:1; font-size:var(--fs-sm); }
.cart .cf{ margin-top:auto; padding:20px; border-top:1px solid var(--line); }
.cart .cf .tot{
  display:flex; justify-content:space-between;
  font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:14px;
}

/* ---------- PALETA DE BÚSQUEDA ---------- */
.cmdk{
  position:fixed; left:0; right:0; top:0; z-index:61; padding:22px 0;
  background:var(--surface); border-bottom:1px solid var(--line);
  transform:translateY(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.cmdk.on{ transform:none; }
.cmdk .in{ display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--ink); padding-bottom:14px; }
.cmdk input{
  flex:1; border:none; background:transparent; font:inherit; font-size:22px;
  color:var(--ink); outline:none; font-family:var(--font-display);
}
.cmdk .sug{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.cmdk .sug button{
  border:1px solid var(--line-strong); background:transparent; border-radius:var(--radius-pill);
  padding:8px 14px; font:inherit; font-size:var(--fs-sm); color:var(--ink); cursor:pointer;
  min-height:40px;
}
.cmdk .sug button:hover{ border-color:var(--accent); color:var(--accent); }

/* =============================================================================
   MOTOR DE TIENDA — componentes que monta shop.js
   ============================================================================= */

/* ---------- AVISOS (toasts) ---------- */
.toasts{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:14px; pointer-events:auto;
  background:var(--raised); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lg); padding:10px 12px 10px 20px;
  font-size:var(--fs-base); max-width:min(92vw,460px);
  opacity:0; transform:translateY(14px); transition:opacity .28s, transform .28s;
}
.toast.in{ opacity:1; transform:none; }
.toast .btn{ min-height:36px; white-space:nowrap; }

/* ---------- ESQUELETOS ---------- */
/* Con latencia simulada de 320-620 ms: es lo que hace que un HTML estático se
   lea como una app con datos detrás. */
.sk{ background:linear-gradient(90deg, var(--sunken) 25%, var(--surface-3) 50%, var(--sunken) 75%);
  background-size:200% 100%; animation:sk 1.2s linear infinite; border-radius:6px; }
@keyframes sk{ to{ background-position:-200% 0; } }
.sk-row{ display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.sk-th{ width:52px; height:62px; flex:none; border-radius:var(--radius-sm); }
.sk-line{ height:11px; margin:7px 0; }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none; } }

/* ---------- ESTADO VACÍO ---------- */
.empty{ padding:var(--s7) var(--s5); text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; }

/* ---------- RESULTADOS DE BÚSQUEDA ---------- */
.sr{ max-height:min(60vh,540px); overflow:auto; margin-top:var(--s4); }
.sr.on{ border-top:1px solid var(--line); padding-top:var(--s4); }
.sr-grupo + .sr-grupo{ margin-top:var(--s5); }
.sr-grupo h5{
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px;
}
.sr-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.sr-item{ display:flex; align-items:center; gap:14px; padding:10px; border-radius:var(--radius); }
.sr-item:hover{ background:var(--sunken); }
.sr-item .th{ width:48px; height:56px; flex:none; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.sr-item .th img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.sr-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sr-info b{ font-size:var(--fs-md); font-weight:600; }
.sr-info .vendor{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
}
.sr-info .muted{ font-size:var(--fs-xs); }
.sr-precio{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-md); white-space:nowrap; }

/* ---------- LÍNEAS DEL CARRITO ---------- */
.cart .ci .info b{ display:block; font-family:var(--font-display); font-size:var(--fs-base); margin:2px 0 4px; }
.cart .ci .info .vendor{
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
}
.cart .ci .info .muted{ font-size:var(--fs-xs); color:var(--ink-muted); }
.cart .ci .qty{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.cart .ci .qty button{
  min-width:30px; min-height:30px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); border-radius:var(--radius-sm); cursor:pointer; font:inherit; line-height:1;
}
.cart .ci .qty button:hover{ border-color:var(--accent); color:var(--accent); }
.cart .ci .qty .rm{ border:none; background:none; color:var(--ink-muted); font-size:var(--fs-xs); text-decoration:underline; min-width:auto; }
.cart .ci .qty .rm:hover{ color:var(--error); }
.cart .li-price{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-base); white-space:nowrap; }

/* ---------- BARRA DE ENVÍO GRATIS ---------- */
.shipbar{ padding:14px 20px; border-bottom:1px solid var(--line); background:var(--sunken); }
.shipbar .track{ height:6px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; margin-top:8px; }
.shipbar .fill{ height:100%; width:0; border-radius:var(--radius-pill); background:var(--accent); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.shipbar .msg{ font-size:12.5px; color:var(--ink-muted); display:flex; align-items:center; gap:7px; }
.shipbar .msg.ok{ color:var(--success); font-weight:600; }

/* ---------- DISPARADOR DE SUCURSAL ----------
   Antes era un <select> nativo blanco sobre la banda azul: el control cerrado se
   podia domar con appearance:none, pero la LISTA DESPLEGADA la pinta el sistema
   operativo y no hay forma de armonizarla. Ahora es un boton que abre el panel
   .sucwrap que ya existia, asi que el desplegable es nuestro y el panel de
   sucursales deja de ser decorativo. */
.branchsel{ display:inline-flex; align-items:center; }
.branchbtn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--ann-ctrl-h); padding:0 12px; max-width:min(280px,44vw);
  border-radius:var(--radius-pill); cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs);
  /* Vive sobre --navy-800 fijo, no sobre una superficie de tema: los colores van
     en blancos translucidos, no en tokens de superficie. */
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  transition:background .18s, border-color .18s;
}
.branchbtn:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }
.branchbtn [data-branch-name]{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.branchbtn .ic{ width:14px; height:14px; opacity:.8; }
.branchbtn .chev{ transform:rotate(90deg); transition:transform .2s; }
.branchbtn[aria-expanded="true"] .chev{ transform:rotate(-90deg); }

/* Sede activa dentro del panel */
.sucrow.activa{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.sucrow .pickbranch{ width:100%; justify-content:center; margin-top:10px; }
.sucrow .pickbranch:disabled{ opacity:1; background:var(--accent-tint); border-color:var(--accent); color:var(--accent); }

/* ---------- DISPONIBILIDAD POR SUCURSAL ---------- */
.stock{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.stock::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.stock.ok{ color:var(--success); }
.stock.bajo{ color:var(--warning); }
.stock.agotado{ color:var(--ink-muted); font-weight:500; }

/* ---------- WHATSAPP FLOTANTE ---------- */
/* Canal de venta nº1 en Yucatán. Elegir sucursal ANTES de abrir el chat es lo que
   demuestra que se entendió la operación multi-sede. */
.wafab{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 20px 0 16px; border-radius:var(--radius-pill);
  background:#1f9d55; color:#fff; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-base);
  box-shadow:var(--shadow-lg); transition:background .18s, transform .18s;
}
.wafab:hover{ background:#1a854a; transform:translateY(-2px); }
.wafab .ic{ width:22px; height:22px; }
@media(max-width:600px){ .wafab span{ display:none; } .wafab{ padding:0; width:56px; justify-content:center; } }

/* ---------- BARRA DE ANUNCIO EN MÓVIL ----------
   La barra lleva tres bloques (selector de sucursal · lema · utilidades) y a
   375px no cabían en una fila: `justify-content:space-between` no encoge nada y
   provocaba 189px de scroll horizontal en todas las páginas de tienda.
   Se permite el salto de línea y el lema —que es decorativo— cede primero. */
@media(max-width:760px){
  .ann .wrap{ height:auto; flex-wrap:wrap; gap:8px 12px; padding-block:8px; justify-content:center; }
  .ann .center{ display:none; }                    /* el lema vive también en el hero */
  .ann .util{ gap:10px; }
  .ann-branch select{ max-width:46vw; text-overflow:ellipsis; }
  /* El desplegable de sucursales cuelga del header, cuya altura ya no es fija. */
  .sucwrap{ top:var(--header-h); }
}

/* Target táctil del corazón de favoritos: 36px se queda corto (WCAG 2.5.8). */
@media(pointer:coarse){
  .pcard .fav{ width:44px; height:44px; opacity:1; }
}