/* ==========================================================================
   Cart — drawer, line items, summary, and the full cart page
   ========================================================================== */

/* ---- Drawer shell ---------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 10, 20, 0.44);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-mid) linear;
}
.drawer.is-open .drawer__scrim {
  opacity: 1;
}
.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(432px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--sh-3);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.drawer.is-open .drawer__panel {
  transform: none;
}

.drawer__grab {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line-2);
}

.drawer__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px 22px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}
.drawer__head em {
  font-style: normal;
  color: var(--kt-pink);
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
.drawer__foot {
  border-top: 1px solid var(--line);
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface-2);
  display: grid;
  gap: 12px;
}
.drawer__keep {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-3);
  padding: 6px;
}
.drawer__keep:hover {
  color: var(--kt-pink);
}
.drawer__clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--surface-3);
}
.drawer__clear:hover {
  color: var(--chili);
  background: var(--chili-50);
}

/* ---- Free-delivery progress ------------------------------------------ */

.cprog {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--kt-pink-50);
  margin-bottom: 16px;
}
.cprog p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-2);
}
.cprog svg {
  color: var(--kt-pink);
  flex: none;
}
.cprog strong {
  color: var(--kt-pink);
}
.cprog__track {
  height: 6px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  overflow: hidden;
}
.cprog__track span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--kt-pink), var(--kt-pink-bright));
  transition: width var(--t-slow) var(--ease-out);
}
.cprog--done {
  background: var(--mint-50);
}
.cprog--done svg,
.cprog--done strong {
  color: var(--mint);
}

/* ---- Line items ------------------------------------------------------- */

.clines {
  display: grid;
  gap: 6px;
}
.cline {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background-color var(--t-fast) linear, border-color var(--t-fast) linear,
    opacity 180ms linear, transform 180ms var(--ease-out);
}
.cline:hover {
  background: var(--surface-2);
  border-color: var(--line);
}
.cline.is-leaving {
  opacity: 0;
  transform: translateX(-14px);
}
.cline__media {
  width: 68px;
  height: 68px;
  flex: none;
}
.cline__body {
  flex: 1;
  min-width: 0;
}
.cline__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cline__name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.28;
}
.cline__total {
  flex: none;
  font-size: 0.98rem;
}
.cline__extras {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.45;
}
.cline__extras--empty {
  color: var(--ink-4);
}
.cline__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.cline__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-4);
  padding: 6px 8px;
  border-radius: var(--r-pill);
  transition: color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.cline__remove:hover {
  color: var(--chili);
  background: var(--chili-50);
}
.cline--compact .stepper {
  padding: 3px;
}
.cline--compact .stepper__btn {
  width: 30px;
  height: 30px;
}

/* ---- Summary ---------------------------------------------------------- */

.csum {
  display: grid;
  gap: 9px;
  margin: 0;
}
.csum div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.csum dt {
  font-size: 0.86rem;
  color: var(--ink-2);
}
.csum dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.csum__free {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mint);
  background: var(--mint-50);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  margin-left: 5px;
}
.csum__total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
}
.csum__total dt {
  font-weight: 800;
  color: var(--ink);
  font-size: 0.95rem;
}

.ceta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.ceta svg {
  color: var(--kt-pink);
}
.ceta em {
  flex-basis: 100%;
  font-style: normal;
  font-size: 0.71rem;
  color: var(--ink-4);
}

/* ---- Full cart page --------------------------------------------------- */

.cartpage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.cartpage__main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.4vw, 26px);
}
.cartpage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.cartpage__head h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.cartpage__main .cline {
  padding: 16px 12px;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.cartpage__main .cline:last-child {
  border-bottom: 0;
}
.cartpage__main .cline__media {
  width: 84px;
  height: 84px;
}

.cartpage__side {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  display: grid;
  gap: 16px;
}
.cartpanel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: grid;
  /* An implicit grid column is sized to its widest item's min-content, which
     here is a pay button whose label and blurb sit on one unbreakable line —
     measured at 387px inside a 305px box on a 375px screen, so the buttons
     were clipped by 47px and the last one could not be fully pressed.
     minmax(0, 1fr) lets the column obey its container instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
/*
   The pay buttons sit in an inline display:grid wrapper built in
   js/pages/orders.js. Like .cartpanel above it, its implicit column sized to
   the widest button's min-content — 387px in a 305px box — so the buttons
   were clipped on a 375px screen.

   .btn is white-space: nowrap by design, which is right for a one-word
   button but not for these: they carry a label AND a blurb ("Pay with
   Paystack" / "Card, bank transfer or USSD") that together cannot fit one
   line on a phone. Allowed to wrap here only.
*/
[data-pay-buttons] {
  grid-template-columns: minmax(0, 1fr);
}
[data-pay-buttons] .btn {
  white-space: normal;
  flex-wrap: wrap;
  min-width: 0;
  height: auto;
  padding-block: 12px;
}
[data-pay-buttons] .btn > span {
  white-space: normal;
  min-width: 0;
}

.cartpanel h3 {
  font-family: var(--font-display);
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}

.deliverycard {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.deliverycard__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--kt-pink-50);
  color: var(--kt-pink);
  flex: none;
}
.deliverycard strong {
  display: block;
  font-size: 0.88rem;
}
.deliverycard p {
  font-size: 0.79rem;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 2px;
}
.deliverycard__change {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kt-pink);
  margin-top: 6px;
}

.slotpicker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.promoform {
  display: flex;
  gap: 8px;
}
.promoform .input {
  height: 46px;
}
.promoform .btn {
  height: 46px;
  flex: none;
}

.phasenote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--kt-pink-50);
  border: 1px dashed var(--kt-pink-200);
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.phasenote svg {
  flex: none;
  color: var(--kt-pink);
  margin-top: 1px;
}

.cartpage__suggest {
  margin-top: clamp(32px, 4vw, 56px);
}

/* ---- Takeaway packs (Phase 12) --------------------------------------- */

/*
   Mobile-first: the pack tabs are a horizontally scrolling row so twenty of
   them cannot widen the page, and every control is at least 40px tall so it
   is tappable without aiming.

   Grouping is presentational. Nothing in this block styles a price, because
   packs do not have one — packaging is a single order-level charge whether
   the food goes out in one bag or five.
*/

.takeaway {
  background: var(--surface-2, var(--surface-3));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 16px;
}
.takeaway--off {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: space-between;
}
.takeaway__intro { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.takeaway__intro strong { display: block; font-size: 0.95rem; }
.takeaway__intro p { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-2); }
.takeaway__icon { color: var(--kt-pink); flex: none; margin-top: 2px; }

.takeaway__head { margin-bottom: 10px; }
.takeaway__head strong { display: block; font-size: 0.95rem; }
.takeaway__note { display: block; font-size: 0.78rem; color: var(--ink-2); margin-top: 2px; }

.takeaway__tabs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.takeaway__tabs::-webkit-scrollbar { display: none; }
.takeaway__tab {
  flex: none; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-1, #fff); color: inherit;
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.takeaway__tab.is-active {
  background: var(--kt-pink); border-color: var(--kt-pink); color: #fff;
}
.takeaway__tab--add { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; }
.takeaway__hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--ink-2); }

.cpack { margin-bottom: 18px; }
.cpack__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 2px solid var(--line);
}
.cpack__head h3 {
  margin: 0; font-family: var(--font-display); font-size: 1rem;
  letter-spacing: 0.02em;
}
.cpack__count { font-size: 0.8rem; color: var(--ink-2); margin-right: auto; }
.cpack__drop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.cpack__drop:hover { background: var(--chili-50); color: var(--chili); }
.cpack.is-active .cpack__head { border-bottom-color: var(--kt-pink); }
.cpack__empty {
  margin: 8px 0 0; font-size: 0.85rem; color: var(--ink-2);
  padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-lg);
}

.cmove {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 0 10px 74px; margin-top: -6px;
  list-style: none;
}
.cmove__label { font-size: 0.75rem; color: var(--ink-2); }
.cmove__chip {
  min-width: 32px; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: inherit; font: inherit;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.cmove__chip:hover { border-color: var(--kt-pink); color: var(--kt-pink); }

/* Pre-payment recap in the summary panel. */
.precap {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px; margin-bottom: 12px;
}
.precap__head {
  margin: 0 0 8px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-2); font-weight: 700;
}
.precap__pack + .precap__pack { margin-top: 10px; }
.precap__name { font-size: 0.85rem; }
.precap ul { margin: 4px 0 0; padding-left: 14px; }
.precap li { font-size: 0.82rem; color: var(--ink-2); }
.precap__qty { font-weight: 700; color: var(--ink-1, inherit); }

@media (max-width: 420px) {
  .cmove { padding-left: 0; }
  .takeaway--off { flex-direction: column; align-items: stretch; }
  .takeaway--off .btn { width: 100%; justify-content: center; }
}