/* ==========================================================================
   Savalan Kebab — Basket (cart) page. CherryOn structure, Savalan tokens.
   ========================================================================== */
.svk-cart-page, .svk-cart-page *{box-sizing:border-box}

/* Codevz .layout_ has overflow:hidden which breaks position:sticky. */
body.woocommerce-cart .layout_{overflow:visible !important}
/* The floating cart trigger is redundant on the basket page itself. */
body.woocommerce-cart .svk-bag-trigger{display:none !important}

.svk-cart-page{
  max-width:var(--svk-page);margin:0 auto;font-family:var(--f-body);
  padding:var(--svk-hdr-init,84px) var(--svk-gutter) 96px;
}
@media (min-width:1025px){.svk-cart-page{padding-top:var(--svk-hdr-init,210px)}}

/* ---- Hero (Redesign 2026: calm display) ---- */
.svk-cart-page__hero{padding:38px 0 28px}
.svk-cart-page__title{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,5vw,54px);color:var(--sg-ink);margin:6px 0 0;line-height:.95;letter-spacing:-.01em}

/* ---- Two-column ----
   The fulfilment panel is a direct grid child so we can place it independently of
   its position in the markup: top of the RIGHT column on desktop (above the order
   summary), and BELOW the items on mobile. */
.svk-cart{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
/* Mobile: show what they're buying first, then how they want it. */
@media (max-width:899px){
  .svk-cart__main{order:1}
  .svk-fulfil{order:2}
  .svk-cart__summary{order:3}
}
@media (min-width:900px){
  .svk-cart{
    grid-template-columns:1.15fr .85fr;
    grid-template-areas:
      "main fulfil"
      "main summary";
    gap:28px 48px;
  }
  .svk-cart__main{grid-area:main}
  .svk-fulfil{grid-area:fulfil;margin:0}
  .svk-cart__summary{grid-area:summary}
}
/* Grid items default to min-width:auto, so the wide horizontally-scrolling
   cross-sell track would stretch this column and push the page sideways. */
.svk-cart__main,
.svk-cart__summary,
.svk-fulfil{min-width:0}

/* ---- Line items (Redesign 2026: hairline rules, rounded food thumbs) ---- */
.svk-cart__lines{border-top:1px solid var(--sg-line)}
.svk-cart-line{
  display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:start;
  padding:22px 4px;border-bottom:1px solid var(--sg-line);
  transition:opacity .2s var(--ease);
}
.svk-cart-line.is-busy{opacity:.5;pointer-events:none}
.svk-cart-line__thumb{width:88px;height:88px;border-radius:var(--r-img);overflow:hidden;background:var(--sg-sand);box-shadow:none}
.svk-cart-line__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.svk-cart-line__name{font-family:var(--f-body);font-weight:700;font-size:17px;color:var(--sg-ink);margin:0;line-height:1.25}
.svk-cart-line__name a{color:inherit;text-decoration:none}
.svk-cart-line__name a:hover{color:var(--sg-forest)}
.svk-cart-line__meta{font-family:var(--f-body);font-size:13px;color:var(--sg-forest);margin:4px 0 0}
.svk-cart-line__meta p{margin:0}
.svk-cart-line__unit{font-family:var(--f-body);font-size:13px;color:var(--teal-500);margin:6px 0 0;font-variant-numeric:tabular-nums}
.svk-cart-line__controls{display:flex;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.svk-cart-line__remove{display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;
  font-family:var(--f-body);font-size:13px;color:var(--sg-forest);padding:4px 2px;border-radius:6px}
.svk-cart-line__remove:hover{color:var(--error)}
.svk-cart-line__remove:focus-visible{outline:2px solid var(--error);outline-offset:2px}
.svk-cart-line__price{font-family:var(--f-body);font-weight:700;font-size:18px;color:var(--sg-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* qty stepper (shares the drawer look) */
.svk-cart-line .svk-qty{display:inline-flex;align-items:center;gap:12px;height:38px;padding:0 12px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--sage-200);font-family:var(--f-head);font-weight:700;color:var(--teal-900)}
.svk-cart-line .svk-qty__val{min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
.svk-cart-line .svk-qty__btn{width:24px;height:24px;border-radius:50%;border:none;background:var(--flame-50);color:var(--flame-900);
  font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center}
.svk-cart-line .svk-qty__btn:disabled{opacity:.4;cursor:not-allowed}
.svk-cart-line .svk-qty__btn:focus-visible{outline:2px solid var(--flame);outline-offset:1px}

.svk-cart__keep{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-family:var(--f-head);font-weight:600;
  font-size:14px;color:var(--teal-700);text-decoration:none}
.svk-cart__keep:hover{color:var(--flame)}

/* ---- Summary ---- */
.svk-cart__summary{position:static}
@media (min-width:900px){.svk-cart__summary{position:sticky;top:20px}}
.svk-cart-sum{background:#fff;border:none;border-left:4px solid var(--sg-flame);
  border-radius:var(--r-img);box-shadow:var(--sh-card);padding:26px}
.svk-cart-sum__title{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--sg-ink);margin:0 0 18px;letter-spacing:-.01em}
.svk-cart-sum__totals{margin:0 0 4px}
.svk-cart-sum__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;text-align:left}
.svk-cart-sum__lbl{font-family:var(--f-body);font-size:14px;color:var(--sg-forest);font-weight:400}
.svk-cart-sum__val{font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--sg-ink);font-variant-numeric:tabular-nums;text-align:right}
.svk-cart-sum__count{color:var(--teal-500);font-weight:400}
.svk-cart-sum__muted{font-family:var(--f-body);font-weight:400;color:var(--teal-500);font-size:12.5px;text-align:right;max-width:60%}
.svk-cart-sum__grand{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--sg-line);margin-top:8px;padding-top:16px}
.svk-cart-sum__grand-lbl{font-family:var(--f-body);font-weight:700;font-size:18px;color:var(--sg-ink)}
.svk-cart-sum__grand-amt{font-family:var(--f-body);font-weight:700;font-size:24px;color:var(--sg-ink);font-variant-numeric:tabular-nums}
.svk-cart-sum__cta{margin-top:20px}
.svk-cart-sum__keep{display:block;text-align:center;margin-top:14px;font-family:var(--f-body);font-weight:600;font-size:13px;color:var(--sg-forest);text-decoration:none}
.svk-cart-sum__keep:hover{color:var(--sg-flame-700);text-decoration:underline}
.svk-cart-sum__trust{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--sg-line);
  display:flex;flex-direction:column;gap:11px}
.svk-cart-sum__trust li{display:flex;align-items:center;gap:10px;font-family:var(--f-body);font-size:13px;color:var(--sg-forest)}
.svk-cart-sum__trust svg{color:var(--sg-forest);flex:0 0 auto}

/* ---- Empty ---- */
.svk-cart-empty{text-align:center;padding:60px 20px 90px;display:flex;flex-direction:column;align-items:center;gap:8px}
.svk-cart-empty__ico{color:var(--flame);opacity:.35}
.svk-cart-empty__title{font-family:var(--f-display);font-weight:400;font-size:32px;color:var(--sg-ink);margin:10px 0 0;letter-spacing:-.01em}
.svk-cart-empty__sub{font-family:var(--f-body);font-size:16px;color:var(--sg-forest);margin:0 0 16px}

/* ---- Mobile sticky bar ---- */
.svk-cart-bar{display:none}
@media (max-width:899px){
  .svk-cart-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 18px;
    background:#fff;border-top:1px solid var(--surface-200);box-shadow:0 -4px 18px rgba(48,90,85,.12)}
  .svk-cart-bar__label{display:block;font-family:var(--f-form);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-500)}
  .svk-cart-bar__total{font-family:var(--f-head);font-weight:700;font-size:18px;color:var(--teal-900);font-variant-numeric:tabular-nums}
  .svk-cart-bar__cta{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.svk-cart-line{transition:none}}

/* ==========================================================================
   Delivery / Collection + postcode check
   ========================================================================== */
.svk-fulfil{background:#fff;border:none;border-left:4px solid var(--sg-flame);
  border-radius:var(--r-img);box-shadow:var(--sh-card);padding:20px 22px;margin:0 0 22px}
.svk-fulfil__h{font-family:var(--f-body);font-weight:700;font-size:16px;color:var(--sg-ink);margin:0 0 14px}

.svk-fulfil__toggle{display:flex;gap:8px;background:var(--sg-sage);border:none;
  border-radius:var(--r-full);padding:4px}
.svk-fulfil__opt{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 14px;border:0;border-radius:var(--r-full);background:transparent;cursor:pointer;
  font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--sg-forest);
  transition:background .15s var(--ease),color .15s var(--ease)}
.svk-fulfil__opt svg{width:18px;height:18px;flex:0 0 auto}
.svk-fulfil__opt:hover{color:var(--sg-ink)}
.svk-fulfil__opt.is-active{background:var(--sg-flame);color:var(--sg-ink);box-shadow:none}

/* only the selected panel shows */
.svk-fulfil__panel{display:none;margin-top:16px}
.svk-fulfil[data-mode="delivery"] .svk-fulfil__panel[data-panel="delivery"],
.svk-fulfil[data-mode="collection"] .svk-fulfil__panel[data-panel="collection"]{display:block}
/* nothing chosen yet → default to showing the postcode check */
.svk-fulfil:not([data-mode="delivery"]):not([data-mode="collection"]) .svk-fulfil__panel[data-panel="delivery"]{display:block}

.svk-fulfil__lbl{display:block;font-family:var(--f-form);font-size:12px;font-weight:600;color:var(--teal-700);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.svk-fulfil__row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.svk-fulfil__input{flex:1 1 180px;min-width:0;min-height:48px;padding:12px 14px;background:#fff;
  border:1px solid var(--surface-300);border-radius:var(--r-input);
  font-family:var(--f-form);font-size:15px;color:var(--teal-900);text-transform:uppercase}
.svk-fulfil__input::placeholder{text-transform:none;color:var(--surface-500)}
.svk-fulfil__input:focus{border-color:var(--flame);outline:none;box-shadow:0 0 0 3px rgba(255,142,91,.14)}
.svk-fulfil__check{flex:0 0 auto;min-height:48px;padding:0 24px}
.svk-fulfil__check[disabled]{opacity:.6;pointer-events:none}

.svk-fulfil__result{margin:12px 0 0;font-size:14px;line-height:1.5;display:none}
.svk-fulfil__result.is-on{display:block}
.svk-fulfil__result.is-yes{color:var(--green)}
.svk-fulfil__result.is-no{color:var(--error)}
.svk-fulfil__result.is-bad{color:var(--warn,#B5701E)}
.svk-fulfil__result b{font-weight:700}
.svk-fulfil__result .svk-fulfil__note{display:block;margin-top:3px;color:var(--teal-600);font-size:13.5px}

.svk-fulfil__pickup{margin:0;font-size:14.5px;color:var(--teal-900);line-height:1.55}
.svk-fulfil__pickup strong{font-family:var(--f-head)}
.svk-fulfil__muted{margin:6px 0 0;font-size:13px;color:var(--teal-600)}
/* Reassurance: the districts we deliver to, so a browser sees it before typing. */
.svk-fulfil__zones{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--teal-600)}
.svk-fulfil__zones-k{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--green);margin-right:4px}
.svk-fulfil__zones-k::before{content:"";width:13px;height:13px;flex:0 0 auto;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ==========================================================================
   Cross-sell — "Complete your order"
   ========================================================================== */
.svk-xsell{margin-top:34px}
.svk-xsell__h{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--sg-ink);margin:0 0 18px;
  display:flex;align-items:center;gap:16px;line-height:1;letter-spacing:-.01em}
.svk-xsell__h::after{content:"";flex:1;height:1px;background:var(--sg-line)}

.svk-xsell__track{list-style:none;margin:0;padding:2px;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;align-items:start;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svk-xsell__track::-webkit-scrollbar{display:none}

.svk-xsell__card{position:relative;scroll-snap-align:start;background:#fff;border:none;
  border-radius:var(--r-img);box-shadow:var(--sh-card);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.svk-xsell__card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(14,21,14,.30)}
.svk-xsell__media{display:block;aspect-ratio:4/3;background:var(--sg-sand);overflow:hidden}
.svk-xsell__media img{width:100%;height:100%;object-fit:cover;display:block}
.svk-xsell__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.svk-xsell__name{font-family:var(--f-body);font-weight:700;font-size:13.5px;line-height:1.3;margin:0;color:var(--sg-ink)}
.svk-xsell__name a{color:inherit;text-decoration:none}
.svk-xsell__name a:hover{color:var(--sg-forest)}
.svk-xsell__price{font-family:var(--f-body);font-weight:700;font-size:13.5px;color:var(--sg-ink);
  font-variant-numeric:tabular-nums;margin-top:auto}
.svk-xsell__price del{display:none}

.svk-xsell__add{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--sg-flame);color:var(--sg-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(14,21,14,.4);text-decoration:none;transition:background .15s var(--ease),transform .15s var(--ease)}
.svk-xsell__add svg{width:17px;height:17px}
.svk-xsell__add:hover{background:var(--sg-flame-700);transform:scale(1.06)}
.svk-xsell__add.is-busy{opacity:.6;pointer-events:none}

/* Inline flavour picker: chips expand the card in-flow (a popover would be
   clipped by the card's overflow:hidden and the track's horizontal scroll).
   The "+" toggle rotates into an × while open. */
.svk-xsell__add--choose svg{transition:transform .15s var(--ease)}
.svk-xsell__card.is-open{box-shadow:0 10px 24px rgba(48,90,85,.16)}
.svk-xsell__card.is-open .svk-xsell__add--choose svg{transform:rotate(45deg)}
.svk-xsell__opts{display:none;padding:0 12px 12px}
.svk-xsell__card.is-open .svk-xsell__opts{display:block}
.svk-xsell__opts-h{font-family:var(--f-form);font-weight:600;font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-600);margin:2px 0 8px}
.svk-xsell__chips{display:flex;flex-wrap:wrap;gap:6px}
.svk-xsell__chip{font-family:var(--f-body);font-size:12.5px;font-weight:700;line-height:1;
  padding:8px 12px;border-radius:var(--r-full);border:1.5px solid var(--sg-flame);
  background:var(--flame-50);color:var(--sg-ink);cursor:pointer;
  transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease),transform .12s var(--ease)}
.svk-xsell__chip:hover{background:var(--sg-flame);border-color:var(--sg-flame);color:var(--sg-ink);transform:translateY(-1px)}
.svk-xsell__chip.is-busy{opacity:.6;pointer-events:none}

@media (max-width:600px){
  .svk-fulfil{padding:16px}
  .svk-fulfil__opt{font-size:13.5px;padding:0 8px}
  .svk-xsell__track{grid-auto-columns:minmax(140px,1fr);margin:0 -16px;padding:2px 16px}
}