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

:root {
    --sf-black: #000000;
    --sf-bg: var(--sf-black);
    --sf-surface: var(--sf-black);
    --sf-surface-2: var(--sf-black);
    --sf-border: var(--sf-black);
    --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-space-1: 4px;
    --sf-space-2: 8px;
    --sf-space-3: 12px;
    --sf-space-4: 16px;
    --sf-space-5: 20px;
    --sf-space-6: 24px;
    --sf-space-7: 32px;
    --sf-space-8: 40px;
    --sf-gutter: 16px;
    --sf-component-gap: clamp(8px, 1vw, 12px);
    --sf-section-gap: clamp(20px, 2.2vw, 32px);
    --sf-section-gap-major: clamp(24px, 3vw, 40px);
    --sf-page-start: clamp(20px, 2vw, 28px);
    --sf-page-end: clamp(32px, 4vw, 56px);
    --sf-fixed-ui-gap: 14px;
    --sf-header-height: 64px;
    --sf-bottom-nav-height: var(--sf-header-height);
    --sf-max: 1360px;
    --sf-font: 'Noto Sans Bengali', 'Nirmala UI', Vrinda, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --sf-currency-font: var(--sf-font);
}

/* Customer experience reviews: isolated from product cards and product ratings. */
.sf-experience-dashboard,
.sf-experience-editor,
.sf-experience-detail { color: #202124; }
.sf-experience-dashboard .sf-account__section-head { align-items: flex-start; }
.sf-experience-dashboard .sf-account__section-head p { margin: 4px 0 0; color: #5b6068; }
.sf-member-discount-card h3 { margin: 0 0 6px; color: #191b1f; font-size: 17px; }
.sf-member-discount-card > p { margin: 0 0 14px; color: #5b6068; line-height: 1.5; }
.sf-member-discount-card .sf-account__action { margin-top: 14px; width: fit-content; }
.sf-checkout__discount-note { margin: 5px 0 0; color: #4d535b; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.sf-experience-dashboard__preview,
.sf-experience-detail__feedback { margin: 10px 0; line-height: 1.65; overflow-wrap: anywhere; }
.sf-experience-detail__meta { color: #5b6068; font-size: .9rem; }
.sf-experience-stars { color: #e5a900; letter-spacing: 2px; font-size: 1.05rem; }
.sf-experience-status { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: #f1f2f4; color: #34373c; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.sf-experience-status--published { background: #e8f5ec; color: #246338; }
.sf-experience-status--rejected { background: #fcebea; color: #8c302c; }
.sf-experience-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.sf-experience-actions a:not(.sf-account__track) { color: #34373c; font-weight: 750; }
.sf-experience-compose { margin-top: 12px; }
.sf-experience-compose > summary { display: inline-flex; cursor: pointer; list-style: none; }
.sf-experience-compose > summary::-webkit-details-marker { display: none; }
.sf-experience-form { display: grid; gap: 15px; margin-top: 16px; max-width: 680px; }
.sf-experience-form__field { display: grid; min-width: 0; gap: 7px; margin: 0; padding: 0; border: 0; }
.sf-experience-form__label { color: #25272b; font-size: .88rem; font-weight: 800; }
.sf-experience-form textarea { width: 100%; min-width: 0; resize: vertical; border: 1px solid #c9ccd1; border-radius: 9px; padding: 11px 12px; color: #202124; background: #fff; font: inherit; line-height: 1.5; }
.sf-experience-stars-input { display: flex; width: max-content; justify-content: flex-start; gap: 3px; }
.sf-experience-stars-input label { cursor: pointer; }
.sf-experience-stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.sf-experience-stars-input span[aria-hidden] { color: #c5c7ca; font-size: 1.75rem; line-height: 1; }
.sf-experience-stars-input input:checked ~ span[aria-hidden],
.sf-experience-stars-input label:has(input:checked) span[aria-hidden],
.sf-experience-stars-input label:has(~ label input:checked) span[aria-hidden] { color: #e5a900; }
.sf-experience-stars-input input:focus-visible + span { outline: 2px solid #24262a; outline-offset: 3px; }
.sf-experience-consent,
.sf-experience-choice { display: flex; align-items: flex-start; gap: 8px; color: #34373c; font-size: .9rem; }
.sf-experience-consent input,
.sf-experience-choice input { margin-top: 3px; accent-color: #dca800; }
.sf-experience-preference { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e1e2e5; max-width: 520px; }
.sf-experience-preference h3,
.sf-experience-history h3 { margin: 0; font-size: .95rem; }
.sf-experience-history { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e1e2e5; }
.sf-experience-history > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #eceef0; color: #3f4349; font-size: .86rem; }
.sf-experience-history time { color: #686d75; text-align: right; }

.sf-customer-experiences { margin-top: 34px; margin-bottom: 42px; }
.sf-customer-experiences__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.sf-customer-experiences__head h2 { margin: 0; color: #202124; font-size: clamp(1.3rem, 2vw, 1.75rem); }
.sf-customer-experiences__head p { margin: 5px 0 0; color: #60656d; }
.sf-customer-experiences__head > a,
.sf-experience-card__more { color: #32353a; font-weight: 800; white-space: nowrap; }
.sf-customer-experiences__rail,
.sf-experiences-page__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sf-experience-card { display: flex; min-width: 0; min-height: 210px; flex-direction: column; padding: 17px; border: 1px solid #dedfe2; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(28, 31, 35, .05); color: #25272b; }
.sf-experience-card__feedback { display: -webkit-box; overflow: hidden; margin: 10px 0 6px; line-height: 1.55; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.sf-experience-card__more { margin-bottom: 8px; font-size: .82rem; }
.sf-experience-card__response { margin: 8px 0; padding: 9px 10px; border-left: 3px solid #d6a900; background: #f7f7f5; font-size: .82rem; }
.sf-experience-card__response p { margin: 3px 0 0; }
.sf-experience-card footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eceef0; }
.sf-experience-card footer > div { display: grid; gap: 5px; min-width: 0; }
.sf-experience-card footer strong { overflow-wrap: anywhere; }
.sf-experience-card footer time { color: #777c83; font-size: .78rem; white-space: nowrap; }
.sf-experience-member { width: max-content; max-width: 100%; padding: 3px 7px; border-radius: 999px; background: #f2e8b8; color: #4a421b; font-size: .68rem; font-weight: 800; }
.sf-experiences-page { padding-block: var(--sf-page-start) var(--sf-page-end); }
.sf-experiences-page__header { max-width: 720px; }
.sf-experiences-page__header h1 { margin: 3px 0 7px; color: #202124; }
.sf-experiences-page__header > p { color: #5e636b; }
.sf-experiences-page__summary { display: flex; align-items: baseline; gap: 9px; margin-top: 13px; }
.sf-experiences-page__summary strong { font-size: 1.55rem; }
.sf-experiences-page__summary span { color: #646971; }
.sf-experiences-filter { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; margin: 24px 0 18px; }
.sf-experiences-filter label { font-weight: 800; }
.sf-experiences-filter select,
.sf-experiences-filter button { min-height: 40px; border: 1px solid #bfc2c6; border-radius: 8px; padding: 8px 11px; background: #fff; color: #24262a; font: inherit; }
.sf-experiences-filter button { border-color: #222428; background: #222428; color: #fff; font-weight: 800; }

@media (max-width: 700px) {
    .sf-customer-experiences { margin-top: 26px; margin-bottom: 32px; }
    .sf-customer-experiences__head { align-items: flex-start; }
    .sf-customer-experiences__head p { font-size: .88rem; }
    .sf-customer-experiences__rail { display: flex; width: calc(100% + 16px); gap: 11px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding: 2px 16px 10px 0; }
    .sf-customer-experiences__rail .sf-experience-card { flex: 0 0 min(84vw, 320px); scroll-snap-align: start; }
    .sf-experiences-page__grid { grid-template-columns: 1fr; }
    .sf-experience-card { min-height: 190px; }
    .sf-experience-dashboard .sf-account__section-head { gap: 10px; }
    .sf-experience-history > div { flex-direction: column; gap: 3px; }
    .sf-experience-history time { text-align: left; }
}

* { 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;
    overflow-x: clip;
}

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

i[class^="fa-"],
i[class*=" fa-"] {
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

/* Screen-reader-only text: keeps section labels in the heading outline without
   showing them, so listing pages never skip from the page h1 to a footer h3. */
.sf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

@media (min-width: 641px) {
    :root { --sf-gutter: 20px; }
}
@media (min-width: 900px) {
    :root { --sf-gutter: 24px; }
}
@media (min-width: 1280px) {
    :root { --sf-gutter: 32px; }
}

/* Category / brand editorial copy. Scoped to listing pages so product cards,
   filters and grid density keep their existing presentation. */
.sf-listing__intro {
    max-width: 72ch;
    margin: 8px 0 0;
    color: #d8d8df;
    font-size: 14.5px;
    line-height: 1.7;
}

.sf-listing-content {
    position: relative;
    margin-top: 26px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-top: 3px solid rgba(var(--sf-gold-rgb), .72);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)),
        #0b0b0d;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

.sf-listing-content h2 {
    color: #ffffff;
    font-size: clamp(20px, 5.2vw, 28px);
    font-weight: 750;
    line-height: 1.18;
}

.sf-listing-content__body {
    display: grid;
    gap: 13px;
    max-width: 82ch;
    margin-top: 13px;
    color: #dcdee5;
    font-size: 14.5px;
    line-height: 1.78;
}

.sf-listing-content__body > * {
    margin-block: 0;
}

.sf-listing-content__body p {
    margin: 0;
}

.sf-listing-content__body h3,
.sf-listing-content__body h4 {
    margin-top: 8px;
    color: #ffffff;
    line-height: 1.25;
}

.sf-listing-content__body h3 { font-size: 18px; }
.sf-listing-content__body h4 { font-size: 16px; }

.sf-listing-content__body ul,
.sf-listing-content__body ol {
    display: grid;
    gap: 8px;
    padding-left: 1.25rem;
}

.sf-listing-content__body li::marker {
    color: var(--sf-gold);
}

.sf-listing-content__body a {
    color: var(--sf-gold-soft);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sf-listing-content__body strong,
.sf-listing-content__body b {
    color: #ffffff;
    font-weight: 750;
}

@media (min-width: 641px) {
    .sf-listing__intro {
        margin-top: 10px;
        font-size: 15.5px;
    }

    .sf-listing-content {
        margin-top: 34px;
        padding: 26px 28px;
        border-radius: 18px;
    }

    .sf-listing-content__body {
        gap: 15px;
        margin-top: 16px;
        font-size: 15.5px;
    }
}

/* 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: var(--sf-black);
    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;
    border: 0;
    background: var(--sf-black);
    backdrop-filter: none;
}
.sf-header__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--sf-header-height);
}
.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);
}
.sf-header__categories { display: none; }
.sf-header__category-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sf-radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, .78);
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.sf-header__category-trigger i {
    color: var(--sf-gold);
    font-size: 10px;
    transition: transform .18s ease;
}
.sf-header__category-trigger:hover,
.sf-header__category-trigger:focus-visible,
.sf-header__categories.is-open .sf-header__category-trigger {
    background: rgba(255, 255, 255, .07);
    color: var(--sf-gold);
}
.sf-header__category-trigger:focus-visible {
    outline: 2px solid rgba(var(--sf-gold-rgb), .7);
    outline-offset: 2px;
}
.sf-header__categories.is-open .sf-header__category-trigger i,
.sf-header__categories:hover .sf-header__category-trigger i,
.sf-header__categories:focus-within .sf-header__category-trigger i {
    transform: rotate(180deg);
}
.sf-header__categories::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
}
.sf-header__category-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 70;
    display: none;
    width: max-content;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 32px));
    max-height: min(460px, calc(100vh - 96px));
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(17, 24, 39, .12);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
    color: #111827;
}
.sf-header__category-menu [hidden] { display: none !important; }
.sf-header__categories:hover .sf-header__category-menu,
.sf-header__categories:focus-within .sf-header__category-menu,
.sf-header__categories.is-open .sf-header__category-menu {
    display: grid;
    gap: 2px;
}
.sf-header__category-group {
    display: grid;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
}
.sf-header__category-group:hover,
.sf-header__category-group:focus-within { background: #f7f8fa; }
.sf-header__category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.sf-header__category-menu a {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #111827;
}
.sf-header__category-menu a:hover,
.sf-header__category-menu a:focus-visible {
    background: transparent;
    color: var(--sf-gold-ink, var(--sf-gold));
}
.sf-header__category-menu .sf-header__category-parent {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    color: #111827;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.sf-header__category-child-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #475467;
    font-size: 9px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.sf-header__category-child-toggle:hover,
.sf-header__category-child-toggle:focus-visible,
.sf-header__category-group.is-open .sf-header__category-child-toggle {
    border-color: rgba(var(--sf-gold-rgb), .42);
    background: rgba(var(--sf-gold-rgb), .1);
    color: var(--sf-gold-ink, var(--sf-gold));
}
.sf-header__category-child-toggle:focus-visible {
    outline: 2px solid rgba(var(--sf-gold-rgb), .5);
    outline-offset: 2px;
}
.sf-header__category-child-toggle i { transition: transform .18s ease; }
.sf-header__category-group.is-open .sf-header__category-child-toggle i { transform: rotate(180deg); }
.sf-header__category-children {
    display: grid;
    gap: 3px;
    max-width: 260px;
    padding: 1px 30px 3px 0;
}
.sf-header__category-menu .sf-header__category-children a {
    color: #475467;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}
.sf-header__category-menu .sf-header__category-parent:focus-visible,
.sf-header__category-menu .sf-header__category-children a:focus-visible {
    outline: 2px solid rgba(var(--sf-gold-rgb), .5);
    outline-offset: 2px;
}

/* Shared premium search field: solid white, full-pill, and compact enough for
   the mobile subhead. Desktop slims the same control inside the 64px header. */
.sf-store-search {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
    overflow: hidden;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sf-store-search:hover {
    border-color: #b8c0cc;
    box-shadow: 0 3px 10px rgba(16, 24, 40, .08);
}
.sf-store-search:focus-within {
    border-color: #8a94a3;
    box-shadow: 0 0 0 2px rgba(16, 24, 40, .08), 0 3px 10px rgba(16, 24, 40, .08);
}
.sf-store-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    color: #000;
    padding: 0 8px 0 16px;
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    outline: none;
}
.sf-store-search input::placeholder { color: #667085; font-size: 14px; opacity: 1; }
.sf-store-search button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    border-radius: 9999px;
    background: transparent;
    border: 0;
    color: #000;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
.sf-store-search button i {
    color: inherit;
    filter: drop-shadow(0 0 0 rgba(var(--sf-gold-rgb), 0));
    transition: filter .2s ease;
}
.sf-store-search button:hover,
.sf-store-search button:focus-visible {
    background: rgba(var(--sf-gold-rgb), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--sf-gold-rgb), .26), 0 0 0 3px rgba(var(--sf-gold-rgb), .1);
    color: #111827;
}
.sf-store-search button:hover i,
.sf-store-search button:focus-visible i {
    filter: drop-shadow(0 0 5px rgba(var(--sf-gold-rgb), .48));
}
.sf-store-search button:active { transform: scale(.96); }
.sf-store-search button:focus-visible { outline: 2px solid rgba(var(--sf-gold-rgb), .72); outline-offset: 2px; }
.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;
}
/* Back the homepage's adjacent white subhead/main layers with white as well.
   Otherwise Chrome can expose the dark body through their subpixel boundary as
   a one-pixel separator, even though both boxes compute to border/shadow none. */
body.sf-page-home { background: #fff; }
.sf-subhead__inner { padding-block: 8px 6px; }

/* Mobile storefront drawer. Tablet/desktop keep the black header navigation. */
body.sf-nav-lock { overflow: hidden; }
.sf-nav { background: #fff; }
.sf-nav.is-open::before {
    content: '';
    position: fixed;
    top: var(--sf-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 121;
    background: rgba(15, 23, 42, .28);
}
.sf-nav__inner {
    display: grid;
    gap: 2px;
}
.sf-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    width: 100%;
    min-height: 40px;
    white-space: nowrap;
    padding: 0 11px;
    font-size: 13.75px;
    font-weight: 650;
    color: #111827;
    border: 1px solid transparent;
    border-radius: 9px;
    line-height: 1.25;
    text-align: left;
    background: transparent;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sf-nav__link:hover,
.sf-nav__link:active {
    background: #f8fafc;
    color: #111827;
}
.sf-nav__link--category {
    color: #111827;
    font-weight: 750;
    border-color: rgba(17, 24, 39, .12);
    background: rgba(var(--sf-gold-rgb), .08);
}
.sf-nav__category-root {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.sf-nav__link--category {
    cursor: pointer;
}
.sf-nav__category-root.is-open .sf-nav__link--category,
.sf-nav__link--category[aria-expanded="true"],
.sf-nav__link--category:hover,
.sf-nav__link--category:active {
    border-color: rgba(17, 24, 39, .2);
    background: rgba(var(--sf-gold-rgb), .14);
}
.sf-nav__link--category i {
    color: #8a6419;
    font-size: 10px;
    transition: transform .18s ease;
}
.sf-nav__category-root.is-open .sf-nav__link--category i {
    transform: translateX(1px);
}
.sf-nav__link:focus-visible {
    outline: 2px solid rgba(17, 24, 39, .72);
    outline-offset: 1px;
}
.sf-nav__categories {
    position: fixed;
    top: var(--sf-header-height);
    left: 0;
    right: 0;
    z-index: 122;
    max-height: min(72vh, calc(100dvh - var(--sf-header-height) - 14px));
    overflow-y: auto;
    padding: 10px 0 12px;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .18);
    background: #fff;
    overscroll-behavior: contain;
}
.sf-nav__categories[hidden],
.sf-nav__level[hidden] {
    display: none !important;
}
.sf-nav__categories-inner {
    display: grid;
    gap: 7px;
}
.sf-nav__level {
    display: grid;
    gap: 7px;
}
.sf-nav__categories-head {
    position: sticky;
    top: -10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 0 0 5px;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    background: #fff;
}
.sf-nav__categories-head > span,
.sf-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sf-nav__categories-head > span::before,
.sf-nav__back::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #111827;
}
.sf-nav__back {
    min-height: 30px;
    padding: 0 8px 0 0;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.sf-nav__back::before {
    display: none;
}
.sf-nav__back i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--sf-gold-rgb), .12);
    color: #111827;
    font-size: 10px;
}
.sf-nav__categories-head > button:not(.sf-nav__back) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid #e6e9ee;
    border-radius: 999px;
    background: #f8fafc;
    color: #111827;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sf-nav__categories-head > button:not(.sf-nav__back):hover,
.sf-nav__categories-head > button:not(.sf-nav__back):active,
.sf-nav__back:hover,
.sf-nav__back:active {
    border-color: rgba(17, 24, 39, .16);
    background: #f3f4f6;
    color: #111827;
}
.sf-nav__categories-head > button:focus-visible,
.sf-nav__view-all:focus-visible {
    outline: 2px solid rgba(17, 24, 39, .72);
    outline-offset: 1px;
}
.sf-nav__parent-list {
    display: grid;
    gap: 5px;
    padding-top: 2px;
}
.sf-nav__parent-group {
    display: grid;
    gap: 3px;
    border-radius: 9px;
    background: transparent;
    transition: background-color .16s ease;
}
.sf-nav__parent-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.sf-nav__parent-link {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    padding: 0 11px;
    color: #111827;
    font-size: 13.75px;
    font-weight: 750;
    line-height: 1.35;
    border-radius: 8px;
    transition: background-color .16s ease, color .16s ease;
}
.sf-nav__parent-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-right: 2px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #344054;
    font-size: 10px;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.sf-nav__parent-toggle:hover,
.sf-nav__parent-toggle:focus-visible {
    background: #f3f4f6;
    color: #111827;
}
.sf-nav__parent-toggle:focus-visible,
.sf-nav__parent-link:focus-visible,
.sf-nav__children > a:focus-visible {
    outline: 2px solid rgba(17, 24, 39, .72);
    outline-offset: 1px;
}
.sf-nav__parent-toggle i { transition: transform .18s ease; }
.sf-nav__parent-toggle:hover i,
.sf-nav__parent-toggle:focus-visible i {
    transform: translateX(1px);
}
.sf-nav__children {
    display: grid;
    gap: 3px;
    padding: 1px 8px 7px 4px;
    background: transparent;
}
.sf-nav__view-all {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 4px;
    padding: 0 11px;
    border-radius: 8px;
    background: rgba(var(--sf-gold-rgb), .08);
    color: #111827;
    font-size: 13.75px;
    font-weight: 750;
    line-height: 1.35;
}
.sf-nav__children > a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px 0 18px;
    border-radius: 7px;
    color: #344054;
    font-size: 13.25px;
    font-weight: 600;
    line-height: 1.35;
    transition: background-color .16s ease, color .16s ease;
}
.sf-nav__parent-link:hover,
.sf-nav__parent-link:focus-visible,
.sf-nav__view-all:hover,
.sf-nav__view-all:focus-visible,
.sf-nav__children > a:hover,
.sf-nav__children > a:focus-visible {
    background: #f7f8fa;
    color: #111827;
}

@media (min-width: 641px) {
    .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: var(--sf-black);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sf-header__bar {
        gap: 14px;
    }
    .sf-header__primary {
        display: inline-flex;
    }
    .sf-header__categories {
        position: relative;
        display: inline-flex;
    }
    .sf-header__search {
        display: flex;
        flex: 1 1 auto;
        max-width: none;
        min-width: 220px;
        height: 36px;
        min-height: 36px;
        margin-left: 6px;
    }
    .sf-header__search input {
        padding-left: 14px;
        font-size: 13.5px;
    }
    .sf-header__search button {
        width: 30px;
        height: 30px;
        margin-right: 3px;
        font-size: 13px;
    }
    .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 .35s 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 picture { display: block; width: 100%; height: 100%; }
.sf-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.sf-hero__slide--text { background: var(--sf-black); }
.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;
    width: calc(100% - (var(--sf-gutter) * 2));
    max-width: calc(var(--sf-max) - (var(--sf-gutter) * 2));
    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: var(--sf-black);
    font-weight: 700;
    font-size: 13.5px;
}

/* ---- Trust badges -------------------------------------------------------- */
.sf-trustbar { margin-top: 14px; }
.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; }
/* Compact service strip above the footer: one white bordered band with hairline
   separators between items — not four separate cards. The icon disc stays pure
   black and the glyph stays QuickPick yellow even when the homepage remaps
   content accents to monochrome. The 2x2 phone layout keeps the internal
   separators via nth-child borders (gap stays 0 so the band reads as one piece). */
.sf-trustbar--hero {
    margin-top: 28px;
    margin-bottom: 0;
}
.sf-trustbar--hero .sf-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    background: #fff;
    border: 1px solid #e7e9ed;
    border-radius: 10px;
    overflow: hidden;
}
.sf-trustbar--hero .sf-trust li {
    min-width: 0;
    min-height: 52px;
    padding: 10px 12px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--sf-black);
    line-height: 1.2;
    gap: 9px;
}
.sf-trustbar--hero .sf-trust li:nth-child(even) { border-left: 1px solid #eef0f3; }
.sf-trustbar--hero .sf-trust li:nth-child(n+3) { border-top: 1px solid #eef0f3; }
.sf-trustbar--hero .sf-trust li i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--sf-black);
    color: #febd04;
    font-size: 12px;
}
.sf-trustbar--hero .sf-trust li span { display: flex; min-width: 0; }
.sf-trustbar--hero .sf-trust li strong {
    color: var(--sf-black);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}
.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; }

/* ---- Featured categories -------------------------------------------------- */
/* Flat, airy category tiles under the hero: a softly rounded square image (or
   neutral icon fallback) above a plain name — no card borders, backgrounds or
   shadows, just generous white space. Column counts live in the responsive
   blocks. */
.sf-featcat { margin-top: clamp(20px, 2vw, 28px); }
.sf-featcat__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    margin-bottom: 12px;
}
.sf-featcat__heading { display: flex; flex-direction: column; gap: 2px; }
.sf-featcat__title {
    font-size: 20px;
    font-weight: 700;
    position: relative;
    padding-left: 14px;
}
.sf-featcat__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));
}
.sf-featcat__subtitle {
    margin: 0;
    padding-left: 14px;
    color: var(--sf-muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}
.sf-featcat__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
    white-space: nowrap;
    text-decoration: none;
}
.sf-featcat__all:hover { color: var(--sf-gold); }
.sf-featcat__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Tablet default; phones drop to 3-up and desktops widen to 6/8-up in the
       responsive blocks below. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 16px;
}
.sf-featcat__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    text-decoration: none;
    color: var(--sf-text);
    -webkit-tap-highlight-color: transparent;
}
.sf-featcat__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f6f7f9;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .16s ease;
}
.sf-featcat__card:hover .sf-featcat__media,
.sf-featcat__card:focus-visible .sf-featcat__media { transform: translateY(-2px); }
.sf-featcat__card:hover .sf-featcat__name { color: var(--sf-black); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sf-gold); }
.sf-featcat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sf-featcat__fallback {
    position: relative;
    width: 32px;
    height: 27px;
    border: 2px solid #9aa0aa;
    border-radius: 4px;
    color: #9aa0aa;
}
.sf-featcat__fallback::before,
.sf-featcat__fallback::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 17px;
    height: 12px;
    border: 2px solid currentColor;
    background: #f6f7f9;
}
.sf-featcat__fallback::before { left: -2px; transform: skewY(-24deg); }
.sf-featcat__fallback::after { right: -2px; transform: skewY(24deg); }
.sf-featcat__name {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ---- Popular brands ------------------------------------------------------ */
.sf-brandstrip { margin-top: var(--sf-section-gap); }
.sf-brandstrip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    margin-bottom: 10px;
}
.sf-brandstrip__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sf-brandstrip__title {
    position: relative;
    padding-left: 14px;
    font-size: 18px;
    font-weight: 700;
}
.sf-brandstrip__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(var(--sf-gold), var(--sf-gold-soft));
}
.sf-brandstrip__subtitle {
    margin: 0;
    padding-left: 14px;
    color: var(--sf-muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}
.sf-brandstrip__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--sf-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.sf-brandstrip__all:hover { color: var(--sf-gold); }
.sf-brandstrip__rail {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--sf-gutter) * -1);
    padding: 2px var(--sf-gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sf-brandstrip__rail::-webkit-scrollbar { display: none; }
.sf-brandstrip__rail > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.sf-brandstrip__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 210px;
    min-height: 44px;
    padding: 7px 12px 7px 7px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 12px;
    background: #ffffff;
    color: var(--sf-black);
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .055);
}
.sf-brandstrip__item:hover,
.sf-brandstrip__item:focus-visible {
    border-color: rgba(var(--sf-gold-rgb), .65);
    transform: translateY(-1px);
}
.sf-brandstrip__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 30px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 9px;
    background: #f8fafc;
    overflow: hidden;
}
.sf-brandstrip__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.sf-brandstrip__name {
    min-width: 0;
    overflow: hidden;
    color: var(--sf-black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-home-authority {
    margin-top: 22px;
    padding-block: 2px;
}
.sf-home-authority__title {
    position: relative;
    margin: 0 0 8px;
    padding-left: 14px;
    color: var(--sf-black);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.25;
}
.sf-home-authority__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: .18em;
    width: 5px;
    height: 1.05em;
    border-radius: 3px;
    background: var(--sf-gold);
}
.sf-home-authority__intro,
.sf-home-authority__body {
    max-width: 860px;
    color: var(--sf-text);
    font-size: 14px;
    line-height: 1.7;
}
.sf-home-authority__intro {
    margin: 0 0 9px;
    font-weight: 600;
}
.sf-home-authority__body {
    padding: 14px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .045);
}

.sf-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.sf-brand-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 14px;
    background: #ffffff;
    color: var(--sf-black);
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .055);
}
.sf-brand-card:hover,
.sf-brand-card:focus-visible {
    border-color: rgba(var(--sf-gold-rgb), .65);
}
.sf-brand-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    border-radius: 11px;
    background: #f8fafc;
    overflow: hidden;
}
.sf-brand-card__media img {
    width: 100%;
    height: 70px;
    object-fit: contain;
    padding: 9px;
}
.sf-brand-card__fallback {
    padding: 8px 10px;
    color: #374151;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
}
.sf-brand-card__name {
    min-width: 0;
    overflow: hidden;
    color: var(--sf-black);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-brand-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.sf-brand-hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 72px;
    width: 72px;
    height: 54px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .055);
    overflow: hidden;
}
.sf-brand-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

/* ---- Sections ------------------------------------------------------------ */
.sf-section { margin-top: var(--sf-section-gap-major); }
.sf-page-home .sf-section { margin-top: var(--sf-section-gap); }
.sf-page-home .sf-section:has(> .sf-product-grid) + .sf-section:has(> .sf-product-grid) { margin-top: var(--sf-section-gap); }
.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 {
    order: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 7px 12px;
    border: 1px solid rgba(var(--sf-gold-rgb), .36);
    border-radius: 10px;
    background: var(--sf-black);
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-gold-soft);
    white-space: nowrap;
    text-decoration: none;
    transition: gap .15s ease, background-color .15s ease, border-color .15s ease;
}
.sf-section__more:hover {
    gap: 9px;
    background: var(--sf-black);
    border-color: rgba(var(--sf-gold-rgb), .58);
    color: var(--sf-gold);
    text-decoration: none;
}
.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;
    flex-wrap: wrap;
    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: 50px;
    padding: 9px 5px 8px;
    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;
    padding: 7px 12px;
    border: 1px solid rgba(var(--sf-gold-rgb), .36);
    border-radius: 10px;
    background: var(--sf-black);
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-gold-soft);
    white-space: nowrap;
    text-decoration: none;
    transition: gap .15s ease, background-color .15s ease, border-color .15s ease;
}
.sf-flash__more:hover {
    gap: 9px;
    background: var(--sf-black);
    border-color: rgba(var(--sf-gold-rgb), .58);
    color: var(--sf-gold);
    text-decoration: none;
}
.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: var(--sf-black);
    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: var(--sf-black);
    text-decoration: none;
}
/* The bar spans the section container, so its edges line up with the product
   grid directly below it. It previously capped at 480px and centred, which left
   large empty margins beside a full-width grid and read as a different section.
   The contents stay centred inside that width (the bar is a centred flex
   column), so the countdown still sits in the middle. */
/* 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; }
@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: 50px;
        padding: 9px 5px 8px;
        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: var(--sf-black);
    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, var(--sf-black), transparent); }
.sf-section__ticker::after { right: 0; background: linear-gradient(270deg, var(--sf-black), 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; }
}

/* ---- 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 {
    /* Compact monochrome 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: #000;
    border: 1px solid #000;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 19px;
    letter-spacing: .02em;
    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: var(--sf-black); }
/* 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: center;
    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: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.sf-card__was {
    color: var(--sf-muted);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.sf-card__now,
.sf-card__was,
.sf-pdp__now,
.sf-pdp__was,
.sf-pdp__save,
.sf-buybar__price,
.sf-cart-line__unit,
.sf-cart-line__total,
.sf-cart__row > span:last-child,
.sf-checkout__item-unit,
.sf-checkout__item-price,
.sf-checkout .sf-zone__charge,
.sf-checkout .sf-cart__row > span:last-child,
.sf-account__order-total,
.sf-account__tracking-total strong,
.sf-delivery-note li span:last-child,
.sf-delivery-note__free {
    font-family: var(--sf-currency-font);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
    vertical-align: baseline;
    text-rendering: auto;
}
/* Card action: compact semi-rounded button with a solid black icon. It stays
   visually quiet on the white card surface while preserving the same quick-add
   behavior and touch target. Options/view share the same neutral button shell
   so they never read as a yellow instant-add disc. Above the stretched link. */
.sf-card__cart {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--sf-black);
    background: rgba(255, 255, 255, .92);
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    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: #fff; border-color: transparent; color: var(--sf-black); }
.sf-card__cart:active { transform: translateY(0); }
/* Options / view affordances: neutral button — clearly not a cart add. */
.sf-card__cart--options,
.sf-card__cart--view {
    color: var(--sf-text);
    background: rgba(255, 255, 255, .88);
    border-color: transparent;
}
.sf-card__cart--options:hover,
.sf-card__cart--view:hover {
    transform: translateY(-1px);
    background: #fff;
    color: var(--sf-text);
    border-color: transparent;
}
/* Add-once "View Cart" state: after a card quick-add the action shows the product
   is in the cart. Icon stays solid black; a faint ink fill marks it as done. */
.sf-card__cart--added {
    color: var(--sf-black);
    background: rgba(21, 21, 26, .06);
    border-color: transparent;
}
.sf-card__cart--added:hover {
    transform: translateY(-1px);
    background: rgba(21, 21, 26, .1);
    color: var(--sf-black);
    border-color: transparent;
}
/* 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: var(--sf-black); transform: scale(1.05); }
.sf-card__wish.is-active { color: var(--sf-black); 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;
    }
    .announcement-slot__track,
    .sf-section__ticker-track {
        animation: none;
        transform: 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: var(--sf-black);
    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: 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: var(--sf-black);
}

/* Homepage content placement uses a neutral white surface with dark ink,
   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;
}
.sf-page-home .sf-ticker-wrap { padding: 18px var(--sf-gutter) 16px; }
/* Homepage: the ticker sits between Featured Categories and Flash Sale. The
   spacing lives on the wrapper so the ticker's top margin cannot collapse
   through .sf-main and reveal the dark body background above the bar. */
.sf-page-home .announcement-slot--content {
    height: 34px;
    margin-block: 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(17, 24, 39, .06);
    color: #667085;
}
.sf-page-home .sf-ticker-wrap + .sf-section { margin-top: 0; }
/* Flash Sale keeps the standard section gap above it. The ticker's own bottom
   padding alone left ~16px here against ~31px below, so the block hugged the
   ticker and sat unevenly between it and the products. The ticker supplies the
   spacing through padding rather than margin (see above), so this margin cannot
   collapse through .sf-main. */
.sf-page-home .sf-ticker-wrap + .sf-flash { margin-top: var(--sf-section-gap); }
.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, #fff, transparent); }
.announcement-slot--content::after { right: 0; background: linear-gradient(270deg, #fff, 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 {
    min-height: 34px;
    padding-block: 0;
    color: #667085;
    font-size: 14px;
    font-weight: 400;
}
.sf-page-home .announcement-slot--content .announcement-slot__track,
.sf-page-home .announcement-slot--content .announcement-slot__group { height: 100%; }
.sf-page-home .announcement-slot--content .announcement-slot__track { align-items: center; }
.sf-page-home .announcement-slot--content .announcement-slot__item strong {
    color: var(--sf-black);
    font-weight: 600;
}
.sf-page-home .announcement-slot--content .announcement-slot__item a {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sf-black);
    font-weight: 600;
}
.sf-page-home .announcement-slot--content .announcement-slot__item a:hover,
.sf-page-home .announcement-slot--content .announcement-slot__item a:focus-visible {
    background: transparent;
    color: var(--sf-black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 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, var(--sf-black), transparent); }
.announcement-slot--site-top::after { right: 0; background: linear-gradient(270deg, var(--sf-black), 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: var(--sf-black);
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.sf-popup--image-only .sf-popup__close:hover { background: #fff; color: var(--sf-black); }

@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: var(--sf-black);
    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; }
/* The gap above the footer lives inside the white .sf-main as padding-bottom so
   it reads as clean breathing space, not a dark band blending into the footer. */
.sf-page-home .sf-footer { margin-top: 0; }
.sf-page-home .sf-main { 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-title { color: var(--sf-text); font-size: 15px; margin: 14px 0 0; }
.sf-footer__about { color: var(--sf-muted); font-size: 13.5px; line-height: 1.65; margin: 7px 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; }
/* Quick Links / Help & Policies are <details> so phones get a native accordion.
   Above 640px they are kept open by JS and made inert here, so the summary
   renders exactly like the plain heading the columns had before. */
.sf-footer__acc-summary { list-style: none; cursor: default; pointer-events: none; }
.sf-footer__acc-summary::-webkit-details-marker { display: none; }
/* 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) {
    /* Right padding keeps the trust grid and copyright clear of the floating
       support button (54px FAB anchored ~10px from the right edge). */
    .sf-footer__bar-inner { padding-block: 14px; padding-right: 64px; }
    .sf-footer__trust {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: start;
        gap: 9px 14px;
    }
    .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 last section before the footer. */
    .sf-page-home .sf-main { padding-bottom: 8px; }

    .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; }
}

@media (min-width: 641px) and (max-width: 899px) {
    .sf-page-home .sf-main { padding-bottom: 12px; }
}

/* ---- 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.
       Use the shared 16px phone gutter so banners never touch the viewport while
       cards still keep enough usable width. Wider breakpoints step up gradually. */
    :root { --sf-gutter: 16px; }

    /* Phone footer: one calm column instead of two cramped ones. Brand, then
       Quick Links and Help & Policies as collapsed accordions (native details,
       closed by footer-accordion.js), then Contact & Support. Spacing lives on
       each block so the accordion dividers meet with no stray grid gaps. */
    .sf-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 20px 6px; }
    .sf-footer__mobile-flow { display: contents; }
    .sf-footer__brand { order: 1; padding-bottom: 18px; }
    .sf-footer__links { order: 2; }
    .sf-footer__policies { order: 3; grid-column: auto; grid-row: auto; }
    .sf-footer__meta { order: 4; padding-top: 18px; }

    /* Keep the brand blurb to a compact three lines on phones. */
    .sf-footer__about {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Accordion rows: full-width tappable summary with a gold chevron. */
    .sf-footer__acc { border-top: 1px solid var(--sf-border); }
    .sf-footer__policies.sf-footer__acc { border-bottom: 1px solid var(--sf-border); }
    .sf-footer__acc-summary {
        pointer-events: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }
    .sf-footer__acc-summary h3 { margin: 0; }
    .sf-footer__acc-summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--sf-gold);
        border-bottom: 2px solid var(--sf-gold);
        transform: translateY(-2px) rotate(45deg);
        transition: transform .18s ease;
        flex-shrink: 0;
        margin-right: 3px;
    }
    .sf-footer__acc[open] > .sf-footer__acc-summary::after { transform: translateY(2px) rotate(225deg); }
    .sf-footer__acc-summary:focus-visible { outline: 2px solid var(--sf-gold); outline-offset: -2px; border-radius: 6px; }
    .sf-footer__acc > ul { padding-bottom: 14px; }
    /* Roomier tap targets inside the opened accordions. */
    .sf-footer__acc a { padding-block: 6px; }

    /* 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: var(--sf-header-height);
        gap: 6px;
    }
    .sf-header__logo {
        display: inline-flex;
        align-items: center;
    }
    .sf-header__logo img {
        width: 110px;
        height: auto;
        max-height: 32px;
    }
    /* Keep the compact search on the same mobile content rail as the hero and
       the storefront sections below it. */
    .sf-subhead__inner { padding-block: 7px 5px; }
    .sf-subhead > .sf-container { padding-inline: var(--sf-gutter); }

    .sf-header__action span:not(.sf-header__cart-count):not(.sf-header__wish-count) { display: none; }
    /* The black header primary nav is the hamburger-toggled menu on phones; it
       stays collapsed until opened and does not create a second white nav row. */
    .sf-header__primary.is-open {
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 51;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 8px 10px;
        background: var(--sf-black);
        border-top: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
    }
    .sf-header__primary.is-open a {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 8px;
    }
    /* Inset the hero/banner by the shared --sf-gutter (16px 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 {
        width: calc(100% - (var(--sf-gutter) * 2));
        max-width: calc(var(--sf-max) - (var(--sf-gutter) * 2));
        margin-inline: auto;
        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%; }
    .banner-slot { margin-top: 24px; border-radius: var(--sf-radius-sm); }
    .banner-slot__track { align-items: flex-start; }
    .banner-slot__item { aspect-ratio: 16 / 9; }
    .banner-slot__item picture { height: 100%; }
    .banner-slot__item img { height: 100%; object-fit: contain; }
    /* 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: the service strip sits above the footer, keeping
       its compact 2x2 band clear of the fixed bottom navigation. */
    .sf-page-home .sf-trustbar {
        margin-top: 22px;
        margin-bottom: 12px;
        padding-bottom: 0;
    }
    .sf-page-home .sf-trust li {
        gap: 7px;
        min-height: 48px;
        padding: 8px 9px;
        white-space: normal;
    }
    .sf-page-home .sf-section { margin-top: var(--sf-section-gap); }

    /* Home ticker: compact both sides in its new slot between Featured
       Categories and Flash Sale. */
    .sf-page-home .sf-ticker-wrap { padding-block: 18px 16px; }
    .sf-page-home .announcement-slot--content {
        height: 30px;
        border-radius: 5px;
    }
    .sf-page-home .announcement-slot--content { margin-block: 0; }
    .sf-page-home .announcement-slot--content .announcement-slot__item {
        min-height: 30px;
        font-size: 13.5px;
    }

    /* Featured categories on phones: compact 3-up tiles stay readable at 360px. */
    .sf-featcat { margin-top: 20px; }
    .sf-featcat__head { margin-bottom: 12px; }
    .sf-featcat__title { font-size: 17px; }
    .sf-featcat__title::before { height: 18px; }
    .sf-featcat__subtitle { display: none; }
    .sf-featcat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
    .sf-featcat__card { gap: 8px; }
    .sf-featcat__media { border-radius: 12px; }
    .sf-featcat__name { font-size: 12px; }
    .sf-brandstrip { margin-top: var(--sf-section-gap); }
    .sf-brandstrip__head { margin-bottom: 8px; }
    .sf-brandstrip__title { font-size: 17px; }
    .sf-brandstrip__title::before { height: 18px; }
    .sf-brandstrip__subtitle { display: none; }

    .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: var(--sf-section-gap); }
    .sf-page-home .sf-flash__bar {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    .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: 32px;
        height: 32px;
        font-size: 15px;
    }
    .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); }
    /* Service strip: one horizontal row with hairline separators between all
       four items (the 2x2 nth-child borders below 641px no longer apply). */
    .sf-trustbar--hero .sf-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sf-trustbar--hero .sf-trust li { justify-content: center; }
    .sf-trustbar--hero .sf-trust li:nth-child(n+3) { border-top: 0; }
    .sf-trustbar--hero .sf-trust li + li { border-left: 1px solid #eef0f3; }
    .sf-product-grid { grid-template-columns: repeat(3, 1fr); }
    .sf-brandstrip__rail {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }
    .sf-brandstrip__rail > li { min-width: 0; }
    .sf-brandstrip__item {
        width: 100%;
        max-width: none;
    }
    /* 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-featcat__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sf-brandstrip__rail { grid-template-columns: repeat(6, minmax(0, 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); }
    /* Featured categories fill one balanced 9-up row on wide screens. */
    .sf-featcat__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .sf-brandstrip__rail { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sf-brand-grid { grid-template-columns: repeat(6, minmax(0, 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));
    }
}

/* =============================================================================
   HOMEPAGE MONOCHROME + TOP-STACK RHYTHM
   Keep shared header/search behavior, but collapse the separate subhead/hero
   gaps into one intentional seam. Content accents are neutral below the search.
   ========================================================================== */
.sf-page-home .sf-subhead__inner {
    padding-block: 10px 0;
}
.sf-page-home .sf-hero {
    padding-top: 10px;
}
@media (max-width: 640px) {
    .sf-page-home .sf-subhead__inner {
        padding-block: 14px 0;
    }

    .sf-page-home .sf-subhead .sf-store-search {
        height: 42px;
        min-height: 42px;
        border-color: #d4d9e1;
        border-radius: 9999px;
        box-shadow: 0 3px 10px rgba(16, 24, 40, 0.055);
    }

    .sf-page-home .sf-hero {
        padding-top: 14px;
    }

    .sf-page-home .sf-hero__viewport {
        border-radius: 12px;
    }

    .sf-page-home .sf-hero__slide {
        border-radius: 0;
    }

    .sf-page-home .sf-featcat {
        margin-top: 26px;
    }
}

@media (max-width: 767px) {
    body.sf-page-home .sf-header__bar {
        height: auto;
        min-height: var(--sf-header-height);
        padding-block: 16px;
    }

    body.sf-page-home .sf-subhead__inner {
        margin-top: 16px;
        padding-block: 0;
    }

    body.sf-page-home .sf-container {
        padding-inline: 16px;
    }

    .sf-page-home .sf-main > .sf-hero,
    .sf-page-home .sf-main > .sf-featcat,
    .sf-page-home .sf-main > .sf-ticker-wrap,
    .sf-page-home .sf-main > .sf-flash,
    .sf-page-home .sf-main > .sf-section {
        margin-block: 24px;
    }

    .sf-page-home .sf-main > .sf-hero {
        padding-top: 0;
    }

    .sf-page-home .sf-ticker-wrap {
        padding-block: 0;
    }

    .sf-page-home .sf-featcat__grid {
        gap: 16px;
    }

    .sf-page-home .sf-bottom-nav {
        border-top: 1px solid rgba(255, 255, 255, .14);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .18);
    }
}
.sf-page-home .sf-main,
.sf-page-home.sf-theme-light .sf-main {
    --sf-gold: #6b7280;
    --sf-gold-rgb: 107, 114, 128;
    --sf-gold-soft: #d1d5db;
    --sf-gold-ink: #111827;
    background: #fff;
}
.sf-page-home .sf-featcat__title::before,
.sf-page-home .sf-section__title::before {
    background: #c7cdd4;
}
.sf-page-home .sf-featcat__all:hover {
    color: #4b5563;
}
.sf-page-home .sf-section__more,
.sf-page-home .sf-flash__more {
    border-color: #d9dde3;
    background: #fff;
    color: var(--sf-black);
}
.sf-page-home .sf-section__more:hover,
.sf-page-home .sf-flash__more:hover {
    border-color: #b8c0ca;
    background: #f4f5f7;
    color: var(--sf-black);
}
/* =============================================================================
   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: var(--sf-black);
    --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. The footer-adjacent
   service strip keeps its own black/yellow disc style above. */
.sf-theme-light .sf-main .sf-trust li i { color: var(--sf-text); }
.sf-theme-light .sf-main .sf-trustbar--hero .sf-trust li i { color: #febd04; }

/* 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. */

/* =============================================================================
   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: var(--sf-page-end); }
.sf-listing--catalog { padding-top: var(--sf-page-start); }
.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: var(--sf-component-gap);
}
.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: clamp(32px, 5vw, 48px) 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; }
.sf-empty__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.sf-empty__links a {
    padding: 7px 11px;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    background: #fff;
    color: var(--sf-text);
    font-size: 13px;
    font-weight: 650;
}
.sf-empty__links a:hover,
.sf-empty__links a:focus-visible {
    border-color: rgba(var(--sf-gold-rgb), .45);
    box-shadow: 0 0 0 3px rgba(var(--sf-gold-rgb), .12);
}

/* ---- 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: var(--sf-black);
}
.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: clamp(12px, 2vw, 20px) var(--sf-page-end);
    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: var(--sf-black);
    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__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: 700; 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); font-weight: 400; 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: var(--sf-section-gap-major); }
.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__structured-grid {
    display: grid;
    gap: 12px;
}
.sf-pdp__structured-card {
    color: var(--sf-text);
    font-size: 14px;
    line-height: 1.65;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 14px;
}
.sf-pdp__structured-card h3 {
    margin: 0 0 7px;
    color: var(--sf-black);
    font-size: 14.5px;
    font-weight: 750;
}
.sf-pdp__structured-card div {
    white-space: normal;
}
.sf-pdp__faq-list {
    display: grid;
    gap: 10px;
}
.sf-pdp__faq {
    border: 1px solid var(--sf-border);
    border-radius: 12px;
    background: var(--sf-surface);
    box-shadow: 0 8px 18px rgba(17, 24, 39, .045);
    overflow: hidden;
}
.sf-pdp__faq summary {
    cursor: pointer;
    padding: 13px 14px;
    color: var(--sf-black);
    font-size: 14.5px;
    font-weight: 750;
    line-height: 1.35;
}
.sf-pdp__faq div {
    padding: 0 14px 14px;
    color: var(--sf-text);
    font-size: 14px;
    line-height: 1.65;
}
.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-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sf-brand-hero__logo {
        flex-basis: 92px;
        width: 92px;
        height: 64px;
    }
    .sf-pdp__structured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .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: var(--sf-black);
    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: var(--sf-page-start) var(--sf-page-end); }
.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: clamp(36px, 5vw, 52px) 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__unit { font-weight: 700; }

.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__row > span:last-child { font-weight: 700; }
.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: 800;
    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: var(--sf-page-start) var(--sf-page-end); }
.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: var(--sf-black);
    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: var(--sf-black);
    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: var(--sf-black);
    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__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 16px;
}
.sf-account__nav a,
.sf-account__nav button {
    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: var(--sf-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.sf-account__nav a:hover,
.sf-account__nav a:focus-visible,
.sf-account__nav button:hover,
.sf-account__nav button:focus-visible,
.sf-account__nav a.is-active {
    border-color: var(--sf-gold);
    background: var(--sf-gold-soft);
    color: var(--sf-black);
}
.sf-account__nav form { display: flex; margin: 0; }
.sf-account__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.sf-account__stats a {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-card);
    color: var(--sf-text);
    box-shadow: var(--sf-shadow-sm);
}
.sf-account__stats span { color: var(--sf-muted); font-size: 12px; font-weight: 700; }
.sf-account__stats strong { color: var(--sf-black); font-size: 24px; line-height: 1; }
.sf-account__latest-copy { margin: 0 0 14px; color: var(--sf-muted); font-size: 14px; }
.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: var(--sf-black);
    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: var(--sf-black); }
.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 {
    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: var(--sf-black);
    font-size: 13px;
    font-weight: 700;
    pointer-events: auto;
    text-decoration: none;
}
.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: var(--sf-black); }
.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: var(--sf-black);
    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__order-total { font-weight: 700; }
.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: var(--sf-black);
    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);
}
.sf-account__tracking-total strong { font-weight: 800; }

/* Saved addresses: compact account cards with resilient wrapping at phone widths. */
.sf-addresses__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.sf-addresses__empty { text-align: center; }
.sf-addresses__empty p { margin: -4px 0 18px; color: var(--sf-muted); }
.sf-address-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-card);
    box-shadow: var(--sf-shadow-sm);
}
.sf-address-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.sf-address-card__head h2 {
    min-width: 0;
    margin: 0;
    color: var(--sf-text);
    font-size: 16px;
    overflow-wrap: anywhere;
}
.sf-address-card__default {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sf-gold-soft);
    color: var(--sf-black);
    font-size: 11px;
    font-weight: 800;
}
.sf-address-card p {
    margin: 3px 0;
    color: var(--sf-muted);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.sf-address-card .sf-address-card__recipient { color: var(--sf-text); font-weight: 800; }
.sf-address-card .sf-address-card__address { margin-top: 9px; color: var(--sf-text); }
.sf-address-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid var(--sf-border);
}
.sf-address-card__actions form { margin: 0; }
.sf-address-card__actions a,
.sf-address-card__actions button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    background: var(--sf-surface);
    color: var(--sf-text);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.sf-address-card__actions a:hover,
.sf-address-card__actions button:hover { border-color: var(--sf-text); }
.sf-address-card__actions button.is-danger { color: var(--sf-danger); }
.sf-address-form { max-width: 720px; }
.sf-address-form__areas {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.sf-address-form__areas legend {
    margin-bottom: 6px;
    color: var(--sf-text);
    font-size: 13px;
    font-weight: 700;
}
.sf-address-form__default {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--sf-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.sf-address-form__default input { width: 17px; height: 17px; accent-color: var(--sf-gold); }

/* 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; }

/* Customer post-purchase requests ------------------------------------------ */
.sf-request-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.sf-request-filters a {
    padding: 7px 11px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    color: var(--sf-text);
    font-size: 12px;
    font-weight: 750;
}
.sf-request-filters a.is-active { border-color: var(--sf-text); background: #f4f5f6; color: var(--sf-black); }
.sf-request-list { display: grid; gap: 10px; }
.sf-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    overflow-wrap: anywhere;
}
.sf-request-card h2,
.sf-request-card h3 { margin: 2px 0 4px; color: var(--sf-black); font-size: 15px; }
.sf-request-card p,
.sf-request-card small { margin: 0; color: var(--sf-muted); font-size: 12px; }
.sf-request-card__meta { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.sf-request-status {
    display: inline-flex;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef0f2;
    color: var(--sf-text);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.sf-request-status--approved,
.sf-request-status--processing { background: #e9f2ff; color: #174ea6; }
.sf-request-status--completed { background: #e8f7ee; color: #176b3a; }
.sf-request-status--rejected,
.sf-request-status--withdrawn { background: #fcebea; color: #9c2f27; }
.sf-request-form { max-width: 820px; }
.sf-request-summary,
.sf-request-detail__head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.sf-request-summary > div,
.sf-request-detail__head > div { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); }
.sf-request-summary span,
.sf-request-detail__head span:not(.sf-request-status) { color: var(--sf-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.sf-request-note,
.sf-request-policy { color: var(--sf-muted); font-size: 13px; line-height: 1.55; }
.sf-request-items { display: grid; gap: 9px; margin: 18px 0; padding: 0; border: 0; }
.sf-request-items legend { margin-bottom: 9px; color: var(--sf-black); font-weight: 800; }
.sf-request-item { display: grid; grid-template-columns: auto minmax(0, 1fr) 105px; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); }
.sf-request-item__thumb { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 6px; background: #f2f3f4; color: var(--sf-muted); }
.sf-request-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-request-item.is-unavailable { opacity: .58; }
.sf-request-item__info { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.sf-request-item__info small { color: var(--sf-muted); }
.sf-request-item__quantity { display: grid; gap: 4px; color: var(--sf-muted); font-size: 11px; font-weight: 750; }
.sf-request-item__quantity input,
.sf-account__field select,
.sf-account__field textarea { width: 100%; border: 1px solid #9098a2; border-radius: var(--sf-radius-sm); background: #fff; color: var(--sf-text); font: inherit; }
.sf-request-item__quantity input { min-height: 38px; padding: 7px; }
.sf-account__field { display: grid; gap: 6px; margin-top: 14px; }
.sf-account__field > label { color: var(--sf-text); font-size: 13px; font-weight: 800; }
.sf-account__field > label span { color: var(--sf-muted); font-weight: 600; }
.sf-account__field select { min-height: 44px; padding: 8px 10px; }
.sf-account__field textarea { padding: 10px; resize: vertical; }
.sf-account__field-error { color: var(--sf-danger); font-size: 12px; font-weight: 700; }
.sf-account__form-actions,
.sf-request-detail__actions,
.sf-order-service-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sf-account__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--sf-text);
    border-radius: var(--sf-radius-sm);
    background: #fff;
    color: var(--sf-black);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.sf-account__button--primary { border-color: var(--sf-black); background: var(--sf-black); color: #fff; }
.sf-account__button--danger { border-color: #b42318; color: #b42318; }
.sf-account__alert { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); font-size: 13px; }
.sf-account__alert--success { border-color: #8bc8a5; background: #f0faf4; color: #176b3a; }
.sf-account__alert--error { border-color: #e2a19b; background: #fff5f4; color: #84251f; }
.sf-request-detail h2,
.sf-order-requests h2 { margin-top: 20px; }
.sf-request-copy,
.sf-request-response { margin-top: 16px; padding: 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); }
.sf-request-copy p,
.sf-request-response p { margin: 5px 0 0; line-height: 1.55; }
.sf-request-response { background: #f6f7f8; }
.sf-request-timeline { margin-top: 20px; }
.sf-request-timeline > div { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding-bottom: 12px; }
.sf-request-timeline > div > span { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--sf-gold); }
.sf-request-timeline p { display: grid; gap: 2px; margin: 0; }
.sf-request-timeline small,
.sf-request-timeline em { color: var(--sf-muted); font-size: 12px; font-style: normal; }
.sf-order-requests { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sf-border); }
.sf-order-requests .sf-request-card + .sf-request-card { margin-top: 8px; }

/* Customer Support Messages ------------------------------------------------ */
.sf-account__nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    margin-left: 7px;
    border-radius: 999px;
    padding-inline: 5px;
    background: var(--sf-black);
    color: #fff;
    font-size: 10px;
    line-height: 1;
}
.sf-support-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    padding: 0 11px;
    background: var(--sf-surface);
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 800;
}
.sf-support-thread {
    width: min(100%, 900px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-card);
    box-shadow: var(--sf-shadow-sm);
}
.sf-support-thread__messages {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 260px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 16px;
    background: #f7f8f9;
}
.sf-support-message {
    display: grid;
    gap: 6px;
    width: min(82%, 620px);
    border: 1px solid var(--sf-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    color: var(--sf-text);
}
.sf-support-message--customer {
    justify-self: end;
    border-color: #d7d2bd;
    background: #fffdf4;
}
.sf-support-message--admin { justify-self: start; }
.sf-support-message__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.sf-support-message__meta strong { font-size: 12px; }
.sf-support-message__meta time,
.sf-support-message small {
    color: var(--sf-muted);
    font-size: 11px;
}
.sf-support-message p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.sf-support-message > small { justify-self: end; }
.sf-support-thread__empty {
    place-self: center;
    padding: 32px 16px;
    text-align: center;
}
.sf-support-thread__empty h2 { margin: 0 0 6px; color: var(--sf-text); font-size: 17px; }
.sf-support-thread__empty p { margin: 0; color: var(--sf-muted); font-size: 13px; }
.sf-support-compose {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-top: 1px solid var(--sf-border);
    background: #fff;
}
.sf-support-compose > label { color: var(--sf-text); font-size: 13px; font-weight: 800; }
.sf-support-compose__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}
.sf-support-compose textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #9098a2;
    border-radius: var(--sf-radius-sm);
    padding: 9px 10px;
    background: #fff;
    color: var(--sf-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
}
.sf-support-compose button {
    min-width: 86px;
    min-height: 44px;
    border: 1px solid var(--sf-black);
    border-radius: var(--sf-radius-sm);
    padding: 0 16px;
    background: var(--sf-black);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.sf-support-compose > small { color: var(--sf-muted); font-size: 11px; }

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

@media (max-width: 520px) {
    .sf-account__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .sf-account__nav { display: grid; grid-template-columns: 1fr 1fr; }
    .sf-account__nav a,
    .sf-account__nav button { width: 100%; min-width: 0; padding-inline: 8px; white-space: normal; text-align: center; }
    .sf-account__nav form { min-width: 0; }
    .sf-request-card { align-items: flex-start; flex-direction: column; }
    .sf-request-card__meta { width: 100%; justify-content: space-between; }
    .sf-request-item { grid-template-columns: auto minmax(0, 1fr) 82px; gap: 9px; }
    .sf-request-summary,
    .sf-request-detail__head { grid-template-columns: 1fr 1fr; }
    .sf-account__form-actions,
    .sf-order-service-actions { display: grid; grid-template-columns: 1fr; }
    .sf-account__form-actions .sf-account__button,
    .sf-order-service-actions .sf-account__button { width: 100%; }
    .sf-addresses__grid { grid-template-columns: 1fr; }
    .sf-account__header { align-items: flex-start; flex-direction: column; }
    .sf-support-messages .sf-account__header {
        align-items: center;
        flex-direction: row;
    }
    .sf-support-thread__messages {
        min-height: 220px;
        max-height: 54vh;
        padding: 12px;
    }
    .sf-support-message { width: 91%; }
    .sf-support-message__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
    .sf-support-compose {
        position: sticky;
        bottom: calc(var(--sf-bottom-nav-rendered-height, 64px) + 8px);
        z-index: 4;
        padding: 12px;
        box-shadow: 0 -8px 20px rgba(17, 24, 39, .08);
    }
    .sf-support-compose__row {
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 8px;
    }
    .sf-support-compose textarea { min-height: 76px; }
    .sf-support-compose button { min-width: 0; padding-inline: 10px; }
    .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: var(--sf-page-start) var(--sf-page-end); }
.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; }
.sf-checkout-addresses {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sf-border);
}
.sf-checkout-addresses__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: var(--sf-text);
    font-size: 13px;
}
.sf-checkout-addresses__head a { color: var(--sf-text); font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.sf-checkout-addresses__choices {
    display: grid;
    gap: 8px;
    max-height: 300px;
    padding-right: 3px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sf-checkout-address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    color: var(--sf-text);
    cursor: pointer;
}
.sf-checkout-address:has(input:checked) { border-color: var(--sf-text); background: var(--sf-surface-2); }
.sf-checkout-address input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--sf-gold); }
.sf-checkout-address > span { display: grid; gap: 2px; min-width: 0; }
.sf-checkout-address strong { overflow-wrap: anywhere; }
.sf-checkout-address strong small {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--sf-gold-soft);
    color: var(--sf-black);
    font-size: 10px;
    vertical-align: 1px;
}
.sf-checkout-address span span { color: var(--sf-muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.sf-checkout-address--manual { background: var(--sf-surface-2); }
/* 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__item-unit,
.sf-checkout__item-price,
.sf-checkout .sf-zone__charge,
.sf-checkout .sf-cart__row > span:last-child {
    font-family: var(--sf-currency-font);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}
.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__item-unit { font-weight: 700; }

.sf-checkout__qty { position: relative; display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; margin-top: 0; }
.sf-checkout__qty form { margin: 0; }
.sf-checkout__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    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: 24px; text-align: center; font-weight: 600; line-height: 34px; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.sf-checkout__qty-loading {
    position: absolute;
    left: -19px;
    top: 10px;
    width: 14px;
    height: 14px;
    visibility: hidden;
    border: 2px solid var(--sf-border);
    border-top-color: var(--sf-gold);
    border-radius: 50%;
}
.sf-checkout__qty.is-loading .sf-checkout__qty-loading { visibility: visible; animation: sf-checkout-qty-spin .7s linear infinite; }
@keyframes sf-checkout-qty-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-checkout__qty.is-loading .sf-checkout__qty-loading { animation: none; } }

.sf-checkout__item-right { display: flex; min-width: 102px; flex-direction: column; align-items: flex-end; gap: 6px; }
.sf-checkout__item-price-row { display: flex; min-height: 18px; align-items: center; justify-content: flex-end; gap: 7px; }
.sf-checkout__item-price-row form { margin: 0; }
.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__policy {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #ead79a;
    border-radius: var(--sf-radius-sm);
    background: #fffaf0;
    color: #3c2a12;
}
.sf-checkout__policy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--sf-gold-rgb), .22);
    color: #6b5200;
    font-size: 13px;
}
.sf-checkout__policy h3 {
    margin: 0 0 3px;
    color: #1f1607;
    font-family: var(--sf-font);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}
.sf-checkout__policy p {
    margin: 0;
    color: #4f3a16;
    font-size: 12.5px;
    line-height: 1.5;
}
.sf-checkout__policy a {
    color: var(--sf-text);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: #8a6a00;
    text-underline-offset: 2px;
}
.sf-checkout__policy a:hover { text-decoration-thickness: 2px; }
.sf-checkout__policy a:focus-visible { outline: 3px solid rgba(var(--sf-gold-rgb), .3); outline-offset: 2px; }
.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); }

/* PDP Quick Order: one compact express-checkout shell above storefront overlays. */
body.sf-quick-order-lock { overflow: hidden; }
.sf-quick-order[hidden],
.sf-quick-order [hidden] { display: none !important; }
.sf-quick-order {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
}
.sf-quick-order__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
}
.sf-quick-order__dialog {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100vw - 40px));
    max-height: min(86dvh, 760px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #d6dae1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .26);
    color: #111827;
}
.sf-quick-order__header {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 56px 11px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.sf-quick-order__brand-badge {
    width: 112px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 7px;
    background: #090909;
}
.sf-quick-order__brand-badge img {
    width: 100%;
    max-width: 100px;
    height: 28px;
    object-fit: contain;
}
.sf-quick-order__heading { min-width: 0; }
.sf-quick-order__eyebrow {
    margin: 0 0 1px;
    color: #475467;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sf-quick-order__heading h2 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    line-height: 1.2;
}
.sf-quick-order__heading > p:last-child {
    margin: 2px 0 0;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-quick-order__close,
.sf-quick-order__header-back {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #f8fafc;
    color: #111827;
    cursor: pointer;
}
.sf-quick-order__close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}
.sf-quick-order__status {
    margin: 9px 16px 0;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #f8fafc;
    color: #344054;
    font-size: 12.5px;
}
.sf-quick-order__status.is-error {
    border-color: rgba(180, 35, 24, .28);
    background: #fff4f3;
    color: #b42318;
}
.sf-quick-order__form {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}
.sf-quick-order__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "delivery product"
        "delivery review";
    align-content: start;
    gap: 12px 20px;
    padding: 14px 18px 18px;
}
.sf-quick-order__delivery {
    grid-area: delivery;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding-right: 20px;
    border-right: 1px solid #e5e7eb;
}
.sf-quick-order__section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.sf-quick-order__section-heading p {
    margin: 0 0 2px;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.sf-quick-order__section-heading h3,
.sf-quick-order__review-section h3,
.sf-quick-order__summary h3 {
    margin: 0;
    color: #111827;
    font-size: 14px;
    line-height: 1.25;
}
.sf-quick-order .sf-field {
    display: grid;
    gap: 4px;
}
.sf-quick-order .sf-field__label,
.sf-quick-order__fieldset legend {
    color: #20252d;
    font-size: 12.5px;
    font-weight: 750;
}
.sf-quick-order .sf-field__label em {
    color: #667085;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}
.sf-quick-order .sf-input {
    min-height: 44px;
    border-color: #bfc5ce;
    color: #111827;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-quick-order .sf-input:hover:not(:focus):not([aria-invalid="true"]) { border-color: #8f98a5; }
.sf-quick-order .sf-input:focus,
.sf-quick-order .sf-input:focus-visible {
    outline: none;
    border-color: #344054;
    box-shadow: 0 0 0 2px rgba(52, 64, 84, .14);
}
.sf-quick-order .sf-input[aria-invalid="true"] { border-color: #b42318; }
.sf-quick-order .sf-input[aria-invalid="true"]:focus,
.sf-quick-order .sf-input[aria-invalid="true"]:focus-visible {
    border-color: #b42318;
    box-shadow: 0 0 0 2px rgba(180, 35, 24, .12);
}
.sf-quick-order .sf-input::placeholder { color: #858e9d; }
.sf-quick-order textarea.sf-input {
    min-height: 68px;
    resize: vertical;
}
.sf-quick-order__helper {
    color: #667085;
    font-size: 11px;
    line-height: 1.3;
}
.sf-quick-order__fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.sf-quick-order__fieldset legend { margin-bottom: 6px; }
.sf-quick-order__zones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.sf-quick-order .sf-zone,
.sf-quick-order .sf-checkout__cod {
    min-height: 44px;
    border: 1px solid #c9ced6;
    border-radius: 8px;
    background: #fff;
    color: #111827;
}
.sf-quick-order .sf-zone {
    box-sizing: border-box;
    min-width: 0;
    min-height: 54px;
    gap: 8px;
    padding: 0 10px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.sf-quick-order .sf-zone:hover {
    border-color: #9aa2ad;
    background: #fafafa;
}
.sf-quick-order .sf-zone:has(input:checked),
.sf-quick-order .sf-checkout__cod:has(input:checked) {
    border-color: #20252d;
    background: #f3f4f6;
    box-shadow: inset 3px 0 0 var(--sf-gold);
}
.sf-quick-order .sf-zone:has(input:checked) { box-shadow: none; }
.sf-quick-order .sf-zone:has(input:focus-visible) {
    border-color: #344054;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 64, 84, .14);
}
.sf-quick-order .sf-zone input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0;
    appearance: none;
    border: 1.5px solid #7d8794;
    border-radius: 50%;
    background: #fff;
}
.sf-quick-order .sf-zone input:checked {
    border-color: #20252d;
    background: radial-gradient(circle, var(--sf-gold) 0 4px, #fff 4.5px);
}
.sf-quick-order .sf-zone input:focus,
.sf-quick-order .sf-zone input:focus-visible { outline: none; box-shadow: none; }
.sf-quick-order .sf-checkout__cod input { accent-color: var(--sf-gold); }
.sf-quick-order .sf-zone__body {
    min-width: 0;
    gap: 6px;
    padding: 0;
}
.sf-quick-order .sf-zone__name {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 11.5px;
    white-space: nowrap;
}
.sf-quick-order .sf-zone__charge {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 11px;
    white-space: nowrap;
}
.sf-quick-order__note > button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #20252d;
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
}
.sf-quick-order__note > button i { color: #b88900; }
.sf-quick-order__note > button span { color: #667085; font-weight: 600; }
.sf-quick-order__note [data-quick-order-note-panel] { margin-top: 2px; }
.sf-quick-order__product {
    grid-area: product;
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e0e3e8;
    border-radius: 9px;
    background: #f8f9fa;
}
.sf-quick-order__image {
    width: 64px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: #eceff3;
    color: #667085;
}
.sf-quick-order__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf-quick-order__product-copy { min-width: 0; }
.sf-quick-order__product-copy h3 {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    color: #111827;
    font-size: 13.5px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.sf-quick-order__product-meta,
.sf-quick-order__availability {
    margin: 3px 0 0;
    color: #667085;
    font-size: 11.5px;
    line-height: 1.3;
}
.sf-quick-order__availability {
    color: #16794a;
    font-weight: 750;
}
.sf-quick-order__selection-row {
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    color: #344054;
    font-size: 11.5px;
    font-weight: 700;
}
.sf-quick-order__selection-row > span:empty { display: none; }
.sf-quick-order__selection-row button,
.sf-quick-order__delivery-summary button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.sf-quick-order__quantity-block {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    padding-top: 5px;
    border-top: 1px solid #e0e3e8;
}
.sf-quick-order__qty {
    display: inline-grid;
    grid-template-columns: 32px 36px 32px;
    align-items: center;
    flex: 0 0 100px;
    width: 100px;
    height: 34px;
    overflow: hidden;
    border: 1px solid #c7ccd4;
    border-radius: 7px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.sf-quick-order__qty button,
.sf-quick-order__qty input {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #111827;
    font-size: 12.5px;
    line-height: 1;
    text-align: center;
}
.sf-quick-order__qty button { cursor: pointer; }
.sf-quick-order__qty input {
    border-inline: 1px solid #d9dde3;
    appearance: textfield;
}
.sf-quick-order .sf-quick-order__qty input.sf-input { min-height: 32px; }
.sf-quick-order__qty input::-webkit-inner-spin-button,
.sf-quick-order__qty input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.sf-quick-order__qty:hover { border-color: #8f98a5; background: #f8f9fa; }
.sf-quick-order__qty:hover button,
.sf-quick-order__qty:hover input { background: #f8f9fa; }
.sf-quick-order__qty button:disabled {
    color: #98a2b3;
    background: #f5f6f7;
    cursor: not-allowed;
}
.sf-quick-order__qty-context {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    margin-left: auto;
    color: #344054;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}
.sf-quick-order__qty-context > span { color: #667085; font-weight: 600; }
.sf-quick-order__qty-context > strong { color: #20252d; font-weight: 800; }
.sf-quick-order__quantity-block > .sf-field__error { flex-basis: 100%; margin: 0; }
.sf-quick-order__review {
    grid-area: review;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 11px;
}
.sf-quick-order__delivery-summary {
    display: none;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}
.sf-quick-order__delivery-summary dl {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
}
.sf-quick-order__delivery-summary dl div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 7px;
    font-size: 11.5px;
}
.sf-quick-order__delivery-summary dt { color: #667085; }
.sf-quick-order__delivery-summary dd { margin: 0; color: #20252d; font-weight: 700; }
.sf-quick-order__review-section,
.sf-quick-order__coupon-wrap,
.sf-quick-order__summary {
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}
.sf-quick-order__review-section:first-of-type { border-top: 0; padding-top: 0; }
.sf-quick-order__payments { display: grid; gap: 7px; margin-top: 7px; }
.sf-quick-order .sf-checkout__cod { padding: 8px 10px; }
.sf-quick-order .sf-checkout__cod strong { font-size: 12px; }
.sf-quick-order .sf-checkout__cod small { margin-top: 1px; font-size: 10.5px; }
.sf-quick-order__coupon-toggle {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    background: transparent;
    color: #20252d;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}
.sf-quick-order__coupon-toggle i {
    color: #b88900;
    transition: transform .18s ease;
}
.sf-quick-order__coupon-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.sf-quick-order__coupon-panel { padding-top: 2px; }
.sf-quick-order__coupon {
    display: flex;
    align-items: center;
    gap: 7px;
}
.sf-quick-order__coupon .sf-input {
    min-width: 0;
    flex: 1 1 auto;
    text-transform: uppercase;
}
.sf-quick-order__coupon .sf-btn {
    min-height: 44px;
    flex: 0 0 auto;
    border: 1px solid #20252d;
    background: #20252d;
    color: #fff;
}
.sf-quick-order__coupon-remove {
    min-height: 40px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #b42318;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.sf-quick-order__coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    color: #344054;
    font-size: 12px;
}
.sf-quick-order__coupon-applied > span:last-child { color: #16794a; font-weight: 800; }
.sf-quick-order__policy {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 0;
    border-block: 1px solid #e5e7eb;
    color: #475467;
    font-size: 11.5px;
    line-height: 1.4;
}
.sf-quick-order__policy > i { color: #b88900; margin-top: 2px; }
.sf-quick-order__policy p { margin: 0; }
.sf-quick-order__policy strong { display: block; color: #20252d; }
.sf-quick-order__policy a {
    color: #111827;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sf-quick-order__summary h3 { margin-bottom: 4px; }
.sf-quick-order__summary .sf-cart__row {
    min-height: 29px;
    padding-block: 5px;
    font-size: 12px;
}
.sf-quick-order__summary .sf-cart__row--total {
    margin-top: 3px;
    padding-top: 8px;
    font-size: 14px;
}
.sf-quick-order__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #dfe3e8;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .05);
}
.sf-quick-order__payable { flex: 0 0 auto; }
.sf-quick-order__payable small {
    display: block;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.sf-quick-order__payable strong {
    display: block;
    color: #111827;
    font-size: 17px;
    line-height: 1.15;
}
.sf-quick-order__footer-step {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.sf-quick-order__footer-step--delivery [data-quick-order-review],
.sf-quick-order__footer-step--review .sf-quick-order__back-action { display: none; }
.sf-quick-order__fallback {
    color: #20252d;
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.sf-quick-order__footer .sf-btn {
    min-width: 154px;
    min-height: 42px;
    justify-content: center;
    white-space: nowrap;
}
.sf-quick-order__back-action {
    min-width: 76px !important;
    border: 1px solid #c9ced6;
    background: #fff;
    color: #20252d;
}
.sf-quick-order.is-busy [data-quick-order-checkout-link] {
    opacity: .65;
    pointer-events: none;
}
.sf-quick-order button:focus-visible,
.sf-quick-order a:focus-visible {
    outline: 3px solid rgba(17, 24, 39, .7);
    outline-offset: 2px;
}
.sf-quick-order__qty:has(:focus-visible) {
    border-color: #344054;
    box-shadow: 0 0 0 2px rgba(52, 64, 84, .14);
}
.sf-quick-order__qty button:focus-visible,
.sf-quick-order .sf-quick-order__qty input.sf-input:focus,
.sf-quick-order .sf-quick-order__qty input.sf-input:focus-visible {
    outline: 0;
    border-color: #d9dde3;
    box-shadow: none;
}
.sf-quick-order__qty:has(input[aria-invalid="true"]) { border-color: #b42318; }
.sf-quick-order__qty:has(input[aria-invalid="true"]:focus-visible) {
    box-shadow: 0 0 0 2px rgba(180, 35, 24, .12);
}

@media (max-width: 760px) {
    .sf-quick-order {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }
    .sf-quick-order__dialog {
        width: calc(100vw - 24px);
        max-height: 86dvh;
        border-radius: 16px;
    }
    .sf-quick-order__header {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 8px;
        padding: 9px 50px 9px 10px;
    }
    .sf-quick-order__brand-badge {
        width: 110px;
        height: 38px;
    }
    .sf-quick-order__brand-badge img { max-width: 98px; height: 28px; }
    .sf-quick-order__header-back { width: 34px; height: 34px; }
    .sf-quick-order__heading h2 { font-size: 15px; }
    .sf-quick-order__heading > p:last-child { font-size: 10.5px; }
    .sf-quick-order[data-quick-order-step="review"] .sf-quick-order__eyebrow,
    .sf-quick-order[data-quick-order-step="review"] .sf-quick-order__heading > p:last-child { display: none; }
    .sf-quick-order__close { right: 9px; width: 34px; height: 34px; }
    .sf-quick-order__status { margin: 7px 10px 0; }
    .sf-quick-order__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "product"
            "delivery"
            "review";
        gap: 10px;
        padding: 10px 11px 14px;
    }
    .sf-quick-order[data-quick-order-step="delivery"] .sf-quick-order__review,
    .sf-quick-order[data-quick-order-step="review"] .sf-quick-order__delivery { display: none; }
    .sf-quick-order__delivery {
        gap: 10px;
        padding-right: 0;
        border-right: 0;
    }
    .sf-quick-order__delivery > .sf-quick-order__section-heading { display: none; }
    .sf-quick-order__zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-quick-order__product {
        grid-template-columns: 62px minmax(0, 1fr);
        padding: 9px;
    }
    .sf-quick-order__image { width: 62px; }
    .sf-quick-order__product-copy h3 { -webkit-line-clamp: 2; }
    .sf-quick-order__delivery-summary { display: block; }
    .sf-quick-order__review { gap: 10px; }
    .sf-quick-order__footer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 8px 10px;
        padding: 9px 11px calc(9px + env(safe-area-inset-bottom));
    }
    .sf-quick-order__footer-step { min-width: 0; }
    .sf-quick-order__footer-step--delivery {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }
    .sf-quick-order__footer-step--delivery [data-quick-order-review] {
        display: inline-flex;
        grid-row: 1;
        width: 100%;
    }
    .sf-quick-order__footer-step--delivery .sf-quick-order__fallback {
        grid-row: 2;
        text-align: center;
    }
    .sf-quick-order__footer-step--review {
        display: grid;
        grid-template-columns: auto minmax(132px, 1fr);
        width: 100%;
    }
    .sf-quick-order__footer-step--review .sf-quick-order__back-action { display: inline-flex; }
    .sf-quick-order__footer .sf-btn {
        min-width: 0;
        width: 100%;
        padding-inline: 10px;
        font-size: 13px;
    }
    .sf-quick-order[data-quick-order-step="delivery"] .sf-quick-order__footer-step--review,
    .sf-quick-order[data-quick-order-step="review"] .sf-quick-order__footer-step--delivery { display: none; }
}

@media (max-width: 374px) {
    .sf-quick-order__header { gap: 6px; }
    .sf-quick-order__heading > p:last-child { display: none; }
    .sf-quick-order__footer { grid-template-columns: 68px minmax(0, 1fr); }
    .sf-quick-order__fallback { font-size: 11.5px; }
}

@media (max-width: 340px) {
    .sf-quick-order__zones { grid-template-columns: 1fr; }
}

@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: var(--sf-header-height);
        --sf-bottom-nav-offset: 0px;
        --sf-bottom-nav-clearance: calc(var(--sf-bottom-nav-height) + 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: 8px;
    }
    /* Keep the dashboard's final Recent Orders card fully scrollable above the
       fixed navigation, including devices with a bottom safe area. */
    .sf-account--dashboard { padding-bottom: var(--sf-page-end); }
    /* 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) + var(--sf-fixed-ui-gap) + 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: var(--sf-font);
    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);
}

/* Phone/WhatsApp numbers and site paths inside a reply are real links. Gold on
   the dark bot bubble, with a comfortable tap target on a phone. */
.sf-chat-message--bot .sf-chat-message__bubble a {
    display: inline-block;
    min-height: 24px;
    padding: 1px 0;
    color: var(--sf-gold);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sf-chat-message--bot .sf-chat-message__bubble a:hover,
.sf-chat-message--bot .sf-chat-message__bubble a:focus-visible {
    color: var(--sf-gold-soft);
}

.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; }

    /* dvh, not vh: 100vh is the toolbar-retracted viewport on mobile Safari and
       Chrome, so a vh-based cap overestimates the space actually available while
       the URL bar is showing. Matches the dvh already used by the cart drawer,
       filter sheet and quick-order sheet.

       --sf-keyboard-inset is set by chat-widget.js from visualViewport while the
       on-screen keyboard is open, and is 0px otherwise. Lifting the panel by it
       keeps the composer above the keyboard instead of behind it. */
    .sf-support__panel {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(
            var(--sf-keyboard-inset, 0px)
            + 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(48dvh, calc(100dvh - var(--sf-keyboard-inset, 0px) - var(--sf-bottom-nav-height) - var(--sf-bottom-nav-offset, 8px) - 48px - env(safe-area-inset-bottom)));
        border-radius: 16px;
        transform: translateX(-50%);
        transition: bottom .18s ease, max-height .18s ease;
    }

    /* With the keyboard up the bottom nav is off-screen anyway, so its height is
       no longer worth reserving — reclaim it for the panel anchor. */
    .sf-support.has-keyboard .sf-support__panel {
        bottom: calc(var(--sf-keyboard-inset, 0px) + 8px + env(safe-area-inset-bottom));
        max-height: calc(100dvh - var(--sf-keyboard-inset, 0px) - 16px - env(safe-area-inset-bottom));
    }

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

    /* The message list is the only part that should absorb the squeeze; the head
       and composer stay put so the input is always reachable. */
    .sf-support.has-keyboard .sf-support__messages {
        min-height: 0;
        max-height: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .sf-support__panel { transition: none; }
    }

    .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-block: var(--sf-page-start) var(--sf-page-end); --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__managed-content { white-space: normal; overflow-wrap: anywhere; }
.sf-doc__faq { display: grid; gap: 12px; }
.sf-doc__faq-item { border: 1px solid var(--sf-border); border-radius: 10px; background: var(--sf-surface); overflow: hidden; }
.sf-doc__faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 16px; list-style-position: inside; }
.sf-doc__faq-item p { border-top: 1px solid var(--sf-border); margin: 0; padding: 14px 16px; overflow-wrap: anywhere; }
.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; }
.sf-doc__notice {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid #ead79a;
    border-left: 4px solid var(--sf-gold);
    border-radius: var(--sf-radius-sm);
    background: #fffaf0;
    color: #3c2a12;
    font-size: 14px;
    line-height: 1.65;
}
.sf-doc__notice strong { color: #1f1607; }
/* 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-block: 20px 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, var(--sf-black), var(--sf-black));
}
.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: 700; 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: 700; 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; }
}

/* ---------------------------------------------------------------------------
   Per-order review landing (signed link sent by SMS after delivery).
   Mobile-first: one product per row, forms stacked; two columns from 720px.
   --------------------------------------------------------------------------- */
.sf-order-review__note {
    margin: 8px 0 0;
    color: var(--sf-muted);
    font-size: 13px;
}

.sf-review-flash--error {
    background: rgba(224, 83, 61, .12);
    border-color: rgba(224, 83, 61, .3);
    color: #e0533d;
}

.sf-order-review__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sf-space-4);
    margin-top: var(--sf-space-4);
}

.sf-order-review__item {
    min-width: 0;
    padding: var(--sf-space-4);
    border: 1px solid rgba(var(--sf-gold-rgb), .18);
    border-radius: var(--sf-radius);
    background: var(--sf-surface-2);
}

.sf-order-review__product {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    min-width: 0;
}

.sf-order-review__thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: var(--sf-radius-sm);
    object-fit: cover;
}

.sf-order-review__thumb--empty {
    display: block;
    background: rgba(var(--sf-gold-rgb), .08);
}

.sf-order-review__titles {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sf-order-review__name {
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sf-order-review__qty {
    color: var(--sf-muted);
    font-size: 13px;
}

.sf-order-review__done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2);
    margin: var(--sf-space-3) 0 0;
    color: var(--sf-muted);
    font-size: 13px;
}

/* The form already carries its own top margin inside a product card. */
.sf-order-review__item .sf-review-form {
    margin-top: var(--sf-space-3);
}

.sf-order-review__foot {
    margin-top: var(--sf-space-5, 20px);
    color: var(--sf-muted);
    font-size: 13px;
}

@media (min-width: 720px) {
    .sf-order-review__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}