/* sb-ui.css: the storefront's shared tokens and base states (design-review/storefront/STYLE-GUIDE.md).
   Linked once in master.blade.php after site-fixes.css (R-C2). Every rule is an opt-in .sb-* class
   or a token, so linking it changes no existing page; reuse it, never copy it.
   Motion: transform and opacity only, 150-250 ms, nothing under prefers-reduced-motion. */

:root {
    --sb-rose: #E0004A;
    --sb-rose-press: #C10040;
    --sb-rose-soft: #FFF0F4;
    --sb-rose-line: #F8CFDB;
    /* AI mode only (Saad, 2026-10-15): light purple; everything else is brand pink. */
    --sb-ai: #7C3AED;
    --sb-ai-mid: #A78BFA;
    --sb-ai-light: #C4B5FD;
    --sb-ai-soft: #F3EEFF;

    --sb-ink: #1B1420;
    --sb-ink-2: #5B5160;
    --sb-ink-3: #8C8390;
    --sb-surface: #FFFFFF;
    --sb-mist: #F8F5F6;
    --sb-line: #EEE8EB;
    --sb-line-strong: #DCD3D8;
    --sb-ok: #0E9F6E;
    --sb-ok-soft: #EEF8F3;
    --sb-bad: #D92D20;

    --sb-r-xs: 6px;
    --sb-r-sm: 10px;
    --sb-r-md: 14px;
    --sb-r-lg: 20px;
    --sb-r-pill: 999px;

    --sb-s-1: 4px;
    --sb-s-2: 8px;
    --sb-s-3: 12px;
    --sb-s-4: 16px;
    --sb-s-5: 20px;
    --sb-s-6: 24px;
    --sb-s-7: 32px;
    --sb-s-8: 40px;
    --sb-s-9: 48px;
    --sb-s-10: 64px;

    --sb-font: 'Hind Siliguri', system-ui, sans-serif;
    --sb-font-num: Inter, system-ui, sans-serif;
    --sb-fs-xs: 12px;
    --sb-fs-sm: 13px;
    --sb-fs-md: 15px;
    --sb-fs-lg: 17px;
    --sb-fs-xl: 20px;
    --sb-fs-2xl: 24px;

    --sb-icon-sm: 16px;
    --sb-icon: 20px;
    --sb-icon-lg: 22px;

    --sb-fast: 150ms;
    --sb-mid: 200ms;
    --sb-slow: 250ms;
    --sb-ease: cubic-bezier(.2, .8, .2, 1);

    --sb-shadow-1: 0 1px 2px rgba(27, 20, 32, .06);
    --sb-shadow-2: 0 6px 16px rgba(27, 20, 32, .08);
}

/* ---------- buttons ---------- */
.sb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-s-2);
    min-height: 44px;
    padding: 0 var(--sb-s-5);
    border: 1px solid transparent;
    border-radius: var(--sb-r-md);
    background: var(--sb-rose);
    color: #fff;
    font: 600 var(--sb-fs-md)/1 var(--sb-font);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sb-btn svg { width: var(--sb-icon); height: var(--sb-icon); }
.sb-btn:active { background: var(--sb-rose-press); }
.sb-btn--quiet { background: var(--sb-surface); border-color: var(--sb-line); color: var(--sb-ink); }
.sb-btn--quiet:active { background: var(--sb-mist); }
.sb-btn--icon { width: 40px; min-height: 40px; padding: 0; border-radius: var(--sb-r-pill); background: transparent; color: var(--sb-ink-2); }
.sb-btn--icon:active { background: var(--sb-mist); }
.sb-btn[disabled] { opacity: .5; cursor: default; }

/* busy: the label fades, a spinner turns; the button keeps its width */
.sb-btn > .sb-btn__label { display: inline-flex; align-items: center; gap: var(--sb-s-2); }
.sb-btn::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
}
.sb-btn.is-loading { pointer-events: none; }
.sb-btn.is-loading > .sb-btn__label { opacity: 0; }
.sb-btn.is-loading::after { opacity: 1; animation: sb-spin .7s linear infinite; }
/* done: a small check scales in */
.sb-btn .sb-btn__done { position: absolute; opacity: 0; transform: scale(.6); }
.sb-btn.is-done > .sb-btn__label { opacity: 0; }
.sb-btn.is-done .sb-btn__done { opacity: 1; transform: scale(1); }

/* ---------- anything tappable ---------- */
.sb-press { -webkit-tap-highlight-color: transparent; }

/* ---------- fields: one soft ring on the wrapper, no inner rectangle ---------- */
.sb-field {
    display: flex;
    align-items: center;
    gap: var(--sb-s-2);
    min-height: 48px;
    padding: 0 var(--sb-s-4);
    border: 1px solid transparent;
    border-radius: var(--sb-r-md);
    background: var(--sb-mist);
}
.sb-field--pill { border-radius: var(--sb-r-pill); }
.sb-field:focus-within { background: var(--sb-surface); border-color: var(--sb-rose-line); }
.sb-field.is-error { border-color: var(--sb-bad); }
.sb-field input,
.sb-field select,
.sb-field textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font: 400 var(--sb-fs-md)/1.4 var(--sb-font);
    color: var(--sb-ink);
    -webkit-appearance: none;
    appearance: none;
}
.sb-field input::placeholder { color: var(--sb-ink-3); }

/* ---------- cards, chips, dividers ---------- */
.sb-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r-lg);
    box-shadow: var(--sb-shadow-1);
    overflow: hidden;
}
.sb-card__img { overflow: hidden; }
.sb-card__img img { display: block; width: 100%; }
.sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 var(--sb-s-4);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r-pill);
    background: var(--sb-surface);
    color: var(--sb-ink);
    font: 500 14px/1 var(--sb-font);
    white-space: nowrap;
    cursor: pointer;
}
.sb-chip svg { width: var(--sb-icon-sm); height: var(--sb-icon-sm); }
.sb-chip[aria-pressed="true"], .sb-chip.is-on { background: var(--sb-rose-soft); border-color: var(--sb-rose-line); color: var(--sb-rose); }
.sb-divider { height: 0; border: 0; border-top: 1px solid var(--sb-line); margin: var(--sb-s-4) 0; }

/* ---------- focus: keyboard only ---------- */
.sb-btn:focus-visible,
.sb-chip:focus-visible,
.sb-press:focus-visible,
.sb-card a:focus-visible {
    outline: 2px solid var(--sb-rose);
    outline-offset: 2px;
}

/* ---------- motion ---------- */
@keyframes sb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
    .sb-btn,
    .sb-press,
    .sb-chip {
        transition: transform var(--sb-fast) var(--sb-ease), opacity var(--sb-fast) var(--sb-ease);
    }
    .sb-btn > .sb-btn__label,
    .sb-btn::after,
    .sb-btn .sb-btn__done {
        transition: transform var(--sb-mid) var(--sb-ease), opacity var(--sb-mid) var(--sb-ease);
    }
    .sb-card__img img { transition: transform var(--sb-slow) var(--sb-ease); }
    .sb-btn:active { transform: scale(.97); }
    .sb-btn--icon:active { transform: scale(.92); }
    .sb-press:active { transform: scale(.98); }
    .sb-chip:active { transform: scale(.96); }
    @media (hover: hover) {
        .sb-btn:not(.sb-btn--icon):hover { transform: translateY(-1px); }
        .sb-btn:not(.sb-btn--icon):active { transform: scale(.97); }
        .sb-card:hover .sb-card__img img { transform: scale(1.03); }
        .sb-chip:hover { background: var(--sb-rose-soft); }
        .sb-btn--icon:hover { background: var(--sb-mist); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .sb-btn.is-loading::after { animation: none; }
}

/* ===== storefront v3 (design-review/storefront/v3, approved by Saad 2026-10-21) =====
   Everything below applies only under body.tw-storefront-v3 (the one "storefront_v3" switch),
   so with the switch off no page changes. Tokens: GLOBAL-UI-RULES §2 (neutral greys, one pink,
   black = admin r2-black). Motion (standing rule, 2026-10-21): animations stay visible when the
   phone asks for reduced motion; they only become shorter and lighter (at most 150 ms, half the
   distance, loops once). Nothing here switches them off. */
body.tw-storefront-v3 {
    --sb-canvas: #FFFFFF;
    --sb-surface: #FFFFFF;
    --sb-mist: #F4F4F4;
    --sb-hover: #F0F0F0;
    --sb-ink: #111111;
    --sb-ink-2: #383838;
    --sb-ink-3: #595959;
    --sb-faint: #8C8C8C;
    --sb-line: #E8E8E8;
    --sb-line-strong: #C7C7C7;
    --sb-rose-text: #C2003A;
    --sb-on-fill: #FFFFFF;
    --sb-ok: #0B7F58;
    --sb-bad: #C62828;
    --sb-backdrop: rgba(0, 0, 0, .45);
    --sb-glass: rgba(255, 255, 255, .86);
    /* Saad 2026-10-21 item 6: digits never need a class or a second font. One font for all text;
       its 0-9 come from Roboto files inside the same family (partials/tweaks/digit-font). */
    --sb-font-num: var(--sb-font);
    --sb-shadow-btn: 0 1px 2px rgba(17, 17, 17, .10), 0 4px 10px -2px rgba(17, 17, 17, .16);
    --sb-shadow-btn-quiet: 0 1px 2px rgba(17, 17, 17, .05), 0 3px 8px -2px rgba(17, 17, 17, .08);
    --sb-shadow-bar: 0 -1px 0 rgba(17, 17, 17, .06), 0 -6px 18px -6px rgba(17, 17, 17, .14);
    --sb-shadow-card: 0 1px 2px rgba(17, 17, 17, .06), 0 6px 16px -8px rgba(17, 17, 17, .14);
    --sb3-move: 1px; /* W10: GLOBAL-UI-RULES §5, a 1 px lift */
    --sb3-dur: 200ms;
    background: var(--sb-canvas);
    color: var(--sb-ink-2);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 {
    --sb-canvas: #000000;
    --sb-surface: #0E0E0E;
    --sb-mist: #181818;
    --sb-hover: #1F1F1F;
    --sb-ink: #F2F2F2;
    --sb-ink-2: #CFCFCF;
    --sb-ink-3: #A8A8A8;
    --sb-faint: #8A8A8A;
    --sb-line: #2B2B2B;
    --sb-line-strong: #3D3D3D;
    --sb-rose-text: #FF4D7D;
    --sb-rose-soft: #2A0A14;
    --sb-rose-line: #5C1A2E;
    --sb-ok: #3DD68C;
    --sb-bad: #FF6B6B;
    --sb-ok-soft: #0F1F18;
    --sb-bad-soft: #241010;
    --sb-backdrop: rgba(0, 0, 0, .72);
    --sb-glass: rgba(0, 0, 0, .82);
    --sb-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 12px -2px rgba(0, 0, 0, .7);
    --sb-shadow-btn-quiet: inset 0 1px 0 rgba(255, 255, 255, .08);
    --sb-shadow-bar: 0 -1px 0 #2B2B2B;
    --sb-shadow-card: 0 0 0 1px #2B2B2B;
    color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
    body.tw-storefront-v3 { --sb3-move: 1px; --sb3-dur: 150ms; }
}

/* ---------- black theme over the existing pages ---------- */
:root[data-sb-theme="dark"] body.tw-storefront-v3,
:root[data-sb-theme="dark"] body.tw-storefront-v3 main,
:root[data-sb-theme="dark"] body.tw-storefront-v3 .site-header,
:root[data-sb-theme="dark"] body.tw-storefront-v3 .header-category-bar,
:root[data-sb-theme="dark"] body.tw-storefront-v3 footer,
:root[data-sb-theme="dark"] body.tw-storefront-v3 .footer,
:root[data-sb-theme="dark"] body.tw-storefront-v3 section { background-color: var(--sb-canvas); color: var(--sb-ink-2); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.product-card, .twl-card, .ck-card, .card, .twl-sheet, .twmc-panel, .main-nav, .cart-dropdown, .modal-content, .rc-sug, .twl-filter) {
    background-color: var(--sb-surface); color: var(--sb-ink-2); border-color: var(--sb-line);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(h1, h2, h3, h4, h5, .product-title a, .twl-name a, .ck-card-title, strong) { color: var(--sb-ink); }
/* black theme over the older pages (QA 2026-10-22) */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.acp-page, .blog-page-hero, .blog-card, .bd-hero, .bd-article, .twl-empty, .auth-card, .spw-box, .service-card, .twl-float) {
    background-color: var(--sb-surface); color: var(--sb-ink-2); border-color: var(--sb-line);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.acp-page, .blog-page-hero, .bd-hero) { background-color: var(--sb-canvas); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.acp-name, .tw-auth-perks, .tw-auth-perks b, .twl-links a, .blog-card-title a, .bd-content, .hero-breadcrumb span, .auth-field label) { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.auth-switch, .spw-text) { color: var(--sb-ink-2); }
/* the light theme's rose (#E0004A) and greys (#5F6776, #6B7280) are too dark on black: the black theme's own tokens */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.btn-view-all, .top-categories-viewall, .tw-row-head a, .cart-v3-picks-head a, .product-price, .product-detail-price, .auth-link, .auth-switch a, .tw-auth-aside-kicker, .tw-deal-timer-label, .acp-pill, .blog-read-more) { color: var(--sb-rose-text); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.attr-label, .tw-pd-rating, .tw-deal-line, .twl-check em, .auth-card-head p, .auth-check span, .page-hero p, .cart-page-breadcrumb, .cart-page-breadcrumb a, .cart-v3-empty-sub, .spw-later, .bd-share-label, .blog-page-hero p, .hero-breadcrumb a, .bd-hero span, .auth-divider span, .tw-auth-perks li span, .tw-field-hint) { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .service-card :is(label, .auth-field) { color: var(--sb-ink); }
/* black theme: the cart page and the checkout (QA 2026-10-22, contrast 1.1-1.7 before) */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.ck-page, .ck-card-head, .ck-pay-option, .ck-mobile-bar, .ckf-bar) { background-color: var(--sb-canvas); color: var(--sb-ink-2); border-color: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.ck-card-head, .ck-pay-option) { background-color: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.cart-page-name, .fd-hint, .ck-label, .ck-pro-info a.name, .ck-total-row .val, .ck-pay-body, #checkout-form) { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.cart-page-summary-row span, .ck-total-row .label, .ck-mobile-bar-total small, .cart-page-unit-price, .cart-page-shipping-note) { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.cart-page-badge, .cart-page-line-total, .fd-hint b, .item-price, #grandTotalAmount) { color: var(--sb-rose-text); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .cart-page-badge { background-color: var(--sb-rose-soft); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .ckf-safe { background-color: var(--sb-ok-soft); color: var(--sb-ok); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.ck-summary-title, .ck-coupon) { background-color: var(--sb-surface); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.ck-summary-title h6, .ck-pro-qty-ctrl button, .ck-pro-qty-ctrl input) { color: var(--sb-ink); }
html body.tw-storefront-v3 #checkout-form .ck-place-order { box-shadow: var(--sb-shadow-btn); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.ck-coupon-row, .ck-pro-qty-ctrl) { background-color: var(--sb-mist); border-color: var(--sb-line-strong); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .fd-box.fd-v3 { background: var(--sb-rose-soft); border-color: var(--sb-rose-line); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .fd-box.fd-v3 :is(.fd-text, .fd-hint, small, span) { color: var(--sb-ink); }
/* QA 2026-10-22, both themes: the card brand is the mockup's quiet grey line (05, 06), not the old rose capitals;
   the blog's dates and read time, and the product page's "no reviews yet", read on white too; prices in Roboto */
html body.tw-storefront-v3 .product-card .cc-brand { color: var(--sb-ink-3); text-transform: none; letter-spacing: 0; font: 500 12px/1.3 var(--sb-font); }
body.tw-storefront-v3 :is(.blog-card-meta, .blog-card-meta span, .blog-read-time) { color: var(--sb-ink-3); }
body.tw-storefront-v3 #productReviewList > div[style] { color: var(--sb-ink-3) !important; }
body.tw-storefront-v3 :is(.product-detail-price, .product-detail-price *, .product-price, .product-price *) { font-family: var(--sb-font-num); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.blog-card-meta, .blog-card-meta span, .blog-read-time, .blog-card-excerpt) { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(input, select, textarea, .ck-input) {
    background-color: var(--sb-mist); color: var(--sb-ink); border-color: var(--sb-line-strong);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(input, textarea)::placeholder { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 img:not([src$=".svg"]) { filter: brightness(.94); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .logo img,
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-menu__logo img,
:root[data-sb-theme="dark"] body.tw-storefront-v3 .ckf-logo img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
/* black theme: the live-chat sheet (QA X2: it stayed white, with a black text box inside it) */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(#gcc-panel, #gcc-header, #gcc-input-wrap, #gcc-complaint-panel) { background: var(--sb-surface); color: var(--sb-ink-2); border-color: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 #gcc-messages { background: var(--sb-canvas); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 #gcc-chips { background: var(--sb-ok-soft); border-color: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 #gcc-chips button { background: var(--sb-mist); border-color: var(--sb-line-strong); color: var(--sb-ok); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 #gcc-header h5 { color: var(--sb-ink) !important; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 #gcc-header .gcc-header-sub { color: var(--sb-ink-3) !important; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(#gcc-close, #gcc-complaint-cancel, .gcc-header-icon-wrap, .gcc-msg.bot .gcc-avatar) { background: var(--sb-mist); color: var(--sb-ink); box-shadow: inset 0 0 0 1px var(--sb-line-strong); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.gcc-msg.bot .gcc-bubble, .gcc-product-card, .gcc-help a) { background: var(--sb-mist); border-color: var(--sb-line); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .gcc-product-card .gcc-pname { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.gcc-product-card .gcc-pstock, #gcc-typing, #gcc-complaint-panel label) { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .gcc-product-card .gcc-pprice { color: var(--sb-ok); }
/* black theme: the offer popup (QA X4: a white box with the black theme's near-white title in it) */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .twpu-box { background: var(--sb-surface); color: var(--sb-ink-2); box-shadow: var(--sb-shadow-card); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.twpu-close, .twpu-media) { background: var(--sb-mist); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.twpu-desc, .twpu-later) { color: var(--sb-ink-2); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .twpu-foot { color: var(--sb-ink-3); }
/* QA shared classes, fix1 (QA-MATRIX W1-W6, W8, W10, W12, P10), measured by the colour sweep of 2026-10-22 */
/* W1 + W2: white fills and the old ink #1E2939 left on older components in black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tw-mq-brand, .hs-brand-card, .r7-rail-btn, .b4-hotline-btn, .twl-page-btn:not(.is-current), .twl-btn-ghost, .twl-pager .twl-more, .auth-social-btn) {
    background: var(--sb-surface); border-color: var(--sb-line-strong); color: var(--sb-ink);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tw-mq-brand span:not(.r7-brand-mono), .hs-brand-name, .r7-rail-btn span, .b4-hotline-num) { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 a.twl-page-btn:not(.is-current):hover { background: var(--sb-hover); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.crt-pic, .acp-pic, .r7-brand-mono) { background: var(--sb-rose-soft); border-color: var(--sb-rose-line); }
/* W3: the light theme's rose (#E0004A, #D6003F) as text on black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.twl-pager .twl-more, .acp-mono, .crt-mono, .r7-brand-mono, .b4-hotline-btn, .auth-check a, .rc-chip b) { color: var(--sb-rose-text); }
/* W4: the bluish hint greys (#5F6776, #6A7282) on black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.twl-sort-desk > span, .twl-pager-note, .twl-gap, .twl-count, .twl-more small, #email_optional_text, .ck-card-subtitle, .tw-otp-resend:disabled) { color: var(--sb-ink-3); }
/* W5: the struck old price, #9CA3AF on white (2.54:1) and #6B7280 on black */
html body.tw-storefront-v3 :is(.product-card .product-price, .b4-vr-price, .product-detail-price, .cart-page-unit-price) del { color: var(--sb-ink-3); }
/* W6: the WhatsApp help link, #0B7A43 on black (3.57:1) */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-info-help-wa { color: var(--sb-ok); }
/* W8: phone tap targets of at least 44 px (header menu and search, the search page's back; the notice close gets a wider hit area) */
@media (max-width: 900px) {
    body.tw-storefront-v3 :is(.menu-toggle, .tw-hv3-sbtn, .rc-back) { min-width: 44px; min-height: 44px; }
    body.tw-storefront-v3 .notice-close { position: relative; }
    body.tw-storefront-v3 .notice-close::before { content: ""; position: absolute; inset: -5px -6px; }
}
/* W12: on the #111 Omni card the tag read #595959 / #A8A8A8 (`.sb3-omni__text small` wins over `.sb3-omni__soon`) */
body.tw-storefront-v3 .sb3-omni--card .sb3-omni__text small.sb3-omni__soon { color: #CFCFCF; }
/* P10: the search placeholder #9AA0AE (2.43:1) */
body.tw-storefront-v3 .rc { --rc-faint: var(--sb-ink-3); }

/* ---------- icons, buttons, close ---------- */
body.tw-storefront-v3 .sb3-i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; stroke: currentColor; }
body.tw-storefront-v3 .sb3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.tw-storefront-v3 .sb3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 0; border-radius: var(--sb-r-sm); font: 600 15px/1 var(--sb-font); text-decoration: none; cursor: pointer;
    box-shadow: var(--sb-shadow-btn); transition: transform var(--sb3-dur) ease, box-shadow var(--sb3-dur) ease;
}
body.tw-storefront-v3 .sb3-btn:active { transform: scale(.97); }
@media (hover: hover) { body.tw-storefront-v3 .sb3-btn:hover { transform: translateY(calc(var(--sb3-move) * -1)); } }
body.tw-storefront-v3 .sb3-btn--primary { background: var(--sb-rose); color: var(--sb-on-fill); }
body.tw-storefront-v3 .sb3-btn--light { background: var(--sb-surface); color: var(--sb-ink); }
body.tw-storefront-v3 .sb3-btn--wa { background: #25D366; color: #0B2E19; }
/* the hotline card's second button (mockup 03): dark, outlined, on the black card in both themes */
body.tw-storefront-v3 .sb3-btn--dark { background: #1B1B1B; border: 1px solid #3D3D3D; color: #F2F2F2; }
body.tw-storefront-v3 .sb3-x {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--sb-ink-2); cursor: pointer;
}
body.tw-storefront-v3 .sb3-x .sb3-i { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--sb-mist); transition: transform var(--sb3-dur) ease; }
@media (hover: hover) { body.tw-storefront-v3 .sb3-x:hover .sb3-i { transform: rotate(90deg); } }
body.tw-storefront-v3 :is(.sb3-btn, .sb3-x, .sb3-nav__item, .sb3-card__actions button, .sb3-theme button, .sb3-order-bar button):focus-visible {
    outline: 2px solid var(--sb-rose-text); outline-offset: 2px;
}
body.tw-storefront-v3 .sb3-badge {
    position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--sb-rose); color: var(--sb-on-fill); font: 700 11px/18px var(--sb-font-num); text-align: center; font-style: normal;
}
body.tw-storefront-v3 .sb3-toast {
    position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 2000; max-width: calc(100vw - 32px);
    margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--sb-ink); color: var(--sb-canvas); font: 500 14px/1.4 var(--sb-font);
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity var(--sb3-dur) ease, transform var(--sb3-dur) ease;
}
body.tw-storefront-v3 .sb3-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- cards: order + cart, heart and compare ---------- */
body.tw-storefront-v3 :is(.product-card, .twl-card) { position: relative; }
body.tw-storefront-v3 .sb3-card__actions { display: flex; gap: 8px; align-items: stretch; }
body.tw-storefront-v3 .sb3-card__order {
    flex: 1 1 auto; min-width: 0; min-height: 40px; border: 0; border-radius: var(--sb-r-sm); background: var(--sb-rose); color: var(--sb-on-fill);
    font: 600 14px/1 var(--sb-font); box-shadow: var(--sb-shadow-btn); cursor: pointer; transition: transform var(--sb3-dur) ease;
}
body.tw-storefront-v3 .sb3-card__order:active,
body.tw-storefront-v3 .sb3-card__cart:active { transform: scale(.96); }
body.tw-storefront-v3 .sb3-card__cart {
    flex: 0 0 40px; width: 40px; min-height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--sb-r-sm);
    background: var(--sb-rose-soft); color: var(--sb-rose-text); box-shadow: var(--sb-shadow-btn-quiet); cursor: pointer;
}
body.tw-storefront-v3 .sb3-card__tools { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
body.tw-storefront-v3 :is(.sb3-card__wish, .sb3-card__compare) {
    position: relative; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
    background: var(--sb-surface); color: var(--sb-ink-2); box-shadow: var(--sb-shadow-btn-quiet); cursor: pointer;
}
body.tw-storefront-v3 .sb3-card__tools :is(.sb3-card__wish, .sb3-card__compare)::after { content: ""; position: absolute; inset: -4px; }
body.tw-storefront-v3 .sb3-card__wish .sb3-on,
body.tw-storefront-v3 .sb3-card__wish[aria-pressed="true"] .sb3-off { display: none; }
body.tw-storefront-v3 .sb3-card__wish[aria-pressed="true"] .sb3-on { display: block; color: var(--sb-rose); fill: var(--sb-rose); }
body.tw-storefront-v3 .sb3-card__compare[aria-pressed="true"] { background: var(--sb-rose-soft); color: var(--sb-rose-text); }

/* ---------- header account menu + theme switch ---------- */
body.tw-storefront-v3 .sb3-acct { position: relative; }
body.tw-storefront-v3 .sb3-acct__btn { display: inline-grid; place-items: center; }
body.tw-storefront-v3 .sb3-acct__menu { display: none; }
@media (min-width: 992px) and (hover: hover) {
    body.tw-storefront-v3 .sb3-acct__menu {
        position: absolute; right: 0; top: 100%; z-index: 1050; min-width: 240px; padding: 8px; flex-direction: column; gap: 2px;
        background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); box-shadow: var(--sb-shadow-card);
    }
    body.tw-storefront-v3 .sb3-acct:is(:hover, :focus-within) .sb3-acct__menu { display: flex; }
    body.tw-storefront-v3 .sb3-acct__menu > a { padding: 10px 12px; border-radius: var(--sb-r-sm); color: var(--sb-ink); font: 500 14px/1.3 var(--sb-font); text-decoration: none; }
    body.tw-storefront-v3 .sb3-acct__menu > a:hover { background: var(--sb-hover); }
    body.tw-storefront-v3 .sb3-acct__menu .sb3-theme { margin-top: 6px; border-top: 1px solid var(--sb-line); padding-top: 10px; }
}
body.tw-storefront-v3 .sb3-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
body.tw-storefront-v3 .sb3-theme__label { color: var(--sb-ink-2); font: 500 14px/1 var(--sb-font); }
body.tw-storefront-v3 .sb3-theme__seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sb-mist); }
body.tw-storefront-v3 .sb3-theme button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
    background: transparent; color: var(--sb-ink-2); font: 600 13px/1 var(--sb-font); cursor: pointer;
}
body.tw-storefront-v3 .sb3-theme button[aria-pressed="true"] { background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet); }

/* ---------- side menu ---------- */
body.tw-storefront-v3 .sb3-menu { display: flex; flex-direction: column; gap: 4px; padding-bottom: 24px; color: var(--sb-ink-2); }
body.tw-storefront-v3 .sb3-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--sb-line); }
body.tw-storefront-v3 .sb3-hotline { margin: 12px 16px 4px; padding: 14px 16px; border-radius: var(--sb-r-md); background: #111111; color: #F2F2F2; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-hotline { background: #181818; border: 1px solid #2B2B2B; }
body.tw-storefront-v3 .sb3-hotline__label { margin: 0; font: 500 13px/1.3 var(--sb-font); color: #CFCFCF; }
/* mockup 03: "● হটলাইন খোলা · সকাল ১০টা – রাত ১০টা" (the hours from Admin → যোগাযোগের তথ্য) */
body.tw-storefront-v3 .sb3-hotline__dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #3DD68C; vertical-align: 1px; }
body.tw-storefront-v3 .sb3-hotline__num { margin: 2px 0 10px; font: 700 24px/1.2 var(--sb-font-num); letter-spacing: .02em; color: #FFFFFF; }
body.tw-storefront-v3 .sb3-hotline__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.tw-storefront-v3 .sb3-hotline__btns .sb3-btn { padding: 0 10px; font-size: 14px; white-space: nowrap; }
body.tw-storefront-v3 .sb3-menu__label { margin: 14px 16px 4px; font: 600 12px/1.3 var(--sb-font); color: var(--sb-ink-3); letter-spacing: .02em; }
body.tw-storefront-v3 :is(.sb3-menu__cats, .sb3-menu__text, .sb3-menu__social) { list-style: none; margin: 0; padding: 0 8px; }
body.tw-storefront-v3 .sb3-menu__row { display: flex; align-items: center; }
body.tw-storefront-v3 .sb3-menu__link,
body.tw-storefront-v3 .sb3-menu__text a { flex: 1; display: block; padding: 11px 8px; border-radius: var(--sb-r-sm); color: var(--sb-ink); font: 500 15px/1.3 var(--sb-font); text-decoration: none; }
body.tw-storefront-v3 .sb3-menu__text a { color: var(--sb-ink-2); font-weight: 400; }
body.tw-storefront-v3 :is(.sb3-menu__link, .sb3-menu__text a):hover { background: var(--sb-hover); }
body.tw-storefront-v3 .sb3-menu__toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--sb-ink-3); cursor: pointer; }
body.tw-storefront-v3 .sb3-menu__toggle .sb3-i { transition: transform var(--sb3-dur) ease; }
body.tw-storefront-v3 .mobile-cat-group.open .sb3-menu__toggle .sb3-i,
body.tw-storefront-v3 .sb3-menu__toggle[aria-expanded="true"] .sb3-i { transform: rotate(180deg); }
body.tw-storefront-v3 .sb3-menu__sub { list-style: none; margin: 0 0 6px; padding: 0 8px 0 16px; display: none; }
/* main.js marks a tapped group "is-open" (the older drawers used "open"): QA 2026-10-22, no list opened */
body.tw-storefront-v3 .mobile-cat-group:is(.open, .is-open) > .sb3-menu__sub { display: block; }
body.tw-storefront-v3 .mobile-cat-group:is(.open, .is-open) .sb3-menu__link { color: var(--sb-rose-text); }
/* mockup 03: the info pages fold under one row; its caret sits on the same soft box as a category's (set 25) */
body.tw-storefront-v3 .sb3-menu__fold { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 8px; border: 0; background: transparent; color: var(--sb-ink); font: 500 15px/1.3 var(--sb-font); text-align: left; cursor: pointer; }
body.tw-storefront-v3 .sb3-menu__fold .sb3-i { flex: none; box-sizing: border-box; width: 44px; height: 44px; padding: 13px; border: 1px solid var(--sb3-ibox-line); border-radius: 12px; background: var(--sb3-ibox-bg); color: var(--sb-ink); transition: transform var(--sb3-dur) ease; }
body.tw-storefront-v3 .sb3-menu__fold[aria-expanded="true"] .sb3-i { transform: rotate(180deg); }
body.tw-storefront-v3 .sb3-menu__text li { border-bottom: 1px solid var(--sb-line); }
/* a search with no result: "সমস্যা অনুযায়ী কিনুন" pills over the category pills */
body.tw-storefront-v3 .twl-empty .twl-empty-sub { margin: 18px 0 8px; color: var(--sb-ink-2); font: 600 13px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-menu__sub a { display: block; padding: 9px 8px; color: var(--sb-ink-2); font: 400 14px/1.3 var(--sb-font); text-decoration: none; }
body.tw-storefront-v3 .sb3-menu__sub .sb3-menu__all { color: var(--sb-rose-text); font-weight: 600; }
/* QA A-05: style.css gives the open sub-list a #FAFAFA panel and a pink hover, unreadable under black's light links */
:root[data-sb-theme] body.tw-storefront-v3 .mobile-cat-group:is(.open, .is-open) > .sb3-menu__sub { background: transparent; }
html body.tw-storefront-v3 .sb3-menu__sub a:hover { background: var(--sb-hover); color: var(--sb-ink); }
body.tw-storefront-v3 .sb3-menu .sb3-theme { margin: 10px 8px 0; border-top: 1px solid var(--sb-line); padding-top: 14px; }
body.tw-storefront-v3 .sb3-menu__social { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
body.tw-storefront-v3 .sb3-menu__social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sb-mist); color: var(--sb-ink); }

/* ---------- bottom nav ---------- */
body.tw-storefront-v3 .sb3-nav { background: var(--sb-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sb-shadow-bar); border-top: 0; }
body.tw-storefront-v3 .sb3-nav__item {
    position: relative; flex: 1 1 0; min-width: 0; max-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 0 4px; color: var(--sb-ink-3); text-decoration: none; font: 500 13px/1.2 var(--sb-font);
}
body.tw-storefront-v3 .sb3-nav__icon { position: relative; width: 56px; height: 32px; display: grid; place-items: center; border-radius: 999px; transition: background-color var(--sb3-dur) ease; }
body.tw-storefront-v3 .sb3-nav__icon .sb3-i { width: 24px; height: 24px; }
body.tw-storefront-v3 .sb3-nav__icon .sb3-on { display: none; }
body.tw-storefront-v3 .sb3-nav__item.is-active { color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-nav__item.is-active .sb3-nav__icon { background: var(--sb-rose-soft); }
body.tw-storefront-v3 .sb3-nav__item.is-active .sb3-off { display: none; }
body.tw-storefront-v3 .sb3-nav__item.is-active .sb3-on { display: block; }
body.tw-storefront-v3 .sb3-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tw-storefront-v3 .sb3-nav__wa .sb3-nav__icon {
    width: 60px; height: 60px; margin-top: -26px; border: 4px solid var(--sb-canvas); background: #25D366; color: #FFFFFF;
    box-shadow: 0 8px 16px -6px rgba(37, 211, 102, .55); transition: transform var(--sb3-dur) ease;
}
body.tw-storefront-v3 .sb3-nav__wa .sb3-nav__icon .sb3-i { width: 28px; height: 28px; }
body.tw-storefront-v3 .sb3-nav__wa:active .sb3-nav__icon { transform: scale(.94); }
@media (hover: hover) { body.tw-storefront-v3 .sb3-nav__wa:hover .sb3-nav__icon { transform: translateY(calc(var(--sb3-move) * -1)); } }

/* ---------- side cart ---------- */
body.tw-storefront-v3 .sb3-cart__panel { display: flex; flex-direction: column; background: var(--sb-surface); }
body.tw-storefront-v3 .sb3-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.tw-storefront-v3 .sb3-cart__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 18px/1.2 var(--sb-font); color: var(--sb-ink); }
body.tw-storefront-v3 .sb3-cart__ico { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; }
body.tw-storefront-v3 .sb3-cart__short { display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; }
body.tw-storefront-v3 .sb3-cart__short a { flex: none; padding: 8px 12px; border-radius: var(--sb-r-sm); background: var(--sb-mist); color: var(--sb-ink); font: 500 13px/1 var(--sb-font); text-decoration: none; }
body.tw-storefront-v3 .sb3-cart__items { flex: 1 1 auto; overflow-y: auto; }
/* product names on the theme's own ink (they were the old drawer's dark blue on the black theme) */
body.tw-storefront-v3 .sb3-cart .twmc-name { color: var(--sb-ink); }
body.tw-storefront-v3 .sb3-cart__foot {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sb-line); box-shadow: var(--sb-shadow-bar); background: var(--sb-surface);
}
body.tw-storefront-v3 .sb3-cart__foot.is-empty { display: none; }
body.tw-storefront-v3 .sb3-cart__total { display: flex; flex-direction: column; margin-right: auto; }
body.tw-storefront-v3 .sb3-cart__total small { color: var(--sb-ink-3); font: 500 12px/1.2 var(--sb-font); }
body.tw-storefront-v3 .sb3-cart__total strong { color: var(--sb-ink); font: 700 20px/1.2 var(--sb-font-num); }
body.tw-storefront-v3 .sb3-cart__foot .sb3-btn { min-height: 52px; padding: 0 22px; font-size: 16px; }

/* ---------- search: back only + Omni ---------- */
body.tw-storefront-v3 .sb3-omni {
    display: flex; align-items: center; gap: 12px; margin: 10px 16px 4px; padding: 12px 14px; border: 1px solid var(--sb-line);
    border-radius: var(--sb-r-md); background: var(--sb-surface); color: var(--sb-ink); text-decoration: none;
}
body.tw-storefront-v3 .sb3-omni__avatar { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--sb-ai-soft); color: var(--sb-ai); }
body.tw-storefront-v3 .sb3-omni__avatar::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--sb-ai-light);
    animation: sb3-ring 2.4s ease-out infinite;
}
@keyframes sb3-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.tw-storefront-v3 .sb3-omni__avatar::after { animation-duration: 150ms; animation-iteration-count: 1; } }
body.tw-storefront-v3 .sb3-omni__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
body.tw-storefront-v3 .sb3-omni__text strong { font: 600 15px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-omni__text small { color: var(--sb-ink-3); font: 400 13px/1.4 var(--sb-font); }
body.tw-storefront-v3 .sb3-synonym { margin: 10px auto; padding: 10px 16px; max-width: 1200px; border-radius: var(--sb-r-sm); background: var(--sb-mist); color: var(--sb-ink-2); font: 500 14px/1.5 var(--sb-font); }

/* ---------- listing filters (no chips) ---------- */
body.tw-storefront-v3 :is(.sb3-radio, .sb3-check) input { accent-color: var(--sb-rose); width: 18px; height: 18px; }
body.tw-storefront-v3 .sb3-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; }
body.tw-storefront-v3 .sb3-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.tw-storefront-v3 .sb3-switch i { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--sb-line-strong); transition: background-color var(--sb3-dur) ease; }
body.tw-storefront-v3 .sb3-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: transform var(--sb3-dur) ease; }
body.tw-storefront-v3 .sb3-switch input:checked + i { background: var(--sb-rose); }
body.tw-storefront-v3 .sb3-switch input:checked + i::after { transform: translateX(18px); }
body.tw-storefront-v3 .sb3-switch input:focus-visible + i { outline: 2px solid var(--sb-rose-text); outline-offset: 2px; }

/* ---------- checkout inputs ---------- */
body.tw-storefront-v3 .sb3-field-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--sb-ink-3); pointer-events: none; }
body.tw-storefront-v3 .sb3-field-ico.ck-icon-top { top: 14px; transform: none; }

/* ---------- product order bar (above the bottom nav, as on live) ---------- */
body.tw-storefront-v3 .sb3-order-bar {
    position: sticky; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--sb-surface); border-top: 1px solid var(--sb-line); box-shadow: var(--sb-shadow-bar);
}
@media (max-width: 991.98px) { body.tw-storefront-v3.tw-bottom-nav .sb3-order-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); } }
/* no floating cart while the cart is empty (Saad 2026-10-22); the slide away after scrolling stops keeps
   its motion with reduce motion, only shorter */
body.tw-storefront-v3 .tw-fcart[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    html body.tw-storefront-v3.tw-header-v3 :is(.site-header, .tw-fcart) { transition: transform 150ms ease, box-shadow 150ms ease; }
}
/* the live-chat bubble and its panel sit above the order bar, never on its button (QA 2026-10-22) */
@media (max-width: 991.98px) {
    body.tw-storefront-v3.tw-bottom-nav:has(.sb3-order-bar) #gcc-toggle { bottom: calc(var(--sb3-nav-h, 64px) + 12px + env(safe-area-inset-bottom)); }
    body.tw-storefront-v3.tw-bottom-nav:has(.sb3-order-bar) #gcc-panel { bottom: calc(var(--sb3-nav-h, 64px) + 76px + env(safe-area-inset-bottom)); }
    /* S4 A3: only while the bar shows (sb-v3.js sets sb3-bar-on and both heights) */
    body.tw-storefront-v3.tw-bottom-nav.sb3-bar-on #gcc-toggle { bottom: calc(var(--sb3-nav-h, 64px) + var(--sb3-bar-h, 64px) + 12px); }
    body.tw-storefront-v3.tw-bottom-nav.sb3-bar-on #gcc-panel { bottom: calc(var(--sb3-nav-h, 64px) + var(--sb3-bar-h, 64px) + 76px); }
}
body.tw-storefront-v3 .sb3-order-bar__price { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
body.tw-storefront-v3 .sb3-order-bar__price small { color: var(--sb-ink-3); font: 500 12px/1.2 var(--sb-font); }
body.tw-storefront-v3 .sb3-order-bar__price strong { color: var(--sb-ink); font: 700 18px/1.2 var(--sb-font-num); }
body.tw-storefront-v3 .sb3-order-bar__icon,
body.tw-storefront-v3 .sb3-order-bar__cart { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--sb-r-sm); background: var(--sb-mist); color: var(--sb-ink); cursor: pointer; }
body.tw-storefront-v3 .sb3-order-bar__cart { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-order-bar__order {
    flex: 0 1 auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--sb-r-sm); background: var(--sb-rose); color: var(--sb-on-fill);
    font: 700 15px/1 var(--sb-font); box-shadow: var(--sb-shadow-btn); white-space: nowrap; cursor: pointer;
}

/* ---------- pages: wishlist, compare, concern ---------- */
body.tw-storefront-v3 .sb3-page { padding-top: 16px; padding-bottom: 120px; }
body.tw-storefront-v3 .sb3-page__head h1 { margin: 0 0 4px; color: var(--sb-ink); font: 700 22px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-page__head p { margin: 0 0 16px; color: var(--sb-ink-3); font: 400 14px/1.5 var(--sb-font); }
body.tw-storefront-v3 .sb3-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; text-align: center; }
body.tw-storefront-v3 .sb3-empty__ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--sb-mist); color: var(--sb-ink-3); }
body.tw-storefront-v3 .sb3-empty__ico .sb3-i { width: 30px; height: 30px; }
body.tw-storefront-v3 .sb3-empty h2 { margin: 6px 0 0; color: var(--sb-ink); font: 700 18px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-empty p { max-width: 360px; margin: 0 0 8px; color: var(--sb-ink-3); font: 400 14px/1.5 var(--sb-font); }
body.tw-storefront-v3 .sb3-concerns { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
body.tw-storefront-v3 .sb3-concerns a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--sb-mist); color: var(--sb-ink); font: 500 14px/1 var(--sb-font); text-decoration: none; }
body.tw-storefront-v3 .sb3-concerns a[aria-current="page"] { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-compare { overflow-x: auto; border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); background: var(--sb-surface); }
body.tw-storefront-v3 .sb3-compare__table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 14px/1.4 var(--sb-font); color: var(--sb-ink-2); }
body.tw-storefront-v3 .sb3-compare__table :is(th, td) { padding: 12px; border-bottom: 1px solid var(--sb-line); text-align: left; vertical-align: top; }
body.tw-storefront-v3 .sb3-compare__table tbody th { width: 90px; color: var(--sb-ink-3); font-weight: 500; }
body.tw-storefront-v3 .sb3-compare__item { display: flex; flex-direction: column; gap: 8px; color: var(--sb-ink); font-weight: 600; text-decoration: none; }
body.tw-storefront-v3 .sb3-compare__item img { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: cover; border-radius: var(--sb-r-sm); background: var(--sb-mist); }
body.tw-storefront-v3 .sb3-link { margin-top: 6px; padding: 6px 0; border: 0; background: none; color: var(--sb-rose-text); font: 500 13px/1 var(--sb-font); cursor: pointer; }

/* ---------- duplicate-order warning ---------- */
body.tw-storefront-v3 .sb3-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; }
body.tw-storefront-v3 .sb3-modal__backdrop { position: absolute; inset: 0; background: var(--sb-backdrop); }
body.tw-storefront-v3 .sb3-modal__box {
    position: relative; width: 100%; max-width: 400px; padding: 28px 20px 20px; border-radius: var(--sb-r-lg); background: var(--sb-surface);
    color: var(--sb-ink-2); text-align: center; animation: sb3-pop var(--sb3-dur) ease-out;
}
body.tw-storefront-v3 .sb3-modal__x { position: absolute; top: 8px; right: 8px; }
body.tw-storefront-v3 .sb3-modal__ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sb-rose-soft); color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-modal__box h2 { margin: 12px 0 6px; color: var(--sb-ink); font: 700 18px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-modal__box p { margin: 0 0 16px; font: 400 15px/1.6 var(--sb-font); }
@keyframes sb3-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* Black theme, legacy wrappers the v3 pages still use (build check 2026-10-21): the older page
   shells set their own light backgrounds and some win on specificity, so they are named here. */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.twl-page, .cart-page, .product-section, .hs-section, .hl-block, .b4-main, .rc, .rc-bar, .rc-top) {
    background-color: var(--sb-canvas); color: var(--sb-ink-2);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.cart-page-card, .product-detail-info, .product-reviews, .reviews-summary, .tw-panel, .sbt, #pdAlertBox, .category-promo-card, .header-search) {
    background-color: var(--sb-surface); color: var(--sb-ink-2); border-color: var(--sb-line);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 nav.sb3-nav { background: var(--sb-glass); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(legend, .twl-title, .crt-name, .tw-acc, .sbt-title, .cart-v3-empty-title, .tw-mq-trust, .tw-mq-trust span) { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tw-mq-trust small, .tw-panel p, .tw-panel li, .product-reviews div) { color: var(--sb-ink-2); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .header-search input { background-color: transparent; }
@media all {
    :root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.twl-crumbs, .twl-crumbs li, .twl-sort-list a, .product-attrs, .tw-buy-trust-list li, .b5-pd-delivery, .b5-pd-delivery-text, .sbt-text) { color: var(--sb-ink-2); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.twl-crumbs span, .attr-value, .reviews-score) { color: var(--sb-ink); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.b5-pd-delivery small, .tw-buy-trust-list small) { color: var(--sb-ink-3); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-pd-brand { color: var(--sb-rose-text); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 :is(#pdAlertBox, .btn-add-cart, .rc-field) { background-color: var(--sb-surface); color: var(--sb-ink); border-color: var(--sb-line-strong); }
}
@media all {
    :root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tw-pd-crumbs, .tw-pd-crumbs li) { color: var(--sb-ink-3); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tw-pd-crumbs span, .twl-tool) { color: var(--sb-ink); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 .twl-tool { background-color: var(--sb-surface); border-color: var(--sb-line-strong); }
    /* the product page's alert popup writes its colours inline */
    :root[data-sb-theme="dark"] body.tw-storefront-v3 #pdAlertBox { background: var(--sb-surface) !important; border: 1px solid var(--sb-line); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 #pdAlertMsg { color: var(--sb-ink) !important; }
    :root[data-sb-theme="dark"] body.tw-storefront-v3 #pdAlertSub { color: var(--sb-ink-3) !important; }
}
/* ---------- Saad's review 2026-10-21 21:20 ---------- */
/* shared button motion (item 2): one light, fast set for every button, the header search, the
   bottom nav and the search page included. No coloured halo. With reduce motion it stays, only shorter
   and smaller (--sb3-dur 150ms, --sb3-move 1px). */
body.tw-storefront-v3 :is(.sb3-btn, .sb3-x, .sb3-nav__item, .sb3-card__order, .sb3-card__cart, [data-sb3-wish], [data-sb3-compare], .sb3-omni, .sb3-menu__toggle, .sb3-acct__btn, .rc-go, .rc-back, .rc-fi, .rc-chip, .rc-all, .menu-toggle, .cart-btn, .profile-btn, .twl-tool, .btn-add-cart) {
    transition: transform var(--sb3-dur) ease, background-color var(--sb3-dur) ease, color var(--sb3-dur) ease, box-shadow var(--sb3-dur) ease;
}
@media (hover: hover) {
    body.tw-storefront-v3 :is(.sb3-btn, .sb3-x, .sb3-nav__item, .sb3-card__order, .sb3-card__cart, [data-sb3-wish], [data-sb3-compare], .sb3-omni, .sb3-menu__toggle, .sb3-acct__btn, .rc-go, .rc-back, .rc-fi, .rc-chip, .rc-all, .menu-toggle, .cart-btn, .profile-btn, .twl-tool, .btn-add-cart):hover { transform: translateY(calc(var(--sb3-move) * -1)); }
}
body.tw-storefront-v3 :is(.sb3-btn, .sb3-x, .sb3-nav__item, .sb3-card__order, .sb3-card__cart, [data-sb3-wish], [data-sb3-compare], .sb3-omni, .sb3-menu__toggle, .sb3-acct__btn, .rc-go, .rc-back, .rc-fi, .rc-chip, .rc-all, .menu-toggle, .cart-btn, .profile-btn, .twl-tool, .btn-add-cart):active { transform: scale(.95); }
body.tw-storefront-v3 .header-search :is(button, [type="submit"]) { transition: transform var(--sb3-dur) ease, background-color var(--sb3-dur) ease; }
body.tw-storefront-v3 .header-search :is(button, [type="submit"]):active { transform: scale(.92); }

/* item 3: the phone side menu comes in from the left; its content reads from the left. */
body.tw-storefront-v3 .sb3-menu { text-align: left; }
@media (max-width: 991.98px) {
    body.tw-storefront-v3 #mainNav { left: 0; right: auto; }
    /* the drawer is a centred column with overflow hidden: start the menu at its top and let it scroll */
    body.tw-storefront-v3 #mainNav { justify-content: flex-start; }
    body.tw-storefront-v3 #mainNav > .sb3-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
/* mockup 03: the drawer is 345 of 390 px (style.css draws it below 900 px) */
@media (max-width: 900px) {
    body.tw-storefront-v3 #mainNav { width: min(88vw, 380px); }
}

/* item 4: no chips on a computer; the search page's recent and popular words are plain links there. */
@media (min-width: 992px) {
    body.tw-storefront-v3 .rc-chips { display: flex; flex-wrap: wrap; gap: 4px 20px; }
    body.tw-storefront-v3 .rc-chips .rc-chip {
        height: auto; min-height: 32px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
        color: var(--sb-rose-text); font-weight: 600;
    }
}

/* item 5: the small animated Omni avatar; also the first row of the suggestions box. */
body.tw-storefront-v3 .sb3-omni__avatar--o { width: 32px; height: 32px; background: var(--sb-ink); color: var(--sb-canvas); font: 700 14px/1 var(--sb-font); animation: sb3-bob 2.6s ease-in-out infinite; }
@keyframes sb3-bob { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--sb3-move) * -1)) rotate(-6deg); } }
body.tw-storefront-v3 .rc-sug .sb3-omni--row { margin: 0; border: 0; border-bottom: 1px solid var(--sb-line); border-radius: 0; }

/* while suggestions show, Omni is their first row only (not also above the box) */
body.tw-storefront-v3 .rc.is-typing .sb3-omni:not(.sb3-omni--row) { display: none; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.rc-sug-row, .rc-sug-row b, .rc-mini-n, .rc-lab) { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.rc-sug-row small, .rc-sug-row svg) { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc-mini-p { color: var(--sb-rose-text); }
/* the search page's concern tiles and popular words were white boxes in black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc-cn { background: var(--sb-surface); border: 1px solid var(--sb-line); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc-cn i { background: var(--sb-mist); border-color: var(--sb-line); color: var(--sb-rose-text); }
@media (max-width: 991.98px) {
    :root[data-sb-theme="dark"] body.tw-storefront-v3 .rc-chip { background: var(--sb-surface); border-color: var(--sb-line-strong); color: var(--sb-ink); }
}

/* item 8: the bottom nav stays on the screen bottom however long the page is. */
@media (max-width: 991.98px) {
    body.tw-storefront-v3 .sb3-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; }
}
/* ---------- Saad's approval of mockups 20-25, 2026-10-21 23:25 ---------- */
/* change 4: one soft shadow for every button (no coloured halo) */
/* W10: one button shadow, the §5 token of each theme */
body.tw-storefront-v3 { --sb3-btn-shadow: var(--sb-shadow-btn); --sb3-nod: 14deg; }
body.tw-storefront-v3 :is(.sb3-btn, .sb3-card__order, .sb3-card__cart, .rc-go, .sb3-acct__btn, .btn-add-cart) { box-shadow: var(--sb3-btn-shadow); }

/* the glass sheen (mockup 24): a soft band of light crosses the button on hover or tap */
body.tw-storefront-v3 :is(.sb3-btn, .sb3-card__order, .sb3-card__cart, .rc-go, .sb3-acct__btn, .menu-toggle, .sb3-menu__search) { position: relative; overflow: hidden; isolation: isolate; }
body.tw-storefront-v3 :is(.sb3-btn, .sb3-card__order, .sb3-card__cart, .rc-go, .sb3-acct__btn, .menu-toggle, .sb3-menu__search)::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); opacity: 0;
}
body.tw-storefront-v3 :is(.sb3-btn--light, .sb3-card__cart, .menu-toggle, .sb3-menu__search)::after { background: linear-gradient(105deg, transparent, rgba(127, 127, 127, .2), transparent); }
@media (hover: hover) {
    body.tw-storefront-v3 :is(.sb3-btn, .sb3-card__order, .sb3-card__cart, .rc-go, .sb3-acct__btn, .menu-toggle, .sb3-menu__search):hover::after { animation: sb3-sheen calc(var(--sb3-dur) * 3) ease-out; }
}
body.tw-storefront-v3 :is(.sb3-btn, .sb3-card__order, .sb3-card__cart, .rc-go, .sb3-acct__btn, .menu-toggle, .sb3-menu__search):active::after { animation: sb3-sheen calc(var(--sb3-dur) * 3) ease-out; }
@keyframes sb3-sheen { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 1; } }

/* icon buttons: one soft box (change 7) under every icon-only button, light and black */
body.tw-storefront-v3 { --sb3-ibox-bg: #F4F4F4; --sb3-ibox-line: #E8E8E8; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 { --sb3-ibox-bg: #181818; --sb3-ibox-line: #2B2B2B; }
html body.tw-storefront-v3 :is(.menu-toggle, .tw-hv3-sbtn, .rc-back, .sb3-x, .sb3-menu__toggle, .sb3-menu__search, [data-sb3-wish], [data-sb3-compare], .spw-close, .review-modal-close, .promo-popup-close) {
    background: var(--sb3-ibox-bg); border: 1px solid var(--sb3-ibox-line); border-radius: 12px; color: var(--sb-ink);
    box-shadow: 0 1px 2px rgba(17, 17, 17, .06);
}
html body.tw-storefront-v3 .sb3-x .sb3-i { background: none; }
html body.tw-storefront-v3 :is(.menu-toggle, .tw-hv3-sbtn, .sb3-menu__search) { width: 42px; height: 42px; padding: 0; }
body.tw-storefront-v3 .sb3-menu__search { display: inline-grid; place-items: center; margin-left: auto; text-decoration: none; }
body.tw-storefront-v3 .sb3-menu__head .sb3-menu__search + .sb3-x { margin-left: 8px; }
/* the drawer head was the old pink bar (style.css, .app-home .drawer-head); v3 draws it on the page colour */
body.tw-storefront-v3 .drawer-head.sb3-menu__head { flex-shrink: 0; background: var(--sb-surface); color: var(--sb-ink); }
body.tw-storefront-v3 .sb3-menu .mobile-cat-group { border-bottom-color: var(--sb-line); }

/* menu icon C (set 20): Tabler align-left, drawn by a mask so the header markup stays as it is */
body.tw-storefront-v3 .menu-toggle > i { display: none; }
body.tw-storefront-v3 .menu-toggle::before {
    content: ""; display: block; width: 22px; height: 22px; margin: auto; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* change 6: the search button nods now and then, small and quick (smaller with reduce motion) */
@keyframes sb3-nod {
    0%, 78%, 100% { transform: none; }
    84% { transform: rotate(calc(var(--sb3-nod) * -1)) scale(1.08); }
    90% { transform: rotate(calc(var(--sb3-nod) * .55)); }
    95% { transform: rotate(calc(var(--sb3-nod) * -.2)); }
}
body.tw-storefront-v3 .tw-hv3-sbtn svg, body.tw-storefront-v3 .sb3-menu__search .sb3-i, body.tw-storefront-v3 .sb3-nav__search .sb3-nav__icon .sb3-i { animation: sb3-nod 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.tw-storefront-v3 { --sb3-nod: 5deg; } }

/* change 5 + mockup 21: the Omni box is the side menu's hotline card, lightly animated */
body.tw-storefront-v3 .sb3-omni--card {
    position: relative; flex-direction: column; align-items: stretch; gap: 10px; overflow: hidden; padding: 16px;
    border: 1px solid #2B2B2B; background: #111111; color: #F2F2F2; box-shadow: var(--sb3-btn-shadow);
}
body.tw-storefront-v3 .sb3-omni--card::before {
    content: ""; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%;
    border: 18px solid rgba(255, 255, 255, .04); pointer-events: none;
}
body.tw-storefront-v3 .sb3-omni__head { display: flex; align-items: center; gap: 12px; }
body.tw-storefront-v3 .sb3-omni--card .sb3-omni__avatar--o { width: 44px; height: 44px; background: #F2F2F2; color: #111111; font-size: 18px; }
body.tw-storefront-v3 .sb3-omni--card .sb3-omni__avatar::after { border-color: var(--sb-rose); }
body.tw-storefront-v3 .sb3-omni--card .sb3-omni__text strong { color: #FFFFFF; font-size: 18px; }
body.tw-storefront-v3 .sb3-omni__soon { display: inline-flex; align-items: center; gap: 6px; color: #CFCFCF; font: 500 13px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-omni__soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F5B83D; }
body.tw-storefront-v3 .sb3-omni__desc { color: #CFCFCF; font: 400 14px/1.6 var(--sb-font); }
body.tw-storefront-v3 .sb3-omni__cta {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; overflow: hidden;
    border-radius: var(--sb-r-sm); background: var(--sb-rose); color: #FFFFFF; font: 600 15px/1 var(--sb-font); box-shadow: var(--sb3-btn-shadow);
}
body.tw-storefront-v3 .sb3-omni__cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg);
    animation: sb3-sheen 1.2s ease-out 1s 2;
}
@media (hover: hover) { body.tw-storefront-v3 .sb3-omni--card:hover .sb3-omni__cta::after { animation: sb3-sheen calc(var(--sb3-dur) * 3) ease-out; } }

/* the "খুব শীঘ্রই আসছে" page (mockup 21) */
body.tw-storefront-v3 .sb3-soon { position: relative; max-width: 560px; text-align: center; }
body.tw-storefront-v3 .sb3-soon__back { position: absolute; top: 16px; left: 16px; width: 42px; height: 42px; display: grid; place-items: center; }
body.tw-storefront-v3 .sb3-soon__mark {
    position: relative; width: 112px; height: 112px; margin: 48px auto 0; display: grid; place-items: center; border-radius: 50%;
    background: var(--sb-ink); color: var(--sb-canvas); font: 800 44px/1 var(--sb-font-num); animation: sb3-bob 2.6s ease-in-out infinite;
}
body.tw-storefront-v3 .sb3-soon__mark::after {
    content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--sb-rose); animation: sb3-ring 2.4s ease-out infinite;
}
body.tw-storefront-v3 .sb3-soon__tag {
    display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; height: 30px; padding: 0 12px; border-radius: 999px;
    background: var(--sb-rose-soft); color: var(--sb-rose-text); font: 600 13px/1 var(--sb-font);
}
body.tw-storefront-v3 .sb3-soon h1 { margin: 16px 0 0; color: var(--sb-ink); font: 700 26px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-soon__text { max-width: 380px; margin: 8px auto 0; color: var(--sb-ink-2); font: 400 15px/1.7 var(--sb-font); }
body.tw-storefront-v3 .sb3-soon__btns { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 22px auto 0; }
/* reduce motion: these loops still play, once and short */
@media (prefers-reduced-motion: reduce) {
    body.tw-storefront-v3 :is(.sb3-soon__mark, .sb3-soon__mark::after, .sb3-omni__cta::after) { animation-duration: 600ms; animation-iteration-count: 1; }
}
/* policy pages (mockup 23, Saad 2026-10-21 23:25 change 2): every word of the page stays as the admin
   wrote it; only the frame around it changes: a plain title, the text on one calm card, the other
   pages as a quiet list (beside it on a computer, under it on a phone), the help box last. */
body.tw-storefront-v3 .page-hero { padding: 16px 0 4px; background: none; color: var(--sb-ink); }
body.tw-storefront-v3 .page-hero .page-hero-icon { display: none; }
body.tw-storefront-v3 .page-hero h1 { margin: 0; color: var(--sb-ink); font: 700 24px/1.3 var(--sb-font); }
body.tw-storefront-v3 .page-hero .page-hero-breadcrumb { margin-top: 4px; color: var(--sb-ink-3); font: 400 13px/1.5 var(--sb-font); }
body.tw-storefront-v3 .page-hero .page-hero-breadcrumb :is(a, strong) { color: var(--sb-ink-3); font-weight: 500; }
body.tw-storefront-v3 .service-page-section { padding: 12px 0 120px; background: none; }
body.tw-storefront-v3 .static-page-layout { grid-template-columns: 260px minmax(0, 720px); justify-content: center; gap: 40px; }
body.tw-storefront-v3 .static-page-sidebar { padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; }
body.tw-storefront-v3 .static-page-sidebar .sps-head { padding: 0 14px 6px; background: none; color: var(--sb-ink-3); font: 500 13px/1.4 var(--sb-font); }
body.tw-storefront-v3 .static-page-sidebar .sps-head i,
body.tw-storefront-v3 .static-page-sidebar .sps-list li a i { display: none; }
body.tw-storefront-v3 .sps-list { display: flex; flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
body.tw-storefront-v3 .sps-list li a { min-height: 0; padding: 10px 14px; border: 0; border-radius: 12px; background: none; color: var(--sb-ink-2); font: 500 15px/1.4 var(--sb-font); white-space: normal; text-decoration: none; }
body.tw-storefront-v3 .sps-list li a:hover { background: var(--sb-mist); color: var(--sb-ink); }
body.tw-storefront-v3 .sps-list li a.active { background: var(--sb-rose-soft); color: var(--sb-rose-text); font-weight: 700; }
body.tw-storefront-v3 .static-page-content { min-height: 0; overflow: visible; border: 0; background: none; border-radius: 0; box-shadow: none; }
body.tw-storefront-v3 .static-page-content .spc-header { display: none; }
body.tw-storefront-v3 .static-page-content .spc-body { padding: 20px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); background: var(--sb-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
body.tw-storefront-v3 .prose-content :is(h1, h2, h3, h4, h5) { color: var(--sb-ink); font-family: var(--sb-font); }
body.tw-storefront-v3 .prose-content :is(h1, h2, h3, h4, h5):first-child { margin-top: 0; }
body.tw-storefront-v3 .prose-content :is(p, li) { color: var(--sb-ink-2); font-size: 15px; line-height: 1.8; }
body.tw-storefront-v3 .prose-content strong { color: var(--sb-ink); }
body.tw-storefront-v3 .prose-content a { color: var(--sb-rose-text); }
body.tw-storefront-v3 .prose-content :is(table th, table td) { border-color: var(--sb-line); }
body.tw-storefront-v3 .prose-content table th { background: var(--sb-mist); color: var(--sb-ink); }
body.tw-storefront-v3 .prose-content blockquote { border-left-color: var(--sb-rose); background: var(--sb-rose-soft); color: var(--sb-ink-2); }
body.tw-storefront-v3 .prose-content hr { border-top-color: var(--sb-line); }
/* the live texts bring their own wrapper and white card from the editor: flattened, as info_pages does */
body.tw-storefront-v3 .prose-content :is(.shinery-page-wrapper, .policy-container) { padding: 0; border: 0; background: none; box-shadow: none; }
/* black theme: colours written into the text in the editor would be dark on dark; the words stay, the colour follows the theme */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .prose-content *:not(a) { color: var(--sb-ink-2) !important; background-color: transparent !important; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .prose-content :is(h1, h2, h3, h4, h5, strong) { color: var(--sb-ink) !important; }
body.tw-storefront-v3 .static-page-content .tw-info-help { margin: 16px 0 0; border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); background: var(--sb-surface); color: var(--sb-ink); }
body.tw-storefront-v3 .tw-info-help-title { color: var(--sb-ink); }
body.tw-storefront-v3 .tw-info-help-sub { color: var(--sb-ink-3); }
body.tw-storefront-v3 :is(.tw-info-help-wa, .tw-info-help-link) { background: var(--sb-surface); box-shadow: var(--sb3-btn-shadow); }
body.tw-storefront-v3 .tw-info-help-link { border-color: var(--sb-line-strong); color: var(--sb-ink); }
@media (max-width: 768px) {
    body.tw-storefront-v3 .static-page-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    body.tw-storefront-v3 .static-page-sidebar { order: 2; }
    body.tw-storefront-v3 .static-page-content .spc-body { padding: 16px; }
}
/* home video row (mockup 19, approved 2026-10-22): the live row's behaviour and admin data; a tinted
   stage, a header with a counter and the arrows, story bars for the auto-slide, a bigger centre card
   with the side cards turned away in 3D (tw-b4-video.js, data-v3), the product as a glass panel on
   the video, a ground shadow. No coloured halo. */
html body.tw-storefront-v3 .sb3-vr { margin-top: 16px; padding: 20px 0 22px; background: linear-gradient(180deg, #FFF0F4 0%, #FFF7F9 55%, var(--sb-canvas) 100%); overflow: hidden; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-vr { background: radial-gradient(120% 70% at 50% 0%, #2A0A14 0%, #120408 45%, #000000 100%); }
@media (min-width: 992px) { html body.tw-storefront-v3 .sb3-vr { max-width: 1240px; margin: 32px auto 8px; padding: 28px 0 30px; border-radius: 28px; } }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__eyebrow { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--sb-rose-line); border-radius: 999px; background: var(--sb-surface); color: var(--sb-rose-text); font: 600 12px/1 var(--sb-font); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__eyebrow .sb3-i { width: 14px; height: 14px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__head h2 { margin: 8px 0 0; color: var(--sb-ink); font: 700 22px/1.25 var(--sb-font); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__head p { margin: 2px 0 0; color: var(--sb-ink-3); font: 400 13.5px/1.5 var(--sb-font); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__nav { display: flex; align-items: center; gap: 8px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__count { color: var(--sb-ink); font: 700 15px/1 var(--sb-font-num); white-space: nowrap; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-arrow { position: static; display: none; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; font-size: 16px; }
@media (min-width: 768px) { html body.tw-storefront-v3 .sb3-vr .b4-vr-arrow { display: inline-grid; } }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bars { display: flex; gap: 6px; margin-top: 14px; }
@media (min-width: 992px) { html body.tw-storefront-v3 .sb3-vr .sb3-vr__bars { max-width: 420px; margin-left: 0; } }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bar { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(17, 17, 17, .10); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-vr .sb3-vr__bar { background: rgba(255, 255, 255, .14); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bar b { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--sb-rose); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bar.is-done b { width: 100%; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bar.is-now b { animation: sb3-vr-fill var(--vr-interval, 4000ms) linear forwards; }
html body.tw-storefront-v3 .sb3-vr.is-held .sb3-vr__bar.is-now b { animation-play-state: paused; background: var(--sb-ink-3); }
@keyframes sb3-vr-fill { from { width: 0; } to { width: 100%; } }
html body.tw-storefront-v3 .sb3-vr .b4-vr { --vr-w: clamp(200px, min(68vw, calc((100svh - 300px) * 9 / 16)), 262px); --vr-k: .74; height: calc(var(--vr-w) * 16 / 9 + 36px); margin-top: 18px; }
@media (min-width: 768px) { html body.tw-storefront-v3 .sb3-vr .b4-vr { --vr-w: 300px; --vr-k: .78; } }
html body.tw-storefront-v3 .sb3-vr .b4-vr-stage { perspective: 1100px; }
html body.tw-storefront-v3 .sb3-vr .b4-vr::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: calc(var(--vr-w) * .9); height: 26px; margin-left: calc(var(--vr-w) * -.45); border-radius: 50%; background: radial-gradient(closest-side, rgba(17, 17, 17, .30), transparent); pointer-events: none; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-vr .b4-vr::after { background: radial-gradient(closest-side, rgba(224, 0, 74, .28), transparent); }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card { top: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 24px; background: #111111; transform-style: preserve-3d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 6px rgba(17, 17, 17, .10), 0 26px 50px -18px rgba(17, 17, 17, .55); }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card.is-active { border: 3px solid #FFFFFF; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-vr .b4-vr-card.is-active { border-color: #2B2B2B; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card::before { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(17, 17, 17, calc(var(--vr-dim, 0) * .42)); pointer-events: none; transform: translateZ(1px); }
html body.tw-storefront-v3 .sb3-vr .b4-vr-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, transparent 22%, transparent 52%, rgba(0, 0, 0, .62) 100%); pointer-events: none; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-logo { top: 14px; height: 18px; }
html body.tw-storefront-v3 .sb3-vr :is(.b4-vr-mute, .b4-vr-close, .sb3-vr__src, .sb3-vr__live, .sb3-vr__pause) {
    position: absolute; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; min-width: 36px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(17, 17, 17, .42); color: #FFFFFF;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 12px/1 var(--sb-font);
}
html body.tw-storefront-v3 .sb3-vr .b4-vr-mute { top: 10px; right: 10px; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-close { top: auto; bottom: 108px; right: 10px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__src { top: 14px; right: 54px; height: 28px; min-width: 28px; border-radius: 10px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__src .sb3-i { width: 15px; height: 15px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__live { top: 14px; right: 54px; height: 28px; padding: 0 9px; border-color: var(--sb-rose); background: var(--sb-rose); visibility: hidden; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__live i { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
/* The bars move with transform only (no layout each frame) and only on the card that is playing. */
html body.tw-storefront-v3 .sb3-vr .sb3-vr__live b { width: 2px; height: 100%; border-radius: 1px; background: #FFFFFF; transform: scaleY(.6); transform-origin: 50% 100%; animation: sb3-vr-eq .9s ease-in-out infinite alternate; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__live b:nth-child(2) { animation-delay: .3s; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__live b:nth-child(3) { animation-delay: .6s; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card:not(.is-playing) .sb3-vr__live b, html body.tw-storefront-v3 .sb3-vr .b4-vr-card.is-paused .sb3-vr__live b { animation-play-state: paused; }
@keyframes sb3-vr-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { html body.tw-storefront-v3 .sb3-vr .sb3-vr__live b { animation-duration: 600ms; animation-iteration-count: 1; } }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__pause { right: 10px; bottom: 108px; visibility: hidden; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__pause .sb3-i { width: 18px; height: 18px; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card.is-playing:not(.is-paused) :is(.sb3-vr__live, .sb3-vr__pause) { visibility: visible; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card.is-playing:not(.is-paused) .sb3-vr__src { visibility: hidden; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-play { top: 44%; z-index: 4; width: 70px; height: 70px; margin: -35px 0 0 -35px; padding-left: 4px; border: 0; background: #FFFFFF; color: var(--sb-rose); font-size: 24px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .22), 0 12px 26px -8px rgba(0, 0, 0, .55); }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card:not(.is-active) .b4-vr-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 17px; box-shadow: none; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-strip {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; height: auto; gap: 10px; padding: 10px; margin: 0;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(17, 17, 17, .46); color: #FFFFFF;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateZ(2px);
}
html body.tw-storefront-v3 .sb3-vr .b4-vr-strip:is(:hover, :focus) { color: #FFFFFF; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-card:not(.is-active) .b4-vr-strip { opacity: 0; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-strip img { flex: 0 0 50px; width: 50px; height: 50px; border: 0; border-radius: 12px; background: #FFFFFF; object-fit: contain; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-name { color: #FFFFFF; font: 600 13.5px/1.3 var(--sb-font); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html body.tw-storefront-v3 .sb3-vr .b4-vr-price { display: flex; align-items: baseline; gap: 6px; color: #FFFFFF; font: 700 16px/1.2 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-vr .b4-vr-price del { margin: 0; color: rgba(255, 255, 255, .65); font: 400 12px/1 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__off { padding: 1px 6px; border-radius: 6px; background: var(--sb-rose); color: #FFFFFF; font: 700 11px/1.4 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-vr .b4-vr-go { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--sb-rose); color: #FFFFFF; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__tip { display: flex; justify-content: center; gap: 6px; margin-top: 10px; color: var(--sb-ink-3); font: 400 13px/1.5 var(--sb-font); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__tip span { display: inline-flex; align-items: center; gap: 6px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__tip .sb3-i { width: 15px; height: 15px; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__tip-play, html body.tw-storefront-v3 .sb3-vr:has(.b4-vr.is-playing) .sb3-vr__tip-idle { display: none; }
html body.tw-storefront-v3 .sb3-vr:has(.b4-vr.is-playing) .sb3-vr__tip-play { display: inline-flex; }
/* notification bell (mockup 26b, approved 2026-10-22): a banner that drops from the top on every
   storefront page and in the customer portal (no body prefix: the portal has its own layout), and a
   row in the side menu. Both stay hidden until sb3-push.js sees web push offer them.
   W3 U1 (Saad 2026-10-28, A2 closed): a small card on the LEFT, directly under the header, in the
   same spot as the recent-order card: phone 16 px from the edge and at most 80% wide (the page
   padding never shrinks on 360 px); computer on the left edge of the content under the nav. Layer 290,
   as the recent-order card: under the header and its menus (500), the side menu (350), the search
   (620), the side cart and the spin popup. */
:root{--sb3-edge-x:16px}
@media (min-width:901px){:root{--sb3-edge-x:24px}}
@media (min-width:992px){:root{--sb3-edge-x:20px}}
@media (min-width:1200px){:root{--sb3-edge-x:calc((100% - min(1600px, 100% - 40px)) / 2 + 24px)}}
.sb3-pb{position:fixed;top:var(--sb3-toast-top,calc(72px + env(safe-area-inset-top,0px)));left:var(--sb3-edge-x);right:auto;z-index:290;width:min(80vw,320px);padding:12px;border:1px solid var(--sb-line,#E8E8E8);border-radius:var(--sb-r-md,14px);background:rgba(255,255,255,.86);color:var(--sb-ink,#111111);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--sb-shadow-2,0 6px 16px rgba(27,20,32,.08));font-family:var(--sb-font,'Hind Siliguri',system-ui,sans-serif);animation:sb3-pb-in .25s cubic-bezier(.2,.8,.2,1) both}
.sb3-pb[hidden],.sb3-pr[hidden]{display:none}
@media (min-width:901px){.sb3-pb{width:340px}}
/* the customer portal has its own shell: under its 55 px top bar on a phone, beside its 256 px side menu on a computer */
body.pv .sb3-pb{top:calc(64px + env(safe-area-inset-top,0px))}
@media (min-width:1024px){body.pv .sb3-pb{top:24px;left:288px}}
@keyframes sb3-pb-in{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
.sb3-pb__top{display:flex;align-items:flex-start;gap:10px}
.sb3-pb__bell{flex:none;position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #F8CFDB;border-radius:10px;background:#FFF0F4;color:#C2003A}
.sb3-pb__bell .sb3-i{width:20px;height:20px;transform-origin:50% 5px;animation:sb3-pb-ring 4s cubic-bezier(.2,.8,.2,1) infinite}
.sb3-pb__bell::after{content:"";position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:#E0004A;box-shadow:0 0 0 2px #FFF0F4}
@keyframes sb3-pb-ring{0%,78%,100%{transform:none}83%{transform:rotate(16deg)}88%{transform:rotate(-13deg)}93%{transform:rotate(7deg)}97%{transform:rotate(-2deg)}}
.sb3-pb__t{flex:1;min-width:0;display:grid;gap:2px}
.sb3-pb__t b{font-weight:700;font-size:15px;line-height:1.3}
.sb3-pb__t p{margin:0;font-size:13px;line-height:1.45;opacity:.82}
.sb3-pb__x{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px -8px 0;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer}
.sb3-pb__x .sb3-i{width:18px;height:18px}
.sb3-pb__on,.sb3-pr__on{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:#E0004A;color:#FFFFFF;font:600 16px/1 var(--sb-font,'Hind Siliguri',system-ui,sans-serif);cursor:pointer;box-shadow:0 1px 2px rgba(17,17,17,.10),0 6px 14px -6px rgba(17,17,17,.28);transition:transform .16s ease}
.sb3-pb__on{width:auto;min-height:40px;margin:8px 0 0 48px;padding:0 16px;border-radius:10px;font-size:14px}
.sb3-pb__on .sb3-i{width:18px;height:18px}
.sb3-pb__on::after,.sb3-pr__on::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s ease}
.sb3-pb__on:hover::after,.sb3-pr__on:hover::after{left:120%}
.sb3-pb__on:active,.sb3-pr__on:active{transform:scale(.97)}
.sb3-pr{display:flex;align-items:center;gap:12px;margin:10px 16px 4px;padding:10px 12px;border:1px solid var(--sb-line,#E8E8E8);border-radius:14px;background:var(--sb-mist,#F4F4F4)}
.sb3-pr__bell{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #F8CFDB;border-radius:11px;background:var(--sb-surface,#FFFFFF);color:#C2003A}
.sb3-pr__bell .sb3-i{width:19px;height:19px}
.sb3-pr__t{flex:1;min-width:0;display:grid;gap:1px}
.sb3-pr__t b{font-weight:600;font-size:14px;line-height:1.35;color:var(--sb-ink,#111111)}
.sb3-pr__t small{font-size:12px;line-height:1.45;color:var(--sb-ink-3,#595959)}
.sb3-pr__on{flex:none;min-height:34px;padding:0 12px;border-radius:10px;font-size:13px}
:root[data-sb-theme="dark"] .sb3-pb,body.pv-dark .sb3-pb{border-color:#2B2B2B;background:rgba(20,20,20,.86);color:#F2F2F2;box-shadow:0 8px 24px rgba(0,0,0,.6)}
:root[data-sb-theme="dark"] .sb3-pb__bell,body.pv-dark .sb3-pb__bell{border-color:#5A1A2E;background:#2A0A14;color:#FF6B95}
:root[data-sb-theme="dark"] .sb3-pb__bell::after,body.pv-dark .sb3-pb__bell::after{box-shadow:0 0 0 2px #2A0A14}
:root[data-sb-theme="dark"] .sb3-pb__x,body.pv-dark .sb3-pb__x{background:transparent}
/* one card at a time: the recent-order card waits while the notification card shows */
body:has(.sb3-pb:not([hidden])) .twpp.is-shown{opacity:0;pointer-events:none}
:root[data-sb-theme="dark"] .sb3-pr__bell{border-color:#5A1A2E;color:#FF6B95}
@media (prefers-reduced-motion: reduce){.sb3-pb{animation-duration:.15s}.sb3-pb__bell .sb3-i{animation-duration:1.2s;animation-iteration-count:1}}
/* end notification bell */

/* ---------- S1 #2: computer header (mockup 02) ---------- */
@media (min-width: 901px) {
    :root[data-sb-theme] body.tw-storefront-v3 .site-header { background: var(--sb-canvas); border-bottom: 0; box-shadow: none; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-inner { min-height: 76px; gap: 24px; border-bottom: 1px solid var(--sb-line); }
    :root[data-sb-theme] body.tw-storefront-v3 .header-inner .logo img { height: 34px; width: auto; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-search {
        flex: 1 1 auto; max-width: 620px; height: 48px; margin: 0 auto; padding: 0 16px 0 48px; position: relative;
        border: 0; border-radius: var(--sb-r-pill); background: var(--sb-mist); box-shadow: none;
    }
    :root[data-sb-theme] body.tw-storefront-v3 .header-search:focus-within { background: var(--sb-surface); box-shadow: 0 0 0 1px var(--sb-line-strong), 0 0 0 4px rgba(224, 0, 74, .16); }
    :root[data-sb-theme] body.tw-storefront-v3 .header-search input { height: 100%; padding: 0; background: transparent; color: var(--sb-ink); font-size: 15px; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-search input::placeholder { color: var(--sb-ink-3); opacity: 1; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-search .search-submit {
        position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; margin: 0; padding: 0;
        border: 0; border-radius: var(--sb-r-pill); background: transparent; box-shadow: none; color: var(--sb-ink-3);
    }
    :root[data-sb-theme] body.tw-storefront-v3 .header-search .search-submit :is(svg, .sb3-i) { width: 20px; height: 20px; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-search .search-submit .tw-hv3-sweep { display: none; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions { gap: 4px; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions :is(.b4-hotline-btn, .btn-track, .cart-amount) { display: none; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions .sb3-hbtn--wish { order: 1; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions .sb3-hbtn--compare { order: 2; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions .sb3-acct { order: 3; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions .cart-wrap { order: 4; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions :is(.sb3-hbtn, .sb3-acct__btn, .cart-btn) {
        position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0;
        border: 0; border-radius: var(--sb-r-pill); background: transparent; box-shadow: none; color: var(--sb-ink);
        transition: transform var(--sb3-dur, .16s) var(--sb-ease), background-color var(--sb3-dur, .16s);
    }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions :is(.sb3-hbtn, .sb3-acct__btn, .cart-btn):hover { transform: translateY(-1px); background: transparent; color: var(--sb-ink); }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions :is(.sb3-hbtn, .sb3-acct__btn, .cart-btn):active { transform: scale(.92); background: var(--sb-mist); }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions :is(.sb3-hbtn, .sb3-acct__btn, .cart-btn) :is(svg, .sb3-i, i) { width: 22px; height: 22px; font-size: 20px; color: currentColor; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions :is(.sb3-hbtn__count, .cart-count) {
        position: absolute; top: 4px; right: 2px; left: auto; min-width: 18px; height: 18px; padding: 0 5px; border: 0; border-radius: var(--sb-r-pill);
        background: var(--sb-rose); color: #FFFFFF; font: 700 12px/18px var(--sb-font-num); font-style: normal; text-align: center; box-shadow: none; transform: none;
    }
    :root[data-sb-theme] body.tw-storefront-v3 .header-actions .sb3-hbtn__count[hidden] { display: none; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-category-bar { background: var(--sb-canvas); border-top: 0; border-bottom: 1px solid var(--sb-line); box-shadow: none; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-catbar { display: flex; align-items: center; gap: 28px; min-height: 48px; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-category-inner { justify-content: flex-start; gap: 28px; flex: 1 1 auto; min-width: 0; }
    :root[data-sb-theme] body.tw-storefront-v3 .header-category-inner .header-cat-link {
        display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0; background: transparent;
        color: var(--sb-ink); font-size: 15px; font-weight: 600; white-space: nowrap;
    }
    :root[data-sb-theme] body.tw-storefront-v3 .header-category-inner :is(.header-cat-link:hover, .header-cat-link.active, .header-cat-item:hover > .header-cat-link) { background: transparent; color: var(--sb-rose-text); }
    :root[data-sb-theme] body.tw-storefront-v3 .header-category-inner .header-cat-link::after { display: none; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-caret { display: inline-block; width: 0; height: 0; margin: 0 2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; color: inherit; opacity: .72; transform: none; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-catbar-track { flex: none; margin-left: auto; color: var(--sb-rose-text); font-size: 15px; font-weight: 600; white-space: nowrap; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-catbar-track:hover { color: var(--sb-rose-press); text-decoration: underline; }
}
@media (max-width: 900px) {
    body.tw-storefront-v3 .header-actions .sb3-hbtn { display: none; }
    body.tw-storefront-v3 .sb3-catbar-track { display: none; }
}
/* end S1 #2 */
/* ---------- S1 #6: toasts at the top, one at a time (GLOBAL-UI-RULES §7.8) ---------- */
body.tw-storefront-v3 { --sb3-toast-top: calc(72px + env(safe-area-inset-top, 0px)); }
body.tw-storefront-v3:has(#noticeTicker):not(.notice-closed) { --sb3-toast-top: calc(108px + env(safe-area-inset-top, 0px)); }
@media (min-width: 901px) {
    body.tw-storefront-v3 { --sb3-toast-top: 136px; }
    body.tw-storefront-v3:has(#noticeTicker):not(.notice-closed) { --sb3-toast-top: 172px; }
}
:root[data-sb-theme] body.tw-storefront-v3 .sb3-toast {
    top: var(--sb3-toast-top); bottom: auto; display: flex; align-items: center; width: min(92vw, 360px); max-width: none; min-height: 48px;
    padding: 12px 16px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); background: var(--sb-surface); color: var(--sb-ink);
    box-shadow: var(--sb-shadow-2); transform: translate(-50%, -8px);
}
:root[data-sb-theme] body.tw-storefront-v3 .sb3-toast.is-on { transform: translate(-50%, 0); }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-stack { top: var(--sb3-toast-top); bottom: auto; left: 50%; right: auto; width: min(92vw, 360px); transform: translateX(-50%); }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-stack .sbt:not(:last-child) { display: none; }
:root[data-sb-theme] body.tw-storefront-v3 .sbt {
    min-height: 48px; padding: 12px 8px 12px 14px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-md);
    background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-2); animation-name: sb3-toast-in;
}
:root[data-sb-theme] body.tw-storefront-v3 .sbt.is-out { transform: translateY(-8px); }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; background: none; }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-title { color: var(--sb-ink); font-size: 14px; }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-text { color: var(--sb-ink-2); font-size: 14px; }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-x { color: var(--sb-ink-3); }
:root[data-sb-theme] body.tw-storefront-v3 :is(.sbt-x:hover, .sbt-x:focus-visible) { background: var(--sb-mist); color: var(--sb-ink); }
@keyframes sb3-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* end S1 #6 */
:root[data-sb-theme] body.tw-storefront-v3 .rc-tip { display: none; } /* S1 #4, QA D-12: the first-visit AI tip covered the Omni card (mockup 21) and took its taps */
/* ---------- S1 #3: footer (mockup 02): #111 in both themes, 44 px social circles, caret toggles, 24 px desktop links ---------- */
:root[data-sb-theme] body.tw-storefront-v3 .site-footer { background: #111111; color: #CFCFCF; border-top: 0; }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer :is(h4, h4 button, .tw-foot-toggle) { color: #FFFFFF; font-weight: 700; }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer :is(p, li a, .footer-about p) { color: #CFCFCF; }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer li a:hover { color: #FFFFFF; }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer .social-links { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer .social-links a {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: var(--sb-r-pill); background: #1C1C1C; color: #FFFFFF; box-shadow: none;
}
:root[data-sb-theme] body.tw-storefront-v3 .site-footer .social-links a:hover { background: #2B2B2B; color: #FFFFFF; transform: translateY(-1px); }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer .social-links .sb3-i { width: 20px; height: 20px; }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer .sb3-caret { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #A8A8A8; transition: transform var(--sb3-dur, .16s) var(--sb-ease); }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer [aria-expanded="true"] .sb3-caret { transform: rotate(180deg); }
:root[data-sb-theme] body.tw-storefront-v3 .site-footer .tw-foot-acc { border-color: #2B2B2B; }
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form input { background: #1C1C1C; border-color: #2B2B2B; color: #FFFFFF; }
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form input::placeholder { color: #A8A8A8; opacity: 1; }
:root[data-sb-theme] body.tw-storefront-v3 .footer-bottom { background: #111111; border-top: 1px solid #2B2B2B; color: #A8A8A8; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-foot-copy { display: block; padding: 4px 0; text-align: left; font-size: 13px; color: #A8A8A8; }
@media (min-width: 901px) {
    :root[data-sb-theme] body.tw-storefront-v3 .site-footer li a { display: inline-block; min-height: 24px; padding: 4px 0; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-foot-copy { text-align: center; }
    :root[data-sb-theme] body.tw-storefront-v3 .site-footer .tw-foot-toggle .sb3-caret { display: none; }
}
/* end S1 #3 */
/* ---------- S1 #7: shell icons (W9) and the notice label (§7.11) ---------- */
:root[data-sb-theme] body.tw-storefront-v3 .notice-badge {
    padding: 0 6px 0 16px; background: transparent; clip-path: none; color: #FF4D7D;
    font-family: var(--sb-font); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
:root[data-sb-theme] body.tw-storefront-v3 :is(.notice-ticker, .notice-track-wrap) { background: #111111; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.notice-ticker, .notice-track-wrap) { background: #0E0E0E; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .notice-ticker { border-bottom: 1px solid #2B2B2B; }
:root[data-sb-theme] body.tw-storefront-v3 .notice-close .sb3-i { width: 16px; height: 16px; }
:root[data-sb-theme] body.tw-storefront-v3 .header-sub-arrow.sb3-i { width: 16px; height: 16px; flex: none; color: var(--sb-ink-3); }
/* end S1 #7 */
/* ---------- W11 (PB002 2026-10-23): motion stays under reduce-motion; endless sweeps move transform only ---------- */
body.tw-storefront-v3 .flash-sale-head::after { left: -30%; animation-name: sb3-flash-shine; }
@keyframes sb3-flash-shine { 0% { transform: translateX(0) skewX(-20deg); } 55%, 100% { transform: translateX(267%) skewX(-20deg); } }
/* end W11 */
/* ---------- S2 W8: computer tap targets, 24 px (WCAG 2.5.8) ---------- */
:root[data-sb-theme] body.tw-storefront-v3 .sb3-catbar-track { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 0; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-foot-copy a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; }
:root[data-sb-theme] body.tw-storefront-v3 .product-card .product-title a { display: block; min-height: 24px; overflow: hidden; }
/* end S2 W8 */
/* ---------- S2: wishlist and compare (mockup 14) ---------- */
body.tw-storefront-v3 .sb3-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0 4px; color: var(--sb-ink-3); font: 400 13px/1.4 var(--sb-font); }
body.tw-storefront-v3 .sb3-crumb a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-decoration: none; }
body.tw-storefront-v3 .sb3-crumb a:hover { color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-crumb .sb3-i { width: 14px; height: 14px; flex: none; }
body.tw-storefront-v3 .sb3-crumb [aria-current="page"] { color: var(--sb-ink); font-weight: 500; }
body.tw-storefront-v3 .sb3-page__head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body.tw-storefront-v3 .sb3-page__count { flex: none; color: var(--sb-ink-3); font: 400 13px/1.4 var(--sb-font-num, var(--sb-font)); }
body.tw-storefront-v3 .sb3-compare { margin-top: 12px; border: 0; border-radius: 0; background: transparent; }
body.tw-storefront-v3 .sb3-compare__table { min-width: 560px; }
body.tw-storefront-v3 .sb3-compare__table :is(th, td) { color: var(--sb-ink); font-weight: 500; }
body.tw-storefront-v3 .sb3-compare__table tbody th { width: 96px; color: var(--sb-ink-3); font-weight: 600; }
body.tw-storefront-v3 .sb3-compare__item img { width: 96px; height: 96px; max-width: none; object-fit: contain; border-radius: 14px; }
body.tw-storefront-v3 .sb3-compare__name { color: var(--sb-ink); text-decoration: none; }
body.tw-storefront-v3 .sb3-compare__name:hover { color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-stars { display: inline-flex; gap: 2px; }
body.tw-storefront-v3 .sb3-star { display: inline-flex; color: var(--sb-line-s, var(--sb-line)); }
body.tw-storefront-v3 .sb3-star.is-on { color: var(--sb-ink); }
body.tw-storefront-v3 .sb3-star .sb3-i { width: 14px; height: 14px; }
body.tw-storefront-v3 .sb3-compare__note { margin: 8px 0 0; color: var(--sb-ink-3); font: 400 13px/1.5 var(--sb-font); }
/* mockup 14 (PB002 review): the compare page's content is 1160 px wide on a computer, not the full container */
@media (min-width: 1200px) { :root[data-sb-theme] body.tw-storefront-v3 .sb3-page--compare { max-width: calc(1160px + 2 * var(--sb3-gutter, 12px)); padding-inline: var(--sb3-gutter, 12px); } }
/* mockup 14: the compare row has the order pill only (the cart button and ♡ / ⇄ belong to cards) */
:root[data-sb-theme] body.tw-storefront-v3 .sb3-compare__table .sb3-card__order { flex: none; width: auto; padding: 0 20px; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-compare__table :is(.sb3-card__cart, .sb3-card__tools) { display: none; }
/* end S2 wishlist and compare */
/* ---------- S2 round 2: cards, concern page, all categories (mockups 02 / 06 / 09 / 14) ---------- */
/* cards: the new price first in ink, the old one struck after it */
:root[data-sb-theme] body.tw-storefront-v3 .product-card .product-price del { order: 0; }
:root[data-sb-theme] body.tw-storefront-v3 .product-card .product-price { color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3 .product-card .product-price del { color: var(--sb-ink-3); }
/* concern page: the other concerns wrap as outlined chips */
:root[data-sb-theme] body.tw-storefront-v3 .sb3-concerns { flex-wrap: wrap; overflow: visible; padding-bottom: 16px; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-concerns a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--sb-line); background: var(--sb-surface); color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-concerns a:hover { border-color: var(--sb-rose-text); color: var(--sb-rose-text); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-concerns--soft a { border-color: transparent; background: var(--sb-rose-soft); color: var(--sb-rose-text); }
/* all categories: a two-column grid of cards (three or four on a computer) */
body.tw-storefront-v3 .sb3-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
body.tw-storefront-v3 .sb3-cat {
    position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 100px; padding: 16px 16px 48px; border: 1px solid var(--sb-line);
    border-radius: var(--sb-r-md); background: var(--sb-surface); color: var(--sb-ink); text-decoration: none;
}
body.tw-storefront-v3 .sb3-cat:hover { border-color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-cat__name { font: 700 16px/1.3 var(--sb-font); }
body.tw-storefront-v3 .sb3-cat__count { color: var(--sb-ink-3); font: 400 13px/1.4 var(--sb-font); }
body.tw-storefront-v3 .sb3-cat__go { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sb-rose-soft); color: var(--sb-rose-text); }
body.tw-storefront-v3 .sb3-cat__go .sb3-i { width: 16px; height: 16px; }
body.tw-storefront-v3 .sb3-cats__concerns h2 { margin: 0 0 12px; color: var(--sb-ink); font: 700 18px/1.3 var(--sb-font); }
@media (min-width: 768px) { body.tw-storefront-v3 .sb3-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { body.tw-storefront-v3 .sb3-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* end S2 round 2 */
/* ---------- S3 P1/P2: checkout steps, field errors, order buttons (mockup 08) ---------- */
:root[data-sb-theme] body.tw-storefront-v3 .sb3-steps { display: flex; gap: 6px; margin: 0 0 12px; padding: 12px 0 0; list-style: none; color: var(--sb-ink-3); font: 400 13px/1.3 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li { flex: 1; padding-top: 8px; border-top: 3px solid var(--sb-line); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-steps :is(.is-done, .is-on) { border-color: var(--sb-rose); color: var(--sb-ink); font-weight: 600; }
@media (min-width: 992px) { :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps { max-width: 58%; } }
/* an order tapped with fields left: the red box and a line under it (the toast at the top is sb-toast) */
:root[data-sb-theme] body.tw-storefront-v3 #checkout-form .ck-input.sb3-bad { border-color: var(--sb-bad); box-shadow: none; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-ferr { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--sb-bad); font: 400 13px/1.4 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-ferr .sb3-i { flex: none; width: 16px; height: 16px; }
/* phone bar: the total, then one big "অর্ডার করুন" */
@media (max-width: 991px) {
    :root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 16px; background: var(--sb-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--sb-line); border-radius: 0; }
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .ck-page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
:root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar-total { display: block; flex: none; }
:root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar-total small { display: block; margin: 0; color: var(--sb-ink-3); font-size: 12px; }
:root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar-total strong { color: var(--sb-ink); font: 700 19px/1.2 var(--sb-font-num); }
:root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar-btn { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border-radius: 16px; background: var(--sb-rose); color: var(--sb-on-fill); font: 600 17px/1 var(--sb-font); }
/* computer: "অর্ডার করুন · ৳…" and the call-back note instead of the trust row */
:root[data-sb-theme] body.tw-storefront-v3 #checkout-form .ck-place-order { justify-content: center; min-height: var(--sb3-btn-h, 48px); border-radius: var(--sb3-btn-r, 12px); background: var(--sb-rose); color: var(--sb-on-fill); font: 600 16px/1 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 #checkout-form .ck-place-order [data-sb3-ck-amt] { font-family: var(--sb-font-num); font-weight: 700; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-ck-note { margin: 10px 0 0; color: var(--sb-ink-3); font: 400 13px/1.5 var(--sb-font); text-align: center; }
:root[data-sb-theme] body.tw-storefront-v3 .ck-desktop-btn .ck-trust { display: none; }
/* end S3 P1/P2 */
/* ---------- S3 P5: a toast is its icon and one line (§7.8) ---------- */
:root[data-sb-theme] body.tw-storefront-v3 .sbt-title:not(:only-child) { display: none; }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-title:only-child, :root[data-sb-theme] body.tw-storefront-v3 .sbt-text { color: var(--sb-ink); font: 500 14px/1.45 var(--sb-font); margin: 0; }
:root[data-sb-theme] body.tw-storefront-v3 .sbt-body { align-self: center; }
/* login / register / code pages: the line under a field is the checkout's (mockup 08 .fld .msg) */
:root[data-sb-theme] body.tw-storefront-v3 :is(.auth-field .text-danger, .tw-auth-error) {
    display: flex !important; align-items: flex-start; gap: 6px; margin: 6px 0 0 !important; color: var(--sb-bad) !important; font: 400 13px/1.45 var(--sb-font) !important;
}
:root[data-sb-theme] body.tw-storefront-v3 :is(.auth-field .text-danger, .tw-auth-error)::before {
    content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / 16px no-repeat;
}
/* black theme: the field box was light around a black input (one box, as the checkout's) */
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-input-wrap,
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-input-wrap:focus-within { background: var(--sb-mist); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-input-wrap:not(:focus-within) { border-color: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-input-wrap:has(input.is-invalid) { border-color: var(--sb-bad); background: var(--sb-mist); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-input-wrap input { background: transparent; color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-check-block[style] { background: var(--sb-mist) !important; border-color: var(--sb-line) !important; }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-check-block[style] > span[style] { color: var(--sb-ink) !important; }
/* end S3 P5 */
/* ---------- S3 P7: the recent-order card is a toast at the top (§7.8) ----------
   W3 U1 (Saad 2026-10-28, A2 closed): LEFT and smaller, directly under the header. Phone: 16 px from
   the edge, at most 80% wide; computer: on the content's left edge under the nav (--sb3-edge-x, set
   with the notification card), 340 px. One product line, a 36 px picture. */
:root[data-sb-theme] body.tw-storefront-v3 .twpp {
    top: var(--sb3-toast-top); bottom: auto; left: var(--sb3-edge-x); right: auto; width: min(80vw, 320px);
    background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); box-shadow: var(--sb-shadow-2);
    transform: translate3d(0, -8px, 0); transition: opacity var(--sb-mid) ease, transform var(--sb-mid) ease;
}
:root[data-sb-theme] body.tw-storefront-v3 .twpp.is-shown { transform: translate3d(0, 0, 0); }
:root[data-sb-theme] body.tw-storefront-v3:has(.sbt-stack .sbt) .twpp.is-shown { opacity: 0; pointer-events: none; }
:root[data-sb-theme] body.tw-storefront-v3 .twpp-link { gap: 10px; min-height: 48px; padding: 8px 40px 8px 8px; color: var(--sb-ink); border-radius: var(--sb-r-md); }
:root[data-sb-theme] body.tw-storefront-v3 .twpp-img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; background: var(--sb-mist); }
:root[data-sb-theme] body.tw-storefront-v3 .twpp-product { font-size: 13px; -webkit-line-clamp: 1; }
:root[data-sb-theme] body.tw-storefront-v3 .twpp-meta { color: var(--sb-ink-2); font-size: 12px; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .twpp-kicker { color: var(--sb-rose-text); }
:root[data-sb-theme] body.tw-storefront-v3 .twpp-close { top: 50%; right: 0; width: 40px; height: 40px; margin-top: -20px; color: var(--sb-ink-3); }
@media (min-width: 901px) { :root[data-sb-theme] body.tw-storefront-v3 .twpp { left: var(--sb3-edge-x); bottom: auto; width: 340px; } }
/* W3 U1 fix (PB002 2026-10-28 17:1x): on a phone both cards are centred under the header (the left
   placement measured 16 px left and 62 px right at 390). Margins centre them, so the show/hide
   transform is untouched; computers keep the content's left edge. */
@media (max-width: 900px) {
    :root[data-sb-theme] body.tw-storefront-v3 :is(.twpp, .sb3-pb) { left: 0; right: 0; margin-inline: auto; }
}
/* end S3 P7 */
/* S3: mockup 14, the compare order pill starts at the left of its column */
:root[data-sb-theme] body.tw-storefront-v3 .sb3-compare__table .sb3-card__actions { justify-content: flex-start; }
/* ---------- S3: order track (mockup 11) ---------- */
@media (min-width: 1200px) { :root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track { max-width: calc(1160px + 2 * var(--sb3-gutter, 12px)); padding-inline: var(--sb3-gutter, 12px); } }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track { max-width: 400px; margin: 12px 0 0; padding: 16px; border: 1px solid var(--sb-line); border-radius: 20px; background: var(--sb-surface); box-shadow: var(--sb3-btn-shadow, var(--sb-shadow-1)); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track h1 { margin: 0; color: var(--sb-ink); font: 700 22px/1.3 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track__lead { margin: 6px 0 0; color: var(--sb-ink-2); font: 400 15px/1.5 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track .sb3-fld { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track .sb3-fld label { margin: 0; color: var(--sb-ink-3); font: 400 14px/1.4 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-fbox { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 14px; background: var(--sb-mist); color: var(--sb-ink-2); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-fbox:focus-within { border-color: var(--sb-rose); background: var(--sb-surface); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-fbox .sb3-i { flex: none; width: 20px; height: 20px; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-fbox input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--sb-ink); font: 400 16px/1 var(--sb-font-num, var(--sb-font)); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-fbox input::placeholder { color: var(--sb-ink-3); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-fbox:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--sb-rose-soft); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-fld__hint { margin: 0; color: var(--sb-ink-3); font: 400 13px/1.5 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track__go { width: 100%; min-height: 48px; margin-top: 14px; gap: 8px; border-radius: 14px; font: 600 15px/1 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track__go .sb3-i { width: 20px; height: 20px; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-track > .sb3-ferr { margin-top: 10px; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track .tw-order-help { max-width: 400px; margin: 16px 0 0; padding: 16px; border: 1px solid var(--sb-line); border-radius: 20px; background: var(--sb-surface); box-shadow: none; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track :is(.tw-order-help-title) { color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track :is(.tw-order-help-sub) { color: var(--sb-ink-3); }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track .tw-order-wa { background: transparent; }
/* the result (mockup 11 right card): white head with #id, date · total and the status pill; rose steps */
:root[data-sb-theme] body.tw-storefront-v3.tw-order-page .service-card-wide { max-width: 735px; margin-inline: 0; }
:root[data-sb-theme] body.tw-storefront-v3 .track-order-card { border: 1px solid var(--sb-line); border-radius: 20px; background: var(--sb-surface); box-shadow: var(--sb3-btn-shadow, var(--sb-shadow-1)); }
:root[data-sb-theme] body.tw-storefront-v3 .track-order-head { align-items: flex-start; padding: 16px 16px 12px; background: var(--sb-surface); color: var(--sb-ink); border-bottom: 1px solid var(--sb-line); text-align: left; }
:root[data-sb-theme] body.tw-storefront-v3 .track-order-id { color: var(--sb-ink); font: 700 15px/1.3 var(--sb-font-num); }
:root[data-sb-theme] body.tw-storefront-v3 .track-order-date { margin-top: 4px; color: var(--sb-ink-3); font: 400 13px/1.4 var(--sb-font-num); }
:root[data-sb-theme] body.tw-storefront-v3 .track-status-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sb-rose-soft); color: var(--sb-rose-text); font: 600 13px/1 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .track-timeline { margin: 0 0 16px; padding: 4px 0 0; background: transparent; }
:root[data-sb-theme] body.tw-storefront-v3 .track-step { gap: 12px; padding-bottom: 18px; }
:root[data-sb-theme] body.tw-storefront-v3 .track-step:not(:last-child)::before { left: 9px; top: 22px; width: 2px; background: var(--sb-line); }
:root[data-sb-theme] body.tw-storefront-v3 .track-step.done:not(:last-child)::before { background: var(--sb-rose); }
:root[data-sb-theme] body.tw-storefront-v3 .track-dot { width: 20px; height: 20px; border: 2px solid var(--sb-line-strong, var(--sb-line)); background: var(--sb-surface); box-shadow: none; }
:root[data-sb-theme] body.tw-storefront-v3 .track-step.done .track-dot { border-color: var(--sb-rose); background: var(--sb-rose); }
:root[data-sb-theme] body.tw-storefront-v3 .track-step.active .track-dot { border: 4px solid var(--sb-rose); background: var(--sb-surface); box-shadow: none; }
:root[data-sb-theme] body.tw-storefront-v3 .track-step strong { color: var(--sb-ink); font: 600 15px/1.35 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .track-step small { color: var(--sb-ink-3); font: 400 13px/1.4 var(--sb-font-num); }
:root[data-sb-theme] body.tw-storefront-v3 :is(.track-items-title, .track-item-name, .track-summary-row, .track-meta-item p, .track-item-price strong) { color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3 :is(.track-meta-item h6, .track-meta-item small, .track-item-meta, .track-item-price small) { color: var(--sb-ink-3); }
:root[data-sb-theme] body.tw-storefront-v3 .track-meta-icon { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
:root[data-sb-theme] body.tw-storefront-v3 :is(.track-order-summary, .track-items-title, .track-order-meta) { border-color: var(--sb-line); }
:root[data-sb-theme] body.tw-storefront-v3 .track-item-img { background: var(--sb-mist); }
:root[data-sb-theme] body.tw-storefront-v3 .track-actions { justify-content: flex-start; max-width: 735px; }
:root[data-sb-theme] body.tw-storefront-v3 .track-btn-primary { background: var(--sb-rose); color: var(--sb-on-fill); border-radius: 14px; }
:root[data-sb-theme] body.tw-storefront-v3 .track-btn-outline { background: var(--sb-surface); color: var(--sb-ink); border: 1px solid var(--sb-line); border-radius: 14px; }
:root[data-sb-theme] body.tw-storefront-v3.tw-order-page .tw-order-help { max-width: 735px; margin-inline: 0; border: 1px solid var(--sb-line); border-radius: 20px; background: var(--sb-surface); }
:root[data-sb-theme] body.tw-storefront-v3.tw-order-page :is(.tw-order-help-title) { color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3.tw-order-page :is(.tw-order-help-sub) { color: var(--sb-ink-3); }
:root[data-sb-theme] body.tw-storefront-v3.tw-order-page .service-page-section { padding-top: 12px; background: transparent; }
/* end S3 order track */
/* ---------- S3: free gift (kit of mockup 14; light and black) ---------- */
:root[data-sb-theme] body.tw-storefront-v3 .fgp-page { padding: 16px 0 120px; background: transparent; color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3 .fgp-cart { display: flex; align-items: flex-start; gap: 8px; border-radius: var(--sb-r-md); background: var(--sb-rose-soft); border: 1px solid var(--sb-rose-line, var(--sb-line)); color: var(--sb-ink); font: 400 14px/1.5 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .fgp-cart.is-earned { background: var(--sb-mist); border-color: var(--sb-line); }
:root[data-sb-theme] body.tw-storefront-v3 .fgp-cart b { color: var(--sb-rose-text); }
:root[data-sb-theme] body.tw-storefront-v3 :is(.fgp-cart, .fgp-rule) .sb3-i { flex: none; width: 18px; height: 18px; margin-top: 2px; }
:root[data-sb-theme] body.tw-storefront-v3 .fgp-card { border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); background: var(--sb-surface); }
:root[data-sb-theme] body.tw-storefront-v3 .fgp-pic { background: var(--sb-mist); }
:root[data-sb-theme] body.tw-storefront-v3 .fgp-name { color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3 :is(.fgp-worth, .fgp-meta, .fgp-note) { color: var(--sb-ink-3); }
:root[data-sb-theme] body.tw-storefront-v3 .fgp-rule { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--sb-rose-text); }
/* end S3 free gift */
/* ---------- S3: search results (mockup 05) ---------- */
:root[data-sb-theme] body.tw-storefront-v3 .rc-top .rc-field { height: 52px; border-radius: 999px; background: var(--sb-surface); border: 1px solid var(--sb-rose-line); box-shadow: 0 0 0 3px rgba(224, 0, 74, .16); }
:root[data-sb-theme] body.tw-storefront-v3 .rc-top .rc-field input { font: 500 16px/1 var(--sb-font); color: var(--sb-ink); }
@media (min-width: 1200px) { :root[data-sb-theme] body.tw-storefront-v3 .rc-bar ~ .twl-page > .container { max-width: calc(1160px + 2 * var(--sb3-gutter, 12px)); padding-inline: var(--sb3-gutter, 12px); } }
@media (min-width: 1200px) { :root[data-sb-theme] body.tw-storefront-v3 .rc-bar :is(.rc-top, .sb3-omni--card) { max-width: 1160px; margin-inline: auto; } }
/* the count is plain grey text beside the heading (mockups 05 and 06), not a pill */
:root[data-sb-theme] body.tw-storefront-v3 .twl-count { padding: 0; border: 0; background: none; color: var(--sb-ink-3); font: 400 13px/1.4 var(--sb-font-num); }
/* computer: "সাজান" sits on the heading's row, at the right (mockup 05) */
@media (min-width: 992px) { :root[data-sb-theme] body.tw-storefront-v3 .rc-bar ~ .twl-page .twl-toolbar { position: relative; z-index: 1; width: max-content; margin: -42px 0 22px auto; } }
/* end S3 search results */
/* ---------- S3b: product page (mockup 07) ---------- */
/* gallery: the photo on mist, the discount badge, ♡ / compare / share on the right, "1 / 4" below */
html body.tw-storefront-v3 .product-detail-page .gallery-main { position: relative; aspect-ratio: 1; border: 0; border-radius: 20px; background: var(--sb-mist); overflow: hidden; }
html body.tw-storefront-v3 .product-detail-page .gallery-main :is(.tw-pg-slide, .gallery-media) { background: transparent; }
html body.tw-storefront-v3 .product-detail-page .gallery-main .tw-pg-slide img { width: 78%; height: 78%; margin: auto; object-fit: contain; }
html body.tw-storefront-v3 .product-detail-page :is(.tw-pg-zoom, .tw-pg-nav) { display: none; }
html body.tw-storefront-v3 .product-detail-page .gallery-disc-badge { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 5px 8px; border-radius: 8px; background: var(--sb-rose); color: var(--sb-on-fill); font: 600 12px/1 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-pd__acts { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
html body.tw-storefront-v3 .sb3-pd__act { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sb-line); border-radius: 50%; background: var(--sb-surface); color: var(--sb-ink-2); box-shadow: var(--sb-shadow-btn-quiet); cursor: pointer; }
html body.tw-storefront-v3 .sb3-pd__act .sb3-i { width: 22px; height: 22px; }
html body.tw-storefront-v3 .product-detail-page .tw-pg-count { bottom: 12px; left: 50%; right: auto; transform: translateX(-50%); padding: 3px 10px; border-radius: 99px; background: var(--sb-surface); color: var(--sb-ink-2); font: 500 12px/1.4 var(--sb-font-num); box-shadow: var(--sb-shadow-btn-quiet); }
html body.tw-storefront-v3 .product-detail-page .gallery-thumbs { gap: 8px; margin-top: 10px; }
html body.tw-storefront-v3 .product-detail-page .gallery-thumb { width: 64px; height: 64px; flex: none; padding: 0; border: 2px solid transparent; border-radius: 14px; background: var(--sb-mist); display: grid; place-items: center; overflow: hidden; }
html body.tw-storefront-v3 .product-detail-page .gallery-thumb.active { border-color: var(--sb-rose); }
html body.tw-storefront-v3 .product-detail-page .gallery-thumb img { width: 80%; height: 80%; object-fit: contain; }
/* the buy column: no card, brand, title, stars, price row */
html body.tw-storefront-v3 .product-detail-page .product-detail-info { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body.tw-storefront-v3 .sb3-pd__brand { display: inline-block; margin-top: 16px; color: var(--sb-rose-text); font: 600 14px/1.4 var(--sb-font-num); text-decoration: none; }
html body.tw-storefront-v3 .sb3-pd__title { margin: 4px 0 8px; color: var(--sb-ink); font: 700 22px/1.3 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-pd__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--sb-ink-3); font-size: 14px; }
html body.tw-storefront-v3 .sb3-pd__rating strong { color: var(--sb-ink); font-weight: 600; }
html body.tw-storefront-v3 .sb3-pd__rating a { color: var(--sb-ink-3); text-decoration: underline; }
html body.tw-storefront-v3 .sb3-pd__prow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
html body.tw-storefront-v3 .product-detail .sb3-pd__prow #newPrice.sb3-pd__price { color: var(--sb-ink); font: 700 28px/1.2 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-pd__prow del { margin: 0; color: var(--sb-ink-3); font: 400 13px var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-pd__save { padding: 3px 8px; border-radius: 6px; background: var(--sb-ok-soft); color: var(--sb-ok); font: 600 13px/1.4 var(--sb-font); }
html body.tw-storefront-v3 .sb3-pd__out { padding: 4px 8px; border-radius: 8px; background: var(--sb-mist); color: var(--sb-ink-2); font: 600 12px/1.2 var(--sb-font); }
html body.tw-storefront-v3 .sb3-pd__prow [hidden] { display: none; }
/* size chips: the size, then its price or "স্টক নেই" */
html body.tw-storefront-v3 .sb3-pd__label { margin: 18px 0 8px; color: var(--sb-ink); font: 600 15px/1.3 var(--sb-font); }
html body.tw-storefront-v3 .sb3-pd__sizes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz { min-width: 96px; height: auto; margin: 0; padding: 10px 14px; border: 1px solid var(--sb-line-strong); border-radius: 14px; background: var(--sb-surface); color: var(--sb-ink); text-align: center; box-shadow: var(--sb-shadow-btn-quiet); cursor: pointer; }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz b { display: block; font: 600 15px/1.3 var(--sb-font-num); }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz small { color: var(--sb-ink-3); font: 500 13px/1.3 var(--sb-font-num); }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz.active { padding: 9px 13px; border: 2px solid var(--sb-rose); background: var(--sb-rose-soft); color: var(--sb-ink); }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz.active small { color: var(--sb-rose-text); }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz.is-out-of-stock { opacity: .5; cursor: not-allowed; }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz.is-out-of-stock b { text-decoration: line-through; }
html body.tw-storefront-v3 .sb3-pd__sizes ~ .btn-clear-option { display: none; }
/* buttons: cart (quiet) + order, WhatsApp, the trust tiles, the delivery row */
html body.tw-storefront-v3 .product-detail-actions.sb3-pd__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
html body.tw-storefront-v3 .product-detail-actions.sb3-pd__cta--out { grid-template-columns: 1fr; }
html body.tw-storefront-v3 .sb3-pd__cta .sb3-btn { width: 100%; min-height: 52px; margin: 0; padding: 0 12px; border-radius: var(--sb-r-sm); font-size: 16px; }
html body.tw-storefront-v3 .sb3-pd__cta .sb3-pd__quiet { border: 1px solid var(--sb-line-strong); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet); }
html body.tw-storefront-v3 .sb3-pd__cta .sb3-btn--primary { color: var(--sb-on-fill); }
html body.tw-storefront-v3 .sb3-pd__soldout { background: var(--sb-rose); color: var(--sb-on-fill); opacity: .5; cursor: not-allowed; }
html body.tw-storefront-v3 .sb3-pd__wa { display: flex; width: 100%; min-height: 52px; margin-top: 10px; font-size: 16px; }
html body.tw-storefront-v3 .sb3-pd__trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
html body.tw-storefront-v3 .sb3-pd__trust li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: var(--sb-mist); color: var(--sb-ink); font: 600 12px/1.3 var(--sb-font); text-align: center; }
html body.tw-storefront-v3 .sb3-pd__trust .sb3-i { width: 22px; height: 22px; color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-pd__drow { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--sb-line); border-radius: 14px; color: var(--sb-ink); font-size: 14px; line-height: 1.4; text-decoration: none; }
html body.tw-storefront-v3 .sb3-pd__drow > .sb3-i { width: 22px; height: 22px; flex: none; }
html body.tw-storefront-v3 .sb3-pd__grow { flex: 1; min-width: 0; }
html body.tw-storefront-v3 .sb3-pd__grow small { display: block; color: var(--sb-ink-3); font-size: 13px; }
html body.tw-storefront-v3 .sb3-pd__chev { width: 18px; height: 18px; flex: none; color: var(--sb-ink-3); }
/* sections: open headings, a faded preview and "আরও পড়ুন"; no tabs */
html body.tw-storefront-v3 .tw-info .tw-tabs { display: none; }
html body.tw-storefront-v3 .tw-info { margin-top: 20px; border: 0; background: transparent; box-shadow: none; }
html body.tw-storefront-v3 .tw-info .tw-panel { display: block; margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--sb-line); border-radius: 0; background: transparent; box-shadow: none; }
html body.tw-storefront-v3 .tw-info .tw-panel-head { display: block; margin: 0 0 10px; }
html body.tw-storefront-v3 .tw-info .tw-acc { padding: 0; border: 0; background: none; color: var(--sb-ink); font: 700 18px/1.3 var(--sb-font); pointer-events: none; }
html body.tw-storefront-v3 .tw-info .tw-acc svg { display: none; }
html body.tw-storefront-v3 .tw-info .tw-panel-body { color: var(--sb-ink-2); }
html body.tw-storefront-v3 .tw-info .tw-panel-body::after { background: linear-gradient(transparent, var(--sb-canvas)); }
html body.tw-storefront-v3 .tw-info .r7-more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--sb-line-strong); border-radius: 999px; background: var(--sb-surface); color: var(--sb-ink); font: 600 14px/1 var(--sb-font); box-shadow: var(--sb-shadow-btn-quiet); }
html body.tw-storefront-v3 .tw-info .r7-more[hidden] { display: none; }
/* reviews: the score card, the rows, two quiet buttons; never clamped */
html body.tw-storefront-v3 .tw-info .product-reviews .tw-panel-body { max-height: none; }
html body.tw-storefront-v3 .tw-info .product-reviews .tw-panel-body::after { display: none; }
html body.tw-storefront-v3 .sb3-pd__rsum { display: flex; align-items: center; gap: 20px; padding: 14px; border-radius: 20px; background: var(--sb-mist); }
html body.tw-storefront-v3 .sb3-pd__rscore { display: flex; flex-direction: column; align-items: center; gap: 4px; }
html body.tw-storefront-v3 .sb3-pd__big { color: var(--sb-ink); font: 700 40px/1 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-pd__bars { display: flex; flex: 1; flex-direction: column; gap: 5px; }
html body.tw-storefront-v3 .sb3-pd__bars div { display: flex; align-items: center; gap: 8px; color: var(--sb-ink-3); font: 500 12px/1 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-pd__bars i { position: relative; flex: 1; height: 6px; border-radius: 6px; background: var(--sb-line); }
html body.tw-storefront-v3 .sb3-pd__bars b { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; background: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-rv { margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--sb-line); border-radius: 0; background: transparent; box-shadow: none; }
html body.tw-storefront-v3 .sb3-rv__who { display: flex; align-items: center; gap: 8px; color: var(--sb-ink); font: 600 14px/1.3 var(--sb-font); }
html body.tw-storefront-v3 .sb3-rv__who .sb3-stars { margin-left: auto; }
html body.tw-storefront-v3 .sb3-rv .review-text { margin: 6px 0 0; color: var(--sb-ink-2); font-size: 14px; }
html body.tw-storefront-v3 .sb3-pd__noreview { margin: 0; padding: 14px 0; color: var(--sb-ink-3); font-size: 14px; }
html body.tw-storefront-v3 .sb3-pd__rbtns { display: flex; gap: 10px; margin-top: 14px; }
html body.tw-storefront-v3 .sb3-pd__rbtns .sb3-btn { flex: 1; min-height: 44px; margin: 0; border: 1px solid var(--sb-line-strong); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet); }
/* the phone order bar (mockup 07 "pbar"): size + price, the cart button, "অর্ডার করুন" */
html body.tw-storefront-v3 .sb3-order-bar { gap: 10px; padding: 10px 16px; background: var(--sb-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html body.tw-storefront-v3 .sb3-order-bar__price { flex: none; margin-right: 0; }
html body.tw-storefront-v3 .sb3-order-bar__cart { width: 52px; height: 52px; border: 1px solid var(--sb-rose-line); border-radius: 16px; box-shadow: var(--sb-shadow-btn-quiet); }
html body.tw-storefront-v3 .sb3-order-bar__cart .sb3-i { width: 24px; height: 24px; }
html body.tw-storefront-v3 .sb3-order-bar__order { flex: 1; min-height: 52px; border-radius: 16px; font-size: 17px; }
html body.tw-storefront-v3 .sb3-order-bar button:disabled { opacity: .5; cursor: not-allowed; }
/* the size sheet (mockup 07, size sheet): grab bar, title row, chips like the page's, quiet cart + order */
html body.tw-storefront-v3 .b5-picker-panel { border: 1px solid var(--sb-line); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-card); }
html body.tw-storefront-v3 .b5-picker-backdrop { background: var(--sb-backdrop); }
html body.tw-storefront-v3 .b5-picker-grab { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--sb-line-strong); }
html body.tw-storefront-v3 .b5-picker-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sb-mist); color: var(--sb-ink-2); }
html body.tw-storefront-v3 .b5-picker-x .sb3-i { width: 18px; height: 18px; }
html body.tw-storefront-v3 .b5-picker-title { color: var(--sb-ink); font: 700 17px/1.3 var(--sb-font); }
html body.tw-storefront-v3 .b5-picker-name { color: var(--sb-ink); font: 500 14px/1.4 var(--sb-font-num); }
html body.tw-storefront-v3 .b5-picker-price strong { color: var(--sb-ink); font: 700 17px var(--sb-font-num); }
html body.tw-storefront-v3 .b5-picker-img { border-radius: 12px; background: var(--sb-mist); object-fit: contain; }
html body.tw-storefront-v3 .b5-picker-chips { display: flex; flex-wrap: wrap; gap: 10px; }
html body.tw-storefront-v3 .b5-chip { min-width: 96px; padding: 10px 14px; border: 1px solid var(--sb-line-strong); border-radius: 14px; background: var(--sb-surface); color: var(--sb-ink); text-align: center; box-shadow: var(--sb-shadow-btn-quiet); }
html body.tw-storefront-v3 .b5-chip-name { display: block; font: 600 15px/1.3 var(--sb-font-num); }
html body.tw-storefront-v3 .b5-chip-price { color: var(--sb-ink-3); font: 500 13px/1.3 var(--sb-font-num); }
html body.tw-storefront-v3 .b5-chip-price del { display: none; }
html body.tw-storefront-v3 .b5-chip-stock.is-in { display: none; }
html body.tw-storefront-v3 .b5-chip-stock.is-out { display: block; color: var(--sb-ink-3); font: 500 13px/1.3 var(--sb-font); }
html body.tw-storefront-v3 .b5-chip:has(.b5-chip-stock.is-out) { opacity: .5; }
html body.tw-storefront-v3 .b5-chip:has(.b5-chip-stock.is-out) .b5-chip-name { text-decoration: line-through; }
html body.tw-storefront-v3 .b5-chip:has(.b5-chip-stock.is-out) .b5-chip-price { display: none; }
html body.tw-storefront-v3 .b5-chip[aria-checked="true"] { padding: 9px 13px; border: 2px solid var(--sb-rose); background: var(--sb-rose-soft); }
html body.tw-storefront-v3 .b5-chip[aria-checked="true"] .b5-chip-price { color: var(--sb-rose-text); }
html body.tw-storefront-v3 .b5-picker-stepper { border: 1px solid var(--sb-line-strong); border-radius: 999px; background: transparent; }
html body.tw-storefront-v3 .b5-picker-stepper :is(button, input) { border: 0; background: none; color: var(--sb-ink); }
html body.tw-storefront-v3 .b5-picker-qty span { color: var(--sb-ink-3); }
html body.tw-storefront-v3 .b5-picker-note { color: var(--sb-bad); }
html body.tw-storefront-v3 .b5-picker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body.tw-storefront-v3 .b5-picker-actions button { min-height: 52px; border-radius: var(--sb-r-sm); font: 600 16px/1 var(--sb-font); }
html body.tw-storefront-v3 .b5-picker-cart { border: 1px solid var(--sb-line-strong); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet); }
html body.tw-storefront-v3 .b5-picker-order { border: 0; background: var(--sb-rose); color: var(--sb-on-fill); box-shadow: var(--sb-shadow-btn); }
/* the older product-page switches (Build 4 "product_info", the buy box) lose to the mockup here */
html body.tw-storefront-v3 .product-detail .sb3-pd__prow > * { order: 0; }
html body.tw-storefront-v3 .product-detail .sb3-pd__prow del { order: 0; color: var(--sb-ink-3); font: 400 13px var(--sb-font-num); }
html body.tw-storefront-v3 .product-detail .sb3-pd__prow .tw-pd-save.sb3-pd__save { display: inline-flex; margin: 0; padding: 3px 8px; border-radius: 6px; background: var(--sb-ok-soft); color: var(--sb-ok); font: 600 13px/1.4 var(--sb-font); }
html body.tw-storefront-v3 .product-detail .sb3-pd__prow .tw-pd-save.sb3-pd__save[hidden] { display: none; }
html body.tw-storefront-v3 .product-detail .product-detail-actions.sb3-pd__cta > * { grid-column: auto; width: 100%; min-width: 0; }
html body.tw-storefront-v3 .product-detail .product-detail-actions.sb3-pd__cta > [hidden] { display: none; }
html body.tw-storefront-v3 .tw-info > .product-reviews.tw-panel { border-radius: 0; background: transparent; box-shadow: none; }
html body.tw-storefront-v3 .tw-info .tw-panel-body .pd-content { padding: 0; }
/* computer (mockup 07, 1366): photo and buy column side by side, sections left and reviews right, no bar */
@media (min-width: 992px) {
    html body.tw-storefront-v3 .product-detail-page .product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
    html body.tw-storefront-v3 .sb3-pd__brand { margin-top: 0; }
    html body.tw-storefront-v3 .tw-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
    html body.tw-storefront-v3 .tw-info > .tw-panel { grid-column: 1; }
    html body.tw-storefront-v3 .tw-info > .product-reviews { grid-column: 2; grid-row: 1 / span 6; }
    html body.tw-storefront-v3 .sb3-order-bar { display: none; }
}
/* end S3b product page */
/* ---------- S3b: order success (mockup 08, QA P4) ---------- */
html body.tw-storefront-v3 .os-page { background: var(--sb-canvas); padding-top: var(--sb-s-6); }
html body.tw-storefront-v3 .sb3-os { max-width: 560px; margin: 0 auto; padding: var(--sb-s-6) 0 var(--sb-s-4); text-align: center; color: var(--sb-ink-2); }
body.tw-storefront-v3 .sb3-os__ok {
    display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto;
    border-radius: 50%; background: var(--sb-ok-soft); color: var(--sb-ok); animation: sb3OsPop .5s var(--sb-ease) both;
}
body.tw-storefront-v3 .sb3-os__ok .sb3-i { width: 52px; height: 52px; }
@keyframes sb3OsPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.tw-storefront-v3 .sb3-os__ok { animation-duration: .15s; } }
html body.tw-storefront-v3 .sb3-os__title { margin: var(--sb-s-4) 0 0; font: 700 24px/1.25 var(--sb-font); color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-os__lead { margin: 8px 0 14px; font-size: 15px; line-height: 1.6; color: var(--sb-ink-2); }
html body.tw-storefront-v3 .sb3-os__no {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 12px;
    background: var(--sb-mist); font: 600 15px var(--sb-font); color: var(--sb-ink);
}
html body.tw-storefront-v3 .sb3-os__no b { font-family: var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-os__copy {
    display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--sb-ink-2); cursor: pointer;
}
html body.tw-storefront-v3 .sb3-os__next {
    margin: var(--sb-s-6) 0 0; padding: 16px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-lg);
    background: var(--sb-surface); box-shadow: var(--sb-shadow-1); text-align: left;
}
html body.tw-storefront-v3 .sb3-os__h { margin: 0; font: 700 16px/1.4 var(--sb-font); color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-os__next ol { margin: 4px 0 0; padding: 0; list-style: none; }
html body.tw-storefront-v3 .sb3-os__next li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 14px; color: var(--sb-ink-2); }
html body.tw-storefront-v3 .sb3-os__next li i {
    flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sb-rose-soft); color: var(--sb-rose-text);
    font: 700 12px/24px var(--sb-font-num); font-style: normal; text-align: center;
}
html body.tw-storefront-v3 .sb3-os__next li b { color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-os__btns { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sb-s-6); }
html body.tw-storefront-v3 .sb3-os__btns .sb3-btn { width: 100%; min-height: 48px; }
html body.tw-storefront-v3 .sb3-os__quiet { border: 1px solid var(--sb-line-strong); box-shadow: var(--sb-shadow-btn-quiet); }
html body.tw-storefront-v3 .sb3-os__help { margin: 14px 0 0; font-size: 13px; color: var(--sb-ink-3); }
html body.tw-storefront-v3 .sb3-os__help a { color: var(--sb-ink-2); font-family: var(--sb-font-num); text-decoration: underline; }
html body.tw-storefront-v3 .os-page .sb-push-card { max-width: 560px; margin: var(--sb-s-4) auto; }
/* the order's details stay below the mockup's part, on the theme's colours */
html body.tw-storefront-v3 .sb3-os__more {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: 1100px; margin: var(--sb-s-8) auto var(--sb-s-3);
}
html body.tw-storefront-v3 .sb3-os__more .sb3-os__h { flex: 1 1 auto; }
html body.tw-storefront-v3 .sb3-os__link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none;
    font: 600 14px var(--sb-font); color: var(--sb-rose-text); cursor: pointer;
}
html body.tw-storefront-v3 #invoice-pdf-area { max-width: 1100px; margin: 0 auto; background: transparent; }
html body.tw-storefront-v3 .os-page .os-card { background: var(--sb-surface); border-color: var(--sb-line); box-shadow: none; }
html body.tw-storefront-v3 .os-page .os-card-head { background: transparent; border-color: var(--sb-line); }
html body.tw-storefront-v3 .os-page .os-card-icon,
html body.tw-storefront-v3 .os-page .os-status .fa-circle { display: none; }
html body.tw-storefront-v3 .os-page .os-card-title,
html body.tw-storefront-v3 .os-page .os-pro-name,
html body.tw-storefront-v3 .os-page .os-info-item span,
html body.tw-storefront-v3 .os-page .os-total-row.grand { color: var(--sb-ink); }
html body.tw-storefront-v3 .os-page .os-card-sub,
html body.tw-storefront-v3 .os-page .os-pro-meta,
html body.tw-storefront-v3 .os-page .os-pro-price small,
html body.tw-storefront-v3 .os-page .os-info-item label { color: var(--sb-ink-3); }
html body.tw-storefront-v3 .os-page .os-total-row { color: var(--sb-ink-2); }
html body.tw-storefront-v3 .os-page .os-total-row.grand { border-color: var(--sb-line); }
html body.tw-storefront-v3 .os-page .os-pro-price strong { color: var(--sb-ink); font-family: var(--sb-font-num); }
html body.tw-storefront-v3 .os-page .os-product { border-color: var(--sb-line); }
html body.tw-storefront-v3 .os-page .os-pro-thumb { border-color: var(--sb-line); background: var(--sb-mist); }
html body.tw-storefront-v3 .os-page .os-pay-box { background: var(--sb-mist); color: var(--sb-ink); }
html body.tw-storefront-v3 .os-page .os-pay-box .os-total-row { color: var(--sb-ink-2); }
html body.tw-storefront-v3 .os-page .os-pay-box .os-total-row strong { color: var(--sb-ink); }
html body.tw-storefront-v3 .os-page .os-status.due { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .os-page .os-status.paid { background: var(--sb-ok-soft); color: var(--sb-ok); }
/* end S3b order success */
/* ---------- S4 A5: side menu (mockup 28, style A, Saad 2026-10-23) ---------- */
/* the drawer: its own surface and edge, so black never melts into the page */
html body.tw-storefront-v3 #mainNav { background: var(--sb-surface); border-right: 1px solid var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 #mainNav { border-right-color: var(--sb-line-strong); box-shadow: 8px 0 24px rgba(0, 0, 0, .6); }
html body.tw-storefront-v3 .sb3-menu { gap: 0; padding-bottom: 28px; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__head { position: sticky; top: 0; z-index: 2; min-height: 64px; padding: 0 10px 0 16px; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__head .sb3-x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; }
html body.tw-storefront-v3 .sb3-menu .sb3-hotline { margin: 14px 16px 4px; padding: 16px; border-radius: 20px; }
html body.tw-storefront-v3 .sb3-menu .sb3-hotline__btns .sb3-btn { min-height: 44px; border-radius: 12px; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__label { margin: 18px 16px 8px; font-size: 13px; }
/* rows: one bordered box each, 8 px apart, never overlapping (no negative margins) */
html body.tw-storefront-v3 .sb3-menu__list { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
html body.tw-storefront-v3 .sb3-menu .mobile-cat-group { border: 0; }
html body.tw-storefront-v3 .sb3-menu__row {
    display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px; border: 1px solid var(--sb-line);
    border-radius: 16px; background: var(--sb-surface); box-shadow: var(--sb-shadow-1); color: var(--sb-ink); text-decoration: none;
}
html body.tw-storefront-v3 .sb3-menu .sb3-menu__link {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border-radius: 12px; background: none;
    color: var(--sb-ink); font: 500 16px/1.3 var(--sb-font); text-decoration: none;
}
html body.tw-storefront-v3 .sb3-menu .sb3-menu__link:hover { background: none; }
html body.tw-storefront-v3 .sb3-menu a.sb3-menu__row:hover,
html body.tw-storefront-v3 .sb3-menu .sb3-menu__row:has(> .sb3-menu__link:hover) { border-color: var(--sb-rose-line); }
html body.tw-storefront-v3 .sb3-menu__name { flex: 1; min-width: 0; }
html body.tw-storefront-v3 .sb3-menu__tile {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 12px;
    background: var(--sb-rose-soft); color: #E0004A;
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-menu :is(.sb3-menu__tile, .sb3-menu__stile, .sb3-menu__kids) { color: #FF4D7D; }
html body.tw-storefront-v3 .sb3-menu :is(.sb3-menu__tile, .sb3-menu__stile) img { width: 100%; height: 100%; object-fit: cover; }
html body.tw-storefront-v3 .sb3-menu .sb3-g { width: 24px; height: 24px; flex: none; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__toggle {
    flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: var(--sb-mist); color: var(--sb-ink-2);
}
html body.tw-storefront-v3 .sb3-menu .sb3-menu__go { flex: none; width: 28px; display: grid; place-items: center; color: var(--sb-ink-3); }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__go .sb3-i { width: 18px; height: 18px; }
/* W3 U4 (Saad 2026-10-23, 225455: the green arrow is the reference): the one-link rows (আরও, তথ্য ও নীতিমালা)
   carry .sb3-menu__link too, whose padding 0 put their icon tile 8 px left of the category rows' tiles and
   their chevron 16 px right of the category toggles. Same 8 px inset and a 44 px chevron slot: every tile
   and every chevron now sits on one line. */
html body.tw-storefront-v3 .sb3-menu .sb3-menu__row.sb3-menu__link { padding: 8px; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__row.sb3-menu__link .sb3-menu__go { width: 44px; }
/* an open category: pink edge, pink name, pink toggle turned over */
html body.tw-storefront-v3 .sb3-menu .mobile-cat-group:is(.open, .is-open) > .sb3-menu__row { border-color: var(--sb-rose-line); }
html body.tw-storefront-v3 .sb3-menu .mobile-cat-group:is(.open, .is-open) > .sb3-menu__row .sb3-menu__name { color: var(--sb-rose-text); font-weight: 600; }
html body.tw-storefront-v3 .sb3-menu :is(.mobile-cat-group, .drawer-sub-group):is(.open, .is-open) > div > .sb3-menu__toggle { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-menu .drawer-sub-group.is-open > .sb3-menu__srow .sb3-menu__toggle .sb3-i { transform: rotate(180deg); }
html body.tw-storefront-v3 .sb3-menu .drawer-sub-group:not(.is-open) > .sb3-menu__srow .sb3-menu__toggle .sb3-i { transform: none; }
/* sub-categories: smaller boxes on a pink rail */
html body.tw-storefront-v3 .sb3-menu .sb3-menu__sub { margin: 8px 0 2px 14px; padding: 0 0 4px 14px; border-left: 2px solid var(--sb-rose-line); flex-direction: column; gap: 6px; }
html body.tw-storefront-v3 .sb3-menu .mobile-cat-group:is(.open, .is-open) > .sb3-menu__sub { display: flex; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__sub > li { display: block; }
html body.tw-storefront-v3 .sb3-menu__srow {
    display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 6px 6px 8px; border: 1px solid var(--sb-line);
    border-radius: 14px; background: var(--sb-surface);
}
html body.tw-storefront-v3 .sb3-menu .sb3-menu__srow .sb3-menu__link { gap: 10px; color: var(--sb-ink-2); font-size: 15px; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__srow .sb3-menu__toggle { width: 40px; height: 40px; border-radius: 10px; }
html body.tw-storefront-v3 .sb3-menu .drawer-sub-group.is-open > .sb3-menu__srow { border-color: var(--sb-rose-line); }
html body.tw-storefront-v3 .sb3-menu .drawer-sub-group.is-open > .sb3-menu__srow .sb3-menu__link { color: var(--sb-ink); font-weight: 600; }
html body.tw-storefront-v3 .sb3-menu__stile {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 10px;
    border: 1px solid var(--sb-rose-line); background: var(--sb-surface); color: #E0004A;
}
html body.tw-storefront-v3 .sb3-menu .sb3-menu__stile .sb3-g { width: 20px; height: 20px; }
/* child categories: a pink panel of small rows */
html body.tw-storefront-v3 .sb3-menu__kids { display: none; list-style: none; margin: 6px 0 2px 18px; padding: 4px 10px; border-radius: 12px; background: var(--sb-rose-soft); color: #E0004A; }
html body.tw-storefront-v3 .sb3-menu .drawer-sub-group.is-open > .sb3-menu__kids { display: block; }
html body.tw-storefront-v3 .sb3-menu__kids li + li { border-top: 1px solid var(--sb-rose-line); }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__kids a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; color: var(--sb-ink-2); font: 400 14.5px/1.3 var(--sb-font); text-decoration: none; background: none; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__kids .sb3-g { width: 20px; height: 20px; color: #E0004A; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-menu .sb3-menu__kids .sb3-g { color: #FF4D7D; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__sub .sb3-menu__all {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0; border: 1px dashed var(--sb-rose-line);
    border-radius: 12px; background: none; color: var(--sb-rose-text); font: 600 14px/1.3 var(--sb-font);
}
html body.tw-storefront-v3 .sb3-menu .sb3-menu__all .sb3-i { width: 16px; height: 16px; }
/* the dark boxes: "অর্ডার কোথায় আছে?" and the theme box share one shape */
html body.tw-storefront-v3 .sb3-menu__dbox {
    display: flex; align-items: center; gap: 14px; min-height: 80px; margin: 12px 16px 0; padding: 14px 16px; border-radius: 18px;
    background: #111111; color: #F2F2F2; border: 1px solid transparent; box-shadow: var(--sb-shadow-btn); text-decoration: none;
}
html body.tw-storefront-v3 .sb3-menu > a.sb3-menu__dbox { margin-top: 18px; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-menu__dbox { background: #181818; border-color: var(--sb-line-strong); }
html body.tw-storefront-v3 .sb3-menu__dtile { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #262626; color: #FFFFFF; }
html body.tw-storefront-v3 .sb3-menu__dtile .sb3-g { width: 24px; height: 24px; }
html body.tw-storefront-v3 .sb3-menu__dtext { flex: 1; min-width: 0; }
html body.tw-storefront-v3 .sb3-menu__dtext b { display: block; font: 700 17px/1.3 var(--sb-font); color: #FFFFFF; }
html body.tw-storefront-v3 .sb3-menu__dtext small { display: block; font: 400 13px/1.35 var(--sb-font); color: #CFCFCF; text-wrap: balance; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__dbox .sb3-menu__go { color: #FFFFFF; }
html body.tw-storefront-v3 .sb3-menu__sun { display: grid; }
html body.tw-storefront-v3 .sb3-menu__moon { display: none; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-menu__sun { display: none; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-menu__moon { display: grid; }
html body.tw-storefront-v3 .sb3-menu__sw { flex: none; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #262626; }
html body.tw-storefront-v3 .sb3-menu__sw button {
    min-width: 64px; height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #CFCFCF;
    font: 600 14px/1 var(--sb-font); white-space: nowrap; cursor: pointer;
}
html body.tw-storefront-v3 .sb3-menu__sw button[aria-pressed="true"] { background: #E0004A; color: #FFFFFF; box-shadow: var(--sb-shadow-btn); }
/* social, last: round pink-outlined buttons */
html body.tw-storefront-v3 .sb3-menu .sb3-menu__social { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 0 16px; }
html body.tw-storefront-v3 .sb3-menu .sb3-menu__social a {
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--sb-rose-line);
    background: var(--sb-surface); color: #E0004A;
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-menu .sb3-menu__social a { color: #FF4D7D; }
html body.tw-storefront-v3 .sb3-menu .sb3-pr { margin: 18px 16px 0; }
/* end S4 side menu */
/* ---------- S4 A3: product order bar + quantity (old video 172624, Saad 2026-10-23) ---------- */
/* flush on the bottom nav's top edge (its real height, sb-v3.js), under it in the stack so the
   WhatsApp button is never covered; it slides up only while the page's buy buttons are out of view */
@media (max-width: 991.98px) {
    html body.tw-storefront-v3.tw-bottom-nav .sb3-order-bar { bottom: var(--sb3-nav-h, calc(64px + env(safe-area-inset-bottom))); z-index: 290; border-top: 1px solid var(--sb-line); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3.tw-bottom-nav .sb3-order-bar { border-top-color: var(--sb-line-strong); }
    html body.tw-storefront-v3 .sb3-order-bar[data-sb3-watch] { transition: transform 220ms ease, opacity 220ms ease, visibility 0s linear 220ms; }
    html body.tw-storefront-v3 .sb3-order-bar[data-sb3-watch]:not(.is-shown) { transform: translateY(100%); opacity: 0; visibility: hidden; pointer-events: none; }
    html body.tw-storefront-v3 .sb3-order-bar[data-sb3-watch].is-shown { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
    html body.tw-storefront-v3 .sb3-order-bar[data-sb3-watch] { transition-duration: 150ms, 150ms, 0s; transition-delay: 0s, 0s, 150ms; }
}
/* black theme: the buy column sits on the page, not on a #0E0E0E slab that stops short (1366) */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .product-detail-page .product-detail-info { background: transparent; }
/* the quantity: its own row, a soft pill with 44 px buttons in both themes */
html body.tw-storefront-v3 .product-detail-info .sb3-pd__qty { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
html body.tw-storefront-v3 .product-detail-info .sb3-pd__qty[hidden] { display: none; }
html body.tw-storefront-v3 .sb3-pd__qty .product-option-label { margin: 0; color: var(--sb-ink-2); font: 600 14px/1.2 var(--sb-font); }
html body.tw-storefront-v3 .sb3-pd__qty .qty-selector { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--sb-line-strong); border-radius: 14px; background: var(--sb-surface); overflow: visible; }
html body.tw-storefront-v3 .sb3-pd__qty .qty-btn {
    width: 44px; height: 44px; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px;
    background: var(--sb-mist); color: var(--sb-ink); font: 600 20px/1 var(--sb-font); cursor: pointer;
}
html body.tw-storefront-v3 .sb3-pd__qty .qty-btn:hover { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-pd__qty .qty-input {
    width: 52px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--sb-ink); text-align: center;
    font: 700 17px/1 var(--sb-font-num); -moz-appearance: textfield; appearance: textfield;
}
html body.tw-storefront-v3 .sb3-pd__qty .qty-input:focus-visible { outline: 2px solid var(--sb-rose); outline-offset: 2px; border-radius: 8px; }
/* end S4 product order bar */
/* ---------- S4 A4: side cart on the old drawer (Addons 172708, Saad 2026-10-23) ---------- */
html body.tw-storefront-v3 .sb3-cart .sb3-cart__panel { width: min(420px, 92vw); background: var(--sb-surface); color: var(--sb-ink-2); border-left: 1px solid var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-cart .sb3-cart__panel { border-left-color: var(--sb-line-strong); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__head { gap: 12px; min-height: 72px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--sb-line); background: var(--sb-surface); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__head h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--sb-ink); font: 700 20px/1.2 var(--sb-font); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__ico { width: 28px; height: 28px; color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__ico .sb3-i { width: 26px; height: 26px; }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__pill { padding: 5px 10px; border-radius: 999px; background: var(--sb-rose-soft); color: var(--sb-rose-text); font: 600 13px/1 var(--sb-font); white-space: nowrap; }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__pill:empty { display: none; }
html body.tw-storefront-v3 .sb3-cart .twmc-close { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sb-mist); color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-cart .twmc-note:not(:empty) { padding: 12px 20px; background: #E8F7EE; color: #0B7A43; font: 700 14px/1.3 var(--sb-font); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-cart .twmc-note:not(:empty) { background: #0F2A1B; color: #6EE7A0; }
/* the lines: one row each with a line under it, as on the old drawer */
html body.tw-storefront-v3 .sb3-cart .sb3-cart__items { padding: 4px 16px 16px; }
html body.tw-storefront-v3 .sb3-cart .twmc-item { margin: 0; padding: 16px 40px 16px 0; border: 0; border-bottom: 1px solid var(--sb-line); border-radius: 0; background: transparent; box-shadow: none; }
html body.tw-storefront-v3 .sb3-cart .twmc-thumb { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 14px; background: var(--sb-mist); }
/* W3 U5: the old drawer multiplies the photo into its grey tile (tw-b4.css); on the black tile that
   multiply turned every photo black. In black the photo shows as it is, as on the product cards. */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-cart .twmc-thumb img { mix-blend-mode: normal; }
html body.tw-storefront-v3 .sb3-cart .twmc-name { color: var(--sb-ink); font: 600 15px/1.35 var(--sb-font); }
html body.tw-storefront-v3 .sb3-cart .twmc-opt { color: var(--sb-ink-3); }
html body.tw-storefront-v3 .sb3-cart .twmc-row { margin-top: 6px; }
html body.tw-storefront-v3 .sb3-cart .twmc-qty { gap: 2px; padding: 2px; border: 1px solid var(--sb-line-strong); border-radius: 999px; background: var(--sb-surface); }
html body.tw-storefront-v3 .sb3-cart .twmc-qty button { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-cart .twmc-qty button:hover:not(:disabled) { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .twmc-qty button:disabled { color: var(--sb-ink-3); opacity: .5; }
html body.tw-storefront-v3 .sb3-cart .twmc-qty output { min-width: 28px; color: var(--sb-ink); font: 700 16px/1 var(--sb-font-num); text-align: center; }
html body.tw-storefront-v3 .sb3-cart .twmc-line { color: var(--sb-rose-text); font: 700 17px/1.2 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-cart .twmc-remove { top: 14px; right: 0; width: 40px; height: 40px; border-radius: 12px; background: transparent; color: var(--sb-ink-3); }
html body.tw-storefront-v3 .sb3-cart .twmc-remove:hover { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
/* the free delivery and free gift cards, on the theme's own soft pink */
html body.tw-storefront-v3 .sb3-cart .twmc-items > :is(.fd-box, .fg-box) { margin: 16px 0 0; }
html body.tw-storefront-v3 .sb3-cart .fd-box.fd-v3:not(.is-free) { border-color: var(--sb-rose-line); background: var(--sb-rose-soft); color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-cart .fd-v3 .fd-hint b { color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .fd-v3 .fd-bar { background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-rose-line); }
html body.tw-storefront-v3 .sb3-cart .fd-v3:not(.is-free) .fd-bar > span::after { background: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-cart .fd-box.fd-v3.is-free { border-color: #1F5F3A; background: #0F2A1B; color: #6EE7A0; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-cart .fd-v3.is-free .fd-hint b { color: #6EE7A0; }
html body.tw-storefront-v3 .sb3-cart .fg-box.fg-v3 { border-color: var(--sb-rose-line); background: var(--sb-surface); color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-cart .fg-v3:not(.is-earned) .fg-head { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .fg-v3 .fg-thumb { border-color: var(--sb-line); }
html body.tw-storefront-v3 .sb3-cart .fg-v3 .fg-more { color: var(--sb-rose-text); }
/* the fixed footer: subtotal, the delivery line, the lock button with the amount, the whole-cart link */
html body.tw-storefront-v3 .sb3-cart .sb3-cart__foot {
    display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sb-line); background: var(--sb-surface); box-shadow: var(--sb-shadow-bar);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-cart .sb3-cart__foot { border-top-color: var(--sb-line-strong); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__foot.is-empty { display: none; }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--sb-ink-2); font: 500 16px/1.3 var(--sb-font); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__sum strong { color: var(--sb-ink); font: 700 24px/1.1 var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__hint { margin: -4px 0 4px; color: var(--sb-ink-3); font: 400 13.5px/1.4 var(--sb-font); }
html body.tw-storefront-v3 .sb3-cart .twmc-checkout { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 16px; font: 700 17px/1.2 var(--sb-font); }
html body.tw-storefront-v3 .sb3-cart .twmc-checkout .sb3-i { width: 20px; height: 20px; }
html body.tw-storefront-v3 .sb3-cart .twmc-checkout .twmc-subtotal { font-family: var(--sb-font-num); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__all {
    justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px;
    border: 1px solid var(--sb-line-strong); border-radius: 12px; color: var(--sb-ink-2); font: 600 14px/1 var(--sb-font); text-decoration: none;
}
html body.tw-storefront-v3 .sb3-cart .sb3-cart__all:hover { border-color: var(--sb-rose-line); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .sb3-cart__all .sb3-i { width: 16px; height: 16px; }
/* emptied while open: the drawer stays on its own empty state, centred, with its way back to shopping */
html body.tw-storefront-v3 .sb3-cart .twmc-empty-v3 { padding: 28px 4px 8px; border: 0; text-align: center; color: var(--sb-ink-2); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-art { width: 88px; height: 88px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-art .sb3-i { width: 40px; height: 40px; }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-title { margin: 0 0 6px; color: var(--sb-ink); font: 700 18px/1.3 var(--sb-font); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-sub { margin: 0 0 16px; color: var(--sb-ink-3); font: 400 14px/1.5 var(--sb-font); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-v3 .twmc-tiles a { border: 1px solid var(--sb-line); background: var(--sb-mist); color: var(--sb-ink); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-v3 .twmc-tiles a:hover { border-color: var(--sb-rose-line); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-v3 .twmc-starter { border: 1px solid var(--sb-line); background: var(--sb-surface); text-align: left; }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-v3 .twmc-starter .twmc-line { color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-v3 .twmc-add button { border-color: var(--sb-rose-line); background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-v3 .twmc-add button .sb3-i { width: 22px; height: 22px; }
html body.tw-storefront-v3 .sb3-cart .twmc-empty-h { color: var(--sb-ink-3); text-align: left; }
/* the pill wins over the old drawer's light pink (tw-rb.css .twmc-count:not(:empty)) */
html body.tw-storefront-v3 .sb3-cart .twmc-count.sb3-cart__pill:not(:empty) { padding: 5px 10px; background: var(--sb-rose-soft); color: var(--sb-rose-text); font-size: 13px; }
/* phones: the panel stops on the bottom nav's top edge, so its footer is never under the nav */
@media (max-width: 991.98px) {
    html body.tw-storefront-v3.tw-bottom-nav .sb3-cart .sb3-cart__panel { bottom: var(--sb3-nav-h, calc(64px + env(safe-area-inset-bottom))); }
    /* W3 U5: the nav's raised WhatsApp button rises about 14 px over the nav's top edge, right under
       the centred whole-cart link; the footer keeps that much more room so the two never touch */
    html body.tw-storefront-v3.tw-bottom-nav .sb3-cart .sb3-cart__foot { padding-bottom: 30px; }
}
/* end S4 side cart */
/* ---------- S4 A8: footer on the old one (Addons 172736, Saad 2026-10-23) ---------- */
/* The copyright reads "© 2026 Shinery Bangladesh. All rights reserved." (the year is Blade's date('Y');
   the words after the name live here because master.blade.php is held by another session), centred
   at every width. Phones: the page ends under the fixed nav, so the strip reserves the nav's height
   plus the chat bubble's 46 px and its gaps, and the line ends above both. */
:root[data-sb-theme] body.tw-storefront-v3 .sb3-foot-copy { text-align: center; font-size: 14px; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-foot-copy a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
:root[data-sb-theme] body.tw-storefront-v3 .sb3-foot-copy::after { content: ". All rights reserved."; }
@media (max-width: 991.98px) {
    /* W3 U11 (Saad 2026-10-23): that reserve left a blank black band under the line. The strip now
       keeps only the nav's height and a 16 px gap, and the line keeps clear of the chat bubble on the
       right by an equal inset on both sides (46 px bubble + 16 px edge), so it stays centred.
       Measured at 390: the bubble is at x 328-374, y 710-756, level with the last line. */
    :root[data-sb-theme] body.tw-storefront-v3.tw-bottom-nav .footer-bottom { padding: 16px 0 calc(var(--sb3-nav-h, 74px) + 16px); }
    :root[data-sb-theme] body.tw-storefront-v3.tw-bottom-nav .sb3-foot-copy { padding-inline: 62px; }
    /* two clean lines inside that inset: "© 2026 Shinery Bangladesh." over "All rights reserved." */
    :root[data-sb-theme] body.tw-storefront-v3.tw-bottom-nav .sb3-foot-copy a::after { content: "."; }
    :root[data-sb-theme] body.tw-storefront-v3.tw-bottom-nav .sb3-foot-copy::after { content: "All rights reserved."; display: block; }
    :root[data-sb-theme] body.tw-storefront-v3 .site-footer { border-radius: 24px 24px 0 0; }
}
/* ---------- W3 U11: light theme phone header and bottom nav are glass (Saad 2026-10-28) ----------
   tw-r7.css paints both plain white (body.tw-white-bg :is(.site-header, .sbn)); in light the page
   now shows softly through them, as it already does in black. Blur only, nothing moves. The header
   carries its blur on a layer behind it: a backdrop-filter on the header itself would pin its fixed
   children (the search sheet) inside it. */
@media (max-width: 991.98px) {
    :root[data-sb-theme="light"] body.tw-storefront-v3 nav.sb3-nav.sbn {
        background-color: var(--sb-glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    }
    :root[data-sb-theme="light"] body.tw-storefront-v3 .site-header { isolation: isolate; background-color: transparent; }
    :root[data-sb-theme="light"] body.tw-storefront-v3 .site-header::before {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background-color: var(--sb-glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    }
}
/* end W3 U11 */
/* the newsletter row runs the full width: the field grows, the button keeps its send icon */
:root[data-sb-theme] body.tw-storefront-v3 .footer-newsletter { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 901px) { :root[data-sb-theme] body.tw-storefront-v3 .footer-newsletter { grid-column: auto; } }
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form { display: flex; align-items: stretch; width: 100%; max-width: none; gap: 0; padding: 4px; border: 1px solid #2B2B2B; border-radius: 999px; background: #1C1C1C; }
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; }
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form input:focus-visible { outline: 2px solid #FF4D7D; outline-offset: 2px; }
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form button {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
    background: #E0004A; color: #FFFFFF; font: 700 15px/1 var(--sb-font); white-space: nowrap; cursor: pointer;
}
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form button::before {
    content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14l11-11'/%3E%3Cpath d='M21 3l-6.5 18a.55.55 0 0 1-1 0l-3.5-7-7-3.5a.55.55 0 0 1 0-1l18-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14l11-11'/%3E%3Cpath d='M21 3l-6.5 18a.55.55 0 0 1-1 0l-3.5-7-7-3.5a.55.55 0 0 1 0-1l18-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-sb-theme] body.tw-storefront-v3 .newsletter-form button:hover { background: #C4003F; }
/* end S4 footer */
/* ---------- S4 A1: bottom nav across the full width (Saad 2026-10-23) ---------- */
/* Five equal fifths edge to edge, so the WhatsApp button sits on the screen's centre at any phone
   width (the 72 px cap left them bunched to the left: centres 40-328 on 390 and on 412). The old
   --tw-nav-h (60 px) is the live bar's; v3's is 74 px with its labels, so everything that clears
   the bar (the chat bubble, the "just bought" popup) uses the measured one. */
@media (max-width: 991.98px) {
    html body.tw-storefront-v3.tw-bottom-nav { --tw-nav-h: var(--sb3-nav-h, calc(74px + env(safe-area-inset-bottom))); }
    html body.tw-storefront-v3 .sb3-nav { justify-content: space-between; padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
    html body.tw-storefront-v3 .sb3-nav__item { flex: 1 1 0; max-width: none; }
}
/* end S4 bottom nav */
/* ---------- S4 A7: no light lines on the black theme (Saad 2026-10-23, /omni) ---------- */
/* The old switches paint their rules in light greys (white_bg's --cr-line #ECECF0, the section
   tint's #F3E9EE, the live bar's top line); on black they read as thick white lines under the
   header, round the trust strip, between sections and over the bottom nav. Black theme: the
   old line token is the theme's own line, and each rule that hard-codes a grey takes it too. */
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-white-bg { --cr-line: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .site-header { border-bottom-color: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .hl-block.hl-trust { border-color: var(--sb-line); box-shadow: none; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-mq-shot { border-color: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 main.app-main > section.b5-tint,
:root[data-sb-theme="dark"] body.tw-storefront-v3 .hs-section { box-shadow: inset 0 1px 0 var(--sb-line), inset 0 -1px 0 var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 nav.sb3-nav.sbn { box-shadow: 0 -1px 0 var(--sb-line), 0 -4px 16px rgba(0, 0, 0, .5); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 #gcc-input { border-color: var(--sb-line-strong); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .auth-shell { border-color: var(--sb-line); }
/* end S4 dark lines */
/* ---------- S4 A9: order track, one centred column on a computer (Saad 2026-10-23) ---------- */
/* The form card (400 px) and the help card (735 px) sat on the left edge at two widths; now both,
   and the crumb above them, share one 520 px column in the middle of the page. */
@media (min-width: 992px) {
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track :is(.sb3-crumb, .sb3-track, .tw-order-help) { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track .sb3-track { padding: 24px; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-page--track .tw-order-help { margin-top: 16px; padding: 20px 24px; }
}
/* black theme: the WhatsApp line in the brand green, readable on #111 */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-page--track .tw-order-wa { border-color: #25D366; color: #25D366; }
/* end S4 order track */
/* ---------- S4 A10: the product page on black (Saad 2026-10-23) ---------- */
/* The black theme's surface rule (above, "cart-page-card … #pdAlertBox …") carries an id inside its
   :is(), so every class in that list weighs as an id and painted the buy column and each info panel
   #0E0E0E on the #000 page: slabs with hard edges, and the "আরও পড়ুন" fade ran to #000 inside a
   #0E0E0E box. :not(#sb3-x) gives these two the same weight, so mockup 07's flat page holds. */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .product-detail-page .product-detail-info:not(#sb3-x),
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-info .tw-panel:not(#sb3-x) { background-color: transparent; }
/* the score card on black: its own raised surface and a line, the bars on the theme's track */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-pd__rsum { background: var(--sb-surface); border: 1px solid var(--sb-line); }
/* phones: the reviews are a section like the others (one line above), not a framed box whose
   score card ran over its edges */
@media (max-width: 991.98px) {
    :root[data-sb-theme] body.tw-storefront-v3 .tw-info > .product-reviews.tw-panel:not(#sb3-x) { border-width: 1px 0 0; border-style: solid; border-color: var(--sb-line); padding-left: 0; padding-right: 0; }
}
/* the cards' cart button: tw-b4.css (card_v2: .product-card .btn-cart) and tweaks.css (cart_icon_v2)
   painted it #FFF5F8 on black too; .btn-cart is the card's own second class, so this outweighs both */
html body.tw-storefront-v3 .sb3-card__cart, html body.tw-storefront-v3 .product-card .sb3-card__cart.btn-cart { border: 1px solid var(--sb-rose-line); background: var(--sb-rose-soft); color: var(--sb-rose-text); }
/* end S4 product page black */
/* ---------- S4 A11: login, register and the code pages in both themes ----------
   Saad 163741 + probes of /customer/login (2026-10-23): the browser's autofill painted a grey-blue
   bar in the phone field; on black the phones' perks box stayed the light pink-to-white panel with
   near-white words, the computer's pink panel had a pink-on-pink kicker and grey icons, the avatar
   badge was a white disc, the "অথবা" lines were #E3E6EB, and the phone card was a framed box
   pressed under the header while the light phone card is frameless. */
html body.tw-storefront-v3.tw-auth-pages .auth-input-wrap { --sb3-auth-field: var(--tw6-field, #FAFBFC); }
html body.tw-storefront-v3.tw-auth-pages .auth-input-wrap:focus-within { --sb3-auth-field: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-input-wrap { --sb3-auth-field: var(--sb-mist); }
html body.tw-storefront-v3.tw-auth-pages .auth-input-wrap input:-webkit-autofill {
    -webkit-text-fill-color: var(--sb-ink);
    caret-color: var(--sb-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--sb3-auth-field) inset;
    box-shadow: 0 0 0 1000px var(--sb3-auth-field) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-card-head::before,
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-card-icon { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-divider::before,
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-divider::after { background: var(--sb-line); }
@media (max-width: 575.98px) {
    html body.tw-storefront-v3.tw-auth-pages .auth-main { padding-top: 20px; }
    :root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .auth-card { background: transparent; border-color: transparent; box-shadow: none; }
}
@media (max-width: 991.98px) {
    :root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .tw-auth-aside { background: var(--sb-surface); border-color: var(--sb-line); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .tw-auth-perks li { color: var(--sb-ink-3); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .tw-auth-perks li .tw-auth-perk-icon { background: var(--sb-rose-soft); color: var(--sb-rose-text); box-shadow: none; }
}
@media (min-width: 992px) {
    :root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .tw-auth-aside-kicker { color: rgba(255, 255, 255, .85); }
    :root[data-sb-theme="dark"] body.tw-storefront-v3.tw-auth-pages .tw-auth-perks li .tw-auth-perk-icon { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
}
/* end S4 login pages */
/* ---------- S4 B1: the search pages on a computer, and themed filter boxes ----------
   Saad (2026-10-23): on a computer /search and /search?ai=1 showed the phone's back-arrow bar with
   no site header, the Omni card ran edge to edge on the page before a search, the concern tiles and
   the AI hello sat in a 760-780 px strip, cards and filters were small (cards 209 px, filter 250 px)
   and the filter boxes were the browser's own (black squares on black). Now the site's full header
   shows, the page's own bar becomes the big search block under it, and every part shares the
   header's content width: min(1600px, 100% - 40px) less its 24 px padding = 1278 px at 1366. */
html body.tw-storefront-v3 .twl-filter :is(input[type="checkbox"], input[type="radio"]) {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--sb-line-strong);
    border-radius: 6px;
    background: var(--sb-surface) center / 14px no-repeat;
    cursor: pointer;
    transition: background-color var(--sb3-dur, .18s) ease, border-color var(--sb3-dur, .18s) ease, box-shadow var(--sb3-dur, .18s) ease;
}
html body.tw-storefront-v3 .twl-filter input[type="radio"] { border-radius: 50%; }
html body.tw-storefront-v3 .twl-filter input[type="checkbox"]:checked { border-color: var(--sb-rose); background-color: var(--sb-rose); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html body.tw-storefront-v3 .twl-filter input[type="radio"]:checked { border-color: var(--sb-rose); background-color: var(--sb-rose); box-shadow: inset 0 0 0 4px var(--sb-surface); }
html body.tw-storefront-v3 .twl-filter :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--sb-rose); outline-offset: 2px; }
@media (min-width: 992px) {
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 { --sb3-search-w: min(1552px, 100% - 88px); }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .site-header { display: block !important; top: 0; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc :is(.rc-back, .rc-logo) { display: none; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-top { position: relative; width: var(--sb3-search-w); max-width: none; margin: 28px auto 0; padding: 0; gap: 12px; border: 0; background: transparent; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-top .rc-field { flex: 1 1 auto; max-width: none; height: 60px; padding-inline: 8px 12px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-top .rc-field input { font-size: 17px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-top .rc-go { width: 60px; height: 60px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .sb3-omni--card { width: var(--sb3-search-w); max-width: none; margin: 18px auto 0; padding: 24px 28px; gap: 14px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .sb3-omni--card .sb3-omni__avatar--o { width: 52px; height: 52px; font-size: 21px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .sb3-omni--card .sb3-omni__text strong { font-size: 22px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .sb3-omni--card .sb3-omni__desc { font-size: 15.5px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .sb3-omni--card .sb3-omni__cta { min-height: 52px; font-size: 16px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-body { width: var(--sb3-search-w); max-width: none; padding: 32px 0 64px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-find { max-width: none; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-aiw { max-width: 1040px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-hello h1 { font-size: 34px; line-height: 1.3; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-hello p { font-size: 16px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-h { font-size: 18px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-concerns { gap: 14px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-cn { gap: 12px; min-height: 132px; padding: 20px 8px; font-size: 15.5px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-cn i { width: 52px; height: 52px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-cn i svg { width: 26px; height: 26px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-chips .rc-chip { font-size: 15px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc-bar ~ .twl-page > .container { width: var(--sb3-search-w); max-width: none; padding-inline: 0; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .twl-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .twl-grid { gap: 20px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .twl-grid .twl-name { font-size: 15.5px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .twl-grid .twl-price { font-size: 18px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .twl-filter .twl-check { min-height: 44px; gap: 12px; font-size: 15px; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .twl-filter .twl-check em { font-size: 13px; }
}
/* end S4 search desktop */
/* ---------- S4 B2: the video row's side cards take no stray taps; bigger on a computer ----------
   Root cause, from Saad's recording 164707 (ffmpeg frames 16:46:58-16:47:00, touch dots on): with
   "The Ordinary Ascorbyl Glucoside" playing in the centre, a tap at about x 925 / 1080, y 1303 / 2340
   on the right side card opened "CeraVe Skin Renewing Night Cream". The side cards' product strip was
   only opacity 0 (S2 rule above), so it still took taps: elementFromPoint on side card 1's strip
   returns its product link (probe, 390 light). Hidden strips now take no taps and leave the tab
   order; a tap on a side card plays that card (tw-b4-video.js "tap"). On black the side cards'
   35 % white rims were bright lines; they take a faint rim. */
html body.tw-storefront-v3 .sb3-vr .b4-vr-card:not(.is-active) .b4-vr-strip { visibility: hidden; pointer-events: none; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-vr .b4-vr-card:not(.is-active) { border-color: rgba(255, 255, 255, .12); }
@media (min-width: 992px) {
    html body.tw-storefront-v3 .sb3-vr .b4-vr { --vr-w: clamp(320px, calc((100svh - 180px) * 9 / 16), 380px); --vr-k: .8; }
    html body.tw-storefront-v3 .sb3-vr .sb3-vr__head h2 { font-size: 28px; }
    html body.tw-storefront-v3 .sb3-vr .sb3-vr__head p { font-size: 15px; }
    html body.tw-storefront-v3 .sb3-vr .b4-vr-card.is-active .b4-vr-play { width: 80px; height: 80px; margin: -40px 0 0 -40px; font-size: 27px; }
    html body.tw-storefront-v3 .sb3-vr .b4-vr-strip { left: 12px; right: 12px; bottom: 12px; padding: 12px; }
    html body.tw-storefront-v3 .sb3-vr .b4-vr-strip img { flex-basis: 56px; width: 56px; height: 56px; }
    html body.tw-storefront-v3 .sb3-vr .b4-vr-name { font-size: 15px; }
    html body.tw-storefront-v3 .sb3-vr .b4-vr-price { font-size: 18px; }
    html body.tw-storefront-v3 .sb3-vr .sb3-vr__tip { font-size: 14px; }
}
/* end S4 video row */
/* ---------- S4 B3: computer sizing pass (product page, home sections) ----------
   Saad (2026-10-23): on a computer many parts kept the phone's sizes. Measured at 1366: the product
   title 22 px, trust labels 12 px, delivery row 14 px, buttons 52 px; home section titles 22 px,
   category tiles 84 px pictures with 12.5 px names, brand tiles 40 px marks with 12.5 px names.
   Order track (A9), search (B1) and login (A11) had their own slices. Phones unchanged. */
@media (min-width: 992px) {
    html body.tw-storefront-v3 .product-detail-info .sb3-pd__title { font-size: 28px; line-height: 1.3; }
    html body.tw-storefront-v3 .product-detail-info :is(.sb3-pd__brand, .sb3-pd__rating) { font-size: 15px; }
    html body.tw-storefront-v3 .product-detail-info .sb3-pd__prow #newPrice.sb3-pd__price { font-size: 32px; }
    html body.tw-storefront-v3 .product-detail-info .product-option-label { font-size: 15px; }
    html body.tw-storefront-v3 .product-detail-info :is(.sb3-pd__cta > .sb3-btn, .sb3-pd__wa) { min-height: 56px; font-size: 17px; }
    html body.tw-storefront-v3 .product-detail-info .sb3-pd__trust li { padding: 12px 6px; font-size: 13.5px; }
    html body.tw-storefront-v3 .product-detail-info .sb3-pd__drow { font-size: 15px; }
    html body.tw-storefront-v3 :is(.hs-section, .hl-block, .top-categories-section) h2 { font-size: 26px; }
    html body.tw-storefront-v3 .top-categories-section .crt-card .crt-pic { width: 104px; height: 104px; }
    html body.tw-storefront-v3 .top-categories-section .crt-card .crt-mono { font-size: 36px; }
    html body.tw-storefront-v3 .top-categories-section .crt-card .crt-name { font-size: 15px; }
    html body.tw-storefront-v3 .hl-brands .tw-mq-brand { min-width: 150px; min-height: 108px; }
    html body.tw-storefront-v3 .hl-brands .tw-mq-brand .r7-brand-mono { width: 52px; height: 52px; font-size: 22px; }
    html body.tw-storefront-v3 .hl-brands .tw-mq-brand > span:not(.r7-brand-mono) { font-size: 14.5px; }
    html body.tw-storefront-v3 .hs-brands .hs-brand-card { font-size: 17px; }
}
/* end S4 computer sizes */
/* ---------- W3 U2: colour and token audit, both themes (Saad's screenshots of 2026-10-23) ----------
   Found by the W3 sweep (a white box in black, a dark box in light, text under 3:1) on 12 pages at
   390 and 1366. Shared fixes first, then page by page. Tokens only. */
/* 1. the light theme tells the browser it is light: on a phone set to dark mode, the page's
      color-scheme "light dark" let the browser paint form fields dark on the white page */
:root[data-sb-theme="light"] { color-scheme: light; }
:root[data-sb-theme="dark"] { color-scheme: dark; }
/* 2. the info pages' round 6 tokens follow the black theme (contact, complaint, policies, blog) */
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-info-pages {
    --tw6-ink: var(--sb-ink); --tw6-body: var(--sb-ink-2); --tw6-muted: var(--sb-ink-3); --tw6-line: var(--sb-line);
    --tw6-field: var(--sb-mist); --tw6-pink-50: var(--sb-rose-soft); --tw6-pink-100: var(--sb-rose-line); --tw6-green: var(--sb-ok);
}
/* 3. contact, complaint, policy and blog panels that stayed white in black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.page-hero, .service-page-section, .blog-page, .blog-details, .blog-details-page) { background-color: var(--sb-canvas); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.static-page-sidebar, .sps-list li a, .contact-info-side, .complaint-info-panel, .contact-form-side, .complaint-form-panel, .bd-article, .bd-widget) {
    background-color: var(--sb-surface); border-color: var(--sb-line); color: var(--sb-ink-2);
}
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.contact-info-item, .complaint-contact-item, .cf-file-wrap) { background-color: var(--sb-mist); border-color: var(--sb-line); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(a.contact-info-item, a.complaint-contact-item, .cf-file-wrap):hover { background-color: var(--sb-rose-soft); border-color: var(--sb-rose-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.contact-info-item strong, .complaint-contact-item strong, .contact-info-side h3, .complaint-info-head h3, .complaint-form-header h2, .bd-widget-head, .rb-info-title) { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-info-page :is(.cf-input-wrap input, .cf-textarea-wrap textarea, .contact-form-side .cf-group input, .contact-form-side .cf-group textarea):focus { background-color: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-info-page .tw-info-wa { border-color: var(--sb-line-strong); }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-info-page .tw-info-wa :is(.cii-icon, .cci-icon) { background-color: var(--sb-ok-soft); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.complaint-alert-success, .contact-success) { background-color: var(--sb-ok-soft); border-color: var(--sb-line); color: var(--sb-ok); }
body.tw-storefront-v3 :is(.cf-file-wrap small, .rb-info-meta) { color: var(--sb-ink-3); }
body.tw-storefront-v3 .rb-list .rb-item[style] { color: var(--sb-ink-3) !important; }
/* the blog's share buttons: white words on Twitter blue and WhatsApp green read at 2.8:1 and 2:1 */
body.tw-storefront-v3 .bd-share :is(.sh-fb, .sh-tw, .sh-wa) { border: 1px solid var(--sb-line-strong); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet); }
body.tw-storefront-v3 .bd-share .sh-fb i { color: #1877F2; }
body.tw-storefront-v3 .bd-share .sh-wa i { color: var(--sb-ok); }
/* 4. the header search's dropdown (history, popular searches, products) in black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tws { background: var(--sb-surface); border-color: var(--sb-line); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tws-note, .tws-state) { color: var(--sb-ink-2); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tws-note b, .tws-p) { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tws-top, .tws-h, .tws-p-price s, .tws-chip i) { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tws-clear, .tws-p-price, .tws-all) { color: var(--sb-rose-text); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tws-chip { border-color: var(--sb-line-strong); background: var(--sb-mist); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tws-all { border-top-color: var(--sb-line); background: var(--sb-mist); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tws-p:hover, .tws-p.is-active, .tws-chip:hover, .tws-chip.is-active) { background: var(--sb-hover); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.tws-all:hover, .tws-all.is-active) { background: var(--sb-rose-soft); }
/* 5. the computer's category menu (and its side flyout) in black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.header-cat-dropdown, .header-child-dropdown) { background-color: var(--sb-surface); border: 1px solid var(--sb-line); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.header-cat-dropdown .header-sub-link, .header-cat-dropdown a, .header-child-dropdown a) { color: var(--sb-ink) !important; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.header-sub-link, .header-child-dropdown a):hover { background: var(--sb-hover); color: var(--sb-rose-text) !important; }
/* 6. cart page: the coupon strip, the quantity stepper, the delivery bar's track and the gift box */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .cart-page-coupon { background-color: var(--sb-surface); border-color: var(--sb-line); }
/* the cart cards' row dividers were the light theme's near-white lines on black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.cart-page-card, .cart-page-card *) { border-color: var(--sb-line); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .cart-page-qty { background-color: var(--sb-mist); border-color: var(--sb-line-strong); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .cart-page-qty button { background-color: var(--sb-mist); border-color: var(--sb-line-strong); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .cart-page-qty input { background-color: var(--sb-surface); border-color: var(--sb-line-strong); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .fd-box.fd-v3 .fd-bar { background-color: var(--sb-line-strong); }
html body.tw-storefront-v3 .fg-box.fg-v3 { border-color: var(--sb-rose-line); background: var(--sb-surface); color: var(--sb-ink); }
html body.tw-storefront-v3 .fg-v3:not(.is-earned) .fg-head { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
html body.tw-storefront-v3 .fg-v3 :is(.fg-name, .fg-price b) { color: var(--sb-ink); }
html body.tw-storefront-v3 .fg-v3 .fg-thumb { border-color: var(--sb-line); background: var(--sb-surface); }
html body.tw-storefront-v3 .fg-v3 .fg-more { color: var(--sb-rose-text); }
body.tw-storefront-v3 :is(.cart-page-trust-item span, .cart-page-shipping-note) { color: var(--sb-ink-3); }
/* 7. the empty cart's quick links and its bag in black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.cart-v3-empty .cart-v3-tiles a, .twmc-empty-v3 .twmc-tiles a) { border-color: var(--sb-line-strong); background: var(--sb-mist); color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .cart-v3-empty .cart-v3-empty-art { border-color: var(--sb-rose-line); background: var(--sb-rose-soft); color: var(--sb-rose-text); }
/* end W3 U2 */
/* ---------- W3 U7: product page (Saad 2026-10-23, 230622 and 230658) ----------
   Measured at 1366: the photo column was a 615 px square plus its thumbnails (705 px) beside a
   500 px buy column, so a 200 px hole opened under the buy column; and the reviews box had a frame
   with no inset, its title on the frame's edge and its contents 28 px in. */
@media (min-width: 992px) {
    /* a slightly narrower photo column and a 6:5 photo box bring the two columns to about one
       height; the photo keeps its 78 % contain fit inside the box, so nothing is cropped */
    html body.tw-storefront-v3 .product-detail-page .product-detail { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
    html body.tw-storefront-v3 .product-detail-page .gallery-main { aspect-ratio: 6 / 5; }
    /* the description and reviews below use the same two columns, so their edges line up with the
       photo and the buy column above them */
    html body.tw-storefront-v3 .tw-info { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
    /* the buy column stays in view, under the 125 px header, while the photos scroll by */
    html body.tw-storefront-v3 .product-detail-page .product-detail-info { position: sticky; top: 141px; }
    /* reviews: one framed card, title and contents on one 28 px inset */
    html body.tw-storefront-v3 .tw-info > .product-reviews.tw-panel { padding: 20px 28px 24px; border: 1px solid var(--sb-line); border-radius: 20px; background: var(--sb-surface); }
    html body.tw-storefront-v3 .tw-info .product-reviews .tw-panel-body > div { padding: 0; }
}
/* no reviews yet: five quiet stars over the line, and on the rating line under the title */
html body.tw-storefront-v3 .sb3-pd__noreview { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0; }
html body.tw-storefront-v3 .sb3-pd__noreview p { margin: 0; }
html body.tw-storefront-v3 .sb3-pd__noreview .sb3-star .sb3-i { width: 20px; height: 20px; }
html body.tw-storefront-v3 :is(.sb3-pd__noreview, .sb3-pd__rating) .sb3-star:not(.is-on) { color: var(--sb-line-strong); }
/* end W3 U7 */
/* ---------- W3 U8: computer home, videos and brands (Saad 2026-10-23, 230744 231353 231424 231659) ----------
   Measured at 1366: the brand strips and the header run 20-1346 px, the video box ran 63-1303
   (a fixed 1240 px), so its edges matched nothing above or below it; at 1920 the gap was 157 px a side.
   Both brand strips do move (row 2 the other way); they already share the 20-1346 edges. */
@media (min-width: 992px) {
    html body.tw-storefront-v3 .sb3-vr { max-width: min(1600px, calc(100% - 40px)); }
}
/* black theme: a logo drawn in black (Anua, BAHA, The Ordinary, COSRX, 3W Clinic, SKIN1004) vanished
   on the black tile; every logo now sits on its own small light plate, as on a printed label */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-mq-brand img { box-sizing: border-box; padding: 5px 8px; border-radius: 10px; background: var(--sb-logo-plate, #F4F4F5); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .hs-brand-logo img { box-sizing: border-box; padding: 8px 12px; border-radius: 12px; background: var(--sb-logo-plate, #F4F4F5); }
/* end W3 U8 */
/* ---------- W3 U10: computer /search (Saad 2026-10-23; B1 approved by PB002 2026-10-28) ----------
   Measured at 1366: one page had two search fields (header and page); in black a white strip ran
   between the menu and the page field (tw-rc-search.css paints html and body white !important and
   the page starts 28 px down); the section rules were light lines on black; the typing list ran
   93-1273 px under a field at 44-1250 px. */
@media (min-width: 992px) {
    /* B1: the page's big field is the one; the header field steps aside on this page only */
    html body.tw-storefront-v3.tw-search-page .header-inner .header-search { display: none; }
    /* the typing list sits exactly under the field (the round button and its 12 px gap are 72 px) */
    html:root[data-sb-theme] body.tw-storefront-v3.tw-search-v2 .rc .rc-sug { width: calc(var(--sb3-search-w) - 72px); max-width: none; margin: 8px 0 0 calc((100% - var(--sb3-search-w)) / 2); border: 1px solid var(--sb-line); border-radius: 20px; box-shadow: var(--sb-shadow-2); }
}
:root[data-sb-theme="dark"]:has(body.tw-storefront-v3.tw-search-v2),
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-search-v2 { background: #000000 !important; }
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-search-v2 .rc .rc-h { border-bottom-color: var(--sb-line); }
/* end W3 U10 */
/* ---------- W3 U12: lag, the safe fixes (measured 2026-10-28, home at 390, CPU slowed 4x) ----------
   Found: 50 blurred layers (36 on the video cards' chips and price strips, 11 on card badges) that
   the phone re-blurs on every scroll frame, under 3D-turned cards; the video progress bar animated
   width (layout every frame); 31 card "order" buttons ran their light sweep forever. */
/* 1. the progress bar grows by transform, not width; JS still only swaps is-done / is-now */
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bar b { width: 100%; transform: scaleX(0); transform-origin: 0 50%; }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bar.is-done b { transform: scaleX(1); }
html body.tw-storefront-v3 .sb3-vr .sb3-vr__bar.is-now b { animation-name: sb3-vr-grow; }
@keyframes sb3-vr-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 991.98px) {
    /* 2. phones: the chips over the videos and the card badges keep their dark glass colour without
          the blur; on a moving video the blur was not visible anyway */
    html body.tw-storefront-v3 .sb3-vr :is(.b4-vr-mute, .b4-vr-close, .sb3-vr__src, .sb3-vr__live, .sb3-vr__pause) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(17, 17, 17, .6); }
    html body.tw-storefront-v3 .sb3-vr .b4-vr-strip { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(17, 17, 17, .72); }
    html body.tw-storefront-v3 .tw-cb-item { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* 3. the light on the cards' order buttons passes twice, then rests (the product page button keeps it) */
html body.tw-storefront-v3 .product-card .btn-order::after { animation-iteration-count: 2; }
/* end W3 U12 */
/* ---------- W3 S6 consent banner (W3-CONSENT-CONTRACT.md; wording approved 2026-10-28) ----------
   A small card that never covers the bottom nav, the WhatsApp button, the order bar, the chat bubble
   or the top toasts. Phone: full width less 12 px a side, above the nav AND the chat bubble (the bubble
   sits 12 px over the nav and is 46 px tall, so nav + 70 px); with the order bar showing, above that
   too. Computer: bottom left on the content's edge, 400 px. Two buttons of equal weight. */
body.tw-storefront-v3 .sb3-cc {
    position: fixed; z-index: 305; left: 12px; right: 12px; bottom: calc(var(--sb3-nav-h, 74px) + 70px + env(safe-area-inset-bottom, 0px));
    display: grid; gap: 12px; padding: 14px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-md, 14px);
    background: var(--sb-surface); color: var(--sb-ink-2); box-shadow: var(--sb-shadow-2); font-family: var(--sb-font);
    opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity var(--sb-mid, 200ms) ease, transform var(--sb-mid, 200ms) var(--sb-ease, ease);
}
body.tw-storefront-v3 .sb3-cc[hidden] { display: none; }
body.tw-storefront-v3 .sb3-cc.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
body.tw-storefront-v3.sb3-bar-on .sb3-cc { bottom: calc(var(--sb3-nav-h, 74px) + var(--sb3-bar-h, 64px) + 70px); }
body.tw-storefront-v3:not(.tw-bottom-nav) .sb3-cc { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
body.tw-storefront-v3 .sb3-cc__text { margin: 0; color: var(--sb-ink-2); font-size: 14px; line-height: 1.55; }
body.tw-storefront-v3 .sb3-cc__text a { color: var(--sb-rose-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.tw-storefront-v3 .sb3-cc__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.tw-storefront-v3 .sb3-cc__btn {
    min-height: 44px; padding: 0 10px; border: 1px solid var(--sb-line-strong); border-radius: 12px;
    background: var(--sb-surface); color: var(--sb-ink); font: 600 14.5px/1.2 var(--sb-font); cursor: pointer;
    box-shadow: var(--sb-shadow-btn-quiet); transition: transform 150ms ease;
}
body.tw-storefront-v3 .sb3-cc__btn:active { transform: scale(.97); }
body.tw-storefront-v3 .sb3-cc__btn:focus-visible { outline: 2px solid var(--sb-rose); outline-offset: 2px; }
@media (hover: hover) { body.tw-storefront-v3 .sb3-cc__btn:hover { border-color: var(--sb-ink-3); background: var(--sb-hover); } }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sb3-cc { border-color: var(--sb-line-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
@media (min-width: 992px) {
    body.tw-storefront-v3 .sb3-cc,
    body.tw-storefront-v3.sb3-bar-on .sb3-cc,
    body.tw-storefront-v3:not(.tw-bottom-nav) .sb3-cc { left: var(--sb3-edge-x); right: auto; bottom: 24px; width: 400px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { body.tw-storefront-v3 .sb3-cc { transition-duration: 150ms; transform: translate3d(0, 6px, 0); } }
/* end W3 S6 consent banner */
/* ---------- W3 S4: one press and glass for every button (Saad 2026-10-28) ----------
   The glass sheen moved its band with "left" (layout on every frame); it now moves by transform, from
   the same start. The press (a small scale) and the 1 px lift reach the buttons that lacked them: the
   card and page order buttons, the cart and checkout buttons, the coupon apply, the size chips, the
   pager and the cookie card. Transform and opacity only; reduce motion keeps it (the shorter time set
   above). The last @keyframes of a name wins, so every keyframe sheen (buttons, the search card) takes this one.
   The band is 45% wide and travels from -60% to 120% of the button: 180 / 45 = 400% of itself. */
@keyframes sb3-sheen { 0% { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 1; } 100% { transform: translate3d(400%, 0, 0) skewX(-18deg); opacity: 1; } }
body.tw-storefront-v3 :is(.btn-order, .btn-buy-now, .cart-page-checkout-btn, .ck-place-order, .twmc-checkout, .sb3-cart__all, .cart-page-coupon button, .weight-btn, .twl-page-btn, .sb3-cc__btn, .sb3-order-bar__order, .sb3-order-bar__cart) {
    transition: transform var(--sb3-dur) ease, background-color var(--sb3-dur) ease, color var(--sb3-dur) ease, box-shadow var(--sb3-dur) ease;
}
@media (hover: hover) {
    body.tw-storefront-v3 :is(.btn-order, .btn-buy-now, .cart-page-checkout-btn, .ck-place-order, .twmc-checkout, .sb3-cart__all, .cart-page-coupon button, .weight-btn, .twl-page-btn, .sb3-cc__btn, .sb3-order-bar__order, .sb3-order-bar__cart):hover:not(:disabled) { transform: translateY(calc(var(--sb3-move) * -1)); }
}
body.tw-storefront-v3 :is(.btn-order, .btn-buy-now, .cart-page-checkout-btn, .ck-place-order, .twmc-checkout, .sb3-cart__all, .cart-page-coupon button, .weight-btn, .twl-page-btn, .sb3-cc__btn, .sb3-order-bar__order, .sb3-order-bar__cart):active:not(:disabled) { transform: scale(.96); }
/* review R1: the notification and push buttons' sheen slid by a "left" transition; it moves by
   transform too (unscoped like the rules it replaces, so the customer pages keep it) */
.sb3-pb__on::after, .sb3-pr__on::after { transition: transform .6s ease; }
.sb3-pb__on:hover::after, .sb3-pr__on:hover::after { left: -60%; transform: translate3d(400%, 0, 0) skewX(-18deg); }
/* end W3 S4 */
/* ---------- W3 S7: page layouts (Saad 2026-10-28) ----------
   Policy pages: the page menu floated loose (no box) and, on a computer, sat centred away from the
   heading's left edge. It is now one card on the content edge, and stays in view while the text scrolls.
   List pages on a computer: the filter column scrolled away after one screen and left an empty strip
   beside the products; it now stays in view under the header and scrolls inside itself. */
body.tw-storefront-v3 .static-page-sidebar { padding: 8px; border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); background: var(--sb-surface); }
body.tw-storefront-v3 .static-page-sidebar .sps-head { padding: 8px 14px 6px; }
/* in black the older pages' box rule wiped the open page's rose mark */
html:root[data-sb-theme="dark"] body.tw-storefront-v3 .sps-list li a.active { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
@media (min-width: 992px) {
    body.tw-storefront-v3 .static-page-layout { grid-template-columns: 260px minmax(0, 820px); justify-content: start; align-items: start; }
    /* under the whole header (bottom 163 px) while it shows; under the category bar (38 px) once
       scrolling down tucks the header away (body.hv3-bars-hidden) */
    body.tw-storefront-v3 { --sb3-s7-top: 179px; }
    body.tw-storefront-v3.hv3-bars-hidden { --sb3-s7-top: 54px; }
    body.tw-storefront-v3 .static-page-sidebar { position: sticky; top: var(--sb3-s7-top); }
    /* review R1: the product buy column (U7) takes the same top, so it follows the header too */
    html body.tw-storefront-v3 .product-detail-page .product-detail-info { top: var(--sb3-s7-top); }
    html body.tw-storefront-v3 .twl-layout { align-items: start; }
    html body.tw-storefront-v3 .twl-layout > .twl-filter { position: sticky; top: var(--sb3-s7-top); max-height: calc(100vh - var(--sb3-s7-top) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* end W3 S7 */
/* ---------- M1(a): buy block and order bar (mockups-w3/M1-buy-block, approved 2026-10-28) ----------
   Size chips share the row (three a row, their price under the name); the chosen size is named at the
   right of the heading; the quantity has the stock note beside it instead of a label; "কার্টে যোগ করুন"
   and "অর্ডার করুন" are one size with WhatsApp under them (on a computer: three in one row). The order
   bar gains the photo, and on a computer shows under the header (name, quantity, both buttons) once the
   page's buy buttons have scrolled away. */
html body.tw-storefront-v3 .sb3-pd__label--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html body.tw-storefront-v3 .sb3-pd__picked { color: var(--sb-ink-3); font: 500 13px/1.3 var(--sb-font-num); }
html body.tw-storefront-v3 .product-detail .weight-options.sb3-pd__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body.tw-storefront-v3 .product-detail .weight-btn.sb3-pd__sz { min-width: 0; width: 100%; text-align: center; }
html body.tw-storefront-v3 .product-detail-info .sb3-pd__qty { margin-top: 14px; }
html body.tw-storefront-v3 .sb3-pd__qty .product-option-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html body.tw-storefront-v3 .sb3-pd__stock { display: inline-flex; align-items: center; gap: 6px; color: var(--sb-ok, #12805C); font: 600 14px/1.3 var(--sb-font); }
html body.tw-storefront-v3 .sb3-pd__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html body.tw-storefront-v3 .product-detail-actions.sb3-pd__cta > .sb3-pd__wa { grid-column: 1 / -1; margin-top: 0; }
html body.tw-storefront-v3 .sb3-order-bar__img { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--sb-mist); object-fit: contain; }
html body.tw-storefront-v3 .sb3-order-bar__name { display: none; }
html body.tw-storefront-v3 .sb3-order-bar__qty { display: none; }
@media (min-width: 992px) {
    html body.tw-storefront-v3 .product-detail-actions.sb3-pd__cta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html body.tw-storefront-v3 .product-detail-actions.sb3-pd__cta > .sb3-pd__wa { grid-column: auto; }
    /* three in a row: one line each (the WhatsApp words wrapped at 17 px) */
    html body.tw-storefront-v3 .product-detail-info .product-detail-actions.sb3-pd__cta > .sb3-btn { gap: 8px; padding: 0 10px; font-size: 15px; white-space: nowrap; }
    html body.tw-storefront-v3 .sb3-order-bar {
        display: flex; position: fixed; left: 0; right: 0; top: calc(var(--sb3-s7-top) - 16px); bottom: auto; z-index: 280;
        padding: 10px max(var(--sb3-edge-x, 44px), calc((100% - 1600px) / 2)); border-top: 0; border-bottom: 1px solid var(--sb-line);
        opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
        transition: opacity var(--sb3-dur) ease, transform var(--sb3-dur) ease, visibility 0s linear var(--sb3-dur);
    }
    html body.tw-storefront-v3 .sb3-order-bar.is-shown { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
    html body.tw-storefront-v3 .sb3-order-bar__price { flex: 1 1 auto; min-width: 0; }
    html body.tw-storefront-v3 .sb3-order-bar__name { display: block; overflow: hidden; color: var(--sb-ink-2); font: 500 13px/1.3 var(--sb-font); white-space: nowrap; text-overflow: ellipsis; }
    html body.tw-storefront-v3 .sb3-order-bar__price small { display: none; }
    html body.tw-storefront-v3 .sb3-order-bar__qty:not([hidden]) { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--sb-line-strong); border-radius: 14px; background: var(--sb-surface); }
    html body.tw-storefront-v3 .sb3-order-bar__qty button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--sb-ink); font: 600 18px/1 var(--sb-font-num); cursor: pointer; }
    html body.tw-storefront-v3 .sb3-order-bar__qty output { min-width: 28px; color: var(--sb-ink); font: 600 15px/1 var(--sb-font-num); text-align: center; }
    html body.tw-storefront-v3 .sb3-order-bar__order { flex: none; min-width: 180px; }
}
/* end M1(a) */
/* ---------- M1(b): checkout coupon and coin boxes, phone total bar (mockups-w3/M1-checkout, approved
   2026-10-28 with the field fix) ----------
   The coupon and the coin box (it reuses the coupon row) are one soft rose box each: a full 48 px field
   that takes the room and a full-size button that keeps its word ("প্রয়োগ", "সর্বোচ্চ"), never a small pill
   inside the field. On the phone the total sits on its own line above one full-width order button. */
:root[data-sb-theme] body.tw-storefront-v3 .ck-coupon-row { display: flex; align-items: center; gap: 8px; height: auto; padding: 8px; border: 1px solid var(--sb-rose-line); border-radius: 16px; background: var(--sb-rose-soft); box-shadow: none; overflow: visible; }
:root[data-sb-theme] body.tw-storefront-v3 .ck-coupon-row .ck-coupon-icon { display: none; }
:root[data-sb-theme] body.tw-storefront-v3 .ck-coupon-row .ck-coupon-input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--sb-line-strong); border-radius: 12px; background: var(--sb-surface); color: var(--sb-ink); font: 400 15px/1 var(--sb-font); }
:root[data-sb-theme] body.tw-storefront-v3 .ck-coupon-row .ck-coupon-input:focus-visible { outline: 2px solid var(--sb-rose); outline-offset: 1px; }
:root[data-sb-theme] body.tw-storefront-v3 .ck-coupon-row .ck-coupon-btn { flex: none; min-width: 112px; height: 48px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; background: var(--sb-rose); color: var(--sb-on-fill); font: 600 16px/1 var(--sb-font); box-shadow: var(--sb-shadow-btn); }
/* the summary's quantity number was dark on black */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .ck-pro-qty-ctrl :is(input, span) { color: var(--sb-ink); }
:root[data-sb-theme] body.tw-storefront-v3 .ck-coins .ck-coupon-row .ck-coupon-btn { border: 1px solid var(--sb-line-strong); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet); }
@media (max-width: 991px) {
    :root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar { flex-wrap: wrap; gap: 8px; padding-top: 8px; }
    :root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar-total { display: flex; flex: 1 1 100%; align-items: baseline; justify-content: space-between; }
    :root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar-total small { font-size: 13px; }
    :root[data-sb-theme] body.tw-storefront-v3 .ck-mobile-bar-btn { flex: 1 1 100%; }
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .ck-page { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}
/* end M1(b) */
/* ---------- R2 item 4 (Saad via PB002 2026-10-29 13:27): on a phone the recent-order card sits on the
   LEFT (16 px from the edge) and the notification card stays centred; computers unchanged. They never
   show together (the recent-order card waits while the notification card shows). ---------- */
@media (max-width: 900px) {
    :root[data-sb-theme] body.tw-storefront-v3 .twpp { left: var(--sb3-edge-x); right: auto; margin-inline: 0; }
}
/* end R2 item 4 */
/* ---------- R2 item 3 (Saad via PB002 2026-10-29 13:27): the phone checkout top. A lighter 52 px glass
   bar (quiet round back button, smaller logo, a small "নিরাপদ" pill) and the three steps on ONE line:
   a numbered dot per step (a tick when done, rose when open, grey ahead) joined by a thin line. Below
   380 px only the open step keeps its words; the others keep their dot (the words stay for readers). ---------- */
@media (max-width: 991px) {
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .ckf-bar {
        grid-template-columns: 36px 1fr auto; height: 52px; margin-bottom: 4px; padding: 0 12px;
        border-bottom: 1px solid var(--sb-line); background-color: var(--sb-glass, rgba(255, 255, 255, .86));
        -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    }
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .ckf-back { width: 36px; height: 36px; border: 0; background: var(--sb-mist); color: var(--sb-ink); font-size: 15px; }
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .ckf-logo img { height: 24px; max-width: 132px; }
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .ckf-safe { gap: 5px; padding: 4px 10px; font-size: 12px; line-height: 1.4; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps { counter-reset: sb3-step; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 0 4px; white-space: nowrap; font-size: 12px; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li { counter-increment: sb3-step; display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; padding: 0; border: 0; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li:not(:last-child) { flex: 1 1 auto; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li::before {
        content: counter(sb3-step); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
        background: var(--sb-mist); color: var(--sb-ink-3); font: 600 12px/1 var(--sb-font-num, var(--sb-font));
    }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li.is-done::before { content: "\2713"; background: var(--sb-rose-soft); color: var(--sb-rose-text, var(--sb-rose)); }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li.is-on::before { background: var(--sb-rose); color: #FFFFFF; box-shadow: 0 0 0 3px var(--sb-rose-soft); }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li:not(:last-child)::after { content: ""; flex: 1 1 12px; min-width: 12px; height: 2px; border-radius: 2px; background: var(--sb-line); }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li.is-done::after { background: var(--sb-rose); }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li:not(.is-on) { color: var(--sb-ink-3); font-weight: 400; }
}
@media (max-width: 379px) {
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li:not(.is-on) { font-size: 0; gap: 0; }
    :root[data-sb-theme] body.tw-storefront-v3 .sb3-steps li:not(.is-on)::after { margin-left: 8px; }
}
/* end R2 item 3 */
/* ---------- R2 item 1 (Saad via PB002 2026-10-29 13:27): ONE button design. Two styles from the tokens,
   one height (48 px), one radius (12 px), one font (600 16 px) and one motion (press .96, lift on hover).
   PRIMARY: rose fill, white words. SECONDARY: surface, 1 px line, ink words. WhatsApp keeps its green
   and nothing else. Widths stay each button's own. Not buttons in this sense (left as they are): the
   product-card order pill, pager numbers, footer toggles, accordions, chips and header icons. The
   html:root prefix outranks the older one-off rules without !important. ---------- */
:root { --sb3-btn-h: 48px; --sb3-btn-r: 12px; }
html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-buy-now, .btn-add-cart, .sb3-order-bar__order, .ck-place-order, .ck-mobile-bar-btn, .twmc-checkout, .cart-page-checkout-btn, .cart-page-coupon-btn, .ck-coupon-btn, .sb3-btn--primary, .sb3-btn--light, .sb3-btn--wa, .cf-submit-btn, .spw-btn, .spw-later, .twl-btn, .twl-btn-ghost, .r7-more, .sb3-cc__btn, .newsletter-form button) {
    height: var(--sb3-btn-h); min-height: var(--sb3-btn-h); border-radius: var(--sb3-btn-r);
    font-family: var(--sb-font); font-size: 16px; font-weight: 600; line-height: 1;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-buy-now, .sb3-order-bar__order, .ck-place-order, .ck-mobile-bar-btn, .twmc-checkout, .cart-page-checkout-btn, .cart-page-coupon-btn, .ck-coupon-btn, .sb3-btn--primary, .cf-submit-btn, .spw-btn, .twl-btn, .newsletter-form button) {
    border: 0; background: var(--sb-rose); background-image: none; color: var(--sb-on-fill, #FFFFFF);
    box-shadow: var(--sb3-btn-shadow, var(--sb-shadow-1));
}
html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-add-cart, .sb3-btn--light, .spw-later, .twl-btn-ghost, .r7-more, .sb3-cc__btn) {
    border: 1px solid var(--sb-line-strong); background: var(--sb-surface); background-image: none; color: var(--sb-ink);
    box-shadow: var(--sb-shadow-btn-quiet, none);
}
html:root[data-sb-theme] body.tw-storefront-v3 .sb3-btn--wa { border: 0; background: #25D366; color: #FFFFFF; }
html:root[data-sb-theme] body.tw-storefront-v3 .ck-coins .ck-coupon-row .ck-coupon-btn { border: 1px solid var(--sb-line-strong); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet, none); }
html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-buy-now, .btn-add-cart, .sb3-order-bar__order, .ck-place-order, .ck-mobile-bar-btn, .twmc-checkout, .cart-page-checkout-btn, .cart-page-coupon-btn, .ck-coupon-btn, .sb3-btn--primary, .sb3-btn--light, .sb3-btn--wa, .cf-submit-btn, .spw-btn, .spw-later, .twl-btn, .twl-btn-ghost, .r7-more, .sb3-cc__btn, .newsletter-form button):active { transform: scale(.96); }
@media (hover: hover) {
    html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-buy-now, .sb3-order-bar__order, .ck-place-order, .ck-mobile-bar-btn, .twmc-checkout, .cart-page-checkout-btn, .cart-page-coupon-btn, .ck-coupon-btn, .sb3-btn--primary, .cf-submit-btn, .spw-btn, .twl-btn, .newsletter-form button):hover { background: var(--sb-rose-hover, var(--sb-rose)); color: var(--sb-on-fill, #FFFFFF); transform: translateY(-1px); }
    html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-add-cart, .sb3-btn--light, .spw-later, .twl-btn-ghost, .r7-more, .sb3-cc__btn):hover { background: var(--sb-mist); color: var(--sb-ink); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
    html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-buy-now, .btn-add-cart, .sb3-order-bar__order, .ck-place-order, .ck-mobile-bar-btn, .twmc-checkout, .cart-page-checkout-btn, .cart-page-coupon-btn, .ck-coupon-btn, .sb3-btn--primary, .sb3-btn--light, .sb3-btn--wa, .cf-submit-btn, .spw-btn, .spw-later, .twl-btn, .twl-btn-ghost, .r7-more, .sb3-cc__btn, .newsletter-form button) { transition-duration: 80ms; }
}
/* the "ঠিক আছে" box (sb-toast's message dialog; the product page's pdAlert hands its warnings to it, so the
   page's own inline-styled box never shows): its two buttons take the two styles. Danger keeps its red. */
html:root[data-sb-theme] body.tw-storefront-v3 .sbd-actions button { min-height: var(--sb3-btn-h); border-radius: var(--sb3-btn-r); font-family: var(--sb-font); font-size: 16px; font-weight: 600; line-height: 1; transition: transform .16s ease, background-color .16s ease; }
html:root[data-sb-theme] body.tw-storefront-v3 .sbd-yes:not(.is-danger) { border: 0; background: var(--sb-rose); color: var(--sb-on-fill, #FFFFFF); box-shadow: var(--sb3-btn-shadow, var(--sb-shadow-1)); }
html:root[data-sb-theme] body.tw-storefront-v3 .sbd-no { border: 1px solid var(--sb-line-strong); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-btn-quiet, none); }
html:root[data-sb-theme] body.tw-storefront-v3 .sbd-actions button:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { html:root[data-sb-theme] body.tw-storefront-v3 .sbd-actions button { transition-duration: 80ms; } }
/* end R2 item 1 */
/* ---------- R2 item 2 sweep: the message box ("ঠিক আছে") in the dark theme was a white card whose
   title the dark heading colour had turned near-white. It takes the dark surface and inks. ---------- */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sbd-box { border: 1px solid var(--sb-line); background: var(--sb-surface); color: var(--sb-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sbd-title { color: var(--sb-ink); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sbd-text { color: var(--sb-ink-2); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .sbd-icon { background: color-mix(in srgb, var(--sbt-accent) 18%, var(--sb-surface)); }
/* checkout on a phone or tablet: the cookie banner sat 30 px over the total + order bar (100 px tall,
   M1(b)); it now sits 12 px above it, so neither covers the other */
@media (max-width: 991px) {
    body.tw-storefront-v3.tw-ck-focus .sb3-cc { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}
/* phone and tablet: a toast ("কার্টে যোগ হয়েছে") and the notification card both sit centred under the
   header and covered each other by 54 px; one card at a time, as with the recent-order card: the
   notification card waits (hidden, not clickable; visibility, because its entry animation holds opacity)
   while a toast shows. Computers keep them apart. */
@media (max-width: 900px) {
    body.tw-storefront-v3:has(.sbt-stack .sbt) .sb3-pb:not([hidden]) { visibility: hidden; pointer-events: none; }
}
/* end R2 item 2 sweep */
/* ---------- R3 fail fixes (PB002 2026-10-30 00:10, from the R2 self-review and the dry-integration
   check; pictures in ACCEPTANCE/W3/R3-fix-mockups and R3-S7-mockup). ---------- */
/* F4: the recent-order and notification cards' close buttons were 40 px and "চালু করুন" 40 px high;
   both reach the 44 px touch size, the button takes the one button height */
html:root[data-sb-theme] body.tw-storefront-v3 :is(.twpp-close, .sb3-pb__x) { width: 44px; min-width: 44px; height: 44px; }
html:root[data-sb-theme] body.tw-storefront-v3 .sb3-pb__on { min-height: var(--sb3-btn-h); }
/* the card's close sits at top 50% with a half-height margin (line 1233 is 40 px / -20 px): -22 px keeps it centred */
html:root[data-sb-theme] body.tw-storefront-v3 .twpp-close { margin-top: -22px; }
/* F3: the phone checkout's back button stays a 36 px circle (R2 item 3) and gets a 44 px tap area */
@media (max-width: 991px) {
    body.tw-storefront-v3.tw-ck-focus .ckf-back { position: relative; }
    body.tw-storefront-v3.tw-ck-focus .ckf-back::after { content: ''; position: absolute; inset: -4px; }
}
/* F1: on a computer the floating cart tab sat on the right end of the product page's WhatsApp order
   button (a click there opened the cart); product pages drop the tab, the header cart keeps the count */
@media (min-width: 992px) {
    html:root[data-sb-theme] body.tw-storefront-v3:has(.sb3-pd__cta) .tw-fcart { display: none; }
}
/* F5: on a phone or tablet the chat bubble sat on the cart page's total ("মোট ৳750"); the cart page drops
   the bubble there, WhatsApp stays in the bottom nav */
@media (max-width: 991px) {
    html:root[data-sb-theme] body.tw-storefront-v3:has(.cart-page) #gcc-toggle { display: none; }
}
/* S7 (1): order-track result on a computer: the order card on the left fills its column; the two
   buttons (48 px, full width) and the help card stand on the right instead of under the card */
@media (min-width: 992px) {
    html:root[data-sb-theme] body.tw-storefront-v3 .service-page-section > .container:has(> .service-card-wide > .track-order-card) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px 24px; align-items: start; }
    html:root[data-sb-theme] body.tw-storefront-v3 .service-page-section > .container > .service-card-wide:has(> .track-order-card) { grid-column: 1; grid-row: 1 / span 3; width: 100%; max-width: none; margin: 0; }
    html:root[data-sb-theme] body.tw-storefront-v3 .service-page-section > .container:has(> .service-card-wide > .track-order-card) > .track-actions { grid-column: 2; grid-row: 1; flex-direction: column; gap: 12px; max-width: none; margin: 0; }
    html:root[data-sb-theme] body.tw-storefront-v3 .service-page-section > .container:has(> .service-card-wide > .track-order-card) > .track-actions > a { width: 100%; min-height: var(--sb3-btn-h); justify-content: center; }
    html:root[data-sb-theme] body.tw-storefront-v3 .service-page-section > .container:has(> .service-card-wide > .track-order-card) > .tw-order-help { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
}
/* S7 (2): account home on a wide computer: the coin block takes two halves, the card on the left and the
   totals + coin rules on the right, so both page columns end level. From 1280 px only: at 1024 px the half
   is 205 px and the card's name and balance collide. The coins page keeps its card on its own. */
@media (min-width: 1280px) {
    body.pv.pv-v3 .pv-grid > .pv-col > .pv-coin-wrap { max-width: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
    body.pv.pv-v3 .pv-grid > .pv-col > .pv-coin-wrap > .pv-card3d { grid-column: 1; max-width: none; }
    body.pv.pv-v3 .pv-grid > .pv-col > .pv-coin-wrap > :not(.pv-card3d, .pv-sr) { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}
/* end R3 fail fixes */
/* ---------- R3 U-2 scan (PB002 2026-10-30 00:05): touch sizes under 44 px and text under 4.5:1 found by
   the site-wide scan (7 pages x 390/1366 x light/dark); pictures in ACCEPTANCE/W3/R3-U2-mockup. Their
   parents clip (overflow: hidden), so the controls grow instead of taking an invisible ring. ---------- */
/* touch, phone and tablet: cart and checkout amount buttons, the remove buttons (same icon spot, the
   negative margin keeps it), "সব দেখুন" and the shop's filter/sort sheet close */
@media (max-width: 991px) {
    html:root[data-sb-theme] body.tw-storefront-v3 .cart-page-qty :is(.cart_decrement, .cart_increment) { width: 44px; height: 44px; }
    html:root[data-sb-theme] body.tw-storefront-v3 .ck-pro-qty-ctrl .ck-qty-btn { width: 44px; height: 44px; }
    html:root[data-sb-theme] body.tw-storefront-v3 .cart-page-remove { display: grid; place-items: center; width: 44px; height: 44px; }
    html:root[data-sb-theme] body.tw-storefront-v3 .ck-pro-remove { width: 44px; height: 44px; margin: -6px -6px 0 0; }
    html:root[data-sb-theme] body.tw-storefront-v3 :is(.btn-view-all, .top-categories-viewall) { display: inline-flex; align-items: center; min-height: 44px; }
    html:root[data-sb-theme] body.tw-storefront-v3 .twl-sheet-close { min-width: 44px; min-height: 44px; }
}
/* the cart's remove button is absolute (top right of the row) only up to 600 px (cart.blade.php); there the
   negative margin keeps the icon's spot. From 601 px it is a flex item and keeps its place without it. */
@media (max-width: 600px) {
    html:root[data-sb-theme] body.tw-storefront-v3 .cart-page-remove { margin: -13px -13px 0 0; }
}
/* contrast: light cart greys #888 on white (3.54:1) and the "1 টি পণ্য" badge (4.43:1), the light blog
   excerpt #777 (4.48:1), and the dark checkout's #6A7282 hints on black (3.99:1; "(ঐচ্ছিক)" carries an
   inline colour and an older !important, so its fix needs one too) */
:root[data-sb-theme]:not([data-sb-theme="dark"]) body.tw-storefront-v3 :is(.cart-page-unit-price, .cart-page-view-shop, .blog-card-excerpt) { color: var(--sb-ink-2); }
:root[data-sb-theme]:not([data-sb-theme="dark"]) body.tw-storefront-v3 .cart-page-badge { color: #C2003A; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .ck-pay-body small { color: var(--sb-ink-3); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .ck-label span[style*="#aaa"] { color: var(--sb-ink-3) !important; }
/* end R3 U-2 scan */
/* ---------- R3 U-3 checkout polish (PB002 2026-10-30 00:05; picture ACCEPTANCE/W3/R3-U3-pictures): the
   order summary's title strip is square and filled, so on a computer it cut the card's 20 px top corners
   (a flat white band under the rounded border). It takes the card's inner corner. ---------- */
html:root[data-sb-theme] body.tw-storefront-v3 #ckSummary .ck-card > .ck-summary-title { border-radius: 19px 19px 0 0; }
/* end R3 U-3 checkout polish */
/* ---------- R3 U-5 notifications page (M1c) polish (PB002 2026-10-30 00:05; pictures ACCEPTANCE/W3/
   R3-U5-before and R3-U5-mockup): a long word or link in a notification (a coupon code, a URL) widened the
   phone page to 504 px; "চালু করুন" broke over two lines; the three tabs and "সব পড়া হয়েছে" were 40 px
   high. Empty state, the turned-off line and dark mode were checked and needed nothing. ---------- */
body.pv.pv-v3 .pv-msg-text { min-width: 0; overflow-wrap: anywhere; }
body.pv.pv-v3 .pv-notes-yes { white-space: nowrap; }
body.pv.pv-v3 :is(.pv-notes-tabs button, .pv-notes-read) { min-height: 44px; }
/* end R3 U-5 notifications */
/* ---------- R3 WhatsApp contrast (Saad said yes 2026-10-30 13:56 to ACCEPTANCE/W3/R3-WA-contrast-mockup): the
   real WhatsApp green stays; white on #25D366 read at 1.98:1, the dark green #0B2E19 reads at 7.46:1. Both
   themes: the button is the same green in light and dark. ---------- */
html:root[data-sb-theme] body.tw-storefront-v3 .sb3-btn--wa { color: #0B2E19; }
html:root[data-sb-theme] body.tw-storefront-v3 .sb3-nav__wa .sb3-nav__icon { color: #0B2E19; }
html:root[data-sb-theme] body.tw-storefront-v3 .tw-dm-link.is-wa .tw-dm-ico { color: #0B2E19; }
/* end R3 WhatsApp contrast */
/* ---------- R3 U-7 (1) dark lines (Saad's production screenshots 2026-10-30 15:36, PB002 16:10): the checkout's
   own tokens (tw-r6-checkout.css) kept their light values in the dark theme, so the summary card drew
   #E8EAEE lines under its head, above the coupon and above the totals, and pink-50 plates. The search
   header line is the same bug (--rc-line). Dark only; light is unchanged. ---------- */
:root[data-sb-theme="dark"] body.tw-storefront-v3.tw-checkout-look { --ck-line: var(--sb-line); --ck-pink-50: var(--sb-rose-soft); --ck-pink-100: var(--sb-rose-line); --ck-pink-700: var(--sb-rose-text); --ck-field: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc-top { border-bottom-color: var(--sb-line); }
/* end R3 U-7 (1) */
/* ---------- R3 U-7 (2) the chosen payment card in dark: one 2 px pink ring (1 px border + 1 px shadow), no
   white; it was a #FFF0F4 3 px halo around a grey border. ---------- */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .ck-pay-option:has(input:checked) { border-color: var(--sb-rose); box-shadow: 0 0 0 1px var(--sb-rose); }
/* end R3 U-7 (2) */
/* ---------- R3 U-7 (3) no dead space on the phone checkout: the room for the sticky order bar sat under the
   form (136 px of black before the trust strip) while the footer's last row (padded for the 74 px bottom
   nav) ended under the 100 px bar. The room now sits at the very end of the page; both themes. ---------- */
@media (max-width: 991px) {
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .ck-page { padding-bottom: 24px; }
    :root[data-sb-theme] body.tw-storefront-v3.tw-ck-focus .site-footer .footer-bottom { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}
/* end R3 U-7 (3) */
/* ---------- R3 U-7 (4) search AI mode in dark: the .rc tokens and a few hard-coded whites (tw-rc-search.css)
   leaked the light look: a white AI bar, a white question card whose title (light ink) vanished, a
   light-green "সমস্যা" chip. Dark surfaces and light ink from the v3 tokens; light is unchanged. ---------- */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc { --rc-ink: var(--sb-ink); --rc-ink-2: var(--sb-ink-2); --rc-muted: var(--sb-ink-3); --rc-faint: var(--sb-faint); --rc-line: var(--sb-line); --rc-line-2: var(--sb-line-strong); --rc-tile: var(--sb-mist); --rc-pink-soft: var(--sb-rose-soft); --rc-pink-line: var(--sb-rose-line); --rc-pink-text: var(--sb-rose-text); --rc-ai-soft: #1F1530; }
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.rc-q, .rc-skip, .rc-pick, .rc-try, .rc-tip, .rc-ask, .rc-why, .rc-err, .rc-voice-err) { background: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc[data-mode="ai"] .rc-field::after { background: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc-known span { background: rgba(61, 214, 140, .14); color: var(--sb-ok); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .rc-steps i { background: var(--sb-line-strong); }
/* --rc-ink is a background in two places: they keep a dark plate with light words */
:root[data-sb-theme="dark"] body.tw-storefront-v3 :is(.rc-me span, .rc-rank) { background: var(--sb-hover); color: var(--sb-ink); }
/* end R3 U-7 (4) */
/* ---------- R3 U-9 dark leak scan (PB002 2026-10-30 16:10; 12 pages + search at 390 dark, light backgrounds
   with luminance > .8 and light lines >= 90 % wide). Clear leaks fixed here; kept on purpose (listed in
   uiux-handover.md): product photo plates, payment logo plates, the Opal card, hero dots, video play buttons,
   the Omni bot avatar. ---------- */
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-mq-trust > i { background: var(--sb-rose-soft); color: var(--sb-rose-text); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-mq-shot { background: var(--sb-surface); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .tw-mq-shot figcaption { color: var(--sb-ink-2); }
:root[data-sb-theme="dark"] body.tw-storefront-v3 .twl-sheet-close { background: var(--sb-mist); color: var(--sb-ink); }
/* end R3 U-9 */
/* ---------- R3 U-8 order bar (Saad approved 2026-10-30 17:50; PB002 17:55; ACCEPTANCE/W3/R3-U8-animated).
   Phone checkout bar in two rows: "সর্বমোট ৳…" always shows with "বিস্তারিত" (48 px row), which raises the order
   summary out of the bar (sb3-ckbar.js), then one 62 px "অর্ডার করুন" (radius = the inputs). The checkout and
   product bars are see-through: page colour at 90 % + 12 px blur, solid where blur is missing or less
   transparency is asked. The product bar's order button and the cart checkout button are 56 px. Motion stays
   with reduce motion, only shorter and smaller: the bar pops in, a press pops (.97, small overshoot back) with
   the S4 sheen once (sb-v3.js), the total pops when it changes. No coloured halo, no gradient fill, no lock icon. ---------- */
html:root[data-sb-theme] body.tw-storefront-v3 { --sb3-bar-glass: rgba(255, 255, 255, .9); --sb3-u8-over: 1.015; --sb3-u8-from: .96; --sb3-u8-sheet: 280ms; --sb3-u8-scrim: rgba(17, 17, 17, .42); --sb3-u8-lift: 0 -8px 24px -12px rgba(17, 17, 17, .25); }
html:root[data-sb-theme="dark"] body.tw-storefront-v3 { --sb3-bar-glass: rgba(0, 0, 0, .9); --sb3-u8-scrim: rgba(0, 0, 0, .62); --sb3-u8-lift: 0 -8px 24px -12px rgba(0, 0, 0, .9); }
@media (prefers-reduced-motion: reduce) {
    html:root[data-sb-theme] body.tw-storefront-v3 { --sb3-u8-over: 1.008; --sb3-u8-from: .98; --sb3-u8-sheet: 200ms; }
}
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.ck-mobile-bar, .sb3-order-bar) { background: var(--sb3-bar-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--sb-line); box-shadow: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.ck-mobile-bar, .sb3-order-bar) { background: var(--sb-canvas); }
}
@media (prefers-reduced-transparency: reduce) {
    html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.ck-mobile-bar, .sb3-order-bar) { background: var(--sb-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the checkout bar: row 1 total + বিস্তারিত, row 2 the button (typing keeps today's rule) */
@media (max-width: 991px) {
    html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3:not(.ck-typing) .ck-mobile-bar[data-sb3-ckbar] { display: block; padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); transform-origin: 50% 100%; animation: sb3-u8-enter calc(var(--sb3-dur) * .9) cubic-bezier(.2, .9, .3, 1.15) both; }
    html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3.tw-ck-focus .site-footer .footer-bottom { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes sb3-u8-enter { from { transform: scale(var(--sb3-u8-from, .96)); opacity: 0; } to { transform: none; opacity: 1; } }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-ckbar__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .ck-mobile-bar[data-sb3-ckbar] .ck-mobile-bar-total { display: flex; flex: 0 1 auto; align-items: baseline; justify-content: flex-start; gap: 8px; margin: 0; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .ck-mobile-bar[data-sb3-ckbar] .ck-mobile-bar-total small { margin: 0; color: var(--sb-ink-3); font: 500 14px/1 var(--sb-font); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .ck-mobile-bar[data-sb3-ckbar] .ck-mobile-bar-total strong { display: inline-block; color: var(--sb-ink); font: 700 20px/1 Roboto, var(--sb-font-num); font-variant-numeric: tabular-nums; transform-origin: 0 70%; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .ck-mobile-bar-total strong.is-bump { animation: sb3-u8-bump var(--sb3-dur) cubic-bezier(.3, 1.5, .5, 1); }
@keyframes sb3-u8-bump { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-ckbar__more { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; min-width: 48px; margin-right: -8px; padding: 0 8px 0 12px; border: 0; border-radius: 12px; background: none; color: var(--sb-rose-text); font: 600 15px/1 var(--sb-font); cursor: pointer; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-ckbar__more[hidden] { display: none; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-ckbar__more .sb3-i { width: 18px; height: 18px; transition: transform var(--sb3-u8-sheet) cubic-bezier(.22, 1.2, .36, 1); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-ckbar__more[aria-expanded="true"] .sb3-i { transform: rotate(180deg); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.sb3-ckbar__more, .sb3-cksheet__x):focus-visible { outline: 2px solid var(--sb-rose-text); outline-offset: 2px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .ck-mobile-bar .ck-mobile-bar-btn { flex: none; width: 100%; height: 62px; min-height: 62px; border-radius: 14px; font: 600 17px/1 var(--sb-font); }
/* busy: the fill stays solid while the double-tap guard shows "অর্ডার হচ্ছে…" (disabled + aria-busy) */
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .ck-mobile-bar .ck-mobile-bar-btn:is(:disabled, [aria-busy="true"]) { opacity: 1; background: var(--sb-rose); color: var(--sb-on-fill, #FFFFFF); cursor: progress; transform: none; }
/* the product bar and the cart: 56 px */
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-order-bar .sb3-order-bar__order { height: 56px; min-height: 56px; border-radius: 14px; font-size: 17px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-order-bar .sb3-order-bar__cart { width: 56px; height: 56px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .cart-page-checkout-btn { height: 56px; min-height: 56px; }
/* press: pop + the S4 sheen once; the band sits under the label (z-index -1 inside the button's own layer) */
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.ck-mobile-bar-btn, .sb3-order-bar__order, .cart-page-checkout-btn) { position: relative; overflow: hidden; isolation: isolate; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.ck-mobile-bar-btn, .sb3-order-bar__order, .cart-page-checkout-btn)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); opacity: 0; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.ck-mobile-bar-btn, .sb3-order-bar__order, .cart-page-checkout-btn).is-sheen::after { animation: sb3-sheen calc(var(--sb3-dur) * 3) ease-out; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.ck-mobile-bar-btn, .sb3-order-bar__order, .cart-page-checkout-btn).is-pop { animation: sb3-u8-pop calc(var(--sb3-dur) * 1.1) cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sb3-u8-pop { 0% { transform: scale(.97); } 60% { transform: scale(var(--sb3-u8-over, 1.015)); } 100% { transform: scale(1); } }
/* the order summary sheet: rises out of the bar over a dim backdrop; the bar stays on top */
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet-scrim { position: fixed; inset: 0; z-index: 498; background: var(--sb3-u8-scrim); opacity: 0; pointer-events: none; transition: opacity var(--sb3-u8-sheet) ease; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet-scrim.is-on { opacity: 1; pointer-events: auto; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet {
    position: fixed; left: 0; right: 0; bottom: calc(var(--sb3-ckbar-h, 124px) - 24px); z-index: 499;
    display: flex; flex-direction: column; max-height: calc(100dvh - var(--sb3-ckbar-h, 124px) - 48px); padding-bottom: 24px;
    border: 1px solid var(--sb-line); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--sb-surface); box-shadow: var(--sb3-u8-lift);
    transform: translateY(calc(100% + 1px)); visibility: hidden;
    transition: transform var(--sb3-u8-sheet) cubic-bezier(.22, 1.2, .36, 1), visibility 0s linear var(--sb3-u8-sheet);
}
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet.is-open { transform: translateY(0); visibility: visible; transition: transform var(--sb3-u8-sheet) cubic-bezier(.22, 1.2, .36, 1), visibility 0s; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet.is-drag { transition: transform 1ms linear; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.sb3-cksheet, .sb3-cksheet-scrim)[hidden] { display: none; }
@media (min-width: 992px) {
    html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 :is(.sb3-cksheet, .sb3-cksheet-scrim) { display: none; }
}
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__grab { flex: none; padding: 8px 16px 0; touch-action: none; cursor: grab; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__handle { display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--sb-line-strong); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__head h2 { margin: 0; color: var(--sb-ink); font: 600 17px/1.2 var(--sb-font); outline: none; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__x { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -4px; padding: 0; border: 1px solid var(--sb3-ibox-line); border-radius: 12px; background: var(--sb3-ibox-bg); color: var(--sb-ink); cursor: pointer; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__x .sb3-i { width: 20px; height: 20px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sb-line); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__item img { flex: none; width: 48px; height: 48px; border-radius: 10px; background: #FFFFFF; object-fit: contain; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__what { flex: 1; min-width: 0; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__what b { display: block; overflow: hidden; color: var(--sb-ink); font: 500 14px/1.35 var(--sb-font); text-overflow: ellipsis; white-space: nowrap; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__what small { color: var(--sb-ink-3); font: 400 13px/1.3 var(--sb-font); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__num { color: var(--sb-ink); font: 600 15px/1.2 Roboto, var(--sb-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__rows { display: grid; gap: 10px; padding: 14px 0 4px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__rows p { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--sb-ink-2); font: 400 15px/1.4 var(--sb-font); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__rows p.is-off .sb3-cksheet__num { color: var(--sb-ok); }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__rows p.is-sum { padding-top: 12px; border-top: 1px solid var(--sb-line); color: var(--sb-ink); font-weight: 600; font-size: 17px; }
html:root[data-sb-theme] body.tw-storefront-v3.tw-storefront-v3 .sb3-cksheet__rows p.is-sum .sb3-cksheet__num { font-size: 20px; font-weight: 700; }
/* end R3 U-8 */
/* ===== end storefront v3 ===== */