/* ============================================================
   Momentos Artesanales — Carrito de compras
   ------------------------------------------------------------
   Archivo nuevo, no toca css/style.css. Debe cargarse DESPUÉS de
   style.css (usa sus variables: --trad, --cream, --ink, --ink-soft,
   --line, --paper, --radius-sm, --radius-lg, --shadow, --font-display,
   --font-body). Ver comentario en js/cart.js sobre cómo activarlo.
   ============================================================ */

/* ---------- Botón carrito en el header ---------- */
.cart-toggle{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
  background: var(--paper); color: var(--ink); cursor:pointer; flex-shrink:0; padding:0;
  transition: border-color .18s ease, transform .18s ease;
}
.cart-toggle:hover{ border-color: var(--trad); transform: translateY(-1px); }
.cart-toggle svg{ width:20px; height:20px; }
.cart-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background: var(--trad); color:#fff; font-size:11px; font-weight:700;
  font-family: var(--font-body);
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow: 0 0 0 2px var(--paper);
}

/* ---------- Selector de variante + contador +/- en las tarjetas ---------- */
.cart-add-wrap{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.cart-variant-select{
  flex:1; min-width:0; font-family: var(--font-body); font-size:13px; padding:8px 10px;
  border-radius: var(--radius-sm); border:1.5px solid var(--line); background: var(--cream); color: var(--ink);
}
.cart-variant-select:focus{ outline:none; border-color: var(--trad); }

/* Contador +/- que agrega directo al carrito (sin botón "Agregar" aparte).
   Los botones +/- son siempre verdes, como el resto de los CTA de WhatsApp. */
.cart-stepper{
  display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto;
}
.cart-step-btn{
  width:30px; height:30px; border-radius:50%; border:none; background:#25D366; color:#fff;
  font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; flex-shrink:0; transition: background .15s ease;
}
.cart-step-btn:hover{ background:#1DA851; }
.cart-step-qty{
  min-width:22px; text-align:center; font-family: var(--font-body); font-weight:700; font-size:14px; color: var(--ink);
}
/* Antes del primer "+", solo se ve el botón verde (sin restar ni cantidad en 0). */
.cart-stepper:not(.has-qty) .cart-step-minus,
.cart-stepper:not(.has-qty) .cart-step-qty{ display:none; }

/* ---------- Overlay ---------- */
.cart-overlay{
  position:fixed; inset:0; background: rgba(43,33,24,.45); opacity:0; pointer-events:none;
  transition: opacity .25s ease; z-index:150;
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }

/* ---------- Drawer ---------- */
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 92vw);
  background: var(--paper); z-index:151; box-shadow: -12px 0 32px -12px rgba(43,33,24,.35);
  transform: translateX(100%); transition: transform .3s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.is-open{ transform: translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.cart-drawer-head h3{ margin:0; font-size:20px; }
.cart-close{
  background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color: var(--ink-soft); padding:0;
}
.cart-close:hover{ color: var(--trad); }

.cart-items{ flex:1; overflow-y:auto; padding:6px 24px; }
.cart-empty{ padding:24px 0; text-align:center; color: var(--ink-soft); font-size:14px; }

.cart-item{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:10px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.cart-item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cart-item-name{ font-weight:600; font-size:14.5px; }
.cart-item-variant{ font-size:12.5px; color: var(--ink-soft); }
.cart-item-qty{ display:flex; align-items:center; gap:8px; }
.qty-btn{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); background: var(--cream);
  cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0;
  color: var(--ink);
}
.qty-btn:hover{ border-color: var(--trad); color: var(--trad); }
.qty-btn[data-act="plus"]{ background:#25D366; border-color:#25D366; color:#fff; }
.qty-btn[data-act="plus"]:hover{ background:#1DA851; border-color:#1DA851; color:#fff; }
.cart-item-remove{
  background:none; border:none; font-size:18px; color: var(--ink-soft); cursor:pointer; padding:4px;
}
.cart-item-remove:hover{ color: var(--trad); }

.cart-drawer-foot{ padding:18px 24px 26px; border-top:1px solid var(--line); flex-shrink:0; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:16px; }
.cart-total-row strong{ font-family: var(--font-display); font-size:22px; }
.cart-checkout-btn{ margin-bottom:12px; }
.cart-checkout-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.cart-note{ font-size:12px; color: var(--ink-soft); margin:0; line-height:1.5; }

body.cart-open{ overflow:hidden; }

@media (max-width:520px){
  .cart-drawer{ width:100%; }
  .header-actions .cart-toggle{ width:36px; height:36px; }
}