/* =====================================================================
   Zukro Full Cart Page — css/cart-page.css
   Expanded desktop version of the drawer cart (master visual system).
   Layout: max-width 1140px · flex [fluid left | fixed 360px summary] ·
   summary column sticky (PDP mechanism). One shared cart-item system, one
   price block per item, one savings/CTA/trust block. Mobile = single column
   + fixed bottom checkout bar. Pricing here is DISPLAY ONLY — the server
   recomputes + enforces every rupee at createRazorpayOrder/createCodOrder.
   ===================================================================== */
:root {
    --zgreen:#123D2A; --zgreend:#123D2A; --gold:#e8a92e; --gold-d:#E8A92E;
    --cream:#F3EEE3; --ink:#3a463c; --muted:#5f6b60; --line:#e7e3d8;
    --zsoft:#1f7a3d; --card:#FFFDF8; --red:#9a3412;
    --zukro-green:#123D2A; --bg-warm:#F3EEE3; --border:#e7e3d8;
    /* CANONICAL danger/warning/offer-alert/out-of-stock colour — one red only.
       Source of truth = PDP brick #9a3412. No other red-family hue site-wide. */
    --zk-danger:#9a3412;
    --zk-danger-border:rgba(154,52,18,.42);
    --zk-danger-bg:rgba(154,52,18,.06);
    /* Zukro incentive color tokens — source of truth from PDP offer chip */
    --zk-terracotta:#9a5b12;       /* PDP offer chip amber/terracotta text */
    --zk-offer-bg:#fbf3df;         /* PDP offer chip warm gold background */
    --zk-offer-border:#e3c98c;     /* PDP offer chip gold border */
    --zk-seeds-green:#1f7a3d;      /* PDP Seeds earning icon/text (= --zsoft) */
    --zk-success-bg:#f0fdf4;       /* savings / success light green background */
    /* Subscribe & Save shared tokens — align PDP + cart + drawer */
    --zk-subscribe-bg:#F3EEE3;     /* warm cream background (cart card reference) */
    --zk-subscribe-border:#e8e1d4; /* warm beige border */
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); background:var(--cream); color:var(--ink); padding-top:72px; line-height:1.6; }
.cart-wrap { width:min(92%, 1180px); max-width:1180px; margin:0 auto; padding:24px 0 72px; }

/* =====================================================================
   Commerce-flow shell — "1 box · 2 section" (shared with the PDP).
   Forest-green page frame → single cream box floating on it → two
   sections (fluid left | sticky summary right). Loaded on cart, checkout
   and thank-you, so the green-frame head treatment is shared here.
   ===================================================================== */
html body.farm-theme.zk-cart,
html body.farm-theme.zk-checkout,
body.zk-cart,
body.zk-checkout {
    /* The real site header is shown on these pages. Its fixed 72px bar is cleared by
       the padding-top:72px that farm-theme.css sets. The cream extends behind the
       header + step band (~184px = 72 header + 24 main pad + 88 step band), then the
       forest-green commerce frame begins. */
    background:linear-gradient(180deg, var(--cream) 0 184px, var(--zgreen) 184px 100%);
}

/* No site breadcrumb on the funnel — the Cart > Checkout > Confirmed step bar is the
   wayfinding here (international checkout best practice; mirrors thank-you.html). */
body.zk-cart nav[aria-label="Breadcrumb"],
body.zk-checkout nav[aria-label="Breadcrumb"] {
    display:none !important;
}

/* dedicated commerce-flow top band + centered step pill */
html body.farm-theme.zk-cart .zk-cart-head,
html body.farm-theme.zk-checkout .zk-cart-head,
body.zk-cart .zk-cart-head,
body.zk-checkout .zk-cart-head {
    margin:0 calc(50% - 50vw) 24px;
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--cream);
    padding:16px 24px;
}

html body.farm-theme.zk-cart .zk-cart-head .ey,
html body.farm-theme.zk-cart .zk-cart-head h1,
html body.farm-theme.zk-checkout .zk-cart-head .ey,
html body.farm-theme.zk-checkout .zk-cart-head h1,
body.zk-cart .zk-cart-head .ey,
body.zk-cart .zk-cart-head h1,
body.zk-checkout .zk-cart-head .ey,
body.zk-checkout .zk-cart-head h1 {
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

html body.farm-theme.zk-cart .zk-steps,
html body.farm-theme.zk-checkout .zk-steps,
body.zk-cart .zk-steps,
body.zk-checkout .zk-steps {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px;
    background:#fff;
    border-radius:999px;
    border:1px solid rgba(18,61,42,.06);
    box-shadow:0 12px 28px rgba(16,40,28,.08);
}

html body.farm-theme.zk-cart .zk-step,
html body.farm-theme.zk-checkout .zk-step,
body.zk-cart .zk-step,
body.zk-checkout .zk-step {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:12px 26px;
    border-radius:999px;
    color:var(--zgreen);
    font-size:15px;
    font-weight:700;
    letter-spacing:-.01em;
}

html body.farm-theme.zk-cart .zk-step .n,
html body.farm-theme.zk-checkout .zk-step .n,
body.zk-cart .zk-step .n,
body.zk-checkout .zk-step .n {
    width:auto;
    height:auto;
    border:none;
    background:none;
    color:inherit;
    font-size:inherit;
    font-weight:800;
    margin:0;
}

html body.farm-theme.zk-cart .zk-step .ln,
html body.farm-theme.zk-checkout .zk-step .ln,
body.zk-cart .zk-step .ln,
body.zk-checkout .zk-step .ln {
    display:none;
}

html body.farm-theme.zk-cart .zk-step.on,
html body.farm-theme.zk-checkout .zk-step.on,
body.zk-cart .zk-step.on,
body.zk-checkout .zk-step.on {
    background:var(--zgreen);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(18,61,42,.08);
}

html body.farm-theme.zk-cart .zk-step.done,
html body.farm-theme.zk-checkout .zk-step.done,
body.zk-cart .zk-step.done,
body.zk-checkout .zk-step.done {
    color:var(--zgreen);
}

/* the ONE cream box (cart). .cart-cols is the two-section flex row inside it. */
.zk-cart .cart-cols { background:#FBF8F2; border-radius:26px; padding:24px; box-shadow:0 30px 70px rgba(8,24,16,.30); }
.zk-cart .empty { background:#FBF8F2; border-radius:26px; box-shadow:0 30px 70px rgba(8,24,16,.30); }

/* gold eyebrow at the top of the left section */
.cart-eyebrow { font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d); margin:0 0 14px; display:flex; align-items:center; gap:8px; }

/* screen-reader-only live region (cart total announcements) */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* keyboard focus — visible across all interactive cart controls */
.zk-cart a:focus-visible, .zk-cart button:focus-visible, .zk-cart input:focus-visible {
    outline:2px solid var(--gold); outline-offset:2px; border-radius:8px;
}

/* ---- two-column: PDP mechanism (flex + sticky COLUMN) ---- */
.cart-cols { display:flex; gap:32px; align-items:flex-start; }
.cart-main { flex:1 1 auto; min-width:0; }
.cart-aside { flex:0 0 360px; min-width:0; align-self:flex-start;
    position:-webkit-sticky; position:sticky; top:108px; }

/* ---- cart product card — EXPANDED desktop version of the drawer item card ----
   Single shared visual system with the drawer (.zk-citem): rounded white card,
   soft border, hover lift, sage qty stepper, ONE price block. Desktop layout =
   [ image | name·variant·qty·remove | single price block ]. No duplicate pricing. */
.ci { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:12px; transition:box-shadow .25s, border-color .25s, opacity .2s; }
.ci:hover { box-shadow:0 12px 28px rgba(30,64,34,.08); border-color:#CED6C9; }
.ci.is-removing { opacity:0; transform:translateX(8px); }
.ci-thumb { flex:0 0 92px; width:92px; height:92px; border-radius:13px; overflow:hidden; background:#F3EEE3; }
.ci-thumb img { width:100%; height:100%; object-fit:cover; }
/* MIDDLE — name, variant, status flags, then qty stepper + remove together */
.ci-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ci-info h3 { font-size:17px; font-weight:800; color:var(--zgreend); line-height:1.25; letter-spacing:-.01em; }
.ci-info .v { font-size:13.5px; color:var(--muted); }
.ci-controls { display:flex; align-items:center; gap:16px; margin-top:8px; }
/* per-item status flags (out of stock, price changed) */
.ci-flag { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; border-radius:7px; padding:3px 8px; width:max-content; }
.ci-flag.warn { color:#9a5b12; background:rgba(232,169,46,.16); }
.ci-flag.oos { color:var(--red); background:rgba(154,52,18,.1); }
.ci.is-oos { border-color:rgba(154,52,18,.35); }
.ci.is-oos .ci-thumb img { filter:grayscale(.6) opacity(.8); }
/* quantity selector — identical design language to the drawer (.zk-qty):
   white track, sage buttons, green text, 10px radius, 800 weight */
.qty { display:inline-flex; align-items:center; flex:0 0 auto; border:1.5px solid #CED6C9; border-radius:10px; overflow:hidden; background:#fff; }
.qty button { width:32px; height:32px; border:none; background:#CED6C9; color:var(--zgreen); font-size:16px; font-weight:800; line-height:1; cursor:pointer; transition:.18s; display:flex; align-items:center; justify-content:center; }
.qty button:hover { background:#bcc8b6; }
.qty button:disabled { opacity:.45; cursor:not-allowed; }
.qty span { min-width:36px; height:32px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; font-size:13.5px; background:#fff; color:var(--ink); }
/* Remove — drawer terracotta; sits beside the stepper (never between qty and price) */
/* Brand terracotta — literal, not var(--red): Bootstrap (injected by the header)
   redefines :root{--red:#dc3545}, which would otherwise turn this bootstrap-red. */
.rm { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:#9a3412; background:none; border:none; text-decoration:none; cursor:pointer; transition:.18s; padding:4px 2px; }
.rm:hover { color:#7a2a0e; }
/* RIGHT — the ONE price block per item (no duplicate pricing) */
.ci-price { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }
.ci-mrp { font-size:12.5px; color:#9aa3a0; text-decoration:line-through; font-weight:600; white-space:nowrap; }
.ci-unit { font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; }
.ci-total { font-size:20px; font-weight:800; color:var(--zgreend); letter-spacing:-.01em; line-height:1.1; }
.ci-off { font-size:11.5px; font-weight:800; color:var(--zsoft); white-space:nowrap; }
.btn-shop { display:inline-flex; align-items:center; gap:7px; margin-top:2px; color:var(--zgreen); text-decoration:none; font-weight:700; font-size:13.5px; }
.btn-shop:hover { color:var(--zgreend); text-decoration:underline; text-underline-offset:2px; }

/* ---- recommendation sliders (FBT + Items missed): 3 visible, arrows for more ---- */
.rec { margin-top:18px; }
.rec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.rec h2 { font-size:17px; font-weight:800; color:var(--zgreend); letter-spacing:-.01em; margin-bottom:2px; }
.rec .sub { color:var(--muted); font-size:12.5px; }
.rec-nav { display:flex; gap:8px; flex:0 0 auto; }
.rec-nav button { width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--zgreen); font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.18s; box-shadow:0 2px 8px rgba(16,40,28,.06); }
.rec-nav button:hover { background:var(--zgreen); color:#fff; border-color:var(--zgreen); }
.rec-row { display:flex; gap:16px; overflow-x:auto; padding:2px; scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.rec-row::-webkit-scrollbar { display:none; }
.rec-row .up-card, .rec-row .up-skel { flex:0 0 calc((100% - 28px) / 3); scroll-snap-align:start; }
.up-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; text-align:left; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.up-card:hover { transform:translateY(-3px); box-shadow:0 14px 26px rgba(30,64,34,.08); }
/* SQUARE image preview (matches shop/category/PDP cards) → no layout shift while images load */
.up-thumb { width:100%; aspect-ratio:1/1; border-radius:10px; background:#F3EEE3; overflow:hidden; }
.up-card img { width:100%; height:100%; object-fit:cover; border-radius:10px; background:#F3EEE3; display:block; }
.up-card h4 { font-size:13px; font-weight:700; color:var(--zgreend); margin:9px 0 4px; line-height:1.3; height:34px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.up-card .up-price { display:flex; align-items:baseline; gap:7px; color:var(--zgreend); font-weight:800; font-size:14.5px; margin-bottom:10px; }
.up-mrp { font-size:12px; color:#9aa3a0; text-decoration:line-through; font-weight:500; }
.up-add { margin-top:auto; background:#F3EEE3; color:var(--zgreen); border:1.5px solid var(--zgreen); border-radius:11px; padding:9px 8px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; transition:.18s; }
.up-add:hover { background:var(--zgreen); color:#fff; }
/* skeleton loaders for recommendations (avoid layout shift / blank state) */
.up-skel { border:1px solid var(--line); border-radius:14px; padding:10px; background:#fff; }
.up-skel .sk { background:linear-gradient(90deg,#eee8db 25%,#f4efe4 37%,#eee8db 63%); background-size:400% 100%; border-radius:8px; animation:sksh 1.3s ease infinite; }
.up-skel .sk-img { width:100%; aspect-ratio:1/1; border-radius:10px; }
.up-skel .sk-l1 { height:13px; margin:10px 0 6px; width:90%; }
.up-skel .sk-l2 { height:13px; width:55%; margin-bottom:12px; }
.up-skel .sk-btn { height:34px; }
@keyframes sksh { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.rec-err { font-size:12.5px; color:var(--muted); padding:14px 14px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.rec-err a { color:var(--zgreen); font-weight:800; text-decoration:none; }
.rec-err a:hover { text-decoration:underline; text-underline-offset:2px; }
.rec-err button { background:none; border:none; color:var(--zgreen); font-weight:700; cursor:pointer; text-decoration:underline; margin-left:6px; }
@media (prefers-reduced-motion: reduce){ .up-skel .sk { animation:none; } .ci, .up-card, .btn-checkout { transition:none; } }

/* ---- right Bill Summary — pure white card matching drawer cart ---- */
.summary { background:#fff; border:1px solid #f0ede6; border-radius:18px; position:static !important; top:auto !important; padding:18px 20px 20px; box-shadow:0 14px 34px rgba(16,40,28,.09); }

/* functional coupon input (ZukroCoupon.mountInput) */
.zk-coupon-row { display:flex; gap:8px; margin-top:0; }
.zk-coupon-row input { flex:1; min-width:0; border:1px solid #d6e2d2; border-radius:11px; padding:10px 12px; font:inherit; font-size:13px; background:#fff; }
.zk-coupon-row button { flex:0 0 auto; background:var(--zgreen); color:#fff; border:none; border-radius:11px; padding:0 16px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.zk-coupon-row button:hover { background:#0d2c1f; }
.zk-coupon-applied { margin-top:11px; font-size:13px; font-weight:700; color:var(--zsoft); }
.zk-coupon-applied a { color:var(--red); font-weight:700; margin-left:6px; text-decoration:none; }
.zk-coupon-msg { font-size:12px; margin-top:6px; }

/* compact Coupons & offers at the TOP of the bill summary */
.bs-couponbox { margin-bottom:13px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.bs-coupon-t { font-size:13px; font-weight:800; color:var(--zgreend); margin-bottom:8px; }
.bs-coupon { display:flex; align-items:center; gap:10px; background:#E9F0E7; border:1px solid #d6e2d2; border-radius:11px; padding:9px 13px; }
.bs-coupon-ic { flex:0 0 auto; color:var(--gold); display:inline-flex; }
.bs-coupon-ic i, .bs-coupon-ic svg { width:16px; height:16px; color:var(--gold); }
.bs-coupon-code { flex:1; min-width:0; font-size:15px; font-weight:900; letter-spacing:.05em; color:var(--zgreend); }
.bs-coupon-apply { flex:0 0 auto; font-size:12.5px; font-weight:800; letter-spacing:.03em; color:var(--zsoft); text-decoration:none; background:none; border:none; cursor:pointer; }
.bs-coupon-apply:hover { color:var(--zgreen); text-decoration:underline; text-underline-offset:2px; }

/* bill summary — Blinkit/Zepto flat-row style */
.bs-h { font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.bs-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #f5f0e8; gap:12px; }
.bs-row .lbl { font-size:13.5px; font-weight:500; color:#6b7280; line-height:1.35; }
.bs-row .amt { font-size:13.5px; font-weight:600; color:#111827; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bs-row .amt.grn { color:#1a7a3f; font-weight:700; }
.bs-note { display:block; margin-top:2px; font-size:12px; font-weight:500; line-height:1.35; text-decoration:none; color:#8a9690; }
.bs-note.g { color:#2f7a47; font-weight:600; }
a.bs-note.g:hover { color:var(--zgreen); text-decoration:underline; text-underline-offset:2px; }
.bs-total { display:flex; justify-content:space-between; align-items:center; border-top:4px solid var(--gold); margin-top:0; padding:14px 0 4px; }
/* Remove the last bill-row's bottom border — it would stack with .bs-total's gold top border creating a double line */
.bs-row:has(+ .bs-total) { border-bottom:none; }
.bs-total .lbl { font-size:15px; font-weight:700; color:#111827; }
.bs-total .amt { font-size:16px; font-weight:800; color:#111827; font-variant-numeric:tabular-nums; }
/* Subscribe & Save — shared cream card using --zk-subscribe-* tokens */
.subcard { margin-top:12px; padding:12px 14px; text-align:center; background:var(--zk-subscribe-bg); border:1px solid var(--zk-subscribe-border); border-radius:10px; }
.subcard-t { font-size:13.5px; font-weight:800; letter-spacing:-.01em; color:var(--zgreend); }
.subcard-save { margin-top:4px; font-size:12.5px; font-weight:800; color:var(--zsoft); }
.subcard-setup { display:block; margin-top:2px; font-size:11px; font-weight:500; color:#7c8a7e; }
/* savings chip — green (matches drawer) */
.savings-pill { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px; background:var(--zk-success-bg); color:var(--zgreend); font-weight:700; font-size:12.5px; border-radius:8px; padding:8px 12px; }
.savings-pill i { font-size:12px; }
/* seeds earn note — plain like PDP token-badge-note: no filled card, transparent bg */
.bs-earn-note { display:flex; align-items:center; gap:7px; margin-top:0; padding:9px 0; background:transparent; border-radius:0; border-top:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--zgreend); line-height:1.4; }
.bs-earn-note i { color:var(--zk-seeds-green); font-size:12px; flex-shrink:0; }
.bs-earn-link { color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* teaser shown in cart only — flat row, no inner box */
.bs-online-teaser { display:flex; align-items:center; gap:8px; margin-top:0; background:transparent; border:none; border-radius:0; padding:9px 0; border-bottom:1px solid #f5f0e8; font-size:12px; font-weight:700; color:var(--zgreend); }
.bs-online-teaser i { color:var(--zsoft); font-size:12px; flex:0 0 auto; }
.bs-online-teaser b { color:var(--zsoft); }
/* Trust badges — flat text block (no box), matching drawer cart style. */
.cart-trust { margin-top:10px; padding:10px 0 0; background:transparent; border:none; border-top:1px dashed rgba(18,61,42,.15); border-radius:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; }
.cart-trust span { font-size:11.5px; color:var(--muted); font-weight:700; white-space:nowrap; }
.cart-trust i { color:var(--zsoft); margin-right:4px; }

/* theme-fix.css globally sets a, a:visited { color:#123D2A } at specificity (0,1,0),
   matching .cpn-btn (0,1,0). theme-fix loads after cart-page.css, so it wins for
   visited links → dark-green text on dark-green button = invisible. Bump specificity
   with the element+class selector (0,1,1) so these rules always win. */
a.cpn-btn { color:#fff; }
a.cpn-btn:visited { color:#fff; }
a.cpn-btn:hover, a.cpn-btn:focus { color:#fff; }

/* premium gold checkout CTA (last element in the panel) */
.btn-checkout { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:14px; min-height:54px; border:1px solid #cf8f17; border-radius:12px; background:linear-gradient(135deg,#EFB23A,#D6961C); color:#123D2A; font:inherit; font-weight:800; font-size:16.5px; letter-spacing:-.01em; cursor:pointer; text-decoration:none; box-shadow:0 10px 24px rgba(207,148,33,.32); transition:transform .18s, box-shadow .2s, filter .2s; }
.btn-checkout:hover { filter:brightness(1.04); transform:translateY(-2px); box-shadow:0 14px 30px rgba(207,148,33,.4); color:#123D2A; }
.btn-checkout .co-amt { font-weight:900; color:#123D2A; }

/* ===== drawer-parity modules (FOMO timer · milestone) ===== */
/* freshness / dispatch banner — honest live countdown to the daily 18:00 churn cutoff */
.cp-fomo { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid rgba(232,169,46,.45); border-radius:10px; padding:9px 13px; margin-bottom:12px; font-size:12.5px; font-weight:600; color:var(--zgreend); line-height:1.4; }
.cp-fomo > i { flex:0 0 auto; color:#9a5b12; font-size:13px; }
.cp-fomo b { color:#9a5b12; font-variant-numeric:tabular-nums; }
.cp-ms { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px 28px; margin-bottom:16px; box-shadow:0 4px 14px rgba(16,40,28,.05); }
.cp-ms-head { font-size:13px; font-weight:700; color:var(--zgreend); text-align:center; margin-bottom:16px; }
.cp-ms-track { position:relative; height:8px; background:#ebebeb; border-radius:20px; margin:0 8px; }
.cp-ms-fill { position:absolute; left:0; top:0; height:100%; background:var(--gold); border-radius:20px; transition:width .5s ease; }
.cp-ms-mk { position:absolute; top:50%; transform:translate(-50%,-50%); text-align:center; }
.cp-ms-dot { width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid #cdd8cc; display:flex; align-items:center; justify-content:center; font-size:10px; margin:0 auto; }
.cp-ms-mk.on .cp-ms-dot { background:var(--gold); border-color:var(--gold); color:var(--zgreen); }
.cp-ms-lbl { position:absolute; top:25px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:9.5px; font-weight:700; color:#6a756a; }
.cp-ms-mk.on .cp-ms-lbl { color:var(--zgreend); }
.cp-ms-mk[style*="left:100%"] .cp-ms-lbl { left:auto; right:0; transform:none; }
.cp-ms-mk[style*="left:0%"] .cp-ms-lbl { left:0; transform:none; }

.empty { text-align:center; padding:70px 20px; color:var(--muted); }
.empty i { font-size:54px; color:var(--line); margin-bottom:16px; }
.empty h3 { color:var(--zgreend); }

/* ===== Undo toast (remove-with-undo) ===== */
.zk-undo { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(14px);
    display:flex; align-items:center; gap:14px; background:#123D2A; color:#fff;
    padding:13px 16px 13px 18px; border-radius:12px; font:600 14px/1.4 var(--font-body),Inter,system-ui,sans-serif;
    box-shadow:0 10px 30px rgba(16,24,40,.28); z-index:100000; max-width:92vw;
    opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s; }
.zk-undo.show { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.zk-undo span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zk-undo button { flex:0 0 auto; background:var(--gold); color:#123D2A; border:none; border-radius:8px; padding:7px 14px; font:inherit; font-weight:800; cursor:pointer; }
.zk-undo button:hover { filter:brightness(1.05); }

/* ===== Mobile bottom checkout bar (fixed, safe-area aware) ===== */
.mcheckout { position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
    align-items:center; gap:12px; padding:10px 16px max(10px,env(safe-area-inset-bottom)) 16px;
    background:rgba(255,253,248,.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(16,40,28,.1); }
.mcheckout .mc-totals { flex:1 1 auto; min-width:0; line-height:1.2; }
.mcheckout .mc-lbl { font-size:11px; color:var(--muted); font-weight:600; }
.mcheckout .mc-amt { font-size:20px; font-weight:900; color:var(--zgreend); letter-spacing:-.01em; }
.mcheckout .mc-save { font-size:10.5px; color:var(--zsoft); font-weight:700; }
.mcheckout .btn-checkout { width:auto; flex:0 0 auto; margin-top:0; min-height:48px; padding:0 22px; font-size:15px; }

/* ---- responsive ---- */
@media(max-width:980px){
    .cart-cols { gap:26px; }
    .cart-aside { flex-basis:320px; top:80px; }
}
@media(max-width:768px){
    /* mobile: single column — cart first, summary below; fixed bottom bar drives checkout */
    .cart-cols { flex-direction:column; gap:22px; }
    .zk-cart .cart-cols { padding:16px; border-radius:20px; }
    .cart-aside { flex:1 1 auto; width:100%; position:static; top:auto; }
    .cart-wrap { padding-bottom:96px; }            /* clear the fixed bottom bar */
    body.zk-cart .zk-cart-head,
    body.zk-checkout .zk-cart-head { margin-bottom:18px; min-height:76px; padding:12px 16px; }
    body.zk-cart .zk-steps,
    body.zk-checkout .zk-steps { width:min(100%, 420px); justify-content:space-between; }
    body.zk-cart .zk-step,
    body.zk-checkout .zk-step { padding:11px 16px; font-size:13.5px; }
    .mcheckout.on { display:flex; }                 /* JS adds .on only when cart has items */
    .rec-nav { display:none; }                      /* swipe is natural on touch */
    .rec-row .up-card, .rec-row .up-skel { flex:0 0 58%; }   /* ~1.7 cards peek → clearly swipeable */
}
@media(max-width:560px){
    /* mobile cart item: image + details on top row, single price block full-width below */
    .ci { flex-wrap:wrap; gap:13px; padding:13px; }
    .ci-thumb { flex:0 0 78px; width:78px; height:78px; }
    .ci-price { order:3; flex-basis:100%; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:9px; text-align:left; margin-top:2px; padding-top:11px; border-top:1px dashed var(--line); }
    .ci-total { font-size:18px; }
}
@media(max-width:480px){
    .rec-row .up-card, .rec-row .up-skel { flex:0 0 74%; }
}

/* =====================================================================
   Cart 9+/10 upgrade modules (surgical additions — same farm-fresh tokens)
   Delivery estimate · 4-state coupon · savings/rewards · return promise ·
   guest reassurance · item pack-size/stock · a11y tap targets.
   ===================================================================== */

/* ---- item card: pack-size line, in-stock badge, clickable name ---- */
.ci-info h3 a.ci-name { color:inherit; text-decoration:none; }
.ci-info h3 a.ci-name:hover { color:var(--zgreen); text-decoration:underline; text-underline-offset:2px; }
.ci-info .v { display:flex; align-items:center; gap:6px; }
.ci-info .v i { color:#9aab9f; font-size:11px; }
.ci-info .v-hint { color:#9aa3a0; font-weight:500; }
.ci-flag.ok { color:var(--zsoft); background:rgba(31,122,61,.1); }
.ci-cold-badge { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; color:#1565c0; background:#e3f2fd; border-radius:4px; padding:2px 6px; margin-left:6px; vertical-align:middle; white-space:nowrap; }

/* ---- delivery estimate (pincode → ETA) ---- */
.de { margin-top:14px; padding-top:14px; border-top:1px dashed rgba(232,169,46,.4); }
.de-t { display:block; font-size:13px; font-weight:800; color:var(--zgreend); margin-bottom:8px; }
.de-row { display:flex; gap:8px; }
.de-row input { flex:1; min-width:0; border:1px solid #d6e2d2; border-radius:11px; padding:11px 12px; font:inherit; font-size:14px; background:#fff; color:var(--ink); letter-spacing:.04em; }
.de-row input::placeholder { color:#9aa3a0; letter-spacing:0; }
.de-row button { flex:0 0 auto; min-height:44px; padding:0 18px; background:var(--zgreen); color:#fff; border:none; border-radius:11px; font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; transition:.18s; }
.de-row button:hover { background:#0d2c1f; }
.de-msg { margin-top:8px; }
.de-ok { background:#E9F0E7; border:1px solid #d6e2d2; border-radius:10px; padding:9px 12px; }
.de-ok-l1 { font-size:13.5px; font-weight:700; color:var(--zgreend); }
.de-ok-l1 i { color:var(--zsoft); margin-right:5px; }
.de-ok-l1 b { font-weight:900; }
.de-pin { font-weight:600; color:var(--muted); }
.de-ok-l2 { margin-top:3px; font-size:12px; color:#4d6b58; font-weight:500; }
.de-err { font-size:12.5px; font-weight:700; color:var(--red); }
.de-fine { margin-top:8px; font-size:11.5px; color:#8a9690; font-weight:500; line-height:1.45; }

/* ---- 4-state coupon UI (one clear state at a time) ---- */
.cpn { display:flex; align-items:center; gap:11px; background:var(--zk-offer-bg); border:1px dashed var(--zk-offer-border); border-radius:11px; padding:10px 13px; }
.cpn-applied { background:rgba(31,122,61,.09); border-color:rgba(31,122,61,.3); }
.cpn-ic { flex:0 0 auto; color:var(--gold); display:inline-flex; font-size:16px; }
.cpn-ic.ok { color:var(--zsoft); }
.cpn-line { flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; color:var(--zgreend); line-height:1.3; }
.cpn-line b { font-weight:900; letter-spacing:.03em; color:var(--zk-terracotta); }
.cpn-applied .cpn-line { color:var(--zsoft); }
.cpn-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; background:var(--zgreen); color:#fff; border:none; border-radius:11px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; text-decoration:none; transition:.18s; }
.cpn-btn:hover { background:#0d2c1f; color:#fff; }
.cpn-btn.ghost { background:none; color:var(--red); border:1px solid rgba(154,52,18,.4); }
.cpn-btn.ghost:hover { background:rgba(154,52,18,.08); color:var(--red); }
.cpn-row { display:flex; gap:8px; margin-top:9px; }
.cpn-row input { flex:1; min-width:0; border:1px solid #d6e2d2; border-radius:11px; padding:10px 12px; font:inherit; font-size:13px; background:#fff; }
.cpn-apply { flex:0 0 auto; min-height:40px; padding:0 15px; background:#fff; color:var(--zgreen); border:1.5px solid var(--zgreen); border-radius:11px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; transition:.18s; }
.cpn-apply:hover { background:var(--zgreen); color:#fff; }
.cpn-msg { font-size:12.5px; margin-top:7px; color:var(--muted); }
.cpn-msg.err { color:var(--red); font-weight:700; }
.cpn-msg.err i { margin-right:4px; }
.cpn-footer-c { text-align:center; font-size:12px; font-weight:500; color:var(--muted); margin:9px 0 0; }

/* ---- bill summary: muted (no fake ₹0) coupon line ---- */
.bs-row .amt.muted { color:#8a9690; font-weight:600; }

/* ---- savings & rewards (3 organised groups) — compact, premium ---- */
/* compact single-row "Cart benefits" strip — flat, no inner box */
.cart-benefits { display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:transparent; border:none; border-radius:0; padding:6px 0; margin:4px 0 10px; box-shadow:none; }
#cartRewards { margin:0; padding:0; }
.cb-t { font-size:12px; font-weight:800; color:var(--zgreend); margin-right:2px; }
.cb-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--muted); background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:5px 11px; text-decoration:none; }
.cb-chip i { font-size:11px; color:#9aab9f; }
.cb-chip.on { color:var(--zsoft); background:rgba(31,122,61,.1); border-color:rgba(31,122,61,.25); }
.cb-chip.on i { color:var(--zsoft); }
a.cb-chip:hover { border-color:var(--zgreen); color:var(--zgreen); }
/* one muted "more rewards" note under the grand total (replaces ₹0 reward rows) */
.bs-moremuted { margin-top:8px; font-size:12px; font-weight:600; color:#8a9690; text-align:center; }

/* ---- return & replacement promise ---- */
/* return policy — compact accordion (collapsed by default) */
.cart-policy { background:transparent; border:none; border-radius:0; margin-top:10px; box-shadow:none; border-top:1px dashed rgba(18,61,42,.15); }
.cp-sum { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; }
.cp-sum::-webkit-details-marker { display:none; }
.cp-sum-t { font-size:12.5px; font-weight:700; color:var(--zgreend); }
.cp-sum-t i { color:var(--zsoft); margin-right:6px; }
.cp-toggle { flex:0 0 auto; font-size:12px; font-weight:800; color:var(--zgreen); }
.cart-policy[open] .cp-toggle::after { content:" \2715"; }
.cp-body { padding:0 14px 12px; }
.cp-list { margin:0 0 9px; padding-left:18px; }
.cp-list li { font-size:12px; color:var(--ink); line-height:1.65; }
.cp-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; }
.cp-links a { color:var(--zgreen); font-weight:800; text-decoration:none; }
.cp-links a:hover { text-decoration:underline; text-underline-offset:2px; }
.cp-sep { color:#c4ccc1; }

/* ---- guest checkout reassurance (under CTA) ---- */
.co-reassure { margin-top:11px; text-align:center; font-size:12.5px; font-weight:700; color:var(--zgreend); line-height:1.5; }
.co-reassure i { color:var(--zsoft); margin-right:5px; }
.co-reassure-sub { display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:var(--muted); }

/* ---- coupon body can shrink/wrap without pushing the button off-screen ---- */
.cpn-line { overflow-wrap:anywhere; }

/* ---- accessibility / mobile tap targets (Baymard ≥40px) + no overflow ---- */
@media(max-width:768px){
    .qty button { width:40px; height:40px; font-size:18px; }
    .qty span { height:40px; min-width:40px; font-size:14.5px; }
    .rm { padding:9px 6px; font-size:13.5px; }
    .summary { padding:16px 15px 18px; }
    /* iOS zoom fix: inputs/buttons must be ≥16px to prevent Safari auto-zoom on focus */
    .de-row input, .cpn-row input,
    .zk-coupon-row input { font-size:16px; min-height:44px; }
    .cpn { flex-wrap:wrap; }
    .cpn-btn { min-height:44px; }
    /* coupon button goes full-width once the card wraps → easy tap, no overflow */
    .cpn-btn, .cpn-applied .cpn-btn { flex:1 1 100%; margin-top:4px; }
    .cart-benefits, .cart-policy { margin-left:0; margin-right:0; }
}
@media(max-width:430px){
    /* narrow phones: stop the cart card's price row + controls from overflowing */
    .cart-wrap { width:94%; }
    .ci-info h3 { font-size:15px; }
    .de-row button { padding:0 14px; }
    .cpn-line { font-size:12.5px; }
    .mcheckout .mc-amt { font-size:18px; }
    .mcheckout .btn-checkout { padding:0 16px; font-size:14px; }
}

/* ================================================================
   FLAT + TERRACOTTA — cart v21 (global; approved)
   Removes ALL shadows on cart (desktop + mobile) and switches
   validation/error to terracotta. Brand green/gold/cream kept =
   current site (#123D2A / #EFB23A / #FBF8F2). Borders carry
   separation. !important beats farm-theme.css / theme-fix.css
   bleed-in (they load after this file). Also flattens the shared
   stepper pill on cart + checkout. No layout/pricing changes.
   ================================================================ */
.zk-cart {
    /* Unified to the canonical brick #9a3412 family (was #A65A3A/#C97558). */
    --zukro-warning:        var(--zk-danger);
    --zukro-warning-border: var(--zk-danger-border);
    --zukro-warning-bg:     var(--zk-danger-bg);
}

/* ---- No shadows anywhere on the cart ---- */
.zk-cart .cart-cols,
.zk-cart .empty,
.zk-cart .ci,
.zk-cart .ci:hover,
.zk-cart .up-card,
.zk-cart .up-card:hover,
.zk-cart .up-skel,
.zk-cart .summary,
.zk-cart .btn-checkout,
.zk-cart .btn-checkout:hover,
.zk-cart .cp-ms,
.zk-cart .rec-nav button,
.zk-cart .zk-undo,
.zk-cart .mcheckout,
body.zk-cart .zk-steps,
body.zk-checkout .zk-steps,
body.zk-cart .zk-step.on,
body.zk-checkout .zk-step.on {
    box-shadow:none !important;
}

/* Borders restore separation where the shadow was the only divider */
.zk-cart .cart-cols,
.zk-cart .empty { border:1px solid var(--line); }
.zk-cart .zk-undo { border:1px solid rgba(255,255,255,.18); }

/* farm-theme.css loads AFTER this file and marks these shadows !important,
   so equal-specificity overrides above lose by source order. Beat them with
   the extra `body` type selector (higher specificity wins regardless of order). */
body.zk-cart .ci:hover,
body.zk-cart .summary,
body.zk-cart .up-card:hover,
body.zk-cart .cart-trustbar { box-shadow:none !important; }

/* ---- Terracotta validation / error (no red) ---- */
.zk-cart .de-err,
.zk-cart .cpn-msg.err { color:var(--zukro-warning) !important; }
.zk-cart .cpn-msg.err i { color:var(--zukro-warning) !important; }
.zk-cart .cpn-btn.ghost {
    color:var(--zukro-warning) !important;
    border-color:var(--zukro-warning-border) !important;
}
.zk-cart .cpn-btn.ghost:hover {
    background:var(--zukro-warning-bg) !important;
    color:var(--zukro-warning) !important;
}
.zk-cart .ci-flag.oos {
    color:var(--zukro-warning) !important;
    background:var(--zukro-warning-bg) !important;
}
.zk-cart .ci.is-oos { border-color:var(--zukro-warning-border) !important; }

/* ---- 320px safety: trust line wraps, never overflows ---- */
@media(max-width:360px){
    .zk-cart .cart-trust span { font-size:10.5px; }
    .zk-cart .cart-trust { gap:4px 10px; }
}