/* ==========================================================================
   NEXUS STOREFRONT — design system
   --------------------------------------------------------------------------
   Implements the "Storefront Marketplace" design (Claude Design handoff) on
   top of Bagisto's stock Blade markup.

   Hand-authored on purpose: Bagisto's Tailwind bundle is a Vite build and this
   install has no node_modules, so a utility-first rewrite would mean adding a
   build step to every future edit. Everything here is plain CSS served from
   /public, loaded after the Vite bundle so it wins on load order.

   Colours resolve through --brand-* (emitted by layouts/branding.blade.php from
   Configure > General > Branding). The fallbacks are the Nexus palette, so an
   unconfigured store looks like the design and a configured one keeps its brand.

   Sections
     1.  Tokens
     2.  Base
     3.  Layout primitives
     4.  Typography
     5.  Buttons
     6.  Chips, pills, badges
     7.  Forms
     8.  Announcement marquee
     9.  Header
     10. Footer
     11. Product card
     12. Home
     13. Category / PLP / search
     14. Product detail
     15. Cart / checkout / success
     16. Auth
     17. Account
     18. Compare / CMS / contact
     19. Bagisto bridge (stock classes we do not rewrite)
     20. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* Brand-driven. --brand-* comes from the Branding admin; Nexus is default. */
    --sf-accent:            var(--brand-primary, #ff4d2e);
    --sf-ink:               var(--brand-ink, #14141d);
    --sf-header-bg:         var(--brand-header-bg, #ffffff);
    --sf-footer-bg:         var(--brand-footer-bg, #14141d);

    /* Surfaces */
    --sf-page:              #f4f4f8;
    --sf-surface:           #ffffff;
    --sf-surface-sunk:      #f4f4f8;
    --sf-surface-tint:      #fafaff;

    /* Lines — soft (inside cards), base (card edges), strong (controls) */
    --sf-line-soft:         #eeeef4;
    --sf-line:              #e6e6ee;
    --sf-line-strong:       #d8d8e2;
    --sf-line-dashed:       #c6c6d2;

    /* Text ramp */
    --sf-text:              var(--sf-ink);
    --sf-text-body:         #3a3a48;
    --sf-text-muted:        #6a6a7a;
    --sf-text-dim:          #8a8a99;
    --sf-text-faint:        #a3a3b2;

    /* Semantics — fixed, they carry meaning rather than brand */
    --sf-success:           #0f8a4d;
    --sf-success-deep:      #2f6b4a;
    --sf-sale:              #d1452b;
    --sf-warn:              #8a5a1a;
    --sf-danger:            #8a3a3a;
    --sf-link:              #4b45d6;

    /* Status pill pairs */
    --sf-pill-open-bg:      #e9f0f6;  --sf-pill-open-fg:  #2a5f86;
    --sf-pill-done-bg:      #eaf1ec;  --sf-pill-done-fg:  #2f6b4a;
    --sf-pill-warn-bg:      #f3e9d9;  --sf-pill-warn-fg:  #7a5a22;
    --sf-pill-grey-bg:      #f2f2f7;  --sf-pill-grey-fg:  #6a6a7a;

    /* Type */
    --sf-font-display:      Archivo, system-ui, -apple-system, sans-serif;
    --sf-font-body:         Manrope, system-ui, -apple-system, sans-serif;
    --sf-font-mono:         "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

    /* Radii — the design is tight; card 8, tile 6, control 5, chip 20 */
    --sf-r-card:            8px;
    --sf-r-tile:            6px;
    --sf-r-control:         5px;
    --sf-r-sm:              4px;
    --sf-r-chip:            20px;

    /* Elevation */
    --sf-shadow-header:     0 1px 6px rgba(20, 20, 29, .08);
    --sf-shadow-card:       0 4px 14px rgba(20, 20, 29, .12);
    --sf-shadow-card-lg:    0 6px 18px rgba(20, 20, 29, .13);
    --sf-shadow-pop:        0 14px 34px rgba(20, 20, 29, .18);

    /*
       Measures — three widths by page family.

       The mock was drawn at a 1320–1400px canvas, but on a real 1900px+ desktop
       those caps leave ~260px of dead margin each side and push the header's
       logo and utilities toward the middle. These are widened so the shell
       reaches nearer the viewport edge while still capping line length.
    */
    --sf-w-market:          1720px;  /* home, PLP, PDP  */
    --sf-w-editorial:       1560px;  /* search, account, CMS */
    --sf-w-flow:            1280px;  /* cart, checkout  */

    --sf-gutter:            32px;
    --sf-header-h:          82px;    /* sticky offset for in-page sidebars */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
    margin: 0;
    background: var(--sf-surface);
    color: var(--sf-text);
    font-family: var(--sf-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--sf-link); }

::selection {
    background: color-mix(in srgb, var(--sf-accent) 22%, #fff);
    color: var(--sf-ink);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4e0; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: #bdbdcc; }

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

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.sf-wrap        { max-width: var(--sf-w-market);   margin: 0 auto; padding: 0 var(--sf-gutter); }
.sf-wrap--edit  { max-width: var(--sf-w-editorial); }
.sf-wrap--flow  { max-width: var(--sf-w-flow); }

/* Page background. The marketplace screens sit on grey, editorial on white. */
.sf-page        { background: var(--sf-page); }
.sf-page--plain { background: var(--sf-surface); }

/* Vertical rhythm between home/PLP sections */
.sf-band        { padding-top: 16px; }
.sf-band:first-child { padding-top: 16px; }
.sf-band--tight { padding-top: 12px; }

/* A band that supplies its own page colour (rendered outside the page wrapper) */
.sf-band--standalone { padding-block: 20px 24px; }

.sf-band-end    { height: 56px; }

.sf-card {
    background: var(--sf-surface);
    border-radius: var(--sf-r-card);
    padding: 18px 22px;
}

.sf-card--bordered {
    border: 1px solid var(--sf-line);
    padding: 18px;
}

.sf-card--flush { padding: 0; overflow: hidden; }

/* Section head: title left, "view all" right */
.sf-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sf-sec-title {
    font: 800 15px var(--sf-font-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sf-ink);
    margin: 0;
}

.sf-sec-link {
    margin-left: auto;
    font: 800 11.5px var(--sf-font-display);
    letter-spacing: .06em;
    color: var(--sf-accent);
    cursor: pointer;
    white-space: nowrap;
}

.sf-sec-link:hover { color: var(--sf-accent); text-decoration: underline; }

.sf-sec-body { margin-top: 16px; }

/* Grids used throughout */
.sf-grid            { display: grid; gap: 14px; }
.sf-grid--2         { grid-template-columns: repeat(2, 1fr); }
.sf-grid--3         { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sf-grid--4         { grid-template-columns: repeat(4, 1fr); }
.sf-grid--6         { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sf-grid--8         { grid-template-columns: repeat(8, 1fr); }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.sf-display   { font: 400 38px/1.1 var(--sf-font-display); letter-spacing: -.01em; }
.sf-display-s { font: 400 26px var(--sf-font-display); }
.sf-title     { font: 800 20px var(--sf-font-display); text-transform: uppercase; letter-spacing: -.01em; }

.sf-mono {
    font: 500 11px var(--sf-font-mono);
    letter-spacing: .08em;
    color: var(--sf-text-dim);
}

.sf-label {
    font: 600 10px var(--sf-font-mono);
    letter-spacing: .1em;
    color: var(--sf-text-dim);
    text-transform: uppercase;
}

.sf-eyebrow {
    font: 800 13px var(--sf-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sf-ink);
}

.sf-muted  { color: var(--sf-text-muted); }
.sf-dim    { color: var(--sf-text-dim); }
.sf-money  { font: 800 14px var(--sf-font-display); }
.sf-was    { font-size: 11.5px; color: var(--sf-text-faint); text-decoration: line-through; }
.sf-off    { font: 800 11.5px var(--sf-font-display); color: var(--sf-sale); }
.sf-save   { font: 700 11.5px var(--sf-font-display); color: var(--sf-success); }

.sf-breadcrumb {
    font: 600 11px var(--sf-font-mono);
    letter-spacing: .08em;
    color: var(--sf-text-dim);
    text-transform: uppercase;
}

.sf-breadcrumb a:hover { color: var(--sf-accent); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--sf-r-control);
    font: 800 13px var(--sf-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.sf-btn--primary {
    background: var(--sf-accent);
    color: #fff;
}

.sf-btn--primary:hover {
    background: color-mix(in srgb, var(--sf-accent) 86%, #000);
    color: #fff;
}

.sf-btn--ink {
    background: var(--sf-ink);
    color: #fff;
}

.sf-btn--ink:hover { background: #000; color: #fff; }

.sf-btn--outline {
    background: transparent;
    border-color: var(--sf-ink);
    color: var(--sf-ink);
}

.sf-btn--outline:hover { background: var(--sf-ink); color: #fff; }

.sf-btn--quiet {
    background: var(--sf-surface);
    border-color: var(--sf-line);
    color: var(--sf-ink);
}

.sf-btn--quiet:hover { border-color: var(--sf-ink); }

.sf-btn--danger { background: transparent; border-color: #d8b4b4; color: var(--sf-danger); }
.sf-btn--danger:hover { background: #fdf6f6; }

.sf-btn--block { width: 100%; }
.sf-btn--lg    { padding: 16px 26px; font-size: 14px; }
.sf-btn--sm    { padding: 9px 15px; font-size: 11.5px; letter-spacing: .05em; }

.sf-btn:disabled,
.sf-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Text link that reads as an action */
.sf-textlink {
    font: 800 12px var(--sf-font-display);
    letter-spacing: .05em;
    color: var(--sf-accent);
    cursor: pointer;
}

.sf-textlink:hover { color: var(--sf-accent); text-decoration: underline; }

.sf-underline {
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1.5px solid var(--sf-ink);
    cursor: pointer;
    width: fit-content;
}

/* ==========================================================================
   6. CHIPS, PILLS, BADGES
   ========================================================================== */

.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--sf-r-chip);
    border: 1px solid var(--sf-line);
    background: var(--sf-surface-sunk);
    font: 700 11.5px var(--sf-font-display);
    color: var(--sf-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.sf-chip:hover { border-color: var(--sf-ink); color: var(--sf-ink); }

.sf-chip--on {
    background: var(--sf-ink);
    border-color: var(--sf-ink);
    color: #fff;
}

.sf-chip--on:hover { color: #fff; }

/* Square applied-filter token with an ✕ */
.sf-token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: var(--sf-r-sm);
    background: var(--sf-surface-sunk);
    border: 1px solid var(--sf-line);
    font: 700 11px var(--sf-font-display);
    color: var(--sf-ink);
}

.sf-token:hover { border-color: var(--sf-ink); }

/* Status pill */
.sf-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--sf-r-card);
    font: 600 10px var(--sf-font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--sf-pill-grey-bg);
    color: var(--sf-pill-grey-fg);
    white-space: nowrap;
}

.sf-pill--open { background: var(--sf-pill-open-bg); color: var(--sf-pill-open-fg); }
.sf-pill--done { background: var(--sf-pill-done-bg); color: var(--sf-pill-done-fg); }
.sf-pill--warn { background: var(--sf-pill-warn-bg); color: var(--sf-pill-warn-fg); }
.sf-pill--ink  { background: var(--sf-ink); color: #fff; }

/* Coupon code, dashed outline */
.sf-code {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px dashed var(--sf-accent);
    border-radius: var(--sf-r-sm);
    font: 800 10.5px var(--sf-font-display);
    letter-spacing: .04em;
    color: var(--sf-accent);
    white-space: nowrap;
}

/* Count badge riding an icon */
.sf-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--sf-accent);
    color: #fff;
    font: 700 9.5px var(--sf-font-display);
    display: grid;
    place-items: center;
}

/* ==========================================================================
   7. FORMS
   ========================================================================== */

.sf-field { display: block; }

.sf-field > .sf-label { display: block; margin-bottom: 6px; }

.sf-input,
.sf-select,
.sf-textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-r-card);
    background: #fdfdff;
    font-family: var(--sf-font-body);
    font-size: 13.5px;
    color: var(--sf-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.sf-input::placeholder,
.sf-textarea::placeholder { color: var(--sf-text-dim); }

.sf-input:focus,
.sf-select:focus,
.sf-textarea:focus,
.sf-input:focus-visible {
    outline: none;
    border-color: var(--sf-ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-ink) 8%, transparent);
}

.sf-textarea { min-height: 120px; resize: vertical; }

.sf-error {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--sf-danger);
}

/* Toggle */
.sf-toggle {
    width: 40px;
    height: 23px;
    border-radius: 8px;
    background: var(--sf-line-strong);
    position: relative;
    flex: none;
    cursor: pointer;
    transition: background-color .16s ease;
}

.sf-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(22, 22, 26, .25);
    transition: left .16s ease;
}

.sf-toggle--on { background: var(--sf-ink); }
.sf-toggle--on::after { left: 20px; }

/* Radio-style selectable card (delivery speed, payment method, address) */
.sf-pick {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-control);
    background: var(--sf-surface);
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.sf-pick:hover { border-color: var(--sf-line-strong); }

.sf-pick--on {
    border: 1.5px solid var(--sf-ink);
    background: var(--sf-surface-tint);
}

.sf-pick__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--sf-line-dashed);
    flex: none;
    margin-top: 2px;
}

.sf-pick--on .sf-pick__dot { border: 5px solid var(--sf-ink); }

.sf-pick__name { font: 800 13px var(--sf-font-display); }
.sf-pick__sub  { font-size: 11.5px; color: var(--sf-text-muted); margin-top: 3px; }

/* Dashed "add another" affordance */
.sf-add-dashed {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    border: 1px dashed var(--sf-line-dashed);
    border-radius: var(--sf-r-control);
    font: 800 12px var(--sf-font-display);
    letter-spacing: .05em;
    color: var(--sf-accent);
    cursor: pointer;
}

.sf-add-dashed:hover { border-color: var(--sf-accent); color: var(--sf-accent); }

/* ==========================================================================
   8. ANNOUNCEMENT MARQUEE
   ========================================================================== */

.sf-marquee {
    background: var(--sf-ink);
    color: #fff;
    padding: 9px 0;
    overflow: hidden;
}

.sf-marquee__track {
    display: flex;
    gap: 48px;
    white-space: nowrap;
    width: max-content;
    font: 500 11px var(--sf-font-mono);
    letter-spacing: .14em;
    animation: sf-marq 26s linear infinite;
}

.sf-marquee:hover .sf-marquee__track { animation-play-state: paused; }

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

/* ==========================================================================
   9. HEADER
   ========================================================================== */

.sf-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--sf-header-bg);
    box-shadow: var(--sf-shadow-header);
}

.sf-header__inner {
    max-width: var(--sf-w-market);
    margin: 0 auto;
    padding: 12px var(--sf-gutter);
    display: flex;
    align-items: center;
    gap: 26px;
}

.sf-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
}

.sf-logo__mark {
    width: 32px;
    height: 32px;
    border-radius: var(--sf-r-card);
    background: var(--sf-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 17px var(--sf-font-display);
}

.sf-logo__word {
    font: 800 21px var(--sf-font-display);
    letter-spacing: -.03em;
    color: var(--sf-ink);
}

.sf-logo img { max-height: 34px; width: auto; }

.sf-nav {
    display: flex;
    gap: 24px;
    align-self: stretch;
    font: 700 12.5px var(--sf-font-display);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/*
   The slot stretches to the full header row so the mega-menu can hang off
   top:100% with no dead gap for the pointer to cross on its way down.
*/
.sf-nav__slot {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-block: -12px;
}

.sf-nav__item {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 6px 0 4px;
    border-bottom: 3px solid transparent;
    color: var(--sf-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.sf-nav__item:hover,
.sf-nav__item--on {
    border-bottom-color: var(--sf-accent);
    color: var(--sf-accent);
}

/* Search */
.sf-search {
    /* Positioning context for the absolutely-placed image-search button */
    position: relative;
    flex: 1;
    max-width: 470px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--sf-r-tile);
    background: var(--sf-surface-sunk);
    border: 1px solid var(--sf-line);
    cursor: text;
    transition: border-color .16s ease;
}

/* Image-search camera sits inside the field, not adrift in the header */
.sf-search .icon-camera {
    top: 50% !important;
    transform: translateY(-50%);
    padding: 0 !important;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
    color: var(--sf-text-dim);
    cursor: pointer;
}

.sf-search .icon-camera:hover { color: var(--sf-accent); }

/* Keep the text from running under the camera button */
.sf-search__input { padding-inline-end: 22px; }

.sf-search:hover,
.sf-search:focus-within { border-color: var(--sf-line-dashed); }

.sf-search__icon { font-size: 14px; color: var(--sf-text-dim); flex: none; line-height: 1; }

.sf-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--sf-font-body);
    font-size: 13px;
    color: var(--sf-ink);
}

.sf-search__input::placeholder { color: var(--sf-text-dim); }

.sf-search__hint {
    margin-inline-start: auto;
    font: 600 9.5px var(--sf-font-mono);
    color: var(--sf-text-faint);
    white-space: nowrap;
    cursor: pointer;
}

.sf-search__hint:hover { color: var(--sf-accent); }

/* Utility icons */
.sf-utils {
    margin-inline-start: auto;
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.sf-util {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--sf-ink);
}

.sf-util__icon { font-size: 18px; line-height: 19px; height: 19px; display: block; }
.sf-util__label { font: 700 10.5px var(--sf-font-display); white-space: nowrap; }
.sf-util:hover { color: var(--sf-accent); }

/* Mega/dropdown menu panel */
.sf-menu-panel {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 0 0 var(--sf-r-card) var(--sf-r-card);
    box-shadow: var(--sf-shadow-pop);
    padding: 26px 30px;
}

.sf-menu-panel a { font-size: 13px; color: var(--sf-text-muted); }
.sf-menu-panel a:hover { color: var(--sf-accent); }

.sf-menu-panel ul { margin: 0; padding: 0; list-style: none; }

.sf-menu-panel__group {
    margin: 0;
    font: 800 11px var(--sf-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sf-menu-panel__group a { color: var(--sf-ink); font-size: inherit; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.sf-footer {
    background: var(--sf-footer-bg);
    color: #fff;
    margin-top: auto;
}

.sf-footer__cols {
    max-width: var(--sf-w-editorial);
    margin: 0 auto;
    padding: 44px var(--sf-gutter) 26px;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 28px;
}

.sf-footer__brand { font: 400 26px var(--sf-font-display); color: #fff; }

.sf-footer__tagline {
    font-size: 12.5px;
    color: rgba(246, 245, 242, .6);
    margin-top: 10px;
    line-height: 1.6;
    max-width: 260px;
}

.sf-footer__coltitle {
    font: 600 10px var(--sf-font-mono);
    letter-spacing: .14em;
    color: rgba(246, 245, 242, .45);
    text-transform: uppercase;
}

.sf-footer__links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.sf-footer__links a {
    font-size: 12.5px;
    color: rgba(246, 245, 242, .82);
    transition: color .16s ease;
}

.sf-footer__links a:hover { color: #fff; }

.sf-footer__strip {
    max-width: var(--sf-w-editorial);
    margin: 0 auto;
    padding: 18px var(--sf-gutter) 30px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid rgba(246, 245, 242, .12);
}

.sf-footer__copy {
    font: 500 10.5px var(--sf-font-mono);
    letter-spacing: .04em;
    color: rgba(246, 245, 242, .5);
}

.sf-paychips { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.sf-paychip {
    padding: 5px 10px;
    border-radius: var(--sf-r-tile);
    background: rgba(246, 245, 242, .1);
    font: 500 10px var(--sf-font-mono);
    letter-spacing: .04em;
    color: rgba(246, 245, 242, .82);
}

/* Newsletter inside the dark footer */
.sf-news__title { font: 400 20px var(--sf-font-display); color: #fff; }
.sf-news__sub   { font-size: 12px; color: rgba(246, 245, 242, .6); margin-top: 6px; }

.sf-news__row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.sf-news__row input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--sf-r-tile);
    border: 1px solid rgba(246, 245, 242, .18);
    background: rgba(246, 245, 242, .06);
    color: #fff;
    font-family: var(--sf-font-body);
    font-size: 13px;
    outline: none;
}

.sf-news__row input::placeholder { color: rgba(246, 245, 242, .45); }
.sf-news__row input:focus { border-color: var(--sf-accent); box-shadow: none; }

.sf-news__row button {
    padding: 12px 18px;
    border: 0;
    border-radius: var(--sf-r-tile);
    background: #fff;
    color: var(--sf-ink);
    font: 800 11.5px var(--sf-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.sf-news__row button:hover { background: var(--sf-accent); color: #fff; }

/* ==========================================================================
   11. PRODUCT CARD
   ========================================================================== */

.sf-pcard {
    display: block;
    position: relative;
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    overflow: hidden;
    transition: box-shadow .18s ease;
}

.sf-pcard:hover { box-shadow: var(--sf-shadow-card-lg); }

.sf-pcard__media {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--sf-surface-sunk);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.sf-pcard__media > a {
    display: block;
    position: absolute;
    inset: 0;
}

.sf-pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.sf-pcard:hover .sf-pcard__media img { transform: scale(1.04); }

.sf-pcard__badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    padding: 4px 8px;
    border-radius: 3px;
    background: #fff;
    font: 800 9.5px var(--sf-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sf-ink);
}

.sf-pcard__badge--ink  { background: var(--sf-ink); color: #fff; }
.sf-pcard__badge--sale { background: var(--sf-sale); color: #fff; }

.sf-pcard__wish {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--sf-ink);
    box-shadow: 0 1px 4px rgba(20, 20, 29, .18);
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
}

.sf-pcard__wish:hover { color: var(--sf-accent); transform: scale(1.08); }
.sf-pcard__wish--on   { color: var(--sf-accent); }

.sf-pcard__rating {
    position: absolute;
    bottom: 8px;
    inset-inline-start: 8px;
    padding: 3px 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .94);
    font: 700 10px var(--sf-font-display);
    color: var(--sf-ink);
}

.sf-pcard__rating span { color: var(--sf-text-muted); }

/* Full-width ribbon used by the deal rail */
.sf-pcard__ribbon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    background: rgba(20, 20, 29, .82);
    color: #fff;
    font: 800 10px var(--sf-font-display);
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}

.sf-pcard__body { padding: 11px 12px 13px; }

.sf-pcard__brand {
    /* Must be block: text-overflow does nothing on an inline <a>, so the name
       would run past the card instead of ellipsising. */
    display: block;
    font: 800 13px var(--sf-font-display);
    color: var(--sf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-pcard__name {
    font-size: 12px;
    color: var(--sf-text-muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-pcard__price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/*
   price_html is rendered by the backend and reused across card, PDP and cart.
   Bagisto marks the struck regular price with .final-price and leaves the
   payable price as a bare <p>, so both are restyled here instead of the markup
   being rebuilt in Blade.
*/
.sf-pcard__price > p,
.sf-price > p {
    margin: 0;
    font: 800 14px var(--sf-font-display);
    color: var(--sf-ink);
    line-height: 1.2;
}

.sf-pcard__price > p.final-price,
.sf-price > p.final-price,
.sf-pcard__price .line-through,
.sf-price .line-through {
    font: 400 11.5px var(--sf-font-body);
    color: var(--sf-text-faint);
    text-decoration: line-through;
}

/* Hover action bar over the image */
.sf-pcard__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 1px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}

.sf-pcard:hover .sf-pcard__actions,
.sf-pcard:focus-within .sf-pcard__actions {
    transform: translateY(0);
    opacity: 1;
}

.sf-pcard__act {
    flex: none;
    padding: 11px 12px;
    border: 0;
    background: rgba(20, 20, 29, .9);
    color: #fff;
    font: 800 10.5px var(--sf-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .16s ease;
}

.sf-pcard__act--primary { flex: 1; }
.sf-pcard__act:hover:not(:disabled) { background: var(--sf-accent); }
.sf-pcard__act:disabled { opacity: .55; cursor: not-allowed; }

/*
   Touch devices never fire hover, so the bar stays visible there. It lives
   inside the media box (which clips overflow), so it has to remain overlaid
   rather than dropping below — taking it out of flow there would clip it away
   and leave add-to-cart unreachable on phones.
*/
@media (hover: none) {
    .sf-pcard__actions { transform: translateY(0); opacity: 1; }
}

.sf-pcard__swatches { display: flex; gap: 4px; margin-top: 9px; }

.sf-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(20, 20, 29, .14);
    display: block;
}

.sf-pcard__ship {
    font: 700 10.5px var(--sf-font-display);
    color: var(--sf-success);
    letter-spacing: .03em;
    margin-top: 8px;
}

/* Compact variant for cross-sell rails */
.sf-pcard--mini .sf-pcard__body { padding: 9px 10px; }
.sf-pcard--mini .sf-pcard__brand { font-size: 11.5px; }

/* ==========================================================================
   12. HOME
   ========================================================================== */

/* Hero: one wide banner plus two stacked */
.sf-hero {
    display: grid;
    grid-template-columns: 2.1fr 1fr;
    gap: 12px;
}

.sf-hero__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }

.sf-hero__main,
.sf-hero__side {
    position: relative;
    border-radius: var(--sf-r-card);
    overflow: hidden;
    /* Grid items default to min-width:auto and will happily overflow the
       column when aspect-ratio wants more width than the track allows. */
    min-width: 0;
}

/*
   Sized by aspect ratio rather than a fixed height. Store banners are wide
   strips (~2.7:1); forcing them into a short fixed-height tile made
   object-fit: cover eat the sides, which is where the artwork's own headline
   usually sits. Matching the tile to the artwork keeps the whole banner visible.
*/
.sf-hero__main {
    aspect-ratio: 2.6 / 1;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 0;
    background: linear-gradient(115deg, #ffe3d3, #ffd0c2 45%, #ffb7a6);
}

.sf-hero__side {
    padding: 0;
    min-height: 0;
    display: block;
    cursor: pointer;
    background: linear-gradient(120deg, #e2f0ff, #c9dcff);
}

.sf-hero__side > img { object-fit: cover; object-position: center; }

.sf-hero__side:nth-child(2) { background: linear-gradient(120deg, #e6f7ea, #c9ecd6); }

/*
   The mock used flat gradient tiles; a real store puts photography here. The
   image fills the tile and a scrim sits between it and the copy, because
   ink-on-photo is unreadable often enough that it has to be handled by default
   rather than per banner.
*/
.sf-hero__main > img,
.sf-hero__side > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
   No scrim over the artwork. Nothing is overlaid on these tiles any more, so a
   wash would only mute a finished composition. The dots get a short, local
   gradient of their own instead of darkening the whole banner.
*/
.sf-hero__main::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 76px;
    background: linear-gradient(to top, rgba(20, 20, 29, .30), rgba(20, 20, 29, 0));
    pointer-events: none;
}

/* Only needed while the dot row is present */
.sf-hero__main:not(:has(.sf-hero__dots))::after { content: none; }

/* A tile with no artwork keeps the design's gradient and needs no scrim */
.sf-hero__main:not(:has(> img))::after { content: none; }

/*
   Stacking inside the main tile: image (0) < dot scrim (1) < click overlay (2)
   < dots (4). Nothing is drawn over the artwork, so there is no copy layer —
   the overlay link covers the tile and the dots sit above it to swallow their
   own clicks.
*/
.sf-hero__hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

.sf-hero__main::after { z-index: 1; }

.sf-hero__dots button {
    border: 0;
    padding: 0;
    appearance: none;
}

.sf-hero__dots {
    position: absolute;
    z-index: 4;
    bottom: 16px;
    inset-inline-start: 38px;
    display: flex;
    gap: 6px;
}

.sf-hero__dots span {
    width: 9px;
    height: 5px;
    border-radius: 3px;
    /* Sits over photography, so the resting state is light, not ink */
    background: rgba(255, 255, 255, .55);
    transition: width .2s ease, background-color .2s ease;
    cursor: pointer;
}

.sf-hero__dots span:hover { background: rgba(255, 255, 255, .85); }
.sf-hero__dots span.is-active { width: 26px; background: #fff; }

/* Category circles */
.sf-circles {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
}

.sf-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    cursor: pointer;
}

.sf-circle__img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #ffe8d6;
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: transform .2s ease;
}

.sf-circle__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-circle:hover .sf-circle__img { transform: scale(1.05); }

.sf-circle__label { font: 700 12.5px var(--sf-font-display); color: var(--sf-ink); }
.sf-circle__offer { font: 800 10.5px var(--sf-font-display); color: var(--sf-success); }

/* Countdown */
.sf-countdown { display: flex; align-items: center; gap: 6px; }

.sf-countdown__cell {
    padding: 5px 8px;
    border-radius: var(--sf-r-sm);
    background: var(--sf-ink);
    color: #fff;
    font: 700 12px var(--sf-font-mono);
}

.sf-countdown__sep { font: 700 12px var(--sf-font-display); }
.sf-countdown__tag { font: 700 11px var(--sf-font-display); color: var(--sf-text-muted); margin-inline-start: 4px; }

/* Coupon strip */
.sf-coupon {
    background: var(--sf-surface);
    border-radius: var(--sf-r-card);
    border-inline-start: 4px solid var(--sf-accent);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sf-coupon__code { font: 800 14px var(--sf-font-display); letter-spacing: .04em; }
.sf-coupon__text { font-size: 12.5px; color: var(--sf-text-muted); margin-top: 4px; }

.sf-coupon__copy {
    margin-inline-start: auto;
    padding: 8px 13px;
    border: 1px dashed var(--sf-accent);
    border-radius: var(--sf-r-control);
    background: transparent;
    font: 800 10.5px var(--sf-font-display);
    letter-spacing: .06em;
    color: var(--sf-accent);
    white-space: nowrap;
    cursor: pointer;
}

.sf-coupon__copy:hover { background: var(--sf-accent); color: #fff; }

/* Brand tiles */
.sf-brand-tile {
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    overflow: hidden;
    cursor: pointer;
    background: var(--sf-surface);
    transition: box-shadow .18s ease;
}

.sf-brand-tile:hover { box-shadow: var(--sf-shadow-card); }

.sf-brand-tile__img {
    aspect-ratio: 4 / 3;
    background: var(--sf-surface-sunk);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.sf-brand-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-brand-tile__body { padding: 10px; text-align: center; }

.sf-brand-tile__name {
    font: 800 11.5px var(--sf-font-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-brand-tile__offer { font: 800 11px var(--sf-font-display); color: var(--sf-success); margin-top: 4px; }

/* Value props */
.sf-vprop {
    background: var(--sf-surface);
    border-radius: var(--sf-r-card);
    padding: 16px 18px;
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.sf-vprop__tag {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--sf-surface-sunk);
    display: grid;
    place-items: center;
    /* Sized for the bagisto-shop icon font, which wins the family via !important */
    font: 800 16px var(--sf-font-display);
    color: var(--sf-text-muted);
    text-transform: uppercase;
}

.sf-vprop__title { font: 800 13px var(--sf-font-display); }
.sf-vprop__sub   { font-size: 12px; color: var(--sf-text-muted); margin-top: 3px; line-height: 1.5; }

/*
   Static-content widgets are store-authored HTML with their own inline styles.
   We cannot restructure them, so the card just contains them: strip the huge
   stock margins, keep images inside the radius, and align headings to the
   Nexus type scale.
*/
.sf-static > *:first-child { margin-top: 0; }
.sf-static > *:last-child  { margin-bottom: 0; }

.sf-static .container {
    width: 100%;
    max-width: none;
    padding: 0 !important;
    margin: 0 !important;
}

.sf-static img { max-width: 100%; height: auto; border-radius: var(--sf-r-tile); }

.sf-static h1,
.sf-static h2,
.sf-static h3 {
    font-family: var(--sf-font-display);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sf-ink);
}

.sf-static [class*="mt-"] { margin-top: 0; }

/* Testimonials */
.sf-quote {
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    padding: 16px;
}

.sf-quote__stars { font: 700 12px var(--sf-font-display); color: var(--sf-success); }
.sf-quote__body  { font-size: 13px; line-height: 1.55; color: var(--sf-text-body); margin-top: 8px; }

.sf-quote__by {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.sf-quote__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sf-pill-grey-bg);
    display: grid;
    place-items: center;
    font: 700 9px var(--sf-font-display);
}

.sf-quote__name    { font: 700 12px var(--sf-font-display); }
.sf-quote__product { margin-inline-start: auto; font: 600 9.5px var(--sf-font-mono); color: var(--sf-text-dim); text-transform: uppercase; }

/* ==========================================================================
   13. CATEGORY / PLP / SEARCH
   ========================================================================== */

.sf-plp {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.sf-plp__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.sf-plp__count { font: 700 13px var(--sf-font-display); color: var(--sf-text-muted); }

/* Filter rail */
.sf-filters {
    background: var(--sf-surface);
    border-radius: var(--sf-r-card);
    position: sticky;
    top: var(--sf-header-h);
    overflow: hidden;
}

.sf-filters__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sf-line-soft);
    display: flex;
    align-items: center;
}

.sf-filters__title { font: 800 13px var(--sf-font-display); text-transform: uppercase; }

.sf-filters__clear {
    margin-inline-start: auto;
    font: 800 11px var(--sf-font-display);
    color: var(--sf-accent);
    cursor: pointer;
    background: none;
    border: 0;
}

.sf-filters__applied {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sf-line-soft);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sf-filters__group { padding: 14px 16px; border-bottom: 1px solid var(--sf-line-soft); }
.sf-filters__group:last-child { border-bottom: 0; }

.sf-filters__grouphead {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: 800 11px var(--sf-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-ink);
}

.sf-filters__caret { margin-inline-start: auto; font-size: 10px; color: var(--sf-text-faint); }

.sf-filters__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.sf-fopt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--sf-text-body);
    cursor: pointer;
}

.sf-fopt__box {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 3px;
    border: 1px solid var(--sf-line-strong);
    background: #fff;
    display: grid;
    place-items: center;
    transition: background-color .14s ease, border-color .14s ease;
}

.sf-fopt input { position: absolute; opacity: 0; pointer-events: none; }
.sf-fopt input:checked + .sf-fopt__box { background: var(--sf-ink); border-color: var(--sf-ink); }

.sf-fopt input:checked + .sf-fopt__box::after {
    content: "✓";
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.sf-fopt__count {
    margin-inline-start: auto;
    font: 600 10.5px var(--sf-font-mono);
    color: var(--sf-text-faint);
}

/* Colour swatch option */
.sf-fopt__dot {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--sf-line-strong);
}

/* Toolbar above the grid */
.sf-toolbar {
    background: var(--sf-surface);
    border-radius: var(--sf-r-card);
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sf-toolbar__chips { display: flex; gap: 7px; flex-wrap: wrap; }

.sf-toolbar__sort {
    margin-inline-start: auto;
    display: flex;
    gap: 9px;
    align-items: center;
}

.sf-toolbar__sortlabel { font: 700 12px var(--sf-font-display); color: var(--sf-text-muted); text-transform: uppercase; }

.sf-toolbar__select {
    padding: 9px 13px;
    border-radius: var(--sf-r-control);
    border: 1px solid var(--sf-line);
    background: var(--sf-surface);
    font: 700 12px var(--sf-font-display);
    color: var(--sf-ink);
    cursor: pointer;
}

.sf-plp__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 14px;
}

/* Pagination */
.sf-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.sf-pager__item {
    padding: 10px 15px;
    border-radius: var(--sf-r-control);
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    font: 700 12px var(--sf-font-display);
    color: var(--sf-ink);
    cursor: pointer;
}

.sf-pager__item:hover { border-color: var(--sf-ink); }

.sf-pager__item--on {
    background: var(--sf-ink);
    border-color: var(--sf-ink);
    color: #fff;
}

.sf-pager__item--off { opacity: .45; pointer-events: none; }

/* Search landing */
.sf-searchpage__head { max-width: 760px; margin: 0 auto; text-align: center; }

.sf-searchpage__bar {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding: 6px;
    border-radius: 10px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-strong);
    box-shadow: 0 2px 8px rgba(22, 22, 26, .05);
}

.sf-searchpage__bar input {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--sf-font-body);
    font-size: 14px;
    color: var(--sf-text-body);
}

.sf-searchpage__trending {
    display: flex;
    gap: 7px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
    align-items: center;
}

.sf-resultbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
}

/* ==========================================================================
   14. PRODUCT DETAIL
   ========================================================================== */

.sf-pdp {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 34px;
    margin-top: 14px;
    align-items: start;
}

.sf-pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.sf-pdp__shot {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--sf-surface-sunk);
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: zoom-in;
}

.sf-pdp__shot img,
.sf-pdp__shot video { width: 100%; height: 100%; object-fit: cover; }

.sf-pdp__shot--on { outline: 2px solid var(--sf-ink); outline-offset: -2px; }
.sf-pdp__shot:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; }

/* Gallery is tall; let it scroll past while the buy column stays put */
.sf-pdp__gallery { position: sticky; top: var(--sf-header-h); align-self: start; }

/* An odd trailing tile spans the full width instead of leaving a gap */
.sf-pdp__gallery > .sf-pdp__shot:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16 / 9; }

/* Quantity changer inside the buy column */
.sf-qty {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-r-control);
    background: var(--sf-surface);
    width: fit-content;
}

.sf-qty input { border: 0; outline: none; text-align: center; width: 34px; font: 700 13px var(--sf-font-display); }

.sf-pdp__shot-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    padding: 4px 9px;
    background: var(--sf-ink);
    color: #fff;
    font: 800 9.5px var(--sf-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sf-pdp__sizechart {
    grid-column: span 2;
    aspect-ratio: 16 / 7;
    background: repeating-linear-gradient(135deg, #f0eee9, #f0eee9 9px, #f7f6f3 9px, #f7f6f3 20px);
    display: grid;
    place-items: center;
    font: 600 9px var(--sf-font-mono);
    letter-spacing: .1em;
    color: var(--sf-text-dim);
    text-transform: uppercase;
}

.sf-pdp__info { display: flex; flex-direction: column; gap: 16px; }

.sf-pdp__brand { font: 800 21px var(--sf-font-display); letter-spacing: -.01em; }
.sf-pdp__name  { font-size: 17px; color: var(--sf-text-muted); margin-top: 3px; }

.sf-pdp__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 11px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
}

.sf-pdp__rating strong { font: 800 13px var(--sf-font-display); }
.sf-pdp__rating i { width: 1px; height: 14px; background: var(--sf-line); display: block; }
.sf-pdp__rating span { font: 700 12px var(--sf-font-display); color: var(--sf-text-muted); }

.sf-pdp__pricing { padding-top: 16px; border-top: 1px solid var(--sf-line-soft); }

.sf-pdp__pricerow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sf-pdp__price { font: 800 26px var(--sf-font-display); }
.sf-pdp__mrp   { font-size: 15px; color: var(--sf-text-faint); text-decoration: line-through; }
.sf-pdp__off   { font: 800 15px var(--sf-font-display); color: var(--sf-sale); }
.sf-pdp__tax   { font: 800 12.5px var(--sf-font-display); color: var(--sf-success); margin-top: 6px; }

/* Size selector */
.sf-sizes { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; align-items: center; }

.sf-size {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 12.5px var(--sf-font-display);
    border: 1px solid var(--sf-line-strong);
    background: #fff;
    color: var(--sf-ink);
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.sf-size:hover { border-color: var(--sf-ink); }

.sf-size--on {
    background: var(--sf-ink);
    border-color: var(--sf-ink);
    color: #fff;
}

.sf-size--out {
    color: var(--sf-text-faint);
    text-decoration: line-through;
    cursor: not-allowed;
    background: var(--sf-surface-sunk);
}

/* Colour selector */
.sf-colors { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }

.sf-color {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--sf-line-strong);
    cursor: pointer;
    overflow: hidden;
    border: 0;
    padding: 0;
}

.sf-color img { width: 100%; height: 100%; object-fit: cover; }
.sf-color--on { box-shadow: 0 0 0 2px var(--sf-ink), inset 0 0 0 2px #fff; }

.sf-pdp__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-pdp__cta .sf-btn { flex: 1; }
.sf-pdp__cta .sf-btn--primary { flex: 1.3; }

/* Offers / delivery / details cards */
.sf-pdp__panel {
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    padding: 16px;
}

.sf-pdp__offers { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.sf-pdp__offer {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--sf-text-body);
    line-height: 1.5;
}

.sf-pincode {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 5px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-control);
}

.sf-pincode input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 9px 11px;
    font: 700 12.5px var(--sf-font-display);
    color: var(--sf-ink);
}

.sf-pincode button {
    padding: 9px 14px;
    border: 0;
    border-radius: var(--sf-r-sm);
    background: var(--sf-surface-sunk);
    font: 800 11.5px var(--sf-font-display);
    letter-spacing: .05em;
    color: var(--sf-accent);
    cursor: pointer;
}

.sf-pincode button:hover { background: var(--sf-accent); color: #fff; }

.sf-pdp__lines {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--sf-text-body);
}

.sf-pdp__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.sf-spec {
    padding: 10px 12px;
    background: var(--sf-surface-sunk);
    border-radius: var(--sf-r-control);
}

.sf-spec__k { font: 600 9.5px var(--sf-font-mono); letter-spacing: .06em; color: var(--sf-text-dim); text-transform: uppercase; }
.sf-spec__v { font: 700 12.5px var(--sf-font-display); margin-top: 3px; }

/* Ratings block */
.sf-reviews {
    margin-top: 44px;
    border-top: 1px solid var(--sf-line-soft);
    padding-top: 26px;
}

.sf-reviews__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 26px;
    margin-top: 16px;
    align-items: start;
}

.sf-reviews__score { display: flex; align-items: flex-end; gap: 8px; }
.sf-reviews__num   { font: 800 44px var(--sf-font-display); line-height: 1; }
.sf-reviews__star  { font: 800 20px var(--sf-font-display); color: var(--sf-success); padding-bottom: 5px; }
.sf-reviews__count { font: 700 12.5px var(--sf-font-display); color: var(--sf-text-muted); margin-top: 6px; }

.sf-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.sf-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 700 11px var(--sf-font-display);
    color: var(--sf-text-muted);
}

.sf-bar__track {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: var(--sf-line-soft);
    overflow: hidden;
}

.sf-bar__fill { display: block; height: 6px; border-radius: 4px; background: var(--sf-success); }

.sf-review {
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    padding: 16px;
}

.sf-review__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.sf-review__score {
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--sf-success);
    color: #fff;
    font: 800 11px var(--sf-font-display);
}

.sf-review__name { font: 700 12.5px var(--sf-font-display); }

.sf-review__verified {
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--sf-surface-sunk);
    font: 700 9.5px var(--sf-font-display);
    letter-spacing: .04em;
    color: var(--sf-text-muted);
    text-transform: uppercase;
}

.sf-review__body { font-size: 13px; line-height: 1.6; color: var(--sf-text-body); margin-top: 10px; }

/* ==========================================================================
   15. CART / CHECKOUT / SUCCESS
   ========================================================================== */

/* BAG › ADDRESS › PAYMENT rail */
.sf-steps {
    margin-inline-start: auto;
    display: flex;
    gap: 18px;
    font: 800 12px var(--sf-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sf-steps__item { color: var(--sf-text-faint); }
.sf-steps__item--on   { color: var(--sf-accent); border-bottom: 2px solid var(--sf-accent); padding-bottom: 3px; }
.sf-steps__item--done { color: var(--sf-success); }

.sf-flow {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}

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

.sf-flow__side {
    position: sticky;
    top: var(--sf-header-h);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Slim info bars above the item list */
.sf-bar-row {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sf-bar-row__strong { font: 800 12.5px var(--sf-font-display); }
.sf-bar-row__text   { font-size: 12.5px; color: var(--sf-text-body); }
.sf-bar-row__action { margin-inline-start: auto; }

/* Cart line item */
.sf-line {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    padding: 16px;
    display: flex;
    gap: 16px;
}

.sf-line__media {
    width: 104px;
    flex: none;
    aspect-ratio: 3 / 4;
    background: var(--sf-surface-sunk);
    overflow: hidden;
    border-radius: var(--sf-r-sm);
}

.sf-line__media img { width: 100%; height: 100%; object-fit: cover; }

.sf-line__body { flex: 1; min-width: 0; }
.sf-line__top  { display: flex; align-items: flex-start; gap: 12px; }
.sf-line__brand { font: 800 14px var(--sf-font-display); }
.sf-line__name  { font-size: 13px; color: var(--sf-text-muted); margin-top: 3px; }
.sf-line__sku   { font: 600 10.5px var(--sf-font-mono); color: var(--sf-text-faint); margin-top: 4px; }

.sf-line__remove {
    margin-inline-start: auto;
    font-size: 15px;
    color: var(--sf-text-faint);
    cursor: pointer;
    background: none;
    border: 0;
    line-height: 1;
}

.sf-line__remove:hover { color: var(--sf-danger); }

.sf-line__opts { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }

.sf-line__opt {
    padding: 8px 12px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    background: var(--sf-surface-sunk);
    font: 700 12px var(--sf-font-display);
    color: var(--sf-ink);
}

.sf-line__prices {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.sf-line__total { font: 800 15px var(--sf-font-display); }
.sf-line__stock { margin-inline-start: auto; font: 700 11px var(--sf-font-display); color: var(--sf-success-deep); }
.sf-line__stock--low { color: var(--sf-warn); }

.sf-line__foot {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f3f8;
    font: 800 11.5px var(--sf-font-display);
    letter-spacing: .05em;
    flex-wrap: wrap;
}

.sf-line__foot .sf-muted { font-weight: 600; letter-spacing: 0; }

/* Price summary */
.sf-summary {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-tile);
    padding: 18px;
}

.sf-summary__title {
    font: 800 12.5px var(--sf-font-display);
    letter-spacing: .08em;
    color: var(--sf-text-muted);
    text-transform: uppercase;
}

.sf-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--sf-text-body);
}

/*
   Rows are `label` + `value`. Bagisto emits both as <p>, so the value is
   pushed right by last-child rather than by a dedicated class, and the stock
   `text-right` utility on the row is neutralised.
*/
.sf-summary__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-align: start;
}

.sf-summary__row > *:first-child { margin: 0; }

.sf-summary__row > *:last-child {
    margin: 0;
    margin-inline-start: auto;
    font-weight: 700;
    white-space: nowrap;
}

.sf-summary__row > *:only-child { margin-inline-start: 0; }

.sf-summary__v--good { color: var(--sf-success); }

.sf-summary__total {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sf-line-soft);
    font: 800 16px var(--sf-font-display);
}

.sf-summary__total > *:last-child { margin-inline-start: auto; }

.sf-summary__save {
    font: 700 11.5px var(--sf-font-display);
    color: var(--sf-success);
    text-align: center;
    margin-top: 10px;
}

/* Inline warning strip (minimum-order errors and similar) */
.sf-notice {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: var(--sf-r-tile);
    background: var(--sf-pill-warn-bg);
    color: var(--sf-pill-warn-fg);
    font-size: 13px;
    font-weight: 600;
}

/* Trust list under the summary */
.sf-trust { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--sf-text-body); }
.sf-trust__row { display: flex; gap: 9px; align-items: center; }

.sf-trust__tag {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--sf-surface-sunk);
    display: grid;
    place-items: center;
    font: 800 8.5px var(--sf-font-display);
    color: var(--sf-text-muted);
}

/* Mini item list in the checkout sidebar */
.sf-minirow { display: flex; gap: 11px; align-items: center; }

.sf-minirow__img {
    width: 42px;
    flex: none;
    aspect-ratio: 3 / 4;
    background: var(--sf-surface-sunk);
    overflow: hidden;
    border-radius: var(--sf-r-sm);
}

.sf-minirow__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-minirow__name { font: 800 12px var(--sf-font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-minirow__meta { font-size: 11.5px; color: var(--sf-text-muted); }
.sf-minirow__total { margin-inline-start: auto; font: 800 12.5px var(--sf-font-display); }

/* Success */
.sf-success { max-width: 820px; margin: 0 auto; padding: 56px 28px 80px; }

.sf-success__tick {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--sf-ink);
    color: #fff;
    display: grid;
    place-items: center;
    margin: 0 auto;
    font-size: 22px;
}

.sf-success__title { font: 400 42px/1.1 var(--sf-font-display); margin-top: 20px; }
.sf-success__sub   { font-size: 14px; color: var(--sf-text-body); margin-top: 12px; line-height: 1.6; }

.sf-facts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sf-fact__k { font: 500 10px var(--sf-font-mono); letter-spacing: .12em; color: var(--sf-text-dim); text-transform: uppercase; }
.sf-fact__v { font: 500 18px var(--sf-font-mono); margin-top: 4px; }

/* ==========================================================================
   16. AUTH
   ========================================================================== */

.sf-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
}

.sf-auth__art {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(140deg, #e7e3da, #cfd0d8);
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    padding: 32px;
}

.sf-auth__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-auth__art-copy { position: relative; }
.sf-auth__art-head { font: 400 34px/1.15 var(--sf-font-display); }
.sf-auth__art-sub  { font-size: 13.5px; color: #3c3930; margin-top: 10px; max-width: 360px; line-height: 1.6; }

.sf-auth__panel {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    padding: 34px;
    display: flex;
    flex-direction: column;
}

.sf-auth__tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 10px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    width: fit-content;
}

.sf-auth__tab {
    padding: 9px 18px;
    border-radius: var(--sf-r-card);
    font-size: 13px;
    font-weight: 700;
    color: var(--sf-ink);
    cursor: pointer;
}

.sf-auth__tab--on { background: var(--sf-ink); color: #fff; }

.sf-auth__title { font: 400 32px var(--sf-font-display); margin-top: 22px; }
.sf-auth__sub   { font-size: 13px; color: var(--sf-text-muted); margin-top: 7px; }
.sf-auth__fields { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }

.sf-auth__aside {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-size: 12.5px;
}

.sf-auth__aside a { margin-inline-start: auto; font-weight: 600; border-bottom: 1px solid var(--sf-ink); }

.sf-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.sf-or::before,
.sf-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sf-line-soft);
}

.sf-or span { font: 500 10px var(--sf-font-mono); color: var(--sf-text-faint); letter-spacing: .1em; }

.sf-auth__legal {
    margin-top: auto;
    padding-top: 20px;
    font-size: 11.5px;
    color: var(--sf-text-dim);
    line-height: 1.6;
}

/*
   The split-screen auth shell (.bs-auth*) is shared with the admin panel and
   styled by public/branding/auth.css, which loads after this file. These rules
   are prefixed with `body` purely to win that specificity race — the shared
   stylesheet is left alone so the admin login keeps its own look.
*/
body .bs-auth__card {
    border-radius: var(--sf-r-card);
    border: 1px solid var(--sf-line);
    overflow: hidden;
}

body .bs-auth__panel {
    background: var(--sf-surface);
    padding: 34px;
}

body .bs-auth__welcome {
    font: 400 32px var(--sf-font-display);
    color: var(--sf-ink);
    letter-spacing: -.01em;
}

body .bs-auth__welcome b { font-weight: 800; }

body .bs-auth__tagline {
    font-size: 13px;
    color: var(--sf-text-muted);
    margin-top: 7px;
}

body .bs-auth label {
    font: 600 10px var(--sf-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-text-dim);
}

body .bs-auth input[type="text"],
body .bs-auth input[type="email"],
body .bs-auth input[type="password"],
body .bs-auth input[type="tel"] {
    border-radius: var(--sf-r-card);
    border: 1px solid var(--sf-line-strong);
    background: #fdfdff;
    padding: 14px 16px !important;
    font-family: var(--sf-font-body);
    font-size: 13.5px;
}

body .bs-auth .primary-button,
body .bs-auth button[type="submit"] {
    background: var(--sf-ink) !important;
    border-radius: var(--sf-r-card) !important;
    color: #fff !important;
    font-family: var(--sf-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-transform: none;
}

body .bs-auth .primary-button:hover,
body .bs-auth button[type="submit"]:hover { background: #000 !important; }

/* Sign in / Create account switcher */
.sf-auth__tabs { margin-bottom: 18px; }

/* ==========================================================================
   17. ACCOUNT
   ========================================================================== */

.sf-acct__hero {
    position: relative;
    border-radius: var(--sf-r-card);
    overflow: hidden;
    background: linear-gradient(115deg, #ffffff, #f3f1ec 60%, #e7e3da);
    border: 1px solid var(--sf-line);
    padding: 24px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sf-acct__avatar {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: #ececf4;
    display: grid;
    place-items: center;
    font: 600 16px var(--sf-font-mono);
}

.sf-acct__hello { font: 400 30px var(--sf-font-display); }
.sf-acct__meta  { font-size: 12.5px; color: var(--sf-text-muted); margin-top: 4px; }

.sf-acct__tiles { margin-inline-start: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.sf-acct__tile {
    padding: 12px 16px;
    border-radius: var(--sf-r-card);
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
}

.sf-acct__tile--ink { background: var(--sf-ink); border-color: var(--sf-ink); color: #fff; }
.sf-acct__tile-k { font: 500 9.5px var(--sf-font-mono); letter-spacing: .06em; color: var(--sf-text-dim); text-transform: uppercase; }
.sf-acct__tile--ink .sf-acct__tile-k { color: rgba(246, 245, 242, .55); }
.sf-acct__tile-v { font: 500 17px var(--sf-font-mono); margin-top: 3px; }

.sf-acct {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}

.sf-acct__nav {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    padding: 12px;
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-acct__navitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--sf-r-card);
    font-size: 13px;
    font-weight: 500;
    color: var(--sf-text-body);
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.sf-acct__navitem:hover { background: var(--sf-surface-sunk); color: var(--sf-ink); }

.sf-acct__navitem--on {
    background: var(--sf-ink);
    color: #fff;
    font-weight: 700;
}

.sf-acct__navitem--on:hover { background: var(--sf-ink); color: #fff; }

.sf-acct__navbadge {
    margin-inline-start: auto;
    font: 500 10px var(--sf-font-mono);
    color: var(--sf-text-faint);
}

.sf-acct__navitem--on .sf-acct__navbadge { color: rgba(255, 255, 255, .6); }

.sf-acct__navitem--danger { color: var(--sf-danger); font-weight: 600; margin-top: 6px; }

.sf-acct__body { display: flex; flex-direction: column; gap: 14px; }

.sf-acct__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sf-acct__title { font: 400 26px var(--sf-font-display); }

/* KPI tiles */
.sf-kpi {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    padding: 18px;
}

.sf-kpi__k { font: 500 10px var(--sf-font-mono); letter-spacing: .1em; color: var(--sf-text-dim); text-transform: uppercase; }
.sf-kpi__v { font: 500 26px var(--sf-font-mono); margin-top: 8px; }
.sf-kpi__s { font-size: 12px; color: var(--sf-text-muted); margin-top: 4px; }

/* Tracking stepper */
.sf-track { display: flex; margin-top: 20px; }
.sf-track__step { flex: 1; min-width: 0; }
.sf-track__row { display: flex; align-items: center; }

.sf-track__dot {
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--sf-line-strong);
}

.sf-track__line { flex: 1; height: 2px; background: #e3e3ec; }
.sf-track__label { font-size: 12.5px; font-weight: 600; margin-top: 8px; color: var(--sf-text-faint); }
.sf-track__time  { font: 500 10px var(--sf-font-mono); color: var(--sf-text-faint); margin-top: 2px; }

.sf-track__step--done .sf-track__dot  { background: var(--sf-ink); border-color: var(--sf-ink); }
.sf-track__step--done .sf-track__line { background: var(--sf-ink); }
.sf-track__step--done .sf-track__label,
.sf-track__step--now  .sf-track__label { color: var(--sf-ink); }
.sf-track__step--now  .sf-track__dot   { background: #fff; border-color: var(--sf-ink); }
.sf-track__step:last-child .sf-track__line { background: transparent; }

/* Order row */
.sf-order {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    padding: 18px;
    display: block;
    transition: border-color .16s ease;
}

.sf-order:hover { border-color: var(--sf-ink); }

.sf-order__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-order__id   { font: 500 13px var(--sf-font-mono); }
.sf-order__meta { font-size: 12px; color: var(--sf-text-muted); margin-top: 3px; }
.sf-order__right { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-order__total { font: 500 14px var(--sf-font-mono); }
.sf-order__thumbs { display: flex; gap: 8px; margin-top: 14px; }

.sf-order__thumb {
    width: 46px;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    background: var(--sf-surface-sunk);
    overflow: hidden;
}

.sf-order__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Address card */
.sf-addr {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    padding: 20px;
}

.sf-addr--default { border: 1.5px solid var(--sf-ink); }
.sf-addr__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-addr__label { font-size: 14px; font-weight: 700; }
.sf-addr__body  { font-size: 12.5px; line-height: 1.7; color: var(--sf-text-body); margin-top: 10px; }
.sf-addr__acts  { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Download row */
.sf-dl {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f3f8;
}

.sf-dl:last-child { border-bottom: 0; }

.sf-dl__ext {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--sf-r-card);
    background: var(--sf-pill-grey-bg);
    display: grid;
    place-items: center;
    font: 600 9px var(--sf-font-mono);
    color: var(--sf-text-muted);
}

.sf-dl__name { font-size: 13.5px; font-weight: 600; }
.sf-dl__meta { font: 500 11px var(--sf-font-mono); color: var(--sf-text-dim); margin-top: 3px; }

/* Conversation bubbles (RMA) */
.sf-chat { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

.sf-chat__msg {
    align-self: flex-start;
    max-width: 78%;
    padding: 13px 16px;
    border-radius: 10px 16px 16px 4px;
    background: #f3f3f8;
    font-size: 12.5px;
    line-height: 1.6;
}

.sf-chat__msg--them {
    align-self: flex-end;
    border-radius: 10px 16px 4px 16px;
    background: var(--sf-ink);
    color: #fff;
}

.sf-chat__when { font: 500 9.5px var(--sf-font-mono); color: var(--sf-text-faint); margin-top: 6px; }
.sf-chat__msg--them .sf-chat__when { color: rgba(246, 245, 242, .55); }

/* Danger zone */
.sf-danger-card {
    background: var(--sf-surface);
    border: 1px solid #f0dcdc;
    border-radius: 10px;
    padding: 22px;
}

.sf-danger-card__title { font-size: 15px; font-weight: 700; color: var(--sf-danger); }

/* Table-ish rows used by GDPR / reviews lists */
.sf-rowlist { background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: 10px; overflow: hidden; }

.sf-rowlist__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sf-line-soft);
    font-size: 14px;
    font-weight: 700;
}

.sf-rowlist__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f3f8;
    flex-wrap: wrap;
}

.sf-rowlist__row:last-child { border-bottom: 0; }

/* ==========================================================================
   18. COMPARE / CMS / CONTACT
   ========================================================================== */

.sf-compare {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-card);
    overflow: hidden;
    margin-top: 20px;
    overflow-x: auto;
}

.sf-compare__grid {
    display: grid;
    grid-template-columns: 190px repeat(var(--sf-compare-cols, 3), minmax(200px, 1fr));
    min-width: 100%;
}

.sf-compare__cell { padding: 20px; border-inline-end: 1px solid var(--sf-line-soft); }
.sf-compare__row  { display: contents; }

.sf-compare__rowline {
    display: grid;
    grid-template-columns: 190px repeat(var(--sf-compare-cols, 3), minmax(200px, 1fr));
    border-top: 1px solid var(--sf-line-soft);
}

.sf-compare__k {
    padding: 14px 20px;
    font: 600 10px var(--sf-font-mono);
    letter-spacing: .1em;
    color: var(--sf-text-dim);
    text-transform: uppercase;
    border-inline-end: 1px solid var(--sf-line-soft);
}

.sf-compare__v {
    padding: 14px 20px;
    font-size: 12.5px;
    border-inline-end: 1px solid var(--sf-line-soft);
}

.sf-compare__empty {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--sf-r-card);
    border: 1px dashed var(--sf-line-dashed);
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sf-text-dim);
    text-align: center;
    cursor: pointer;
}

/* CMS / journal */
.sf-cms__hero {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(120deg, #dfe0e6, #cfd0d8);
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    padding: 34px;
}

.sf-cms__kicker { font: 500 10px var(--sf-font-mono); letter-spacing: .16em; color: #4a463e; text-transform: uppercase; }
.sf-cms__title  { font: 400 44px/1.08 var(--sf-font-display); margin-top: 12px; }

.sf-cms {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 34px;
    margin-top: 26px;
    align-items: start;
}

.sf-prose { font-size: 15.5px; line-height: 1.85; color: #2c2b28; }
.sf-prose > p { margin: 0 0 18px; }
.sf-prose > h2 { font: 400 30px var(--sf-font-display); margin: 32px 0 14px; }
.sf-prose > h3 { font: 700 20px var(--sf-font-display); margin: 26px 0 12px; }
.sf-prose img  { max-width: 100%; height: auto; border-radius: 10px; margin: 24px 0; }
.sf-prose a    { color: var(--sf-link); border-bottom: 1px solid currentColor; }
.sf-prose ul, .sf-prose ol { padding-inline-start: 22px; margin: 0 0 18px; }
.sf-prose li   { margin-bottom: 8px; }

.sf-prose > p:first-of-type::first-letter {
    float: inline-start;
    font: 400 62px/0.8 var(--sf-font-display);
    margin: 6px 12px 0 0;
}

.sf-prose blockquote {
    margin: 26px 0;
    padding: 20px 24px;
    border-inline-start: 2px solid var(--sf-ink);
    font: italic 400 22px/1.5 var(--sf-font-display);
}

.sf-cms__rail {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sf-cms__shop {
    background: var(--sf-ink);
    color: #fff;
    border-radius: 10px;
    padding: 18px;
}

.sf-cms__shop-title { font: 400 20px var(--sf-font-display); }

/* Contact */
.sf-contact {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px;
    margin-top: 26px;
    align-items: start;
}

.sf-contact__form {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-card);
    padding: 24px;
}

.sf-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-contact__grid .sf-span2 { grid-column: span 2; }

.sf-contact__side { display: flex; flex-direction: column; gap: 14px; }

.sf-contact__map {
    height: 120px;
    border-radius: var(--sf-r-card);
    background: repeating-linear-gradient(135deg, #e7e3da, #e7e3da 8px, #f2efe9 8px, #f2efe9 18px);
    margin-top: 12px;
    display: grid;
    place-items: center;
    font: 500 9px var(--sf-font-mono);
    color: var(--sf-text-dim);
    text-transform: uppercase;
}

/* Empty state shared by cart / wishlist / compare / search */
.sf-empty {
    text-align: center;
    padding: 64px 24px;
}

.sf-empty__title { font: 400 28px var(--sf-font-display); margin-top: 18px; }
.sf-empty__sub   { font-size: 13.5px; color: var(--sf-text-muted); margin-top: 10px; }
.sf-empty img    { max-width: 220px; height: auto; margin: 0 auto; }

/* ==========================================================================
   19. BAGISTO BRIDGE
   --------------------------------------------------------------------------
   Screens we do not restructure (datagrids, modals, drawers, deep forms,
   RMA/GDPR internals) still carry stock Tailwind classes. Repaint those so
   they speak the same language instead of reverting to the old look.
   ========================================================================== */

.primary-button {
    background: var(--sf-accent) !important;
    border: 1px solid transparent !important;
    border-radius: var(--sf-r-control) !important;
    color: #fff !important;
    font-family: var(--sf-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: background-color .16s ease;
}

.primary-button:hover {
    background: color-mix(in srgb, var(--sf-accent) 86%, #000) !important;
    opacity: 1 !important;
    transform: none !important;
}

.secondary-button {
    border-radius: var(--sf-r-control) !important;
    border: 1px solid var(--sf-ink) !important;
    background: transparent !important;
    color: var(--sf-ink) !important;
    font-family: var(--sf-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background-color .16s ease, color .16s ease;
}

.secondary-button:hover {
    background: var(--sf-ink) !important;
    color: #fff !important;
    transform: none !important;
}

/* Brand tokens baked into the Tailwind build */
.bg-navyBlue     { background-color: var(--sf-ink) !important; }
.text-navyBlue   { color: var(--sf-ink) !important; }
.border-navyBlue { border-color: var(--sf-ink) !important; }
.bg-lightOrange  { background-color: var(--sf-page) !important; }

.hover\:bg-navyBlue:hover     { background-color: var(--sf-ink) !important; }
.hover\:text-navyBlue:hover   { color: var(--sf-accent) !important; }
.hover\:border-navyBlue:hover { border-color: var(--sf-ink) !important; }

/* Stock Poppins/DM-Serif headings pick up the Nexus pairing */
.font-poppins { font-family: var(--sf-font-body) !important; }
.font-dmserif { font-family: var(--sf-font-display) !important; font-weight: 800; }

main h1, main h2, main h3 { font-family: var(--sf-font-display); color: var(--sf-ink); }

/* Inputs anywhere in the storefront */
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="tel"],
main input[type="number"],
main input[type="search"],
main input[type="date"],
main select,
main textarea {
    border-radius: var(--sf-r-card);
    border-color: var(--sf-line-strong);
    font-family: var(--sf-font-body);
}

main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
    outline: none;
    border-color: var(--sf-ink) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-ink) 8%, transparent);
}

/* Bagisto's own product-card shell, wherever it survives */
.group.w-full.rounded-md {
    border-radius: var(--sf-r-tile) !important;
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-soft);
    transition: box-shadow .18s ease;
}

.group.w-full.rounded-md:hover {
    transform: none !important;
    box-shadow: var(--sf-shadow-card-lg) !important;
    border-color: var(--sf-line-soft);
}

/* Modals, drawers, dropdowns */
.sf-scope [role="dialog"],
main [role="dialog"] { border-radius: var(--sf-r-card); font-family: var(--sf-font-body); }

/* Accordion chrome used by filters and the mobile footer */
main details > summary,
main .accordion-header { font-family: var(--sf-font-display); font-weight: 700; }

/* Bagisto tables (order detail, GDPR, RMA) */
main table { border-collapse: collapse; width: 100%; font-size: 13px; }

main table th {
    font: 600 10px var(--sf-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-text-dim);
    text-align: start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sf-line-soft);
    background: var(--sf-surface-tint);
}

main table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f3f8;
    color: var(--sf-text-body);
}

main table tr:last-child td { border-bottom: 0; }

/* Flash messages */
.flash-message,
[class*="flash"] > div { border-radius: var(--sf-r-tile); font-family: var(--sf-font-body); }

/* ==========================================================================
   19b. UTILITY SHIMS
   --------------------------------------------------------------------------
   Bagisto's Tailwind bundle is a committed Vite build and this install has no
   node_modules, so a utility only exists if it was already in the source when
   that bundle was compiled. Any arbitrary-value class introduced by this
   redesign would therefore be silently inert.

   Rather than add a build step to every future edit, the specific arbitrary
   utilities used by the Nexus templates are declared here. Standard-scale
   utilities (mt-4, gap-3, …) are already compiled and need nothing.

   If the Tailwind bundle is ever rebuilt these become redundant duplicates of
   identical rules, which is harmless.
   ========================================================================== */

.pt-\[14px\] { padding-top: 14px; }
.pt-\[18px\] { padding-top: 18px; }
.pt-\[26px\] { padding-top: 26px; }
.pt-\[34px\] { padding-top: 34px; }

.mt-\[10px\] { margin-top: 10px; }
.mt-\[18px\] { margin-top: 18px; }
.mt-\[26px\] { margin-top: 26px; }

.p-\[18px\] { padding: 18px; }
.p-\[22px\] { padding: 22px; }

.gap-\[9px\] { gap: 9px; }

.rounded-\[10px\] { border-radius: 10px; }

.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[15px\]    { font-size: 15px; }

.leading-\[1\.7\] { line-height: 1.7; }

.max-w-\[520px\] { max-width: 520px; }
.max-w-\[620px\] { max-width: 620px; }
.max-w-\[760px\] { max-width: 760px; }

.text-\[var\(--sf-text-body\)\]   { color: var(--sf-text-body); }
.text-\[var\(--sf-text-muted\)\]  { color: var(--sf-text-muted); }
.border-\[var\(--sf-line-soft\)\] { border-color: var(--sf-line-soft); }

.\!max-w-\[var\(--sf-w-flow\)\] { max-width: var(--sf-w-flow) !important; }

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
    .sf-circles     { grid-template-columns: repeat(6, 1fr); }
    .sf-grid--6     { grid-template-columns: repeat(4, 1fr); }
    .sf-header__inner { gap: 16px; }
    .sf-nav         { gap: 16px; }
}

@media (max-width: 1024px) {
    :root { --sf-gutter: 16px; }

    .sf-plp         { grid-template-columns: 1fr; }
    .sf-filters     { position: static; }
    .sf-flow        { grid-template-columns: 1fr; }
    .sf-flow__side  { position: static; }
    .sf-acct        { grid-template-columns: 1fr; }
    .sf-acct__nav   { position: static; flex-direction: row; overflow-x: auto; }
    .sf-acct__navitem { white-space: nowrap; }
    .sf-cms         { grid-template-columns: 1fr; }
    .sf-cms__rail   { position: static; }
    .sf-contact     { grid-template-columns: 1fr; }
    .sf-pdp         { grid-template-columns: 1fr; gap: 24px; }
    .sf-reviews__layout { grid-template-columns: 1fr; }
    .sf-auth        { grid-template-columns: 1fr; }
    .sf-auth__art   { min-height: 220px; }
    .sf-footer__cols { grid-template-columns: 1fr 1fr; }
}

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

    /* Let the banner's own ratio set the height here — a min-height would
       fight aspect-ratio and push the tile wider than its column. */
    .sf-hero__main  { min-height: 0; }

    .sf-hero__stack { grid-template-rows: auto auto; }
    .sf-circles     { grid-template-columns: repeat(4, 1fr); }
    .sf-grid--4,
    .sf-grid--6     { grid-template-columns: repeat(2, 1fr); }
    .sf-grid--3     { grid-template-columns: 1fr; }
    .sf-plp__grid   { grid-template-columns: repeat(2, 1fr); }
    .sf-pdp__specs,
    .sf-contact__grid { grid-template-columns: 1fr; }
    .sf-contact__grid .sf-span2 { grid-column: auto; }
    .sf-line        { flex-direction: column; }
    .sf-line__media { width: 100%; max-width: 160px; }
    .sf-success__title { font-size: 30px; }
    .sf-cms__title  { font-size: 30px; }
    .sf-footer__cols { grid-template-columns: 1fr; gap: 20px; }
    .sf-acct__hero  { padding: 18px; }
    .sf-acct__hello { font-size: 24px; }
    .sf-track       { overflow-x: auto; }
    .sf-track__step { min-width: 120px; }
}

@media (max-width: 525px) {
    .sf-circles   { grid-template-columns: repeat(3, 1fr); }
    .sf-plp__grid,
    .sf-grid--4   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sf-pcard__brand { font-size: 12px; }
    .sf-display   { font-size: 28px; }
    .sf-auth__panel { padding: 22px; }
}