/* Appearance Studio → Product cards. data-pp-fit = Classic's automatic fit (ProductPresentation.Photo); a shop
       style's own rule can still win over it, as before. data-pp-pick-* = what the seller picked
       (ProductPresentation.PickAttributes), on every layout: in a cascade layer, so these !important rules beat every
       unlayered one (layout CSS, the Luxe/Rect/Elegant shop styles) whatever their specificity. Global on purpose —
       the layout components' cards carry them too. */
    [data-pp-fit="contain"] img { object-fit:contain !important; }
    [data-pp-fit="cover"] img { object-fit:cover !important; }
    @layer pp-pick {
        /* height:auto so boxes a layout sizes by a fixed height (food crates) take the shape too. */
        [data-pp-pick-ratio] { height:auto !important; }
        [data-pp-pick-ratio="3/4"] { aspect-ratio:3/4 !important; }
        [data-pp-pick-ratio="1/1"] { aspect-ratio:1/1 !important; }
        [data-pp-pick-ratio="4/3"] { aspect-ratio:4/3 !important; }
        [data-pp-pick-fit="contain"] img { object-fit:contain !important; }
        [data-pp-pick-fit="cover"] img { object-fit:cover !important; }
    }
    /* Narrow cart drawers need a real price column. The old flex row let the quantity controls
       squeeze currency values down to a few characters. */
    .store-mobile-cart-product .cart-unit-price { white-space:nowrap; min-width:max-content; }
    /* A disabled primary button in the cart/checkout stays readable (the global .btn:disabled only fades it,
       which left white text on a pale tint). */
    #cart-drawer .btn-brand:disabled, #cart-drawer .btn-brand[disabled] {
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)) !important;
        color:color-mix(in srgb, var(--s-ink, #1f1a24) 72%, var(--s-surface, #fff)) !important;
        border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 18%, var(--s-surface, #fff)) !important;
        opacity:1 !important; box-shadow:none !important; filter:none !important; }

    /* ── Checkout "Details → Payment" (standard delivery stores). Phones and narrow screens get one column with a
       sticky Total bar; at 900px+ the modal widens (#cart-drawer.co-wide) and the Details step becomes the whole
       checkout on one page (#cart-drawer.co-one). ── */
    .co-desk-only, .co-desk-flex, .co-desk-inl, .co-paycol { display:none; }
    .co-h { font-size:1.3rem; font-weight:800; color:var(--s-ink); margin:0 0 1rem; }
    .co-eyebrow { font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--s-ink-muted); margin:0 0 .65rem; }
    .co-field { margin-bottom:.95rem; }
    .co-label { display:block; font-size:.85rem; font-weight:700; color:var(--s-ink); margin:0 0 .4rem; }
    .co-label i { font-style:normal; font-weight:500; color:var(--s-ink-muted); }
    .co-input { display:block; width:100%; box-sizing:border-box; min-height:48px; padding:.7rem .95rem; border-radius:12px;
        border:1.5px solid color-mix(in srgb, var(--s-ink, #1f1a24) 16%, var(--s-surface, #fff));
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff));
        font-family:inherit; font-size:16px; line-height:1.3; color:var(--s-ink); outline:none; }
    select.co-input { appearance:auto; }
    .co-input::placeholder, .co-pin input::placeholder { color:color-mix(in srgb, var(--s-ink, #1f1a24) 42%, var(--s-surface, #fff)); }
    .co-input:focus, .co-input:focus-within { border-color:var(--s-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--s-primary) 18%, transparent); }
    .co-input.co-bad { border-color:#dc2626; }
    .co-pin { display:flex; align-items:center; gap:.6rem; padding-top:0; padding-bottom:0; }
    .co-pin input { flex:1; min-width:0; border:0; background:transparent; outline:none; font:inherit; color:inherit; padding:.7rem 0; }
    .co-place { flex-shrink:0; max-width:66%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:none; border:0; padding:0;
        font:inherit; font-size:.88rem; font-weight:700; color:#15803d; cursor:pointer; }
    .co-place.muted { color:var(--s-ink-muted); font-weight:500; cursor:default; }
    .co-place.warn { color:#b45309; cursor:default; }
    .co-pair { display:grid; grid-template-columns:4rem minmax(0,1fr); gap:.6rem; }
    /* The country code box: just wide enough for "+1264", so the number gets the room. */
    .co-pair > .co-input:first-child { padding-left:.45rem; padding-right:.45rem; text-align:center; }
    .co-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.6rem; }
    .co-hint { font-size:.82rem; color:var(--s-ink-muted); margin:.4rem 0 0; }
    /* Cart (every store but Omish, which keeps its grocery controls): the same look as checkout. */
    .ct-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin:0 0 .9rem; }
    .ct-title { display:flex; align-items:baseline; gap:.55rem; margin:0; font-size:1.3rem; font-weight:800; color:var(--s-ink); }
    .ct-title small { font-size:.82rem; font-weight:600; color:var(--s-ink-muted); }
    .ct-head-actions { display:flex; align-items:center; gap:.85rem; }
    .ct-confirm { margin:0 0 1rem; padding:12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff));
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff)); }
    .ct-confirm p { margin:0 0 8px; font-size:.86rem; font-weight:700; color:var(--s-ink); }
    .ct-confirm div { display:flex; gap:8px; }
    .ct-confirm .op-btn { padding:.55rem; font-size:.85rem; }
    .ct-row { display:flex; align-items:center; gap:.9rem; padding:.9rem 0; border-bottom:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 9%, var(--s-surface, #fff)); }
    .ct-row:first-of-type { padding-top:.2rem; }
    .ct-thumb { width:64px; height:80px; object-fit:cover; border-radius:10px; flex-shrink:0; cursor:pointer;
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 5%, var(--s-surface, #fff)); }
    .ct-info { flex:1; min-width:0; display:grid; gap:2px; justify-items:start; }
    .ct-info > * { max-width:100%; }
    .ct-name { font-size:.92rem; font-weight:700; line-height:1.3; color:var(--s-ink); cursor:pointer; }
    .ct-name:hover { text-decoration:underline; text-underline-offset:2px; }
    .ct-variant { font-size:.78rem; color:var(--s-ink-muted); }
    .ct-unit { font-size:.82rem; color:var(--s-ink-muted); font-variant-numeric:tabular-nums; }
    .ct-remove { margin-top:.25rem; font-size:.78rem !important; text-decoration:underline; text-underline-offset:3px; }
    .ct-qty { display:inline-flex; align-items:center; flex-shrink:0; border-radius:999px;
        border:1.5px solid color-mix(in srgb, var(--s-ink, #1f1a24) 14%, var(--s-surface, #fff)); }
    .ct-qty-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:0; background:none; border-radius:50%;
        font:inherit; font-size:1.1rem; font-weight:700; line-height:1; color:var(--s-ink); cursor:pointer; }
    .ct-qty-btn:hover:not(:disabled) { background:color-mix(in srgb, var(--s-primary) 10%, var(--s-surface, #fff)); color:var(--s-primary-text, var(--s-primary)); }
    .ct-qty-btn:disabled { opacity:.35; cursor:default; }
    .ct-qty-n { min-width:1.4rem; text-align:center; font-size:.92rem; font-weight:800; color:var(--s-ink); font-variant-numeric:tabular-nums; }
    .ct-line { min-width:4.5rem; text-align:right; font-size:.95rem; font-weight:800; color:var(--s-ink); font-variant-numeric:tabular-nums; }
    .ct-sum { display:flex; justify-content:space-between; align-items:baseline; margin:.9rem 0 .15rem; }
    .ct-sum span { font-size:.95rem; font-weight:700; color:var(--s-ink); }
    .ct-sum b { font-size:1.3rem; font-weight:800; color:var(--s-ink); font-variant-numeric:tabular-nums; }
    .ct-note { margin:0 0 .9rem; font-size:.78rem; color:var(--s-ink-muted); }
    .ct-go { width:100%; }
    .ct-keep { display:block; width:100%; margin:.35rem 0 .75rem; padding:.55rem 0; background:none; border:0; font:inherit; font-size:.86rem; font-weight:700;
        color:var(--s-primary-text, var(--s-primary)); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
    .ct-empty { text-align:center; padding:1.25rem .5rem 1.4rem; }
    .ct-empty-ic { width:60px; height:60px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
        background:color-mix(in srgb, var(--s-primary) 9%, var(--s-surface, #fff)); color:var(--s-primary-text, var(--s-primary)); }
    .ct-empty h4 { margin:0 0 4px; font-size:1.15rem; font-weight:800; color:var(--s-ink); }
    .ct-empty p { margin:0; font-size:.86rem; color:var(--s-ink-muted); line-height:1.5; }
    .ct-link { display:block; text-align:center; margin:.8rem 0 .2rem; font-size:.84rem; font-weight:700; color:var(--s-ink-muted); text-decoration:underline; text-underline-offset:3px; }
    @media (max-width:420px) {
        /* Beats the older 44px-square phone rule for the store-mobile-cart-* rows. */
        .store-mobile-cart-row.ct-row { grid-template-columns:52px minmax(0,1fr) auto; column-gap:12px !important; align-items:center !important; }
        .store-mobile-cart-row.ct-row > img { width:52px !important; height:66px !important; grid-row:1 / 3; }
        /* Two lines, not the older one-line ellipsis: the name stays readable and clear of the quantity control. */
        .store-mobile-cart-row.ct-row .ct-name { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .ct-qty-btn { width:34px; height:34px; }
    }
    /* Order placed (WhatsApp / UPI / cash): the Track page's "Payment received" popup look (TrackPaymentPopup). */
    .op-wrap { width:min(420px,100%); margin:0 auto; padding:1.25rem .25rem .5rem; display:grid; gap:14px; text-align:center; color:var(--s-ink); }
    .op-ico { width:84px; height:84px; margin-inline:auto; }
    .op-ico svg { width:100%; height:100%; }
    .op-ico circle { fill:#e4f5ea; stroke:#1c7a43; stroke-width:3; }
    .op-ico path { fill:none; stroke:#1c7a43; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:42; stroke-dashoffset:0; }
    .op-h { margin:0; font-size:1.55rem; font-weight:800; line-height:1.2; color:var(--s-ink); }
    .op-sub { margin:4px 0 0; color:var(--s-ink-muted); font-size:.9rem; line-height:1.5; }
    .op-receipt { text-align:left; background:color-mix(in srgb, var(--s-ink, #1f1a24) 4%, var(--s-surface, #fff)); border-radius:12px; padding:12px 14px; display:grid; gap:6px; font-size:.88rem; }
    .op-receipt div { display:flex; justify-content:space-between; gap:12px; }
    .op-receipt span { color:var(--s-ink-muted); flex-shrink:0; }
    .op-receipt b { font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; }
    .op-wa { justify-self:center; color:#15803d; font-size:.85rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
    .op-btns { display:grid; gap:8px; }
    .op-btn { display:block; width:100%; box-sizing:border-box; padding:.75rem; border-radius:12px; font-weight:800; font-size:.92rem; cursor:pointer;
        font-family:inherit; border:1.5px solid transparent; text-align:center; text-decoration:none; }
    .op-btn.pri { background:var(--s-primary); color:var(--s-on-primary,#fff); }
    .op-btn.ghost { background:var(--s-surface, #fff); color:var(--s-ink); border-color:color-mix(in srgb, var(--s-ink, #1f1a24) 14%, var(--s-surface, #fff)); }
    .op-cancel { justify-self:center; background:none; border:0; padding:4px; font:inherit; font-size:.8rem; font-weight:600; color:#b91c1c;
        text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
    .op-confirm { text-align:left; border:1px solid #fecaca; background:#fef2f2; border-radius:12px; padding:12px; }
    .op-confirm p { margin:0 0 8px; font-size:.8rem; font-weight:700; color:#991b1b; }
    .op-confirm div { display:flex; gap:8px; }
    .op-confirm button { flex:1; padding:.55rem; border-radius:9px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; }
    .op-confirm .keep { background:#fff; border:1px solid #fecaca; color:#7f1d1d; }
    .op-confirm .go { background:#dc2626; border:0; color:#fff; }
    @media (prefers-reduced-motion: no-preference) {
        .op-wrap { animation: op-rise .24s ease; }
        .op-ico circle { animation: op-pop .35s ease; transform-origin:center; }
        .op-ico path { stroke-dashoffset:42; animation: op-draw .5s .15s ease forwards; }
    }
    @keyframes op-rise { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
    @keyframes op-pop  { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
    @keyframes op-draw { to { stroke-dashoffset:0; } }
    .co-acct-card { display:flex; align-items:center; gap:.8rem; margin:0 0 1.15rem; padding:.85rem 1rem; border-radius:14px;
        background:color-mix(in srgb, var(--s-primary) 7%, var(--s-surface, #fff)); border:1px solid color-mix(in srgb, var(--s-primary) 22%, var(--s-surface, #fff)); }
    .co-acct-ic { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
        background:var(--s-primary); color:var(--s-on-primary,#fff); font-weight:800; font-size:1rem; }
    .co-acct-txt { flex:1; min-width:0; display:grid; gap:.15rem; font-size:.86rem; line-height:1.4; }
    .co-acct-txt strong { color:var(--s-ink); font-weight:700; overflow-wrap:anywhere; }
    .co-acct-txt small { color:var(--s-ink-muted); font-size:.78rem; }
    .co-acct-txt .co-link { justify-self:start; margin-top:.2rem; font-size:.8rem; text-decoration:underline; text-underline-offset:3px; }
    .co-acct-btn { flex-shrink:0; min-height:42px; padding:.45rem 1.15rem; border-radius:10px; border:1.5px solid var(--s-primary);
        background:var(--s-surface, #fff); color:var(--s-primary-text, var(--s-primary)); font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; }
    .co-acct-btn:hover { background:var(--s-primary); color:var(--s-on-primary,#fff); }
    .co-signin { padding:1rem; margin:0 0 1rem; border-radius:14px;
        background:color-mix(in srgb, var(--s-primary) 7%, var(--s-surface, #fff)); border:1px solid color-mix(in srgb, var(--s-primary) 22%, var(--s-surface, #fff)); }
    .co-signin-row { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; margin-top:.65rem; }
    .co-signin-row .co-input { flex:1 1 10rem; }
    .co-signin-row .co-btn { min-height:48px; min-width:8.5rem; flex:0 0 auto; font-size:.86rem; }
    .co-signin-legal { margin:.8rem 0 0; color:var(--s-ink-muted); font-size:.76rem; line-height:1.5; }
    .co-signin-legal a { color:var(--s-primary-text, var(--s-primary)); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
    .co-err { font-size:.82rem; color:#b91c1c; font-weight:600; margin:.4rem 0 0; }
    .co-link { background:none; border:0; padding:0; font:inherit; font-size:.9rem; font-weight:700; color:var(--s-primary-text, var(--s-primary)); cursor:pointer; text-align:left; }
    .co-link.quiet { color:var(--s-ink-muted); font-weight:600; font-size:.82rem; }
    .co-signin .co-link.quiet { text-decoration:underline; text-underline-offset:3px; }
    /* One real input (so iPhone and Android can fill the code in from the email) laid over six boxes that show it. */
    .co-otp { position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.45rem; width:100%; max-width:20.5rem; cursor:text; }
    .co-otp-input { position:absolute; inset:0; z-index:1; width:100%; height:100%; box-sizing:border-box; margin:0; padding:0; border:0; outline:none;
        background:transparent; color:transparent; caret-color:transparent; font-size:16px; }
    .co-otp-input::selection { background:transparent; }
    .co-otp-box { height:52px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:12px;
        border:1.5px solid color-mix(in srgb, var(--s-ink, #1f1a24) 16%, var(--s-surface, #fff)); background:var(--s-surface, #fff);
        font-size:1.35rem; font-weight:800; color:var(--s-ink); font-variant-numeric:tabular-nums; }
    .co-otp-box.full { border-color:color-mix(in srgb, var(--s-ink, #1f1a24) 34%, var(--s-surface, #fff)); }
    .co-otp-input:focus ~ .co-otp-box.on { border-color:var(--s-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--s-primary) 18%, transparent); }
    .co-otp-input:focus ~ .co-otp-box.caret::after { content:""; width:2px; height:1.4rem; border-radius:1px; background:var(--s-ink); }
    .co-otp-input:disabled ~ .co-otp-box { opacity:.55; }
    @media (prefers-reduced-motion: no-preference) {
        .co-otp-input:focus ~ .co-otp-box.caret::after { animation:co-caret 1s step-end infinite; }
    }
    @keyframes co-caret { 50% { opacity:0; } }
    /* The optional links on the left; "outside India" on the right, level with the last of them. */
    .co-links { display:flex; justify-content:space-between; align-items:flex-end; gap:.55rem 1rem; margin:.15rem 0 .2rem; }
    .co-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:50px; padding:.7rem 1.3rem; border-radius:12px;
        font-family:inherit; font-weight:800; font-size:1rem; cursor:pointer; border:1.5px solid var(--s-primary); }
    .co-btn-pri { background:var(--s-primary); color:var(--s-on-primary,#fff); flex:1; }
    .co-btn-ghost { background:var(--s-surface, #fff); color:var(--s-primary-text, var(--s-primary)); }
    .co-btn:disabled { cursor:not-allowed; background:color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff));
        color:color-mix(in srgb, var(--s-ink, #1f1a24) 62%, var(--s-surface, #fff)); border-color:color-mix(in srgb, var(--s-ink, #1f1a24) 14%, var(--s-surface, #fff)); }
    .co-actions { gap:.75rem; margin-top:1.4rem; }
    .co-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.85rem; }
    .co-top b { font-size:1.2rem; font-weight:800; color:var(--s-ink); }
    .co-close { width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; font-size:1.25rem; line-height:1;
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 7%, var(--s-surface, #fff)); color:var(--s-ink-muted); }
    .co-psum { border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); border-radius:14px; margin-bottom:1rem;
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff)); }
    .co-psum-head { width:100%; display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; gap:.75rem; align-items:center; padding:.65rem .85rem;
        background:none; border:0; font:inherit; color:var(--s-ink); text-align:left; cursor:pointer; }
    .co-psum-head b { font-weight:800; }
    .co-psum-head small { display:block; color:var(--s-ink-muted); font-size:.8rem; }
    .co-psum-body { padding:.75rem .85rem .85rem; border-top:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); display:grid; gap:.55rem; }
    .co-thumb { width:40px; height:50px; border-radius:8px; object-fit:cover; display:block; background:color-mix(in srgb, var(--s-ink, #1f1a24) 8%, var(--s-surface, #fff)); }
    .co-stepline { font-size:.85rem; font-weight:700; color:var(--s-ink-muted); }
    .co-progress { height:5px; border-radius:9px; overflow:hidden; margin:.45rem 0 1.15rem; background:color-mix(in srgb, var(--s-primary) 14%, var(--s-surface, #fff)); }
    .co-progress i { display:block; height:100%; background:var(--s-primary); border-radius:9px; }
    .co-dtop { justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
    .co-dtop h2 { margin:0; font-size:1.45rem; font-weight:800; color:var(--s-ink); }
    /* Desktop section headings: "1 Contact", "2 Delivery", "3 Payment". */
    .co-dsec { justify-content:space-between; align-items:center; gap:1rem; margin:0 0 .8rem; }
    .co-dsec.co-dsec-next { margin-top:1.3rem; }
    .co-dsec h3 { display:flex; align-items:center; gap:.55rem; margin:0; font-size:1rem; font-weight:800; color:var(--s-ink); }
    .co-dsec h3 i { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:.75rem; font-weight:800;
        background:var(--s-primary); color:var(--s-on-primary,#fff); }
    .co-dsec > span { font-size:.86rem; color:var(--s-ink-muted); }
    .co-dsec .co-link { font-size:.86rem; text-decoration:underline; text-underline-offset:3px; }
    .co-placebox { display:flex; align-items:center; text-align:left; white-space:nowrap; overflow:hidden; color:var(--s-ink-muted); }
    .co-placebox.ok { color:#15803d; font-weight:700; background:#f0fdf4; border-color:#bbf7d0; cursor:pointer; }
    .co-placebox.warn { color:#b45309; }
    .co-notebox { height:4.5rem; resize:none; }
    .co-pay { width:100%; margin-top:.35rem; }
    .co-pay-hint { margin:0; font-size:.8rem; line-height:1.45; color:var(--s-ink-muted); text-align:center; }
    .co-backbag { display:block; margin:.6rem auto 0; padding:.4rem; text-decoration:underline; text-underline-offset:3px; }
    .co-sum { border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); border-radius:16px; padding:1.1rem; display:grid; gap:.6rem;
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff)); }
    .co-item { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:.75rem; align-items:center; margin-bottom:.2rem; color:var(--s-ink); font-size:.92rem; }
    .co-item .co-thumb { width:44px; height:56px; }
    .co-item b { display:block; font-weight:700; line-height:1.3; }
    .co-items { display:grid; gap:.6rem; }
    .co-sum .co-item b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .co-item small { color:var(--s-ink-muted); font-size:.8rem; }
    .co-row { display:flex; justify-content:space-between; gap:.75rem; font-size:.92rem; color:var(--s-ink-muted); }
    .co-row > :last-child { text-align:right; font-variant-numeric:tabular-nums; }
    .co-row .free { color:#15803d; font-weight:700; }
    .co-row.good { color:#15803d; font-weight:600; }
    .co-total { color:var(--s-ink); font-weight:800; font-size:1.15rem; padding-top:.65rem; margin-top:.15rem;
        border-top:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); }
    .co-promo { display:flex; gap:.5rem; }
    .co-promo .co-input { min-height:42px; padding:.5rem .8rem; text-transform:uppercase; }
    .co-promo .co-btn { min-height:42px; padding:.4rem .9rem; font-size:.88rem; }
    .co-promo-on { display:flex; justify-content:space-between; gap:.75rem; font-size:.88rem; font-weight:700; color:#15803d; }
    .co-saved { display:flex; gap:.65rem; align-items:center; border:1px solid var(--s-border); background:var(--s-primary-light); border-radius:12px;
        padding:.65rem .8rem; margin-bottom:1rem; font-size:.85rem; }
    .co-saved b { display:block; color:var(--s-ink); }
    .co-saved span { color:var(--s-ink-muted); overflow-wrap:anywhere; }
    .co-saved-use { flex-shrink:0; border:0; border-radius:9px; padding:.4rem .85rem; background:var(--s-primary); color:var(--s-on-primary,#fff); font:inherit; font-weight:700; font-size:.82rem; cursor:pointer; }
    .co-x { flex-shrink:0; background:none; border:0; color:var(--s-ink-muted); font-size:1.15rem; line-height:1; cursor:pointer; padding:.2rem .3rem; }
    .co-deliver { display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; border-radius:14px; padding:.9rem 1rem;
        border:1.5px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); background:var(--s-surface, #fff); }
    .co-deliver b { display:block; color:var(--s-ink); font-size:.98rem; margin-top:.1rem; }
    .co-deliver span { display:block; color:var(--s-ink-muted); font-size:.9rem; line-height:1.45; overflow-wrap:anywhere; }
    .co-deliver .co-eyebrow { margin:0; }
    .co-methods { display:grid; gap:.6rem; }
    .co-method { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:.8rem; align-items:center; width:100%; text-align:left; padding:.85rem .95rem; border-radius:14px;
        border:1.5px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); background:var(--s-surface, #fff); font:inherit; color:var(--s-ink); cursor:pointer; }
    .co-method.sel { border-color:var(--s-primary); background:var(--s-primary-light); }
    .co-radio { width:18px; height:18px; border-radius:50%; border:2px solid color-mix(in srgb, var(--s-ink, #1f1a24) 30%, var(--s-surface, #fff)); }
    .co-method.sel .co-radio { border-color:var(--s-primary); box-shadow:inset 0 0 0 3px var(--s-surface, #fff), inset 0 0 0 9px var(--s-primary); }
    .co-method b { display:block; font-weight:700; }
    .co-method small { display:block; font-size:.82rem; color:var(--s-ink-muted); }
    .co-method small.warn { color:#b45309; }
    .co-tag { font-size:.74rem; font-weight:800; padding:.15rem .6rem; border-radius:999px; background:#dcfce7; color:#15803d; white-space:nowrap; }
    .co-note { font-size:.86rem; color:var(--s-ink-muted); margin:.7rem 0 0; }

    /* ── UPI, paid after the order is placed (UpiHowItWorks, UpiPayPanel, UpiSentPanel, UpiDueSheet). up-ph / up-dk are
       the phone and computer wording, switched by screen width (not by layout), so T9/T10's side drawer on a computer
       still gets the QR code rather than a button that opens a UPI app. ── */
    @media (max-width:899px) { .up-dk, .up-dk-b, .up-dk-flex { display:none !important; } }
    @media (min-width:900px) { .up-ph, .up-ph-b { display:none !important; } }
    .co-how { margin:.8rem 0 0; padding:.9rem 1rem; border-radius:14px; font-size:.9rem; line-height:1.45; color:var(--s-ink);
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff)); border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); }
    .co-how-h { margin:0 0 .6rem; font-weight:700; }
    .co-how ol, .up-steps { margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
    .co-how li, .up-steps li { display:flex; gap:.6rem; align-items:flex-start; }
    .co-how li > i, .up-steps li > i { flex-shrink:0; width:22px; height:22px; margin-top:.05rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
        font-style:normal; font-size:.72rem; font-weight:800; background:var(--s-primary); color:var(--s-on-primary,#fff); }

    #cart-drawer.co-upi { background:var(--s-surface, #fff); }
    .up-main { display:grid; gap:1rem; padding:max(1rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom)); color:var(--s-ink); }
    .up-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
    .up-top .co-close { width:44px; height:44px; flex-shrink:0; }
    .up-store { font-size:.9rem; font-weight:600; color:var(--s-ink-muted); }
    .up-head { display:grid; gap:.35rem; }
    .up-ok { display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:700; color:#15803d; }
    .up-h { margin:0; font-size:1.75rem; line-height:1.15; font-weight:800; letter-spacing:-.015em; color:var(--s-ink); text-wrap:balance; }
    .up-sub { margin:0; font-size:.95rem; line-height:1.45; color:var(--s-ink-muted); }
    .up-sub b { color:var(--s-ink); font-weight:700; overflow-wrap:anywhere; }
    .up-app { display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:56px; border-radius:14px; text-decoration:none;
        background:var(--s-primary); color:var(--s-on-primary,#fff); font-size:1.05rem; font-weight:800; }
    .up-app-note { margin:.5rem 0 0; font-size:.82rem; line-height:1.45; color:var(--s-ink-muted); text-align:center; }
    .up-or { display:flex; align-items:center; gap:.65rem; margin:1rem 0 .75rem; font-size:.82rem; color:var(--s-ink-muted); }
    .up-or::before, .up-or::after { content:""; flex:1; height:1px; background:color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); }
    .up-rows { border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); border-radius:14px; }
    .up-row { display:flex; align-items:center; gap:.75rem; min-height:48px; padding:.25rem .4rem .25rem .9rem; }
    .up-row + .up-row, .up-id + .up-row { border-top:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); }
    .up-row-l { width:4.4rem; flex-shrink:0; font-size:.82rem; color:var(--s-ink-muted); }
    .up-row-v { flex:1; min-width:0; font-size:.95rem; font-weight:700; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
    /* UPI ID: label above, the ID in full across the card (UpiIdText breaks a long one before the at sign), Copy under it */
    .up-id { display:grid; gap:.3rem; padding:.85rem .9rem .9rem; }
    .up-id-l { font-size:.82rem; color:var(--s-ink-muted); }
    .up-id-v { font-size:1.15rem; line-height:1.3; font-weight:700; overflow-wrap:anywhere; }
    .up-copy { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-width:72px; min-height:40px; padding:0 .8rem; border:0; border-radius:10px;
        cursor:pointer; font:inherit; font-size:.86rem; font-weight:700;
        background:color-mix(in srgb, var(--s-primary) 10%, var(--s-surface, #fff)); color:var(--s-primary-text, var(--s-primary)); }
    .up-copy svg { flex-shrink:0; }
    .up-copy.done { background:#dcfce7; color:#15803d; }
    .up-copy-main { width:100%; min-height:48px; margin-top:.45rem; font-size:.95rem; }
    .up-copy-sm { min-width:0; min-height:36px; padding:0 .7rem; background:transparent; border:1px solid color-mix(in srgb, var(--s-primary) 35%, var(--s-surface, #fff)); }
    .up-copy-sm.done { border-color:#86efac; }
    .up-hold { display:flex; align-items:center; gap:.5rem; margin:.85rem 0 0; font-size:.88rem; line-height:1.4; color:var(--s-ink); }
    .up-hold svg, .up-holdbox svg { flex-shrink:0; }
    .up-ref { display:grid; gap:.45rem; padding-top:1rem; border-top:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); }
    .up-ref .co-label { margin:0; font-size:.95rem; }
    .up-ref .co-input { letter-spacing:.04em; }
    .up-ref .co-hint, .up-ref .co-err { margin:0; }
    .up-ref-row { display:grid; gap:.6rem; }
    .up-send { width:100%; background:var(--s-surface, #fff); color:var(--s-primary-text, var(--s-primary)); }
    .up-send.ready { background:var(--s-primary); color:var(--s-on-primary,#fff); }
    .up-shot { position:relative; justify-self:center; padding:.45rem .2rem; font-size:.86rem; font-weight:600; cursor:pointer;
        color:var(--s-primary-text, var(--s-primary)); text-decoration:underline; text-underline-offset:3px; }
    .up-shot .up-shot-in { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
    .up-shot:focus-within { outline:2px solid var(--s-primary); outline-offset:2px; border-radius:6px; }
    .up-steps { font-size:.95rem; line-height:1.45; }
    .up-holdbox { display:flex; align-items:center; gap:.55rem; margin:0; padding:.75rem .9rem; border-radius:12px; font-size:.88rem; line-height:1.4; color:var(--s-ink);
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff)); border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); }
    .up-qr { padding:1.75rem 1.5rem 1.25rem; background:color-mix(in srgb, var(--s-primary) 9%, var(--s-surface, #fff)); }
    .up-qr-card { width:max-content; max-width:100%; margin:0 auto; padding:1.2rem; border-radius:18px; background:#fff; display:grid; justify-items:center; gap:.8rem;
        box-shadow:0 2px 10px rgba(28,25,23,.08); }
    .up-qr-img { width:232px; height:232px; }
    .up-qr-img svg { display:block; width:100%; height:100%; }
    .up-qr-amt { display:grid; justify-items:center; gap:.1rem; text-align:center; color:#1c1917; }
    .up-qr-amt b { font-size:1.4rem; font-weight:800; font-variant-numeric:tabular-nums; }
    .up-qr-amt span { font-size:.86rem; color:#44403c; }
    .up-qr-id { display:grid; justify-items:center; gap:.25rem; margin-top:1rem; text-align:center; color:var(--s-ink); }
    .up-qr-id-l { font-size:.82rem; color:var(--s-ink-muted); }
    .up-qr-id-v { font-size:1rem; line-height:1.3; font-weight:700; overflow-wrap:anywhere; }
    .up-qr-id .up-copy { margin-top:.4rem; background:var(--s-surface, #fff); }
    @media (min-width:900px) {
        #cart-drawer.co-upi-wide { max-width:60rem !important; width:calc(100% - 48px) !important; max-height:calc(100vh - 48px) !important; }
        #cart-drawer.co-upi-wide .up { display:grid; grid-template-columns:380px minmax(0,1fr); min-height:540px; }
        #cart-drawer.co-upi-wide .up-qr { display:flex; flex-direction:column; justify-content:center; padding:2rem 1.75rem; }
        #cart-drawer.co-upi-wide .up-main { align-content:start; gap:1.15rem; padding:1.5rem 2rem 1.75rem 2.25rem; }
        #cart-drawer.co-upi-wide .up-store { visibility:hidden; }
        #cart-drawer.co-upi-wide .up-top { margin-bottom:-2.75rem; }
        #cart-drawer.co-upi-wide .up-head { padding-right:3.5rem; }
        #cart-drawer.co-upi-wide .up-holdbox { margin-top:auto; }
        .up-ref-row { grid-template-columns:minmax(0,1fr) auto; }
        .up-send { width:auto; padding-inline:1.4rem; }
        .up-shot { justify-self:start; }
        /* "Payment details sent" on a computer: what happened on the left, the order and the buttons on the right,
           so it fits a laptop screen without scrolling. */
        #cart-drawer.co-upi-sent { max-width:54rem !important; width:calc(100% - 48px) !important; }
        #cart-drawer.co-upi-sent .up-sent { padding:1.5rem 2rem 1.75rem; }
        #cart-drawer.co-upi-sent .up-sent-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem 2rem; align-items:start; }
        #cart-drawer.co-upi-sent .up-sent-b { padding-top:.25rem; }
    }

    .up-sent { display:grid; gap:1rem; padding:max(1rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom)); color:var(--s-ink); }
    .up-sent-body, .up-sent-a, .up-sent-b { display:grid; gap:1rem; align-content:start; }
    .up-sent .up-h { font-size:1.6rem; }
    .up-sent-ic { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#dcfce7; color:#15803d; }
    .up-prog { margin:0; padding:.9rem 1rem; list-style:none; display:grid; border-radius:14px;
        border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); }
    .up-prog li { position:relative; display:flex; gap:.75rem; padding-bottom:.85rem; }
    .up-prog li:last-child { padding-bottom:0; }
    .up-prog li > i { position:relative; z-index:1; flex-shrink:0; width:20px; height:20px; box-sizing:border-box; border-radius:50%; display:flex; align-items:center; justify-content:center;
        border:2px solid #a8a29e; background:var(--s-surface, #fff); color:#fff; }
    .up-prog li.done > i { border:0; background:#15803d; }
    .up-prog li.now > i { border:2.5px solid #b45309; background:#fffbeb; }
    .up-prog li:not(:last-child)::before { content:""; position:absolute; left:9px; top:20px; bottom:0; width:2px; background:color-mix(in srgb, var(--s-ink, #1f1a24) 16%, var(--s-surface, #fff)); }
    .up-prog li.done:has(+ li.done)::before { background:#15803d; }
    .up-prog b { display:block; font-size:.95rem; font-weight:700; }
    .up-prog small { display:block; font-size:.82rem; color:var(--s-ink-muted); font-variant-numeric:tabular-nums; }
    .up-prog li.now small { color:#92400e; }
    .up-prog li:not(.done):not(.now) b { color:var(--s-ink-muted); }
    .up-card { display:grid; gap:.6rem; padding:1rem; border-radius:14px;
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff)); border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); }
    .up-card .co-item { margin:0; grid-template-columns:40px minmax(0,1fr) auto; }
    .up-sent-btns { display:grid; gap:.25rem; }
    .up-sent-btns .co-btn { text-decoration:none; }
    .up-keep { min-height:44px; background:none; border:0; font:inherit; font-size:.95rem; font-weight:700; color:var(--s-primary-text, var(--s-primary)); cursor:pointer; }
    @media (min-width:640px) { .up-sent { padding:1.5rem 1.75rem 1.75rem; } }

    .ud-back { position:fixed; inset:0; z-index:60; background:rgba(28,25,23,.5); }
    .ud { position:fixed; z-index:61; left:0; right:0; bottom:0; display:grid; gap:.85rem; padding:.6rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
        border-radius:22px 22px 0 0; background:var(--s-surface, #fff); color:var(--s-ink); box-shadow:0 -12px 40px rgba(0,0,0,.18); }
    .ud-grip { justify-self:center; width:40px; height:4px; border-radius:2px; background:color-mix(in srgb, var(--s-ink, #1f1a24) 18%, var(--s-surface, #fff)); }
    .ud-x { position:absolute; top:.75rem; right:.9rem; width:40px; height:40px; }
    .ud-pill { justify-self:start; display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .7rem; border-radius:999px;
        background:#fffbeb; border:1px solid #fcd34d; color:#92400e; font-size:.82rem; font-weight:700; }
    .ud-pill svg { width:14px; height:14px; }
    .ud-h { margin:0; padding-right:2.75rem; font-size:1.35rem; line-height:1.25; font-weight:800; color:var(--s-ink); text-wrap:balance; }
    .ud-item { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:.75rem; align-items:center; padding:.75rem; border-radius:14px;
        border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); }
    .ud-item b { display:block; font-size:.95rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ud-item small { display:block; font-size:.82rem; color:var(--s-ink-muted); }
    .ud-amt { font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }
    .ud-btn { width:100%; }
    .ud-cancel { justify-self:center; min-height:40px; background:none; border:0; font:inherit; font-size:.86rem; color:var(--s-ink-muted);
        text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
    @media (min-width:640px) {
        .ud { left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%, -50%); width:min(440px, calc(100% - 32px)); border-radius:20px; padding:1.25rem 1.5rem 1.5rem; }
        .ud-grip { display:none; }
    }

    /* ── Known buyers (KnownBuyerDetails): a welcome line and saved-address cards instead of the form; the quiet
       "Shopped here before? Sign in" and its panel (a bottom sheet on phones, a pop-over under "1 Contact" on computers);
       "Save my details" after the order. ── */
    .kb-who { display:flex; align-items:center; gap:.75rem; margin:0 0 1rem; padding:.75rem .9rem; border-radius:14px;
        border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff)); }
    .kb-av { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
        background:var(--s-primary); color:var(--s-on-primary,#fff); font-weight:800; font-size:1.05rem; }
    .kb-who-txt { flex:1; min-width:0; display:grid; gap:.1rem; }
    .kb-who-txt b { font-size:1rem; color:var(--s-ink); }
    .kb-who-txt small { font-size:.84rem; line-height:1.4; color:var(--s-ink-muted); overflow-wrap:anywhere; }
    .kb-notme { flex-shrink:0; min-height:40px; text-decoration:underline; text-underline-offset:3px; }
    .kb-addrs { display:grid; gap:.6rem; }
    .kb-addr { align-items:start; }
    .kb-addr .co-radio { margin-top:.2rem; }
    .kb-addr-t { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
    .kb-addr small { margin-top:.15rem; font-size:.88rem; line-height:1.45; color:var(--s-ink-muted); }
    .kb-tag { font-size:.72rem; font-weight:700; padding:.1rem .55rem; border-radius:999px; color:var(--s-ink-muted);
        background:color-mix(in srgb, var(--s-ink, #1f1a24) 7%, var(--s-surface, #fff)); }
    .kb-more { display:block; margin:.85rem 0 0; min-height:40px; }
    .kb-back { margin:-.4rem 0 1rem; }
    .kb-remember { display:flex; align-items:center; gap:.6rem; margin:1rem 0 .25rem; min-height:40px; font-size:.92rem; color:var(--s-ink); cursor:pointer; }
    .kb-remember input { width:20px; height:20px; margin:0; accent-color:var(--s-primary); cursor:pointer; }
    .kb-quiet { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:0 0 1rem; padding:.5rem .55rem .5rem .9rem; border-radius:12px;
        font-size:.92rem; color:var(--s-ink); background:color-mix(in srgb, var(--s-ink, #1f1a24) 3%, var(--s-surface, #fff));
        border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); }
    .kb-quiet-btn { min-height:40px; padding:0 1rem; border-radius:10px; border:1.5px solid var(--s-primary); background:var(--s-surface, #fff);
        color:var(--s-primary-text, var(--s-primary)); font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }
    .co-dsec .kb-signin { font-size:.88rem; color:var(--s-ink-muted); }
    .si-back { position:fixed; inset:0; z-index:60; background:rgba(28,25,23,.45); }
    .si { position:fixed; z-index:61; left:0; right:0; bottom:0; display:grid; gap:.85rem; padding:.6rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
        border-radius:22px 22px 0 0; background:var(--s-surface, #fff); color:var(--s-ink); box-shadow:0 -12px 40px rgba(0,0,0,.18); text-align:left; }
    .si-grip { justify-self:center; width:40px; height:4px; border-radius:2px; background:color-mix(in srgb, var(--s-ink, #1f1a24) 18%, var(--s-surface, #fff)); }
    .si-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
    .si-head .co-close { width:40px; height:40px; flex-shrink:0; }
    .si-h { margin:0; font-size:1.3rem; font-weight:800; color:var(--s-ink); }
    .si-sub { margin:.2rem 0 0; font-size:.9rem; line-height:1.45; color:var(--s-ink-muted); overflow-wrap:anywhere; }
    .si-sub b { color:var(--s-ink); }
    .si-sub .co-link { font-size:inherit; text-decoration:underline; text-underline-offset:3px; }
    .si-row { display:flex; gap:.5rem; }
    .si-row .co-input { flex:1; min-width:0; }
    .si-row .co-btn { flex:0 0 auto; min-height:48px; padding:0 1.1rem; font-size:.95rem; }
    .si .co-otp { max-width:none; }
    .si-foot { display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.86rem; color:var(--s-ink-muted); }
    .si-foot .co-link.quiet { min-height:40px; text-decoration:underline; text-underline-offset:3px; }
    @media (min-width:900px) {
        #cart-drawer.co-one .co-main { position:relative; }
        /* A clear click-catcher (outside the pop-over closes it), under the pop-over. */
        #cart-drawer.co-one .si-back { background:transparent; z-index:4; }
        #cart-drawer.co-one .si { position:absolute; z-index:5; top:2.4rem; left:auto; right:0; bottom:auto; width:380px; padding:1.1rem 1.1rem 1rem;
            border-radius:16px; box-shadow:0 18px 50px rgba(28,25,23,.28), 0 0 0 1px color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); }
        #cart-drawer.co-one .si-grip { display:none; }
        #cart-drawer.co-one .si-h { font-size:1.1rem; }
    }
    .kb-save { display:grid; gap:.75rem; padding:1rem; border-radius:16px; text-align:left; background:color-mix(in srgb, var(--s-primary) 9%, var(--s-surface, #fff)); }
    .kb-save-top { display:flex; gap:.75rem; align-items:flex-start; }
    .kb-save-top b { display:block; font-size:1rem; color:var(--s-ink); }
    .kb-save-top small { display:block; font-size:.86rem; line-height:1.45; color:var(--s-ink-muted); overflow-wrap:anywhere; }
    .kb-save-ic { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--s-ink);
        background:var(--s-surface, #fff); border:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 12%, var(--s-surface, #fff)); }
    .kb-save .co-btn { width:100%; min-height:46px; }
    .kb-save .co-otp { max-width:none; }
    .kb-save-done { margin:0; display:flex; gap:.5rem; align-items:flex-start; font-size:.9rem; line-height:1.45; color:#166534; overflow-wrap:anywhere; }
    .kb-save-done svg { flex-shrink:0; margin-top:.1rem; }
    .co-bar { position:sticky; z-index:2; display:flex; align-items:center; gap:1rem;
        bottom:calc(-1 * max(1.25rem, env(safe-area-inset-bottom)));
        margin:1.1rem -1.25rem calc(-1 * max(1.25rem, env(safe-area-inset-bottom)));
        padding:.75rem 1.25rem calc(.75rem + max(1.25rem, env(safe-area-inset-bottom)));
        background:var(--s-surface, #fff); box-shadow:0 -6px 16px rgba(0,0,0,.06);
        border-top:1px solid color-mix(in srgb, var(--s-ink, #1f1a24) 10%, var(--s-surface, #fff)); }
    #cart-drawer.co-flow { display:flex; flex-direction:column; }
    #cart-drawer.co-flow > .co-grid { flex:1 0 auto; }
    .co-bar-total span { display:block; font-size:.78rem; color:var(--s-ink-muted); }
    .co-bar-total b { display:block; font-size:1.3rem; font-weight:800; color:var(--s-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
    @media (min-width:900px) {
        #cart-drawer.co-wide { max-width:58rem !important; width:calc(100% - 48px) !important; padding:28px 32px !important; }
        #cart-drawer.co-wide .co-desk-only { display:block; }
        #cart-drawer.co-wide .co-desk-flex { display:flex; }
        #cart-drawer.co-wide .co-phone-only { display:none !important; }
        #cart-drawer.co-wide .co-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; }
        #cart-drawer.co-wide .co-aside { position:sticky; top:0; }
        #cart-drawer.co-wide .co-desk-inl { display:inline; }
        #cart-drawer.co-wide .co-sum .co-items { max-height:15rem; overflow-y:auto; }
        /* The Details step on desktop is the whole checkout (#cart-drawer.co-one): payment sits beside the details and
           Pay is in the summary, so nothing needs a second step. Below 1200px payment drops under the details. */
        #cart-drawer.co-wide.co-one { padding:24px 28px 28px !important; }
        #cart-drawer.co-wide.co-one .co-grid { grid-template-columns:minmax(0,1fr) 300px; grid-template-areas:"main aside" "pay aside"; column-gap:32px; row-gap:0; }
        #cart-drawer.co-wide.co-one .co-main { grid-area:main; }
        #cart-drawer.co-wide.co-one .co-paycol { display:block; grid-area:pay; margin-top:1.3rem; }
        #cart-drawer.co-wide.co-one .co-aside { grid-area:aside; }
        #cart-drawer.co-wide.co-one .co-field { margin-bottom:.8rem; }
        #cart-drawer.co-wide.co-one .co-input { min-height:44px; padding-top:.55rem; padding-bottom:.55rem; }
        #cart-drawer.co-wide.co-one .co-pin { padding-top:0; padding-bottom:0; }
        #cart-drawer.co-wide.co-one .co-pin input { padding:.55rem 0; }
        #cart-drawer.co-wide.co-one .co-pair-d { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
        #cart-drawer.co-wide.co-one .co-pin .co-place { display:none; }
        #cart-drawer.co-wide.co-one .co-signin-row .co-btn { min-height:44px; }
    }
    @media (min-width:1200px) {
        #cart-drawer.co-wide.co-one { max-width:77.5rem !important; }
        #cart-drawer.co-wide.co-one .co-grid { grid-template-columns:minmax(0,1fr) 300px 300px; grid-template-areas:"main pay aside"; column-gap:28px; }
        #cart-drawer.co-wide.co-one .co-paycol { margin-top:0; }
        /* The 300px payment column: "Instant" only repeats "confirmed instantly", and without it each title fits on one line. */
        #cart-drawer.co-wide.co-one .co-paycol .co-tag { display:none; }
    }
    @media (max-width:420px) {
        .store-mobile-cart-row {
            display:grid !important;
            grid-template-columns:44px minmax(0,1fr) auto;
            column-gap:8px !important;
            row-gap:3px;
            align-items:start !important;
        }
        .store-mobile-cart-row > img {
            grid-column:1; grid-row:1 / 3;
            width:44px !important; height:44px !important;
        }
        .store-mobile-cart-product { grid-column:2; grid-row:1 / 3; padding-right:4px; }
        .store-mobile-cart-product > div:first-child {
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        }
        .store-mobile-cart-quantity { grid-column:3; grid-row:1 / 3; align-self:center; }
        /* The cart footer already displays the total. Hiding the duplicate line total at this
           width leaves enough room for a complete, non-wrapping unit price. */
        .store-mobile-cart-total { display:none !important; }
    }