/* =====================================================================
   Sprint P0 #1, release R-B (approved by Saad 2026-10-14). Loaded last,
   after tw-ra.css; every rule is scoped to its switch's body class.
   cart_v3: S10 side cart + empty cart, S13 free-delivery/gift boxes.
   ===================================================================== */

body.tw-cart-v3 {
    --rb-pink: #E0004A;
    --rb-pink-2: #F23A72;
    --rb-soft: #FFF0F5;
    --rb-line: #F6CADA;
    --rb-ink: #17191E;
    --rb-mute: #6B7280;
    --sb-box-inset: 16px;
}

/* ---------- S10: the side cart ---------- */
body.tw-cart-v3 .twmc-v3 .twmc-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.tw-cart-v3 .twmc-v3 .twmc-head h2 .sb-cart-i,
body.tw-cart-v3 .twmc-v3 .twmc-head h2 > i { color: var(--rb-pink); }
body.tw-cart-v3 .twmc-v3 .twmc-count:not(:empty) {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--rb-soft);
    color: var(--rb-pink);
    font-size: 12px;
    font-weight: 700;
}
/* The list already keeps 16px from the panel's edge, so its boxes take no side margin of their own
   (today the gift box adds 12px more, tw-r7.css .fg-drawer). */
body.tw-cart-v3 .twmc-v3 .twmc-items > :is(.fd-box, .fg-box) { margin: 12px 0 0; }
body.tw-cart-v3 .twmc-v3 .twmc-foot { display: grid; gap: 8px; }
body.tw-cart-v3 .twmc-v3 .twmc-foot.is-empty { display: none; }
body.tw-cart-v3 .twmc-v3 .twmc-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--rb-pink-2), var(--rb-pink));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(224, 0, 74, .24);
}
body.tw-cart-v3 .twmc-v3 .twmc-links { display: flex; justify-content: center; }
body.tw-cart-v3 .twmc-v3 .twmc-links a { color: var(--rb-mute); font-size: 13px; font-weight: 600; }

body.tw-cart-v3 .twmc-empty-v3 {
    display: grid;
    gap: 10px;
    padding: 20px 0;
    text-align: center;
    list-style: none;
}
body.tw-cart-v3 .twmc-empty-v3 .twmc-empty-art {
    display: grid;
    width: 88px;
    height: 88px;
    margin: 4px auto 6px;
    place-items: center;
    border: 1px solid var(--rb-line);
    border-radius: 50%;
    background: var(--rb-soft);
    color: var(--rb-pink);
    font-size: 30px;
}
body.tw-cart-v3 .twmc-empty-v3 .twmc-empty-title { margin: 0; color: var(--rb-ink); font-size: 18px; font-weight: 700; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-empty-sub { margin: 0; color: var(--rb-mute); font-size: 13px; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-start,
body.tw-cart-v3 .cart-v3-empty .cart-v3-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--rb-pink-2), var(--rb-pink));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(224, 0, 74, .24);
}
body.tw-cart-v3 .twmc-empty-v3 .twmc-empty-h { margin: 6px 0 0; color: var(--rb-mute); font-size: 12.5px; font-weight: 700; text-align: left; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-tiles,
body.tw-cart-v3 .cart-v3-empty .cart-v3-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
body.tw-cart-v3 .twmc-empty-v3 .twmc-tiles a,
body.tw-cart-v3 .cart-v3-empty .cart-v3-tiles a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #ECEEF2;
    border-radius: 12px;
    background: #F7F8FA;
    color: var(--rb-ink);
    font-size: 14px;
    font-weight: 600;
}
body.tw-cart-v3 :is(.twmc-tiles, .cart-v3-tiles) a i { color: var(--rb-pink); }
body.tw-cart-v3 .twmc-empty-v3 .twmc-starters { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-starter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid #ECEEF2;
    border-radius: 12px;
    text-align: left;
}
body.tw-cart-v3 .twmc-empty-v3 .twmc-starter .twmc-thumb img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-starter .twmc-info { display: grid; flex: 1; min-width: 0; gap: 2px; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-starter .twmc-line { color: var(--rb-pink); font-weight: 700; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-add { margin: 0; }
body.tw-cart-v3 .twmc-empty-v3 .twmc-add button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--rb-line);
    border-radius: 12px;
    background: var(--rb-soft);
    color: var(--rb-pink);
}

/* ---------- S10: the empty cart page (no price box; the grid is one column then) ---------- */
body.tw-cart-v3 .cart-page-grid:not(:has(.cart-page-summary)) { grid-template-columns: minmax(0, 1fr); }
body.tw-cart-v3 .cart-page-card:has(.cart-v3-empty) > .cart-page-card-head { display: none; }
body.tw-cart-v3 .cart-v3-empty {
    display: grid;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 24px var(--sb-box-inset);
    text-align: center;
}
body.tw-cart-v3 .cart-v3-empty .cart-v3-empty-art {
    display: grid;
    width: 96px;
    height: 96px;
    margin: 0 auto 4px;
    place-items: center;
    border: 1px solid var(--rb-line);
    border-radius: 50%;
    background: var(--rb-soft);
    color: var(--rb-pink);
    font-size: 34px;
}
body.tw-cart-v3 .cart-v3-empty .cart-v3-empty-title { margin: 0; color: var(--rb-ink); font-size: 22px; font-weight: 700; }
body.tw-cart-v3 .cart-v3-empty .cart-v3-empty-sub { margin: 0; color: var(--rb-mute); font-size: 14px; }
body.tw-cart-v3 .cart-v3-picks { margin-top: 24px; }
body.tw-cart-v3 .cart-v3-picks-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
body.tw-cart-v3 .cart-v3-picks-head h2 { margin: 0; color: var(--rb-ink); font-size: 18px; font-weight: 700; }
body.tw-cart-v3 .cart-v3-picks-head a { color: var(--rb-pink); font-size: 13px; font-weight: 600; }
body.tw-cart-v3 .cart-v3-picks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) {
    body.tw-cart-v3 .cart-v3-picks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- S13: the free-delivery box ---------- */
body.tw-cart-v3 .fd-box.fd-v3 {
    gap: 12px;
    padding: 14px var(--sb-box-inset);
    border: 1px solid var(--rb-line);
    border-radius: 14px;
    background: linear-gradient(180deg, #FFF5F8, #FFE9F0);
    color: var(--rb-ink);
    font-size: 14px;
    line-height: 1.5;
}
body.tw-cart-v3 .fd-v3 .fd-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--rb-pink-2), var(--rb-pink));
    color: #fff;
}
body.tw-cart-v3 .fd-v3 .fd-hint b { color: var(--rb-pink); }
body.tw-cart-v3 .fd-v3 .fd-bar {
    position: relative;
    height: 8px;
    overflow: visible;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--rb-line);
}
body.tw-cart-v3 .fd-v3 .fd-bar > span {
    position: relative;
    background: linear-gradient(90deg, var(--rb-pink-2), var(--rb-pink));
}
body.tw-cart-v3 .fd-v3:not(.is-free) .fd-bar > span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 16px;
    height: 16px;
    border: 3px solid var(--rb-pink);
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
}
body.tw-cart-v3 .fd-box.fd-v3.is-free { border-color: #BBF0CF; background: linear-gradient(180deg, #F2FDF5, #E3FAEA); color: #166534; }
body.tw-cart-v3 .fd-v3.is-free .fd-icon { background: linear-gradient(140deg, #22C55E, #16A34A); color: #fff; }
body.tw-cart-v3 .fd-v3.is-free .fd-hint b { color: #166534; font-size: 15px; }
body.tw-cart-v3 .fd-v3.is-free .fd-bar { box-shadow: none; }
body.tw-cart-v3 .fd-v3.is-free .fd-bar > span { background: #16A34A; }

/* ---------- S13: the free-gift box with its head strip ---------- */
body.tw-cart-v3 .fg-box.fg-v3 {
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rb-line);
    border-radius: 14px;
    background: #fff;
}
body.tw-cart-v3 .fg-v3 .fg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--sb-box-inset);
    background: var(--rb-soft);
    color: var(--rb-pink);
    font-size: 14px;
    font-weight: 700;
}
body.tw-cart-v3 .fg-v3 .fg-head b { color: inherit; }
body.tw-cart-v3 .fg-v3.is-earned .fg-head { background: linear-gradient(140deg, var(--rb-pink-2), var(--rb-pink)); color: #fff; }
body.tw-cart-v3 .fg-v3 .fg-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--sb-box-inset);
}
body.tw-cart-v3 .fg-v3 .fg-thumb { border: 1px solid #ECEEF2; }
body.tw-cart-v3 .fg-v3 .fg-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
/* On the cart page the boxes sit in the card's own column, 16px from its edge (m1). */
body.tw-cart-v3 .cart-page-card > :is(.fd-v3, .fg-v3) { margin: 12px var(--sb-box-inset) 0; }

/* =====================================================================
   site_spacing (S8): one button motion (Saad kept r6) and one 16px inset
   for every box inside a card. CSS only.
   ===================================================================== */
body.tw-site-spacing {
    --sb-box-inset: 16px;
}

/* ---------- the same inset everywhere ---------- */
body.tw-site-spacing .cart-page-card > :is(.fd-box, .fg-box) { margin: 12px var(--sb-box-inset) 0; }
body.tw-site-spacing :is(.cart-page-item, .cart-page-coupon, .cart-page-card-head) { padding-left: var(--sb-box-inset); padding-right: var(--sb-box-inset); }
/* The side cart's list already keeps 16px; the gift box added 12px more (tw-r7.css .fg-drawer). */
body.tw-site-spacing .twmc-items > :is(.fd-box, .fg-box) { margin-left: 0; margin-right: 0; }
body.tw-site-spacing .ck-card > :is(.fd-box, .fg-box) { margin-left: var(--sb-box-inset); margin-right: var(--sb-box-inset); }
body.tw-site-spacing .product-detail .product-detail-info { padding: var(--sb-box-inset); }
body.tw-site-spacing .product-detail .b5-pd-delivery { padding: 12px var(--sb-box-inset); }

/* ---------- buttons: a clear keyboard ring, always ---------- */
body.tw-site-spacing :is(.btn-order, .btn-cart, .btn-add-cart, .btn-buy-now, .tw-wa-order, .tw-sticky-order, .tw-sticky-cart,
    .btn-view-all, .top-categories-viewall, .btn-track, .btn-load-more, .cart-page-checkout-btn, .ck-place-order,
    .ck-mobile-bar-btn, .vom-btn-order, .vom-btn-cart, .twmc-checkout, .twmc-start, .cart-v3-start):focus-visible {
    outline: 3px solid #17191E;
    outline-offset: 3px;
}

/* ---------- buttons: the r6 motion. Transform and shadow only, so nothing moves on the page.
   Inside the motion block: phones that ask for less motion get none, unless the admin's
   "ignore_reduced_motion" is on (motion-override rewrites this block then). ---------- */
@media (prefers-reduced-motion: no-preference) {
    body.tw-site-spacing {
        --rb-lift: -2px;
        --rb-press: .97;
        --rb-dur: 150ms;
    }

    body.tw-site-spacing :is(.btn-order, .btn-cart, .btn-add-cart, .btn-buy-now, .tw-wa-order, .tw-sticky-order, .tw-sticky-cart,
        .btn-view-all, .top-categories-viewall, .btn-track, .btn-load-more, .cart-page-checkout-btn, .ck-place-order,
        .ck-mobile-bar-btn, .vom-btn-order, .vom-btn-cart, .twmc-checkout, .twmc-start, .cart-v3-start) {
        transition: transform var(--rb-dur) ease, box-shadow var(--rb-dur) ease;
    }

    @media (hover: hover) {
        body.tw-site-spacing :is(.btn-order, .btn-cart, .btn-add-cart, .btn-buy-now, .tw-wa-order, .btn-view-all,
            .top-categories-viewall, .btn-track, .btn-load-more, .cart-page-checkout-btn, .ck-place-order, .vom-btn-order,
            .vom-btn-cart, .twmc-checkout, .twmc-start, .cart-v3-start):hover {
            transform: translateY(var(--rb-lift));
            box-shadow: 0 8px 18px rgba(224, 0, 74, .24);
        }
    }

    body.tw-site-spacing :is(.btn-order, .btn-cart, .btn-add-cart, .btn-buy-now, .tw-wa-order, .tw-sticky-order, .tw-sticky-cart,
        .btn-view-all, .top-categories-viewall, .btn-track, .btn-load-more, .cart-page-checkout-btn, .ck-place-order,
        .ck-mobile-bar-btn, .vom-btn-order, .vom-btn-cart, .twmc-checkout, .twmc-start, .cart-v3-start):active {
        transform: scale(var(--rb-press));
        transition-duration: 90ms;
    }
}

/* =====================================================================
   checkout_focus: S6 the focused checkout (e + m1), S7 the address box (k).
   Saad's r7 picks: no step row, one big order button (58px, full width).
   Tokens follow STYLE-GUIDE.md / sb-ui.css, with their values as fallbacks.
   ===================================================================== */
body.tw-ck-focus {
    --rb-pink: var(--sb-rose, #E0004A);
    --rb-soft: var(--sb-rose-soft, #FFF0F4);
    --rb-line: var(--sb-line, #EEE8EB);
    --rb-line-pink: var(--sb-rose-line, #F8CFDB);
    --rb-ink: var(--sb-ink, #1B1420);
    --rb-mute: var(--sb-ink-3, #8C8390);
    --rb-ok: var(--sb-ok, #0E9F6E);
    --rb-ok-soft: var(--sb-ok-soft, #EEF8F3);
    --rb-bad: var(--sb-bad, #D92D20);
}

/* ---------- S6: nothing but the order on the page ---------- */
body.tw-ck-focus :is(.notice-ticker, .site-header, .ck-topbar, #gcc-widget, .sbn, .mobile-bottom-nav, .tw-fcart) { display: none !important; }
/* clip, not hidden: hidden makes the page its own scroll box and the slim bar would not stick. */
body.tw-ck-focus .ck-page { overflow-x: clip; padding-top: 0; }

body.tw-ck-focus .ckf-bar {
    position: sticky;
    top: 0;
    z-index: 510;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 8px;
    height: 56px;
    margin-bottom: 12px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--rb-line);
}
body.tw-ck-focus .ckf-bar.is-floating { box-shadow: 0 6px 16px rgba(27, 20, 32, .06); }
body.tw-ck-focus .ckf-bar.is-hidden { transform: translateY(-100%); }
body.tw-ck-focus .ckf-back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rb-line);
    border-radius: 50%;
    color: var(--rb-ink);
    text-decoration: none;
}
body.tw-ck-focus .ckf-logo { justify-self: center; line-height: 0; }
body.tw-ck-focus .ckf-logo img { width: auto; max-width: 150px; height: 28px; object-fit: contain; }
body.tw-ck-focus .ckf-safe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--rb-ok-soft);
    color: var(--rb-ok);
    font-size: 13px;
    font-weight: 600;
}
body.tw-ck-focus :is(.ckf-back, .ckf-more, .ckf-forget):focus-visible { outline: 2px solid var(--rb-pink); outline-offset: 2px; }

@media (min-width: 992px) {
    body.tw-ck-focus .ckf-bar { padding: 0 max(16px, calc((100vw - 1200px) / 2)); }
    body.tw-ck-focus .ck-right { top: 72px; max-height: calc(100vh - 88px); }
}

/* ---------- S6: the order bar: total + বিস্তারিত, one big button, the COD line ---------- */
@media (max-width: 991px) {
    body.tw-ck-focus .ck-page { padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
    body.tw-ck-focus .ck-mobile-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px 12px;
        padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top-color: var(--rb-line);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 24px rgba(27, 20, 32, .08);
    }
}
body.tw-ck-focus .ck-mobile-bar-total { display: flex; align-items: baseline; gap: 8px; }
body.tw-ck-focus .ck-mobile-bar-total small { display: inline; margin: 0; color: var(--rb-mute); font-size: 13px; }
body.tw-ck-focus .ck-mobile-bar-total strong { color: var(--rb-ink); font-size: 20px; }
body.tw-ck-focus .ckf-more { justify-self: end; color: var(--rb-pink); font-size: 14px; font-weight: 700; text-decoration: none; }
body.tw-ck-focus .ck-mobile-bar-btn {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 0 20px;
    border-radius: 16px;
    background: var(--rb-pink);
    font-size: 16px;
}
body.tw-ck-focus .ck-mobile-bar-btn .ckf-label { flex: 1; text-align: left; }
body.tw-ck-focus .ck-mobile-bar-btn .ckf-amt { font-weight: 800; white-space: nowrap; }
body.tw-ck-focus .ckf-cod { grid-column: 1 / -1; margin: 0; color: var(--rb-mute); font-size: 12.5px; text-align: center; }
body.tw-ck-focus .ckf-cod[hidden] { display: none; }
/* While the address or the note is typed in, the bar steps aside (it rides above the keyboard). */
body.tw-ck-focus.ck-typing .ck-mobile-bar { display: none; }

/* ---------- S7: the address box, its count and its note ---------- */
body.tw-ck-focus textarea#ck_address { min-height: 88px; resize: none; line-height: 1.6; scroll-margin-bottom: 120px; }
body.tw-ck-focus .ckf-addr-meta { display: flex; justify-content: flex-end; margin-top: 6px; color: var(--rb-mute); font-size: 12px; }
body.tw-ck-focus .is-full .ckf-count { color: var(--rb-bad); font-weight: 700; }
body.tw-ck-focus .is-full textarea#ck_address { border-color: var(--rb-bad); }
body.tw-ck-focus .ckf-addr-err { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--rb-bad); font-size: 13px; line-height: 1.5; }
body.tw-ck-focus .ckf-addr-err[hidden] { display: none; }
body.tw-ck-focus .ckf-fixed { margin: 6px 0 0; color: var(--rb-ok); font-size: 13px; }
body.tw-ck-focus .ckf-fixed[hidden] { display: none; }
body.tw-ck-focus #order_note { scroll-margin-bottom: 120px; }

/* ---------- S7: remembered on this phone ---------- */
body.tw-ck-focus .ckf-memory {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--rb-line-pink);
    border-radius: 12px;
    background: var(--rb-soft);
    color: var(--rb-ink);
    font-size: 13.5px;
    line-height: 1.5;
}
body.tw-ck-focus .ckf-memory[hidden] { display: none; }
body.tw-ck-focus .ckf-memory > i { color: var(--rb-pink); }
body.tw-ck-focus .ckf-memory span { flex: 1; min-width: 0; }
body.tw-ck-focus .ckf-memory small { color: var(--rb-mute); font-size: 12.5px; }
body.tw-ck-focus .ckf-forget { flex: none; padding: 6px 4px; border: 0; background: none; color: var(--rb-pink); font-weight: 700; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
    body.tw-ck-focus .ckf-bar { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
}