/* Semantic colours the base palette in sf/style.css does not carry. Declared here
   rather than there so sf/style.css stays untouched; the dark block mirrors the one at
   sf/style.css:64 so these follow the theme like every other token. */
:root {
    --okC:    #16a34a;   /* success / money saved */
    --okBg:   #f4faf6;
    --okBdr:  #cfe7d8;
    --errC:   #dc2626;
    --errBg:  #fef2f2;
    --errBdr: #fca5a5;
    --warnC:  #8a5300;
    --warnBg: #fff4e5;
}
[data-theme="dark"] {
    --okC:    #4ade80;
    --okBg:   #1f3325;
    --okBdr:  #2f5138;
    --errC:   #f87171;
    --errBg:  #3a2323;
    --errBdr: #7f3838;
    --warnC:  #fbbf24;
    --warnBg: #3a3020;
}

/* =========================================================================
   TEMPORARY CART/CHECKOUT STYLES
   To remove: delete this file + the four <link> tags marked "cart-temp" in
   add-to-cart.php, cart-load.php, checkout.php, payment.php.
   Scoped to cart-specific IDs/classes; safe to drop.
   ========================================================================= */

/* Page-level width rhythm. These blocks carry class="container", which is undefined in
   the stylesheets these pages load (sf/style.css) — so they spanned the full viewport and
   lined up with neither the header nor each other. Mirrors .tc/.tp in sf/style.css:96. */
/* Only .cart-progress-wrapper still needs this. It renders OUTSIDE .content.sb.pM2 (see the
   #cart-progress-indicator div above <div class="content">), so nothing else centres it.
   .cart-layout and .continue-shopping-wrapper are INSIDE that panel, which already supplies
   max-width:1400px (.sb) and the horizontal padding (.pM2 — 10/15px, 25/40px above 500px).
   Keeping these declarations on them stacked a second inset on top of the panel's: 40px + 25px
   per side on desktop, which is what narrowed the content once checkout.php gained .sb.pM2. */
.cart-progress-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 13px;
    box-sizing: border-box;
}
@media all and (min-width:500px) {
    .cart-progress-wrapper { padding: 0 25px; }
}
@media all and (min-width:1440px) {
    .cart-progress-wrapper { padding: 0; }
}

/* Full width of the panel they sit in; the panel owns the gutter. */
.cart-layout,
.continue-shopping-wrapper { width: 100%; box-sizing: border-box; }
/* Breathing room under the step indicator — margin, not padding, because the two media
   queries above reset padding wholesale and would wipe a vertical value. */
.cart-progress-wrapper { margin-top: 14px; margin-bottom: 22px; }

/* Step indicator skin — markup comes from renderCartProgress() in cart-manager.js */
.cart-progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sBg);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.progress-step { flex: 1; text-align: center; position: relative; }
.progress-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    /* was 16px for the digits; the icons that replaced them need the extra size in a 40px circle */
    font-size: 20px;
}
.progress-step-circle.active   { background: var(--okC); color: #fff; }
.progress-step-circle.inactive { background: var(--g2);    color: var(--sTx); }
.progress-step-label           { margin-top: 8px; font-size: 13px; }
.progress-step-label.active    { font-weight: 600; color: var(--okC); }
.progress-step-label.inactive  { color: var(--sTx); }
.progress-connector        { flex: .3; height: 2px; background: var(--g2); margin: 0 10px; position: relative; top: -15px; }
.progress-connector.active { background: var(--okC); }

/* Shared two-column shell — add-to-cart.php (items) and checkout.php (address form) left, summary right */
.cart-layout { display:flex; gap:20px; align-items:flex-start; }
.cart-left   { /*flex:2;*/ flex:0 0 calc(70% - 20px); min-width:0; }
/* flex:1 already means `1 1 0%`; the flex-shrink:0 that followed cancelled the shrink, so the
   rail could force the row wider than its shell instead of giving ground. A flex-basis keeps
   the original intent — a summary rail that stays readable — without a hard width. */
.cart-right  { /*flex:1 1 320px; */ flex: 0 0 calc(30% - 20px); max-width:420px; min-width: 0; position:sticky; top:16px; }
/* .card-2 is undefined in the loaded stylesheets, so the coupon card rendered as naked text
   beside the bordered #billing card. Give every right-rail card the same skin as #billing. */
.cart-right .card-2 {
    box-sizing: border-box;
    padding: 16px;
    margin-bottom: 10px;
    background: var(--bxBg);
    border: 1px solid var(--bxBdrC);
    border-radius: 6px;
}
/* .cart-right #billing { padding: 16px; }  was 18px — match the sibling card */
/* #upd's own padding indented the left column while the right column sat flush — kill it
   inside the flex shell so both columns start on the same line.
   Both selectors are needed: on cart.php and checkout.php #upd is a CHILD of .cart-left, but
   on payment.php it IS .cart-left (<div id="upd" class="cart-left">), which a descendant
   selector alone never matches. */
.cart-left #upd,
.cart-left#upd { padding: 0; }
/* RESTORED: this whole span was deleted by mistake while trimming the form#checkout
   overrides — the anchor matched inside `.cart-left form#checkout` and took everything
   behind it, including the mobile stacking rule below. Colours tokenised to match the
   rest of the file; only the misaligning form overrides were meant to go, and they did. */
@media(max-width:768px) {
    /* align-items:flex-start is set for the ROW layout, where the cross axis is vertical and
       it only stops the columns stretching to equal height (which is what lets .cart-right
       stick). Once direction flips to column the cross axis is HORIZONTAL, and the same
       declaration sizes both children to their content width instead of the container:
       cart.php's wide item cards overflowed, checkout.php's narrower form shrank. Reset it
       here, and pin both children to 100% so neither depends on alignment at all. */
    .cart-layout { flex-direction:column; align-items:stretch; }
    .cart-left,
    .cart-right  { width:100%; max-width:none; flex:none; }
    .cart-right  { position:static; }
}

/* Layout — keep #upd (items) and #billing (summary) side by side on desktop */
/* #upd {
    box-sizing: border-box;
    padding: 12px;
    font-size: 15px;
} */
#billing {
    box-sizing: border-box;
    /* padding: 18px; */
    background: var(--bxBg);
    /* border: 1px solid var(--bxBdrC); */
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.55;
    /* No fixed width. This sits inside .cart-right on cart/checkout and IS .cart-right on
       payment.php, so a hard 400px fought the flex basis on desktop and would have overflowed
       a 360px phone the moment the column stacked. Rail width belongs to .cart-right alone. */
    width: 100%;
}

#billing .left  { display: inline-block; }
#billing .right { float: right; }
#billing .clear { clear: both; height: 6px; }
#billing .container.grey {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bxBdrC);
    font-weight: 600;
    font-size: 17px;
}
#billing h4 { margin: 8px 0; font-size: 16px; }
#billing h5 { margin: 6px 0; font-size: 14px; }
#billing > *:first-child { margin-top: 0 }
/* Item cards */
.row-padding.card-2 {
    background: var(--bxBg);
    border: 1px solid var(--bxBdrC);
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 15px;
}
.row-padding.card-2 img {
    max-width: 110px !important;
    max-height: 110px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 4px;
    object-fit: cover;
}
.row-padding.card-2 h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}
.row-padding.card-2 h5 a { color: var(--bxTx); text-decoration: none; }
.row-padding.card-2 h5 a:hover { text-decoration: underline; }

/* Qty stepper has no rules here — the cart uses product.php's .qtyWrp component,
   skinned by sf/style.css:860-869 (disabled state included). */

/* Remove button */
.row-padding.card-2 .remove {
    background: transparent;
    color: var(--errC);
    border: 1px solid var(--errBdr);
    border-radius: 3px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
}
.row-padding.card-2 .remove:hover { background: var(--errBg); }

/* Primary action buttons — shared class across cart, cart-load, checkout, payment.
   Use the class instead of #checkout to avoid collision with checkout.php's <form id="checkout">. */
.button.green.buy, button#checkout, button#buy, input#buy {
    width: 100%;
    padding: 13px 18px;
    background: var(--okC);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}
.button.green.buy:hover, button#checkout:hover, button#buy:hover, input#buy:hover {
    filter: brightness(0.9);
}
.button.green.buy:disabled, button#checkout:disabled, button#buy:disabled, input#buy:disabled {
    background: var(--g3);
    cursor: not-allowed;
}

#apply-coupon {
    background: var(--sAs);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 14px;
}
#apply-coupon:hover { filter: brightness(0.9); }

#coupon-code {
    border: 1px solid var(--bxBdrC);
    border-radius: 3px;
    padding: 9px;
    font-size: 15px;
}

#coupon-message div {
    border-radius: 3px;
    padding: 7px 9px;
    font-size: 13px;
}

/* Empty cart */
.empty-cart-container {
    text-align: center;
    padding: 44px 20px;
    background: var(--bxBg);
    border: 1px dashed var(--bxBdrC);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);  /* carried over from cart-manager.js — never overridden here, so it was live */
}
.empty-cart-icon { font-size: 52px; margin-bottom: 10px; }
.empty-cart-title { margin: 6px 0; font-size: 20px; color: var(--pTx); }
.empty-cart-message { color: var(--sTx); font-size: 15px; margin: 0 0 30px; }

/* Continue shopping button — horizontal padding comes from the page-level rule above */
.continue-shopping-wrapper { padding-top: 10px; padding-bottom: 10px; }
.btn-continue-shopping {
    background: transparent;
    border: 1px solid var(--bxBdrC);
    border-radius: 3px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--pTx);
    /* carried over from cart-manager.js — these four were never overridden here, so they were live */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .3s;
}
.btn-continue-shopping:hover { background: var(--g1); }
.btn-continue-shopping .arrow-icon { font-size: 18px; }

/* checkout.php's controls inherit the design-system input styling from sf/style.css
   (full width, --bxBg / --bxBdrC, 8px radius, --sAs focus ring) — the same styling every
   control on cart.php gets. The block that used to sit here re-declared all of it at a
   different radius with its own focus ring, and three of its rules were what pulled the
   form out of alignment:
     - `margin: 4px 0 10px` on every input stacked on top of .fld's own margin, so rows
       with a <small> and rows without ended up on different rhythms;
     - `label { display: inline-block }` outranked .chkLbl (id+element beats one class),
       so the save-address checkbox and its text never lined up;
     - a background + border + padding on the form itself drew a second card inside
       .content.sb.pM2 — a box within a box, which cart.php never had.
   Only what the base sheet genuinely lacks is kept below. */
form#checkout {
    margin: 0;
    font-size: 15px;
}

/* [readonly] is not [disabled]; sf/style.css styles the latter only. */
form#checkout input[readonly] {
    background: var(--g1);
    color: var(--sTx);
    cursor: not-allowed;
}

/* Pincode "not serviceable" message */
#pinMsg {
    color: var(--errC);
    font-size: 13px;
    margin: 2px 0 8px;
}

/* Override the inline qty input style inside the checkout form clone (it lives inside #upd
   but here it's never editable in #checkout — keep narrow so the row aligns) */
form#checkout .qty { width: 56px !important; }

/* ── Cart list footer — savings pill + running totals under the item list ─────────────
   Built by _bldCartListFooter() in cart-manager.js, painted into #cart-list-foot.
   The container carries no skin, so an empty cart leaves no stray box. */
.cl-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--bxBg);
    border: 1px solid var(--bxBdrC);
    border-radius: 6px;
    font-size: 15px;
}
/* margin-left:auto keeps the number column pinned right */
.cl-foot-lines { margin-left: auto; min-width: 240px; }
.cl-foot-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 3px 0;
    color: var(--pTx);
}
.cl-foot-row--save { color: var(--okC); }
/* Same weight/size as #billing .container.grey so both totals read as the same number */
.cl-foot-row--total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--bxBdrC);
    color: var(--bxTx);
    font-weight: 600;
    font-size: 17px;
}

/* Mobile: the strip detaches into a sticky bottom bar carrying only the final total — the
   breakdown rows would just repeat the #billing card, which stacks right below the item list
   at this width. body.has-cart-foot (toggled in _renderCartListFooter) reserves the height so
   the bar never covers the store footer. */
@media (max-width: 768px) {
    body.has-cart-foot { padding-bottom: 74px; }
    .cl-foot {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        margin: 0;
        padding: 10px 14px;
        border: 0;
        border-top: 1px solid var(--bxBdrC);
        border-radius: 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,.08);
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .cl-foot-lines { min-width: 0; }
    .cl-foot-row { display: none; }
    .cl-foot-row--total {
        display: flex;
        margin: 0;
        padding: 0;
        gap: 10px;
        border-top: 0;
        font-size: 16px;
    }
}

/* Gift note sits inline after the price, where a paid row prints its [25% Off] badge.
   Own slot rather than the Discount Percent one, whose ::before/::after wrap it in [brackets].
   Size matches the Unit Price slot beside it; colour is left to inherit. */
#upd > div [aria-label="Gift Note"] { margin-left: 6px; font-size: 0.8rem; }

/* ── Offer panel — Shopify/Polaris-flavoured ──────────────────────────────────────────
   Every bl-* class the cart-manager builders emit had zero CSS until now, which is why the
   panel rendered as 15px inherited text with native buttons.
   Scoped under #billing so these rules only reach the right rail, and so they outrank the
   `#billing h4 { margin:8px 0; font-size:16px }` above (id+class beats id+type).
   Sections run flush to the panel edges rather than sitting as inset cards — the panel has no
   side padding, so a bordered card would double up against the panel's own border. */
/* 9px top + the panel's own 1px border puts the first line at 10px — the same offset as the
   item row's --cartPad next door, so both columns start level whatever renders first: an
   offer card, an applied block, or a bare "Item total" row when there are no offers. */
#billing {
    padding: 0;
    --bl-bd:      var(--bxBdrC);   /* section rule */
    --bl-bd-soft: var(--bxBdrC);   /* row rule */
    --bl-txt:     var(--pTx);
    --bl-txt-2:   var(--sTx);
    --bl-chip:    var(--g1);
    --bl-ok:      var(--okC);   /* money saved — the only place colour is spent */
    --bl-link:    var(--sAs, #1380fd);
}

/* Available / switch offers */
/* #billing .bl-offer-card {
    margin: 0 0 12px;
    border-bottom: 1px solid var(--bl-bd);
    background: var(--bxBg);
} */
#billing .bl-offer-card {
  margin: 0 0 12px;
  background: whitesmoke;
  padding: 8px 0 0 0;
  border-radius: 10px;
  border-left: 5px solid #4ed2d245;
}
#billing .bl-offer-card-hdr {
    margin: 0;
    padding: 0 12px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bl-txt-2);
}
/* The header is a label, not an icon row */
#billing .bl-offer-card-hdr .mIcon { display: none; }

#billing .bl-offer-row {
    display: flex;
    /* align-items: flex-start; */
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--bl-bd-soft);
}
#billing .bl-offer-row > div { flex: 1; min-width: 0; }

/* The code chip — the signature Shopify element. Tag glyph via the GMS36 ligature so no
   markup change is needed to get an icon inside the pill. */
#billing .bl-offer-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--okBg);
    color: var(--bl-txt);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    /* The chip is an inline-flex box with vertical padding, so its baseline sits below the
       plain text beside it. Centring both on the same axis is what lines them up. */
    vertical-align: middle;
}
#billing .bl-offer-code::before {
    content: "sell";
    font-family: 'GMS36';
    /* font-weight must be 400 — the chip is 600, and a synthetic bold distorts the glyph.
       Both liga spellings, matching the .ecsIS::before pattern already in style.css. */
    font-weight: 400;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    font-size: 14px;
    line-height: 1;
    direction: ltr;
    white-space: nowrap;
    color: var(--bl-txt-2);
}
#billing .bl-offer-text { margin-left: 6px; font-size: 13px; color: var(--bl-txt-2); vertical-align: middle; }
#billing .bl-offer-save { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--bl-ok); }
#billing .bl-offer-note { margin-top: 2px; font-size: 11px; color: var(--bl-txt-2); }
#billing .bl-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--warnBg);
    color: var(--warnC);
    font-size: 11px;
    font-weight: 600;
}
#billing .bl-login-badge .mIcon { font-size: 12px; top: 0; }

/* Buttons are text links, not filled rectangles — the filled treatment is reserved for
   "Proceed to Checkout", which is what makes that button read as the primary action. */
#billing .bl-btn {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--bl-link);
    cursor: pointer;
}
#billing .bl-btn:hover { text-decoration: underline; }
#billing .bl-btn--login {
    padding: 5px 10px;
    border: 1px solid var(--bl-bd);
    border-radius: 6px;
    font-size: 12px;
    color: var(--bl-txt);
}
#billing .bl-btn--login:hover { background: var(--g1); text-decoration: none; }
#billing .bl-btn--remove { font-size: 12px; font-weight: 500; color: var(--bl-txt-2); }

/* Applied — a settled state, not an action. Tinted so it reads differently from the
   white "available" sections without shouting. */
#billing .bl-applied {
    margin: 0 0 12px;
    padding: 12px;
    border-top: 1px solid var(--okBdr);
    border-bottom: 1px solid var(--okBdr);
    background: var(--okBg);
}
#billing .bl-applied-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#billing .bl-applied-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--bl-txt);
}
#billing .bl-applied-title .mIcon { font-size: 15px; top: 0; color: var(--bl-ok); }
#billing .bl-applied-msg  { margin-top: 4px; font-size: 13px; color: var(--bl-txt-2); }
#billing .bl-applied-note { margin-top: 2px; font-size: 11px; color: var(--bl-txt-2); }
#billing .bl-applied-rule {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--bl-txt-2);
}
#billing .bl-applied-rule .mIcon { font-size: 13px; top: 0; }
#billing .bl-applied .left,
#billing .bl-applied .right { padding: 0; font-size: 13px; font-weight: 600; }

/* Per-item breakdown inside an applied offer */
#billing .bl-applied-items {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--okBdr);
}
#billing .bl-applied-items-hdr {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bl-txt-2);
}
#billing .bl-applied-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--bl-txt);
}
#billing .bl-applied-item-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#billing .bl-applied-item-qty   { flex: 0 0 auto; color: var(--bl-txt-2); }
#billing .bl-applied-item-price { flex: 0 0 auto; white-space: nowrap; }
#billing .bl-applied-item-price s { color: var(--bl-txt-2); }

/* Money rows sit flush like the sections, so pad them to the same 12px inner gutter */
#billing .left  { padding-left: 12px; }
#billing .right { padding-right: 12px; }
#billing .bl-color-green { color: var(--bl-ok); }
#billing .bl-color-teal  { color: var(--okC); }
#billing .bl-color-amber { color: var(--warnC); }
#billing .bl-strike { text-decoration: line-through; color: var(--bl-txt-2); }

/* Qty stepper — moved from cart.php's inline <style> so cart-load.php (and checkout.php) get it too */
.pQty { display:flex !important; align-items:center !important; gap:10px !important; }
.pQty-button { width:28px !important; height:28px !important; flex:0 0 auto !important; border:1px solid var(--bxBdrC) !important; border-radius:50% !important; background:var(--bxBg) !important; cursor:pointer !important; position:relative !important; padding:0 !important; }
.pQty-button::before { content:""; position:absolute !important; top:50% !important; left:50% !important; width:12px !important; height:2px !important; background:var(--pTx) !important; transform:translate(-50%,-50%) !important; }
.pQty-plus::after { content:""; position:absolute !important; top:50% !important; left:50% !important; width:2px !important; height:12px !important; background:var(--pTx) !important; transform:translate(-50%,-50%) !important; }
.pQty-text { width:2ch !important; border:none !important; outline:none !important; background:none !important; text-align:center !important; font-size:14px !important; -moz-appearance:textfield !important; appearance:textfield !important; padding:0 !important; box-shadow:none !important; }
.pQty-text::-webkit-outer-spin-button,.pQty-text::-webkit-inner-spin-button { -webkit-appearance:none !important; margin:0 !important; }

/* ── Layout primitives ─────────────────────────────────────────────────────────────
   checkout/cart/payment were marked up with a W3.CSS-style grid (col s12 l6, .section)
   that is defined in NO stylesheet this storefront ships — so every "two column" row was
   really a full-width block. These are the real equivalents, named to match the system in
   sf/style.css rather than the dead framework. */

.frmRw {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 14px;
}
/* One full-width field in a row of its own. */
.frmRw.one { grid-template-columns: 1fr; }

/* Field wrapper — owns the vertical rhythm so inputs do not need margins of their own. */
.fld { margin: 0 0 12px; min-width: 0; }
.fld small { display: block; margin-top: 2px; color: var(--sTx); font-size: .78rem; }

/* Panel: the card skin used by .crdol, without the product-card layout. */
.pnl {
    background: var(--bxBg);
    color: var(--bxTx);
    border: var(--bxBdrSz, 1px) solid var(--bxBdrC);
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 16px;
}
.pnl-hd {
    font-weight: 600;
    color: var(--pTx);
    margin: 0 0 10px;
}

/* Saved-address cards — were 5 inline style attributes each. */
.addrGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.addrCard {
    border: 1px solid var(--bxBdrC);
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 200px;
    max-width: 260px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    background: var(--bxBg);
    color: var(--bxTx);
}
.addrCard:hover { border-color: var(--bxBdrHC); }
.addrCard.sel { border-color: var(--okC); background: var(--okBg); }
.addrCard-nm { font-weight: 600; }
.addrCard-df { color: var(--okC); font-size: 11px; }

/* "+ Add new address" — was an inline-styled button. */
.btnGhost {
    margin-top: 10px;
    background: var(--bxBg);
    color: var(--sAs);
    border: 1px solid var(--bxBdrC);
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
}
.btnGhost:hover { border-color: var(--sAs); }

/* Checkbox + label on one line (was an inline style attribute). */
.chkLbl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }

/* Billing summary lines that carry meaning through colour. */
#billing .bill-ok   { color: var(--okC); }
#billing .bill-warn { color: var(--warnC); }

/* Order-summary loading state — markup was 3 inline style attributes plus a <style> tag. */
.sumLoad { padding: 30px; text-align: center; color: var(--sTx); font-size: 13px; }
.sumLoad-sp {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--g1);
    border-top-color: var(--sAs);
    border-radius: 50%;
    animation: cartSpin 0.8s linear infinite;
}
.sumLoad-tx { margin-top: 10px; }
@keyframes cartSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sumLoad-sp { animation: none; } }

/* Checkout CTA stack. */
.checkout-buttons { display: flex; flex-direction: column; gap: 10px; }
.checkout-buttons .button.buy,
.checkout-buttons input#buy { width: 100%; margin: 0; }

/* WhatsApp CTA — brand colour is fixed by WhatsApp, so it stays a literal. */
.wa-checkout-btn {
    background: #25D366;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wa-checkout-btn:hover { filter: brightness(0.95); }

/* Blocking stock-issue banner above the checkout form (built in checkout.php). */
.stkBanner {
    background: var(--errBg);
    border: 1px solid var(--errBdr);
    color: var(--errC);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
}
.stkBanner ul { margin: 6px 0 0 18px; }

/* Coupon box in the cart sidebar (cart.php). */
.cpn-hd  { margin: 0 0 10px; font-size: 14px; font-weight: 600; padding: 0; }
.cpn-row { display: flex; gap: 8px; }
.cpn-row #coupon-code { flex: 1; min-width: 0; }
.cpn-row #apply-coupon { white-space: nowrap; }
#coupon-message { margin-top: 8px; font-size: 12px; }

/* ── Payment method chooser (payment.php) ──────────────────────────────────────── */
.payOpt-hd { margin: 0 0 15px; padding: 0; font-size: 1.1rem; }
.payOpt { margin: 10px 0; }
.payOpt label { display: inline; cursor: pointer; font-weight: 400; color: var(--pTx); }
.payOpt-note { color: var(--sTx); }
.payOpt-hint { display: block; margin-left: 24px; color: var(--sTx); }

/* Razorpay sandbox flag — amber is the warning token, not a one-off orange. */
.payOpt-test {
    background: var(--warnC);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 5px;
}

.payOpt-none {
    padding: 12px;
    background: var(--errBg);
    color: var(--errC);
    border-radius: 6px;
}

.pay-cta { margin-top: 20px; }
.payProc { text-align: center; padding: 20px; }

/* Struck-through original shipping cost when free shipping applies. */
#billing .bill-strike { text-decoration: line-through; color: var(--sTx); }

/* Link inside the blocking stock banner. */
.stkBanner-lnk { color: var(--errC); text-decoration: underline; }

/* ── Cart row on narrow screens ─────────────────────────────────────────────────────
   The row (#upd>div, skinned in sf/style.css:918) is a single non-wrapping flex line, and
   every column except the name is flex:0 0 auto — image, .pQty, Total Price, Remove. So the
   whole shortfall lands on [aria-label="Product Name"], which carries min-width:0 and
   therefore collapses to nothing: the title, unit price and discount then wrap one character
   per line. Let the row wrap and give the name a real floor. */
@media (max-width: 768px) {
    #upd > div {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    /* Basis + floor: wide enough to read, and it can no longer be squeezed below 10ch. */
    #upd > div [aria-label="Product Name"] {
        flex: 1 1 55%;
        min-width: 10ch;
    }
    /* Controls drop to their own line and sit right, clear of the name. */
    #upd > div .pQty { margin-left: auto; }
}



#upd { container: cartlist / inline-size; }
@container cartlist (max-width: 560px) {
    #upd > div { flex-wrap: wrap; row-gap: 8px; }
    #upd > div [aria-label="Product Name"] { flex: 1 1 55%; min-width: 10ch; }
    #upd > div .pQty { margin-left: auto; }
}

#upd > div { flex-wrap: wrap; }
#upd > div [aria-label="Stock Warning"] { flex: 0 0 100%; }