/*
 * OrdaMe v8 -- a wide-contained, edge-aligned, mobile-complete marketplace template.
 *
 * Built on the platform's proven `sf-*` structural CSS (sections A-F,
 * copied from hello-vendor/style.css - the current, fully polished
 * reference implementation, not the older resources/css/storefront/
 * default.css, which predates this project's mobile-nav/search/cart
 * fixes) - only the `:root` design tokens and an additive "identity
 * accents" section (G) make this template's visual identity genuinely its
 * own. A template's CSS never redefines the accent color or ink/surface/
 * border neutrals (those are store-level and platform-shared
 * respectively) - every distinct choice here is typography, shape,
 * shadow, and considered detail work: an oversized condensed display
 * face, near-flat sharp corners, and full-bleed black section banners
 * instead of a soft card-and-shadow treatment.
 *
 * CSS-only (no layouts/*.twig) - no search-modal or minimal-footer
 * overrides, unlike Hello Vendor; the platform's own default search bar
 * and multi-column footer render, styled by sections A-F plus this file's
 * own accents.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

/* ==========================================================================
   A. Tokens, reset, base
   ========================================================================== */

:root {
    --font-headline: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Near-flat, sharp-cornered - the opposite instinct from a soft,
       rounded template: this identity reads as a bold printed poster /
       menu board, not a plush card stack. */
    --sf-radius-sm: 8px;
    --sf-radius-md: 12px;
    --sf-radius-lg: 18px;
    --sf-radius-pill: 999px;

    --sf-space-1: 4px;
    --sf-space-2: 8px;
    --sf-space-3: 12px;
    --sf-space-4: 18px;
    --sf-space-5: 28px;
    --sf-space-6: 40px;
    --sf-space-7: 56px;
    --sf-space-8: 88px;

    /* Minimal, crisp elevation rather than soft diffuse blur - matches
       the flat poster/menu-board identity above. */
    --sf-shadow-sm: 0 2px 10px rgba(28, 45, 82, 0.07);
    --sf-shadow-md: 0 10px 28px rgba(28, 45, 82, 0.11);
    --sf-shadow-lg: 0 22px 55px rgba(28, 45, 82, 0.15);

    --sf-border: rgba(var(--dashed-line), 0.7);
    --sf-ink: rgb(var(--dark-text));
    --sf-muted: rgba(var(--content-color), 0.85);
    --sf-surface: #fff;
    --sf-surface-muted: rgba(var(--box-bg), 0.32);

    --sf-container: 1320px;
    --sf-header-h: 72px;
}

/* ==========================================================================
   M. OrdaMe v8 — wide contained content, edge-aligned chrome, mobile drawers
   ========================================================================== */

:root {
    --ordame-v8-gutter: clamp(12px, 2vw, 28px);
    --ordame-v8-content: 1480px;
    --ordame-radius: 14px;
}

/* The content container stays comfortably wide without becoming full-width.
   Full-bleed media sections keep their own backgrounds outside this element. */
.sf-container,
.container {
    width: min(100%, var(--ordame-v8-content));
    max-width: var(--ordame-v8-content);
    margin-inline: auto;
    padding-inline: var(--ordame-v8-gutter);
}

.sf-hero,
.sf-banners {
    width: 100%;
    margin-inline: 0;
}

.sf-search,
.sf-products,
.sf-highlights,
.sf-checkout,
.sf-account,
.sf-blog-index,
.sf-blog-article,
.sf-static,
.thankyou-section,
.sf-cat-nav {
    width: min(calc(100% - (var(--ordame-v8-gutter) * 2)), var(--ordame-v8-content));
    margin-inline: auto;
}

/* Header and footer are the page chrome: neither floats nor rounds away from
   the viewport edges. */
.sf-header {
    top: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
}

.sf-footer {
    width: 100%;
    margin-bottom: 0;
    border-radius: 0;
}

body:has(.sf-cat-nav.is-sticky) .sf-header {
    top: auto;
}

.sf-cat-nav.is-sticky {
    top: 0;
}

/* One button language throughout: compact corners and a darker shade of the
   existing color on hover, never an unrelated black fill. */
.sf-btn,
.sf-hero .sf-btn,
.sf-section-head__link,
.sf-card__actions .sf-btn,
.sf-card__actions .sf-btn--icon,
.thankyou-section .btn {
    border-radius: 8px !important;
}

.sf-btn--primary:hover,
.sf-hero .sf-btn:hover,
.theme-btn:hover {
    background-color: rgba(var(--theme-color), .88) !important;
    color: #fff !important;
    filter: none;
}

/* Search is the intentional exception to the compact-radius control system. */
.sf-search__row {
    border-radius: 999px;
}

.sf-search__input,
.sf-search__submit,
.sf-search__filter-trigger {
    border-radius: 999px;
}

/* Layered category artwork stays theme-aware while adding depth and detail. */
.sf-product-section .sf-section-head {
    min-height: 96px;
    border: 1px solid rgba(255, 255, 255, .2);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .24) 0 3px, transparent 4px),
        radial-gradient(circle at 86% 75%, rgba(255, 255, 255, .18) 0 4px, transparent 5px),
        linear-gradient(125deg, rgba(var(--theme-color), 1), rgba(var(--theme-color2), .88));
}

.sf-product-section .sf-section-head::before {
    width: 190px;
    height: 190px;
    left: -38px;
    top: -126px;
    border-width: 24px;
    border-color: rgba(255, 255, 255, .09);
}

.sf-product-section .sf-section-head::after {
    width: 150px;
    height: 150px;
    right: -26px;
    bottom: -104px;
    border-width: 18px;
    border-color: rgba(255, 255, 255, .1);
}

.sf-product-section .sf-section-head__title {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

/* Receipt and address refinements. */
.thankyou-review-prompt h5 {
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    line-height: 1.25;
}

.sf-address-card__head,
.sf-address-card.is-active .sf-address-card__head {
    background: transparent !important;
}

@media (max-width: 767.98px) {
    :root {
        --ordame-v8-gutter: 8px;
    }

    html {
        scroll-padding-top: calc(66px + env(safe-area-inset-top));
    }

    .sf-container,
    .container {
        padding-inline: 8px;
    }

    .sf-header {
        z-index: 1050;
        top: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .sf-header__row {
        height: 64px;
    }

    .sf-hero,
    .sf-banners {
        width: 100%;
        margin-inline: 0;
    }

    .sf-search,
    .sf-products,
    .sf-checkout,
    .sf-account,
    .sf-blog-index,
    .sf-blog-article,
    .sf-static,
    .thankyou-section,
    .sf-cat-nav {
        width: calc(100% - 16px);
    }

    .sf-product-page {
        position: relative;
        z-index: 1;
        padding-top: 8px;
    }

    .sf-mobile-nav {
        padding: 0 0 0 20vw;
        background: rgba(var(--dark-text), .42);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .sf-mobile-nav__panel {
        right: 0;
        left: auto;
        width: 80vw;
        max-width: none;
        padding: calc(16px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
        border-radius: 0;
        transform: translateX(100%);
    }

    .sf-mobile-nav.is-open .sf-mobile-nav__panel {
        transform: translateX(0);
    }

    .sf-mobile-nav__links {
        gap: 3px;
    }

    .sf-mobile-nav__link {
        width: 100%;
        min-height: 48px;
        border-radius: 0;
    }

    /* Cart mirrors the navigation drawer. The platform backdrop supplies the
       remaining 20%; blur keeps context visible without competing with it. */
    .sf-cart {
        left: auto;
        right: 0;
        width: 80vw;
        max-width: none;
        height: 100dvh;
        border-radius: 0;
    }

    body:has(.sf-cart.show) .sf-backdrop,
    body:has(.sf-cart.show) .modal-backdrop {
        background: rgba(var(--dark-text), .42);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .sf-qty__btn {
        background: rgba(var(--theme-color), .12);
        color: rgba(var(--theme-color), 1);
    }

    .sf-back-to-top {
        bottom: calc(10px + env(safe-area-inset-bottom));
        transition: bottom .35s ease, opacity .2s ease;
    }

    body.sf-mobile-order-bar-visible .sf-back-to-top {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }

    /* Bootstrap's responsive wrapper and the template receipt wrapper both
       become touch-scroll surfaces; table cells are never collapsed. */
    .thankyou-items-wrap,
    .thankyou-items-wrap .table-responsive,
    .thankyou-receipt-card .table-responsive {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    .thankyou-receipt-card .table {
        display: table;
        width: max-content;
        min-width: 620px;
        max-width: none;
    }

    .thankyou-receipt-card thead {
        display: table-header-group;
    }

    .thankyou-receipt-card tbody {
        display: table-row-group;
    }

    .thankyou-receipt-card tr {
        display: table-row;
    }

    .thankyou-receipt-card th,
    .thankyou-receipt-card td {
        display: table-cell !important;
        white-space: normal;
    }

    .sf-product-section .sf-section-head {
        min-height: 78px;
    }
}

body {
    background: var(--sf-surface-muted);
}

/* Sharp stays sharp on mobile too - unlike a rounded identity, there's no
   "too heavy at small sizes" problem to correct for here, so this
   override just keeps the same near-flat scale rather than halving it. */
@media (max-width: 767.98px) {
    :root {
        --sf-radius-sm: 7px;
        --sf-radius-md: 10px;
        --sf-radius-lg: 14px;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--sf-ink);
    background: var(--sf-surface);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 var(--sf-space-3);
    text-wrap: balance;
}

p { margin: 0 0 var(--sf-space-3); }
::selection { background: rgba(var(--theme-color), 0.22); }

.is-hidden { display: none !important; }
.sf-required-mark { color: rgba(var(--theme-danger-color), 1); }
.sf-text-success { color: rgba(39, 125, 42, 1); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.sf-container {
    width: 100%;
    max-width: var(--sf-container);
    margin: 0 auto;
    padding: 0 var(--sf-space-4);
}

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    border-radius: var(--sf-radius-pill);
    padding: 13px 26px;
    font-weight: 600;
    font-size: 0.92rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}
.sf-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sf-btn i { font-size: 16px; flex: 0 0 auto; }
.sf-btn:disabled, .sf-btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sf-btn--block { width: 100%; }
.sf-btn--sm { padding: 8px 16px; font-size: 0.82rem; }
.sf-btn--primary { background: rgba(var(--theme-color), 1); color: #fff; }
.sf-btn--primary:hover { box-shadow: var(--sf-shadow-md); transform: translateY(-1px); }
.sf-btn--dark { background: rgb(var(--dark-text)); color: #fff; }
.sf-btn--dark:hover { transform: translateY(-1px); }
.sf-btn--light { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf-btn--light:hover { background: #fff; color: var(--sf-ink); }
.sf-btn--ghost { background: transparent; color: var(--sf-ink); border: 1px solid var(--sf-border); }
.sf-btn--ghost:hover { border-color: rgba(var(--theme-color), 0.5); color: rgba(var(--theme-color), 1); }
.sf-btn--whatsapp { background: rgba(var(--whatsapp-color), 1); color: #fff; }
.sf-btn--messenger { background: #0084ff; color: #fff; }
.sf-btn--icon { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--sf-surface-muted); color: var(--sf-ink); }
.sf-btn--icon.sf-btn--whatsapp { background: rgba(var(--whatsapp-color), 1); color: #fff; }
.sf-btn--icon.sf-btn--messenger { background: #0084ff; color: #fff; }

.sf-spinner {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sf-spin 0.6s linear infinite;
}
.sf-btn.is-loading .sf-spinner { display: inline-block; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

.sf-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 4px 10px;
    border-radius: var(--sf-radius-pill);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase;
}
.sf-badge--sale { background: rgba(var(--theme-danger-color), 1); color: #fff; }
.sf-badge--dark { background: rgb(21, 23, 26); color: #fff; }
.sf-badge--stacked { top: 40px; }

/* A real, decent-looking inline status pill - unlike .sf-badge above
   (absolutely positioned, built for a product card's corner), this sits
   in normal flow next to text: order/review status, a "Default" address
   tag, the thank-you page's order status. */
.sf-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px;
    border-radius: var(--sf-radius-pill);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    background: var(--sf-surface-muted); color: var(--sf-ink);
}
.sf-pill--primary { background: rgba(var(--theme-color), 0.12); color: rgba(var(--theme-color), 1); }
.sf-pill--success { background: rgba(39, 125, 42, 0.12); color: rgba(39, 125, 42, 1); }
.sf-pill--warning { background: rgba(var(--theme-warning-color), 0.2); color: rgb(133, 92, 0); }
.sf-pill--danger { background: rgba(var(--theme-danger-color), 0.12); color: rgba(var(--theme-danger-color), 1); }
.sf-pill--info { background: rgba(31, 111, 235, 0.12); color: rgb(31, 111, 235); }
.sf-pill--secondary { background: var(--sf-surface-muted); color: var(--sf-muted); }

/* ==========================================================================
   B. Panel mechanics (drawer / dialog) + shared quick-view/checkout atoms
   ========================================================================== */

.sf-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 18, 22, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1040;
}
.sf-backdrop.is-visible { opacity: 1; pointer-events: auto; }
body.sf-scroll-locked { overflow: hidden; }

.sf-panel-close {
    width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sf-ink);
}
.sf-panel-close svg { width: 18px; height: 18px; }
.sf-panel-close:hover { background: var(--sf-surface-muted); }
.sf-panel-close--sm { width: 32px; height: 32px; }

/* Drawers (cart + quick-view): slide in from the right */
.sf-cart, .sf-quickview {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 1055;
    width: min(460px, 100vw);
    background: var(--sf-surface);
    box-shadow: var(--sf-shadow-lg);
    display: flex; flex-direction: column;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.2,.7,.3,1), visibility 0.32s;
}
.sf-cart.show, .sf-quickview.show { visibility: visible; transform: translateX(0); }
.sf-quickview { width: min(560px, 100vw); }

/* Centered dialog (operating-hours notice) */
.sf-dialog {
    position: fixed; inset: 0; z-index: 1050;
    display: none;
    overflow-y: auto;
    padding: var(--sf-space-4);
}
.sf-dialog.show { display: block; }
.sf-dialog__panel {
    max-width: 460px; margin: 10vh auto;
    background: var(--sf-surface);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-lg);
    padding: var(--sf-space-5);
    transform: translateY(16px); opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.sf-dialog.show .sf-dialog__panel { transform: translateY(0); opacity: 1; }
.sf-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sf-space-3); }
.sf-dialog__kicker { color: rgba(var(--theme-color), 1); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.sf-dialog__subtitle { color: var(--sf-muted); margin: 0; }
.sf-dialog__body { margin-top: var(--sf-space-4); }

.sf-filter-list { display: flex; flex-direction: column; gap: var(--sf-space-2); }
.sf-filter-option { display: flex; align-items: center; gap: var(--sf-space-3); padding: var(--sf-space-2) 0; cursor: pointer; }
.sf-filter-option.is-disabled { opacity: 0.5; cursor: not-allowed; }
.sf-filter-option small { display: block; color: var(--sf-muted); font-weight: 400; font-size: 0.76rem; }
.sf-filter-check { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-option__mark { position: relative; flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--sf-border); background: var(--sf-surface); }
.sf-option__mark--square { border-radius: 6px; }
.sf-filter-check:checked + .sf-option__mark { background: rgba(var(--theme-color), 1); border-color: rgba(var(--theme-color), 1); }
.sf-filter-check:checked + .sf-option__mark::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Quick-view / cart shared internals */
.sf-cart__head, .sf-quickview__panel { display: flex; flex-direction: column; height: 100%; }
.sf-cart__head { flex: 0 0 auto; height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--sf-space-4) var(--sf-space-5); border-bottom: 1px solid var(--sf-border); }
.sf-cart__title { font-size: 1.05rem; margin: 0; display: flex; align-items: baseline; gap: 6px; }
.sf-cart__count { color: var(--sf-muted); font-weight: 500; font-size: 0.86rem; }
.sf-cart__scroll { flex: 1; overflow-y: auto; padding: var(--sf-space-4) var(--sf-space-5); }
.sf-cart__empty { text-align: center; padding: var(--sf-space-7) var(--sf-space-4); color: var(--sf-muted); }
.sf-cart__empty svg { width: 48px; height: 48px; margin: 0 auto var(--sf-space-3); opacity: 0.5; }
.sf-cart__items { display: flex; flex-direction: column; gap: var(--sf-space-4); }
.sf-cart__summary { border-top: 1px solid var(--sf-border); padding: var(--sf-space-4) var(--sf-space-5) var(--sf-space-5); }
.sf-cart__row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; color: var(--sf-muted); }
.sf-cart__row--total { font-weight: 800; color: var(--sf-ink); font-size: 1.05rem; }

/* Row 1: image, then the title starting right beside it (not the qty
   stepper stacked under the image - reversed per explicit feedback).
   Row 2: quantity stepper and edit/remove actions together, in their own
   row below. */
.sf-cart-item { display: flex; flex-direction: column; gap: var(--sf-space-2); padding: var(--sf-space-3); border-radius: var(--sf-radius-md); background: var(--sf-surface-muted); }
.sf-cart-item__top { display: flex; align-items: flex-start; gap: var(--sf-space-3); }
.sf-cart-item__thumb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: var(--sf-radius-sm); overflow: hidden; background: var(--sf-surface-muted); }
.sf-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-item__info { flex: 1; min-width: 0; }
.sf-cart-item__title { font-size: 0.92rem; font-weight: 700; margin: 0; }
/* block (not inline) - the price sits on its own line under the title,
   not sharing a row with it. */
.sf-cart-item__price { display: block; color: rgba(var(--theme-color), 1); font-weight: 700; font-size: 0.86rem; margin-top: 2px; }
.sf-cart-item__options { font-size: 0.78rem; color: var(--sf-muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sf-cart-item__extras-toggle { font-size: 0.78rem; color: rgba(var(--theme-color), 1); margin-top: 4px; text-decoration: underline; text-underline-offset: 2px; }
.sf-cart-item__note { font-size: 0.78rem; color: var(--sf-muted); margin: 4px 0 0; font-style: italic; }
.sf-cart-item__footer { display: flex; align-items: center; justify-content: space-between; }
.sf-cart-item__actions { display: flex; align-items: center; gap: 6px; }
.sf-cart-item__action {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sf-muted);
}
.sf-cart-item__action svg { width: 15px; height: 15px; }
.sf-cart-item__action i { font-size: 14px; line-height: 1; }
.sf-cart-item__action:hover { background: var(--sf-surface-muted); }
.sf-cart-item__remove:hover { color: rgba(var(--theme-danger-color), 1); }
.sf-cart-item__edit:hover { color: rgba(var(--theme-color), 1); }

/* The whole pill is white (padding on the pill itself, not just its
   background), not just the narrow number field in the middle - the +/-
   buttons sit transparent on top of that same white, with standard
   padding on every side so they don't touch the pill's own border. */
.sf-qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-pill); background: var(--sf-surface); }
.sf-qty__btn {
    width: 38px; height: 38px; border-radius: 50%; font-size: 1.1rem; line-height: 1;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}
.sf-qty__btn:hover:not(:disabled) { background: rgba(var(--theme-color), 0.12); color: rgba(var(--theme-color), 1); }
.sf-qty__btn:disabled { opacity: 0.35; }
.sf-qty__value { width: 40px; text-align: center; font-weight: 700; border: none; background: transparent; appearance: textfield; -moz-appearance: textfield; }
.sf-qty__value::-webkit-inner-spin-button, .sf-qty__value::-webkit-outer-spin-button { -webkit-appearance: none; }
.sf-qty--sm { transform: scale(0.88); transform-origin: left center; }

/* Quick-view specific - media (fixed-width, non-scrolling) beside a
   scrolling body, not one column with everything stacked in the same
   scroll area. */
.sf-quickview__main { display: flex; flex: 1; min-height: 0; }
/* The right column (scrolling body + action-bar) is one flex item next
   to the media column - the action-bar lives inside it now, so it's
   confined to this column's own width instead of stretching across the
   media column too. */
.sf-quickview__right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sf-quickview__scroll { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
/* Real inset padding on every side (matching the body/action-bar columns
   next to it) - the frame never sits flush against the modal's own outer
   border. Confirmed correct twice now - do not remove this again without
   an explicit, unambiguous request to do so. */
.sf-quickview__media { position: relative; flex: 0 0 42%; display: flex; flex-direction: column; padding: var(--sf-space-5); background: var(--sf-surface); }
/* Always a perfect square, at any width - the frame's own aspect-ratio
   (not flex:1 filling whatever's left) is what guarantees that. The main
   image stays fully visible (contain, on a light muted background) so
   nothing is ever cropped out of view - only the thumbnail strip below
   (a different, deliberately cropped preview) uses cover. */
.sf-quickview__media-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--sf-radius-md); background: var(--sf-surface-muted); }
.sf-quickview__image, .sf-quickview__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    border: none;
}
.sf-quickview__media-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--sf-ink);
    z-index: 1;
    transition: background 0.2s ease;
}
.sf-quickview__media-arrow:hover { background: #fff; }
.sf-quickview__media-arrow--prev { left: var(--sf-space-3); }
.sf-quickview__media-arrow--next { right: var(--sf-space-3); }
.sf-quickview__media-arrow svg { width: 18px; height: 18px; }
.sf-quickview__media-zoom {
    position: absolute;
    bottom: var(--sf-space-3);
    right: var(--sf-space-3);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--sf-ink);
    z-index: 1;
    transition: background 0.2s ease;
}
.sf-quickview__media-zoom:hover { background: #fff; }
.sf-quickview__media-zoom svg { width: 16px; height: 16px; }
/* The parent now supplies its own inset padding on every side (see
   .sf-quickview__media above) - this only needs a small top gap, not the
   base rule's own horizontal padding too, which would double up the side
   inset (parent's 28px + this rule's own 28px) and visibly push the
   thumbnail row in further than the main image above it. */
.sf-quickview__media .sf-thumb-strip { flex: 0 0 auto; padding: var(--sf-space-3) 0 0; }
.sf-thumb-strip { display: flex; gap: 8px; padding: var(--sf-space-3) var(--sf-space-5) 0; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 767.98px) {
    .sf-quickview__main { flex-direction: column; }
    .sf-quickview__media { flex: 0 0 auto; }
}

/* Full-view/zoom lightbox - matches the dashboard's own image lightbox
   (dashboard-v2.css's .dv2-lightbox*): a full-viewport dark stage with
   prev/next/close floating in the gutter at the screen's edges, not
   overlaid on the image. Opened from inside the quick-view (.sf-quickview
   is z-index 1055, higher than the base .sf-dialog's 1050) - needs its
   own higher z-index or it would silently render behind the already-open
   modal. product-detail.js toggles a --zoomed-N class for a simple,
   discrete zoom (1x/1.5x/2x) rather than free-form pinch/drag panning. */
/* The base .sf-dialog rule (shared by the cart drawer/quickview/search
   modal too) puts padding on the outer fixed/inset:0 container itself -
   right for those narrower centered panels, but it meant .sf-dialog__panel
   below (already width/height: 100%) was only ever 100% of the space
   left AFTER that padding, not the true screen edges - the stage/image
   sizing fix alone couldn't remove a gap that started one layer further
   out. Zeroed here, specifically for the lightbox, not the shared rule
   every other dialog still needs. */
.sf-media-lightbox { z-index: 1060; padding: 0; }
/* overflow: hidden here (not on the smaller stage below) is what actually
   stops a zoomed-in image from ever growing the page - the panel already
   covers the full viewport, so clipping at this level means "never past
   the browser window" while still letting a zoomed image visually spill
   past its own, smaller stage box as you pan around it. */
.sf-media-lightbox .sf-dialog__panel {
    max-width: none; width: 100%; height: 100%; margin: 0;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 11, 15, 0.92);
    border-radius: 0;
    overflow: hidden;
}
/* A moderate, centered box for the resting (1x) view - not stretched to
   fill the whole viewport height. Zooming (wheel or the +/- buttons) and
   dragging to pan both scale/translate the image itself well past this
   box's own bounds; only the panel above clips that. */
.sf-media-lightbox__stage { max-width: 100vw; max-height: 82vh; }
.sf-media-lightbox__image {
    max-width: 100%; max-height: 82vh;
    object-fit: contain;
    transition: transform 0.2s ease;
    transform: translate(0, 0) scale(1);
    cursor: zoom-in;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
.sf-media-lightbox__image.is-zoomed { cursor: grab; }
.sf-media-lightbox__image.is-dragging { transition: none; cursor: grabbing; }
/* A video isn't zoomable/pannable the way a photo is - a fixed 16:9 box,
   no transform/cursor treatment, shown instead of .sf-media-lightbox__image
   (never both at once) whenever the product's video occupies this slide. */
.sf-media-lightbox__video { width: min(85vw, 1000px); max-width: 100%; max-height: 82vh; aspect-ratio: 16 / 9; border: none; }
.sf-media-lightbox__close,
.sf-media-lightbox__nav,
.sf-media-lightbox__zoom-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.sf-media-lightbox__close:hover,
.sf-media-lightbox__nav:hover,
.sf-media-lightbox__zoom-btn:hover { background: rgba(255, 255, 255, 0.22); }
/* Zoom in/out sit in the same top-right row as the close button (just
   before it), not floating over the image lower down. */
.sf-media-lightbox__top-controls { position: absolute; top: var(--sf-space-5); right: var(--sf-space-5); display: flex; align-items: center; gap: var(--sf-space-2); z-index: 1; }
.sf-media-lightbox__close { width: 40px; height: 40px; }
.sf-media-lightbox__close svg { width: 18px; height: 18px; }
.sf-media-lightbox__zoom-btn { width: 40px; height: 40px; }
.sf-media-lightbox__zoom-btn svg { width: 18px; height: 18px; }
.sf-media-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.sf-media-lightbox__nav svg { width: 20px; height: 20px; }
.sf-media-lightbox__nav--prev { left: var(--sf-space-5); }
.sf-media-lightbox__nav--next { right: var(--sf-space-5); }
/* All images as real thumbnails across the bottom of the stage - reuses
   .sf-thumb-strip/.sf-thumb's own sizing, just repositioned/recolored
   for the lightbox's dark, full-viewport background. */
.sf-media-lightbox__thumbs {
    position: absolute; bottom: var(--sf-space-5); left: 50%; transform: translateX(-50%);
    max-width: 80vw;
    padding: 0;
    justify-content: center;
}
.sf-media-lightbox__thumbs .sf-thumb { border-color: rgba(255, 255, 255, 0.3); }
.sf-media-lightbox__thumbs .sf-thumb.is-active { border-color: #fff; opacity: 1; }
@media (max-width: 575.98px) {
    .sf-media-lightbox__nav--prev { left: var(--sf-space-2); }
    .sf-media-lightbox__nav--next { right: var(--sf-space-2); }
    .sf-media-lightbox__top-controls { top: var(--sf-space-2); right: var(--sf-space-2); }
}

/* Description/Reviews tabs (shared by the quick-view and product page) */
.sf-pd-description { margin-top: var(--sf-space-5); border-top: 1px solid var(--sf-border); padding-top: var(--sf-space-4); }
.sf-pd-description__label { color: var(--sf-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--sf-space-2); }
.sf-thumb-strip::-webkit-scrollbar { display: none; }
/* .sf-thumb is a real <button> - explicit padding: 0 since a button's own
   UA-default padding would otherwise eat into this box, leaving the
   child img (sized 100%/100%, meant to fill it exactly via object-fit:
   cover) short of the button's actual edges. */
.sf-thumb { position: relative; width: 58px; height: 58px; flex: 0 0 auto; padding: 0; border-radius: var(--sf-radius-sm); overflow: hidden; border: 2px solid transparent; opacity: 0.6; }
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-thumb.is-active { border-color: rgba(var(--theme-color), 1); opacity: 1; }

.sf-quickview__body { padding: var(--sf-space-5); }
.sf-quickview__title { font-size: 1.4rem; margin-bottom: var(--sf-space-2); }
.sf-quickview__price { font-size: 1.15rem; font-weight: 800; color: rgba(var(--theme-color), 1); margin-bottom: var(--sf-space-3); }
.sf-price-was { margin-left: 8px; font-size: 0.85rem; font-weight: 500; color: var(--sf-muted); text-decoration: line-through; }
.sf-quickview__desc { color: var(--sf-muted); margin-bottom: var(--sf-space-4); }

.sf-option-group { margin-bottom: var(--sf-space-4); }
.sf-option-group__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sf-space-2); }
.sf-option-group__title { font-size: 0.92rem; margin: 0; transition: color 0.2s ease; }
.sf-option-group__title--flash { color: rgba(var(--theme-danger-color), 1); }
.sf-extra-group__counter { font-size: 0.72rem; color: var(--sf-muted); background: var(--sf-surface-muted); padding: 2px 9px; border-radius: var(--sf-radius-pill); }
.sf-option-group__list { display: flex; flex-wrap: wrap; gap: 8px; }

.sf-option, .sf-extra {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-pill);
    cursor: pointer;
    font-size: 0.86rem;
}
.sf-option:has(.sf-option__input:checked), .sf-extra:has(.sf-extra__input:checked) {
    border-color: rgba(var(--theme-color), 1); background: rgba(var(--theme-color), 0.07);
}
.sf-option.is-hidden { display: none; }
.sf-option__input, .sf-extra__input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-option__mark { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--sf-border); }
.sf-option:has(.sf-option__input:checked) .sf-option__mark { background: rgba(var(--theme-color), 1); border-color: rgba(var(--theme-color), 1); }
.sf-option__mark--square { border-radius: 4px; }
.sf-extra:has(.sf-extra__input:checked) .sf-option__mark--square { background: rgba(var(--theme-color), 1); border-color: rgba(var(--theme-color), 1); }
.sf-extra__price { color: var(--sf-muted); font-size: 0.78rem; }

/* margin-top (not just -bottom) makes the gap above this section
   consistent regardless of whether #pdOptions has any option/extra
   groups in it - adjacent sibling margins collapse to the larger value,
   so this doesn't double up when there are groups directly above it. */
.sf-notes { margin-top: var(--sf-space-4); margin-bottom: var(--sf-space-4); }
.sf-notes__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sf-space-2); }
.sf-notes-count { font-size: 0.76rem; color: var(--sf-muted); }
.sf-notes-textarea { width: 100%; min-height: 110px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); padding: 10px 14px; resize: vertical; }

/* Two rows, not one cramped one: the quantity stepper shares a row with
   only the primary button (row one), and the secondary button (if
   configured at all) gets a full-width row of its own below - the same
   primary/secondary hierarchy the product card already uses, instead of
   squeezing both buttons plus the stepper into a single line. */
.sf-quickview__action-bar {
    border-top: 1px solid var(--sf-border);
    padding: var(--sf-space-4) var(--sf-space-5);
    display: flex; flex-direction: column; gap: var(--sf-space-3);
}
.sf-quickview__action-bar--static { border-top: none; border-radius: var(--sf-radius-lg); background: var(--sf-surface-muted); margin-top: var(--sf-space-5); position: sticky; bottom: var(--sf-space-4); }
.sf-quickview__action-row { display: flex; align-items: center; gap: var(--sf-space-3); }
/* .sf-qty is a fixed-size, compact stepper - flex:1 (not width:100%,
   which forced it onto its own wrapped line since it always claimed the
   entire row) lets the primary button share the same row and grow into
   whatever's left instead of pushing the quantity control down. */
.sf-quickview__buttons { display: flex; gap: 8px; flex: 1; min-width: 0; }
.sf-quickview__buttons-secondary.is-hidden { display: none; }
.sf-quickview__buttons-secondary .sf-btn { width: 100%; }
/* min-width: 0 lets a button actually shrink to fit its share of the row
   instead of forcing the row (and every ancestor up to the page grid -
   see .sf-product-page__body) to grow to fit its longest possible label
   (the running total price makes that label's length variable); the
   label itself truncates with an ellipsis rather than wrapping or
   overflowing once it's shorter than the text needs. */
/* height is otherwise just whatever .sf-btn's padding/line-height happen
   to render at, which never quite matched .sf-qty's own explicit circle-
   button sizing - pinning both to the same fixed height (with box-sizing
   so the pill's own border counts toward it) guarantees they align
   exactly instead of eyeballing padding until they look close. */
.sf-quickview__action-row .sf-qty { height: 48px; box-sizing: border-box; }
.sf-quickview__buttons .sf-btn,
.sf-quickview__buttons-secondary .sf-btn { min-width: 0; height: 48px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.sf-quickview__buttons .sf-btn { flex: 1; }
.sf-quickview__buttons .sf-btn__label,
.sf-quickview__buttons-secondary .sf-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 575.98px) {
    .sf-cart, .sf-quickview { width: 100vw; }
    /* Smaller buttons/qty stepper + tighter body/action-bar padding so
       "Add to cart" has room to show its full label on a phone screen
       instead of needing the ellipsis in the common case - the ellipsis
       stays as a fallback for genuinely long labels (e.g. the running
       total appended to it), it just shouldn't be the everyday look. */
    .sf-quickview__body { padding: var(--sf-space-4); }
    .sf-quickview__action-bar { padding: var(--sf-space-3) var(--sf-space-4); }
    .sf-quickview__action-row .sf-qty { height: 42px; }
    .sf-quickview__buttons .sf-btn,
    .sf-quickview__buttons-secondary .sf-btn {
        height: 42px; font-size: 0.82rem;
        padding-left: var(--sf-space-3); padding-right: var(--sf-space-3);
    }
    /* No room for the running-total price suffix here - the button just
       reads as a plain "Add to cart"/"Buy now". */
    .sf-btn__price-suffix { display: none; }
}

/* ==========================================================================
   C. Header (fresh, RFC-0003/0004) + footer
   ========================================================================== */

.sf-header { position: sticky; top: 0; z-index: 30; background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); }
.sf-header__row { height: var(--sf-header-h); display: flex; align-items: center; gap: var(--sf-space-5); }
.sf-header__logo { display: flex; align-items: center; font-family: var(--font-headline); font-weight: 700; font-size: 1.35rem; }
.sf-header__logo img { height: 40px; width: 40px; object-fit: cover; border-radius: 50%; }
.sf-header__logo--center { position: absolute; left: 50%; transform: translateX(-50%); }
.sf-header__menu-btn { display: none; padding: 8px; color: var(--sf-ink); }
.sf-header__menu-btn svg { width: 22px; height: 22px; }
.sf-header__nav { display: flex; align-items: center; gap: var(--sf-space-5); margin-right: auto; }
.sf-header__nav-link { font-weight: 600; font-size: 0.94rem; }
.sf-header__nav-link:hover { color: rgba(var(--theme-color), 1); }
.sf-header__nav-link--featured { padding: 6px 14px; border-radius: var(--sf-radius-pill); background: rgba(var(--theme-color), 1); color: #fff; }
.sf-header__nav-link--featured:hover { color: #fff; opacity: 0.92; }
.sf-header__icon-btn--featured { background: rgba(var(--theme-color), 1); border-color: transparent; color: #fff; }
.sf-header__icon-btn--featured:hover { color: #fff; opacity: 0.92; }
.sf-header__actions { display: flex; align-items: center; gap: var(--sf-space-2); margin-left: auto; }
.sf-header__icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-pill);
    color: var(--sf-ink);
}
.sf-header__icon-btn:hover { border-color: rgba(var(--theme-color), 0.4); color: rgba(var(--theme-color), 1); }
.sf-header__icon-btn svg { width: 18px; height: 18px; }
.sf-header__cart-count {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: rgba(var(--theme-color), 1); color: #fff;
    font-size: 0.66rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.sf-mobile-nav { position: fixed; inset: 0; z-index: 1060; visibility: hidden; background: rgba(15, 18, 22, 0.5); transition: visibility 0.25s; }
.sf-mobile-nav.is-open { visibility: visible; }
.sf-mobile-nav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 82vw); background: var(--sf-surface); padding: var(--sf-space-5); transform: translateX(100%); transition: transform 0.28s ease; overflow-y: auto; }
.sf-mobile-nav.is-open .sf-mobile-nav__panel { transform: translateX(0); }
.sf-mobile-nav__close { padding: 8px; margin-bottom: var(--sf-space-4); color: var(--sf-ink); }
.sf-mobile-nav__close svg { width: 20px; height: 20px; }
.sf-mobile-nav__links { display: flex; flex-direction: column; gap: var(--sf-space-1); }
.sf-mobile-nav__link {
    display: flex; align-items: center; gap: var(--sf-space-3); width: 100%;
    padding: var(--sf-space-3) var(--sf-space-2); font-weight: 600; border-radius: var(--sf-radius-sm); text-align: left;
}
.sf-mobile-nav__link:hover { background: var(--sf-surface-muted); }
/* Structural page links (Home/Shop/Blog) never had icons on desktop
   either - only the action items below (search/cart/account/email/
   phone) get one, sized/aligned consistently whether it's one of our
   own inline svgs (search/cart) or a Font Awesome glyph (everything
   else). */
.sf-mobile-nav__links--actions .sf-mobile-nav__link svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--sf-muted); }
.sf-mobile-nav__links--actions .sf-mobile-nav__link i { flex: 0 0 auto; width: 18px; font-size: 16px; text-align: center; color: var(--sf-muted); }
.sf-mobile-nav__link-count {
    margin-left: auto; flex: 0 0 auto;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: var(--sf-radius-pill);
    background: rgba(var(--theme-color), 1); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Email/phone show the real address/number underneath the label
   (matching the desktop header's own "full" stacked variant), not just
   the bare field name every other action item shows. */
.sf-mobile-nav__link--detailed { align-items: flex-start; }
.sf-mobile-nav__link--detailed i { margin-top: 3px; }
.sf-mobile-nav__link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-mobile-nav__link-value { font-weight: 500; font-size: 0.84rem; color: var(--sf-muted); }
.sf-mobile-nav__divider { height: 1px; background: var(--sf-border); margin: var(--sf-space-4) 0; }

@media (max-width: 991.98px) {
    .sf-header__menu-btn { display: inline-flex; }
    .sf-header__nav { display: none; }
    /* Logo always leftmost, hamburger always rightmost on mobile,
       regardless of the desktop logo_position setting - a centered logo
       (absolutely positioned, out of flow, so it visually floats
       wherever left:50% lands) makes no sense once the row's own
       siblings change this drastically at this width; --center's own
       positioning is cancelled here so every logo becomes a normal flex
       item participating in the same order below. */
    .sf-header__logo { order: 1; }
    .sf-header__logo--center { position: static; left: auto; transform: none; }
    .sf-header__actions { order: 2; }
    .sf-header__menu-btn { order: 3; }

    /* "Full" display mode (StorefrontHeaderMenu's display_mode) adds a
       text label next to search/cart/account/email/phone icons - real
       estate that doesn't exist once the header has already collapsed to
       the hamburger nav. Every item collapses to the same bare icon
       "icon" mode already uses, regardless of what was actually
       configured for desktop; the full label + value only ever appears
       inside the hamburger drawer itself (.sf-mobile-nav__link--detailed),
       never in this top bar. Same breakpoint as the hamburger switch
       above so the two never fall out of sync in the 768-991px gap. */
    .sf-header__search-trigger-text,
    .sf-header__search-trigger-kbd,
    .sf-header__icon-btn-label,
    .sf-header__stacked-text {
        display: none;
    }
    .sf-header__search-trigger,
    .sf-header__icon-btn--labeled,
    .sf-header__icon-btn--stacked {
        width: 42px; height: 42px; padding: 0; justify-content: center;
    }
}

.sf-footer { background: rgb(21, 23, 26); color: rgba(255, 255, 255, 0.82); margin-top: var(--sf-space-8); }
.sf-footer__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sf-space-6); padding: var(--sf-space-8) var(--sf-space-4) var(--sf-space-6); }
.sf-footer__logo { color: #fff; font-family: var(--font-headline); font-weight: 700; font-size: 1.3rem; display: inline-flex; }
.sf-footer__logo img { height: 36px; }
.sf-footer__bio { max-width: 40ch; margin-top: var(--sf-space-3); color: rgba(255, 255, 255, 0.62); }
.sf-footer__socials { display: flex; gap: var(--sf-space-2); margin-top: var(--sf-space-4); }
.sf-footer__social-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; }
.sf-footer__social-btn:hover { background: rgba(var(--theme-color), 1); }
.sf-footer__col h3 { color: #fff; font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sf-space-3); }
.sf-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sf-space-2); }
.sf-footer__col a:hover { color: #fff; }
.sf-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: var(--sf-space-4); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); }
.sf-footer__powered a { color: rgba(255, 255, 255, 0.75); font-weight: 600; }

@media (max-width: 767.98px) {
    .sf-footer__grid { grid-template-columns: 1fr; }
    .sf-footer__bottom { flex-direction: column; gap: var(--sf-space-2); text-align: center; }
}

/* ==========================================================================
   D. Hero, category boxes, product grid/card, section head, reviews,
      newsletter, operating-hours notice, back-to-top, search bar + results
   ========================================================================== */

.sf-search { padding: var(--sf-space-6) 0; }
.sf-search__row { display: flex; align-items: center; gap: var(--sf-space-3); }
.sf-search__field { position: relative; flex: 1; display: flex; align-items: center; }
.sf-search__icon { position: absolute; left: var(--sf-space-4); width: 18px; height: 18px; color: var(--sf-muted); pointer-events: none; }
.sf-search__input {
    width: 100%; min-height: 54px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-pill);
    padding: 10px 116px 10px calc(var(--sf-space-4) * 2 + 18px); background: var(--sf-surface); font-size: 0.96rem;
}
.sf-search__input:focus { outline: none; border-color: rgba(var(--theme-color), 0.6); }
.sf-search__submit { position: absolute; right: 6px; }
.sf-search__filter-trigger {
    flex: 0 0 auto; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius-pill); color: var(--sf-ink);
}
.sf-search__filter-trigger:hover { border-color: rgba(var(--theme-color), 0.5); color: rgba(var(--theme-color), 1); }
.sf-search__filter-trigger svg { width: 18px; height: 18px; }
.sf-search__suggestions { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); margin-top: var(--sf-space-4); }
.sf-search__suggestion { padding: 8px 16px; border-radius: var(--sf-radius-pill); background: var(--sf-surface-muted); font-size: 0.84rem; font-weight: 500; }
.sf-search__suggestion:hover { background: rgba(var(--theme-color), 0.12); color: rgba(var(--theme-color), 1); }

.sf-search-results, .sf-search-empty { display: none; padding: var(--sf-space-5) 0; }
.sf-search-results.is-visible, .sf-search-empty.is-visible { display: block; }
.sf-search-badge { display: flex; align-items: center; gap: var(--sf-space-4); padding: var(--sf-space-4); border-radius: var(--sf-radius-lg); background: var(--sf-surface-muted); }
.sf-search-badge__icon { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sf-surface); color: rgba(var(--theme-color), 1); }
.sf-search-badge__icon svg { width: 18px; height: 18px; }
.sf-search-badge__copy { flex: 1; }
.sf-search-badge__label { color: var(--sf-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.sf-search-badge__actions { display: flex; align-items: center; gap: var(--sf-space-3); }
.sf-search__count { color: var(--sf-muted); font-weight: 600; font-size: 0.86rem; white-space: nowrap; }
.sf-search-empty__inner { text-align: center; padding: var(--sf-space-7) var(--sf-space-4); }
.sf-search-empty__icon { width: 48px; height: 48px; margin: 0 auto var(--sf-space-3); color: var(--sf-muted); opacity: 0.6; }
.sf-search-empty__kicker { color: var(--sf-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }

@media (max-width: 575.98px) {
    .sf-search-badge { flex-wrap: wrap; }
}

.sf-hero { min-height: 64vh; display: flex; align-items: center; }
.sf-hero__content { max-width: 620px; padding: var(--sf-space-8) 0; }
.sf-hero__eyebrow {
    display: inline-block; font-family: var(--font-headline); font-size: 0.92rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--theme-warning-color), 1);
    padding-bottom: 6px; border-bottom: 2px solid rgba(var(--theme-warning-color), 0.5); margin-bottom: var(--sf-space-3);
}
.sf-hero__title { font-size: clamp(2.1rem, 4.5vw, 3.4rem); color: #fff; max-width: 16ch; margin-bottom: var(--sf-space-5); }
@media (max-width: 767.98px) {
    /* 64vh (a fine proportion on a wide desktop viewport) reads as an
       oversized block on a narrow, already-tall phone screen - roughly
       square instead, so the hero never dominates the very first
       screenful on mobile. */
    .sf-hero { min-height: 0; aspect-ratio: 1 / 1; }
    .sf-hero__content { padding: var(--sf-space-6) 0; }
}

.sf-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sf-space-4); margin-bottom: var(--sf-space-5); }
.sf-section-head__title { font-size: 1.7rem; margin: 0; }
.sf-section-head__subtitle { color: var(--sf-muted); margin: 4px 0 0; }
.sf-section-head__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; margin: -8px -14px;
    border-radius: var(--sf-radius-pill);
    font-weight: 600; color: rgba(var(--theme-color), 1); white-space: nowrap;
    transition: background 0.2s ease;
}
.sf-section-head__link:hover { background: rgba(var(--theme-color), 0.1); }
.sf-section-head__link svg { width: 16px; height: 16px; }

.sf-cat-boxes { padding: var(--sf-space-6) 0; }
.sf-cat-boxes__grid { display: grid; grid-template-columns: repeat(var(--sf-cat-boxes-per-row), minmax(0, 1fr)); gap: var(--sf-space-4); }
.sf-cat-boxes__track { display: flex; gap: var(--sf-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-cat-boxes__track::-webkit-scrollbar { display: none; }
.sf-cat-boxes__track .sf-cat-box { flex: 0 0 var(--sf-cat-boxes-card-width); scroll-snap-align: start; }
.sf-cat-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: 168px; padding: var(--sf-space-5);
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.sf-cat-box:hover { border-color: rgba(var(--theme-color), 0.4); transform: translateY(-2px); }
.sf-cat-box__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--theme-color), 0.08); color: rgba(var(--theme-color), 1); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sf-space-3); }
.sf-cat-box__icon svg { width: 24px; height: 24px; }
.sf-cat-box__copy strong { display: block; font-weight: 700; }
.sf-cat-box__copy span { display: block; color: var(--sf-muted); font-size: 0.84rem; margin-top: 2px; }
.sf-cat-boxes__controls { display: flex; gap: 8px; }
.sf-cat-boxes__arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sf-border); display: inline-flex; align-items: center; justify-content: center; }
.sf-cat-boxes__arrow:hover { border-color: rgba(var(--theme-color), 0.4); color: rgba(var(--theme-color), 1); }
.sf-cat-boxes__arrow svg { width: 16px; height: 16px; }

@media (max-width: 767.98px) {
    .sf-cat-boxes__grid { grid-template-columns: repeat(var(--sf-cat-boxes-mobile-per-row), minmax(0, 1fr)); }
    .sf-cat-boxes__track .sf-cat-box { flex-basis: var(--sf-cat-boxes-mobile-card-width); }
}

/* No padding of its own - every .sf-product-section it wraps (one per
   category) already carries its own top+bottom padding, so this wrapper
   having the *same* padding too was stacking with the first/last
   section's own, doubling the gap before the first category heading and
   after the last product grid (on both mobile and desktop - this never
   depended on viewport width). */
.sf-products { padding: 0; }
.sf-product-section { padding: var(--sf-space-6) 0; scroll-margin-top: calc(var(--sf-header-h) + var(--sf-space-3)); }

.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-4); }
.sf-grid--mobile-1 { grid-template-columns: 1fr; }
@media (min-width: 576px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sf-card { display: flex; flex-direction: column; height: 100%; }
.sf-card-trigger { cursor: pointer; }
.sf-card__media { position: relative; display: block; aspect-ratio: 4/3.3; border-radius: var(--sf-radius-md); overflow: hidden; background: var(--sf-surface-muted); }
.sf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-card:hover .sf-card__media img { transform: scale(1.045); }
.sf-card__body { padding-top: var(--sf-space-3); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sf-card__title-link { display: block; }
.sf-card__title { font-family: var(--font-body); font-size: 0.96rem; font-weight: 700; margin: 0; }
.sf-card__price { font-family: var(--font-headline); font-size: 1.08rem; font-weight: 600; color: rgba(var(--theme-color), 1); margin: 0; }
.sf-card__actions { margin-top: auto; padding-top: var(--sf-space-2); display: flex; align-items: center; gap: 8px; }
/* Explicit, matching heights (not just similar-looking padding) so the
   primary (text) and secondary (icon-only, fixed 42px circle) buttons
   line up exactly rather than one looking a couple pixels taller. */
.sf-card__actions .sf-btn--block { flex: 1; height: 42px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.sf-card__actions .sf-btn--icon { flex: 0 0 auto; }

@media (max-width: 767.98px) {
    /* Desktop-scale category/card type reads oversized on a phone screen
       relative to how much of it a single card actually occupies. */
    .sf-section-head__title { font-size: 1.3rem; }
    .sf-section-head__subtitle { font-size: 0.86rem; }
    .sf-card__title { font-size: 0.86rem; }
    .sf-card__price { font-size: 0.96rem; }

    /* Desktop-scale buttons (13px/26px padding, 42px circle) plus a
       real card's own narrower mobile width (2-up grid) genuinely
       don't fit side by side - the primary button visibly overflowed
       past the card's own edge and over its neighbor. min-width: 0
       lets it actually shrink to its share of the row instead of
       forcing the row to its label's full natural width; the label
       still shows in full whenever there's room, only truncating with
       an ellipsis as a fallback for a genuinely long one. */
    .sf-card__actions { gap: 6px; }
    .sf-card__actions .sf-btn--block {
        height: 36px; font-size: 0.76rem;
        padding-left: var(--sf-space-2); padding-right: var(--sf-space-2);
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sf-card__actions .sf-btn--icon { width: 36px; height: 36px; }
    .sf-card__actions .sf-btn--icon svg { width: 15px; height: 15px; }
    .sf-card__actions .sf-btn--icon i { font-size: 14px; }
}

.sf-reviews { padding: var(--sf-space-6) 0 var(--sf-space-7); }
.sf-reviews__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: var(--sf-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-reviews__track::-webkit-scrollbar { display: none; }
.sf-review-card { scroll-snap-align: start; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: var(--sf-space-5); display: flex; flex-direction: column; height: 100%; }
.sf-review-card__stars { display: flex; gap: 2px; color: rgba(var(--theme-warning-color), 1); margin-bottom: var(--sf-space-3); }
.sf-review-card__stars svg { width: 15px; height: 15px; }
.sf-review-card__title { font-size: 1rem; margin-bottom: 6px; }
.sf-review-card__message { color: var(--sf-muted); font-size: 0.92rem; }
.sf-review-card__author { font-weight: 700; margin: auto 0 0; }

@media (max-width: 991.98px) { .sf-reviews__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 575.98px) { .sf-reviews__track { grid-auto-columns: 86%; } }

.sf-newsletter { padding: var(--sf-space-6) 0 var(--sf-space-7); }
.sf-newsletter__box {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-4);
    background: rgba(var(--theme-color), 0.07); border-radius: var(--sf-radius-lg); padding: var(--sf-space-6);
}
.sf-newsletter__copy h2 { margin-bottom: 4px; }
.sf-newsletter__copy p { margin: 0; color: var(--sf-muted); }
.sf-newsletter__action { min-width: min(380px, 100%); }
.sf-newsletter__form { display: flex; gap: 8px; border: 1px solid var(--sf-ink); border-radius: var(--sf-radius-pill); padding: 4px; background: #fff; }
.sf-newsletter__form input { flex: 1; min-width: 0; border: none; padding: 0 var(--sf-space-4); background: none; outline: none; }
.sf-newsletter__form .sf-btn { padding: 12px 22px; }
.sf-newsletter__status { margin-top: 8px; font-size: 0.82rem; display: none; }
.sf-newsletter__status.is-visible { display: block; }
.sf-newsletter__status.is-success { color: rgba(39, 125, 42, 1); }
.sf-newsletter__status.is-error { color: rgba(var(--theme-danger-color), 1); }

@media (max-width: 720px) {
    .sf-newsletter__box { flex-direction: column; align-items: stretch; text-align: center; }
    .sf-newsletter__action { min-width: 100%; }
}

.sf-hide-mobile, .sf-hide-desktop { display: inline-flex; }

.sf-banners { padding: var(--sf-space-4) 0; }
.sf-banner-slider { position: relative; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface-muted); }
.sf-banner-slider.is-contained { border-radius: var(--sf-radius-md); }
.sf-banner-track { display: flex; width: 100%; transition: transform 0.35s ease; will-change: transform; }
.sf-banner-track.no-transition { transition: none; }
.sf-banner-slide { min-width: 100%; }
.sf-banner-link, .sf-banner-media { display: block; width: 100%; }
.sf-banner-media picture, .sf-banner-media img { display: block; width: 100%; }
.sf-banner-media img { height: auto; object-fit: contain; }
.sf-banner-control {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92); color: var(--sf-ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.sf-banner-control svg { width: 16px; height: 16px; }
.sf-banner-control.prev { left: var(--sf-space-3); }
.sf-banner-control.next { right: var(--sf-space-3); }
.sf-banner-dots { position: absolute; left: 50%; bottom: var(--sf-space-3); transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.sf-banner-dot { width: 9px; height: 9px; min-width: 9px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.65); flex: 0 0 9px; }
.sf-banner-dot.active { background: rgba(var(--theme-color), 1); box-shadow: 0 0 0 2px rgba(var(--theme-color), 0.22); }

@media (max-width: 575.98px) {
    .sf-hide-mobile { display: none; }
    .sf-banner-control { width: 34px; height: 34px; }
}
@media (min-width: 576px) {
    .sf-hide-desktop { display: none; }
}

.sf-note { margin: var(--sf-space-4) auto 0; }
.sf-note__inner { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); background-color: var(--sf-note-bg); padding: var(--sf-space-3) var(--sf-space-4); box-shadow: var(--sf-shadow-sm); }
.sf-note__content { color: var(--sf-note-text); font-size: 0.86rem; line-height: 1.5; margin: 0; }
.sf-note__heading { font-weight: 700; }
.sf-note__icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.sf-note__content p:last-child, .sf-note__content ul:last-child, .sf-note__content ol:last-child { margin-bottom: 0; }
.sf-note__content a { color: inherit; font-weight: 600; text-decoration: underline; }

.sf-story { margin: var(--sf-space-6) auto; }
.sf-story__card { padding: clamp(22px, 4vw, 42px); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); background: var(--sf-story-bg); color: var(--sf-ink); }
.sf-story__card h2 { margin-bottom: 8px; font-weight: 800; }
.sf-story__subheading { max-width: 720px; color: var(--sf-muted); margin-bottom: var(--sf-space-4); }
.sf-story__content { color: var(--sf-ink); line-height: 1.75; }
.sf-story__content p:last-child, .sf-story__content ul:last-child, .sf-story__content ol:last-child { margin-bottom: 0; }
.sf-story__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-space-6); align-items: center; }
.sf-story__layout.has-media { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); }
.sf-story__layout.media-right .sf-story__media { order: 2; }
.sf-story__media img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--sf-radius-md); object-fit: cover; }

@media (max-width: 767.98px) {
    .sf-story__layout.has-media { grid-template-columns: 1fr; }
    .sf-story__layout.media-right .sf-story__media { order: 0; }
}

.sf-highlights { padding: var(--sf-space-7) 0; background: var(--sf-surface-muted); }
.sf-highlights__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-space-4); }
.sf-highlight-card { min-height: 156px; border: 1px solid rgba(var(--theme-color), 0.1); border-radius: var(--sf-radius-sm); background: var(--sf-surface); padding: var(--sf-space-5); box-shadow: var(--sf-shadow-sm); }
.sf-highlight-card__icon {
    width: 44px; height: 44px; border-radius: var(--sf-radius-sm); display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--theme-color), 0.1); color: rgba(var(--theme-color), 1); margin-bottom: var(--sf-space-4); font-size: 1.15rem;
}
.sf-highlight-card h4 { margin: 0 0 8px; color: var(--sf-ink); font-size: 1.05rem; line-height: 1.25; font-weight: 800; }
.sf-highlight-card p { margin: 0; color: var(--sf-muted); font-size: 0.92rem; line-height: 1.5; }

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

.sf-cat-nav { position: relative; z-index: 20; margin: var(--sf-space-3) auto var(--sf-space-6); }
.sf-cat-nav.is-sticky { position: sticky; top: max(5px, env(safe-area-inset-top)); z-index: 1030; }
.sf-cat-nav__shell { position: relative; display: flex; align-items: center; gap: 8px; }
.sf-cat-nav__list {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto;
    scrollbar-width: none; scroll-behavior: smooth; border-radius: var(--sf-radius-sm);
    background: rgba(var(--theme-color), 1); padding: 6px;
}
.sf-cat-nav__list::-webkit-scrollbar { display: none; }
.sf-cat-nav__list:not(.is-overflowing) { justify-content: center; }
.sf-cat-nav__item {
    flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--sf-space-5); color: #fff; font-size: 0.84rem; font-weight: 500; white-space: nowrap;
    border-radius: 6px; transition: background 0.18s ease, color 0.18s ease;
}
.sf-cat-nav__item:hover, .sf-cat-nav__item.is-active { background: #fff; color: var(--sf-ink); }
.sf-cat-nav__arrow {
    width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--theme-color), 1); color: #fff;
}
.sf-cat-nav__arrow svg { width: 16px; height: 16px; }
.sf-cat-nav__arrow[hidden] { display: none !important; }

@media (max-width: 575.98px) {
    .sf-cat-nav { margin-top: 6px; margin-bottom: var(--sf-space-5); }
    .sf-cat-nav__item { min-height: 40px; padding: 0 var(--sf-space-4); font-size: 0.76rem; }
    .sf-cat-nav__arrow { width: 42px; height: 42px; min-width: 42px; }
}

.sf-hours-banner {
    position: fixed; left: 50%; bottom: var(--sf-space-4); transform: translateX(-50%); z-index: 1030;
    width: min(680px, calc(100% - 28px));
    display: flex; align-items: flex-start; gap: var(--sf-space-3);
    background: rgb(21, 23, 26); color: #fff;
    border-radius: var(--sf-radius-lg); padding: var(--sf-space-4);
    box-shadow: var(--sf-shadow-lg);
}
.sf-hours-banner__icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; justify-content: center; }
.sf-hours-banner__icon svg { width: 18px; height: 18px; }
.sf-hours-banner__copy { flex: 1; }
.sf-hours-banner__copy strong { display: block; margin-bottom: 2px; }
.sf-hours-banner__copy span { color: rgba(255, 255, 255, 0.7); font-size: 0.86rem; }
.sf-hours-banner__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sf-hours-banner .sf-btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.sf-hours-banner .sf-panel-close { color: #fff; }

.sf-hours-status { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); padding: var(--sf-space-3); margin-bottom: var(--sf-space-4); font-size: 0.9rem; }
.sf-hours-list { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); padding: 0 var(--sf-space-4); }
.sf-hours-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--sf-border); }
.sf-hours-row:last-child { border-bottom: none; }
.sf-hours-row--today { font-weight: 700; color: rgba(var(--theme-color), 1); }

@media (max-width: 575.98px) {
    .sf-hours-banner { flex-direction: column; }
    .sf-hours-banner__actions { width: 100%; justify-content: space-between; }
}

.sf-back-to-top {
    position: fixed; right: var(--sf-space-4); bottom: var(--sf-space-4); z-index: 45;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgb(21, 23, 26); color: #fff;
    box-shadow: var(--sf-shadow-md);
    display: none; align-items: center; justify-content: center;
}
.sf-back-to-top svg { width: 20px; height: 20px; }
.sf-back-to-top.is-visible { display: inline-flex; }
/* Pushed up above the mobile order bar (checkout's own fixed bottom bar,
   same 96px this body class already reserves as padding for it) instead
   of sitting at its usual corner and overlapping the Place Order button
   underneath it. */
body.sf-mobile-order-bar-visible .sf-back-to-top { bottom: 96px; }

/* Bottom-center "Added to cart" confirmation (ui.js's showToast()) - one
   shared element, simple dark pill, brief and out of the way rather than
   a full alert/banner. z-index sits above every dialog (the lightbox's
   own 1060 is the highest anything else uses) so it's still visible
   confirming an add made from inside the quick-view/lightbox. */
.sf-toast {
    position: fixed; left: 50%; bottom: var(--sf-space-5);
    transform: translate(-50%, 12px);
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    padding: 12px 22px;
    border-radius: var(--sf-radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.sf-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   E. Checkout + dedicated product page
   ========================================================================== */

.sf-checkout { padding: var(--sf-space-7) 0; }
.sf-checkout__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sf-space-7); align-items: start; }
.sf-checkout__panel { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 15px; }
.sf-checkout__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sf-space-3); margin-bottom: var(--sf-space-6); }
.sf-checkout__head h1 { font-size: 1.6rem; margin-bottom: 4px; }
.sf-checkout__head p { color: var(--sf-muted); margin: 0; }

.sf-gift-toggle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 18px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-pill); }
.sf-gift-toggle svg { width: 16px; height: 16px; }
.sf-gift-toggle.is-active { background: rgba(var(--theme-color), 1); color: #fff; border-color: transparent; }
.sf-gift-panel { padding: var(--sf-space-4); border: 1px dashed var(--sf-border); border-radius: var(--sf-radius-md); }
.sf-gift-panel__title { font-weight: 700; margin-bottom: var(--sf-space-3); }

.sf-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-space-5); }
.sf-field-grid__full { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .sf-field-grid { grid-template-columns: 1fr; } }

.sf-label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: var(--sf-space-2); }
.sf-field { position: relative; }
.sf-input {
    width: 100%; min-height: 52px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md);
    padding: 14px; background: var(--sf-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sf-input:focus { outline: none; border-color: rgba(var(--theme-color), 0.6); box-shadow: 0 0 0 3px rgba(var(--theme-color), 0.14); }
textarea.sf-input { min-height: 90px; resize: vertical; }
.sf-field label {
    position: absolute; left: 14px; top: 16px; color: var(--sf-muted); pointer-events: none; background: var(--sf-surface); padding: 0 4px;
    transition: transform 0.15s ease, font-size 0.15s ease, top 0.15s ease;
}
.sf-field.is-filled label, .sf-field .sf-input:focus ~ label { top: -9px; font-size: 0.74rem; font-weight: 600; color: rgba(var(--theme-color), 1); }
.sf-field-help { display: block; margin-top: 6px; color: var(--sf-muted); font-size: 0.8rem; }
.sf-field-help--danger { color: rgba(var(--theme-danger-color), 1); }

/* Searchable select: a progressive-enhancement combobox over a real,
   hidden <select> (checkout.js's initSearchableSelect()) - typing filters
   the option list client-side, picking one sets the real select's value
   and dispatches change, so every existing delivery/pricing calculation
   keeps reading the same element unchanged. */
.sf-searchable-select { position: relative; }
.sf-searchable-select__list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-md);
    box-shadow: var(--sf-shadow-md);
    z-index: 20;
    padding: 6px;
}
.sf-searchable-select.is-open .sf-searchable-select__list { display: block; }
.sf-searchable-select__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--sf-radius-sm);
    font-size: 0.9rem;
    color: var(--sf-ink);
}
.sf-searchable-select__option:hover { background: var(--sf-surface-muted); }
.sf-searchable-select__empty { padding: 10px 12px; color: var(--sf-muted); font-size: 0.86rem; margin: 0; }

.sf-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.sf-checkbox input { width: 18px; height: 18px; accent-color: rgba(var(--theme-color), 1); }

.sf-address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sf-space-2); }
.sf-address-card { text-align: left; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); padding: var(--sf-space-3); display: flex; flex-direction: column; gap: 2px; font-size: 0.84rem; color: var(--sf-muted); }
.sf-address-card.is-active { border-color: rgba(var(--theme-color), 1); background: rgba(var(--theme-color), 0.05); }
.sf-address-card strong { color: var(--sf-ink); }

.sf-payment-options { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); }
.sf-payment-option { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); cursor: pointer; }
.sf-payment-option:has(.sf-payment-option__input:checked) { border-color: rgba(var(--theme-color), 1); background: rgba(var(--theme-color), 0.06); }
.sf-payment-option__input { width: 16px; height: 16px; accent-color: rgba(var(--theme-color), 1); }

.sf-checkout__summary-card { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 15px; position: sticky; top: calc(var(--sf-header-h) + var(--sf-space-3)); }
.sf-add-more-link { display: flex; align-items: center; justify-content: center; gap: 6px; color: rgba(var(--theme-color), 1); font-weight: 600; font-size: 0.86rem; margin-top: var(--sf-space-4); margin-bottom: var(--sf-space-4); }
.sf-add-more-link svg { width: 16px; height: 16px; }
.sf-checkout__totals .sf-cart-item { padding-bottom: var(--sf-space-3); border-bottom: 1px solid var(--sf-border); margin-bottom: var(--sf-space-3); }

.sf-coupon { margin-bottom: var(--sf-space-4); }
/* One combined rounded pill - the input and Apply button share the same
   border instead of each having their own, matching .sf-newsletter__form's
   input+button field further down this file (the same pattern, not a
   second one invented for the same idea). */
.sf-input-group { display: flex; align-items: center; gap: 6px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-pill); padding: 4px; background: var(--sf-surface); }
.sf-input-group .sf-input { flex: 1; min-width: 0; min-height: auto; border: none; background: none; padding: 10px var(--sf-space-4); }
.sf-input-group .sf-input:focus { box-shadow: none; }
.sf-input-group .sf-btn { flex: 0 0 auto; padding: 12px 22px; }
.sf-coupon__message { display: block; margin-top: 6px; font-size: 0.8rem; }
.sf-coupon__message.is-valid { color: rgba(39, 125, 42, 1); }
.sf-coupon__message.is-invalid { color: rgba(var(--theme-danger-color), 1); }

.sf-delivery-progress { margin: var(--sf-space-3) 0; }
.sf-delivery-progress p { font-size: 0.8rem; color: var(--sf-muted); margin-bottom: 6px; }
.sf-delivery-progress__track { height: 6px; border-radius: 999px; background: var(--sf-surface-muted); overflow: hidden; }
.sf-delivery-progress__fill { height: 100%; background: rgba(var(--theme-color), 1); transition: width 0.3s ease; }

.sf-mobile-order-bar {
    position: fixed; left: 0; right: 0; bottom: -140px; z-index: 40;
    background: rgba(var(--white), 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--sf-border);
    padding: var(--sf-space-3) var(--sf-space-4);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.1);
    display: flex; align-items: center; gap: var(--sf-space-3);
    transition: bottom 0.25s ease;
}
.sf-mobile-order-bar.is-visible { bottom: 0; }
.sf-mobile-order-bar__totals { flex: 1; font-size: 0.8rem; }
.sf-mobile-order-bar__row { display: flex; justify-content: space-between; }
.sf-mobile-order-bar__row--total { font-weight: 800; font-size: 0.95rem; }
/* Same "shrink so the full label fits, ellipsis only as a fallback"
   treatment as the quick-view's own action-bar buttons. */
.sf-mobile-order-bar .sf-btn { min-width: 0; height: 42px; padding-left: var(--sf-space-3); padding-right: var(--sf-space-3); font-size: 0.82rem; }
.sf-mobile-order-bar .sf-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sf-mobile-order-bar-visible { padding-bottom: 96px; }

@media (max-width: 991.98px) {
    .sf-checkout__grid { grid-template-columns: 1fr; }
    .sf-checkout__summary-card { position: static; }
}

.sf-back-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    margin: var(--sf-space-5) 0 var(--sf-space-5) -14px;
    border-radius: var(--sf-radius-pill);
    font-weight: 600;
    transition: background 0.2s ease;
}
.sf-back-link:hover { background: rgba(var(--theme-color), 0.1); }
.sf-back-link svg { width: 16px; height: 16px; }
@media (max-width: 767.98px) {
    /* Only the product page's own "Back to shop" link - not blog's "Back
       to Blog", which wasn't part of this request. */
    .sf-product-page > .sf-back-link { display: none; }
}

/* Single-category page footer nav - prev on the left, next on the right,
   each just a pill with the neighboring category's own name (truncated),
   not a home/prev/next icon-only row. margin-left: auto on the "next"
   link is what keeps it pinned to the right edge even when it's the only
   button showing (first category has no prev, last has no next). */
.sf-category-pager { display: flex; align-items: center; gap: var(--sf-space-3); padding: var(--sf-space-6) 0; }
.sf-category-pager__link {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: min(45%, 320px);
    padding: 12px 20px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-pill);
    font-weight: 600;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.sf-category-pager__link:hover { border-color: rgba(var(--theme-color), 0.5); color: rgba(var(--theme-color), 1); }
.sf-category-pager__link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-category-pager__link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sf-category-pager__link--next { margin-left: auto; }
/* min-width: 0 on the grid item is what actually matters here - a grid
   (like a flex) column defaults to a min-width of its content's own
   intrinsic size, so once the price-in-button label got long enough it
   could force this whole column - and with it every fr-sized column
   after it - wider than its fr share, reflowing the entire page around
   a single button's text. See .sf-quickview__buttons .sf-btn below for
   the other half of the same fix (that button's own shrink capacity). */
.sf-product-page__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-space-7); }
.sf-product-page__body { min-width: 0; }
/* Shares its actual media markup with the quick-view modal (see
   storefront.inc.product.media) - this wrapper just sizes/positions it
   for the page's own grid column instead of the modal's fixed 42% flex
   column. Thumbnails render as a real row below the image now, not an
   absolutely-positioned overlay across its bottom (the previous
   approach) - same layout the modal already uses, not a second one. */
.sf-product-page__media { display: flex; flex-direction: column; gap: var(--sf-space-3); }
.sf-product-page__media .sf-quickview__media-frame { border-radius: var(--sf-radius-lg); }
.sf-suggested { padding: var(--sf-space-7) var(--sf-space-4); }

@media (max-width: 991.98px) {
    .sf-product-page__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   F. Compatibility layer for pages not yet rewritten (blog, pages, customer
      account/auth, invoice, and optional sections: banners, category bar
      nav, search, note, story, highlights) - Bootstrap-shaped utility
      classes their existing markup still uses, plus the shared
      x-organisms.modal component (also used by the untouched backend admin
      theme, so its own markup/attributes can't change here).
   ========================================================================== */

.container, .container-fluid { width: 100%; max-width: var(--sf-container); margin: 0 auto; padding: 0 var(--sf-space-4); }
.container-fluid { max-width: 100%; }
.row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--sf-space-3) * -1); }
.row.g-0 { margin: 0; }
.row.g-3 > * { padding: 0 var(--sf-space-3); margin-bottom: var(--sf-space-4); }
.row.g-4 > * { padding: 0 var(--sf-space-4); margin-bottom: var(--sf-space-5); }
.row > * { padding: 0 var(--sf-space-3); width: 100%; }
.col-12 { width: 100%; }
.col-6 { width: 50%; }
@media (min-width: 768px) { .col-md-6 { width: 50%; } .col-md-4 { width: 33.3333%; } }
@media (min-width: 992px) { .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; } .col-lg-12 { width: 100%; } }

.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.d-inline-flex { display: inline-flex !important; }
@media (max-width: 991.98px) { .d-lg-none { display: none !important; } }
@media (min-width: 992px) { .d-lg-flex { display: flex !important; } .d-lg-none { display: none !important; } }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.gap-1 { gap: var(--sf-space-1) !important; }
.gap-2 { gap: var(--sf-space-2) !important; }
.gap-3 { gap: var(--sf-space-3) !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.text-center { text-align: center !important; }
.text-end, .text-right { text-align: right !important; }
.text-white { color: #fff !important; }
.text-muted { color: var(--sf-muted) !important; }
.text-danger { color: rgba(var(--theme-danger-color), 1) !important; }
.text-nowrap { white-space: nowrap !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fs-5 { font-size: 1.1rem !important; }
.border-0 { border: none !important; }
.rounded-2 { border-radius: var(--sf-radius-md) !important; }
.rounded-3 { border-radius: var(--sf-radius-lg) !important; }
.rounded-pill { border-radius: var(--sf-radius-pill) !important; }
.mt-1 { margin-top: var(--sf-space-1) !important; } .mt-2 { margin-top: var(--sf-space-2) !important; } .mt-3 { margin-top: var(--sf-space-3) !important; } .mt-4 { margin-top: var(--sf-space-5) !important; } .mt-5 { margin-top: var(--sf-space-7) !important; }
/* Bottom breathing room for a legacy full-page section before the
   footer starts right after it - .pt-5 already had a real rule, this
   never did, so pages using both (thankyou, static pages, customer auth)
   had the footer sitting flush against the content above it. */
.section-b-space { padding-bottom: var(--sf-space-7); }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--sf-space-1) !important; } .mb-2 { margin-bottom: var(--sf-space-2) !important; } .mb-3 { margin-bottom: var(--sf-space-3) !important; } .mb-4 { margin-bottom: var(--sf-space-5) !important; }
.me-1 { margin-right: var(--sf-space-1) !important; } .me-2 { margin-right: var(--sf-space-2) !important; }
.ms-auto { margin-left: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.p-0 { padding: 0 !important; } .p-4 { padding: var(--sf-space-5) !important; }
.py-2 { padding-top: var(--sf-space-2) !important; padding-bottom: var(--sf-space-2) !important; }
.py-3 { padding-top: var(--sf-space-3) !important; padding-bottom: var(--sf-space-3) !important; }
.py-5 { padding-top: var(--sf-space-7) !important; padding-bottom: var(--sf-space-7) !important; }
.pt-5 { padding-top: var(--sf-space-7) !important; }
.px-3 { padding-left: var(--sf-space-3) !important; padding-right: var(--sf-space-3) !important; }
.px-4 { padding-left: var(--sf-space-5) !important; padding-right: var(--sf-space-5) !important; }
.px-5 { padding-left: var(--sf-space-6) !important; padding-right: var(--sf-space-6) !important; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-space-2);
    border: 1px solid transparent; padding: 12px 22px; font-weight: 600; font-size: 0.94rem;
    border-radius: var(--sf-radius-md); background: var(--sf-surface-muted); color: var(--sf-ink);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.theme-btn { color: #fff; background: rgba(var(--theme-color), 1); border: none; }
.theme-btn:hover { color: #fff; }
.btn-dark { background: rgb(var(--dark-text)); color: #fff; }
.btn-success { background: rgba(var(--whatsapp-color), 1); color: #fff; }
.btn-accent { background: rgba(var(--theme-color), 1); color: #fff; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--sf-radius-pill); font-size: 0.75rem; font-weight: 700; }
.form-label { font-weight: 600; font-size: 0.88rem; margin-bottom: var(--sf-space-1); display: block; }
.form-control {
    width: 100%; min-height: 50px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md);
    padding: 10px 14px; background: var(--sf-surface);
}
.form-control:focus { outline: none; border-color: rgba(var(--theme-color), 0.6); box-shadow: 0 0 0 3px rgba(var(--theme-color), 0.14); }
textarea.form-control { min-height: 90px; resize: vertical; }
.form-check { display: flex; align-items: center; gap: var(--sf-space-2); }
.form-check-input { width: 18px; height: 18px; accent-color: rgba(var(--theme-color), 1); }
.spinner-border { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sf-spin 0.65s linear infinite; }

/* Shared x-organisms.modal component (also used by the backend admin) */
.modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow-y: auto; padding: var(--sf-space-4); }
.modal.show { display: block; }
.modal-dialog { max-width: 520px; margin: var(--sf-space-6) auto; transform: translateY(16px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
.modal.show .modal-dialog { transform: translateY(0); opacity: 1; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - var(--sf-space-6) * 2); }
.modal-content { background: var(--sf-surface); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-lg); width: 100%; max-height: calc(100vh - var(--sf-space-6) * 2); overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sf-space-4) var(--sf-space-5); border-bottom: 1px solid var(--sf-border); }
.modal-body { padding: var(--sf-space-5); }
.modal-footer { padding: var(--sf-space-4) var(--sf-space-5); border-top: 1px solid var(--sf-border); display: flex; gap: var(--sf-space-2); justify-content: flex-end; }
.modal-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
/* x-organisms.modal is shared with the (real-Bootstrap) backend admin
   theme, so its markup can't change here - the backend's own Bootstrap
   CSS gives .btn-close a real X icon via background-image; this storefront
   shim never did, so the button rendered as an empty, invisible circle. */
.btn-close {
    width: 32px; height: 32px; border-radius: 50%; background-color: var(--sf-surface-muted);
    background-repeat: no-repeat; background-position: center; background-size: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2315171a'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E");
}

.xt-badge-gray { background: var(--sf-surface-muted); color: var(--sf-muted); border-radius: var(--sf-radius-pill); padding: 3px 10px; font-size: 0.72rem; }
.xt-auth-card { max-width: 440px; margin: var(--sf-space-7) auto; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: var(--sf-space-6); }
.xt-account-card { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: var(--sf-space-5); margin-bottom: var(--sf-space-4); }
.xt-blog-card, .xt-page-card { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); overflow: hidden; height: 100%; }
.xt-blog-card img { aspect-ratio: 16/9; object-fit: cover; }
.xt-blog-card .body, .xt-page-card .body { padding: var(--sf-space-4); }
.xt-highlight-card { text-align: center; padding: var(--sf-space-4); }
.xt-highlight-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--theme-color), 0.1); color: rgba(var(--theme-color), 1); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sf-space-3); font-size: 1.3rem; }


/* ==========================================================================
   G. OrdaMe identity accents (additive only - nothing above this line is
      overridden; every rule below layers a bold, high-contrast fast-food
      poster/menu-board character on top of the proven base without
      touching structure or behavior). CSS-only template - no
      layouts/*.twig overrides, so the default search bar and default
      multi-column footer render as-is, styled by sections A-F plus a
      light touch here.
   ========================================================================== */

/* Anton is a single-weight display face designed to be set in caps - every
   heading (and a few high-impact labels below) leans into that instead of
   fighting it with letter-spacing tricks a rounder face would need. */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

html { scroll-behavior: smooth; }
.sf-products { scroll-margin-top: calc(var(--sf-header-h) + var(--sf-space-3)); }

/* Hero content: bold, oversized, uppercase - the store's own hero image
   (or Hello Vendor's shared "no image" fallback gradient, baked into the
   section partial itself, outside any template's CSS) still decides the
   backdrop; this only styles the text/button layered on top of it. */
.sf-hero__title {
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.05;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.sf-hero__eyebrow {
    letter-spacing: 0.22em;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 0.78rem;
}
.sf-hero .sf-btn--light {
    border-radius: var(--sf-radius-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Buttons stay sharp-cornered and bold, in whatever color the store owner
   already chose (--theme-color is never touched here) - uppercase,
   letter-spaced text is this template's own contribution, not a recolor. */
.sf-btn {
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.86rem;
}
.sf-btn--primary:hover, .sf-btn--dark:hover { transform: none; box-shadow: none; filter: brightness(0.9); }
.sf-btn--whatsapp:hover, .sf-btn--messenger:hover { filter: brightness(0.9); }
.sf-btn--icon:hover { background: rgba(var(--theme-color), 0.12); color: rgba(var(--theme-color), 1); }
.sf-btn--icon.sf-btn--whatsapp:hover { background: rgba(var(--whatsapp-color), 1); filter: brightness(0.9); color: #fff; }
.sf-btn--icon.sf-btn--messenger:hover { background: #0084ff; filter: brightness(0.9); color: #fff; }
.sf-btn--ghost:hover {
    border-color: var(--sf-ink);
    color: inherit;
    background: rgba(var(--theme-color), 0.06);
}
.sf-cat-boxes__arrow:hover {
    border-color: var(--sf-ink);
    color: inherit;
    background: rgba(var(--theme-color), 0.08);
}
.sf-search__filter-trigger:hover {
    border-color: var(--sf-ink);
    color: inherit;
    background: rgba(var(--theme-color), 0.06);
}

/* Breaking a section head out to full-bleed width (below) can introduce a
   horizontal scrollbar on some browsers even though the extra width never
   actually overflows visibly - body doesn't clip this anywhere in the
   shared base CSS, so this template adds its own guard rather than
   assuming one exists. */
body { overflow-x: hidden; }

/* The single most distinctive identity move: every section head becomes a
   full-bleed solid black banner (not just the container's own width) -
   the "menu board" signal a rounded, card-based template can't fake.
   Breaking out of .sf-container via the classic calc(50% - 50vw) trick,
   since .sf-section-head itself lives *inside* a .sf-container in every
   section partial and never has its own top-level wrapper to restyle
   instead. */
.sf-section-head {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-50vw + var(--sf-space-4));
    margin-right: calc(-50vw + var(--sf-space-4));
    width: 100vw;
    max-width: 100vw;
    background: rgb(var(--dark-text));
    color: #fff;
    padding: var(--sf-space-4) calc(50vw - var(--sf-container) / 2 + var(--sf-space-4));
    margin-bottom: var(--sf-space-5);
    align-items: center;
}
.sf-section-head__title {
    color: #fff;
    font-size: 1.5rem;
    position: relative;
    padding-left: var(--sf-space-4);
}
.sf-section-head__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 5px;
    background: rgba(var(--theme-color), 1);
}
.sf-section-head__subtitle { color: rgba(255, 255, 255, 0.68); }
.sf-section-head__link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.sf-section-head__link:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 991.98px) {
    .sf-section-head {
        padding-left: var(--sf-space-4);
        padding-right: var(--sf-space-4);
    }
}

/* Product cards: sharp corners, a visible border, and a crisp hard-edged
   shadow on hover (var(--sf-shadow-sm) - a flat offset, not a soft blur)
   instead of a lift - matches the flat poster identity everywhere else. */
.sf-card {
    border: 1px solid var(--sf-ink);
    border-radius: var(--sf-radius-sm);
    padding: var(--sf-space-3);
    background: var(--sf-surface);
    transition: box-shadow 0.15s ease;
}
.sf-card:hover { box-shadow: var(--sf-shadow-sm); }
.sf-card__media { border-radius: var(--sf-radius-sm); box-shadow: none; }
.sf-card__title { font-weight: 700; text-transform: none; letter-spacing: 0; }
.sf-badge {
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: var(--sf-radius-sm);
    background: rgb(var(--dark-text));
    color: #fff;
}
.sf-price-was { font-size: 0.74rem; }

.sf-cat-box {
    border-radius: var(--sf-radius-sm);
    transition: background 0.15s ease;
}
.sf-cat-box:hover {
    background: rgba(var(--theme-color), 0.06);
    border-color: var(--sf-ink);
    transform: none;
}
.sf-cat-box__icon { border-radius: var(--sf-radius-sm); box-shadow: none; border: 1px solid var(--sf-ink); }

.sf-review-card {
    border: 1px solid var(--sf-ink);
    border-radius: var(--sf-radius-sm);
    box-shadow: none;
}
.sf-review-card__author { font-weight: 800; text-transform: none; }

.sf-highlight-card { border-radius: var(--sf-radius-sm); transition: background 0.15s ease; }
.sf-highlight-card:hover { background: rgba(var(--theme-color), 0.05); }

.sf-newsletter__copy h2 { font-weight: 400; }

.sf-footer__col h3 { letter-spacing: 0.12em; font-weight: 700; }
.sf-footer__logo { font-family: var(--font-headline); font-weight: 400; letter-spacing: 0.02em; }

.sf-checkout__panel, .sf-checkout__summary-card { border-radius: var(--sf-radius-sm); box-shadow: none; border: 1px solid var(--sf-border); }
.sf-story__card { border-radius: var(--sf-radius-sm); box-shadow: none; }

.sf-quickview, .sf-cart { box-shadow: none; }
.sf-quickview__title { font-weight: 400; }

/* Header: a solid black bottom border (not a soft tinted line) and sharp,
   uppercase nav - the same poster-board language as the section banners. */
.sf-header { box-shadow: 0 2px 0 rgb(var(--dark-text)); }
.sf-header__logo img { border-radius: var(--sf-radius-sm); }
.sf-header__nav-link {
    padding: 8px 14px;
    border-radius: var(--sf-radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    transition: background 0.15s ease;
}
.sf-header__nav-link:hover {
    color: inherit;
    background: rgba(var(--theme-color), 0.08);
}
.sf-header__icon-btn {
    background: var(--sf-surface-muted);
    border-color: transparent;
    border-radius: var(--sf-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.sf-header__icon-btn:hover {
    background: rgba(var(--theme-color), 0.12);
    color: rgba(var(--theme-color), 1);
}

/* ==========================================================================
   H. OrdaMe v2 — clean catalog system
   Inspired by the supplied Raj Tech layout rhythm, not copied.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    text-transform: none;
    letter-spacing: -0.035em;
    font-weight: 800;
}

body {
    overflow-x: hidden;
    background: linear-gradient(180deg, #fff 0 430px, rgba(var(--box-bg), 0.30) 430px 100%);
}

.sf-header {
    border-bottom: 1px solid rgba(var(--dashed-line), 0.45);
    box-shadow: 0 4px 18px rgba(28, 45, 82, 0.07);
}
.sf-header__logo img { border-radius: 10px; }
.sf-header__nav-link {
    padding: 8px 13px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
}
.sf-header__nav-link:hover {
    color: rgba(var(--theme-color), 1);
    background: rgba(var(--theme-color), 0.09);
}
.sf-header__icon-btn {
    background: #fff;
    border-color: rgba(var(--dashed-line), 0.55);
    border-radius: 10px;
}
.sf-header__icon-btn:hover { transform: translateY(-1px); }

.sf-hero__title {
    max-width: 760px;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 800;
    text-transform: none;
    text-shadow: 0 3px 22px rgba(0, 0, 0, 0.32);
}
.sf-hero__eyebrow {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: rgba(var(--theme-color), 1);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sf-hero .sf-btn--light {
    border: 0;
    border-radius: var(--sf-radius-pill);
    background: rgba(var(--theme-color), 1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    font-weight: 800;
}

.sf-btn {
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
}
.sf-btn--primary:hover, .sf-btn--dark:hover {
    transform: translateY(-2px);
    filter: none;
    box-shadow: var(--sf-shadow-md);
}
.sf-btn--ghost:hover,
.sf-cat-boxes__arrow:hover,
.sf-search__filter-trigger:hover {
    border-color: rgba(var(--theme-color), 0.35);
    color: rgba(var(--theme-color), 1);
    background: rgba(var(--theme-color), 0.07);
}

.sf-search__bar {
    border: 1px solid rgba(var(--theme-color), 0.20);
    border-radius: var(--sf-radius-pill);
    background: #fff;
    box-shadow: 0 8px 25px rgba(28, 45, 82, 0.08);
}
.sf-search__filter-trigger { border-radius: var(--sf-radius-pill); }

.sf-section-head {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    min-height: 62px;
    margin: 0 0 20px;
    padding: 15px 20px;
    border-radius: var(--sf-radius-md);
    background: linear-gradient(100deg, rgba(var(--theme-color), 1), rgba(var(--theme-color2), 1));
    color: #fff;
    box-shadow: 0 8px 24px rgba(var(--theme-color), 0.18);
}
.sf-section-head__title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    text-transform: none;
}
.sf-section-head__title::before { content: none; }
.sf-section-head__subtitle { color: rgba(255, 255, 255, 0.78); }
.sf-section-head__link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.1);
}
.sf-section-head__link:hover {
    color: rgba(var(--theme-color), 1);
    background: #fff;
}

.sf-product-section {
    padding-top: var(--sf-space-6);
    padding-bottom: var(--sf-space-6);
}
.sf-product-section + .sf-product-section { border-top: 0; }

.sf-card {
    padding: 10px;
    border: 1px solid rgba(var(--dashed-line), 0.52);
    border-radius: var(--sf-radius-md);
    background: #fff;
    box-shadow: 0 2px 8px rgba(28, 45, 82, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sf-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--theme-color), 0.30);
    box-shadow: var(--sf-shadow-md);
}
.sf-card__media {
    border: 0;
    border-radius: 9px;
    background: rgba(var(--box-bg), 0.32);
    box-shadow: none;
}
.sf-card__title {
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.025em;
    text-transform: none;
}
.sf-card__price { color: rgba(var(--theme-color), 1); font-weight: 800; }
.sf-card .sf-btn--primary {
    min-height: 34px;
    padding: 8px 14px;
    box-shadow: none;
}
.sf-badge {
    border-radius: 5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
}

.sf-cat-box {
    border-radius: var(--sf-radius-md);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sf-cat-box:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--theme-color), 0.25);
    background: #fff;
    box-shadow: var(--sf-shadow-md);
}
.sf-cat-box__icon {
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}

.sf-review-card,
.sf-highlight-card,
.sf-checkout__panel,
.sf-checkout__summary-card,
.sf-story__card {
    border: 1px solid rgba(var(--dashed-line), 0.45);
    border-radius: var(--sf-radius-md);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
}
.sf-highlight-card:hover {
    transform: translateY(-3px);
    background: #fff;
    box-shadow: var(--sf-shadow-md);
}
.sf-review-card__author { font-weight: 800; text-transform: none; }

.sf-newsletter {
    border: 1px solid rgba(var(--theme-color), 0.12);
    border-radius: var(--sf-radius-lg);
    background: linear-gradient(120deg, rgba(var(--theme-color), 0.09), rgba(var(--theme-color2), 0.04));
    box-shadow: var(--sf-shadow-sm);
}
.sf-newsletter__copy h2 { font-weight: 800; }

.sf-quickview, .sf-cart { box-shadow: var(--sf-shadow-lg); }
.sf-quickview__title { font-weight: 800; }

.sf-footer { border-top: 4px solid rgba(var(--theme-color), 1); }
.sf-footer__col h3 { font-weight: 800; letter-spacing: 0.08em; }
.sf-footer__logo {
    font-family: var(--font-headline);
    font-weight: 800;
    letter-spacing: -0.04em;
}

@media (min-width: 1200px) {
    .sf-products__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 767.98px) {
    body { background: rgba(var(--box-bg), 0.22); }
    .sf-section-head {
        min-height: 54px;
        padding: 12px 14px;
        border-radius: 10px;
    }
    .sf-section-head__subtitle { display: none; }
    .sf-card { padding: 8px; }
    .sf-card:hover { transform: none; }
    .sf-hero__title { font-size: clamp(2rem, 10vw, 3rem); }
}

/* ==========================================================================
   I. OrdaMe v3 — complete component pass
   ========================================================================== */

/* Desktop header search and all configurable header action variants */
.sf-header__search-trigger {
    width: clamp(220px, 25vw, 360px);
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 15px;
    border: 1px solid rgba(var(--dashed-line), 0.95);
    border-radius: var(--sf-radius-pill);
    background: rgb(248, 250, 255);
    color: rgb(var(--content-color));
    box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(28, 45, 82, 0.06);
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.sf-header__search-trigger:hover,
.sf-header__search-trigger:focus-visible {
    outline: none;
    border-color: rgba(var(--theme-color), 0.48);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--theme-color), 0.09), 0 6px 18px rgba(28, 45, 82, 0.09);
}
.sf-header__search-trigger svg { width: 18px; height: 18px; flex: 0 0 auto; color: rgba(var(--theme-color), 1); }
.sf-header__search-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.sf-header__search-trigger-kbd {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid rgb(var(--dashed-line));
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #fff;
    color: rgb(var(--muted-text));
    font-size: .66rem;
    font-weight: 800;
}
.sf-header__icon-btn--labeled,
.sf-header__icon-btn--stacked {
    width: auto;
    min-width: 42px;
    padding: 0 13px;
    gap: 8px;
}
.sf-header__icon-btn-label { font-size: .78rem; font-weight: 800; }
.sf-header__stacked-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-align: left; }
.sf-header__stacked-heading { color: rgb(var(--muted-text)); font-size: .58rem; font-weight: 800; letter-spacing: .06em; }
.sf-header__stacked-value { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .69rem; font-weight: 700; }

/* Inline search section, suggestions, filter dialog, results and empty state */
.sf-search {
    padding: 22px 0 28px;
    background: rgba(255, 255, 255, 0.92);
}
.sf-search__inner {
    max-width: 980px;
}
.sf-search__row {
    gap: 10px;
    padding: 7px;
    border: 1px solid rgba(var(--dashed-line), .9);
    border-radius: var(--sf-radius-pill);
    background: #fff;
    box-shadow: 0 12px 32px rgba(28, 45, 82, .10);
}
.sf-search__field { min-width: 0; }
.sf-search__icon { left: 14px; color: rgba(var(--theme-color), 1); }
.sf-search__input {
    height: 46px;
    padding: 0 118px 0 44px;
    border: 0;
    border-radius: var(--sf-radius-pill);
    background: transparent;
}
.sf-search__input:focus { border-color: transparent; box-shadow: none; }
.sf-search__submit { right: 0; min-width: 104px; height: 42px; padding: 0 20px; }
.sf-search__filter-trigger {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--dashed-line), .9);
    background: rgb(248, 250, 255);
}
.sf-search__suggestions { justify-content: center; margin-top: 13px; gap: 7px; }
.sf-search__suggestion {
    padding: 6px 12px;
    border: 1px solid transparent;
    background: rgba(var(--theme-color), .07);
    color: rgb(var(--content-color));
    font-size: .76rem;
}
.sf-search__suggestion:hover { border-color: rgba(var(--theme-color), .22); }
.sf-search-badge {
    border: 1px solid rgba(var(--theme-color), .14);
    background: linear-gradient(110deg, rgba(var(--theme-color), .09), #fff);
    box-shadow: var(--sf-shadow-sm);
}
.sf-search-empty__inner {
    max-width: 680px;
    border: 1px dashed rgba(var(--theme-color), .24);
    border-radius: var(--sf-radius-lg);
    background: #fff;
}
.sf-search-empty__icon { color: rgba(var(--theme-color), 1); opacity: 1; }
.sf-dialog__panel {
    border: 1px solid rgba(var(--dashed-line), .8);
    box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
}
.sf-dialog__head { padding-bottom: 16px; border-bottom: 1px solid rgb(var(--dashed-line)); }
.sf-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sf-filter-option {
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
}
.sf-filter-option:hover { border-color: rgba(var(--theme-color), .16); background: rgba(var(--theme-color), .05); }

/* Product quick-view: clearly separated gallery, details and purchasing dock */
.sf-quickview {
    width: min(920px, 96vw);
    background: rgb(246, 249, 255);
    border-left: 1px solid rgba(var(--dashed-line), .9);
}
.sf-quickview__panel { position: relative; }
.sf-quickview__panel > .sf-panel-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    border: 1px solid rgba(var(--dashed-line), .85);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--sf-shadow-sm);
}
.sf-quickview__main { min-height: 0; }
.sf-quickview__media {
    flex-basis: 46%;
    padding: 24px;
    border-right: 1px solid rgba(var(--dashed-line), .8);
    background: #fff;
}
.sf-quickview__media-frame {
    border: 1px solid rgba(var(--dashed-line), .75);
    border-radius: var(--sf-radius-lg);
    background: rgb(246, 249, 255);
}
.sf-quickview__media-arrow,
.sf-quickview__media-zoom {
    border: 1px solid rgba(var(--dashed-line), .82);
    box-shadow: var(--sf-shadow-sm);
}
.sf-thumb {
    border-radius: 8px;
    background: rgb(246, 249, 255);
}
.sf-quickview__right { background: var(--sf-surface); }
.sf-quickview__scroll { scrollbar-color: rgba(var(--theme-color), .25) transparent; }
.sf-quickview__body { padding: 58px 28px 28px; }
.sf-quickview__title { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.17; }
.sf-quickview__price { font-size: 1.35rem; }
.sf-option,
.sf-extra {
    border-radius: 9px;
    background: #fff;
}
.sf-option:hover,
.sf-extra:hover { border-color: rgba(var(--theme-color), .35); }
.sf-notes-textarea:focus {
    outline: none;
    border-color: rgba(var(--theme-color), .55);
    box-shadow: 0 0 0 4px rgba(var(--theme-color), .08);
}
.sf-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(var(--theme-color), .06);
}
.sf-tabs__link {
    flex: 1;
    padding: 9px 12px;
    border-radius: 7px;
    color: rgb(var(--content-color));
    font-size: .8rem;
    font-weight: 800;
    text-align: center;
}
.sf-tabs__link.is-active,
.sf-tabs__link.active { background: #fff; color: rgba(var(--theme-color), 1); box-shadow: var(--sf-shadow-sm); }
.sf-tab-content { padding-top: 14px; }
.sf-tab-pane { color: rgb(var(--content-color)); }
.sf-quickview__action-bar {
    border-top: 1px solid rgba(var(--dashed-line), .85);
    background: #fff;
    box-shadow: 0 -8px 24px rgba(28, 45, 82, .06);
}
.sf-qty { border-color: rgba(var(--theme-color), .2); }

/* Cart drawer and line items */
.sf-cart { border-left: 1px solid rgba(var(--dashed-line), .9); }
.sf-cart__head { background: linear-gradient(110deg, rgba(var(--theme-color), .09), #fff); }
.sf-cart-item {
    border: 1px solid rgba(var(--dashed-line), .8);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
}
.sf-cart-item__thumb { background: rgb(246, 249, 255); }
.sf-cart__summary { background: #fff; box-shadow: 0 -8px 24px rgba(28, 45, 82, .06); }

/* Dedicated product, checkout, fields and payment choices */
.sf-product-page__media,
.sf-product-page__body {
    border: 1px solid rgba(var(--dashed-line), .75);
    border-radius: var(--sf-radius-lg);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
}
.sf-product-page__body { padding: clamp(18px, 3vw, 34px); }
.sf-checkout__head { margin-bottom: 22px; }
.sf-checkout__panel,
.sf-checkout__summary-card { padding: clamp(18px, 3vw, 28px); }
.sf-checkout__summary-card { position: sticky; top: calc(var(--sf-header-h) + 18px); }
.sf-input,
.sf-field input,
.sf-field textarea,
.sf-field select,
.sf-searchable-select__input {
    border-color: rgba(var(--dashed-line), .95);
    background: rgb(250, 252, 255);
}
.sf-input:focus,
.sf-field input:focus,
.sf-field textarea:focus,
.sf-field select:focus,
.sf-searchable-select__input:focus {
    outline: none;
    border-color: rgba(var(--theme-color), .56);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--theme-color), .08);
}
.sf-payment-option {
    border: 1px solid rgba(var(--dashed-line), .85);
    border-radius: 10px;
    background: #fff;
}
.sf-payment-option:hover { border-color: rgba(var(--theme-color), .3); }
.sf-gift-panel,
.sf-coupon { border-radius: 10px; background: rgba(var(--theme-color), .05); }

/* Account, order history, addresses, reviews and auth */
.sf-account { padding-block: var(--sf-space-7); }
.sf-account__head,
.sf-account-toolbar {
    padding: 18px;
    border: 1px solid rgba(var(--dashed-line), .8);
    border-radius: var(--sf-radius-md);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
}
.sf-account-search { min-width: min(100%, 300px); }
.sf-order-card,
.sf-address-card,
.sf-orders-empty {
    border: 1px solid rgba(var(--dashed-line), .8);
    border-radius: var(--sf-radius-md);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
}
.sf-order-card { padding: 18px; }
.sf-order-card__number,
.sf-order-card__total-amount { font-weight: 800; }
.sf-order-card__meta,
.sf-order-card__total { color: rgb(var(--content-color)); }
.sf-order-card__thumb,
.sf-address-card__head { background: rgb(246, 249, 255); }
.sf-order-card__thumbs { display: flex; gap: 6px; }
.sf-order-card__buttons,
.sf-order-card__actions,
.sf-address-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-order-card__more {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px; border-radius: 8px;
    background: rgba(var(--theme-color), .08);
    color: rgba(var(--theme-color), 1); font-size: .74rem; font-weight: 800;
}
.sf-address-card__edit,
.sf-address-card__delete,
.sf-account-search-clear,
.sf-blog-copy-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 7px 11px;
    border: 1px solid rgba(var(--dashed-line), .9); border-radius: 8px;
    background: #fff; font-size: .76rem; font-weight: 800;
}
.sf-address-card__edit:hover,
.sf-account-search-clear:hover,
.sf-blog-copy-link:hover { border-color: rgba(var(--theme-color), .3); color: rgba(var(--theme-color), 1); }
.sf-address-card__delete:hover { border-color: rgba(var(--theme-danger-color), .3); color: rgba(var(--theme-danger-color), 1); }
.sf-account-refresh-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sf-account-cancel-modal .sf-dialog__panel { max-width: 520px; }
.sf-order-tracker { border-radius: var(--sf-radius-md); background: rgba(var(--theme-color), .05); }
.sf-order-step { color: rgb(var(--content-color)); }
.sf-order-cancellation-state { border-radius: 10px; }
.sf-rating-input { color: rgb(var(--theme-warning-color)); }

/* Blog index/article, static pages and generic store states */
.sf-blog-index,
.sf-blog-article,
.sf-static { padding-block: var(--sf-space-7); }
.sf-blog-index__head,
.sf-blog-toolbar,
.sf-blog-featured,
.sf-blog-article__inner,
.sf-blog-empty {
    border: 1px solid rgba(var(--dashed-line), .78);
    border-radius: var(--sf-radius-lg);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
}
.sf-blog-index__head,
.sf-blog-toolbar,
.sf-blog-article__inner,
.sf-blog-empty { padding: clamp(18px, 3vw, 30px); }
.sf-blog-card {
    overflow: hidden;
    border: 1px solid rgba(var(--dashed-line), .78);
    border-radius: var(--sf-radius-md);
    background: #fff;
    box-shadow: var(--sf-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sf-blog-card:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-md); }
.sf-blog-card__media,
.sf-blog-card__placeholder { background: rgb(239, 244, 255); }
.sf-blog-card__body { padding: 17px; }
.sf-blog-card__title,
.sf-blog-title,
.sf-blog-index__title,
.sf-blog-related__title { font-weight: 800; letter-spacing: -.035em; }
.sf-blog-card__excerpt,
.sf-blog-index__subtitle { color: rgb(var(--content-color)); }
.sf-blog-card__more { color: rgba(var(--theme-color), 1); font-size: .8rem; font-weight: 800; }
.sf-blog-card__date,
.sf-blog-date { color: rgba(var(--theme-color), 1); font-size: .76rem; font-weight: 800; }
.sf-blog-content { color: rgb(var(--content-color)); line-height: 1.75; }
.sf-blog-share,
.sf-blog-related { border-top: 1px solid rgb(var(--dashed-line)); padding-top: 22px; }
.sf-notice-banner,
.sf-hours-banner {
    border: 1px solid rgba(var(--theme-color), .18);
    border-radius: var(--sf-radius-md);
    background: linear-gradient(110deg, rgba(var(--theme-color), .09), #fff);
    box-shadow: var(--sf-shadow-sm);
}

/* Media lightbox, slider controls, category pager and fixed utilities */
.sf-media-lightbox__panel { background: rgba(5, 10, 22, .98); }
.sf-media-lightbox__stage { border-radius: var(--sf-radius-md); }
.sf-banner-control,
.sf-slide-prev,
.sf-slide-next,
.sf-category-pager__link {
    border: 1px solid rgba(var(--dashed-line), .8);
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--sf-shadow-sm);
}
.sf-category-pager__link:hover { border-color: rgba(var(--theme-color), .3); color: rgba(var(--theme-color), 1); }
.sf-back-to-top,
.sf-fixed-button { box-shadow: var(--sf-shadow-md); }

/* Mobile navigation and narrow layout guarantees */
.sf-mobile-nav__panel {
    border-left: 1px solid rgba(var(--dashed-line), .9);
    box-shadow: -20px 0 60px rgba(15, 23, 42, .18);
}
.sf-mobile-nav__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--dashed-line));
    border-radius: 10px;
}
.sf-mobile-nav__link { min-height: 46px; padding-inline: 12px; }
.sf-mobile-nav__link:hover { background: rgba(var(--theme-color), .08); color: rgba(var(--theme-color), 1); }

@media (max-width: 991.98px) {
    .sf-header__row { gap: 10px; }
    .sf-header__actions { gap: 6px; }
    .sf-header__search-trigger { width: 42px; min-width: 42px; border-radius: 10px; padding: 0; justify-content: center; }
    .sf-checkout__summary-card { position: static; }
    .sf-quickview { width: min(760px, 100vw); }
}

@media (max-width: 767.98px) {
    .sf-search { padding: 14px 0 20px; }
    .sf-search__row { padding: 5px; }
    .sf-search__input { height: 42px; padding-left: 40px; padding-right: 90px; font-size: .82rem; }
    .sf-search__submit { min-width: 82px; height: 38px; padding-inline: 14px; font-size: .76rem; }
    .sf-search__filter-trigger { width: 42px; height: 42px; }
    .sf-search-badge { align-items: flex-start; flex-wrap: wrap; }
    .sf-search-badge__actions { width: 100%; justify-content: space-between; }

    .sf-quickview { background: #fff; }
    .sf-quickview__main { display: block; overflow-y: auto; }
    .sf-quickview__media { padding: 16px; border-right: 0; border-bottom: 1px solid rgb(var(--dashed-line)); }
    .sf-quickview__right { min-height: auto; }
    .sf-quickview__scroll { overflow: visible; }
    .sf-quickview__body { padding: 22px 16px; }
    .sf-quickview__panel > .sf-panel-close { top: 10px; right: 10px; }
    .sf-quickview__action-bar { position: sticky; bottom: 0; padding: 12px 16px; z-index: 4; }

    .sf-field-grid { grid-template-columns: 1fr; }
    .sf-account-toolbar { align-items: stretch; }
    .sf-account-search { width: 100%; min-width: 0; }
    .sf-order-card__summary { grid-template-columns: 1fr; }
    .sf-blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 479.98px) {
    .sf-header__row { padding-inline: 12px; }
    .sf-header__logo { max-width: 132px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; }
    .sf-header__logo img { width: 34px; height: 34px; }
    .sf-header__icon-btn,
    .sf-header__menu-btn,
    .sf-header__search-trigger { width: 38px; height: 38px; min-width: 38px; }
    .sf-search__suggestions { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .sf-search__suggestion { flex: 0 0 auto; }
    .sf-dialog { padding: 10px; }
    .sf-dialog__panel { margin: 4vh auto; padding: 18px; }
    .sf-dialog__actions { flex-direction: column-reverse; }
    .sf-dialog__actions .sf-btn { width: 100%; }
    .sf-quickview__action-row { gap: 8px; }
    .sf-quickview__action-row .sf-qty { flex: 0 0 auto; }
    .sf-qty__btn { width: 32px; }
    .sf-qty__value { width: 30px; }
}

/* ==========================================================================
   J. OrdaMe v4 — restrained surfaces, consistent insets, no hover motion
   ========================================================================== */

:root {
    --ordame-edge: clamp(10px, 1.25vw, 20px);
    --ordame-radius: 16px;
}

/* Decorative elevation is deliberately absent in v4. Borders, spacing and
   solid surfaces provide hierarchy without visual noise. */
[class*="sf-"],
.thankyou-receipt-card,
.thankyou-info-card,
.thankyou-items-wrap,
.thankyou-review-prompt {
    box-shadow: none !important;
}

.sf-btn:hover,
.sf-btn--primary:hover,
.sf-btn--dark:hover,
.sf-header__icon-btn:hover,
.sf-card:hover,
.sf-cat-box:hover,
.sf-highlight-card:hover,
.sf-blog-card:hover,
.sf-category-pager__link:hover {
    transform: none !important;
}

/* Header */
.sf-header {
    top: var(--ordame-edge);
    width: calc(100% - (var(--ordame-edge) * 2));
    margin: var(--ordame-edge) auto 0;
    border: 0;
    border-radius: var(--ordame-radius);
    background: rgba(var(--theme-color), 1);
    color: #fff;
    overflow: visible;
}
.sf-header__row {
    height: 76px;
    gap: 16px;
    padding-inline: clamp(14px, 2vw, 26px);
}
.sf-header__logo {
    flex: 0 0 auto;
    color: #fff;
}
.sf-header__logo img {
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
}
.sf-header__nav {
    gap: 16px;
}
.sf-header__nav-link {
    color: #fff;
    background: transparent;
}
.sf-header__nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}
.sf-header__nav-link--featured {
    color: rgba(var(--theme-color), 1);
    background: #fff;
}
.sf-header__nav-link--featured:hover {
    color: rgba(var(--theme-color), 1);
    background: rgba(255, 255, 255, .9);
}
.sf-header__actions {
    gap: 7px;
}
.sf-header__search-trigger {
    width: clamp(180px, 18vw, 260px);
    height: 44px;
    padding: 0 8px 0 13px;
    border-color: rgba(255, 255, 255, .32);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.sf-header__search-trigger:hover,
.sf-header__search-trigger:focus-visible {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.sf-header__search-trigger svg,
.sf-header__stacked-heading,
.sf-header__stacked-value {
    color: #fff;
}
.sf-header__search-trigger-kbd {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
.sf-header__icon-btn,
.sf-header__icon-btn--featured {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.sf-header__icon-btn:hover,
.sf-header__icon-btn--featured:hover {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.sf-header__cart-count {
    border: 2px solid rgba(var(--theme-color), 1);
    background: #fff;
    color: rgba(var(--theme-color), 1);
}
.sf-header__menu-btn { color: #fff; }

/* Consistent outer framing */
.sf-hero {
    width: calc(100% - (var(--ordame-edge) * 2));
    margin: var(--ordame-edge) auto;
    border-radius: var(--ordame-radius);
    overflow: hidden;
}
.sf-banners,
.sf-search,
.sf-highlights,
.sf-checkout,
.sf-account,
.sf-blog-index,
.sf-blog-article,
.sf-static,
.thankyou-section {
    width: calc(100% - (var(--ordame-edge) * 2));
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--ordame-radius);
    overflow: hidden;
}
.sf-section-head,
.sf-newsletter,
.sf-story__card,
.sf-note__inner,
.sf-checkout__panel,
.sf-checkout__summary-card,
.sf-account__head,
.sf-account-toolbar,
.sf-blog-index__head,
.sf-blog-toolbar,
.sf-blog-featured,
.sf-blog-article__inner {
    border-radius: var(--ordame-radius);
}
.sf-section-head {
    background: rgba(var(--theme-color), 1);
}
.sf-newsletter,
.sf-cart__head,
.sf-notice-banner {
    background: var(--sf-surface);
}

/* Category navigation */
.sf-cat-nav {
    width: calc(100% - (var(--ordame-edge) * 2));
    margin: var(--ordame-edge) auto;
}
.sf-cat-nav__shell,
.sf-cat-nav__list {
    box-shadow: none !important;
}
.sf-cat-nav__list {
    padding: 8px;
    border-radius: 12px;
}
.sf-cat-nav__item {
    min-height: 40px;
    padding-inline: 18px;
}

/* Search and search result surfaces */
.sf-search {
    padding: 22px 0;
    background: var(--sf-surface);
}
.sf-search__row {
    border-radius: 12px;
    background: var(--sf-surface);
}
.sf-search__input {
    border-radius: 9px;
}
.sf-search__suggestion {
    background: rgba(var(--theme-color), .1);
    color: rgba(var(--theme-color), 1);
}
.sf-search-badge,
.sf-notice-banner {
    border: 1px solid rgba(var(--theme-color), .34);
    background: rgba(var(--theme-color), .12);
    color: var(--sf-ink);
}
.sf-search-badge__icon {
    background: rgba(var(--theme-color), 1);
    color: #fff;
}
.sf-search-empty__inner {
    border-color: rgba(var(--theme-color), .4);
    background: var(--sf-surface);
}

/* Cards and section surfaces */
.sf-card,
.sf-cat-box,
.sf-review-card,
.sf-highlight-card,
.sf-blog-card,
.sf-order-card,
.sf-address-card {
    border-color: var(--sf-border);
    background: var(--sf-surface);
}
.sf-card:hover,
.sf-cat-box:hover,
.sf-review-card:hover,
.sf-highlight-card:hover,
.sf-blog-card:hover,
.sf-order-card:hover,
.sf-address-card:hover {
    border-color: rgba(var(--theme-color), .45);
}
.sf-card__media img {
    transition: none;
}
.sf-card:hover .sf-card__media img {
    transform: none;
}

/* Checkout: neutral panels, theme-colored controls only */
.sf-checkout {
    background: var(--sf-surface);
}
.sf-checkout__panel,
.sf-checkout__summary-card {
    background: var(--sf-surface);
}
.sf-gift-panel,
.sf-coupon {
    border: 1px solid var(--sf-border);
    background: var(--sf-surface);
}
.sf-coupon .sf-input-group {
    background: var(--sf-surface);
}
.sf-payment-option {
    background: var(--sf-surface);
}

/* Operating-hours bar must remain legible over every page. */
.sf-hours-banner {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(var(--dark-text), .92);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.sf-hours-banner__copy span {
    color: rgba(255, 255, 255, .76);
}

/* Product quick-view */
.sf-quickview__panel > .sf-panel-close {
    border: 0;
    background: rgba(var(--theme-danger-color), 1);
    color: #fff;
}
.sf-quickview__panel > .sf-panel-close:hover {
    background: rgba(var(--theme-danger-color), .86);
    color: #fff;
}

/* Customer address actions */
.sf-address-card__delete {
    border-color: rgba(var(--theme-danger-color), .36);
    background: rgba(var(--theme-danger-color), .12);
    color: rgba(var(--theme-danger-color), 1);
}
.sf-address-card__delete:hover {
    border-color: rgba(var(--theme-danger-color), 1);
    background: rgba(var(--theme-danger-color), .18);
    color: rgba(var(--theme-danger-color), 1);
}
.sf-account-cancel-modal .btn-close {
    display: none !important;
}
.sf-account-cancel-modal .sf-dialog__icon {
    background: rgba(var(--theme-danger-color), .12) !important;
    color: rgba(var(--theme-danger-color), 1) !important;
}
.sf-account-cancel-modal .modal-content {
    border: 1px solid rgba(var(--theme-danger-color), .25);
}
.sf-account-cancel-modal #customerConfirmModalAction {
    border-color: rgba(var(--theme-danger-color), 1);
    background: rgba(var(--theme-danger-color), 1);
    color: #fff;
}

/* Shorter, cleaner heading groups. Meaningful status and form help copy
   remains visible; decorative supporting subtitles do not. */
.sf-section-head__subtitle,
.sf-checkout__head > div > p,
.sf-dialog__subtitle,
.sf-account__head > div > p,
.sf-blog-index__subtitle,
.sf-story__subheading,
.sf-newsletter__copy > p {
    display: none;
}

/* Thank-you page: solid theme-aware receipt rather than the page's built-in
   decorative gradients. !important is required because its page CSS is
   emitted after the template stylesheet. */
.thankyou-section {
    padding: clamp(20px, 4vw, 52px) 0 !important;
    background: rgba(var(--theme-color), .06) !important;
}
.thankyou-receipt-card {
    border: 1px solid rgba(var(--theme-color), .24) !important;
    border-radius: var(--ordame-radius) !important;
    background: var(--sf-surface) !important;
}
.thankyou-hero {
    padding: clamp(24px, 4vw, 38px) !important;
    border-radius: 12px !important;
    background: rgba(var(--theme-color), 1) !important;
    color: #fff !important;
}
.thankyou-hero::after {
    display: none !important;
}
.thankyou-hero h2,
.thankyou-hero p {
    color: #fff !important;
}
.thankyou-check {
    width: 64px !important;
    height: 64px !important;
    border: 2px solid rgba(255, 255, 255, .7) !important;
    background: rgba(255, 255, 255, .14) !important;
}
.thankyou-order-pill {
    border-radius: 9px !important;
    background: #fff !important;
    color: rgba(var(--theme-color), 1) !important;
}
.thankyou-info-card,
.thankyou-review-prompt {
    border-color: var(--sf-border) !important;
    border-radius: 12px !important;
    background: var(--sf-surface) !important;
}
.thankyou-items-wrap {
    border-color: rgba(var(--theme-color), .28) !important;
    border-radius: 12px !important;
    background: var(--sf-surface) !important;
}
.thankyou-receipt-card thead {
    background: rgba(var(--theme-color), 1) !important;
    color: #fff !important;
}
.thankyou-receipt-card tbody tr {
    border-bottom: 1px solid var(--sf-border);
}
.thankyou-receipt-card tbody tr:last-child {
    border-bottom: 0;
}
.thankyou-receipt-card tbody tr:nth-child(even) {
    background: rgba(var(--theme-color), .045);
}
.thankyou-item-pill {
    border-radius: 6px !important;
    background: rgba(var(--theme-color), .1) !important;
    color: rgba(var(--theme-color), 1) !important;
}
.thankyou-total-row {
    background: rgba(var(--theme-color), .14) !important;
    color: var(--sf-ink) !important;
}
.thankyou-rating-options label,
.sf-rating-input label,
.sf-stars {
    color: rgba(var(--theme-warning-color), 1);
}

@media (max-width: 991.98px) {
    .sf-header__row {
        height: 68px;
    }
    .sf-header__logo img {
        width: 44px;
        height: 44px;
    }
    .sf-header__search-trigger {
        width: 42px;
        min-width: 42px;
        border-radius: 10px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --ordame-edge: 8px;
        --ordame-radius: 13px;
    }
    .sf-header {
        top: 8px;
    }
    .sf-header__row {
        height: 62px;
        padding-inline: 10px;
    }
    .sf-header__logo img {
        width: 40px;
        height: 40px;
    }
    .sf-hero {
        border-radius: 13px;
    }
    .sf-cat-nav__list {
        justify-content: flex-start !important;
    }
    .sf-checkout,
    .sf-account,
    .sf-blog-index,
    .sf-blog-article,
    .sf-static,
    .thankyou-section {
        overflow: visible;
    }
    .thankyou-receipt-card .card-body {
        padding: 16px !important;
    }
    .thankyou-receipt-card .table td,
    .thankyou-receipt-card .table th {
        padding: 13px 12px !important;
    }
}

/* ==========================================================================
   K. OrdaMe v6 — complete mobile storefront pass
   ========================================================================== */

@media (max-width: 767.98px) {
    :root {
        --ordame-mobile-gap: 10px;
        --sf-space-4: 14px;
        --sf-space-5: 20px;
        --sf-space-6: 28px;
        --sf-space-7: 38px;
        --sf-space-8: 52px;
    }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: calc(78px + env(safe-area-inset-top));
    }

    body {
        min-width: 0;
        font-size: 14px;
        overflow-x: hidden;
    }

    img,
    video,
    iframe,
    table {
        max-width: 100%;
    }

    .sf-container,
    .container {
        width: 100%;
        max-width: none;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Header: retain only the two essential actions in the compact bar;
       every other configured action remains available in the menu drawer. */
    .sf-header {
        top: calc(6px + env(safe-area-inset-top));
        width: calc(100% - 12px);
        margin-top: 6px;
        border-radius: 12px;
    }

    .sf-header__row {
        min-width: 0;
        height: 58px;
        padding: 0 9px;
        gap: 7px;
    }

    .sf-header__logo {
        max-width: min(42vw, 160px);
        min-width: 0;
        margin-right: auto;
        font-size: .95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sf-header__logo img {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .sf-header__actions {
        flex: 0 0 auto;
        margin-left: 0;
        gap: 5px;
    }

    .sf-header__actions > :not([data-sf-search-jump]):not(.sf-header__icon-btn--cart) {
        display: none;
    }

    .sf-header__search-trigger,
    .sf-header__icon-btn,
    .sf-header__menu-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 9px;
    }

    .sf-header__menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 3;
    }

    .sf-header__cart-count {
        top: -5px;
        right: -5px;
    }

    .sf-mobile-nav {
        padding-left: 42px;
        background: rgba(var(--dark-text), .68);
    }

    .sf-mobile-nav__panel {
        width: 100%;
        max-width: 360px;
        padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
        border-radius: 14px 0 0 14px;
    }

    .sf-mobile-nav__links {
        gap: 5px;
    }

    .sf-mobile-nav__link {
        min-height: 48px;
        padding: 11px 12px;
        border: 1px solid transparent;
        border-radius: 9px;
        font-size: .9rem;
    }

    .sf-mobile-nav__link-value {
        max-width: 240px;
        overflow-wrap: anywhere;
    }

    /* Hero and banner media */
    .sf-hero {
        width: calc(100% - 12px);
        min-height: clamp(340px, 92vw, 470px);
        aspect-ratio: auto;
        margin: 10px auto;
        border-radius: 13px;
        background-position: center;
    }

    .sf-hero__content {
        width: 100%;
        padding: 34px 6px;
    }

    .sf-hero__eyebrow {
        max-width: 100%;
        font-size: .65rem;
    }

    .sf-hero__title {
        max-width: 13ch;
        margin-bottom: 18px;
        font-size: clamp(2rem, 10.5vw, 3.15rem);
        overflow-wrap: anywhere;
    }

    .sf-hero .sf-btn {
        min-height: 44px;
        padding-inline: 18px;
    }

    .sf-banners {
        width: calc(100% - 12px);
        padding: 6px 0;
    }

    .sf-banner-slider,
    .sf-banner-slider.is-contained {
        border-radius: 12px;
    }

    .sf-banner-control {
        width: 38px;
        height: 38px;
    }

    /* Search and result states */
    .sf-search {
        width: calc(100% - 12px);
        padding: 12px 0 16px;
        border-radius: 13px;
    }

    .sf-search__inner {
        padding-inline: 8px;
    }

    .sf-search__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 6px;
        padding: 5px;
        border-radius: 11px;
    }

    .sf-search__field {
        width: 100%;
    }

    .sf-search__input {
        width: 100%;
        height: 42px;
        padding: 0 76px 0 38px;
        font-size: 16px;
    }

    .sf-search__icon {
        left: 12px;
        width: 16px;
        height: 16px;
    }

    .sf-search__submit {
        right: 2px;
        width: auto;
        min-width: 68px;
        height: 38px;
        padding: 0 11px;
        font-size: .72rem;
    }

    .sf-search__filter-trigger {
        width: 42px;
        height: 42px;
    }

    .sf-search__suggestions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 10px;
        padding: 0 2px 5px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .sf-search__suggestion {
        flex: 0 0 auto;
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .sf-search-results,
    .sf-search-empty {
        padding: 14px 0;
    }

    .sf-search-badge {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .sf-search-badge__copy {
        min-width: 0;
    }

    .sf-search-badge__copy h3 {
        font-size: .98rem;
        overflow-wrap: anywhere;
    }

    .sf-search-badge__actions {
        grid-column: 1 / -1;
        width: 100%;
    }

    .sf-search-empty__inner {
        margin-inline: 6px;
        padding: 36px 16px;
    }

    /* Category bar and section headings */
    .sf-cat-nav {
        top: auto;
        width: calc(100% - 12px);
        margin: 10px auto 18px;
    }

    .sf-cat-nav.is-sticky {
        top: calc(72px + env(safe-area-inset-top));
    }

    .sf-cat-nav__shell {
        gap: 5px;
    }

    .sf-cat-nav__list {
        min-height: 48px;
        padding: 5px;
        gap: 5px;
        border-radius: 11px;
    }

    .sf-cat-nav__item {
        min-height: 38px;
        padding: 0 14px;
        font-size: .75rem;
    }

    .sf-cat-nav__arrow {
        width: 42px;
        min-width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .sf-product-section,
    .sf-cat-boxes,
    .sf-reviews,
    .sf-newsletter,
    .sf-highlights {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .sf-section-head {
        min-height: 0;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 12px 13px;
        border-radius: 11px;
    }

    .sf-section-head__title {
        min-width: 0;
        font-size: 1rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .sf-section-head__link {
        flex: 0 0 auto;
        min-height: 36px;
        margin: 0;
        padding: 7px 10px;
        font-size: .72rem;
    }

    /* Category and product grids */
    .sf-cat-boxes__grid,
    .sf-products__grid,
    .sf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sf-cat-box {
        min-height: 132px;
        padding: 14px 9px;
        border-radius: 11px;
    }

    .sf-cat-box__icon {
        width: 48px;
        height: 48px;
        margin-bottom: 9px;
    }

    .sf-cat-box__copy strong {
        font-size: .78rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .sf-cat-box__copy span {
        font-size: .7rem;
    }

    .sf-card {
        min-width: 0;
        padding: 7px;
        border-radius: 11px;
    }

    .sf-card__media {
        border-radius: 8px;
    }

    .sf-card__body {
        min-width: 0;
        padding-top: 9px;
    }

    .sf-card__title {
        display: -webkit-box;
        min-height: 2.6em;
        overflow: hidden;
        font-size: .78rem;
        line-height: 1.3;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .sf-card__price {
        font-size: .88rem;
    }

    .sf-price-was {
        display: inline;
        margin-left: 4px;
        font-size: .67rem;
    }

    .sf-card__actions {
        gap: 5px;
        padding-top: 7px;
    }

    .sf-card__actions .sf-btn--block {
        height: 36px;
        padding-inline: 7px;
        font-size: .69rem;
    }

    .sf-card__actions .sf-btn--icon {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    .sf-badge {
        top: 7px;
        left: 7px;
        padding: 3px 7px;
        font-size: .58rem;
    }

    /* Reviews, highlights, story and newsletter */
    .sf-reviews__track {
        grid-auto-columns: 86%;
        gap: 10px;
        padding-bottom: 5px;
    }

    .sf-review-card,
    .sf-highlight-card {
        min-height: 0;
        padding: 17px;
        border-radius: 11px;
    }

    .sf-highlights__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sf-story {
        margin: 20px auto;
    }

    .sf-story__card {
        padding: 18px;
        border-radius: 13px;
    }

    .sf-story__layout.has-media {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sf-story__layout.media-right .sf-story__media {
        order: 0;
    }

    .sf-newsletter__box {
        padding: 18px 14px;
        text-align: left;
    }

    .sf-newsletter__copy h2 {
        font-size: 1.2rem;
    }

    .sf-newsletter__action {
        min-width: 0;
        width: 100%;
    }

    .sf-newsletter__form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        border-radius: 10px;
    }

    .sf-newsletter__form input {
        width: 100%;
        min-height: 42px;
        padding: 0 10px;
        font-size: 16px;
    }

    .sf-newsletter__form .sf-btn {
        min-height: 42px;
        padding: 0 12px;
        font-size: .72rem;
    }

    /* Product quick-view and media lightbox. Quick-view stays a
       right-anchored drawer (not full-bleed) so the blurred page behind
       it stays visibly present on the left, not hidden completely. */
    .sf-quickview {
        inset: 0;
        left: 10vw;
        width: 90vw;
        max-width: none;
        height: 100dvh;
        border: 0;
        border-radius: 16px 0 0 16px;
        overflow: hidden;
        background: var(--sf-surface);
    }

    body:has(.sf-quickview.show) .sf-backdrop,
    body:has(.sf-quickview.show) .modal-backdrop {
        background: rgba(var(--dark-text), .42);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .sf-quickview__panel {
        height: 100dvh;
        padding-top: env(safe-area-inset-top);
    }

    .sf-quickview__main {
        display: block;
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .sf-quickview__media {
        width: 100%;
        padding: 14px;
        border-right: 0;
    }

    .sf-quickview__media-frame {
        max-height: min(72vw, 360px);
        margin: 0 auto;
        border-radius: 12px;
    }

    .sf-quickview__panel > .sf-panel-close {
        top: calc(10px + env(safe-area-inset-top));
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .sf-quickview__body {
        padding: 18px 14px 14px;
    }

    .sf-quickview__title {
        padding-right: 36px;
        font-size: 1.35rem;
        overflow-wrap: anywhere;
    }

    .sf-option-group__list {
        gap: 7px;
    }

    .sf-option,
    .sf-extra {
        min-height: 42px;
        max-width: 100%;
        padding: 8px 11px;
        overflow-wrap: anywhere;
    }

    .sf-notes-textarea {
        min-height: 90px;
        font-size: 16px;
    }

    .sf-quickview__action-bar {
        position: sticky;
        bottom: 0;
        z-index: 6;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--sf-surface);
    }

    .sf-quickview__action-row {
        gap: 7px;
    }

    .sf-quickview__action-row .sf-qty,
    .sf-quickview__buttons .sf-btn,
    .sf-quickview__buttons-secondary .sf-btn {
        height: 44px;
    }

    .sf-media-lightbox {
        padding: 0;
    }

    .sf-media-lightbox__panel {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .sf-media-lightbox__stage {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .sf-media-lightbox__top-controls {
        top: calc(10px + env(safe-area-inset-top));
        right: 10px;
    }

    .sf-media-lightbox__nav {
        width: 42px;
        height: 42px;
    }

    .sf-media-lightbox__thumbs {
        max-width: calc(100vw - 20px);
        bottom: calc(10px + env(safe-area-inset-bottom));
    }

    /* Cart drawer */
    .sf-cart {
        width: 100vw;
        height: 100dvh;
        border: 0;
    }

    .sf-cart__head {
        min-height: 60px;
        padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    }

    .sf-cart__scroll {
        padding: 12px;
    }

    .sf-cart__items {
        gap: 10px;
    }

    .sf-cart-item {
        padding: 11px;
    }

    .sf-cart-item__thumb {
        width: 58px;
        height: 58px;
    }

    .sf-cart-item__title {
        font-size: .85rem;
    }

    .sf-cart-item__footer {
        gap: 8px;
    }

    .sf-cart__summary {
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    }

    /* Checkout and all form controls */
    .sf-checkout {
        width: calc(100% - 12px);
        padding: 18px 0;
        overflow: visible;
    }

    .sf-checkout__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sf-checkout__panel,
    .sf-checkout__summary-card {
        min-width: 0;
        padding: 15px;
        border-radius: 12px;
    }

    .sf-checkout__head {
        align-items: stretch;
        flex-direction: column;
        margin-bottom: 18px;
    }

    .sf-checkout__head h1 {
        font-size: 1.45rem;
    }

    .sf-gift-toggle {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        border-radius: 10px;
    }

    .sf-field-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sf-field,
    .sf-field-grid__full {
        min-width: 0;
    }

    .sf-input,
    .sf-field input,
    .sf-field textarea,
    .sf-field select,
    .sf-searchable-select__input,
    .form-control {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    .sf-field textarea {
        min-height: 110px;
    }

    .sf-address-grid {
        grid-template-columns: 1fr;
    }

    .sf-payment-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sf-payment-option {
        min-height: 50px;
    }

    .sf-input-group {
        min-width: 0;
    }

    .sf-input-group .sf-btn {
        min-height: 44px;
        padding-inline: 14px;
    }

    .sf-mobile-order-bar {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    /* Thank-you receipt */
    .thankyou-section {
        width: calc(100% - 12px);
        padding: 18px 0 !important;
    }

    .thankyou-receipt-card {
        border-radius: 13px !important;
    }

    .thankyou-receipt-card .card-body {
        padding: 12px !important;
    }

    .thankyou-hero {
        padding: 24px 14px !important;
        border-radius: 11px !important;
    }

    .thankyou-check {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 13px !important;
        font-size: 1.55rem !important;
    }

    .thankyou-hero h2 {
        font-size: 1.35rem !important;
    }

    .thankyou-order-pill {
        max-width: 100%;
        padding: 7px 10px !important;
        overflow-wrap: anywhere;
    }

    .thankyou-info-card {
        padding: 14px !important;
    }

    .thankyou-items-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .thankyou-receipt-card .table {
        min-width: 560px;
    }

    .thankyou-receipt-card .table td,
    .thankyou-receipt-card .table th {
        padding: 12px 10px !important;
        font-size: .78rem !important;
    }

    .thankyou-review-prompt {
        align-items: stretch !important;
        flex-direction: column;
        padding: 14px !important;
    }

    .thankyou-review-prompt .btn {
        width: 100%;
        min-height: 44px;
    }

    .thankyou-receipt-card .mt-5.d-flex {
        align-items: stretch !important;
        flex-direction: column;
        margin-top: 24px !important;
    }

    .thankyou-receipt-card .mt-5.d-flex .btn {
        width: 100%;
        min-height: 46px;
        padding: 12px 14px !important;
    }

    /* Account, orders, addresses and confirmation dialogs */
    .sf-account {
        width: calc(100% - 12px);
        padding: 18px 0;
    }

    .sf-account__head,
    .sf-account-toolbar {
        padding: 14px;
        border-radius: 12px;
    }

    .sf-account__head {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .sf-account__head h1 {
        font-size: 1.4rem;
    }

    .sf-account__head .sf-btn {
        width: 100%;
    }

    #customerAccountTabs.sf-tabs {
        display: flex;
        width: 100%;
        margin: 12px 0;
        padding: 5px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    #customerAccountTabs li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    #customerAccountTabs .sf-tabs__link {
        min-width: 88px;
        min-height: 40px;
    }

    .sf-account-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sf-account-search,
    .sf-account-search input {
        width: 100%;
        min-width: 0;
    }

    .sf-order-card {
        padding: 13px;
    }

    .sf-order-card__summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sf-order-card__actions,
    .sf-order-card__buttons,
    .sf-address-card__actions {
        width: 100%;
        gap: 7px;
    }

    .sf-order-card__actions .sf-btn,
    .sf-order-card__buttons .sf-btn {
        flex: 1 1 130px;
        min-height: 42px;
    }

    .sf-address-card {
        padding: 13px;
    }

    .sf-address-card__head {
        align-items: stretch;
        flex-direction: column;
        background: transparent;
    }

    .sf-address-card__actions button {
        flex: 1;
        min-height: 40px;
    }

    .modal,
    .sf-dialog {
        padding: 8px;
    }

    .modal-dialog,
    .sf-dialog__panel {
        width: 100%;
        max-width: none;
        margin: max(8px, env(safe-area-inset-top)) auto;
    }

    .modal-content,
    .sf-dialog__panel {
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 13px;
        overflow-y: auto;
    }

    .sf-dialog__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .sf-dialog__actions .sf-btn {
        width: 100%;
        min-height: 44px;
    }

    /* Blog/static content */
    .sf-blog-index,
    .sf-blog-article,
    .sf-static {
        width: calc(100% - 12px);
        padding: 18px 0;
    }

    .sf-blog-index__head,
    .sf-blog-toolbar,
    .sf-blog-featured,
    .sf-blog-article__inner,
    .sf-blog-empty {
        padding: 15px;
        border-radius: 12px;
    }

    .sf-blog-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sf-blog-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sf-blog-card__body {
        padding: 14px;
    }

    .sf-blog-title,
    .sf-blog-index__title {
        font-size: 1.45rem;
        overflow-wrap: anywhere;
    }

    .sf-blog-content {
        font-size: .95rem;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .sf-blog-content pre,
    .sf-blog-content table {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Footer and fixed utilities */
    .sf-footer {
        margin-top: 32px;
    }

    .sf-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 34px 16px 24px;
    }

    .sf-footer__bio {
        max-width: none;
    }

    .sf-footer__social-btn {
        width: 44px;
        height: 44px;
    }

    .sf-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
        text-align: left;
    }

    .sf-hours-banner {
        left: 6px;
        right: 6px;
        bottom: calc(6px + env(safe-area-inset-bottom));
        width: auto;
        max-height: min(54dvh, 360px);
        padding: 13px;
        transform: none;
        overflow-y: auto;
        border-radius: 12px;
    }

    .sf-hours-banner__actions {
        width: 100%;
    }

    .sf-hours-banner__actions .sf-btn {
        min-height: 40px;
    }

    .sf-back-to-top {
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        width: 36px;
        height: 36px;
    }

    .sf-back-to-top svg {
        width: 16px;
        height: 16px;
    }

    .sf-back-to-top::before {
        inset: -3px;
    }

    .sf-toast {
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: calc(100% - 24px);
        max-width: 420px;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 359.98px) {
    .sf-header__logo {
        max-width: 104px;
    }

    .sf-header__logo img {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .sf-header__search-trigger,
    .sf-header__icon-btn,
    .sf-header__menu-btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    .sf-cat-boxes__grid,
    .sf-products__grid,
    .sf-grid {
        grid-template-columns: 1fr;
    }

    .sf-card__title {
        min-height: 0;
    }

    .sf-search__submit {
        min-width: 62px;
        padding-inline: 8px;
    }

    .sf-search__input {
        padding-right: 68px;
    }
}

@media (max-width: 767.98px) and (orientation: landscape) {
    .sf-hero {
        min-height: 300px;
    }

    .sf-quickview__media {
        max-width: 420px;
        margin-inline: auto;
    }

    .sf-mobile-nav__panel {
        max-width: 420px;
    }
}

/* ==========================================================================
   L. OrdaMe v7 — compact frame, flat surfaces and unified sub-pages
   ========================================================================== */

:root {
    --ordame-edge: 5px;
    --ordame-radius: 14px;
}

body {
    background: var(--sf-surface);
}

/* A five-pixel storefront frame at every viewport size. */
.sf-container,
.container {
    width: 100%;
    max-width: none;
    padding-left: 5px;
    padding-right: 5px;
}

.sf-header,
.sf-hero,
.sf-banners,
.sf-search,
.sf-products,
.sf-highlights,
.sf-checkout,
.sf-account,
.sf-blog-index,
.sf-blog-article,
.sf-static,
.thankyou-section,
.sf-cat-nav {
    width: calc(100% - 10px);
    margin-left: auto;
    margin-right: auto;
}

/* Flat means flat: no card elevation and no negative hover movement. */
.sf-card,
.sf-cat-box,
.sf-review-card,
.sf-highlight-card,
.sf-story__card,
.sf-note__inner,
.sf-blog-card,
.sf-blog-index__head,
.sf-blog-toolbar,
.sf-blog-article__inner,
.sf-blog-featured,
.sf-checkout__panel,
.sf-checkout__summary-card,
.sf-product-page__media,
.sf-product-page__body,
.sf-search__row,
.sf-dialog__panel,
.sf-cart,
.sf-quickview {
    box-shadow: none !important;
}

.sf-card:hover,
.sf-cat-box:hover,
.sf-review-card:hover,
.sf-highlight-card:hover,
.sf-blog-card:hover,
.sf-btn:hover,
.sf-header__icon-btn:hover,
.sf-section-head__link:hover {
    transform: none !important;
}

/* Header density and logo presence. */
.sf-header__row {
    gap: 8px;
    padding-inline: 12px;
}

.sf-header__logo img {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
}

.sf-header__nav {
    gap: 3px;
}

.sf-header__nav-link {
    padding: 8px 10px;
}

/* Sticky precedence: when a category bar exists it owns the sticky layer. */
body:has(.sf-cat-nav.is-sticky) .sf-header {
    position: relative;
    top: auto;
}

.sf-cat-nav.is-sticky {
    top: 5px;
}

/* The catalog becomes one framed surface instead of a full-width color band. */
.sf-products {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: var(--ordame-radius);
    background: rgba(var(--theme-color), .045);
    overflow: hidden;
}

/* General-purpose category artwork: solid color, rings and dots only. */
.sf-product-section .sf-section-head {
    isolation: isolate;
    min-height: 88px;
    justify-content: center;
    padding: 18px 22px;
    overflow: hidden;
    background: rgba(var(--theme-color), 1);
    text-align: center;
}

.sf-product-section .sf-section-head::before,
.sf-product-section .sf-section-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 2px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    pointer-events: none;
}

.sf-product-section .sf-section-head::before {
    width: 126px;
    height: 126px;
    left: 5%;
    top: -74px;
}

.sf-product-section .sf-section-head::after {
    width: 92px;
    height: 92px;
    right: 7%;
    bottom: -58px;
}

.sf-product-section .sf-section-head__title {
    text-align: center;
}

.sf-product-section .sf-section-head__link {
    position: absolute;
    right: 18px;
}

/* Product-card actions are compact rounded rectangles, never pills. */
.sf-card__actions .sf-btn,
.sf-card__actions .sf-btn--icon {
    border-radius: 8px;
}

/* Filter dialog copy is intentionally concise without changing its behavior. */
#sfFilterModal .sf-dialog__kicker,
#sfFilterModal .sf-filter-option small {
    display: none;
}

#sfFilterModal .sf-dialog__head h3 {
    font-size: 0;
}

#sfFilterModal .sf-dialog__head h3::after {
    content: "Filter";
    font-size: 1.2rem;
}

#sfFilterModal [data-clear-filters] {
    font-size: 0;
}

#sfFilterModal [data-clear-filters]::after {
    content: "Clear";
    font-size: .84rem;
}

/* Reuse the drawer's dismiss control as an image-side Back action. */
.sf-quickview__panel > .sf-panel-close {
    top: 18px;
    right: auto;
    left: 18px;
    width: auto;
    min-width: 78px;
    height: 40px;
    gap: 7px;
    padding: 0 13px;
    border-radius: 8px;
    background: rgba(var(--theme-color), 1);
}

.sf-quickview__panel > .sf-panel-close svg {
    display: none;
}

.sf-quickview__panel > .sf-panel-close::before {
    content: "←";
    font-size: 1rem;
}

.sf-quickview__panel > .sf-panel-close::after {
    content: "Back";
    font-size: .8rem;
    font-weight: 800;
}

/* Product-page gallery blends into the page; the media itself keeps radius. */
.sf-product-page__media,
.sf-product-page__media .sf-quickview__media-frame {
    border-color: transparent;
    background: transparent;
}

/* Gift-card and coupon code fields need no additional enclosing border. */
.sf-gift-panel,
.sf-coupon {
    border: 0;
    background: transparent;
}

/* Standard sub-page heading language and uninterrupted page surface. */
.sf-blog-index,
.sf-blog-article,
.sf-static,
.store-custom-page-main,
.store-custom-page-hero,
.sf-cat-boxes {
    background: var(--sf-surface);
}

.sf-blog-index__head,
.sf-blog-toolbar,
.store-custom-page-hero-inner,
.sf-cat-boxes > .sf-container > .sf-section-head {
    min-height: 64px;
    padding: 16px 20px;
    border: 1px solid var(--sf-border);
    border-radius: var(--ordame-radius);
    background: var(--sf-surface);
    color: var(--sf-ink);
}

.sf-blog-index__title,
.store-custom-page-hero h1,
.sf-cat-boxes > .sf-container > .sf-section-head .sf-section-head__title {
    margin: 0;
    color: var(--sf-ink);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.035em;
}

.store-custom-page-hero {
    padding-top: 5px;
    color: var(--sf-ink);
}

.store-custom-page-hero p,
.sf-blog-index__subtitle {
    display: none;
}

.store-custom-page-paper,
.sf-blog-article__inner {
    max-width: 980px;
    border: 0;
    background: var(--sf-surface);
}

.sf-blog-toolbar {
    margin-bottom: 14px;
}

/* One-line utility footer: socials left, attribution right. */
.sf-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    border-top-width: 2px;
}

.sf-footer__grid,
.sf-footer__bottom {
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
}

.sf-footer__grid {
    display: flex;
    align-items: center;
}

.sf-footer__logo,
.sf-footer__bio,
.sf-footer__col,
.sf-footer__bottom > span:first-child {
    display: none;
}

.sf-footer__socials {
    margin: 0;
}

.sf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    :root {
        --ordame-edge: 5px;
        --ordame-mobile-gap: 5px;
    }

    .sf-container,
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }

    .sf-header {
        top: calc(5px + env(safe-area-inset-top));
        width: calc(100% - 10px);
        margin-top: 5px;
    }

    body:has(.sf-cat-nav.is-sticky) .sf-header {
        top: auto;
    }

    .sf-header__row {
        height: 62px;
        padding-inline: 8px;
        gap: 5px;
    }

    .sf-header__logo img {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .sf-hero,
    .sf-banners,
    .sf-search,
    .sf-products,
    .sf-checkout,
    .sf-account,
    .sf-blog-index,
    .sf-blog-article,
    .sf-static,
    .thankyou-section,
    .sf-cat-nav {
        width: calc(100% - 10px);
    }

    .sf-cat-nav.is-sticky {
        top: calc(5px + env(safe-area-inset-top));
    }

    .sf-products {
        padding: 5px;
    }

    .sf-product-section .sf-section-head {
        min-height: 72px;
        padding: 13px 12px;
    }

    .sf-product-section .sf-section-head__link {
        position: static;
    }

    .sf-quickview__panel > .sf-panel-close {
        top: calc(10px + env(safe-area-inset-top));
        right: auto;
        left: 10px;
        width: auto;
        min-width: 76px;
        height: 38px;
    }

    .sf-quickview__body {
        padding-top: 18px;
    }

    .sf-blog-index__head,
    .sf-blog-toolbar,
    .store-custom-page-hero-inner,
    .sf-cat-boxes > .sf-container > .sf-section-head {
        min-height: 56px;
        padding: 13px 14px;
    }

    .sf-footer {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
    }

    .sf-footer__grid,
    .sf-footer__bottom {
        min-height: 0;
        justify-content: center;
        padding: 12px 10px;
        text-align: center;
    }

    .sf-footer__grid:has(.sf-footer__socials) {
        padding-bottom: 4px;
    }

    .sf-footer__bottom {
        padding-top: 4px;
    }
}

/* v8 final cascade layer (kept last so it wins over inherited v4-v7 passes). */
:root { --ordame-v8-gutter: clamp(12px, 2vw, 28px); --ordame-v8-content: 1480px; }
.sf-container, .container {
    width: min(100%, var(--ordame-v8-content));
    max-width: var(--ordame-v8-content);
    margin-inline: auto;
    padding-inline: var(--ordame-v8-gutter);
}
.sf-hero, .sf-banners { width: 100%; margin-inline: 0; }
.sf-search, .sf-products, .sf-highlights, .sf-checkout, .sf-account,
.sf-blog-index, .sf-blog-article, .sf-static, .thankyou-section, .sf-cat-nav {
    width: min(calc(100% - (var(--ordame-v8-gutter) * 2)), var(--ordame-v8-content));
    margin-inline: auto;
}
.sf-header { top: 0; width: 100%; margin: 0; border-radius: 0; }
.sf-footer { width: 100%; margin-bottom: 0; border-radius: 0; }
body:has(.sf-cat-nav.is-sticky) .sf-header { top: auto; }
.sf-cat-nav.is-sticky { top: 0; }
.sf-btn, .sf-hero .sf-btn, .sf-section-head__link, .sf-card__actions .sf-btn,
.sf-card__actions .sf-btn--icon, .thankyou-section .btn { border-radius: 8px !important; }
.sf-btn--primary:hover, .sf-hero .sf-btn:hover, .theme-btn:hover {
    background-color: rgba(var(--theme-color), .88) !important;
    color: #fff !important;
    filter: none;
}
.sf-search__row, .sf-search__input, .sf-search__submit, .sf-search__filter-trigger {
    border-radius: 999px;
}
.sf-product-section .sf-section-head {
    min-height: 96px;
    border: 1px solid rgba(255,255,255,.2);
    background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,.24) 0 3px, transparent 4px),
        radial-gradient(circle at 86% 75%, rgba(255,255,255,.18) 0 4px, transparent 5px),
        linear-gradient(125deg, rgba(var(--theme-color),1), rgba(var(--theme-color2),.88));
}
.sf-product-section .sf-section-head::before {
    width: 190px; height: 190px; left: -38px; top: -126px;
    border-width: 24px; border-color: rgba(255,255,255,.09);
}
.sf-product-section .sf-section-head::after {
    width: 150px; height: 150px; right: -26px; bottom: -104px;
    border-width: 18px; border-color: rgba(255,255,255,.1);
}
.sf-product-section .sf-section-head__title {
    position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.thankyou-review-prompt h5 {
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    line-height: 1.25;
}
.sf-address-card__head, .sf-address-card.is-active .sf-address-card__head {
    background: transparent !important;
}

@media (max-width: 767.98px) {
    :root { --ordame-v8-gutter: 8px; }
    html { scroll-padding-top: calc(66px + env(safe-area-inset-top)); }
    .sf-container, .container { padding-inline: 8px; }
    .sf-header { z-index: 1050; top: 0; width: 100%; margin: 0; border-radius: 0; }
    .sf-header__row { height: 64px; }
    .sf-hero, .sf-banners { width: 100%; margin-inline: 0; }
    .sf-search, .sf-products, .sf-checkout, .sf-account, .sf-blog-index,
    .sf-blog-article, .sf-static, .thankyou-section, .sf-cat-nav {
        width: calc(100% - 16px);
    }
    .sf-product-page { position: relative; z-index: 1; padding-top: 8px; }
    .sf-mobile-nav {
        padding: 0 0 0 20vw;
        background: rgba(var(--dark-text),.42);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .sf-mobile-nav__panel {
        right: 0; left: auto; width: 80vw; max-width: none;
        padding: calc(16px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
        border-radius: 0; transform: translateX(100%);
    }
    .sf-mobile-nav.is-open .sf-mobile-nav__panel { transform: translateX(0); }
    .sf-mobile-nav__links { gap: 3px; }
    .sf-mobile-nav__link { width: 100%; min-height: 48px; border-radius: 0; }
    .sf-cart {
        left: auto; right: 0; width: 80vw; max-width: none;
        height: 100dvh; border-radius: 0;
    }
    body:has(.sf-cart.show) .sf-backdrop,
    body:has(.sf-cart.show) .modal-backdrop {
        background: rgba(var(--dark-text),.42);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .sf-qty__btn {
        background: rgba(var(--theme-color),.12);
        color: rgba(var(--theme-color),1);
    }
    .sf-back-to-top {
        bottom: calc(10px + env(safe-area-inset-bottom));
        transition: bottom .35s ease, opacity .2s ease;
    }
    body.sf-mobile-order-bar-visible .sf-back-to-top {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
    .thankyou-items-wrap, .thankyou-items-wrap .table-responsive,
    .thankyou-receipt-card .table-responsive {
        display: block; width: 100%; max-width: 100%;
        overflow-x: auto !important; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
    }
    .thankyou-receipt-card .table {
        display: table; width: max-content; min-width: 620px; max-width: none;
    }
    .thankyou-receipt-card thead { display: table-header-group; }
    .thankyou-receipt-card tbody { display: table-row-group; }
    .thankyou-receipt-card tr { display: table-row; }
    .thankyou-receipt-card th, .thankyou-receipt-card td {
        display: table-cell !important; white-space: normal;
    }
    .sf-product-section .sf-section-head { min-height: 78px; }
}

/* ==========================================================================
   N. OrdaMe v9 — feedback pass: contained hero, one section-head standard,
   transparent surfaces, calmer search/newsletter/checkout chrome, fixed
   secondary-button row, scroll-safe layout, refined cart/quick-view/footer
   detail work. Kept last so it wins over every inherited v1-v8 pass above.
   ========================================================================== */

/* ---- 1. Hero: same outer gutter on every side, not just the top ---- */
.sf-hero {
    width: min(calc(100% - (var(--ordame-v8-gutter) * 2)), var(--ordame-v8-content));
    margin-inline: auto;
    margin-bottom: var(--ordame-v8-gutter);
    border-radius: var(--ordame-radius, 14px);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .sf-hero {
        width: calc(100% - (var(--ordame-v8-gutter) * 2));
        margin-bottom: var(--ordame-v8-gutter);
    }
}

/* ---- 2. Category bar: a real gap when sticky + scroll-safe layout ---- */
/* scrollbar-gutter reserves the scrollbar's own width up front, on every
   page, so a scrollbar appearing/disappearing (a filtered category with
   fewer products, a modal closing, etc.) never shifts the whole page's
   content sideways by that width - the most common real cause of the kind
   of "jitter while scrolling" report that's hard to pin to one element. */
html {
    scrollbar-gutter: stable;
}

.sf-cat-nav.is-sticky {
    top: max(5px, env(safe-area-inset-top));
}

@media (max-width: 767.98px) {
    .sf-cat-nav.is-sticky {
        top: max(5px, env(safe-area-inset-top));
    }
}

/* ---- 3 & 6. One section-head standard everywhere: solid color, no
   border, soft abstract shapes instead of a hard-to-place gradient + tiny
   dots. Applies uniformly to every place a section heading renders -
   "Shop by Category", each catalog category name, Customer Reviews, Store
   Highlights - so there's exactly one heading language on the storefront,
   not two competing ones. ---- */
.sf-section-head,
.sf-product-section .sf-section-head,
.sf-cat-boxes > .sf-container > .sf-section-head {
    border: 0;
    border-radius: var(--ordame-radius, 14px);
    background:
        radial-gradient(circle at 6% 25%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 52%),
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 68% 95%, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(circle at 22% 115%, rgba(0, 0, 0, .07) 0%, rgba(0, 0, 0, 0) 55%),
        rgba(var(--theme-color), 1);
    color: #fff;
}

.sf-section-head::before,
.sf-section-head::after,
.sf-product-section .sf-section-head::before,
.sf-product-section .sf-section-head::after {
    content: none !important;
}

.sf-section-head .sf-section-head__title,
.sf-product-section .sf-section-head__title,
.sf-cat-boxes > .sf-container > .sf-section-head .sf-section-head__title {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}

.sf-section-head .sf-section-head__subtitle {
    color: rgba(255, 255, 255, .74);
}

.sf-section-head .sf-section-head__link {
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .12);
}

.sf-section-head .sf-section-head__link:hover {
    color: rgba(var(--theme-color), 1);
    background: #fff;
}

/* ---- 4. Search: transparent section, no white band; button/field radii
   forced fully round; filter dialog wording + centered "Clear" label ---- */
.sf-search {
    background: transparent;
}

.sf-search__row,
.sf-search__input,
.sf-search__submit,
.sf-search__filter-trigger {
    border-radius: 999px !important;
}

#sfFilterModal .sf-dialog__actions .sf-btn--primary {
    position: relative;
    font-size: 0;
}

#sfFilterModal .sf-dialog__actions .sf-btn--primary::after {
    content: "Apply";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .86rem;
    font-weight: 700;
}

/* The real "Clear filters" text stays in the DOM (font-size: 0 only hides
   its glyphs, not its box) - centering the "Clear" replacement with its
   own absolutely-positioned overlay (not a second inline flex item next
   to the now-invisible original text) is what actually centers it,
   instead of leaving it pushed off-center by that invisible sibling. */
#sfFilterModal [data-clear-filters] {
    position: relative;
}

#sfFilterModal [data-clear-filters]::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- 5 & 15. Product card + catalog wrapper: no fill, border only ---- */
.sf-card {
    background: transparent;
}

.sf-products {
    background: transparent;
}

/* ---- 7. Store note: crisper icon, same contained width as every other
   section (it never got added to that shared list before). ---- */
.sf-note {
    width: min(calc(100% - (var(--ordame-v8-gutter) * 2)), var(--ordame-v8-content));
    margin-inline: auto;
}

.sf-note__icon {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ---- 8. Store story: same contained width as everything else, and no
   store-default white fill behind the card - the template's own surface
   stays transparent regardless of the store's configured story color. ---- */
.sf-story {
    width: min(calc(100% - (var(--ordame-v8-gutter) * 2)), var(--ordame-v8-content));
    margin-inline: auto;
}

.sf-story__card {
    background: transparent;
}

@media (max-width: 767.98px) {
    .sf-note,
    .sf-story {
        width: calc(100% - (var(--ordame-v8-gutter) * 2));
    }
}

/* ---- 9, 10 & 11. Reviews + Store Highlights: transparent cards, a
   visible slider arrow (it had no fill at all before - a plain 1px border
   over a busy or similarly-toned background could read as invisible),
   bigger stars, a calmer hover treatment matching the product card. ---- */
.sf-review-card,
.sf-highlight-card {
    background: transparent;
    transition: border-color .18s ease, transform .18s ease;
}

.sf-review-card:hover,
.sf-highlight-card:hover {
    border-color: rgba(var(--theme-color), .45);
    transform: translateY(-2px);
}

.sf-review-card__stars svg {
    width: 19px;
    height: 19px;
}

.sf-review-card__title {
    font-size: 1.05rem;
}

.sf-cat-boxes__arrow {
    background: var(--sf-surface);
    box-shadow: var(--sf-shadow-sm);
    border-color: var(--sf-border);
}

.sf-cat-boxes__arrow:hover {
    background: rgba(var(--theme-color), 1);
    border-color: rgba(var(--theme-color), 1);
    color: #fff;
}

.sf-highlight-card__icon {
    width: 48px;
    height: 48px;
}

/* ---- 12. Newsletter: transparent section, fully rounded subscribe
   button (the site-wide "compact 8px corners" rule below was catching
   every .sf-btn including this one - scoped back to a pill here only). ---- */
.sf-newsletter {
    background: transparent;
}

.sf-newsletter__form .sf-btn {
    border-radius: 999px !important;
}

/* ---- 13. Footer: social left / Powered by right when social links
   exist; Powered by centered across the whole footer when they don't -
   and real clearance from the fixed Back to top button in the same
   corner, so the two never visually collide. ---- */
.sf-footer:not(:has(.sf-footer__socials)) {
    grid-template-columns: 1fr;
}

.sf-footer:not(:has(.sf-footer__socials)) .sf-footer__grid {
    display: none;
}

.sf-footer:not(:has(.sf-footer__socials)) .sf-footer__bottom {
    justify-content: center;
}

.sf-footer__bottom {
    padding-right: clamp(16px, 4vw, 76px);
}

/* ---- 14. Back to top: a real scroll-progress ring, 0-100% around the
   button as the page scrolls - pure CSS (scroll-driven animation), so
   browsers without support simply show the plain button, nothing broken. ---- */
@supports (animation-timeline: scroll()) {
    @property --ordame-btt-progress {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 0%;
    }

    .sf-back-to-top {
        position: fixed;
    }

    .sf-back-to-top::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: conic-gradient(rgba(var(--theme-color), 1) var(--ordame-btt-progress), rgba(var(--theme-color), .22) var(--ordame-btt-progress));
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
        pointer-events: none;
        animation: ordame-btt-scroll linear;
        animation-timeline: scroll(root);
    }

    @keyframes ordame-btt-scroll {
        from { --ordame-btt-progress: 0%; }
        to { --ordame-btt-progress: 100%; }
    }
}

/* ---- 16. Product detail: second + third action buttons share one row
   (flex, even split) instead of the third stacking full-width below the
   second - the row gracefully holds one button (100%) or two (50% each). ---- */
.sf-quickview__buttons-secondary {
    display: flex;
    gap: 8px;
}

.sf-quickview__buttons-secondary.is-hidden {
    display: none;
}

.sf-quickview__buttons-secondary .sf-btn {
    flex: 1;
    width: auto;
}

/* ---- 17. Quantity stepper: the theme's own compact radius, not a full
   pill - matches every other control's corner language now. ---- */
.sf-qty {
    border-radius: var(--ordame-radius, 14px);
}

.sf-qty__btn {
    border-radius: 8px;
}

/* On small screens, re-affirmed as the final word with a tighter radius
   still - the same outer shape read as noticeably rounder at the
   smaller stepper heights mobile layouts actually use. */
@media (max-width: 767.98px) {
    .sf-qty {
        border-radius: 10px !important;
    }
    .sf-qty__btn {
        border-radius: 7px !important;
    }
}

/* ---- 18 & 19. Quick-view Back control: a normal, in-flow bar above the
   product media (it's already the panel's first child in the markup, so
   removing the absolute overlay is what actually stacks it above the
   image instead of floating on top of it) - plus a bigger arrow, real
   alignment, and a smooth hover/press instead of an instant flat swap. ---- */
.sf-quickview__panel > .sf-panel-close {
    position: static;
    display: inline-flex;
    align-self: flex-start;
    margin: var(--sf-space-4) var(--sf-space-4) 0;
    transition: background-color .18s ease, transform .12s ease;
}

.sf-quickview__panel > .sf-panel-close:hover {
    background: rgba(var(--theme-color), .88);
    transform: translateY(-1px);
}

.sf-quickview__panel > .sf-panel-close:active {
    transform: translateY(0);
}

.sf-quickview__panel > .sf-panel-close::before {
    font-size: 1.2rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .sf-quickview__panel > .sf-panel-close {
        position: static;
        margin: var(--sf-space-3) var(--sf-space-3) 0;
    }
}

/* ---- 20. Cart drawer: scroll-safe, square-ish action buttons (not
   circles) matching the theme radius, a real danger hover on Delete. ---- */
.sf-cart__scroll {
    scrollbar-gutter: stable;
}

.sf-cart-item__action {
    border-radius: 8px;
}

.sf-cart-item__remove:hover {
    background: rgba(var(--theme-danger-color), .12);
}

/* ---- 21. Checkout: no manual white section background; the coupon/
   gift-card combined field uses the theme's own radius, not a pill,
   matching the compact-radius button sitting right inside it. ---- */
.sf-checkout {
    background: transparent;
}

.sf-input-group {
    border-radius: var(--sf-radius-md);
}

/* ==========================================================================
   O. OrdaMe v10 — full-width hero/banners (no container cap), one heading
   language (transparent + a rounded accent bar, replacing v9's solid-color
   treatment), white restored on product/review/highlight cards, borders
   removed from story/newsletter, a clear note icon, an even section-to-
   section rhythm, and a real fix for sliders clipping their last card.
   Kept last so it wins over every inherited pass above.
   ========================================================================== */

:root {
    --od-rhythm: var(--sf-space-7);
    --od-rhythm-mobile: var(--sf-space-6);
}

/* ---- Hero + banners: identical treatment - full width, never capped by
   the shared content max-width, the same gutter on top and both sides. ---- */
.sf-hero,
.sf-banners {
    width: calc(100% - (var(--ordame-v8-gutter) * 2));
    max-width: none;
    margin: var(--ordame-v8-gutter) auto;
    border-radius: var(--ordame-radius, 14px);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .sf-hero,
    .sf-banners {
        width: calc(100% - (var(--ordame-v8-gutter) * 2));
        margin: var(--ordame-v8-gutter) auto;
    }
}

/* ---- One shared section-heading language, everywhere a heading renders:
   Shop by Category, each catalog category name, Customer Reviews, Store
   Highlights - transparent, dark ink text, a rounded accent bar before the
   title. Replaces v9's solid-color-plus-shapes treatment entirely. ---- */
.sf-section-head,
.sf-product-section .sf-section-head,
.sf-cat-boxes > .sf-container > .sf-section-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    isolation: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sf-ink);
    padding: 0 0 0 var(--sf-space-4);
    text-align: left;
}

.sf-section-head::before,
.sf-product-section .sf-section-head::before,
.sf-cat-boxes > .sf-container > .sf-section-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 5px;
    border-radius: 999px;
    background: rgba(var(--theme-color), 1);
}

.sf-section-head::after,
.sf-product-section .sf-section-head::after,
.sf-cat-boxes > .sf-container > .sf-section-head::after {
    content: none !important;
}

.sf-section-head__title,
.sf-product-section .sf-section-head__title,
.sf-cat-boxes > .sf-container > .sf-section-head .sf-section-head__title {
    color: var(--sf-ink);
    text-shadow: none;
    text-align: left;
    padding-left: 0;
}

.sf-section-head__title::before {
    content: none !important;
}

.sf-section-head__subtitle {
    color: var(--sf-muted);
}

.sf-section-head__link,
.sf-product-section .sf-section-head__link {
    position: static;
    right: auto;
    color: rgba(var(--theme-color), 1);
    border-color: var(--sf-border);
    background: transparent;
}

.sf-section-head__link:hover {
    color: #fff;
    background: rgba(var(--theme-color), 1);
}

/* ---- Category boxes: no forced section background, cards fully visible
   in the slider (see the shared slider fix further down). ---- */
.sf-cat-boxes {
    background: transparent;
}

/* ---- Product / review / highlight cards: back to a real white surface -
   direct feedback superseding v9's "transparent everywhere" pass for
   these three specifically; every other surface (sections, the catalog
   wrapper, search, newsletter, checkout) stays transparent as before. ---- */
.sf-card,
.sf-review-card,
.sf-highlight-card {
    background: var(--sf-surface);
}

/* ---- Store note: a genuinely clear icon (bolder ring, real dot and stem)
   instead of the same thin glyph just scaled up - swapped in via mask so
   it still tracks the note's own configured text color. ---- */
.sf-note__icon {
    display: none;
}

.sf-note__heading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Ccircle cx='12' cy='8' r='0.9' fill='%23000' stroke='none'/%3E%3Cpath d='M12 11.25v6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Ccircle cx='12' cy='8' r='0.9' fill='%23000' stroke='none'/%3E%3Cpath d='M12 11.25v6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---- Store story: no border; its own heading gets the same accent-bar
   treatment as every other section heading (it's a plain <h2>, not
   .sf-section-head, so it needs its own copy of the rule). ---- */
.sf-story__card {
    border: 0;
}

.sf-story__copy h2 {
    position: relative;
    padding-left: var(--sf-space-4);
    color: var(--sf-ink);
}

.sf-story__copy h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 5px;
    border-radius: 999px;
    background: rgba(var(--theme-color), 1);
}

/* ---- Customer reviews: card gets its white background back; the slider
   gets the same "fully visible last card" fix as category boxes. ---- */
.sf-reviews__track,
.sf-cat-boxes__track {
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--ordame-v8-gutter);
    padding-right: var(--ordame-v8-gutter);
}

/* ---- Newsletter: heading gets the same accent-bar treatment, and the
   border around the whole band is gone (background was already made
   transparent in v9 - the border itself was never removed until now). ---- */
.sf-newsletter {
    border: 0;
    box-shadow: none;
}

.sf-newsletter__copy h2 {
    position: relative;
    padding-left: var(--sf-space-4);
    color: var(--sf-ink);
}

.sf-newsletter__copy h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 5px;
    border-radius: 999px;
    background: rgba(var(--theme-color), 1);
}

/* ---- One consistent rhythm between every section, regardless of each
   section's own historical padding/margin scheme - this is what actually
   fixes "spacing isn't consistent," rather than tuning each one by eye. ---- */
.sf-cat-nav,
.sf-cat-boxes,
.sf-products,
.sf-note,
.sf-story,
.sf-reviews,
.sf-highlights,
.sf-newsletter {
    margin-top: 0;
    margin-bottom: var(--od-rhythm);
}

.sf-highlights:last-of-type,
.sf-newsletter:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .sf-cat-nav,
    .sf-cat-boxes,
    .sf-products,
    .sf-note,
    .sf-story,
    .sf-reviews,
    .sf-highlights,
    .sf-newsletter {
        margin-bottom: var(--od-rhythm-mobile);
    }
}

/* ==========================================================================
   P. OrdaMe v2 (template-making-tmp restart) — matched hero/category-bar
   framing, a section-heading fix that actually renders this time (the
   previous round's "remove the old bar" rule used !important and its own
   replacement didn't, so nothing after it could ever win regardless of
   source order), and a scroll-snap fix that lets every card slider
   genuinely rest on whole cards instead of a partial one at the edge.
   ========================================================================== */

/* ---- 1. Hero/banner/category-bar gutter: a flat 6px everywhere, not the
   wider responsive clamp - confirmed correct at real widths. ---- */
:root {
    --ordame-v8-gutter: 6px;
}

@media (max-width: 767.98px) {
    :root {
        --ordame-v8-gutter: 6px;
    }
}

/* ---- 2. Category bar: the exact same width as hero (it still had the
   shared content-width cap hero no longer does) - the prev/next arrows
   live inside .sf-cat-nav itself, so they follow automatically once the
   bar's own outer width matches. ---- */
.sf-cat-nav {
    width: calc(100% - (var(--ordame-v8-gutter) * 2));
    max-width: none;
}

/* ---- 3. No top/bottom margin on the category bar, sticky or not -
   position: sticky only changes where the element resets to once scrolled
   to; it never exempts the element from its own margin in normal flow, so
   excluding .is-sticky here (an earlier round's mistaken assumption) left
   a real store with sticky mode on still showing the old, much larger
   --ordame-edge-based gap above the bar. ---- */
.sf-cat-nav {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---- 4. The section-heading bar/color fix genuinely renders now - same
   selectors as before, but matching !important against the earlier
   "remove the old bar" rule, and matching the base .sf-section-head case's
   real specificity (Reviews/Store Highlights/Banners use the two-class
   `.sf-section-head .sf-section-head__title` form, not the bare one-class
   selector the previous round wrote, which was one specificity level too
   low to ever beat it). ---- */
.sf-section-head::before,
.sf-product-section .sf-section-head::before,
.sf-cat-boxes > .sf-container > .sf-section-head::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.1em !important;
    bottom: 0.1em !important;
    height: auto !important;
    width: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(var(--theme-color), 1) !important;
}

.sf-section-head .sf-section-head__title,
.sf-product-section .sf-section-head__title,
.sf-cat-boxes > .sf-container > .sf-section-head .sf-section-head__title {
    color: var(--sf-ink) !important;
    text-shadow: none !important;
}

/* ---- 5. Every card slider (category boxes, reviews) genuinely rests on
   whole cards: real mandatory snapping, plus enough trailing space after
   the last real card for the browser to actually reach that snap point -
   without it, a mandatory-snap track can never fully align its last item,
   which is exactly the "4th/5th card still half-showing" symptom. The
   trailing gap itself is expected/normal once the last card is reached -
   the same behavior any real product carousel has. ---- */
.sf-cat-boxes__track,
.sf-reviews__track {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ordame-v8-gutter);
    padding-left: var(--ordame-v8-gutter);
}

.sf-cat-boxes__track {
    padding-right: var(--sf-cat-boxes-card-width, 25%);
}

.sf-reviews__track {
    padding-right: calc((100% - 32px) / 3);
}

@media (max-width: 991.98px) {
    .sf-reviews__track {
        padding-right: calc((100% - 16px) / 2);
    }
}

@media (max-width: 767.98px) {
    .sf-cat-boxes__track {
        padding-right: var(--sf-cat-boxes-mobile-card-width, 50%);
    }
}

@media (max-width: 575.98px) {
    .sf-reviews__track {
        padding-right: 86%;
    }
}

/* ==========================================================================
   Q. OrdaMe feedback — balanced slider edges and final surface refinements
   ========================================================================== */

/* Match catalogue headings to "Shop by Category". These declarations
   deliberately match the earlier important layered heading treatment. */
.sf-product-section .sf-section-head,
.sf-cat-boxes > .sf-container > .sf-section-head {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--sf-ink) !important;
}

.sf-product-section .sf-section-head .sf-section-head__title,
.sf-cat-boxes > .sf-container > .sf-section-head .sf-section-head__title {
    color: var(--sf-ink) !important;
    text-shadow: none !important;
}

/* Only the highlight cards retain their white surface. */
.sf-highlights {
    background: transparent;
}

/* Keep the tinted fill while giving the newsletter panel more side room. */
.sf-newsletter__box {
    padding-left: calc(var(--sf-space-6) + var(--sf-space-3));
    padding-right: calc(var(--sf-space-6) + var(--sf-space-3));
}

/* The visible labels are absolute overlays, so size the underlying controls. */
#sfFilterModal [data-clear-filters],
#sfFilterModal .sf-dialog__actions .sf-btn--primary {
    min-width: 88px;
    min-height: 42px;
    padding: 10px 18px;
}

@media (max-width: 767.98px) {
    /* Retain the platform mobile card widths with an unclipped leading edge. */
    .sf-cat-boxes__track,
    .sf-reviews__track {
        padding-left: var(--ordame-v8-gutter);
    }

    .sf-newsletter__box {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* ---- Prev/next arrows (shared by category boxes and reviews - both use
   this exact class) genuinely look disabled at the start/end of a slider,
   not just functionally unclickable. This template keeps its own copy of
   the base arrow styling rather than sharing hello-vendor's stylesheet, so
   it needs this rule too, not just the platform default. ---- */
.sf-cat-boxes__arrow:disabled {
    opacity: 0;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   R. OrdaMe feedback — one shared top/bottom padding for every section,
   and the banner section mirrors hero's own (none - its box is filled
   edge to edge, only the shared outer gutter/margin creates space)
   ========================================================================== */

/* ---- Each section's own internal top/bottom breathing room used a
   different historical value (some 0, some --sf-space-6, some a mixed
   --sf-space-6/--sf-space-7 pair, some --sf-space-7) - one flat, shared
   value here instead, reusing the exact token that already governs the
   gap *between* sections so there's a single spacing scale, not two. ---- */
.sf-cat-boxes,
.sf-reviews,
.sf-newsletter,
.sf-highlights,
.sf-checkout,
.sf-account {
    padding-top: var(--od-rhythm);
    padding-bottom: var(--od-rhythm);
}

/* ---- Banner images fill their box completely, same as hero's background
   image - the section's own padding only existed to make room around a
   heading that many stores never even set. ---- */
.sf-banners {
    padding: 0;
}

/* ==========================================================================
   S. Modern search - the platform's new store-level "modern search" option
   (a real #sfSearchModal, same markup/JS contract Hello Vendor's own
   search.twig already uses) reuses the classic inline bar's own markup/
   classes for the page-level trigger (search-modal.blade.php) - same
   look either way, so it needs no styling of its own here beyond a
   cursor + hover cue marking it as a click target rather than a real
   input. Every value below is a shared token (--sf-*/--theme-color).
   ========================================================================== */
.sf-search__row[data-sf-toggle] {
    cursor: pointer;
    transition: background 0.2s ease;
}
.sf-search__row[data-sf-toggle]:hover {
    background: rgba(var(--theme-color), 0.06);
}
.sf-search__row[data-sf-toggle] .sf-search__input {
    cursor: pointer;
}

.sf-search-modal .sf-dialog__panel { max-width: 600px; padding: 20px; position: relative; }
.sf-search-modal__body { max-height: 70vh; overflow-y: auto; }
.sf-search-modal__body {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-color), 0.35) transparent;
}
.sf-search-modal__body::-webkit-scrollbar { width: 6px; }
.sf-search-modal__body::-webkit-scrollbar-track { background: transparent; }
.sf-search-modal__body::-webkit-scrollbar-thumb { background: rgba(var(--theme-color), 0.35); border-radius: var(--sf-radius-pill); }
.sf-search-modal__body::-webkit-scrollbar-thumb:hover { background: rgba(var(--theme-color), 0.5); }

.sf-search-modal__bar { display: flex; align-items: center; gap: var(--sf-space-2); }
.sf-search-modal .sf-search__field { flex: 1; margin-bottom: 0; }
.sf-search-modal__filter-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-search-modal__filter-toggle {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-pill);
    color: var(--sf-ink);
    cursor: pointer;
    transition: background 0.2s ease;
}
.sf-search-modal__filter-toggle:hover,
.sf-search-modal__filter-toggle-input:checked + .sf-search-modal__filter-toggle {
    background: rgba(var(--theme-color), 0.12);
    color: rgba(var(--theme-color), 1);
}
.sf-search-modal__filter-toggle svg { width: 18px; height: 18px; }
.sf-search-modal__close { width: 44px; height: 44px; }

.sf-search-modal__filters {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2);
    margin-top: var(--sf-space-3);
}
.sf-search-modal__body:has(#sfSearchFilterToggle:checked) .sf-search-modal__filters {
    display: flex;
}
.sf-search-modal__filter {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--sf-radius-pill);
    background: var(--sf-surface-muted);
    color: var(--sf-ink);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}
.sf-search-modal__filter:has(.sf-filter-check:checked) {
    background: rgba(var(--theme-color), 0.14);
    color: rgba(var(--theme-color), 1);
}
.sf-search-modal__filter .sf-option__mark { display: none; }
.sf-search-modal__clear-filters {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sf-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sf-search-modal__clear-filters:hover { color: rgba(var(--theme-color), 1); }

.sf-search-modal__rows-label {
    color: var(--sf-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: var(--sf-space-4) 0 var(--sf-space-2);
}
.sf-search-modal__rows { display: flex; flex-direction: column; margin-top: var(--sf-space-3); }
.sf-search-modal__row {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    padding: var(--sf-space-2) var(--sf-space-2);
    border-radius: var(--sf-radius-md);
    transition: background 0.2s ease;
}
.sf-search-modal__row:hover { background: var(--sf-surface-muted); }
.sf-search-modal__row img {
    width: 56px; height: 56px; flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface-muted);
}
.sf-search-modal__row-title { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--sf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-search-modal__row-price { flex: 0 0 auto; font-size: 0.86rem; font-weight: 700; color: rgba(var(--theme-color), 1); }
.sf-search-modal__empty-msg { padding: var(--sf-space-5) 0; text-align: center; color: var(--sf-muted); font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   T. OrdaMe feedback round 3
   ========================================================================== */

/* ---- 1. Hero heading: smaller, wider, a touch more line-height - the
   desktop rule's cap (4.8rem) ran large and its 0.98 line-height read
   cramped once wrapped to two lines. Scoped to min-width: 768px - this
   rule appearing last in the file would otherwise also win over the
   already-tuned mobile override below 767.98px, an unconditional rule
   always beats an earlier media-scoped one at equal specificity
   regardless of which breakpoint is actually active. ---- */
@media (min-width: 768px) {
    .sf-hero__title {
        font-size: clamp(1.9rem, 4vw, 3.6rem);
        max-width: 900px;
        line-height: 1.1;
    }
}

/* ---- 2. Search bar: centered, a sensible length, not full width - it
   already carried its own max-width: 980px (line ~2200), but the search
   markup's wrapper is BOTH .sf-container and .sf-search__inner, and the
   "v8 final cascade layer" rule further down also targets .sf-container
   for the exact same element - same specificity, later in the file, so
   it silently won back to the platform's full 1480px content cap. Same
   real bug as the heading-bar/margin ones from earlier rounds: two
   different-looking selectors that happen to share one element, and the
   later one always wins regardless of which was "meant" to. ---- */
.sf-search__inner {
    max-width: 980px;
}

/* ---- 3. Too much space after the last category's product grid - every
   .sf-product-section (one per category) carries its own top+bottom
   padding (var(--sf-space-6)) for breathing room between categories, but
   .sf-products (the outer wrapper around all of them) ALSO already gets
   its own margin-bottom from the shared section-rhythm rule - the very
   last category was getting both, stacked. Only the last one's bottom
   padding is redundant; every other category keeps its normal spacing
   from the one after it. ---- */
.sf-product-section:last-of-type {
    padding-bottom: 0;
}

/* ---- 4. Back-to-top button's own background is the theme accent color,
   not the dark near-black every other "dark" surface (footer, badges)
   shares - the scroll-progress ring around it already uses the theme
   color (an earlier round), the button itself hadn't been touched yet. ---- */
.sf-back-to-top {
    background: rgba(var(--theme-color), 1);
}

/* ---- 5. Quick-view media frame: no light-blue letterbox band on the
   side when a product image doesn't perfectly fill the square frame
   (object-fit: contain). The dedicated product page already got this
   exact fix (search "Product-page gallery blends into the page" further
   up) - the quick-view drawer version of the same frame never did. ---- */
.sf-quickview__media-frame {
    background: transparent;
}

/* ---- 6. Quick-view close/back control: a real in-flow first child of
   .sf-quickview__media now (modal.blade.php), not an absolutely-
   positioned sibling simulating the effect - so it needs none of that
   positioning math anymore, just its own natural size/spacing within
   the column (flex-direction: column defaults to stretch, which would
   otherwise make a circular button as wide as the whole column). ---- */
.sf-quickview__media > .sf-panel-close {
    align-self: flex-start;
    flex: 0 0 auto;
    margin-bottom: var(--sf-space-3);
}

/* ---- 7. Quick-view prev/next arrows: re-affirmed true vertical center
   against the media frame itself (not any padded ancestor) - top: 50%
   already targeted the frame correctly, so this is a defensive re-assert
   of the same values as the literal last word, in case anything above
   this line in a real store's own rendering context (image aspect ratio,
   badge overlays) was ever nudging it visually off-true. ---- */
.sf-quickview__media-arrow {
    top: 50%;
    transform: translateY(-50%);
}

/* ==========================================================================
   U. OrdaMe feedback round 4
   ========================================================================== */

/* ---- 1. "View all" link hover: a light theme tint, not white - an old
   rule from the earlier solid-color heading design
   (.sf-section-head .sf-section-head__link:hover, higher specificity
   than every later attempt to fix this) was still silently winning and
   setting a plain white hover background. Matches this exact selector's
   specificity so it actually wins this time, plus explicit padding/
   radius since that was asked for alongside the color. ---- */
.sf-section-head__link,
.sf-section-head .sf-section-head__link,
.sf-product-section .sf-section-head__link {
    padding: 8px 16px;
    border-radius: var(--sf-radius-pill);
}

.sf-section-head__link:hover,
.sf-section-head .sf-section-head__link:hover,
.sf-product-section .sf-section-head__link:hover {
    background: rgba(var(--theme-color), 0.1);
    color: rgba(var(--theme-color), 1);
}

/* ---- 2. Cart drawer: no more permanently-reserved scrollbar gutter on
   the right - a real, deliberate earlier fix for scroll-triggered layout
   shift, but it also means visible dead space on the right any time the
   cart doesn't have enough items to actually need scrolling (the common
   case). Removed per explicit request; the layout-shift tradeoff it
   guarded against comes back if a very long cart's scrollbar toggling
   ever becomes a real complaint. ---- */
.sf-cart__scroll {
    scrollbar-gutter: auto;
}

/* ---- 3. Checkout "Add more items" link: the same light hover tint the
   panel-close button already uses everywhere else (surface-muted, a
   pill big enough to actually show it). ---- */
.sf-add-more-link {
    padding: 6px 10px;
    margin-left: -10px;
    border-radius: var(--sf-radius-pill);
    transition: background 0.2s ease;
}

.sf-add-more-link:hover {
    background: var(--sf-surface-muted);
}

/* ---- 4. Video thumbnail: a real, distinct slide of its own now (see
   product-detail.js's buildMediaItems()) - icon-only, no product photo
   standing in for it (a real photo read as "a picture of X," not "play
   a video"), so it needs a real background of its own instead of the
   now-absent <img> it used to dim. ---- */
.sf-thumb--video {
    background: rgba(var(--theme-color), 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-thumb__play-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

/* ==========================================================================
   V. Ambari feedback round 5
   ========================================================================== */

/* ---- 1. Search modal: a small, fixed outer margin instead of the base
   dialog's 10vh top/bottom - that's viewport-relative vertical centering,
   which reads as a much bigger gap above/below than the flat side
   padding the outer .sf-dialog wrapper already gives it, i.e. "more
   space from the top than the other sides." ---- */
.sf-search-modal .sf-dialog__panel {
    margin: var(--sf-space-4) auto;
}

/* ---- 2. Quick-view action bar: a real border was silently winning over
   the "static" (non-scrolling) variant's own border-top: none - two
   different-looking selectors (.sf-quickview__action-bar vs its
   --static modifier) targeting the same element, and a later, unrelated
   "give every action bar a border" round didn't know about the special
   case. This is the one, final word for it. ---- */
.sf-quickview__action-bar--static {
    border-top: none;
}

/* ---- 3. Quick-view right column: the same real white surface the
   media column already uses, not "transparent" - transparent let
   whatever's actually behind the panel show through, which wasn't
   guaranteed to be the exact same white on every store, so the two
   columns could still end up two different shades of "white" instead
   of one continuous surface. ---- */
.sf-quickview__right {
    background: var(--sf-surface) !important;
}

/* ---- 4. Search modal's real top-space source: .sf-dialog__body carries
   its own margin-top from the shared base rule (every other dialog gets
   it too), stacking on top of the panel's own padding - fixing the
   panel's margin alone (round 5, item 1) wasn't the whole story. ---- */
.sf-search-modal__body {
    margin-top: 0;
}

/* ==========================================================================
   W. Ambari feedback round 7
   ========================================================================== */

/* ---- 1. Thank-you page: no light theme-tinted background behind the
   receipt card - this page's own inline <style> (@section('css')) is
   emitted after this stylesheet, so the earlier round that added this
   background needed !important to land at all; removing it needs the
   same to win back. ---- */
.thankyou-section {
    background: transparent !important;
}

/* ---- 2. Order status tracker (My Account > Orders): every step now
   has a real border so it reads as a distinct pill even before it's
   reached, not just a background tint that was barely different from
   the page behind it, plus a real connecting line between steps so it
   reads as one continuous progress track instead of a loose row of
   independent boxes. This page's own inline <style> is also emitted
   after this stylesheet - !important where a property already exists
   there (background/color), none needed for new ones (border, the
   connector). ---- */
.sf-order-tracker {
    gap: 10px !important;
}
.sf-order-step {
    border: 1px solid var(--sf-border);
    background: var(--sf-surface) !important;
    justify-content: center;
    text-align: center;
    outline: none !important;
}
.sf-order-step.is-complete,
.sf-order-step.is-current {
    border-color: rgba(var(--theme-color), .4);
    background: rgba(var(--theme-color), .08) !important;
    color: var(--sf-ink) !important;
}
.sf-order-step.is-complete {
    color: rgba(var(--theme-color), 1) !important;
}
.sf-order-step.is-current {
    border-color: rgba(var(--theme-color), 1);
    box-shadow: 0 0 0 3px rgba(var(--theme-color), .12);
}
.sf-order-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 8px;
    height: 2px;
    background: var(--sf-border);
    transform: translateY(-50%);
}
.sf-order-step.is-complete:not(:last-child)::after {
    background: rgba(var(--theme-color), 1);
}

/* ---- 3. Quick-view close/back control: restores the "← Back" pill
   look (hidden icon, ::before/::after text) an earlier round gave it -
   that round targeted the old selector (.sf-quickview__panel >
   .sf-panel-close), which stopped matching the moment the button moved
   into .sf-quickview__media (a real DOM restructuring, per an explicit
   request), so it had silently gone back to a plain circular X - a
   real regression from the restructuring, not a deliberate change. ---- */
.sf-quickview__media > .sf-panel-close {
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
    min-width: 78px;
    height: 40px;
    gap: 7px;
    padding: 0 13px;
    margin-bottom: var(--sf-space-3);
    border-radius: 8px;
    background: rgba(var(--theme-color), 1);
    color: #fff;
}
.sf-quickview__media > .sf-panel-close svg {
    display: none;
}
.sf-quickview__media > .sf-panel-close::before {
    content: "←";
    font-size: 1rem;
}
.sf-quickview__media > .sf-panel-close::after {
    content: "Back";
    font-size: .8rem;
    font-weight: 800;
}
.sf-quickview__media > .sf-panel-close:hover {
    background: rgba(var(--theme-color), .88);
}

/* ---- 4. "View all" link hover: re-affirmed as the literal last word,
   in case its rounded corners were ever getting clipped/squared off by
   something else on that specific page's own rendering (the earlier
   round's fix - padding/radius on the base state, tint on :hover - is
   correct on paper; this exists as a defensive guarantee it can't lose
   to anything else on this exact property). ---- */
.sf-section-head__link,
.sf-section-head .sf-section-head__link,
.sf-product-section .sf-section-head__link {
    border-radius: var(--sf-radius-pill) !important;
    overflow: hidden;
}

/* ==========================================================================
   X. Ambari feedback round 8 — touch-device parity, mobile fit and finish
   ========================================================================== */

/* ---- 1. Order status tracker: centered content per step (was left-
   aligned inside an equal-width column, reading as slightly lopsided)
   and the base rule's own outline dropped in favor of round 7's own
   border/box-shadow treatment, so a current step doesn't show two
   overlapping ring effects at once - see .sf-order-tracker/.sf-order-step
   earlier in this file, right after round 7's stepper styling. ---- */

/* ---- 2. Quick-view's right (content) column is the exact same white
   as the media column - see the fix earlier in this file at
   .sf-quickview__right (Section V carried a "transparent" version of
   this rule forward from before; transparent isn't guaranteed to
   resolve to the same white as the media column on every store, so it
   now names the same token directly instead). ---- */

/* ---- 3. Full-view (lightbox) image: no reserved side margin - it used
   to cap at 85vw even on wide desktop screens, leaving visible empty
   space on both sides that wasn't needed; mobile already went edge to
   edge lower in this file and is untouched. ---- */

/* ---- 4. Mobile quick-view drawer is a 90%-width panel, not full-
   bleed - the remaining 10% keeps the blurred page visibly present
   behind it instead of hiding it completely, matching how the cart
   drawer and hamburger menu already behave at this width. See the
   .sf-quickview rule inside the existing max-width:767.98px block. ---- */

/* ---- 5. Back-to-top button is smaller on phones - 44px still read as
   large relative to the rest of the mobile chrome. ---- */

/* ---- 6. Quantity stepper's outer shape is a touch tighter still on
   phones specifically - the shared 14px radius (desktop-tuned) still
   read as noticeably rounder at the shorter heights this control
   actually renders at on a phone. ---- */

/* ---- 7. Touch devices never hover, so anything whose only visual
   "this is clickable" signal on desktop is a :hover background would
   otherwise look completely inert until tapped. Each one below gets
   its own real hover look as its actual default on a touch device, and
   every real control also gets a brief press-down (scale) on tap so a
   tap itself always has visible feedback, the way a desktop hover
   already implies one is coming. Deliberately excluded: selection-state
   indicators (the category bar's active tab, the hamburger drawer's own
   links) where a permanent tint would read as "already selected" rather
   than "clickable" - those get the press-down feedback only. ---- */
@media (hover: none) {
    .sf-panel-close { background: var(--sf-surface-muted); }
    .sf-cart-item__action { background: var(--sf-surface-muted); }
    .sf-quickview__media-zoom { background: #fff; }
    .sf-media-lightbox__close,
    .sf-media-lightbox__nav,
    .sf-media-lightbox__zoom-btn { background: rgba(255, 255, 255, 0.22); }
    .sf-footer__social-btn { background: rgba(var(--theme-color), 1); }
    .sf-search__suggestion { background: rgba(var(--theme-color), 0.12); color: rgba(var(--theme-color), 1); }
    .sf-section-head__link { background: rgba(255, 255, 255, 0.12); }
    .sf-searchable-select__option { background: var(--sf-surface-muted); }
    .sf-back-link { background: rgba(var(--theme-color), 0.1); }
    .sf-btn--icon { background: rgba(var(--theme-color), 0.12); color: rgba(var(--theme-color), 1); }
    .sf-btn--icon.sf-btn--whatsapp { background: rgba(var(--whatsapp-color), 1); color: #fff; }
    .sf-btn--icon.sf-btn--messenger { background: #0084ff; color: #fff; }
    .sf-highlight-card { background: rgba(var(--theme-color), 0.05); }
    .sf-filter-option { border-color: rgba(var(--theme-color), .16); background: rgba(var(--theme-color), .05); }
    .sf-search-modal__row { background: var(--sf-surface-muted); }

    /* .sf-quickview__media-arrow keeps its own translateY centering -
       scaling it on tap has to combine with that, not replace it, or
       the arrow visibly jumps out of vertical center for the moment
       it's pressed. */
    .sf-quickview__media-arrow:active { transform: translateY(-50%) scale(.9); }

    .sf-btn:active,
    .sf-btn--icon:active,
    .sf-panel-close:active,
    .sf-mobile-nav__link:active,
    .sf-section-head__link:active,
    .sf-search__suggestion:active,
    .sf-search-modal__row:active,
    .sf-back-link:active,
    .sf-cat-nav__item:active,
    .sf-filter-option:active,
    .sf-highlight-card:active,
    .sf-qty__btn:active:not(:disabled),
    .sf-footer__social-btn:active,
    .sf-searchable-select__option:active,
    .sf-quickview__media-zoom:active,
    .sf-media-lightbox__close:active,
    .sf-media-lightbox__nav:active,
    .sf-media-lightbox__zoom-btn:active,
    .sf-cart-item__action:active,
    .sf-quickview__media > .sf-panel-close:active {
        transform: scale(.94);
    }
}

/* ==========================================================================
   Y. Ambari feedback round 9
   ========================================================================== */

/* ---- 1. Featured header button: a real, distinct white pill with dark
   ink text on the desktop header row (the dark-header override further up
   this file was giving it theme-colored text on a white background - a
   featured item should read as "the one everyone notices," not blend
   toward the header's own accent). The equivalent mobile-sidebar class is
   new (a platform fix, not this file - the drawer never rendered a
   featured state at all before); it gets the opposite treatment, a solid
   theme-color pill with white text, since the drawer's own background is
   white and a white-on-white pill would be invisible there. ---- */
.sf-header__nav-link--featured {
    background: #fff;
    color: var(--sf-ink);
}
.sf-header__nav-link--featured:hover {
    background: rgba(255, 255, 255, .9);
    color: var(--sf-ink);
}
.sf-header__icon-btn--featured {
    background: #fff;
    border-color: transparent;
    color: var(--sf-ink);
}
.sf-header__icon-btn--featured:hover {
    background: rgba(255, 255, 255, .9);
    color: var(--sf-ink);
}
.sf-header__actions .sf-btn--primary {
    background: #fff;
    color: var(--sf-ink);
    border-color: transparent;
}
.sf-header__actions .sf-btn--primary:hover {
    background: rgba(255, 255, 255, .9);
    color: var(--sf-ink);
}

.sf-mobile-nav__link--featured {
    background: rgba(var(--theme-color), 1);
    color: #fff;
}
.sf-mobile-nav__link--featured:hover {
    background: rgba(var(--theme-color), .9);
    color: #fff;
}
.sf-mobile-nav__link--featured .sf-mobile-nav__link-value,
.sf-mobile-nav__links--actions .sf-mobile-nav__link--featured svg,
.sf-mobile-nav__links--actions .sf-mobile-nav__link--featured i {
    color: #fff;
}

/* ---- 2. Mobile sidebar close button sits at the panel's right edge,
   not the left - the panel itself is a plain block container (not a flex
   column), and the close button's own display:inline-flex meant a
   margin-left:auto push wouldn't resolve (auto margins only push on
   block-level boxes) - switching it to a block-level flex box (still
   40x40 with its icon centered inside, nothing else changes) is what
   actually lets the auto margin land it at the top-right corner every
   other close control on the site already uses. Every menu item's label
   text was already unconditional (both loops render icon + full label
   regardless of the desktop-only "icon only" display setting - that
   setting only ever affected the header row, never this drawer), so
   nothing else needed changing there. ---- */
.sf-mobile-nav__close {
    display: flex;
    margin-left: auto;
}

/* ---- 3. Order tracker's own top gap matches its left/right/bottom -
   the page's own inline styles (account.blade.php, emitted after this
   stylesheet) set its padding shorthand with an explicit 0 on top only,
   so the tracker sat flush against the order card's summary row above
   it while every other side kept the standard space-4 gap. ---- */
.sf-order-tracker {
    padding-top: var(--sf-space-4) !important;
}

/* ---- 4. "Shop by Category" box names get a real, deliberate font-size
   on desktop - they never had one at all (only a narrow-screen media
   query did, .78rem), so the name rendered at the plain inherited
   browser default instead, noticeably larger than every genuinely-sized
   small label around it (the product-count line right underneath it is
   .84rem). Matches the same scale product card titles already use. ---- */
.sf-cat-box__copy strong {
    font-size: 0.94rem;
}

/* ==========================================================================
   Z. Ambari feedback round 10
   ========================================================================== */

/* ---- 1. "Shop by Category" section heading now matches every other
   section heading's font-size - a higher-specificity rule (shared with
   the blog index title and static-page hero, both of which do want the
   bigger size) was giving this one heading its own much larger clamp()
   than the generic .sf-section-head__title every other heading
   ("Personalized Patches" and the rest) actually resolves to. Split off
   just for this selector, re-affirmed as the final word regardless of
   which of the many .sf-section-head__title rules elsewhere in this
   file it's read against. ---- */
.sf-cat-boxes > .sf-container > .sf-section-head .sf-section-head__title {
    font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
}

/* ---- 2. Mobile hamburger drawer's links are real, visible dark text by
   default - the drawer's own panel has always been a light surface, but
   .sf-header (its ancestor in the DOM) sets a white color for its own
   dark, theme-colored bar, and nothing in this drawer's own links ever
   set a color of their own to stop that from inheriting straight down -
   white text on the drawer's own light background, invisible. Excludes
   the featured item (round 9) on purpose - that one's still white text
   on a solid theme-color pill, which stays legible on its own darker
   background. Also a confirmed, explicit radius (the shared base rule
   already carries one, this just guarantees it survives regardless of
   source order). ---- */
.sf-mobile-nav__link:not(.sf-mobile-nav__link--featured) {
    color: var(--sf-ink) !important;
}
.sf-mobile-nav__link {
    border-radius: var(--sf-radius-sm);
}
.sf-mobile-nav__links--actions .sf-mobile-nav__link:not(.sf-mobile-nav__link--featured) svg,
.sf-mobile-nav__links--actions .sf-mobile-nav__link:not(.sf-mobile-nav__link--featured) i {
    color: var(--sf-muted);
}
.sf-mobile-nav__link:not(.sf-mobile-nav__link--featured) .sf-mobile-nav__link-value {
    color: var(--sf-muted);
}