/* =============================================================================
   QuickPick storefront — dark + gold theme, mobile-first.
   Phase 4: homepage, header, footer.
   ========================================================================== */

:root {
    --sf-bg: #0d0d0f;
    --sf-surface: #16161a;
    --sf-surface-2: #1d1d22;
    --sf-border: #2a2a31;
    --sf-text: #f3f3f5;
    --sf-muted: #a1a1aa;
    --sf-gold: #febd04;          /* brand gold — sampled from QuickPick logo */
    --sf-gold-rgb: 254, 189, 4;  /* same gold as channels, for rgba() tints */
    --sf-gold-soft: #ffd34d;     /* lighter tint of brand gold for highlights/hover */
    --sf-danger: #e0533d;
    --sf-radius: 14px;
    --sf-radius-sm: 10px;
    /* Semi-pill button radii — premium rounded rectangles, not full capsules.
       btn: standard CTAs (Order Now, Checkout, Shop Now); btn-sm: compact
       actions (popup CTA, account row buttons). */
    --sf-radius-btn: 14px;
    --sf-radius-btn-sm: 12px;
    /* Shared page gutter — one source of truth for the left/right margin so the
       header, search bar, hero and section content all line up. */
    --sf-gutter: 16px;
    --sf-max: 1360px;
    --sf-font: 'Noto Sans Bengali', 'Anek Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.sf {
    margin: 0;
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-font);
    font-size: 15px;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: 'Anek Bangla', var(--sf-font); }

.sf-container {
    width: 100%;
    max-width: var(--sf-max);
    margin-inline: auto;
    padding-inline: var(--sf-gutter);
}

/* Homepage top sections sat inside the default 1360px width, which left a large
   empty band on wide desktops. On desktop the homepage uses a slightly wider
   premium content width so the header/search/nav, hero, service strip and
   announcement bar (all read --sf-max) fill the screen better while staying
   contained. Scoped to .sf-page-home only, so checkout/cart/PDP and every other
   page keep the shared 1360px width; below 1024px (mobile/tablet) nothing
   changes. Gutter is unchanged, so narrower desktops (≤1360) are unaffected. */
@media (min-width: 1024px) {
    .sf-page-home { --sf-max: 1600px; }
}

.sf-main { min-height: 50vh; }
/* Empty cart is short: drop the tall min-height floor so the footer sits close
   below the empty-state card instead of after a giant blank band. Breathing room
   still comes from the card + .sf-cart padding; the mobile nav clearance padding
   is untouched, so the footer never rides under the bottom nav. */
.sf-main:has(.sf-cart__empty) { min-height: auto; }
/* Short content pages (customer auth, account/tracking, static docs, and any
   empty/"no results" state) rarely reach the 50vh floor, so that floor stretched
   the light .sf-main into a large blank band above the dark footer — worst on
   mobile. Drop the floor for these so the footer follows the content at a normal
   gap; the area below the footer is the same dark as the footer, so the page
   still ends cleanly. Content-rich pages (home, PDP, populated listings, cart and
   checkout) keep the floor. Same :has() opt-out pattern as the empty cart above. */
.sf-main:has(.sf-auth),
.sf-main:has(.sf-account),
.sf-main:has(.sf-doc),
.sf-main:has(.sf-empty) { min-height: auto; }

/* ---- Buttons -------------------------------------------------------------- */
.sf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--sf-radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sf-btn--gold {
    background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-soft));
    color: #1a1408;
    box-shadow: 0 6px 18px rgba(var(--sf-gold-rgb), .25);
}
.sf-btn--gold:hover { transform: translateY(-1px); }
.sf-btn--ghost {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
.sf-btn--ghost:hover { border-color: var(--sf-text); }

/* ---- Header -------------------------------------------------------------- */
.sf-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(13, 13, 15, .92);
    backdrop-filter: blur(10px);
}
.sf-header__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
}
.sf-header__menu {
    display: inline-flex;
    background: none;
    border: 0;
    color: var(--sf-text);
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
}
.sf-header__logo img { height: 34px; width: auto; }
.sf-header__logo { flex-shrink: 0; }

.sf-header__primary {
    display: none;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.sf-header__primary a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: var(--sf-radius-sm);
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
    font-weight: 650;
}
.sf-header__primary a:hover,
.sf-header__primary a:focus-visible {
    background: rgba(255, 255, 255, .07);
    color: var(--sf-gold);
}

/* Premium search field on the white .sf-subhead body: ~44px tall, softly rounded
   (13px), a subtle light border, and a gentle gold focus ring — no
   heavy outline, no resting shadow/divider. The icon sits at the right with
   comfortable padding so text never overlaps it. Full width of its row; the
   desktop block caps it. */
.sf-search {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    box-shadow: none;
    overflow: hidden;
    min-width: 0;
    min-height: 42px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-search:focus-within {
    border-color: #d4d8de;
    box-shadow: 0 0 0 3px rgba(var(--sf-gold-rgb), .12);
}
.sf-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--sf-text);
    padding: 10px 8px 10px 16px;
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    outline: none;
}
.sf-search input::placeholder { color: var(--sf-muted); font-size: 14px; }
.sf-search button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--sf-gold);
    padding: 0 16px 0 8px;
    font-size: 15px;
    cursor: pointer;
}
.sf-header__search { display: none; }

/* Icons sit at the far right of the black bar (search no longer fills the row). */
.sf-header__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.sf-header__action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: var(--sf-radius-sm);
    color: var(--sf-text);
    font-size: 11px;
    position: relative;
}
.sf-header__action i { font-size: 17px; color: var(--sf-gold); }
.sf-header__action:hover { background: var(--sf-surface); }
.sf-header__cart { position: relative; }
.sf-header__cart i { color: var(--sf-gold); font-size: 19px; }
.sf-header__wish { position: relative; }
.sf-header__wish i { color: var(--sf-gold); font-size: 19px; }
.sf-cart-icon { display: block; width: 23px; height: 23px; color: var(--sf-gold); }
.sf-header__cart-count,
.sf-header__wish-count {
    position: absolute;
    top: 0;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sf-bg);
    box-sizing: border-box;
    pointer-events: none;
}

/* White sub-header strip: holds the search bar and (on non-home pages) the
   category nav. The strip is the start of the clean white body — no bottom
   divider and no hard separators, so the flow into the page content stays smooth
   and app-like. The black top bar above is the only dark row. */
.sf-subhead {
    background: #fff;
}
.sf-subhead__inner { padding-block: 8px 6px; }

/* Category nav: white, no top divider. On mobile it is the collapsed menu opened
   by the hamburger (see the ≤640 block); on desktop it is a clean links row. */
.sf-nav { background: #fff; }
.sf-nav__inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sf-nav__inner::-webkit-scrollbar { display: none; }
.sf-nav__link {
    white-space: nowrap;
    padding: 11px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sf-muted);
    border-bottom: 2px solid transparent;
}
.sf-nav__link:hover { color: var(--sf-gold-ink, var(--sf-gold)); }

.sf-page-home .sf-nav--home-main { display: none; }

@media (min-width: 1024px) {
    /* Pure solid black topbar on desktop — the base header is a translucent
       rgba(13,13,15,.92) with a backdrop blur, so page content bled through and
       it read as grey/gradient. Solid #000, no blur. The search bar keeps its own
       white background and the nav text/gold icons stay readable. */
    .sf-header {
        background: #000;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sf-header__bar {
        gap: 14px;
    }
    .sf-header__primary {
        display: inline-flex;
    }
    .sf-header__search {
        display: flex;
        flex: 1 1 auto;
        max-width: none;
        min-width: 220px;
        min-height: 40px;
        margin-left: 6px;
    }
    .sf-header__search input {
        padding-block: 9px;
    }
    .sf-header__actions {
        margin-left: 0;
    }
    .sf-subhead__inner {
        display: none;
    }
}

/* ---- Hero ---------------------------------------------------------------- */
/* Carousel viewport: same-placement banners are slides laid out in a horizontal
   row and slid left/right by translating the track — a standard e-commerce
   carousel. The first slide sits at the start, so it stays visible even if JS
   never runs (track transform defaults to 0). */
/* Contained hero: constrained to the storefront width and centred (like the
   sections and the placement banners) so it reads as a premium contained card,
   not a full-bleed edge-to-edge wallpaper. A clean small gap under the sticky
   header/nav uses padding (not margin) so it never collapses through .sf-main
   and always shows as a light gap. Side gutter lines the banner up with the
   page content; mobile overrides the gap/gutter in the responsive block. */
.sf-hero {
    position: relative;
    max-width: var(--sf-max);
    margin-inline: auto;
    padding: 8px var(--sf-gutter) 0;
}
/* The clip viewport is a STATIC (non-transformed) box the exact width of the
   hero content area (the gutter is padding on .sf-hero, outside this box). It
   owns overflow:hidden and the rounded corners, so the sliding track is clipped
   precisely at the slide edges — adjacent slides can never bleed into the side
   gutters, and there is a single clean rounded frame (not one radius per slide).
   Clipping must NOT live on the track itself: the track is translated, so its
   overflow would move with it and never mask the neighbours. */
.sf-hero__viewport {
    overflow: hidden;
    /* Desktop hero edges are straight (no rounding). The mobile block re-adds
       rounded corners on the slide. overflow:hidden stays so the viewport still
       clips the sliding track exactly at the slide edges (no side slivers). */
    border-radius: 0;
}
.sf-hero__track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
/* Premium hero framed at the intended 16:6 ratio (matches the recommended
   upload size, so a correctly prepared banner is shown without aggressive
   top/bottom cropping). Cap desktop height so it never dominates the first
   screen. Slight rounded corners for a contained card look; image uses
   object-fit: cover (no stretch/distortion). */
.sf-hero__slide {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    display: block;
    aspect-ratio: 16 / 6;
    max-height: 600px;
    overflow: hidden;
}
.sf-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sf-hero__slide--text { background: #14141a; }
.sf-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.sf-hero__title {
    font-size: clamp(22px, 5vw, 44px);
    color: #fff;
    max-width: 16ch;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.sf-hero__subtitle {
    font-size: clamp(13px, 2.5vw, 18px);
    color: #e7e7ea;
    max-width: 32ch;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* ---- Banner carousel dots (shared: hero + placement slots) --------------- */
.sf-bnr-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}
.sf-bnr-dot {
    pointer-events: auto;
    width: 6px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .52);
    box-shadow: none;
    cursor: pointer;
    opacity: .78;
    transition: width .22s ease, background .22s ease, opacity .22s ease;
}
.sf-bnr-dot.is-active {
    width: 20px;
    background: var(--sf-gold);
    opacity: 1;
}

/* ---- Placement banner carousel (homepage middle/bottom, etc.) ------------ */
.banner-slot {
    position: relative;
    overflow: hidden;
    max-width: var(--sf-max);
    margin: 36px auto 0;
    border-radius: var(--sf-radius);
}
.banner-slot__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.banner-slot__item {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
}
.banner-slot__item picture,
.banner-slot__item img { display: block; width: 100%; }
/* Contained, undistorted image — keeps the uploaded aspect ratio, no crop. */
.banner-slot__item img { height: auto; object-fit: contain; }
.banner-slot__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
/* Text-only banners (no image) get a readable padded surface. */
.banner-slot__item:not(:has(img)) .banner-slot__content {
    padding: 22px 18px;
    background: var(--sf-surface-2);
}
.banner-slot__content:empty { display: none; }
/* When an image is present, overlay the text at the bottom over a soft scrim. */
.banner-slot__item:has(img) .banner-slot__content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 18px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
.banner-slot__content h2 { font-size: clamp(16px, 3vw, 26px); }
.banner-slot__content h2:empty { display: none; }
.banner-slot__content a {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: var(--sf-radius-btn);
    background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-soft));
    color: #1a1408;
    font-weight: 700;
    font-size: 13.5px;
}

/* ---- Trust badges -------------------------------------------------------- */
.sf-trustbar { margin-top: 14px; }
.sf-trustbar--footer {
    padding-bottom: 0;
}
.sf-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.sf-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sf-surface);
    border: 1px solid #e7e9ed;
    border-radius: var(--sf-radius-sm);
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(17, 24, 39, .04);
}
.sf-trust li i { color: var(--sf-gold); font-size: 18px; }
.sf-trustbar--footer .sf-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.sf-trustbar--footer .sf-trust li {
    min-height: 50px;
    padding: 8px 10px;
    border-color: #e5e7eb;
    border-radius: 13px;
    background: #fff;
    color: #111114;
    line-height: 1.2;
    box-shadow: none;
    transition: border-color .16s ease;
}
.sf-trustbar--footer .sf-trust li:hover { border-color: #d5d9df; }
.sf-trustbar--footer .sf-trust li i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(var(--sf-gold-rgb), .14);
    color: #111114;
    font-size: 11px;
    box-shadow: none;
}
.sf-trustbar--footer .sf-trust li span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}
.sf-trustbar--footer .sf-trust li strong {
    color: #111114;
    font-size: 11.8px;
    font-weight: 800;
    line-height: 1.15;
}
.sf-trust--compact { background: none; }
.sf-trust--compact li { background: none; border: 0; padding: 4px 0; font-size: 13px; }
.sf-trust--compact li i { font-size: 15px; }

/* ---- Sections ------------------------------------------------------------ */
.sf-section { margin-top: 36px; }
.sf-page-home .sf-section { margin-top: 26px; }
.sf-page-home .sf-section:has(> .sf-product-grid) + .sf-section:has(> .sf-product-grid) { margin-top: 8px; }
.sf-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 16px;
}
/* When a section carries an announcement ticker, tighten the spacing so title,
   ticker and product grid feel connected (a small comfortable gap, not cramped). */
.sf-section__head:has(.sf-section__ticker) {
    row-gap: 5px;
    margin-bottom: 10px;
}
.sf-section__title {
    font-size: 20px;
    font-weight: 700;
    position: relative;
    padding-left: 14px;
}
.sf-section__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(var(--sf-gold), var(--sf-gold-soft));
}
/* Title + optional subtitle stack as one heading block in the section head row,
   so the gold bar, title and subtitle stay aligned beside View More / ticker. */
.sf-section__heading { display: flex; flex-direction: column; gap: 2px; }
.sf-section__subtitle {
    margin: 0;
    padding-left: 14px;
    color: var(--sf-muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}
.sf-section__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
    white-space: nowrap;
    text-decoration: none;
    transition: gap .15s ease, color .15s ease;
}
.sf-section__more:hover {
    gap: 9px;
    color: var(--sf-gold-ink, var(--sf-gold));
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sf-section__more i { font-size: 11px; }
.sf-section__footer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
}
.sf-page-home .sf-section__footer,
.sf-page-home .sf-flash__footer {
    margin-top: 10px;
    margin-bottom: 0;
}

/* ---- Flash Sale (timer-based homepage section) --------------------------- */
/* Clean WHITE countdown bar sitting above the flash product grid — same premium
   light card on desktop, tablet and mobile (the phone block below only restacks
   it). Server-rendered numbers keep it correct before flash-sale.js takes over. */
/* One centered column card on every screen: title (with thin divider lines on
   each side) over a centered row of 4 equal countdown boxes. This is the same
   visual structure as the phone block below — desktop no longer uses a wide
   horizontal / right-aligned timer layout. */
.sf-flash__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: var(--sf-radius);
    background: #fff;
    color: var(--sf-text);
    border: 1px solid var(--sf-border, #e6e8eb);
    box-shadow: 0 10px 24px rgba(17, 17, 20, .06);
}
.sf-page-home .sf-flash__bar { margin-bottom: 12px; }
.sf-flash__headline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    text-align: center;
}
/* Thin hairlines flanking the centered title. */
.sf-flash__headline::before,
.sf-flash__headline::after {
    content: '';
    flex: 1 1 0;
    height: 1px;
    max-width: 120px;
    background: rgba(17, 17, 20, .12);
}
.sf-flash__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(16px, 2.4vw, 20px);
    font-weight: 700;
    color: var(--sf-text);
    white-space: nowrap;
}
.sf-flash__title i { color: var(--sf-gold); }
/* Subtitle is redundant with the centered title + dividers (matches mobile). */
.sf-flash__note { display: none; }
.sf-flash__timer {
    display: grid;
    grid-template-columns: repeat(4, 60px);
    justify-content: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.sf-flash__unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 8px 5px 7px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(17, 17, 20, .08);
    box-shadow: 0 8px 18px rgba(17, 17, 20, .06);
    line-height: 1;
}
.sf-flash__unit b { font-size: 17px; font-weight: 700; color: var(--sf-text); }
.sf-flash__unit small {
    margin-top: 3px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--sf-muted);
}
/* No colon separators — the boxes read as a clean 4-up row (matches mobile). */
.sf-flash__sep { display: none; }
.sf-flash__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    /* Deep gold reads as a premium accent on white (bright gold is illegible). */
    color: var(--sf-gold-ink, #8a6a00);
    white-space: nowrap;
    text-decoration: none;
    transition: gap .15s ease;
}
.sf-flash__more:hover { gap: 9px; text-decoration: underline; text-underline-offset: 3px; }
.sf-flash__more i { font-size: 11px; }
.sf-flash__footer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
}
/* Mobile footer "View more" (flash + product sections): a bare gold/dark text
   link floats weakly on the light background below the grid, so the footer
   variant reads as a compact black pill — brand black with gold text, same as
   the header/ticker palette. Footers only render on phones (base display:none,
   flipped in the max-width blocks), so desktop is untouched. */
.sf-section__more--footer,
.sf-flash__more--footer {
    gap: 7px;
    margin-left: 0;
    padding: 7px 13px;
    background: #fff;
    border: 1px solid #d9dde3;
    border-radius: 12px;
    color: #111114;
    font-size: 12.5px;
    line-height: 1.2;
    transition: gap .15s ease, background-color .15s ease, border-color .15s ease;
}
.sf-section__more--footer:hover,
.sf-section__more--footer:focus-visible,
.sf-flash__more--footer:hover,
.sf-flash__more--footer:focus-visible {
    gap: 10px;
    background: #f8f9fa;
    border-color: #c7ccd3;
    color: #111114;
    text-decoration: none;
}
/* Tablet/desktop: keep the centered column card compact (like the phone card)
   instead of stretching the header full-width — the product grid below still
   spans the section width. Constrained + centered so there is no empty space
   inside the header. Mobile (≤640) keeps its own full-width phone styling. */
@media (min-width: 641px) {
    .sf-flash__bar {
        max-width: 480px;
        margin-inline: auto;
    }
}
/* Flash announcements render as a block sibling between the bar and the grid
   (unlike product sections, where the ticker lives inside the flex head), so
   give it the same 16px breathing room the bar has — no grid butting. */
.sf-flash > .sf-section__ticker { margin-bottom: 16px; }
.sf-page-home .sf-flash > .sf-section__ticker { margin-bottom: 12px; }
/* Desktop/tablet: the category ticker sits right above Flash Sale, so trim the
   default 36px section gap to a clean ~20px (the phone block sets 16px). */
.sf-page-home .sf-cat-section + .sf-flash { margin-top: 20px; }
@media (max-width: 640px) {
    .sf-flash__bar {
        flex-direction: column;
        align-items: center;
        gap: 11px;
        margin-bottom: 18px;
        padding: 14px 12px;
        border: 1px solid rgba(17, 17, 20, .08);
        border-radius: var(--sf-radius);
        background: #fff;
        color: var(--sf-text);
        box-shadow: 0 10px 24px rgba(17, 17, 20, .07);
    }
    .sf-flash__headline {
        align-items: center;
        justify-content: center;
        order: 1;
        width: 100%;
        text-align: center;
    }
    .sf-flash__headline::before,
    .sf-flash__headline::after {
        content: '';
        flex: 1 1 0;
        height: 1px;
        max-width: 82px;
        background: rgba(17, 17, 20, .12);
    }
    .sf-flash__title {
        justify-content: center;
        color: var(--sf-text);
        font-size: 18px;
    }
    .sf-flash__timer {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        order: 2;
        width: 100%;
        margin-left: 0;
    }
    .sf-flash__sep { display: none; }
    .sf-flash__unit {
        justify-content: center;
        min-width: 0;
        min-height: 46px;
        padding: 8px 5px 7px;
        border: 1px solid rgba(17, 17, 20, .08);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(17, 17, 20, .06);
    }
    .sf-flash__unit b {
        color: var(--sf-text);
        font-size: 16px;
    }
    .sf-flash__unit small {
        color: var(--sf-muted);
        font-size: 9px;
    }
}

/* Inline section announcement ticker — a slim black/gold pill beside the title.
   On mobile it wraps onto its own line under the title + View more. */
.sf-section__ticker {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: #111114;
    border: 1px solid rgba(var(--sf-gold-rgb), .26);
    /* Lightly rounded premium rectangle, not a full capsule/pill. */
    border-radius: 7px;
    color: #f4f4f6;
}
.sf-section__ticker::before,
.sf-section__ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    z-index: 2;
    pointer-events: none;
}
.sf-section__ticker::before { left: 0; background: linear-gradient(90deg, #111114, transparent); }
.sf-section__ticker::after { right: 0; background: linear-gradient(270deg, #111114, transparent); }
.sf-section__ticker-track {
    display: flex;
    width: max-content;
    animation: sf-ticker-scroll 22s linear infinite;
    will-change: transform;
}
.sf-section__ticker:hover .sf-section__ticker-track { animation-play-state: paused; }
.sf-section__ticker-group { flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap; }
.sf-section__ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 6px;
    font-size: 12.5px;
    color: #f4f4f6;
    white-space: nowrap;
}
.sf-section__ticker-item::after { content: '•'; margin: 0 14px; color: rgba(255, 255, 255, .35); font-size: 9px; }
.sf-section__ticker-item strong { color: var(--sf-gold-soft); font-weight: 700; }
.sf-section__ticker-item a {
    color: var(--sf-gold);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (min-width: 641px) {
    /* Desktop: title left, ticker fills the remaining row space. */
    .sf-section__ticker { order: 0; flex: 1 1 auto; }
}

/* ---- Category ticker row ------------------------------------------------- */
/* Slim premium nav ticker: a yellow accent marker + horizontally auto-scrolling
   plain-text category links. Image-independent, admin-driven, same on all sizes.
   No title, no chips, no dots, no subcategory row. category-ticker.js adds the
   gentle drift; with JS off it stays a native swipeable, clickable scroll row. */
.sf-cat-section { margin-top: 20px; }
.sf-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
/* Yellow vertical accent marker — same gold bar language as section titles. */
.sf-cat__marker {
    flex: none;
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(var(--sf-gold), var(--sf-gold-soft));
}
.sf-cat-ticker {
    /* Fill the row beside the marker so a realistic list overflows and the
       gentle auto-scroll has room to move. */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    overflow-x: auto;
    /* No scroll-behavior:smooth here — the JS writes scrollLeft every frame, and
       smooth scrolling would fight those tiny per-frame updates. */
    -webkit-overflow-scrolling: touch;
    padding: 8px 2px;
    scrollbar-width: none; /* Firefox */
    /* Desktop drag affordance; category-ticker.js adds .is-dragging while a mouse
       drag is in progress. Touch keeps native momentum scroll. */
    cursor: grab;
}
.sf-cat-ticker::-webkit-scrollbar { display: none; } /* WebKit */
.sf-cat-ticker.is-dragging { cursor: grabbing; user-select: none; }

/* Plain text item (link or parent button): black text, no chip background, no
   dot, no filled/gold highlight. Long names ellipsis on one line; a tiny chevron
   follows each name. The button is reset so it reads exactly like the links. */
.sf-cat-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 240px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: #1b1b18;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
/* Hover/focus/open stay dark — only a subtle underline, never a gold/brown tint. */
.sf-cat-item:hover .sf-cat-item__name,
.sf-cat-item:focus-visible .sf-cat-item__name,
.sf-cat-item[aria-expanded="true"] .sf-cat-item__name {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.sf-cat-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-cat-item__chev {
    flex: none;
    font-size: 11px;
    color: var(--sf-muted, #66707c);
    transition: transform .15s ease;
}
.sf-cat-item[aria-expanded="true"] .sf-cat-item__chev { transform: rotate(180deg); }

/* Compact subcategory dropdown: a clean white block in normal flow directly
   under the row, so an open panel pushes Flash Sale down cleanly rather than
   floating over it. Subcategories stack VERTICALLY — one block link per line,
   never side-by-side. Black text, no dot, no gold. Scrolls if the list is long.
   NOTE: this class sets `display: flex`, which as an author rule would otherwise
   override the UA `[hidden] { display: none }` and leave every panel visible at
   once (the original root-cause bug). The `[hidden]` guard below restores it. */
.sf-cat-drop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 190px;
    max-width: min(320px, 100%);
    max-height: 44vh;
    margin-top: 8px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sf-border, #e6e8eb);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .10);
}
.sf-cat-drop[hidden] { display: none; }
.sf-cat-drop__link {
    display: block;
    color: #1b1b18;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    /* Long names wrap cleanly onto the next line instead of breaking layout. */
    white-space: normal;
    padding: 8px 10px;
    border-radius: 8px;
}
.sf-cat-drop__link:hover,
.sf-cat-drop__link:focus-visible { background: var(--sf-surface-2, #f1f3f5); }
.sf-cat-drop__link--all { font-weight: 700; }

/* Homepage category quick access: a slim white strip of text-only category
   chips that slide horizontally. No icons, no thumbnails, no icon boxes — just
   the category name (plus a tiny chevron on parents that open a dropdown). The
   chips are compact, softly rounded (not full pills) and thin. A little top
   breathing room plus a hairline divider keep the strip visually separate from
   the dark header/search bar above and the hero below. Long names stay on one
   line with an ellipsis and a capped width so no chip grows excessively long.
   Kept as overrides so the dropdown behavior above remains unchanged. */
.sf-page-home .sf-cat-section {
    margin-top: 0;
    padding-top: 6px;
    padding-bottom: 10px;
}
.sf-page-home .sf-cat-ticker {
    align-items: center;
    gap: 8px;
    padding: 1px;
    scroll-padding-inline: 1px;
}
.sf-page-home .sf-cat-item {
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    max-width: 180px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--sf-border, #e6e8eb);
    border-radius: 9px;
    background: #fff;
    color: #1b1b18;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    -webkit-tap-highlight-color: transparent;
}
.sf-page-home .sf-cat-item:hover,
.sf-page-home .sf-cat-item:focus-visible,
.sf-page-home .sf-cat-item[aria-expanded="true"] {
    border-color: rgba(17, 17, 20, .22);
    box-shadow: 0 4px 12px rgba(17, 24, 39, .1);
}
.sf-page-home .sf-cat-item:hover .sf-cat-item__name,
.sf-page-home .sf-cat-item:focus-visible .sf-cat-item__name,
.sf-page-home .sf-cat-item[aria-expanded="true"] .sf-cat-item__name {
    text-decoration: none;
}
.sf-page-home .sf-cat-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-page-home .sf-cat-item__chev {
    flex: none;
    font-size: 10px;
    color: var(--sf-muted, #66707c);
}
.sf-page-home .sf-cat-item[aria-expanded="true"] .sf-cat-item__chev { transform: rotate(180deg); }

/* ---- Product grid -------------------------------------------------------- */
.sf-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.sf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    /* Soft, intentional radius — premium, not a bubble. */
    border-radius: 16px;
    overflow: hidden;
    /* Flat, clean card — depth comes from a soft resting + hover shadow, never a
       glow. */
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sf-card:hover {
    /* Subtle lift + neutral shadow (no yellow glow/outline). */
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(17, 24, 39, .14);
}
.sf-card__media {
    position: relative;
    /* Image stage: slightly taller than square. A faint tinted surface (vs the
       white body) so the product visually "floats" — gallery feel, not a flat
       tile. Contained, never cropped. */
    aspect-ratio: 1 / 1.06;
    /* Pure white stage — no tint, no glass. */
    background: #fff;
    /* Single premium hairline separating media from the body (faint ink). */
    border-bottom: 1px solid rgba(21, 21, 26, 0.12);
    /* Soft top corners matching the card radius (explicit, not only via clip). */
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a8;
    font-size: 26px;
}
.sf-card__imglink {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Balanced inset — product reads large with light breathing room (scales with
       viewport so 2-up mobile cards aren't cramped).
       NOTE: true subject size should be solved by standardized source/thumbnail
       canvases, not by aggressively shrinking this padding. */
    padding: clamp(3px, 1.2vw, 7px);
}
.sf-card__imglink > img {
    width: 100%;
    height: 100%;
    /* Contained — never cropped or distorted regardless of source canvas. No
       image shadow or decorative effect; the pure-white stage is the finish. */
    object-fit: contain;
    transition: transform .35s ease;
}
/* Hover: gently emphasize the image. */
.sf-card:hover .sf-card__imglink > img { transform: scale(1.05); }
/* Tap (mobile, no hover): brief press-in for responsive feedback. */
.sf-card:active .sf-card__imglink > img { transform: scale(.98); }
.sf-card__badge {
    /* Solid neutral discount chip pinned inside the image. */
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 8px;
    background: #15151a;
    border: 1px solid #15151a;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 19px;
    letter-spacing: .03em;
    border-radius: 999px;
    white-space: nowrap;
    /* Decorative label only — never swallow clicks meant for the stretched card
       link beneath it (matches .sf-card__rate). Otherwise tapping the discount
       pill over the image does nothing instead of opening the product. */
    pointer-events: none;
}
.sf-card__badge--off { left: 9px; right: auto; }
.sf-card__badge--best { left: auto; right: 9px; }
/* Title row: name on the left, a light ghost wishlist heart on the right. */
.sf-card__titlerow {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.sf-card__titlerow .sf-card__name { flex: 1 1 auto; }
/* Compact rating overlay — average only (no review count). */
.sf-card__rate {
    position: absolute;
    left: 9px;
    bottom: 2px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 24px;
    color: #5f6670;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 24px;
    pointer-events: none;
}
.sf-card__rate-star { color: #5f6670; font-size: 9.5px; line-height: 24px; }
.sf-card__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 9px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sf-card__name {
    min-height: calc(2 * 1.28em);
    color: var(--sf-text);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.28;
    letter-spacing: -.005em;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
a.sf-card__name:hover { color: #15151a; }
/* The title is the card's single link — stretch it so the whole card (image,
   title, price) clicks through to the product detail page. The cart quick-add
   sits above this overlay via a higher z-index. */
a.sf-card__name::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.sf-card__stock {
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sf-card__stock--out { color: var(--sf-danger); }
.sf-card__stock--low { color: #4b5563; }
.sf-card__dots {
    display: flex;
    gap: 5px;
}
.sf-card__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(127, 127, 127, .4);
}
/* Bottom row: price on the left, the action affordance on the right. */
.sf-card__foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}
.sf-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
}
.sf-card__now {
    /* Ink, strong — the price is the loudest thing in the body. */
    color: var(--sf-text);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.sf-card__was {
    color: var(--sf-muted);
    font-size: 11.5px;
    line-height: 1.2;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
/* CTA discs. The true quick-add is a brand-gold disc (ink icon) — the one
   place gold fills. Options/view are neutral outline discs (different fill +
   icon) so they never read as an instant add. Above the stretched card link. */
.sf-card__cart {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #15151a;
    background: var(--sf-gold);
    border: 1px solid var(--sf-gold);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.sf-card__cart:hover { transform: translateY(-1px); background: var(--sf-gold-soft); border-color: var(--sf-gold-soft); }
.sf-card__cart:active { transform: translateY(0); }
/* Options / view affordances: neutral outline disc — clearly not a cart add. */
.sf-card__cart--options,
.sf-card__cart--view {
    color: var(--sf-text);
    background: transparent;
    border-color: var(--sf-border);
}
.sf-card__cart--options:hover,
.sf-card__cart--view:hover {
    transform: translateY(-1px);
    background: transparent;
    color: var(--sf-text);
    border-color: var(--sf-text);
}
/* Small neutral wishlist control in the image corner. */
.sf-card__wishform {
    position: absolute;
    bottom: 2px;
    right: 8px;
    z-index: 3;
    display: flex;
    margin: 0;
}
.sf-card__wish {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #4b5563;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.sf-card__wish:hover { color: #15151a; transform: scale(1.05); }
.sf-card__wish.is-active { color: #15151a; background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .sf-card,
    .sf-card__cart,
    .sf-card__wish,
    .sf-card__imglink > img,
    .sf-hero__track,
    .banner-slot__track {
        transition: none;
    }
    .sf-card:hover { transform: none; }
    .sf-card:hover .sf-card__imglink > img { transform: none; }
}

/* ---- Announcement ticker (slim premium scrolling line) -------------------- */
/* Full-width single-line strip — never a box. Content scrolls right-to-left and
   loops seamlessly (two duplicated groups, translate -50%). The strip carries
   its own black/gold palette so it reads the same over dark and light pages. */
.announcement-slot {
    overflow: hidden;
    width: 100%;
    background: #111114;
    border-block: 1px solid rgba(var(--sf-gold-rgb), .26);
    color: #f4f4f6;
}
.announcement-slot__track {
    display: flex;
    width: max-content;
    /* JS tunes the duration for constant speed; this is the no-JS fallback. */
    animation: sf-ticker-scroll 28s linear infinite;
    will-change: transform;
}
.announcement-slot:hover .announcement-slot__track { animation-play-state: paused; }
.announcement-slot__group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.announcement-slot__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 26px;
    white-space: nowrap;
    font-family: 'Noto Sans Bengali', 'Hind Siliguri', var(--sf-font);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .005em;
    line-height: 1.4;
}
.announcement-slot__item strong { color: var(--sf-gold-soft); font-weight: 600; }
/* CTA reads as a clean, premium pill chip inside the dark ticker — a gold
   outline that fills on hover — instead of a heavy default underline. */
.announcement-slot__item a {
    color: var(--sf-gold);
    font-weight: 600;
    text-decoration: none;
    padding: 2px 11px;
    border: 1px solid rgba(var(--sf-gold-rgb), .55);
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.announcement-slot__item a:hover,
.announcement-slot__item a:focus-visible {
    background: var(--sf-gold);
    border-color: var(--sf-gold);
    color: #111114;
}

/* Homepage "content" placement: keep the premium slim black bar (white text,
   gold accents) but contained to the storefront width and centered between
   sections — not the full-bleed strip used at the site top/footer. The bar stays
   crisp; same-colour edge gradients fade the text before the left/right edges. */
.announcement-slot--content {
    /* width comes from the .sf-container wrapper, so it lines up with sections. */
    position: relative;
    margin-block: 32px;
    border: 1px solid rgba(var(--sf-gold-rgb), .26);
    /* Lightly rounded premium rectangle, not a full capsule/pill. */
    border-radius: 7px;
}
.announcement-slot--content::before,
.announcement-slot--content::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    z-index: 2;
    pointer-events: none;
}
.announcement-slot--content::before { left: 0; background: linear-gradient(90deg, #111114, transparent); }
.announcement-slot--content::after { right: 0; background: linear-gradient(270deg, #111114, transparent); }
/* Homepage content ticker reads a touch larger than the base 14.5px so the
   announcement text is clearly legible on desktop/tablet, without making the
   slim bar taller (the phone override below sets the mobile size). Scoped to the
   homepage content slot so the site-top strip is unaffected. */
.sf-page-home .announcement-slot--content .announcement-slot__item { font-size: 15px; }

/* Site-top strip: keep the full-bleed black bar, but give the text more vertical
   breathing room and the same crisp same-colour edge fade as the content ticker. */
.announcement-slot--site-top { position: relative; }
.announcement-slot--site-top::before,
.announcement-slot--site-top::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    z-index: 2;
    pointer-events: none;
}
.announcement-slot--site-top::before { left: 0; background: linear-gradient(90deg, #111114, transparent); }
.announcement-slot--site-top::after { right: 0; background: linear-gradient(270deg, #111114, transparent); }
.announcement-slot--site-top .announcement-slot__item { padding-block: 9px; }
/* Ticker wrapper (homepage content slot): the container div is always emitted,
   but the slot inside renders nothing when there are no active announcements —
   hide the wrapper then so no empty block takes part in the page flow. */
.sf-ticker-wrap:not(:has(.announcement-slot)) { display: none; }

@keyframes sf-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---- Popup slot ---------------------------------------------------------- */
/* The popup starts with the `hidden` attribute and popup.js flips `el.hidden`
   to gate visibility. This `display: flex` would otherwise override the UA
   `[hidden] { display: none }`, leaving a fixed, opacity:0 panel laid out over
   the page — silently eating clicks on the product cards beneath it (worst on
   mobile, where it covers the lower half, and permanently on return visits when
   it is never revealed). Honour `hidden` so it is removed from layout/hit-testing
   whenever it is not shown; `pointer-events` is a second guard for any opacity:0
   state so it can only be interactive once actually visible. */
[data-popup-slot] [data-popup-campaign] {
    position: fixed;
    background: var(--sf-surface);
    /* Hairline low-alpha gold reads premium; full gold was too heavy. */
    border: 1px solid rgba(254, 189, 4, .32);
    border-radius: var(--sf-radius);
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
[data-popup-slot] [data-popup-campaign][hidden] { display: none; }
[data-popup-campaign].is-visible { opacity: 1; pointer-events: auto; }

/* Backdrop is created by popup.js for campaign popups only — the suggested
   nudge never darkens or blocks the page. */
.sf-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 129;
    background: rgba(8, 8, 10, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}
.sf-popup-backdrop.is-visible { opacity: 1; }

/* Campaign popup: clean centered modal, above the support FAB and bottom nav. */
[data-popup-campaign][data-popup-role="campaign"] {
    z-index: 130;
    left: 50%;
    top: 50%;
    width: min(420px, calc(100vw - 32px));
    max-height: min(82vh, 640px);
    overflow-y: auto;
    padding: 22px;
    transform: translate(-50%, -46%);
}
[data-popup-campaign][data-popup-role="campaign"].is-visible { transform: translate(-50%, -50%); }
.sf-popup--campaign .sf-popup__image {
    width: 100%;
    max-height: 44vh;
    object-fit: contain;
    border-radius: var(--sf-radius-sm);
}
.sf-popup__title { color: var(--sf-gold-soft); font-size: 17px; padding-right: 20px; }
.sf-popup__message { color: var(--sf-text); font-size: 14px; line-height: 1.55; }

/* Image-only campaign popup: the uploaded image IS the popup — no padding, no
   text block, just a rounded campaign card with a floating close button. */
/* [data-popup-slot] prefix matches the specificity of the base popup rules so
   these later declarations actually override padding/width/border. */
[data-popup-slot] .sf-popup--image-only {
    padding: 0;
    gap: 0;
    overflow: hidden;
    width: min(480px, 88vw);
    max-height: none;
    border: 0;
    background: transparent;
}
.sf-popup--image-only .sf-popup__image-link { display: block; line-height: 0; }
.sf-popup--image-only .sf-popup__image {
    display: block;
    width: 100%;
    height: auto;
    /* Never crop or stretch the campaign artwork; tall images shrink to fit. */
    max-height: min(76vh, 640px);
    object-fit: contain;
    border-radius: var(--sf-radius);
}
.sf-popup--image-only .sf-popup__close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1c1c1e;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.sf-popup--image-only .sf-popup__close:hover { background: #fff; color: #000; }

@media (max-width: 767px) {
    [data-popup-slot] .sf-popup--image-only { width: min(420px, 88vw); }
}

/* Suggested product popup: small side nudge, clear of the support FAB
   (desktop: right 24px / bottom 24px, 54px tall). */
[data-popup-campaign][data-popup-role="suggested"] {
    z-index: 118;
    right: 24px;
    bottom: 94px;
    max-width: 320px;
    transform: translateY(16px);
}
[data-popup-campaign][data-popup-role="suggested"].is-visible { transform: translateY(0); }
.sf-popup__eyebrow {
    color: var(--sf-gold-soft);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-right: 22px;
}
.sf-popup__product {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sf-text);
    text-decoration: none;
    min-width: 0;
}
.sf-popup__product img {
    width: 64px;
    height: 64px;
    flex: none;
    object-fit: cover;
    border-radius: var(--sf-radius-sm);
}
.sf-popup__product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-popup__product-name {
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sf-popup__note {
    color: var(--sf-muted);
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sf-popup__price { color: var(--sf-gold-soft); font-size: 15px; font-weight: 700; }
.sf-popup__cta {
    align-self: flex-start;
    margin-top: 4px;
    background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-soft));
    color: #1a1408;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: var(--sf-radius-btn-sm);
    text-decoration: none;
}
.sf-popup__close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: 0;
    color: var(--sf-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.sf-popup__close:hover { color: var(--sf-text); }

/* Mobile: keep the nudge compact and clear of the bottom nav (bottom 8px +
   64px tall) and the support FAB column (right ≈16..70px). */
@media (max-width: 767px) {
    [data-popup-campaign][data-popup-role="suggested"] {
        left: var(--sf-mobile-action-x, 10px);
        right: 74px;
        bottom: calc(var(--sf-bottom-nav-height, 62px) + var(--sf-bottom-nav-offset, 8px) + 14px + env(safe-area-inset-bottom));
        max-width: none;
        padding: 14px;
    }
    .sf-popup__product img { width: 56px; height: 56px; }
}

/* ---- Footer -------------------------------------------------------------- */
.sf-footer { margin-top: 32px; background: var(--sf-bg); border-top: 1px solid var(--sf-border); position: relative; }
/* No dark margin strip between the trust badges and the footer: the gap lives
   inside the white .sf-main as padding-bottom (rule below) so it reads as clean
   breathing space, not a dark band that blends into the black footer. */
.sf-main:has(.sf-trustbar--footer) + .sf-footer { margin-top: 0; }
.sf-page-home .sf-footer { margin-top: 12px; }
/* White breathing space below the footer-adjacent trust strip (desktop). */
.sf-page-home .sf-main:has(.sf-trustbar--footer) { padding-bottom: 18px; }
.sf-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px 22px;
    /* Compact top padding so the logo sits close to the footer's top edge — no
       large empty dark band above the brand. */
    padding-block: 22px 30px;
}
.sf-footer__brand { max-width: 360px; }
.sf-footer__logo { display: inline-flex; }
.sf-footer__logo img { height: 40px; width: auto; display: block; }
.sf-footer__about { color: var(--sf-muted); font-size: 13.5px; line-height: 1.65; margin: 14px 0 0; }
.sf-footer__support { color: var(--sf-muted); font-size: 13px; line-height: 1.55; margin: 10px 0 0; }
.sf-footer__notes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sf-footer__notes li { color: var(--sf-muted); font-size: 12.5px; display: flex; gap: 8px; align-items: baseline; }
.sf-footer__notes i { width: 15px; color: var(--sf-gold); flex-shrink: 0; }
.sf-footer__mobile-flow { display: contents; }
.sf-footer__meta { display: grid; align-content: start; gap: 16px; }
.sf-footer__col h3,
.sf-footer__social-title {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 13px;
    color: var(--sf-gold);
}
.sf-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-footer__col li { color: var(--sf-muted); font-size: 13.5px; line-height: 1.35; display: flex; gap: 8px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.sf-footer__col a { color: #cfd0d6; font-size: 13.5px; text-decoration: none; transition: color .16s ease; }
.sf-footer__col a:hover { color: var(--sf-gold); }
.sf-footer__col i { width: 16px; color: var(--sf-gold); flex-shrink: 0; }
/* Contact rows wrap their icon + text inside an <a> (phone/WhatsApp/email), so
   the icon is not a direct flex child of the <li> like the address/hours rows are.
   Make the anchor its own flex row so the fixed-width gold icon stays put and a
   long value (e.g. support@quickpick.com.bd) wraps neatly BESIDE the icon instead
   of dropping onto the next line under it. overflow-wrap lets the email break
   within its own column; min-width:0 lets it shrink inside the narrow mobile
   column. Beats the mobile `.sf-footer__col a { display:inline-block }` rule on
   specificity, so it holds at every width. */
.sf-footer__contact li a {
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
    overflow-wrap: anywhere;
}
.sf-social { display: flex; flex-wrap: wrap; gap: 9px; }
.sf-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    color: var(--sf-text);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.sf-social a:hover { background: rgba(var(--sf-gold-rgb), .14); color: var(--sf-gold); border-color: var(--sf-gold); }
.sf-footer__bar { border-top: 1px solid var(--sf-border); }
.sf-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding-block: 16px;
}
/* Trust line: white/muted text with small gold dot separators. */
.sf-footer__trust { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; }
.sf-footer__trust li { color: var(--sf-text); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.sf-footer__trust li:not(:last-child)::after { content: "\00B7"; color: var(--sf-gold); font-weight: 800; margin: 0 11px; }
.sf-footer__copy { color: var(--sf-muted); font-size: 12.5px; }

/* Keep the footer clear of the fixed mobile bottom nav (shown on every
   storefront page), so no content sits behind it. */
@media (max-width: 767px) {
    body.sf .sf-footer__bar {
        padding-bottom: calc(var(--sf-bottom-nav-height, 62px) + var(--sf-bottom-nav-offset, 8px) + 16px + env(safe-area-inset-bottom));
    }
}

/* Mobile trust line: the dot-separated row wraps unpredictably (a separator
   can land at a line end). Switch to a tidy 2x2 grid with a leading gold dot
   per item instead. */
@media (max-width: 640px) {
    .sf-footer__bar-inner { padding-block: 14px; }
    .sf-footer__trust {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        gap: 7px 22px;
    }
    .sf-footer__trust li:not(:last-child)::after { content: none; }
    .sf-footer__trust li::before {
        content: "\00B7";
        color: var(--sf-gold);
        font-weight: 800;
        margin-right: 8px;
    }
}
/* Mobile + tablet: keep links/policies as two columns, but let contact/social
   continue the shorter Quick Links column instead of waiting for Policies. */
@media (max-width: 899px) {
    /* The desktop margin sits on the dark body background, so on phones it
       reads as a broken black band before the logo, not as breathing space. Let
       the footer start right after the content and keep the gap INSIDE the
       light .sf-main instead, so it reads as clean breathing space. */
    .sf-footer { margin-top: 0; }
    .sf-main { padding-bottom: 24px; }
    /* Mobile: white breathing space below the trust strip before the footer. */
    .sf-page-home .sf-main:has(.sf-trustbar--footer) { padding-bottom: 12px; }

    .sf-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        padding-block: 16px 18px;
    }
    .sf-footer__brand { max-width: none; grid-column: 1 / -1; }
    .sf-footer__mobile-flow {
        display: grid;
        grid-column: 1;
        gap: 14px;
        align-content: start;
        min-width: 0;
    }
    .sf-footer__policies {
        grid-column: 2;
        grid-row: 2;
    }
    .sf-footer__meta { min-width: 0; }

    /* Tighter mobile rhythm: the desktop-scale margins read tall on phones. */
    .sf-footer__about { margin-top: 10px; }
    .sf-footer__support { margin-top: 8px; }
    .sf-footer__notes { margin-top: 10px; gap: 6px; }
    .sf-footer__col h3,
    .sf-footer__social-title { margin-bottom: 10px; }
    .sf-footer__col ul { gap: 8px; }
    /* Links keep a comfortable tap height even with the tighter list gap. */
    .sf-footer__col a { display: inline-block; padding-block: 2px; }

    /* Meta: natural vertical flow — Contact & Support, then Follow Us under
       it — with a compact gap between the two blocks. */
    .sf-footer__meta { gap: 14px; }
    .sf-footer__social-title { margin-bottom: 0; }
    .sf-social { margin-top: -4px; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
    /* One phone-wide side-margin rhythm. The cover/banner and search field already
       sit 8px from the screen edges, but the shared content gutter was 16px, so
       product sections, shop/category/search listings, related products and the
       footer sat inset with wasted side gap that didn't line up with the banner.
       Drop the shared gutter to 8px so everything on .sf-container follows the same
       margin as the cover and the two-up cards use more of the width. Tablet and
       desktop (≥641px) keep the 16px gutter, so they are unchanged. */
    :root { --sf-gutter: 8px; }

    /* Footer Contact & Support carries the long support email. Give its column a
       little more width than the Policies column so support@quickpick.com.bd sits
       on ONE line at 390/430px, and only wraps — cleanly, at the "@" via the <wbr>
       in the markup — on the narrowest ~360px phones. Tablet keeps the even split. */
    .sf-footer__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

    /* Site-top announcement: more vertical room so the text breathes and never
       sits cramped against the very top of the screen / header. */
    .announcement-slot--site-top .announcement-slot__item { padding-block: 13px; }

    /* Compact single-row black bar: menu, logo, icons. Search is in the white
       .sf-subhead strip below, so the bar no longer needs to wrap a search row. */
    .sf-header__bar {
        height: 56px;
    }
    /* Premium ~44px field, snug under the black bar with no divider below. */
    .sf-subhead__inner { padding-block: 7px 5px; }
    .sf-subhead > .sf-container { padding-inline: 8px; }
    .sf-search input { padding: 10px 8px 10px 16px; }

    .sf-header__action span:not(.sf-header__cart-count):not(.sf-header__wish-count) { display: none; }
    /* The category nav is the hamburger-toggled menu on phones; it stays fully
       collapsed (no persistent bar/divider under search) until opened. */
    .sf-nav { display: none; }
    .sf-nav.is-open { display: block; padding-bottom: 6px; }

    /* Inset the hero/banner by the shared --sf-gutter (now 8px on phones) so the
       banner lines up exactly with the sections, listings and footer below it — one
       consistent side margin, no full bleed, no overflow. The top gap uses PADDING
       (not margin): a top margin here collapses through .sf-main and would render
       over the dark body background; padding keeps the gap inside the light content
       area so it shows as a clean white gap below the search bar. */
    .sf-hero { margin-inline: var(--sf-gutter); padding: 6px 0 0; }

    /* Banners can have different natural ratios; don't let the flex track
       stretch every slide to the tallest one (that left a dead band under the
       shorter banners, so the image stopped short of the rounded bottom and
       looked cut). Top-align so each slide is exactly its own image height. */
    .sf-hero__track { align-items: flex-start; }

    /* Hero on phones: a wide 16:6 desktop banner rendered at its natural ratio was
       only ~140px tall at 390px wide, so it read as a short, unimpactful strip.
       Give the slide a fixed 16:9 crop (≈194px @360, ≈210px @390, ≈233px @430) —
       big and premium, but balanced so it never buries the Flash Sale / product
       cards too far below the fold. The image covers it (object-fit: cover,
       centered) with no stretch or overflow. A fixed ratio also makes every
       carousel slide the same height, so switching slides no longer jumps. Rounded
       corners stay on the SLIDE; the viewport frame is un-rounded here. No side
       padding on mobile means no gutter slivers. */
    .sf-hero__viewport { border-radius: 0; }
    .sf-hero__slide { aspect-ratio: 16 / 9; max-height: none; border-radius: var(--sf-radius-sm); }
    .sf-hero__slide img { height: 100%; }
    /* Text-only banners have no image, so keep a ratio for the overlay height */
    .sf-hero__slide--text { aspect-ratio: 4 / 5; }

    /* Hero: anchor overlay text to the bottom over a vertical scrim so it
       never overlaps the image's own content and stays readable */
    .sf-hero__overlay {
        justify-content: flex-end;
        gap: 10px;
        padding: 22px 18px 26px;
        background: linear-gradient(to top,
            rgba(0, 0, 0, .8) 0%,
            rgba(0, 0, 0, .4) 42%,
            rgba(0, 0, 0, 0) 78%);
    }
    .sf-hero__title { max-width: 100%; }
    .sf-hero__subtitle { max-width: 100%; }

    /* Homepage mobile rhythm: keep the top flow compact and move trust badges
       to the footer-adjacent position, away from the hero cluster. */
    .sf-page-home .sf-trustbar { margin-top: 12px; padding-bottom: 0; }
    .sf-page-home .sf-trust {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }
    .sf-page-home .sf-trust li {
        gap: 7px;
        min-width: 0;
        min-height: 50px;
        padding: 8px 9px;
        white-space: normal;
    }
    .sf-page-home .sf-main:has(.sf-trustbar--footer) { padding-bottom: 12px; }
    .sf-page-home .sf-section { margin-top: 18px; }

    /* Home ticker: compact both sides to keep the hero -> announcement -> sale
       flow tight now that the trust strip lives near the footer. */
    .sf-page-home .announcement-slot--content { margin-block: 8px; }
    /* The bar itself keeps a readable ~34px height: 4px padding rendered as a
       compressed sliver, so give the line real vertical room without turning
       the strip into a heavy band. */
    .sf-page-home .announcement-slot--content .announcement-slot__item {
        padding-block: 8px;
        font-size: 13px;
    }
    .sf-page-home .sf-container:has(> .announcement-slot--content) + .sf-section { margin-top: 12px; }

    /* Slim white category chip row on phones (≈32px chips), sitting close under
       the search with no divider so search → categories → hero flow smoothly. */
    .sf-page-home .sf-cat-section { padding-top: 4px; padding-bottom: 8px; }
    .sf-page-home .sf-cat-ticker { gap: 8px; padding: 1px; }
    .sf-page-home .sf-cat-item {
        max-width: 150px;
        min-height: 32px;
        padding: 7px 10px;
        font-size: 12.5px;
    }
    .sf-page-home .sf-cat-section + .sf-hero { padding-top: 8px; }

    .sf-page-home .sf-section:has(> .sf-product-grid) > .sf-section__head {
        margin-bottom: 12px;
    }
    .sf-page-home .sf-section:has(> .sf-product-grid),
    .sf-page-home .sf-flash {
        padding-inline: var(--sf-gutter);
    }
    /* All mobile two-up product grids (home sections, Flash Sale, shop / category /
       search listings, related products) share one clean, professional gap in the
       8–12px band — not the old cramped 7px, not too wide. */
    .sf-product-grid { gap: 10px; }
    .sf-page-home .sf-product-grid {
        /* Phones use 2 up (matching the shop/category grid) so homepage cards stay
           big and readable. Side padding now follows the shared --sf-gutter and the
           cards get the full width between the 10px gaps. */
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-page-home .sf-flash { margin-top: 18px; }
    /* Category row → Flash Sale: a clean ~16px visual gap (the ticker already adds
       10px of its own bottom padding, so keep the sibling margin modest). */
    .sf-page-home .sf-cat-section + .sf-flash { margin-top: 16px; }
    .sf-page-home .sf-flash__bar {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    .sf-page-home .sf-flash__note { display: none; }

    /* Homepage product cards keep the readable shop/category sizing (title, price
       and cart disc), but sit slightly flatter than the base card: a shorter image
       stage and tighter body padding trim overall card height so 2-up rows aren't
       too tall — without shrinking the content. */
    .sf-card__cart {
        width: 31px;
        height: 31px;
        font-size: 12px;
    }
    .sf-page-home .sf-card__media { aspect-ratio: 1 / 0.92; }
    .sf-page-home .sf-card__body { padding: 7px 10px 9px; }
    /* A single-product section keeps a 2-column track so the lone card stays a
       normal card in the left cell instead of ballooning to full width. */
    .sf-page-home .sf-product-grid:has(> .sf-card:only-child) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 641px) {
    .sf-header__menu { display: none; }
    .sf-page-home .sf-header__primary { display: inline-flex; }
    .sf-trust { grid-template-columns: repeat(4, 1fr); }
    .sf-trustbar--footer .sf-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sf-product-grid { grid-template-columns: repeat(3, 1fr); }
    /* Desktop/tablet keep the same clean white chip ticker — no sparse grid. */
}

@media (min-width: 900px) {
    /* Laptop */
    .sf-product-grid { grid-template-columns: repeat(4, 1fr); }
    .sf-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.35fr; gap: 30px; align-items: start; }
    .sf-footer__brand { grid-column: 1; grid-row: 1; }
    .sf-footer__links { grid-column: 2; grid-row: 1; }
    .sf-footer__policies { grid-column: 3; grid-row: 1; }
    .sf-footer__meta { grid-column: 4; grid-row: 1; }
}

@media (min-width: 1200px) {
    /* Wide desktop: dense 6-up grid like the reference. */
    .sf-product-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Desktop homepage product grids (marketing sections + Flash Sale, which both
   live inside .sf-page-home). Use an explicit fixed column count so a full
   section always shows a clean, predictable row — 5-up on laptops, 6-up on wide
   desktops. minmax(0, 1fr) is essential: the `0` min stops any card content
   (long titles, min-widths) from forcing tracks wider and dropping the column
   count, and the tracks share the row evenly so cards never stretch huge or
   overflow. Sections with fewer real products simply fill the leftmost cells
   (no fake/blank cards). Desktop only — the mobile 2-up layout is untouched. */
@media (min-width: 1024px) {
    .sf-page-home .sf-product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }
}
@media (min-width: 1280px) {
    .sf-page-home .sf-product-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* =============================================================================
   HYBRID LIGHT THEME (opt-in)
   Add class `sf-theme-light` to <body class="sf"> to enable. Remove it to revert
   fully to the default dark theme — every rule below is scoped to
   `.sf-theme-light .sf-main`, so the dark + gold HEADER and FOOTER are untouched.
   Only the main content (sections, category tiles, product cards, trust badges)
   becomes a clean light surface with brand-gold accents.
   ========================================================================== */
.sf-theme-light .sf-main {
    /* Re-map the surface tokens for content only; header/footer are siblings of
       .sf-main, so they keep the original dark values. */
    --sf-surface: #ffffff;
    --sf-surface-2: #f1f3f5;
    --sf-border: #e6e8eb;
    --sf-text: #1b1b18;
    --sf-muted: #66707c;
    /* Deepened brand gold — same hue as --sf-gold, but readable as text/icons
       on a light background (the bright #febd04 is for gold fills, not ink). */
    --sf-gold-ink: #8a6a00;
    /* Premium card surface + soft neutral shadow used by account/auth panels and
       the mobile order cards (so they read as crisp white tiles, not transparent). */
    --sf-card: #ffffff;
    --sf-shadow-sm: 0 6px 18px rgba(17, 24, 39, .07);

    background: #f4f5f7;
    color: var(--sf-text);
}

.sf-page-home.sf-theme-light .sf-main { background: #fff; }
.sf-theme-light .sf-main:has(.sf-pdp) { background: #fff; }

.sf-theme-light:not(.sf-page-critical-actions) .sf-subhead,
.sf-theme-light:not(.sf-page-critical-actions) .sf-nav {
    background: #f4f5f7;
}

.sf-page-home.sf-theme-light .sf-subhead,
.sf-page-home.sf-theme-light .sf-nav {
    background: #fff;
}

/* Desktop: cleaner, whiter content surface. The homepage main is already #fff;
   the shop/category and other content pages used a dull #f4f5f7 off-grey. On
   desktop, make the main body and the sub-header/nav strips pure white — cards
   keep their borders + soft shadow so they still read as distinct tiles. Scoped
   to desktop only, so the mobile appearance is unchanged. */
@media (min-width: 1024px) {
    .sf-theme-light .sf-main { background: #ffffff; }
    .sf-theme-light:not(.sf-page-critical-actions) .sf-subhead,
    .sf-theme-light:not(.sf-page-critical-actions) .sf-nav {
        background: #ffffff;
    }
}

/* Section heading text reads dark; the gold accent bar stays gold. */
.sf-theme-light .sf-main .sf-section__title { color: var(--sf-text); }

/* Trust badges: black icons read clean on the light tiles. */
.sf-theme-light .sf-main .sf-trust li i { color: var(--sf-text); }
.sf-theme-light .sf-main .sf-trustbar--footer .sf-trust li i { color: #111114; }

/* Product cards: clean white surface with a subtle border + soft neutral shadow.
   No gradient/glass — premium and lightweight for 2-up mobile grids. */
.sf-theme-light .sf-main .sf-card {
    background: #fff;
    border-color: #e7e9ed;
    box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
}
.sf-theme-light .sf-main .sf-card:hover {
    box-shadow: 0 18px 34px rgba(17, 24, 39, .12);
}
/* Price and title hover read as ink on white. */
.sf-theme-light .sf-main .sf-card__now { color: var(--sf-text); }
.sf-theme-light .sf-main a.sf-card__name:hover { color: var(--sf-text); }

/* The announcement ticker carries its own dark strip + gold accents on every
   page, so the light theme must not recolor its text. */

/* Search field: white with dark text on the light body. It sits in the white
   .sf-subhead strip (a sibling of .sf-main), so it keeps a visible light border
   rather than a white-on-white edge. */
.sf-theme-light .sf-search {
    background: #ffffff;
    border-color: #e5e7eb;
}
.sf-theme-light .sf-search input { color: #1b1b18; }
.sf-theme-light .sf-search input::placeholder { color: #66707c; opacity: 1; }
/* Search submit icon: black for contrast on the white search pill. */
.sf-theme-light .sf-search button { color: #1b1b18; }

/* =============================================================================
   PHASE 4.2 — Listing (shop/category), product detail, search results.
   Mobile-first; all rules live inside .sf-main so the hybrid light theme token
   remap applies automatically.
   ========================================================================== */

/* ---- Breadcrumb ----------------------------------------------------------- */
.sf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--sf-muted);
}
.sf-breadcrumb a { color: var(--sf-muted); transition: color .15s ease; }
.sf-breadcrumb a:hover { color: var(--sf-gold-ink, var(--sf-gold)); }
.sf-breadcrumb > span:last-child { color: var(--sf-text); font-weight: 600; }

/* ---- Listing header ------------------------------------------------------- */
.sf-listing { padding-bottom: 32px; }
.sf-listing--catalog { padding-top: 8px; }
.sf-listing__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    /* Compact gap under the search strip before the title (no wide blank band). */
    margin: 8px 0 14px;
}
.sf-listing--catalog .sf-listing__head { margin-top: 0; }
.sf-listing__title { font-size: 22px; font-weight: 700; }
.sf-listing__count { font-size: 13px; color: var(--sf-muted); }

/* ---- Subcategory chips ---------------------------------------------------- */
.sf-subcats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.sf-subcat {
    padding: 7px 14px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s ease, transform .15s ease;
}
.sf-subcat:hover { border-color: var(--sf-gold); transform: translateY(-1px); }

/* ---- Filter / sort toolbar ------------------------------------------------ */
.sf-toolbar {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 12px;
    margin-bottom: 18px;
}
.sf-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.sf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 0;
}
.sf-field--price { flex: 1 1 90px; }
.sf-field__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sf-muted);
}
.sf-select,
.sf-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font: inherit;
    font-size: 14px;
}
.sf-select:focus,
.sf-input:focus {
    outline: none;
    border-color: var(--sf-gold);
    box-shadow: 0 0 0 3px rgba(var(--sf-gold-rgb), .18);
}
.sf-toolbar__apply { flex: 0 0 auto; height: 40px; padding-block: 0; }

/* ---- Empty state ---------------------------------------------------------- */
.sf-empty {
    text-align: center;
    padding: 56px 20px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
.sf-empty > i { font-size: 38px; color: var(--sf-muted); }
.sf-empty__title { margin: 14px 0 4px; font-size: 18px; font-weight: 700; }
.sf-empty__text { margin: 0 0 18px; color: var(--sf-muted); font-size: 14px; }

/* ---- Pagination ----------------------------------------------------------- */
.sf-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}
.sf-page {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-text);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.sf-page:hover { border-color: var(--sf-gold); color: var(--sf-gold-ink, var(--sf-gold)); }
.sf-page--active {
    background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-soft));
    border-color: transparent;
    color: #1a1408;
}
.sf-page--disabled { opacity: .45; cursor: default; }
.sf-page--gap { border: 0; background: transparent; }

/* ---- Product detail (PDP) ------------------------------------------------- */
/* Breadcrumb removed on the PDP — give the gallery clean premium top spacing.
   Only the block (top/bottom) padding is set here so the .sf-container inline
   padding survives; a `padding` shorthand would zero the sides and make the
   gallery/content touch the screen edges on mobile. */
/* Compact top: the search strip sits just above, so only a small gap is needed
   before the open product media area — no wide empty band. */
.sf-pdp {
    padding-block: 8px 32px;
    background: #fff;
}
.sf-pdp__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 0;
    background: #fff;
}
.sf-pdp__gallery,
.sf-pdp__info {
    min-width: 0;
    background: #fff;
}

/* Gallery: large open product media. The main image stays contained, but the
   stage itself is not a card so the PDP top reads clean and minimal. */
.sf-pdp__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a8;
    font-size: 40px;
}
.sf-pdp__stage img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
/* Prev/next gallery arrows: minimal white circular buttons with a dark chevron,
   vertically centred inside the image card. No dotted focus ring (gold ring). */
.sf-pdp__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #15151a;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .12);
    transition: background .15s ease, transform .15s ease;
}
.sf-pdp__nav:hover { background: #fff; }
.sf-pdp__nav:active { transform: translateY(-50%) scale(.94); }
.sf-pdp__nav:focus { outline: none; }
.sf-pdp__nav:focus-visible { outline: 2px solid var(--sf-gold); outline-offset: 2px; }
.sf-pdp__nav--prev { left: 10px; }
.sf-pdp__nav--next { right: 10px; }
.sf-pdp__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    /* QuickPick brand discount chip: ink fill + gold text (matches the product
       card badge). No red marketplace gradient. */
    background: #15151a;
    color: var(--sf-gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 8px;
}
.sf-pdp__thumbs {
    display: flex;
    gap: 1px;
    margin-top: 4px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding: 0;
    background: #fff;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sf-pdp__thumbs::-webkit-scrollbar { display: none; }
.sf-pdp__thumb {
    flex: 0 0 auto;
    width: 116px;
    height: 116px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    transition: opacity .15s ease, transform .15s ease;
}
.sf-pdp__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sf-pdp__thumb:focus,
.sf-pdp__thumb:focus-visible { outline: none; }
.sf-pdp__thumb:hover {
    opacity: .86;
}
.sf-pdp__thumb.is-active {
    opacity: 1;
}

/* Info column. The outer column separates the buy groups (lead block, variants,
   quantity, actions, assurances); the lead block itself is tightly grouped by
   .sf-pdp__head so category/stock/name/price/rating/description read as one
   connected unit rather than six loose rows. */
.sf-pdp__info { display: flex; flex-direction: column; gap: 14px; }
.sf-pdp__head { display: flex; flex-direction: column; gap: 7px; }
/* Category eyebrow: clean text only — no box, no pill, no background. A small,
   muted, uppercase label above the stock line that deliberately stays quieter
   than the product title so it never competes for attention. One line with
   ellipsis so a long category name never wraps awkwardly. It is the product
   category (not the brand). */
.sf-pdp__eyebrow {
    align-self: flex-start;
    max-width: 100%;
    color: var(--sf-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-pdp__eyebrow:hover,
.sf-pdp__eyebrow:focus-visible { color: var(--sf-gold-ink, var(--sf-text)); text-decoration: underline; text-underline-offset: 3px; }
.sf-pdp__title { font-size: 23px; font-weight: 700; line-height: 1.25; margin: 1px 0; }
.sf-pdp__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sf-muted);
}
.sf-pdp__rating--lg { font-size: 15px; margin-bottom: 14px; }
.sf-pdp__rating--lg strong { font-size: 20px; color: var(--sf-text); }
.sf-stars { color: var(--sf-gold); letter-spacing: 1px; white-space: nowrap; }
/* Price block: prominent current price on its own line, then a subtle secondary
   line (struck regular price · save info). The save reads as supporting muted
   text — never a loud badge/pill — so it stays connected to the rest of the PDP. */
.sf-pdp__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 1px 0;
}
.sf-pdp__now { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--sf-text); }
.sf-pdp__price-sub {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    font-size: 13px;
    color: var(--sf-muted);
}
.sf-pdp__was { color: var(--sf-muted); text-decoration: line-through; }
.sf-pdp__price-sub .sf-pdp__sep { color: var(--sf-border-strong, #c9ccd1); font-weight: 700; }
.sf-pdp__save {
    /* Subtle supporting text — no filled pill, no loud badge, no green. */
    font-weight: 700;
    color: var(--sf-muted);
}
.sf-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
}
.sf-pdp__stock.is-in { color: #1f7a4d; }
.sf-pdp__stock.is-out { color: var(--sf-danger); }
.sf-pdp__lead { margin: 0; color: var(--sf-muted); font-size: 14.5px; line-height: 1.6; }

/* Variants */
.sf-pdp__variant { display: flex; flex-direction: column; gap: 8px; }
.sf-pdp__variant-label { font-size: 13px; font-weight: 700; }
.sf-pdp__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-chip { position: relative; cursor: pointer; }
.sf-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sf-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 8px 14px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.sf-chip:hover span { border-color: var(--sf-gold); }
.sf-chip input:checked + span {
    border-color: var(--sf-gold);
    background: rgba(var(--sf-gold-rgb), .12);
}
.sf-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--sf-gold-rgb), .25); }
.sf-pdp__variant-help { margin: -2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--sf-muted); }
.sf-pdp__variant-error { margin: 0; font-size: 13px; font-weight: 600; color: var(--sf-danger); }
.sf-pdp__variant-error[hidden] { display: none; }

/* Quantity stepper — compact gold/ink pill matching the PDP buy area. */
.sf-pdp__qty {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--sf-surface);
}
.sf-pdp__qty-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sf-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sf-pdp__qty-btn:hover { background: rgba(var(--sf-gold-rgb), .14); color: var(--sf-gold-ink, var(--sf-text)); }
.sf-pdp__qty-input {
    width: 46px;
    height: 40px;
    border: 0;
    border-inline: 1px solid var(--sf-border);
    background: var(--sf-surface);
    color: var(--sf-text);
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    -moz-appearance: textfield;
}
.sf-pdp__qty-input::-webkit-outer-spin-button,
.sf-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-pdp__qty-input:focus { outline: none; }

/* Actions */
.sf-pdp__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}
.sf-pdp__buy,
.sf-pdp__addcart { flex: 1 1 160px; justify-content: center; }
.sf-pdp__addcart {
    background: transparent;
    color: var(--sf-text);
    border: 1px solid var(--sf-text);
}
.sf-pdp__addcart:hover { background: rgba(17, 24, 39, .06); }
.sf-pdp__buy[disabled],
.sf-pdp__addcart[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.sf-pdp__assure {
    list-style: none;
    margin: 2px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--sf-border);
    /* Compact 2-column grid so the four trust points read as a tidy 2x2 block
       instead of an uneven wrapping row. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    font-size: 13px;
    color: var(--sf-muted);
}
.sf-pdp__assure li { display: inline-flex; align-items: center; gap: 7px; }
.sf-pdp__assure i { color: var(--sf-text); }

/* Sections (description / reviews / related) */
.sf-pdp__section { margin-top: 34px; }
.sf-pdp__section .sf-section__title { margin-bottom: 14px; }
.sf-pdp__desc {
    color: var(--sf-text);
    font-size: 14.5px;
    line-height: 1.7;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 16px;
}
.sf-pdp__muted { color: var(--sf-muted); font-size: 14px; }

/* Reviews */
.sf-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-review {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 14px 16px;
}
.sf-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}
.sf-review__name { font-weight: 700; font-size: 14px; }
.sf-review__body { margin: 0; color: var(--sf-muted); font-size: 14px; line-height: 1.6; }

/* ---- Desktop layout ------------------------------------------------------- */
@media (min-width: 768px) {
    .sf-listing__title { font-size: 26px; }
    .sf-pdp__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
    .sf-pdp__thumb {
        width: 124px;
        height: 124px;
    }
    .sf-pdp__title { font-size: 28px; }
    .sf-pdp__now { font-size: 30px; }
    .sf-toolbar__row { flex-wrap: nowrap; }
}

/* =============================================================================
   Product detail reviews — summary, breakdown, verified, show-more, form.
   ========================================================================== */
.sf-review-flash {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--sf-radius-sm);
    background: rgba(46, 160, 110, .12);
    border: 1px solid rgba(46, 160, 110, .3);
    color: #1f7a4d;
    font-size: 14px;
    font-weight: 600;
}

/* Empty state */
.sf-reviews-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--sf-surface);
    border: 1px dashed var(--sf-border);
    border-radius: var(--sf-radius);
}
.sf-reviews-empty > i { font-size: 30px; color: var(--sf-gold); }
.sf-reviews-empty__title { margin: 12px 0 4px; font-size: 17px; font-weight: 700; }
.sf-reviews-empty__text { margin: 0; color: var(--sf-muted); font-size: 13.5px; }

/* Summary: average score + per-star breakdown bars */
.sf-rating-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
    padding: 16px;
    margin-bottom: 18px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
.sf-rating-summary__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.sf-rating-summary__avg { font-size: 40px; font-weight: 800; line-height: 1; color: var(--sf-text); }
.sf-rating-summary__count { font-size: 13px; color: var(--sf-muted); }
.sf-rating-bars { display: flex; flex-direction: column; gap: 6px; }
.sf-rating-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sf-muted); }
.sf-rating-bar__label { flex: 0 0 28px; font-weight: 600; color: var(--sf-text); }
.sf-rating-bar__track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: var(--sf-surface-2);
    overflow: hidden;
}
.sf-rating-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sf-gold), var(--sf-gold-soft));
}
.sf-rating-bar__count { flex: 0 0 24px; text-align: right; }

/* Review meta: verified badge + date */
.sf-review__meta { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.sf-review__date { font-size: 12px; color: var(--sf-muted); }
.sf-review__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1f7a4d;
    background: rgba(46, 160, 110, .12);
    border-radius: 999px;
    padding: 3px 9px;
}
.sf-review__verified i { font-size: 11px; }

/* Show more / less */
.sf-reviews-more {
    margin-top: 14px;
    background: transparent;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
}
.sf-reviews-more:hover { border-color: var(--sf-gold); color: var(--sf-gold-ink, var(--sf-gold)); }

/* Submit form */
.sf-review-form {
    margin-top: 26px;
    padding: 18px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sf-review-form__title { font-size: 16px; font-weight: 700; }
.sf-review-form__row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sf-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.sf-field__error { font-size: 12px; font-weight: 600; color: var(--sf-danger); }
.sf-review-form .sf-btn--gold { align-self: flex-start; }
/* .sf-field's shared `flex: 1 1 140px` is meant for horizontal filter rows; in
   this COLUMN flex form the 140px becomes a vertical flex-basis and inflates
   short fields (the rating row) with ~90px of empty space. Size to content. */
.sf-review-form .sf-field { flex: 0 0 auto; }

/* Star rating input (reversed source order for pure-CSS hover/checked fill) */
.sf-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.sf-rating-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-rating-input label { color: #c9ccd1; font-size: 24px; cursor: pointer; line-height: 1; transition: color .12s ease; }
.sf-rating-input label:hover,
.sf-rating-input label:hover ~ label,
.sf-rating-input input:checked ~ label { color: var(--sf-gold); }
.sf-rating-input input:focus-visible + label { outline: 2px solid var(--sf-gold); outline-offset: 2px; border-radius: 4px; }

@media (min-width: 600px) {
    .sf-rating-summary { grid-template-columns: 160px 1fr; gap: 28px; }
    .sf-review-form__row { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   CART (Phase 4.3b) — page, line items, summary + global toasts.
   Cart page lives inside .sf-main, so the hybrid-light tokens apply to it.
   ========================================================================== */

/* Hide the header badge when the cart is empty (no stray "0"). */
.sf-header__cart-count.is-empty,
.sf-header__wish-count.is-empty { display: none; }

/* ---- Toasts -------------------------------------------------------------- */
.sf-toast-host {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.sf-toast {
    padding: 12px 18px;
    border: 1px solid rgba(21, 21, 26, .12);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #15151a;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease;
}
.sf-toast.is-show { opacity: 1; transform: translateY(0); }
.sf-toast--success { border-color: rgba(var(--sf-gold-rgb), .45); box-shadow: 0 14px 36px rgba(var(--sf-gold-rgb), .16); }
.sf-toast--error { border-color: rgba(224, 83, 61, .38); box-shadow: 0 14px 36px rgba(224, 83, 61, .14); }

/* ---- Cart page ----------------------------------------------------------- */
.sf-cart { padding-block: 24px 56px; }
.sf-cart__heading { font-size: 24px; margin-bottom: 20px; color: var(--sf-text); }

.sf-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 64px 20px;
    text-align: center;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
/* Clean QuickPick yellow to match the header/bottom-nav cart icons — not the
   deepened --sf-gold-ink, which reads as a muddy brown-gold at this size. */
.sf-cart__empty i { font-size: 44px; color: var(--sf-gold); }
.sf-cart__empty-title { font-size: 18px; font-weight: 600; color: var(--sf-text); margin: 0; }

.sf-cart__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

.sf-cart__lines { display: flex; flex-direction: column; gap: 12px; }

.sf-cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
        "media info remove"
        "media qty total";
    align-items: center;
    gap: 8px 14px;
    padding: 14px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
}
.sf-cart-line__media {
    grid-area: media;
    width: 72px;
    height: 72px;
    border-radius: var(--sf-radius-sm);
    overflow: hidden;
    background: var(--sf-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-muted);
}
.sf-cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-line__info { grid-area: info; min-width: 0; }
.sf-cart-line__name { font-weight: 600; color: var(--sf-text); display: block; }
.sf-cart-line__name:hover { color: var(--sf-gold-ink, var(--sf-gold)); }
.sf-cart-line__variant { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; font-size: 12px; color: var(--sf-muted); }
.sf-cart-line__unit { display: block; margin-top: 4px; font-size: 13px; color: var(--sf-muted); }

.sf-cart-line__qty { grid-area: qty; display: inline-flex; align-items: center; gap: 4px; }
.sf-cart-line__qty form { margin: 0; }
.sf-cart-line__step {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--sf-border);
    background: var(--sf-surface);
    color: var(--sf-text);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.sf-cart-line__step:hover { border-color: var(--sf-gold); }
.sf-cart-line__count { min-width: 28px; text-align: center; font-weight: 600; color: var(--sf-text); }

.sf-cart-line__total { grid-area: total; justify-self: end; align-self: center; font-weight: 700; color: var(--sf-text); }

.sf-cart-line__remove { grid-area: remove; justify-self: end; margin: 0; }
.sf-cart-line__remove button {
    border: none;
    background: transparent;
    color: var(--sf-muted);
    cursor: pointer;
    font-size: 15px;
    padding: 6px;
}
.sf-cart-line__remove button:hover { color: var(--sf-danger); }

.sf-cart__summary {
    align-self: start;
    padding: 20px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
.sf-cart__summary-title { font-size: 17px; margin-bottom: 14px; color: var(--sf-text); }
.sf-cart__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--sf-text); }
.sf-cart__muted { color: var(--sf-muted); font-size: 13px; }
.sf-cart__row--total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--sf-border);
    font-weight: 700;
    font-size: 17px;
}
.sf-cart__checkout { width: 100%; justify-content: center; margin-top: 16px; }
.sf-cart__continue { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--sf-muted); }
.sf-cart__continue:hover { color: var(--sf-text); }

@media (min-width: 860px) {
    .sf-cart__grid { grid-template-columns: 1fr 340px; align-items: start; }
    .sf-cart-line {
        grid-template-columns: 84px 1fr auto auto auto;
        grid-template-areas: "media info qty total remove";
        gap: 18px;
    }
    .sf-cart-line__media { width: 84px; height: 84px; }
}

/* =============================================================================
   CHECKOUT (Phase 4.3c-a) — details form + COD + summary. Lives inside .sf-main,
   so the hybrid-light tokens apply. Mobile-first single column; two columns up.
   ========================================================================== */
.sf-auth,
.sf-account { padding-block: 28px 60px; }
.sf-auth { display: flex; justify-content: center; }
.sf-auth__panel,
.sf-account__panel {
    width: 100%;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-card);
    box-shadow: var(--sf-shadow-sm);
}
.sf-auth__panel {
    max-width: 520px;
    padding: 24px;
}
.sf-auth__eyebrow,
.sf-account__eyebrow {
    margin: 0 0 6px;
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sf-auth__title,
.sf-account__title {
    margin: 0;
    color: var(--sf-text);
    font-size: 26px;
    line-height: 1.15;
}
.sf-auth__copy {
    margin: 10px 0 20px;
    color: var(--sf-muted);
    font-size: 14px;
    line-height: 1.6;
}
.sf-auth__form { display: grid; gap: 14px; }
.sf-auth__remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sf-muted);
    font-size: 13px;
}
.sf-auth__remember input { accent-color: var(--sf-gold); }
.sf-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sf-auth__forgot {
    color: var(--sf-text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(var(--sf-gold-rgb), .42);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.sf-auth__forgot:hover,
.sf-auth__forgot:focus-visible {
    color: #111114;
    text-decoration-color: var(--sf-gold);
}
.sf-auth__notice {
    margin: 6px 0 4px;
    padding: 14px 16px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    color: var(--sf-text);
    font-size: 14px;
    line-height: 1.6;
}
.sf-auth__notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sf-auth__notice--error { border-color: #f1b8b8; background: #fff5f5; color: #8a1f1f; }
.sf-auth__support { margin: 12px 0 0; color: var(--sf-muted); font-size: 13px; }
.sf-auth__support a {
    color: var(--sf-text);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(var(--sf-gold-rgb), .42);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.sf-auth__support a:hover,
.sf-auth__support a:focus-visible {
    color: #111114;
    text-decoration-color: var(--sf-gold);
}
.sf-auth__submit { justify-content: center; margin-top: 4px; }
.sf-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: var(--sf-muted);
    font-size: 13px;
}
.sf-auth__divider::before,
.sf-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sf-border);
}
.sf-auth__google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    background: var(--sf-surface);
    color: var(--sf-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sf-auth__google:hover {
    border-color: var(--sf-gold);
    box-shadow: var(--sf-shadow-sm);
    transform: translateY(-1px);
}
.sf-auth__google-mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    color: #4285f4;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px var(--sf-border);
}
.sf-auth__switch {
    margin: 18px 0 0;
    color: var(--sf-muted);
    font-size: 14px;
    text-align: center;
}
.sf-auth__switch a {
    color: var(--sf-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(var(--sf-gold-rgb), .42);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.sf-auth__switch a:hover,
.sf-auth__switch a:focus-visible {
    color: #111114;
    text-decoration-color: var(--sf-gold);
}
.sf-auth__forgot:focus-visible,
.sf-auth__support a:focus-visible,
.sf-auth__switch a:focus-visible {
    outline: 2px solid rgba(var(--sf-gold-rgb), .55);
    outline-offset: 3px;
    border-radius: 4px;
}
.sf-account__track { color: var(--sf-gold-ink, var(--sf-gold)); font-weight: 700; }

.sf-account__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.sf-account__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.sf-account__panel { padding: 20px; }
.sf-account__panel--wide { margin-top: 16px; }
.sf-account__panel h2 {
    margin: 0 0 14px;
    color: var(--sf-text);
    font-size: 17px;
}
.sf-account__details {
    display: grid;
    gap: 12px;
    margin: 0;
}
.sf-account__details--grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sf-account__details--stack {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--sf-border);
}
.sf-account__details div { min-width: 0; }
.sf-account__details dt {
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.sf-account__details dd {
    margin: 3px 0 0;
    color: var(--sf-text);
    font-weight: 700;
    overflow-wrap: anywhere;
}
/* Compact 2-up grid keeps the Quick Links card premium and tight, not tall. */
.sf-account__links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-account__links a,
.sf-account__back,
.sf-account__logout,
.sf-account__track {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}
.sf-account__links a,
.sf-account__links a:link,
.sf-account__links a:visited,
.sf-account__links a:hover,
.sf-account__links a:focus,
.sf-account__links a:focus-visible,
.sf-account__links a:active { color: #111827; }
.sf-account__links a:hover,
.sf-account__links a:focus-visible {
    border-color: var(--sf-text);
}
.sf-account__logout {
    cursor: pointer;
    font-family: inherit;
}
.sf-account__section-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.sf-account__section-head h2 { margin: 0; }
/* "View all": a small, dark-ink pill button — aligned to the heading, never a
   floating gold/brown text link. */
.sf-account__viewall {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-btn-sm);
    background: var(--sf-surface);
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    pointer-events: auto;
    text-decoration: none;
}
.sf-account--dashboard .sf-account__section-head { z-index: 100; }
.sf-account--dashboard .sf-account__viewall { z-index: 101; }
.sf-account__viewall,
.sf-account__viewall:link,
.sf-account__viewall:visited,
.sf-account__viewall:hover,
.sf-account__viewall:focus,
.sf-account__viewall:focus-visible,
.sf-account__viewall:active { color: #111827; }
.sf-account__viewall:hover,
.sf-account__viewall:focus-visible {
    border-color: var(--sf-text);
}
/* Profile save: flat brand gold with bold near-black ink — matches the Track
   action button, never the gradient ghost style. */
.sf-account__save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 4px;
    padding: 0 22px;
    border: 1px solid #FEBD04;
    border-radius: var(--sf-radius-btn);
    background: #FEBD04;
    color: #1b1b18;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sf-account__save:hover,
.sf-account__save:focus-visible {
    border-color: #e2a800;
    background: #e2a800;
    box-shadow: 0 8px 18px rgba(254, 189, 4, .28);
}
/* Profile card action row: Save Changes + Change Password share the row as
   equal-width buttons so narrow phones (360px) keep both on one clean line. */
.sf-account__actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.sf-account__actions .sf-account__save {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
    padding: 0 12px;
    text-align: center;
    white-space: nowrap;
}
/* Narrow phones: slightly smaller label keeps "Change Password" on one line. */
@media (max-width: 430px) {
    .sf-account__actions { gap: 8px; }
    .sf-account__actions .sf-account__save { padding: 0 8px; font-size: 13px; }
}
.sf-account__save--ghost {
    border-color: var(--sf-border);
    background: #fff;
    color: var(--sf-text);
    text-decoration: none;
}
.sf-account__save--ghost:hover,
.sf-account__save--ghost:focus-visible {
    border-color: #FEBD04;
    background: #fff8e6;
    color: var(--sf-text);
    box-shadow: none;
}
.sf-account__profile-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sf-border);
    color: var(--sf-muted);
    font-size: 13px;
}
.sf-account__profile-note a { color: var(--sf-text); font-weight: 700; }
.sf-account__password-rules {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: var(--sf-muted);
    font-size: 13px;
}
.sf-account__empty {
    margin: 0;
    color: var(--sf-muted);
    font-size: 14px;
}
.sf-account__order-list { display: grid; gap: 8px; }
.sf-account__order-row,
.sf-account__table-row,
.sf-account__table-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr .9fr .8fr;
    gap: 10px;
    align-items: center;
}
.sf-account__order-row {
    padding: 12px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    color: var(--sf-text);
    font-size: 13px;
}
.sf-account__table { display: grid; gap: 8px; }
.sf-account__table-head {
    grid-template-columns: 1.2fr .9fr .8fr .7fr .95fr;
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.sf-account__table-row {
    grid-template-columns: 1.2fr .9fr .8fr .7fr .95fr;
    padding: 12px 0;
    border-top: 1px solid var(--sf-border);
    color: var(--sf-text);
    font-size: 13px;
}
.sf-account__items { display: grid; gap: 8px; margin: 18px 0; }
.sf-account__item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding-block: 10px;
    border-top: 1px solid var(--sf-border);
    color: var(--sf-text);
}
.sf-account__item small { color: var(--sf-muted); }
.sf-account__item { grid-template-columns: auto 1fr auto auto; }
.sf-account__item-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    color: var(--sf-muted);
}
.sf-account__item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-account__item-info { min-width: 0; overflow-wrap: anywhere; }
.sf-account__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.sf-account__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 32px;
    padding: 0 15px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-btn-sm);
    font-size: 12px;
    color: var(--sf-text);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sf-account__action:hover,
.sf-account__action:focus-visible {
    box-shadow: 0 8px 18px rgba(17, 24, 39, .10);
}
.sf-account__action:focus-visible {
    outline: 2px solid rgba(254, 189, 4, .42);
    outline-offset: 2px;
}
.sf-account__action.sf-account__action--secondary,
.sf-account__action.sf-account__action--secondary:link,
.sf-account__action.sf-account__action--secondary:visited,
.sf-account__action.sf-account__action--secondary:hover,
.sf-account__action.sf-account__action--secondary:focus,
.sf-account__action.sf-account__action--secondary:focus-visible,
.sf-account__action.sf-account__action--secondary:active,
.sf-account__action.sf-account__action--primary,
.sf-account__action.sf-account__action--primary:link,
.sf-account__action.sf-account__action--primary:visited,
.sf-account__action.sf-account__action--primary:hover,
.sf-account__action.sf-account__action--primary:focus,
.sf-account__action.sf-account__action--primary:focus-visible,
.sf-account__action.sf-account__action--primary:active {
    color: #111827;
    font-weight: 700;
}
.sf-account__action--secondary {
    background: #fff;
}
.sf-account__action--secondary:hover,
.sf-account__action--secondary:focus-visible {
    border-color: var(--sf-text);
    background: var(--sf-surface);
}
.sf-account__action--primary {
    border-color: #FEBD04;
    background: #FEBD04;
}
.sf-account__action--primary:hover,
.sf-account__action--primary:focus-visible {
    border-color: #e2a800;
    background: #e2a800;
}
.sf-account__tracking-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.sf-account__tracking-label {
    margin: 0 0 3px;
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.sf-account__status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--sf-surface);
    color: var(--sf-text);
    font-size: 12px;
    font-weight: 800;
}
.sf-account__status--success { background: rgba(40, 199, 111, .14); color: #1c8c4d; }
.sf-account__status--danger { background: rgba(224, 83, 61, .12); color: var(--sf-danger); }
.sf-account__timeline {
    display: grid;
    gap: 0;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.sf-account__timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    padding: 0 0 18px;
    color: var(--sf-text);
}
.sf-account__timeline-step:last-child { padding-bottom: 0; }
.sf-account__timeline-step::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--sf-border);
}
.sf-account__timeline-step:last-child::before { display: none; }
.sf-account__timeline-dot {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid var(--sf-border);
    border-radius: 50%;
    background: var(--sf-card);
}
.sf-account__timeline-step.is-done .sf-account__timeline-dot {
    border-color: var(--sf-success);
    background: var(--sf-success);
}
.sf-account__timeline-step.is-done .sf-account__timeline-dot::after {
    content: "\2713";
    display: block;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}
.sf-account__timeline-step.is-todo strong {
    color: var(--sf-muted);
    font-weight: 700;
}
.sf-account__timeline-step small {
    display: block;
    margin-top: 2px;
    color: var(--sf-muted);
    font-size: 12px;
}
.sf-account__tracking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--sf-border);
}
.sf-account__items--compact { margin: 0; }
.sf-account__item--compact {
    grid-template-columns: 1fr auto auto;
    padding-block: 8px;
}
.sf-account__tracking-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sf-border);
}

/* Order-number copy control (account order pages). */
.sf-account__title-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-account__order-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-account__order-no { overflow-wrap: anywhere; }
.sf-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    background: var(--sf-surface);
    color: var(--sf-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.sf-copy:hover { border-color: var(--sf-text); }
.sf-copy.is-copied { border-color: var(--sf-gold); color: var(--sf-gold-ink, var(--sf-gold)); }
.sf-copy__label { white-space: nowrap; }

@media (min-width: 760px) {
    .sf-account__grid { grid-template-columns: 1fr 1fr; }
    .sf-account__tracking-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .sf-account__header { align-items: flex-start; flex-direction: column; }
    .sf-account__order-row,
    .sf-account__table-row,
    .sf-account__table-head {
        grid-template-columns: 1fr;
    }
    .sf-account__table-head { display: none; }
    .sf-account__table { gap: 12px; }
    .sf-account__table-row {
        gap: 6px;
        padding: 12px;
        border: 1px solid var(--sf-border);
        border-radius: var(--sf-radius-sm);
        background: var(--sf-card);
    }
    .sf-account__table-row > span,
    .sf-account__table-row > strong {
        line-height: 1.35;
    }
    .sf-account__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        margin-top: 6px;
    }
    .sf-account__action {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }
    .sf-account__tracking-head { flex-direction: column; }
    /* Keep the thumbnail on the left and stack name/qty/total beside it. */
    .sf-account__item { grid-template-columns: auto 1fr; align-items: start; }
    .sf-account__item-thumb { grid-row: span 3; }
    .sf-account__item--compact { grid-template-columns: 1fr; }

    .sf-account--orders {
        padding-block-start: 18px;
    }
    .sf-account--orders .sf-account__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }
    .sf-account--orders .sf-account__eyebrow { margin-bottom: 3px; }
    .sf-account--orders .sf-account__title { font-size: 24px; }
    .sf-account--orders .sf-account__back {
        min-height: 34px;
        padding-inline: 12px;
        flex: 0 0 auto;
        font-size: 13px;
    }
    .sf-account__panel--orders {
        margin-top: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .sf-account--orders .sf-account__table {
        gap: 10px;
    }
    .sf-account--orders .sf-account__table-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "order order"
            "date status"
            "total total"
            "actions actions";
        gap: 5px 10px;
        padding: 11px;
        border: 1px solid var(--sf-border);
        border-radius: var(--sf-radius-sm);
        background: var(--sf-card);
        box-shadow: var(--sf-shadow-sm);
    }
    .sf-account--orders .sf-account__order-cell {
        grid-area: order;
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
    }
    .sf-account--orders .sf-account__order-no {
        min-width: 0;
        font-weight: 800;
        line-height: 1.25;
    }
    .sf-account--orders .sf-account__order-date {
        grid-area: date;
        color: var(--sf-muted);
        font-size: 12px;
        line-height: 1.25;
    }
    .sf-account--orders .sf-account__order-status {
        grid-area: status;
        justify-self: end;
        color: var(--sf-text);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
    }
    .sf-account--orders .sf-account__order-total {
        grid-area: total;
        margin-top: 2px;
        color: var(--sf-text);
        font-size: 14px;
        line-height: 1.25;
    }
    .sf-account--orders .sf-account__actions {
        grid-area: actions;
        margin-top: 5px;
    }
    .sf-account--orders .sf-copy {
        flex: 0 0 auto;
        padding-inline: 9px;
    }
}

.sf-checkout { padding-block: 24px 56px; }
.sf-checkout__heading { font-size: 24px; margin-bottom: 20px; color: var(--sf-text); }

.sf-checkout__grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.sf-checkout__main { display: grid; gap: 14px; min-width: 0; }

.sf-checkout__alert {
    padding: 12px 14px;
    border: 1px solid var(--sf-danger);
    border-radius: var(--sf-radius-sm);
    background: rgba(224, 83, 61, .08);
    color: var(--sf-danger);
    font-size: 13px;
    font-weight: 600;
}

.sf-checkout__panel {
    padding: 20px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-sm);
}
/* Section heading with a hairline divider — clearer separation, premium feel. */
.sf-checkout__panel-title {
    font-size: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-border);
    color: var(--sf-text);
}
.sf-checkout__panel .sf-field + .sf-field { margin-top: 12px; }
/* Checkout-only: readable English-first field labels (not the small uppercase
   style shared elsewhere) — 13px, semibold, dark, comfortable spacing. */
.sf-checkout .sf-field__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sf-text);
    margin-bottom: 6px;
}
/* Checkout-only input polish: taller comfortable fields, smooth focus/hover so
   the form reads as trustworthy. Shared .sf-input rules elsewhere are untouched.
   The theme's --sf-border (#e6e8eb) is near-invisible on white, so checkout fields
   use a stronger charcoal-neutral border while keeping the gold focus state. */
.sf-checkout .sf-input,
.sf-checkout .sf-select {
    height: 44px;
    border-color: #9aa1ab;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-checkout .sf-textarea {
    height: auto;
    min-height: 84px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}
.sf-checkout .sf-input:hover:not(:focus),
.sf-checkout .sf-select:hover:not(:focus) { border-color: #6b7280; }
/* Preserve the gold focus state (the scoped normal border above would otherwise
   win over the shared .sf-input:focus rule on source order). */
.sf-checkout .sf-input:focus,
.sf-checkout .sf-select:focus { border-color: var(--sf-gold); }
.sf-checkout .sf-input::placeholder { color: var(--sf-muted); }

.sf-checkout__zones { display: grid; gap: 10px; }
.sf-zone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-zone:hover { border-color: var(--sf-muted); }
.sf-zone:has(input:checked) { border-color: var(--sf-gold); box-shadow: 0 0 0 1px var(--sf-gold) inset; }
.sf-zone input { accent-color: var(--sf-gold); width: 18px; height: 18px; flex: 0 0 auto; }
.sf-zone__body { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sf-zone__name { font-weight: 600; color: var(--sf-text); }
.sf-zone__charge { font-weight: 700; color: var(--sf-text); white-space: nowrap; }

.sf-checkout__cod {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sf-gold);
    border-radius: var(--sf-radius-sm);
    background: rgba(var(--sf-gold-rgb), .06);
}
.sf-checkout__cod input { accent-color: var(--sf-gold); width: 18px; height: 18px; flex: 0 0 auto; }
.sf-checkout__cod strong { display: block; color: var(--sf-text); }
.sf-checkout__cod small { display: block; margin-top: 2px; color: var(--sf-muted); font-size: 12px; }

.sf-checkout__summary {
    align-self: start;
    padding: 22px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-sm);
}
.sf-checkout__summary-title {
    font-size: 17px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-border);
    color: var(--sf-text);
}
.sf-checkout__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px; text-align: center; }
/* The flex display above out-specifies [hidden]; restore hiding when toggled. */
.sf-checkout__empty[hidden] { display: none; }
.sf-checkout__empty-title { font-size: 15px; font-weight: 600; color: var(--sf-text); margin: 0; }

.sf-checkout__coupon { margin: 6px 0 12px; }
.sf-checkout__coupon-form { display: flex; gap: 8px; }
.sf-checkout__coupon-form .sf-input { flex: 1; min-width: 0; text-transform: uppercase; }
.sf-checkout__coupon-apply { flex: 0 0 auto; padding: 0 16px; background: var(--sf-surface-2); color: var(--sf-text); border: 1px solid var(--sf-border); }
.sf-checkout__coupon-apply:hover { border-color: var(--sf-gold); }
.sf-checkout__coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px dashed var(--sf-gold); border-radius: var(--sf-radius-sm); background: rgba(var(--sf-gold-rgb), .06); font-size: 13px; color: var(--sf-text); }
.sf-checkout__coupon-applied form { margin: 0; }
.sf-checkout__coupon-remove { border: 0; background: transparent; color: var(--sf-danger); font-weight: 600; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.sf-checkout__discount-row span:last-child { color: var(--sf-success, #16794a); font-weight: 600; }
/* .sf-cart__row's flex display out-specifies [hidden]; restore hiding when no coupon. */
.sf-checkout__discount-row[hidden] { display: none; }
.sf-checkout__items { list-style: none; margin: 0 0 12px; padding: 0; }
.sf-checkout__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sf-border);
    color: var(--sf-text);
}
.sf-checkout__item-media {
    width: 56px;
    height: 56px;
    border-radius: var(--sf-radius-sm);
    overflow: hidden;
    background: var(--sf-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-muted);
}
.sf-checkout__item-media img { width: 100%; height: 100%; object-fit: cover; }
.sf-checkout__item-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-checkout__item-name { font-weight: 600; color: var(--sf-text); }
.sf-checkout__item-name:hover { color: var(--sf-gold-ink, var(--sf-gold)); }
.sf-checkout__item-variant { font-size: 12px; color: var(--sf-muted); }
.sf-checkout__item-unit { font-size: 12px; color: var(--sf-muted); }

.sf-checkout__qty { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.sf-checkout__qty form { margin: 0; }
.sf-checkout__qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--sf-border);
    background: var(--sf-surface);
    color: var(--sf-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.sf-checkout__qty-btn:hover:not([disabled]) { border-color: var(--sf-gold); }
.sf-checkout__qty-btn[disabled] { opacity: .4; cursor: not-allowed; }
.sf-checkout__qty-num { min-width: 26px; text-align: center; font-weight: 600; color: var(--sf-text); }

.sf-checkout__item-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.sf-checkout__item-price { font-weight: 700; white-space: nowrap; color: var(--sf-text); }
.sf-checkout__item-remove {
    border: 0;
    background: transparent;
    color: var(--sf-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}
.sf-checkout__item-remove:hover { color: var(--sf-danger); }
.sf-checkout__submit { width: 100%; justify-content: center; margin-top: 16px; }
.sf-checkout__back { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--sf-muted); }
.sf-checkout__back:hover { color: var(--sf-text); }

@media (min-width: 860px) {
    .sf-checkout__grid { grid-template-columns: 1fr 360px; }
    /* Keep the order summary in view while filling in details on desktop. */
    .sf-checkout__summary { position: sticky; top: 20px; }
}

/* =============================================================================
   FLOATING SUPPORT (WhatsApp / Call) — mobile + desktop, bottom-right.
   Mobile bottom navigation is reserved for storefront phone layouts.
   ========================================================================== */
.sf-support {
    position: fixed;
    right: 16px;
    z-index: 121;
    bottom: calc(16px + env(safe-area-inset-bottom));
    pointer-events: none;
}

@media (min-width: 769px) {
    .sf-support {
        right: 24px;
        bottom: 24px;
    }
}

.sf-support__fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-soft));
    color: #1a1408;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
    pointer-events: auto;
}
.sf-support__fab:hover { transform: translateY(-1px); }

.sf-support__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 232px;
    padding: 8px;
    background: #16161a;
    border: 1px solid #2a2a31;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
.sf-support__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #f3f3f5;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.sf-support__link i { width: 18px; text-align: center; color: var(--sf-gold); }
.sf-support__link:hover { background: rgba(255, 255, 255, .06); }

/* Mobile bottom navigation: the nav's own styles live in bottom-nav.css (shared
   with the standalone thank-you/tracking pages). This block keeps only the
   storefront-layout concerns: the shared mobile vars, content clearance so pages
   scroll clear of the fixed nav, and the support FAB lift. */
@media (max-width: 767px) {
    :root {
        --sf-mobile-action-x: 10px;
        --sf-mobile-action-gap: 8px;
        --sf-bottom-nav-height: 62px;
        --sf-bottom-nav-offset: 8px;
        --sf-bottom-nav-clearance: calc(var(--sf-bottom-nav-height) + var(--sf-bottom-nav-offset) + 22px + env(safe-area-inset-bottom));
    }

    /* The fixed mobile bottom nav floats over the viewport, but the footer bar
       already carries the full nav clearance (see .sf-footer__bar above), and the
       footer sits below .sf-main on every page — so main does NOT need to repeat
       that ~92px clearance. It only stacked a large blank band between the page
       content and the footer. Trim it to a normal gap (the content block keeps its
       own bottom padding); home and PDP already used this smaller value. */
    .sf-main {
        padding-bottom: 12px;
    }
    .sf-page-home .sf-main {
        padding-bottom: 12px;
    }
    /* Product detail: the footer bar already clears the fixed bottom nav (see
       .sf-footer__bar), and the sticky buy bar auto-hides once the footer scrolls
       into view, so the full --sf-bottom-nav-clearance here only stacks a large
       white band before the footer. Trim it to a normal section gap; with the
       .sf-pdp block's own 24px this lands ~36px before the footer. */
    .sf-main:has(.sf-pdp) {
        padding-bottom: 12px;
    }

    .sf-support {
        bottom: calc(var(--sf-bottom-nav-height) + var(--sf-bottom-nav-offset) + 14px + env(safe-area-inset-bottom));
    }
}

/* Support chat widget overrides: dark/gold panel, message bubbles and mobile
   sheet positioning above the bottom navigation. */
.sf-support__panel {
    z-index: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: 390px;
    max-width: calc(100vw - 28px);
    max-height: min(64vh, 580px);
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(254, 189, 4, .24);
    border-radius: 16px;
    background: #111114;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
    font-family: "Noto Sans Bengali", "Hind Siliguri", "SolaimanLipi", "Nirmala UI", "Vrinda", system-ui, sans-serif;
    font-feature-settings: normal;
    letter-spacing: 0;
    text-rendering: auto;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    pointer-events: auto;
}

.sf-support__panel[hidden] { display: none !important; }

/* Form controls don't inherit font by default; keep chat input/buttons on the
   panel's Bengali stack. Icon glyphs are unaffected — Font Awesome sets its own
   font-family on the <i> elements. */
.sf-support__panel input,
.sf-support__panel button {
    font-family: inherit;
}

.sf-support__fab { z-index: 3; }
.sf-support.is-open .sf-support__fab {
    opacity: 0;
    pointer-events: none;
    transform: scale(.92);
}

.sf-support__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sf-support__eyebrow {
    margin: 0 0 2px;
    color: var(--sf-gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sf-support__title {
    margin: 0;
    color: #fff;
    /* Inherit the panel's Bengali stack (the global h1-h3 rule would put Anek
       Bangla first) and cap at 600 — 700 renders Bengali conjuncts too heavy. */
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.sf-support__close {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.sf-support__messages {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 150px;
    max-height: min(32vh, 300px);
    overflow-y: auto;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(254, 189, 4, .08), rgba(254, 189, 4, 0) 120px),
        #111114;
}

.sf-chat-message {
    display: flex;
    min-width: 0;
}

.sf-chat-message--user { justify-content: flex-end; }
.sf-chat-message--bot { justify-content: flex-start; }

.sf-chat-message__bubble {
    max-width: 88%;
    border-radius: 15px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    word-break: normal;
    /* break-word (not anywhere): long URLs/numbers still wrap, but Bengali
       words never split mid-word for intrinsic-sizing reasons. */
    overflow-wrap: break-word;
    text-rendering: auto;
    white-space: normal;
}

.sf-chat-message--user .sf-chat-message__bubble {
    border-bottom-right-radius: 5px;
    background: var(--sf-gold);
    color: #15151a;
}

.sf-chat-message--bot .sf-chat-message__bubble {
    border: 1px solid rgba(255, 255, 255, .1);
    border-bottom-left-radius: 5px;
    background: #202026;
    color: rgba(255, 255, 255, .9);
}

.sf-chat-message--typing .sf-chat-message__bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 54px;
}

.sf-chat-message--typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sf-gold);
    animation: sf-chat-dot 1s ease-in-out infinite;
}

.sf-chat-message--typing span:nth-child(2) { animation-delay: .14s; }
.sf-chat-message--typing span:nth-child(3) { animation-delay: .28s; }

@keyframes sf-chat-dot {
    0%, 80%, 100% { opacity: .35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.sf-support__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #151519;
}

.sf-support__input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: #0d0d10;
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    outline: none;
    padding: 0 10px;
    letter-spacing: 0;
    text-transform: none;
    font-feature-settings: normal;
    text-rendering: auto;
    word-break: normal;
}

.sf-support__input:focus {
    border-color: rgba(254, 189, 4, .72);
    box-shadow: 0 0 0 3px rgba(254, 189, 4, .14);
}

.sf-support__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--sf-gold);
    color: #15151a;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    pointer-events: auto;
}

.sf-support__form.is-sending .sf-support__send { opacity: .7; cursor: progress; }

.sf-support__contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 8px 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #111114;
}

.sf-support__contact-label {
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sf-support__contact-row .sf-support__link {
    display: inline-flex;
    gap: 6px;
    min-height: 28px;
    max-height: 36px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
}

.sf-support__contact-row .sf-support__link i {
    width: auto;
    color: var(--sf-gold);
}

@media (max-width: 767px) {
    .sf-support { right: 10px; }

    .sf-support__panel {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(var(--sf-bottom-nav-height) + var(--sf-bottom-nav-offset, 8px) + 12px + env(safe-area-inset-bottom));
        width: min(90vw, 360px);
        max-width: none;
        max-height: min(48vh, calc(100vh - var(--sf-bottom-nav-height) - var(--sf-bottom-nav-offset, 8px) - 48px - env(safe-area-inset-bottom)));
        border-radius: 16px;
        transform: translateX(-50%);
    }

    .sf-support__messages {
        min-height: 86px;
        max-height: min(22vh, 190px);
    }

    .sf-support__contact-label { display: none; }

    .sf-chat-message__bubble {
        max-width: 88%;
        font-size: 13px;
    }
}

/* Static trust pages: About / Contact / FAQ / Privacy / Returns / Terms.
   Lightweight, theme-driven typography; reuses storefront vars. */
.sf-doc { max-width: 820px; margin: 0 auto; padding: 28px 0 32px; --sf-doc-accent: #6b5200; }
.sf-doc__head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--sf-border); }
.sf-doc__title { font-size: clamp(24px, 4vw, 32px); line-height: 1.2; margin: 0 0 8px; color: var(--sf-text); }
.sf-doc__lead { margin: 0; color: var(--sf-muted); font-size: 15px; line-height: 1.6; }
.sf-doc__body { color: var(--sf-text); font-size: 15px; line-height: 1.75; }
.sf-doc__body h2 { font-size: 18px; margin: 26px 0 8px; color: var(--sf-text); }
.sf-doc__body p { margin: 0 0 14px; }
.sf-doc__body ul { margin: 0 0 16px; padding-left: 20px; }
.sf-doc__body li { margin-bottom: 7px; }
/* Inline links read as dark ink (fully legible on the light page) with a deep
   gold underline for brand affordance — bright --sf-gold is a fill, never text. */
.sf-doc__body a {
    color: var(--sf-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--sf-doc-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.sf-doc__body a:hover { text-decoration-thickness: 2px; }
.sf-doc__contact { list-style: none; padding: 0; display: grid; gap: 12px; margin: 4px 0 18px; }
.sf-doc__contact li { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
/* Icon is a deep-gold accent that stays clearly readable on white (not a weak
   bright-yellow fill). */
.sf-doc__contact i { width: 18px; text-align: center; color: var(--sf-doc-accent); margin-top: 3px; flex-shrink: 0; }
/* Phone / WhatsApp / email: dark ink for a professional, readable CTA; long
   values wrap instead of overflowing. */
.sf-doc__contact a { color: var(--sf-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.sf-doc__contact a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sf-doc__bn { color: var(--sf-muted); font-size: 13.5px; }

@media (max-width: 640px) {
    /* A touch more breathing room so text never sits against the screen edge. */
    .sf-doc { padding: 20px 10px 40px; }
    .sf-doc__body { line-height: 1.7; }
    .sf-doc__contact { gap: 14px; }
}

/* Delivery charge note: shown on the product detail and cart pages so buyers
   see delivery cost before checkout. Settings-driven; display only. */
.sf-delivery-note { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); background: var(--sf-surface); }
.sf-delivery-note__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--sf-text); }
.sf-delivery-note__title i { color: var(--sf-gold); }
.sf-delivery-note__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sf-delivery-note__list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--sf-text); }
.sf-delivery-note__list li span:last-child { font-weight: 600; }
.sf-delivery-note__free { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #16794a; }
.sf-delivery-note__free i { color: var(--sf-gold); }
.sf-delivery-note__hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--sf-muted); }

/* Branded fallback hero: shown only when no homepage_hero banner exists, so the
   top never renders empty. Fixed dark+gold panel (theme-independent contrast). */
.sf-hero--fallback {
    border-bottom: 1px solid var(--sf-border);
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(var(--sf-gold-rgb), .16), transparent 58%),
        linear-gradient(135deg, #131318, #0d0d0f);
}
.sf-hero__fallback {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 38px 16px 42px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}
.sf-hero__eyebrow {
    margin: 0;
    color: var(--sf-gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sf-hero__fallback-title {
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 6vw, 46px);
    line-height: 1.12;
    letter-spacing: -.01em;
}
.sf-hero__fallback-text {
    margin: 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, .74);
    font-size: clamp(14px, 2.5vw, 17px);
    line-height: 1.55;
}
.sf-hero__fallback-bn { margin: 0; color: rgba(255, 255, 255, .55); font-size: 13px; }
.sf-hero__fallback .sf-btn { margin-top: 6px; }

/* ---- Sticky buy bar (PDP) ------------------------------------------------ */
/* Shown on both mobile and desktop once the main buy actions scroll out of view.
   Reuses the main buttons' behaviour via shared data attributes (no extra JS).
   The bottom-right "Add to Cart" label is desktop-only; mobile stays icon-only. */
.sf-buybar { display: none; }
.sf-buybar__add-label { display: none; }
/* 767.98px (not 767px) so the mobile range butts up against the desktop
   min-width:768px with no reachable gap. On fractional-pixel viewports — common
   with Windows DPI scaling and browser zoom — a plain max-width:767px leaves a
   767–768px dead zone where neither query matches and the bar vanishes. */
@media (max-width: 767.98px) {
    .sf-buybar {
        position: fixed;
        left: var(--sf-mobile-action-x);
        right: var(--sf-mobile-action-x);
        bottom: calc(var(--sf-bottom-nav-height) + var(--sf-bottom-nav-offset, 8px) + var(--sf-mobile-action-gap) + env(safe-area-inset-bottom));
        z-index: 120;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 9px 10px;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid var(--sf-border);
        border-radius: 16px;
        box-shadow: 0 -6px 18px rgba(17, 24, 39, .08);
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
        transition: opacity .18s ease, transform .18s ease;
    }
    .sf-buybar.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .sf-buybar__price { font-size: 16px; font-weight: 800; color: var(--sf-text); white-space: nowrap; }
    .sf-buybar__add {
        flex: 0 0 auto;
        justify-content: center;
        min-width: 46px;
        padding: 11px 13px;
        background: transparent;
        color: var(--sf-text);
        border: 1px solid var(--sf-text);
    }
    .sf-buybar__buy { flex: 1 1 auto; justify-content: center; min-width: 0; padding-inline: 14px; }

    /* Just a normal section gap before the footer. The bottom-nav clearance is
       already provided by .sf-main (--sf-bottom-nav-clearance), and the buy bar
       auto-hides once the footer scrolls into view, so the PDP does NOT need to
       reserve the buy-bar/nav height a second time here. The previous
       calc(nav-height + 88px) ≈ 150px stacked on top of the .sf-main clearance and
       rendered as a large blank band after the review form / Related Products. */
    .sf-pdp { padding-bottom: 24px; }

    /* Lift the floating support button above the buy bar when one is present. */
    body:has(.sf-buybar) .sf-support { bottom: calc(var(--sf-bottom-nav-height) + var(--sf-bottom-nav-offset, 8px) + 82px + env(safe-area-inset-bottom)); }
}

/* Desktop: a slim, premium centred bar — Order Now left, Add to Cart right. It
   only appears once the main action row scrolls out and hides again at the footer
   (JS-driven .is-visible), so it never covers footer/content. */
@media (min-width: 768px) {
    .sf-buybar {
        position: fixed;
        left: 50%;
        bottom: 20px;
        z-index: 60;
        display: flex;
        align-items: center;
        gap: 14px;
        width: min(640px, calc(100% - 48px));
        padding: 9px 12px 9px 18px;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid var(--sf-border);
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(17, 24, 39, .14);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 14px);
        transition: opacity .18s ease, transform .18s ease;
    }
    .sf-buybar.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
    .sf-buybar__price { margin-right: auto; font-size: 17px; font-weight: 800; color: var(--sf-text); white-space: nowrap; }
    .sf-buybar__buy { flex: 0 0 auto; justify-content: center; padding: 10px 22px; }
    .sf-buybar__add {
        flex: 0 0 auto;
        justify-content: center;
        gap: 8px;
        padding: 10px 20px;
        background: transparent;
        color: var(--sf-text);
        border: 1px solid var(--sf-text);
    }
    .sf-buybar__add-label { display: inline; }

    /* Lift the floating support button above the centred buy bar: at narrower
       desktop widths (~768-800px) the 640px bar reaches under the FAB. */
    body:has(.sf-buybar) .sf-support { bottom: 96px; }
}