/* Gráfica Brupaz — catálogo público. Estilos propios (derivados del mockup aprobado). */
:root {
  --blue:#364998; --blue-deep:#263573; --blue-soft:#E9ECF7; --sky:#1CA0E3; --wine:#8B1E3F;
  --paper:#F4F6FA; --surface:#FFFFFF; --mint:#EAF6F3; --ink:#191D2B; --muted:#5B6076; --line:#E1E5EE;
  --ok:#1E9E6A; --shadow:0 1px 2px rgba(25,29,43,.06),0 8px 24px rgba(25,29,43,.06); --radius:14px;
}
/* Modo claro por defecto (no seguimos la preferencia del sistema). */
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; padding-bottom:110px; }
/* El padding inferior solo hace falta donde el dock fijo tapa el contenido
   (catálogo). En el carrito dejaba un hueco vacío al final de la página. */
body:not(:has(.dock)) { padding-bottom:24px; }
.tnum { font-variant-numeric:tabular-nums; }
a { color:inherit; }
button { font-family:inherit; cursor:pointer; }
:focus-visible { outline:3px solid var(--sky); outline-offset:2px; border-radius:4px; }

/* Header */
/* En el catálogo, el header y la barra de categorías van dentro de .sticky-top:
   así se pegan juntos sin necesidad de un `top` en píxeles calculado a mano
   (que se rompía al pasar el header a dos filas en móvil). */
.sticky-top { position:sticky; top:0; z-index:40; }
.sticky-top .site-head { position:static; }
.site-head { position:sticky; top:0; z-index:40; background:var(--blue); color:#fff; box-shadow:0 2px 12px rgba(38,53,115,.25); }
.bar { max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px; }
.brand { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.brand-link { display:block; }
.logo-head { display:block; height:34px; width:auto; }
.brand b { font-size:19px; letter-spacing:.14em; font-weight:700; display:block; }
.brand small { display:block; font-size:10px; letter-spacing:.18em; opacity:.75; }
.search { flex:1 1 auto; margin:0 6px; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:10px 15px; }
.search:focus-within { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }
.search-ic { color:#fff; flex-shrink:0; }
.search input { flex:1; min-width:0; background:transparent; border:0; outline:none; color:#fff; font-size:15px; }
.search input::placeholder { color:rgba(255,255,255,.7); }
.cart-link { flex-shrink:0; display:flex; align-items:center; gap:10px; background:#fff; color:var(--blue-deep); border-radius:10px; padding:9px 15px; font-weight:700; font-size:14px; text-decoration:none; }
.search-note { margin:16px 0 0; color:var(--muted); font-size:14px; }
.clear-search { background:none; border:0; color:var(--blue); font-weight:600; font-size:14px; margin-left:6px; padding:0; cursor:pointer; }
.clear-search:hover { text-decoration:underline; }
.cart-link .count { background:var(--wine); color:#fff; border-radius:20px; min-width:20px; height:20px; padding:0 6px; font-size:12px; display:grid; place-items:center; }

/* Barra de categorías */
.rubro-bar { background:var(--surface); border-bottom:1px solid var(--line); z-index:30; }
.rubro-inner { max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.rubro-inner::-webkit-scrollbar { display:none; }
.cat { color:var(--muted); font-size:14px; font-weight:600; padding:14px 8px; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px; text-decoration:none; }
.cat.active { color:var(--blue); border-bottom-color:var(--blue); }

/* Contenido */
.wrap { max-width:1180px; margin:0 auto; padding:22px 20px; }
.intro { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between; margin-bottom:6px; }
.intro h1 { margin:0; font-size:26px; letter-spacing:-.01em; }
.intro p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--sky); font-weight:700; margin-bottom:4px; }
.min-note { background:var(--mint); border:1px solid var(--line); border-radius:12px; padding:10px 15px; font-size:13px; display:flex; align-items:center; gap:8px; }
.min-note b { color:var(--blue); }

/* Grilla de productos */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px; margin-top:22px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease; }
.card[hidden] { display:none; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(25,29,43,.12); }
.thumb { position:relative; aspect-ratio:4/3; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue-soft),var(--mint)); color:var(--blue); font-weight:800; font-size:30px; letter-spacing:-.04em; font-family:Georgia,serif; overflow:hidden; }
.thumb.has-photo { background:#fff; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-sm.has-photo img, .cart-row .thumb img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.card-body { padding:13px 15px 15px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-cat { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.card-name { font-size:15px; font-weight:650; line-height:1.3; margin:0; }
.card-desc { font-size:12px; color:var(--muted); }
.price-desde { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
/* Tabla de tres precios de la card: Unidad / Paquete / Bulto (spec 2026-10-06 §4). */
.ptable { margin:8px 0 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:12.5px; }
.ptable div { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 8px; padding:6px 10px; border-top:1px solid var(--line); }
.ptable div:first-child { border-top:0; }
.ptable dt { margin:0; color:var(--muted); }
.ptable dd { margin:0; font-weight:750; white-space:nowrap; }
.ptable .sel { background:var(--blue-soft); }
.ptable .sel dd { color:var(--blue-deep); }
.ptable .price-desde { font-size:10.5px; }
/* Selector de unidad en la card de un producto sin modelos. */
.uni-card { display:flex; margin-top:10px; border:1.5px solid var(--line); border-radius:9px; overflow:hidden; }
.uni-card button { flex:1; min-width:0; background:var(--surface); border:0; padding:8px 4px; font:inherit; font-size:12.5px; font-weight:700; color:var(--muted); }
.uni-card button + button { border-left:1.5px solid var(--line); }
.uni-card button[aria-pressed="true"] { background:var(--blue); color:#fff; }
.uni-card button:not([aria-pressed="true"]):hover { background:var(--blue-soft); color:var(--blue-deep); }

/* Selector – 0 + */
.stepper { display:flex; align-items:stretch; margin-top:12px; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; }
.stepper button { width:44px; background:var(--surface); border:0; font-size:22px; font-weight:600; color:var(--blue); display:grid; place-items:center; }
.stepper button:hover { background:var(--blue-soft); }
.stepper .qty { flex:1; display:grid; place-items:center; font-weight:700; font-size:16px; border-left:1.5px solid var(--line); border-right:1.5px solid var(--line); }
.stepper.has-qty { border-color:var(--blue); }

/* Dock inferior con medidor */
.dock { position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(25,29,43,.1); padding:12px 20px calc(12px + env(safe-area-inset-bottom)); }
.dock-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.meter-wrap { flex:1; min-width:220px; }
.meter-top { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.meter-top .goal { color:var(--muted); }
.meter { height:10px; background:var(--blue-soft); border-radius:20px; overflow:hidden; }
.meter i { display:block; height:100%; width:0%; border-radius:20px; background:linear-gradient(90deg,var(--sky),var(--blue)); transition:width .35s ease; }
.meter.done i { background:linear-gradient(90deg,var(--ok),#17b877); }
.dock-total { text-align:right; }
.dock-total .lbl { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.dock-total .amt { font-size:22px; font-weight:800; }

/* Botones */
.cta { background:var(--blue); color:#fff; border:0; border-radius:11px; padding:13px 22px; font-weight:700; font-size:15px; box-shadow:var(--shadow); text-decoration:none; display:inline-block; }
.cta:hover { background:var(--blue-deep); }
.cta.disabled { background:var(--line); color:var(--muted); pointer-events:none; box-shadow:none; }
.link-back { color:var(--blue); font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; gap:6px; align-items:center; margin-bottom:8px; }

/* Página de carrito */
.cart-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:28px; align-items:start; }
.cart-list { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cart-row { display:flex; gap:14px; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line); }
.cart-row:last-child { border-bottom:0; }
.cart-row .thumb-sm { width:52px; height:52px; border-radius:10px; flex-shrink:0; font-size:18px; }
.cart-row .info { flex:1; min-width:0; }
.cart-row .info .n { font-weight:650; font-size:14px; }
.cart-row .info .u { font-size:12px; color:var(--muted); }
.cart-row .info .v { font-size:12.5px; font-weight:700; color:var(--blue); }
.cart-row .lt { font-weight:700; font-size:15px; }
.cart-row .info .stepper { margin-top:8px; max-width:132px; }
.cart-row .info .stepper button { width:38px; font-size:19px; }
.cart-row .info .stepper .qty { font-size:14px; }
.cart-end { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.rm-btn { background:none; border:0; padding:0; font-size:12px; color:var(--muted); cursor:pointer; text-decoration:underline; }
.rm-btn:hover { color:#c0392b; }
.checkout { position:sticky; top:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.checkout h3 { margin:0 0 4px; font-size:17px; }
.sum-row { display:flex; justify-content:space-between; font-size:14px; padding:7px 0; color:var(--muted); }
.sum-row.grand { color:var(--ink); font-weight:800; font-size:20px; border-top:1px solid var(--line); margin-top:6px; padding-top:12px; }
.field { margin-top:14px; }
.field label { display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
.field input { width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-size:14px; }
.field input:focus { border-color:var(--blue); outline:none; }
.field textarea { width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; font-size:14px; resize:vertical; }
.field textarea:focus { border-color:var(--blue); outline:none; }
/* Formulario "Contactar a un comercial": una columna angosta y centrada. */
.contacto { max-width:520px; }
.contacto-lead { color:var(--muted); margin:0 0 16px; font-size:14px; }
.contacto-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:4px 20px 20px; }
.contacto-form .cta { width:100%; margin-top:16px; }
.checkout .cta { width:100%; margin-top:16px; text-align:center; }
.block-msg { border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:13px; margin-top:14px; display:flex; gap:8px; background:var(--mint); }
.block-msg.ok { background:color-mix(in srgb,var(--ok) 12%,transparent); }
.block-msg b { color:var(--wine); }
.block-msg.ok b { color:var(--ok); }
/* Aviso de envío gratis a CABA y Conurbano al alcanzar el mínimo (spec 2026-10-06 §5). */
.block-msg.ship { background:color-mix(in srgb,var(--ok) 8%,var(--surface)); border-color:color-mix(in srgb,var(--ok) 35%,var(--line)); }
.block-msg.ship b { color:var(--ok); }
.note-hint { font-size:12px; color:var(--muted); margin-top:12px; }
.empty { padding:50px 20px; text-align:center; color:var(--muted); }
.confirmed { text-align:center; padding:40px 16px; }
.confirmed .ic { width:64px; height:64px; border-radius:50%; background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok); display:grid; place-items:center; font-size:32px; margin:0 auto 14px; }
.confirmed h1 { margin:0 0 8px; }
.confirmed p { color:var(--muted); max-width:360px; margin:0 auto 18px; }
.alert { background:color-mix(in srgb,var(--wine) 10%,transparent); border:1px solid var(--wine); color:var(--wine); border-radius:10px; padding:11px 14px; font-size:14px; margin-bottom:16px; }

/* --- Opciones de producto (diseños dentro de una misma foto) --- */
.opt-btn { margin-top:12px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface); color:var(--blue); border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.opt-btn:hover { background:var(--blue-soft); }
.opt-btn.has-qty { border-color:var(--blue); background:var(--blue-soft); }
.opt-hint { margin:6px 0 0; font-size:12px; color:var(--muted); }

.opt-modal { position:fixed; inset:0; z-index:60; background:rgba(25,29,43,.55); display:none; place-items:center; padding:16px; }
.opt-modal.abierto { display:grid; }
.opt-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 24px 60px rgba(25,29,43,.3); width:min(720px,100%); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
.opt-head { display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.opt-head .t { flex:1; min-width:0; }
.opt-head h3 { margin:0; font-size:17px; line-height:1.25; }
.opt-head .sub { font-size:12.5px; color:var(--muted); }
.opt-head .pu { font-size:17px; font-weight:800; margin-top:4px; }
.opt-x { background:none; border:0; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:4px 7px; border-radius:8px; }
.opt-x:hover { background:var(--blue-soft); color:var(--blue); }
.opt-cols { display:grid; grid-template-columns:230px 1fr; overflow:hidden; flex:1; min-height:0; }
.opt-foto { border-right:1px solid var(--line); padding:16px; background:var(--paper); display:flex; flex-direction:column; gap:8px; }
.opt-foto img { width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; }
.opt-foto .cap { font-size:11.5px; color:var(--muted); }
.opt-list { overflow-y:auto; padding:6px 18px; }
.opt-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px 12px; padding:10px 0; border-bottom:1px solid var(--line); }
.opt-row:last-child { border-bottom:0; }
.opt-name { flex:1; font-size:14px; font-weight:600; line-height:1.25; }
/* Precio por diseño: solo aparece cuando los modelos NO valen todos lo mismo. */
.opt-precio { font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
/* Buscador dentro del modal: aparece con más de 12 diseños (las fajas son 89). */
.opt-buscar { position:sticky; top:0; z-index:1; width:100%; margin:6px 0 4px; padding:9px 12px;
  border:1.5px solid var(--line); border-radius:10px; font:inherit; font-size:14px; background:var(--surface); }
.opt-buscar:focus { outline:none; border-color:var(--blue); }
.opt-mini { display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:9px; overflow:hidden; flex-shrink:0; }
.opt-mini button { width:36px; min-height:36px; background:var(--surface); border:0; color:var(--blue); font-size:18px; font-weight:600; cursor:pointer; }
.opt-mini button:hover { background:var(--blue-soft); }
.opt-mini .q { min-width:34px; display:grid; place-items:center; font-weight:700; font-size:14px; border-left:1.5px solid var(--line); border-right:1.5px solid var(--line); }
.opt-mini.on { border-color:var(--blue); }

/* Selector de unidad de compra dentro del modal (solo si el modelo tiene bulto). */
.uni { grid-column:1/-1; display:flex; border:1.5px solid var(--line); border-radius:9px; overflow:hidden; width:max-content; max-width:100%; }
.uni button { background:var(--surface); border:0; padding:7px 14px; font:inherit; font-size:12.5px; font-weight:700; color:var(--muted); line-height:1.25; text-align:left; }
.uni button + button { border-left:1.5px solid var(--line); }
.uni button small { display:block; font-size:11px; font-weight:500; opacity:.8; }
.uni button[aria-pressed="true"] { background:var(--blue); color:#fff; }
.uni button:not([aria-pressed="true"]):hover { background:var(--blue-soft); color:var(--blue-deep); }

.opt-foot { border-top:1px solid var(--line); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.opt-foot .res { font-size:13px; color:var(--muted); }
.opt-foot .res b { color:var(--ink); font-size:16px; }

/* ─── Responsive ───────────────────────────────────────────────────────────
   Tres cortes: 980px (carrito a una columna), 700px (header a dos filas) y
   640px (compactado general para teléfonos). */

@media (max-width:860px) {
  .cart-layout { grid-template-columns:minmax(0,1fr); }
  /* Sin la columna lateral el resumen se estiraba a todo el ancho (botón de
     confirmar de más de 700px). Se limita y se centra. */
  .checkout { position:static; max-width:520px; margin-inline:auto; width:100%; }
}

@media (min-width:641px) and (max-width:980px) {
  /* En tablet, el mínimo de 232px dejaba solo 2 columnas con tarjetas enormes. */
  .grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
}

@media (max-width:700px) {
  /* Header en dos filas: marca + carrito arriba, buscador ocupando todo el ancho.
     En una sola fila el buscador se comprimía hasta empujar "Mi pedido" fuera
     de la pantalla y forzar scroll horizontal. */
  .bar { flex-wrap:wrap; padding:12px 16px; gap:10px 12px; }
  .brand { flex:1 1 auto; min-width:0; }
  .cart-link { order:2; }
  .search { order:3; flex:1 0 100%; margin:0; }
  .logo-head { height:26px; }
  .brand small { font-size:9px; letter-spacing:.14em; }
  /* El header deja de estar pegado (ocupa demasiado alto en teléfono); la barra
     de categorías pasa a pegarse sola arriba de todo.
     `display:contents` saca al wrapper del layout: si quedara como caja, la barra
     de categorías solo podría pegarse dentro de él (unos pocos píxeles) y se
     iría con el scroll. */
  .sticky-top { display:contents; }
  .site-head { position:static; }
  .rubro-bar { position:sticky; top:0; }
  .rubro-inner { padding:0 16px; }
}

@media (max-width:640px) {
  .wrap { padding:18px 16px; }
  h1 { font-size:24px; }
  .intro h1 { font-size:22px; }
  .intro { gap:12px; }
  .min-note { width:100%; }

  /* Dos productos por fila: una sola columna deja tarjetas enormes y obliga a
     scrollear mucho para ver el catálogo. */
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
  .card-body { padding:10px 11px 12px; }
  .card-name { font-size:14px; }
  .card-desc { font-size:11px; }
  /* Dos cards por fila (~170 px): la tabla y el selector se compactan. */
  .ptable { font-size:11.5px; }
  .ptable div { padding:5px 8px; }
  .uni-card button { font-size:11px; padding:8px 2px; }
  .stepper { margin-top:10px; }
  .stepper button { width:auto; flex:1 0 34px; min-height:40px; font-size:20px; }
  .stepper .qty { flex:0 1 auto; min-width:34px; padding:0 4px; font-size:15px; }

  /* Dock: medidor en una fila y total + CTA en la siguiente. */
  .dock { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .dock-inner { gap:10px 12px; }
  .meter-wrap { flex:1 0 100%; min-width:0; }
  .meter-top { font-size:12px; }
  .dock-total { flex:1 1 auto; text-align:left; }
  .dock-total .amt { font-size:20px; }
  .dock-inner .cta { flex:0 0 auto; padding:12px 18px; font-size:14px; }
  body { padding-bottom:140px; }

  /* Lightbox: flechas más cerca del borde para no tapar la foto. */
  .lb-img { max-width:94vw; }
  .lb-prev { left:8px; } .lb-next { right:8px; }
}

@media (max-width:400px) {
  /* "Mínimo $ X" es redundante con el texto del medidor y en pantallas muy
     angostas obliga a las dos etiquetas a partirse en dos líneas. */
  .meter-top .goal { display:none; }
}

@media (max-width:560px) {
  /* Fila del carrito en dos renglones: miniatura + datos arriba, subtotal y
     "Quitar" abajo. En línea quedaban tres bloques peleando por ~200px. */
  .cart-row { display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-areas:'th info' 'end end'; gap:8px 12px; padding:14px 16px; }
  .cart-row .thumb-sm { grid-area:th; }
  .cart-row .info { grid-area:info; }
  .cart-end { grid-area:end; flex-direction:row; align-items:center; justify-content:space-between; }
  .rm-btn { padding:6px 0; }
  .checkout { padding:16px; }
  .opt-modal { padding:0; place-items:end stretch; }
  .opt-box { max-height:94vh; border-radius:var(--radius) var(--radius) 0 0; }
  .opt-cols { grid-template-columns:1fr; }
  .opt-foto { border-right:0; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; }
  .opt-foto img { width:110px; flex-shrink:0; }
  /* En móvil la foto va al costado del texto: el botón de zoom la reemplaza
     como caja, así que toma él el ancho fijo y la img vuelve a llenarlo. */
  .opt-foto-zoom { width:110px; flex-shrink:0; }
}

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* Lightbox de galería (catálogo público) */
.lightbox { position: fixed; inset: 0; background: rgba(25,29,43,.85); display: none; align-items: center; justify-content: center; z-index: 100; }
.lightbox.abierto { display: flex; }
.lb-img { max-width: 90vw; max-height: 85vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
/* z-index en los controles: en pantallas chicas la imagen (94vw) queda encima
   de las flechas por orden del DOM y las tapa. */
.lb-cerrar { position: absolute; top: 16px; right: 20px; z-index: 2; font-size: 34px; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; color: #fff; background: rgba(25,29,43,.55); border: none; padding: 0; width: 56px; height: 56px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
.lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-size: 13px; font-weight: 600; background: rgba(25,29,43,.6); padding: 4px 12px; border-radius: 999px; }
.lb-nav[hidden], .lb-count[hidden] { display: none; }
.foto-badge { position: absolute; top: 8px; left: 8px; background: rgba(25,29,43,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

/* Lupa sobre la miniatura: pista de que la foto amplía (y acceso por teclado) */
.thumb.zoomable { cursor: zoom-in; }
.thumb-zoom { position: absolute; bottom: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: none; border-radius: 999px; background: rgba(25,29,43,.6); color: #fff; cursor: zoom-in; opacity: .85; transition: opacity .16s ease, background .16s ease; }
.card:hover .thumb-zoom, .thumb-zoom:focus-visible { opacity: 1; background: rgba(25,29,43,.85); }

/* Foto del modal de opciones: mismo gesto de ampliar */
/* Sin width: la columna es flex, el botón estira solo (y en móvil manda la
   regla de 110px del media query, que si no perdería contra esta). */
.opt-foto-zoom { position: relative; display: block; padding: 0; border: none; background: none; cursor: zoom-in; }
.opt-foto-zoom img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.opt-foto-zoom .zoom-ic { position: absolute; bottom: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: rgba(25,29,43,.6); color: #fff; font-size: 15px; }

/* --- Aviso flotante (p.ej. la API rechaza un + del carrito) --- */
.cart-toast { position:fixed; left:50%; bottom:96px; transform:translate(-50%,12px); z-index:80; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--wine); color:var(--wine); border-radius:10px; padding:11px 16px; font-size:14px; font-weight:600; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.cart-toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 640px) {
  .lb-nav { width: 44px; height: 44px; }
  .lb-nav svg { width: 18px; height: 18px; }
  /* La foto del modal es de 110px: la lupa tiene que achicarse con ella. */
  .opt-foto-zoom .zoom-ic { width: 22px; height: 22px; font-size: 12px; bottom: 5px; right: 5px; }
}