/* =============================================================
   KOBU · carrito — hoja compartida por LAS DOS páginas
   -------------------------------------------------------------
   Vive aparte porque el panel del pedido es UNO SOLO: lo dibuja
   tienda-cart.js y se carga igual en la tienda mobile y en el
   catálogo A4 de escritorio. Antes había dos carritos con dos
   estilos y dos juegos de reglas, y se fueron separando solos.

   Depende de tokens.css (colores de marca) y de que la página
   defina --rule, --gain y --gain-soft, que difieren entre las dos
   hojas a propósito.
   ============================================================= */
/* ============================================================
   CARRITO PROPIO (tienda-cart.js) — comprobante
   ============================================================ */
.t-cart-overlay{
  position: fixed; inset: 0; background: rgba(20,20,25,.45); z-index: 700;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.t-cart-overlay.is-open{ opacity: 1; pointer-events: auto; }
.t-cart{
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 20px 20px 0 0; max-height: 90vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .22s ease;
}
.t-cart-overlay.is-open .t-cart{ transform: translateY(0); }
.t-cart__inner{ padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.t-cart__head{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; margin-bottom: 10px; }
.t-cart__head h3{ font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0; }
.t-cart__close{ border: none; background: none; font-size: 20px; padding: 8px; cursor: pointer; color: var(--ink-2); }
.t-cart__list{ list-style: none; margin: 0 0 12px; padding: 0; }
.t-cart__row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.t-cart__info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-cart__name{ font-size: 15px; font-weight: 700; color: var(--ink); }
.t-cart__size{ font-size: 12.5px; color: var(--kobu-blue-2); font-weight: 700; }
.t-cart__right{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.t-cart__stepper{ display: inline-flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; }
.t-cart__stepper button{ width: 40px; height: 40px; border: none; background: var(--kobu-gray-soft); font-size: 18px; font-weight: 800; cursor: pointer; color: var(--ink); }
.t-cart__stepper span{ min-width: 28px; text-align: center; font-weight: 800; }
.t-cart__sub{ font-family: var(--serif); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }
.t-cart__empty{ font-size: 14.5px; color: var(--ink-2); padding: 28px 4px; text-align: center; line-height: 1.6; }
.t-cart__prog.is-complete .t-cart__prog-fill{ background: var(--gain); }
.t-cart__prog.is-complete .t-cart__prog-label{ color: var(--gain); font-weight: 700; }
.t-cart__send{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 14px; background: #25d366; color: #fff; font-weight: 800; font-size: 15.5px; text-decoration: none; margin-top: 12px; }
.t-cart__ship.is-complete{ color: var(--gain); background: var(--gain-soft); border-color: var(--gain); font-size: 14px; }
.t-cart__note{ margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.4; }
.t-cart__opt.is-on{ border-color: var(--kobu-blue-2); background: var(--kobu-blue-soft); }

/* ============================================================
   PV26 · agregados del panel único
   ============================================================ */

/* Botón flotante — sólo en el catálogo A4, donde no hay barra inferior.
   En la tienda mobile el acceso al pedido es #t-bar. */
.t-cartfab{
  position: fixed; right: 20px; bottom: 20px; z-index: 690;
  display: none; align-items: center; gap: 9px;
  min-height: 54px; padding: 0 20px 0 17px;
  border: none; border-radius: 999px;
  background: var(--kobu-blue-2); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 800;
  cursor: pointer; box-shadow: 0 8px 26px -8px rgb(0 0 0 / .45);
}
.t-cartfab.has-items{ display: flex; }
.t-cartfab__n{
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--kobu-blue-2); font-size: 13px; font-weight: 900;
}
@media (max-width: 860px){ .t-cartfab{ display: none !important; } }

.t-cart__unit{ font-size: 11.5px; color: var(--ink-3); }

/* saldo de regalo: la meta que sigue después del mínimo */
.t-cart__gift{
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--kobu-yellow-soft, oklch(0.965 0.055 92));
  border: 1.5px solid var(--kobu-yellow, oklch(0.93 0.11 92));
  border-radius: 12px; padding: 11px 12px; margin-bottom: 12px;
}
.t-cart__gift.is-on{ border-width: 2px; }
.t-cart__gift-ico{ flex-shrink: 0; font-size: 18px; line-height: 1.15; }
.t-cart__gift-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-cart__gift-txt strong{ font-size: 14px; font-weight: 900; color: var(--kobu-yellow-ink, oklch(0.42 0.08 75)); }
.t-cart__gift-txt span{ font-size: 12px; color: var(--ink-2); line-height: 1.35; }

/* detalle del cálculo: ningún número tiene que aparecer de la nada */
.t-cart__detalle{ display: flex; flex-direction: column; gap: 5px; margin: 12px 0 0; }
.t-cart__drow{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.t-cart__drow b{ font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-cart__drow.is-gift b{ color: var(--gain); }
.t-cart__payopt.is-on{ border-color: var(--kobu-blue-2); border-width: 2px; background: var(--kobu-blue-soft); }
.t-cart__payopt.is-on:first-child{ border-color: var(--gain); background: var(--gain-soft); }

/* desglose: el descuento del catálogo se ve, no aparece un número ya bajado */
.t-cart__drow.is-off b{ color: var(--kobu-blue-2); }

/* ============================================================
   PV26 · RONDA 7 — un renglón por descuento
   ------------------------------------------------------------
   El desglose tenía dos líneas fijas de 5% y todo lo demás caía
   adentro: un pack mostraba "−$23.400" rotulado 5% sobre
   $123.000, que es 19%. Ahora cada origen tiene su renglón y su
   color, el mismo que ya usa en la vitrina — naranja para packs
   y combos, rojo para liquidación.
   ============================================================ */
.t-cart__drow.is-pack b{ color: var(--pack); }
.t-cart__drow.is-liq  b{ color: var(--liq); }

/* ================================================================
   EL PANEL SIMPLE (16/8/2026)

   El anterior pedía leer, de arriba abajo: una barra de progreso al
   mínimo, una tarjeta de sugerencia con su botón, una caja de saldo de
   regalo, dos tarjetas de entrega de tres renglones cada una, un
   desglose de seis líneas, DOS bloques de forma de pago con tres
   números cada uno, un cartel de "ahorrás 10% más" y otro de "estás
   ahorrando". Nueve bloques antes del botón de pedir — y el mayorista
   se trababa justo ahí, con el pedido armado.

   Ahora: productos → regalo → desglose → TOTAL → envío → pedir.
   ================================================================ */

/* El total, que es lo que se busca al abrir el panel. Sin el envío
   adentro: el flete tiene su switch abajo y metido acá hacía saltar el
   número grande cada vez que se tocaba retiro/envío. */
.t-cart__total{
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 10px;
  border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 10px;
}
.t-cart__total-lbl{ font-size: 16px; font-weight: 800; color: var(--ink); }
.t-cart__total-val{
  font-family: var(--serif); font-size: 27px; font-weight: 800; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.t-cart__total-sub{ grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }

/* El envío: dos pastillas del mismo ancho. Lo único que se compara es
   el precio, así que es lo único que va en negrita. */
.t-cart__envio{ display: flex; gap: 8px; margin: 12px 0 4px; }
.t-cart__pill{
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1.5px solid var(--rule); border-radius: 12px;
  padding: 9px 11px; cursor: pointer; background: #fff;
  font-size: 12.5px; color: var(--ink-2);
  transition: border-color .14s ease, background .14s ease;
}
.t-cart__pill.is-on{ border-color: var(--kobu-blue-2); background: var(--kobu-blue-soft); color: var(--ink); }
.t-cart__pill input{ position: absolute; opacity: 0; pointer-events: none; }
.t-cart__pill em{ font-style: normal; color: var(--ink-3); font-size: 11px; display: block; }
.t-cart__pill b{ font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.t-cart__pill:focus-within{ outline: 2px solid var(--kobu-blue-2); outline-offset: 2px; }

/* El mínimo: un renglón, y sólo cuando falta. */
.t-cart__min{ margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.t-cart__min b{ color: var(--ink); }

/* La seña salió del panel y quedó como una línea: se arregla por
   WhatsApp, que es donde se arreglaba igual. */
.t-cart__sena{ margin: 8px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.4; }

/* El regalo GANADO, en caja y con el monto grande. Como renglón del
   desglose, $100.000 de regalo se leían igual que un descuento de
   $2.000: el premio más grande de la tienda entraba por el mismo lugar
   que cualquier otra resta. Sin alcanzar todavía, la caja queda en su
   versión chica — ahí el número es una meta, no un logro. */
.t-cart__gift.is-on{ display: flex; align-items: center; gap: 12px; }
.t-cart__gift.is-on .t-cart__gift-txt{ display: flex; flex-direction: column; gap: 1px; }
.t-cart__gift-lbl{ font-size: 12px; font-weight: 800; color: var(--kobu-yellow-ink); text-transform: uppercase; letter-spacing: .06em; }
.t-cart__gift-monto{
  font-family: var(--serif); font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--kobu-yellow-ink); font-variant-numeric: tabular-nums;
}
.t-cart__gift-sub{ font-size: 12px; color: var(--ink-2); }
.t-cart__gift-next{ font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }