/* Carrito de pedidos por WhatsApp.
   Usa los tokens de v2.css (--green, --ink, --radius…) para no inventar una
   paleta nueva: el carrito tiene que parecer parte de la tienda, no un
   agregado. Todo el CSS está acá para poder borrar la función entera
   sacando dos líneas de cada página. */

/* --- Control "Agregar al pedido" / "− N +" ------------------------------- */
/* La tarjeta entera es un <a href="#"> inerte, así que el control vive adentro
   y frena la propagación del clic (ver carrito.js). Nunca se ven el botón y el
   − N + a la vez: el botón desaparece cuando ya hay algo cargado, y vuelve
   cuando la cantidad baja a cero. */
/* El botón y el − N + conviven: el − N + aparece al lado en cuanto hay algo
   cargado, en vez de reemplazarlo. flex-wrap porque en la grilla la tarjeta
   mide ~200px y los dos juntos no entran en un renglón: ahí el − N + baja
   solo. */
.cart-add{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
/* En la grilla la tarjeta mide ~185px: a 14px el texto del botón se parte en
   dos renglones. Un punto menos entra justo, y el − N + baja debajo, que es lo
   único que se puede hacer con ese ancho. En la ficha, que es más ancha, los
   dos van en el mismo renglón. */
.pcard .cart-add .pcard-add{ font-size:13px; padding:8px 12px; width:100%; justify-content:center; }
/* margin-top:auto empuja el botón al PISO de la tarjeta. Las tarjetas de una
   misma fila ya miden todas lo mismo (las estira la grilla), así que con esto
   los botones verdes quedan todos a la misma altura en vez de flotar donde
   termine el título o la ficha técnica, que cambian de largo en cada producto. */
.pcard .cart-add{ margin-top:auto; padding-top:10px; }
.cart-add [hidden]{ display:none !important; }

.pcard-add{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  font:600 14px/1 var(--font-body); color:var(--accent-contrast);
  background:var(--green); border:0; border-radius:999px;
  cursor:pointer; transition:background .18s var(--ease), transform .18s var(--ease);
}
.pcard-add:hover{ background:var(--green-ink); }
.pcard-add:active{ transform:scale(.96); }
.pcard-add:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

/* --- El − N +, el mismo en la tarjeta, el selector y el panel ------------ */
.cart-step{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface); padding:3px;
}
.cart-step-b{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:0; border-radius:999px; background:transparent; cursor:pointer;
  font:500 18px/1 var(--font-body); color:var(--green-ink);
  transition:background .16s var(--ease);
}
.cart-step-b:hover:not(:disabled){ background:var(--green-soft); }
.cart-step-b:disabled{ color:var(--muted); cursor:default; opacity:.5; }
.cart-step-b:focus-visible{ outline:3px solid var(--blue); outline-offset:1px; }
.cart-step-n{
  min-width:26px; text-align:center;
  font:700 15px/1 var(--font-body); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* Confirmación del alta: un latido verde en el control, sin cambiar el texto
   (cambiarlo movía el ancho del botón y saltaba la tarjeta entera). */
@keyframes cart-latido{ 0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)} }
.pcard-add.is-added{ background:var(--green-ink); animation:cart-latido .5s var(--ease); }

/* --- Favoritos: corazón sobre la foto de la tarjeta ---------------------- */
/* Arriba a la izquierda: el precio de los combos (.pricetag) ya usa la
   esquina de arriba a la derecha, y los .gnav de la galería van a los
   costados a media altura, así que este rincón queda libre. */
/* Arriba a la DERECHA, no a la izquierda: arriba a la izquierda va el contador
   de fotos del carrusel (.gcount, "1/6" en assets/v2.css), y el corazón le
   caía justo encima en las 14 tarjetas con galería. Las otras dos esquinas ya
   están ocupadas por el nombre del color y los puntitos. */
.pcard-fav{
  position:absolute; top:8px; right:8px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--ink); cursor:pointer;
  box-shadow:0 2px 8px rgba(28,26,22,.18);
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
/* En los combos el precio va escrito a mano arriba a la derecha, dentro de la
   foto: ahí el corazón baja para no taparlo. La pastilla del precio va de los
   12px a los 46px, así que el corazón arranca en 54 (8 de aire). */
.pcard-ph:has(> .pricetag) .pcard-fav{ top:54px; }
.pcard-fav:hover{ background:#fff; transform:scale(1.06); }
.pcard-fav:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.pcard-fav svg{ width:18px; height:18px; }
.pcard-fav.is-on{ color:var(--red); }
.pcard-fav.is-on svg{ fill:currentColor; }

.cart-fav-ver{ font-size:13px; color:var(--green-ink); text-decoration:underline; padding:4px; }
.cart-fav-ver:hover{ color:var(--ink); }

/* --- El carrito en la barra de navegación ------------------------------- */
/* Va en la barra y NO adentro de .nav-links, porque ese bloque se pliega
   detrás de la hamburguesa en celular. El orden explícito mantiene la barra
   como estaba (logo a la izquierda, links a la derecha) y le agrega el
   carrito como último elemento. */
.nav .corner-logo{ order:1; }
.nav .nav-links{ order:2; margin-left:auto; }
/* En mobile nav-links queda position:absolute (sale del flex) y es la lupa
   la que hereda el margin-left:auto que empuja el grupo de íconos a la
   derecha (ver .nav-search-mobile en v2.css) — por eso comparte el 2. */
.nav .nav-search-mobile{ order:2; }
/* order:3 es el ícono de cuenta (assets/cuenta.css), cuando está presente */
.nav .cart-nav{ order:4; }
.nav .nav-toggle{ order:5; }
@media(max-width:820px){
  /* Con los links plegados, el carrito y la hamburguesa quedan juntos a la
     derecha en vez de repartirse el ancho de la barra. */
  .nav .cart-nav{ margin-left:auto; }
}

.cart-nav{
  position:relative; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  border:0; border-radius:12px; background:transparent; cursor:pointer;
  color:var(--ink); opacity:.8;
  transition:opacity .2s var(--ease), color .2s var(--ease);
}
.cart-nav:hover{ opacity:1; color:var(--green-ink); }
.cart-nav:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.cart-nav svg{ width:24px; height:24px; }
/* El globito con el número: sólo aparece con algo cargado. Un carrito vacío
   con un "0" encima es ruido. */
.cart-nav .cart-n{
  position:absolute; top:2px; right:1px;
  display:none; place-items:center; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--green); color:#fff;
  font:700 11px/1 var(--font-body); font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--bg);
}
.cart-nav.is-on .cart-n{ display:grid; }
/* El nav se pinta blanco sobre el portal y oscuro al scrollear: el carrito
   sigue a los demás elementos de la barra. */
.portal-page .nav .cart-nav{ color:#fff; }
.portal-page .nav.solid .cart-nav{ color:var(--ink); }

/* --- Burbuja flotante: sólo donde no hay barra (Explorar) ---------------- */
.cart-fab{
  position:fixed; right:16px; bottom:86px; z-index:1200;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border:0; border-radius:999px; cursor:pointer;
  font:700 15px/1 var(--font-body); color:#fff; background:var(--green);
  box-shadow:0 6px 24px rgba(28,26,22,.28);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.cart-fab:hover{ background:var(--green-ink); transform:translateY(-2px); }
.cart-fab:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.cart-fab .cart-n{
  display:inline-grid; place-items:center; min-width:24px; height:24px;
  padding:0 7px; border-radius:999px; background:#fff; color:var(--green-ink);
  font-size:13px; font-variant-numeric:tabular-nums;
}
@keyframes cart-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }
.cart-fab.pop{ animation:cart-pop .34s var(--ease); }
.cart-nav.pop .cart-n{ animation:cart-pop .34s var(--ease); }

/* --- El total al lado del contador --------------------------------------
   Para ir viendo cuánto suma el pedido sin abrir el panel. En la barra el
   botón deja de ser cuadrado y crece hacia la izquierda (width:auto), que es
   la única forma de que entre el número sin taparle el ícono. */
.cart-nav:has(.cart-mini:not([hidden])){ width:auto; padding:0 10px 0 4px; gap:7px; }
.cart-mini{
  font:700 13px/1 var(--font-body); font-variant-numeric:tabular-nums;
  white-space:nowrap; letter-spacing:.01em;
}
.cart-nav .cart-mini{ color:var(--green-ink); }
.portal-page .nav .cart-nav .cart-mini{ color:#fff; }
.portal-page .nav.solid .cart-nav .cart-mini{ color:var(--green-ink); }
.cart-fab .cart-mini{ color:#fff; }

/* En celular la barra es logo + carrito + hamburguesa y no sobra el ancho:
   ahí queda sólo el contador y el total se ve al abrir el panel. */
@media(max-width:560px){
  .cart-nav .cart-mini{ display:none; }
  .cart-nav:has(.cart-mini:not([hidden])){ width:44px; padding:0; gap:0; }
}

/* --- Capa oscura + paneles --------------------------------------------- */
.cart-scrim{
  position:fixed; inset:0; z-index:1300; background:rgba(28,26,22,.5);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.cart-scrim.is-on{ opacity:1; pointer-events:auto; }

/* color explícito: en Explorar el <body> es oscuro y pinta el texto de blanco.
   Sin esto, sobre el panel claro quedan invisibles los pocos textos que no
   fijan su propio color (el número de cantidad, por ejemplo). */
.cart-panel{
  position:fixed; z-index:1400; right:0; top:0; bottom:0; width:min(420px,100%);
  display:flex; flex-direction:column; background:var(--surface); color:var(--ink);
  transform:translateX(100%); transition:transform .28s var(--ease);
  box-shadow:-8px 0 32px rgba(28,26,22,.16);
}
.cart-panel.is-on{ transform:none; }
@media (max-width:520px){
  .cart-panel{ top:auto; height:min(88vh,720px); width:100%;
    border-radius:var(--radius) var(--radius) 0 0; transform:translateY(100%); }
}

.cart-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 22px; border-bottom:1px solid var(--line);
}
.cart-head h2{ margin:0; font:600 21px/1.2 var(--font-display); color:var(--ink); }
.cart-x{
  background:0; border:0; cursor:pointer; padding:6px; line-height:1;
  font-size:26px; color:var(--muted); border-radius:8px;
}
.cart-x:hover{ color:var(--ink); }
.cart-x:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

/* UN solo lugar que scrollea. La lista y el formulario bajan juntos: antes
   eran dos cajas con scroll propio y en celular el formulario se comía media
   pantalla, dejando el pedido en una rendija. */
.cart-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.cart-body{ padding:8px 22px; }
.cart-foot{ padding:18px 22px 22px; border-top:1px solid var(--line); background:var(--bg); }
.cart-foot-t{ margin:0 0 12px; font:600 15px/1 var(--font-body); color:var(--ink); }

/* El botón de enviar queda fuera del scroll, siempre a la vista: es la salida
   de la pantalla. */
.cart-enviar{
  flex:none; padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line); background:var(--surface);
  box-shadow:0 -6px 20px rgba(28,26,22,.06);
}

/* Traba el scroll de la página mientras el panel está abierto. Sin esto, al
   llegar al final de la lista el dedo sigue y arrastra el catálogo de atrás:
   es la sensación de dos cosas scrolleando a la vez. */
body.cart-abierto{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

.cart-empty{ padding:44px 12px; text-align:center; color:var(--muted); font-size:15px; }

/* --- Total del pedido ----------------------------------------------------
   Entre la lista y "Tus datos": se mira después de revisar los renglones y
   antes de completar los datos. */
.cart-total{ margin:0 22px; padding:16px 0; border-top:2px solid var(--ink); }
.cart-total-l{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font:600 16px/1.2 var(--font-body); color:var(--ink);
}
.cart-total-l strong{
  font:700 22px/1 var(--font-display); font-variant-numeric:tabular-nums;
}
/* La aclaración de lo que el total NO incluye va pegada al número, no al pie
   del panel: separada, se lee como letra chica y el número queda como una
   promesa cerrada. */
.cart-total-n{ margin:8px 0 0; font:400 13px/1.45 var(--font-body); color:var(--muted); }
/* Cuando NINGÚN renglón tiene precio: no hay número que mostrar, pero la caja
   sigue estando (no desaparece) y el texto se lee sin tener que entrecerrar
   los ojos — es la respuesta a "abrí el carrito y no vi nada sobre el total". */
.cart-total-pend{ margin:0; font-size:14px; color:var(--ink); }

/* --- Renglones del carrito ---------------------------------------------- */
.cart-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item:last-child{ border-bottom:0; }
.cart-item img{
  width:64px; height:64px; flex:none; object-fit:cover;
  border-radius:12px; background:var(--bg); border:1px solid var(--line);
}
.cart-item-in{ flex:1; min-width:0; }
.cart-item-t{ margin:0 0 2px; font:600 15px/1.3 var(--font-body); color:var(--ink); }
.cart-item-v{ margin:0; font-size:13px; color:var(--muted); }
.cart-item-c{ margin:2px 0 0; font:500 12px/1 var(--font-body); color:var(--green-ink); letter-spacing:.03em; }
/* Precio del renglón: con más de una unidad muestra la cuenta ("2 × $3.100 =
   $6.200"), para que el total de abajo se pueda verificar de un vistazo. */
.cart-item-p{
  margin:5px 0 0; font:600 14px/1.2 var(--font-body); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cart-item-p.is-pend{ font-weight:400; font-size:13px; color:var(--muted); font-style:italic; }
.cart-qty{ display:flex; align-items:center; gap:8px; margin-top:9px; }
/* flex:none — si no, flexbox lo comprime a ~30px en pantallas angostas y la
   palabra "Quitar" se desborda del botón. */
.cart-del{
  flex:none; white-space:nowrap;
  margin-left:auto; background:0; border:0; cursor:pointer;
  font-size:13px; color:var(--muted); text-decoration:underline; padding:4px;
}
.cart-del:hover{ color:var(--red); }

/* --- Formulario y botón de envío ---------------------------------------- */
.cart-field{ display:block; margin-bottom:12px; }
.cart-field span{ display:block; margin-bottom:5px; font:600 13px/1 var(--font-body); color:var(--ink); }
.cart-field input, .cart-field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px;
  font:400 15px/1.4 var(--font-body); color:var(--ink); background:var(--surface);
}
.cart-field input:focus, .cart-field textarea:focus{
  outline:0; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft);
}
.cart-field textarea{ resize:vertical; min-height:64px; }

/* --- Método de entrega: Retiro / Envío ----------------------------------- */
.cart-metodo{ display:flex; gap:8px; }
.cart-metodo-b{
  flex:1; padding:10px 8px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--muted); cursor:pointer;
  font:600 13.5px/1.3 var(--font-body); text-align:center;
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.cart-metodo-b:hover{ color:var(--ink); }
.cart-metodo-b.is-on{ background:var(--green-soft); border-color:var(--green); color:var(--green-ink); }
.cart-metodo-b:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

/* display puesto acá arriba de la regla nativa de [hidden]: se repite
   explícito el mismo arreglo que ya usa `.cart-add [hidden]` más arriba,
   para poder esconder el bloque con `envioCampos.hidden = true`. */
.cart-envio-campos{ display:flex; flex-direction:column; }
.cart-envio-campos[hidden]{ display:none !important; }

/* --- assets/envio-form.js: chips reutilizables (sucursal, tamaño, franja,
   fecha) con el mismo lenguaje visual que .cart-metodo-b. ------------------ */
/* .cart-field-hint (cuenta.css) fuerza `display:block`, así que pisa al
   atributo `hidden` nativo — mismo problema que ya resolvió
   `.cart-envio-campos[hidden]` más abajo. franjaHint usa esa clase para
   heredar la tipografía, así que necesita el mismo arreglo. */
.cart-field-hint[hidden]{ display:none !important; }
.cart-field-hint-alerta{ color:var(--red); }
.cart-direccion-maps{
  display:inline-block; margin:-6px 0 10px; font-size:12.5px;
  color:var(--blue); text-decoration:underline;
}
.cart-direccion-maps[hidden]{ display:none !important; }
.cart-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cart-chip{
  padding:9px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink); cursor:pointer;
  font:600 13px/1 var(--font-body); transition:border-color .16s var(--ease), background .16s var(--ease);
}
.cart-chip:hover{ border-color:var(--green); }
.cart-chip.is-on{ background:var(--green-soft); border-color:var(--green); color:var(--green-ink); }
.cart-chip:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.cart-chip.is-off{
  opacity:.45; cursor:not-allowed; text-decoration:line-through;
  border-style:dashed;
}

.cart-dias{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
}
.cart-dias .cart-chip{ flex:none; text-align:center; }
.cart-dias .cart-chip b{ display:block; font-size:15px; }

.cart-suc-nota{
  margin:8px 0 0; padding:9px 12px; border-radius:10px;
  background:var(--bg); color:var(--muted); font-size:12.5px; line-height:1.4;
}

.cart-envio-costo{
  margin:10px 0 0; padding:10px 13px; border-radius:10px;
  background:var(--green-soft); color:var(--green-ink);
  font:600 13.5px/1.4 var(--font-body);
}
.cart-envio-minimo{ margin:6px 0 0; font-size:12.5px; color:var(--muted); }

.cart-recibe-otra{ display:flex; align-items:center; gap:8px; margin:2px 0 12px; }
.cart-recibe-otra input{ width:auto; }
.cart-recibe-otra span{ margin:0; font:400 13.5px/1.3 var(--font-body); color:var(--ink); }

/* Secundario: revisar antes de mandar, no compite con el CTA verde de abajo. */
.cart-ver-completo{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:11px; margin-bottom:8px; border:1px solid var(--line); border-radius:14px;
  cursor:pointer; background:none; color:var(--muted);
  font:600 13.5px/1 var(--font-body);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.cart-ver-completo:hover{ background:var(--bg); color:var(--ink); }
.cart-ver-completo:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

.cart-send{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:15px; border:0; border-radius:14px; cursor:pointer;
  font:700 16px/1 var(--font-body); color:#fff; background:#25d366;
  transition:filter .18s var(--ease);
}
.cart-send:hover{ filter:brightness(.93); }
.cart-send:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.cart-note{ margin:11px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); text-align:center; }

/* --- Selector de variante ------------------------------------------------ */
.cart-pick{
  position:fixed; z-index:1400; left:50%; top:50%; transform:translate(-50%,-46%) scale(.97);
  width:min(460px,calc(100% - 32px)); max-height:82vh; display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 20px 60px rgba(28,26,22,.3);
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.cart-pick.is-on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.cart-pick-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px; padding:18px 22px; overflow-y:auto; overscroll-behavior:contain;
}
/* Ya no es un botón que se elige: es una ficha con su propia cantidad. El
   borde verde marca los colores que ya entraron al pedido, para poder leer de
   un vistazo qué cargó y qué no. */
.cart-opt{
  display:flex; flex-direction:column; gap:7px; padding:7px;
  border:2px solid var(--line); border-radius:14px; background:var(--surface);
  text-align:center; transition:border-color .16s var(--ease);
}
.cart-opt:has(.cart-step:not(.is-cero)){ border-color:var(--green); }
.cart-opt img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:9px; background:var(--bg); }
.cart-opt-n{ font:600 12.5px/1.25 var(--font-body); color:var(--ink); }
/* El precio de cada opción. En un producto con talles cada uno vale distinto,
   y hasta ahora había que elegir a ciegas y enterarse en el total. */
.cart-opt-p{ font:600 12px/1.2 var(--font-body); color:var(--muted); margin-top:-3px; }
/* El código sólo aparece cuando distingue una opción de otra (ver
   pintarOpciones en carrito.js): es el dato con el que el empleado la
   encuentra en el POS. */
.cart-opt-c{ font:400 10.5px/1.2 var(--font-body); color:var(--muted); opacity:.75; }
/* Sin stock de ESTE color puntual (catalogo_tarjetas.colores_sin_stock) —
   no bloquea el − N +, sólo avisa: el mismo criterio que ya usa la cinta
   "Sin stock" de la tarjeta en la grilla (ver admin-catalogo.css). */
.cart-opt.is-agotado img{ filter:grayscale(.6); opacity:.7; }
.cart-opt-agotado{ font:700 10.5px/1 var(--font-body); color:var(--red); }
.cart-opt .cart-step{ align-self:center; border:0; padding:0; background:0; }
.cart-pick-grid.no-fotos{ grid-template-columns:1fr; }
.cart-pick-grid.no-fotos .cart-opt{
  flex-direction:row; align-items:center; text-align:left; gap:12px; padding:9px 9px 9px 15px;
}
.cart-pick-grid.no-fotos .cart-opt-n{ flex:1; font-size:15px; }
.cart-pick-grid.no-fotos .cart-opt-p{ margin:0; }

/* Retomar el pedido desde la portada. Sólo existe si hay algo cargado: sin
   pedido empezado sería un botón que promete algo que no está. La clase is-on
   la maneja pintarCuenta(), igual que en los otros accesos. */
.cart-seguir{ display:none; align-items:center; gap:9px; border:0; cursor:pointer; }
.cart-seguir.is-on{ display:inline-flex; }
/* Con un pedido a medio armar, terminarlo pasa a ser la acción principal y
   "Armá tu pedido" baja a secundario: dos botones verdes del mismo peso, uno
   al lado del otro, no dicen cuál tocar primero. El intercambio de clases lo
   hace pintarCuenta() en assets/carrito.js y no un :has() en CSS, porque el
   navegador no siempre recalcula el :has() cuando la clase que mira se la
   agrega JavaScript después de cargar. */
.cart-seguir .cart-n{
  display:grid; place-items:center; min-width:23px; height:23px; padding:0 6px;
  border-radius:999px; background:rgba(255,255,255,.22);
  font:800 12.5px/1 var(--font-body);
}

/* --- El pedido dentro de la ficha del producto ---------------------------
   La ficha es donde el cliente mira el producto en grande, así que es donde
   tiene que poder pedirlo. Reusa la misma grilla de opciones que el selector
   rápido (.cart-pick-grid / .cart-opt): son la misma pregunta, y si se vieran
   distinto parecerían dos cosas. */
.ficha-pedido{ display:flex; flex-direction:column; gap:10px; margin-bottom:var(--s3); }
.fp-label{ margin:0; font:700 14px/1.3 var(--font-body); color:var(--ink); }

/* Más compacto que el selector rápido: acá las opciones comparten pantalla con
   la foto grande, el precio y la descripción. Un producto de 16 colores con
   fichas de 96px empujaba todo lo demás fuera de la vista, y para elegir un
   color alcanza con verlo.
   Los colores van en una TIRA que se desliza al costado, no en una grilla que
   crece hacia abajo: así un producto de 16 colores ocupa lo mismo que uno de
   3, y la descripción y el precio no se van de la pantalla. */
.ficha-pedido .cart-pick-grid{
  padding:0; max-height:none; gap:7px;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; scrollbar-width:thin;
}
.ficha-pedido .cart-pick-grid::-webkit-scrollbar{ height:5px; }
.ficha-pedido .cart-pick-grid::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:999px;
}
.ficha-pedido .cart-pick-grid .cart-opt{ flex:0 0 66px; scroll-snap-align:start; }
.ficha-pedido .cart-opt{ gap:3px; padding:4px; border-radius:11px; }
.ficha-pedido .cart-opt img{ border-radius:7px; }
.ficha-pedido .cart-opt-n{ font-size:11px; line-height:1.2; }
.ficha-pedido .cart-opt-p{ font-size:10.5px; margin:0; }
.ficha-pedido .cart-opt-c{ font-size:9.5px; }
.ficha-pedido .cart-step{ gap:2px; }
.ficha-pedido .cart-step-b{ width:22px; height:22px; font-size:15px; }
.ficha-pedido .cart-step-n{ min-width:14px; font-size:12px; }
/* Sin fotos (talles) las opciones son renglones apilados, no una tira: son
   pocas, tienen nombre largo y cada una su precio, así que se leen mejor
   anchas y una debajo de la otra. */
.ficha-pedido .cart-pick-grid.no-fotos{
  display:flex; flex-direction:column; overflow:visible; gap:6px; padding-bottom:0;
}
.ficha-pedido .cart-pick-grid.no-fotos .cart-opt{ flex:none; padding:7px 8px 7px 13px; gap:10px; }
.ficha-pedido .cart-pick-grid.no-fotos .cart-opt-n{ font-size:14px; }
.ficha-pedido .cart-pick-grid.no-fotos .cart-step-b{ width:28px; height:28px; }

.ficha-pedido .cart-add{ margin:0; }

/* La preferencia (el color cuando el talle ya se llevó la elección): no cambia
   el código, sólo viaja como texto en el renglón. Por eso son pastillas y no
   fichas con cantidad: no hay nada que contar. */
.fp-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.fp-chip{
  padding:7px 13px; border:1.5px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--muted); cursor:pointer;
  font:600 13px/1 var(--font-body); transition:border-color .16s var(--ease), color .16s var(--ease);
}
.fp-chip:hover{ border-color:var(--green); }
.fp-chip[aria-pressed="true"]{ border-color:var(--green); color:var(--green-ink, var(--green)); background:var(--green-soft, var(--surface)); }

.fp-estado{ margin:0; font:400 13.5px/1.45 var(--font-body); color:var(--muted); }
.fp-ver{
  border:0; background:0; padding:0; cursor:pointer; color:var(--green-ink, var(--green));
  font:700 13.5px/1.45 var(--font-body); text-decoration:underline;
}

/* Pie del selector: cuánto lleva cargado y la salida. */
.cart-pick-foot{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line); background:var(--surface);
}
.cart-pick-total{ flex:1; margin:0; font-size:13.5px; line-height:1.4; color:var(--muted); }
.cart-pick-foot .cart-send{ width:auto; flex:none; padding:13px 28px; }

/* --- Explorar: el visor tipo reel ---------------------------------------
   Explorar es pantalla completa y oscuro, con la info del producto flotando
   abajo. Las dos piezas del carrito necesitan un lugar propio ahí. */

/* El botón, dentro de la fila de acciones de la slide. Blanco sólido y no
   verde: el verde ya es el de "Consultar por WhatsApp", que está al lado, y
   dos pastillas verdes juntas se leen como el mismo botón repetido. Blanco es
   además lo de mayor contraste sobre la foto. */
.cart-add.slide-add{ margin-top:0; }
.slide-add .pcard-add{
  padding:11px 18px;
  font:800 14px/1 'Nunito Sans', system-ui, sans-serif;
  color:#17140f; background:#fff;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
  transition:transform .12s ease, background .18s ease;
}
.slide-add .pcard-add:hover{ background:#fff; transform:translateY(-2px); }
.slide-add .pcard-add.is-added{ background:#cdeed8; }

/* El − N + sobre la foto: mismo vidrio esmerilado que "Compartir", que es su
   vecino en la fila. */
.slide-add .cart-step{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
}
.slide-add .cart-step-b{ color:#fff; }
.slide-add .cart-step-b:hover:not(:disabled){ background:rgba(255,255,255,.22); }
.slide-add .cart-step-b:disabled{ color:rgba(255,255,255,.45); }
.slide-add .cart-step-n{ color:#fff; }

/* La burbuja se muda ARRIBA a la derecha: abajo se superpondría con el texto
   del producto, que ocupa todo el ancho del pie de la slide. Queda al lado de
   la barra de "Explorar", en el hueco que le sobra, y por encima de la primera
   fila de chips (que arranca a los 58px).
   El right con max() la pega al borde derecho de la columna del reel en
   escritorio (donde el contenido va centrado en 460px) y a 12px del borde en
   celular. Con right y no con transform, porque el transform ya lo usa la
   animación de "pop" al agregar. */
/* top:58px y no 12px: la barra .reel-top (assets/explorar.css) ocupa hasta
   ~50px con el botón de categorías pegado al mismo borde derecho — con
   top:12px quedaban superpuestos y tapaba "Categorías". */
.reel-page .cart-fab{
  top:58px; bottom:auto;
  right:max(12px, calc(50% - var(--col, 460px) / 2 + 12px));
  padding:9px 14px; font-size:14px; gap:8px;
}
.reel-page .cart-fab .cart-n{ min-width:21px; height:21px; font-size:12px; }

/* --- Página del pedido (pedido.html) ------------------------------------- */
.ped-wrap{ max-width:760px; margin:0 auto; padding:40px 20px 80px; }
.ped-head{ text-align:center; margin-bottom:32px; }
.ped-head h1{ margin:0 0 6px; font:600 34px/1.15 var(--font-display); color:var(--ink); }
.ped-head p{ margin:0; color:var(--muted); }
.ped-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ped-item{ display:flex; gap:18px; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); }
.ped-item img{
  width:88px; height:88px; flex:none; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); background:var(--bg);
}
.ped-item-in{ flex:1; min-width:0; }
.ped-item h3{ margin:0 0 3px; font:600 17px/1.3 var(--font-body); color:var(--ink); }
.ped-item p{ margin:0; font-size:14px; color:var(--muted); }
.ped-code{
  display:inline-block; margin-top:5px; padding:2px 9px; border-radius:6px;
  background:var(--green-soft); color:var(--green-ink);
  font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em;
}
.ped-q{ font:700 20px/1 var(--font-body); color:var(--ink); white-space:nowrap; }
.ped-meta{
  margin-top:28px; padding:20px 22px; border-radius:var(--radius);
  background:var(--green-soft); color:var(--ink);
}
.ped-meta h2{ margin:0 0 10px; font:600 17px/1 var(--font-body); }
.ped-meta p{ margin:3px 0; font-size:15px; }
.ped-bad{ padding:56px 20px; text-align:center; color:var(--muted); }
@media print{
  .ped-nada, .site-nav, .site-footer{ display:none !important; }
  .ped-item{ break-inside:avoid; }
}