/* ==========================================================================
   Savalan Kebab — Mini-cart drawer (Phase 1)
   Depends on design-system.css tokens. All classes `svk-` prefixed.
   ========================================================================== */

/* The Xtra theme does NOT set a global box-sizing:border-box, so our
   width/min-width + padding components overflow. Enforce border-box on all our
   drawer/trigger/toast elements. */
.svk-drawer, .svk-drawer *,
.svk-scrim,
.svk-bag-trigger, .svk-bag-count,
.svk-toaster, .svk-toast, .svk-toast *{box-sizing:border-box}

/* ---- Floating trigger (replaces WP Cafe floating cart) ---- */
.svk-bag-trigger{
  position:fixed; z-index:99990; right:20px; bottom:75px;  /* matches WP Cafe cart position (clears scroll-to-top) */
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--sg-flame); color:var(--sg-ink); box-shadow:0 12px 26px -8px rgba(14,21,14,.42);
  display:grid; place-items:center; transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.svk-bag-trigger:hover{background:var(--sg-flame-700); transform:translateY(-2px)}
.svk-bag-trigger:focus-visible{outline:2px solid var(--teal-900); outline-offset:3px}
.svk-bag-count{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--teal-900); color:#fff; border:2px solid #fff;
  font-family:var(--f-slab); font-weight:700; font-size:11px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.svk-bag-count.is-empty{display:none}
/* Xtra core.css has a global `[data-count]:after{content:attr(data-count)}` badge
   rule that double-rendered our count. Neutralise it on our badge. */
.svk-bag-count::before,.svk-bag-count::after{content:none !important;display:none !important}
.svk-bag-trigger.svk-pulse{animation:svk-pulse .34s var(--ease)}
@keyframes svk-pulse{0%{transform:scale(1)}45%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ---- Scrim ---- */
.svk-scrim{
  position:fixed; inset:0; z-index:100000; background:rgba(31,20,25,.42);
  opacity:0; transition:opacity var(--dur-3) var(--ease);
}
.svk-scrim.is-open{opacity:1}

/* ---- Drawer shell ---- */
.svk-drawer{
  position:fixed; z-index:100001; background:var(--sg-cream);
  display:flex; flex-direction:column; box-shadow:0 16px 40px rgba(31,20,25,.20);
  transition:transform var(--dur-3) var(--ease);
  /* desktop: right panel */
  top:0; right:0; height:100%; width:100%; max-width:420px;
  border-left:1px solid var(--sg-line);
  transform:translateX(100%);
}
.svk-drawer.is-open{transform:none}
.svk-drawer__handle{display:none}

/* mobile: bottom sheet */
@media (max-width:767px){
  .svk-drawer{
    top:auto; bottom:0; right:0; left:0; width:100%; max-width:none; height:auto; max-height:85vh;
    border-left:none; border-top:1px solid var(--flame-300);
    border-radius:14px 14px 0 0; transform:translateY(100%);
  }
  .svk-drawer.is-open{transform:none}
  .svk-drawer__handle{display:block; flex:0 0 auto; margin:10px auto 2px; width:40px; height:4px;
    border-radius:999px; background:var(--sage-200)}
}

/* ---- Panel (this element IS the cart fragment) ---- */
.svk-drawer__panel{display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden}

/* ---- Head ---- */
.svk-drawer__head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:#fff; border-bottom:1px solid var(--sg-line);
}
.svk-drawer__title{display:flex; align-items:center; gap:12px; font-family:var(--f-display);
  font-weight:400; font-size:22px; color:var(--sg-ink); letter-spacing:-.01em}
.svk-drawer__title .svk-ico{color:var(--sg-forest)}
.svk-drawer__close{border:none; background:none; cursor:pointer; color:var(--sg-ink);
  width:36px; height:36px; margin:-6px; display:grid; place-items:center; border-radius:50%}
.svk-drawer__close:hover{background:var(--flame-50)}
.svk-drawer__close:focus-visible,.svk-drawer__viewbag:focus-visible{outline:2px solid var(--flame); outline-offset:2px}

/* ---- Items (scroll area) ---- */
.svk-drawer__items{flex:1 1 auto; min-height:0; overflow-y:auto; margin:0; padding:0; list-style:none}
.svk-line{
  display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:start;
  padding:14px 18px; border-bottom:1px solid rgba(48,90,85,.10); position:relative;
  transition:opacity var(--dur-2) var(--ease);
}
.svk-line.is-busy{opacity:.5; pointer-events:none}
.svk-line__thumb{width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--sg-sand);
  box-shadow:none; flex:0 0 auto}
.svk-line__thumb img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.svk-line__name{font-family:var(--f-body); font-weight:700; font-size:14px; color:var(--sg-ink); line-height:1.25}
.svk-line__name a{color:inherit; text-decoration:none}
.svk-line__meta{font-family:var(--f-body); font-size:11.5px; color:var(--teal-500); margin-top:2px}
.svk-line__meta p{margin:0}
.svk-line__calc{display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap}
.svk-line__unit{font-family:var(--f-body); font-size:12px; color:var(--teal-500); font-variant-numeric:tabular-nums}
.svk-line__right{display:flex; flex-direction:column; align-items:flex-end; gap:14px; min-height:56px}
.svk-line__remove{border:none; background:none; cursor:pointer; color:var(--teal-700); padding:4px; border-radius:6px;
  display:grid; place-items:center}
.svk-line__remove:hover{color:var(--error); background:#FEEBEB}
.svk-line__remove:focus-visible{outline:2px solid var(--error); outline-offset:1px}
.svk-line__total{font-family:var(--f-body); font-weight:700; font-size:14px; color:var(--sg-ink); font-variant-numeric:tabular-nums}

/* inline qty stepper inside a line */
.svk-line .svk-qty{height:32px; padding:0 10px; gap:10px; box-shadow:none; border:1px solid var(--sage-200); background:#fff}
.svk-qty{display:inline-flex; align-items:center; gap:10px; height:32px; padding:0 10px; border-radius:var(--r-pill);
  background:#fff; font-family:var(--f-head); font-weight:700; color:var(--teal-900)}
.svk-qty__val{min-width:14px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums}
.svk-qty__btn{width:22px; height:22px; border-radius:50%; border:none; background:var(--flame-50); color:var(--flame-900);
  font-size:15px; font-weight:700; line-height:1; cursor:pointer; display:grid; place-items:center}
.svk-qty__btn:hover{filter:brightness(.97)}
.svk-qty__btn:disabled{opacity:.4; cursor:not-allowed}
.svk-qty__btn:focus-visible{outline:2px solid var(--flame); outline-offset:1px}

/* ---- Footer ---- */
.svk-drawer__foot{
  flex:0 0 auto; padding:18px;
  background:var(--sg-sage);
  border-top:1px solid var(--sg-line);
}
.svk-drawer__subtotal{display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-body); font-weight:700; color:var(--sg-ink); font-size:18px; margin-bottom:12px}
.svk-drawer__subtotal-amt{font-size:20px}
.svk-drawer__note{margin:0 0 12px; font-family:var(--f-body); font-size:12px; color:var(--sg-forest); text-align:center}
.svk-drawer__foot .svk-btn{width:100%}
.svk-drawer__viewbag{display:block; text-align:center; margin-top:10px; font-family:var(--f-body);
  font-weight:600; font-size:13px; color:var(--sg-forest); text-decoration:none}
.svk-drawer__viewbag:hover{color:var(--sg-flame-700); text-decoration:underline}

/* ---- Empty state ---- */
.svk-drawer__empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding:40px 24px}
.svk-drawer__empty-ico{color:var(--flame); opacity:.35}
.svk-drawer__empty-title{font-family:var(--f-display); font-weight:400; font-size:22px; color:var(--sg-ink); margin:8px 0 0; letter-spacing:-.01em}
.svk-drawer__empty-sub{font-family:var(--f-body); font-size:15px; color:var(--sg-forest); margin:0 0 12px}

/* ---- Toaster ---- */
.svk-toaster{position:fixed; z-index:100002; right:20px; bottom:148px; display:flex; flex-direction:column; gap:10px;
  pointer-events:none}
@media (max-width:767px){.svk-toaster{right:12px; left:12px; bottom:20px; align-items:center}}
.svk-toast{
  pointer-events:auto; display:flex; align-items:center; gap:12px; min-width:230px; max-width:340px;
  background:#fff; color:var(--teal-900); border-radius:12px; padding:12px 14px;
  border-left:4px solid var(--flame); box-shadow:0 10px 26px rgba(31,20,25,.18);
  font-family:var(--f-head); font-weight:500; font-size:14px;
  animation:svk-toast-in var(--dur-3) var(--ease);
}
.svk-toast.svk-toast--out{animation:svk-toast-out var(--dur-2) var(--ease) forwards}
.svk-toast--error{border-left-color:var(--error)}
.svk-toast__ico{flex:0 0 auto; color:var(--flame)}
.svk-toast--error .svk-toast__ico{color:var(--error)}
@keyframes svk-toast-in{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@keyframes svk-toast-out{to{opacity:0; transform:translateY(6px)}}

body.svk-drawer-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .svk-drawer,.svk-scrim,.svk-bag-trigger,.svk-toast{transition:none!important; animation:none!important}
}