/**
 * DefCMS – Storefront
 * (c) DefenTek Company – Riyadh, Saudi Arabia · https://defentek.sa
 *
 * A full shopping front end: search-led header, category nav, faceted
 * results, a product buy box and a mobile tab bar.
 *
 * Written mobile-first — the base rules describe a phone, and the media
 * queries add the wider layouts. Everything is logical-property based
 * (inline-start / inline-end) so Arabic RTL is a direction flip, not a
 * second stylesheet.
 *
 * DefCMS is a proprietary CMS developed by DefenTek Company.
 * Unauthorized use, copying, redistribution or deployment of this
 * software is strictly prohibited.
 */

/* ═══════════════════════ Tokens ═══════════════════════ */

/*
 * Palette: DefenTek, not a marketplace clone.
 *
 * The layout patterns here are borrowed deliberately — a search-led header
 * and a filter rail are what shoppers already know how to use. The colour
 * language is not: the header is a deep petrol ink rather than navy, the
 * primary action is the brand teal rather than the familiar yellow, and
 * the secondary action picks up the gold already used across the DefenTek
 * site. Same muscle memory, unmistakably a different shop.
 */
.sf {
    --sf-ink:        #0f1417;
    --sf-ink-soft:   #5a6570;
    --sf-line:       #d8dee2;
    --sf-bg:         #ffffff;
    --sf-bg-alt:     #f5f8f8;
    --sf-bg-sunken:  #e8eef0;

    --sf-brand:      #0e1c24;   /* header bar — petrol ink */
    --sf-brand-2:    #17323e;   /* category bar            */
    --sf-accent:     #0d9488;   /* DefenTek teal           */
    --sf-accent-ink: #ffffff;
    --sf-cta:        #0d9488;   /* primary action: teal, not yellow */
    --sf-cta-hover:  #0f766e;
    --sf-cta-ink:    #ffffff;
    --sf-buy:        #c4a035;   /* secondary action: DefenTek gold  */
    --sf-buy-hover:  #ad8d2d;
    --sf-buy-ink:    #17323e;
    --sf-price:      #0f1417;
    --sf-deal:       #be123c;   /* discount rose */
    --sf-star:       #c4a035;
    --sf-link:       #0d7d78;
    --sf-link-hover: #0b5f5b;
    --sf-success:    #0f7a52;

    --sf-radius:     8px;
    --sf-radius-lg:  12px;
    --sf-shadow:     0 2px 5px rgba(15,17,17,.08);
    --sf-shadow-lg:  0 6px 22px rgba(15,17,17,.14);
    --sf-header-h:   56px;

    color: var(--sf-ink);
    background: var(--sf-bg);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.sf[dir="rtl"] { font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; }

/* Dark mode: keep the header near-black (it already is) and invert the page. */
.sf[data-theme="dark"] {
    --sf-ink:       #e7ecee;
    --sf-ink-soft:  #96a3ab;
    --sf-line:      #2c3a42;
    --sf-bg:        #111b21;
    --sf-bg-alt:    #16232a;
    --sf-bg-sunken: #1d2c34;
    --sf-price:     #e7ecee;
    --sf-link:      #4dd0c7;
    --sf-link-hover:#7fe3dc;
    --sf-star:      #d8b44a;
    --sf-deal:      #f43f5e;
    --sf-success:   #34d399;
    --sf-shadow:    0 2px 6px rgba(0,0,0,.5);
    --sf-shadow-lg: 0 8px 26px rgba(0,0,0,.6);
}

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

/* Belt and braces: nothing should overflow horizontally, and if something
   ever does it must not turn into a sideways scroll on a phone. `clip`
   rather than `hidden` — clip creates no scroll container, so the sticky
   header and the fixed drawer are unaffected. */
.sf { overflow-x: clip; max-width: 100%; }

/*
 * The marketing stylesheet sets `section { padding: 8rem 4% }` for the
 * landing page. That rule reaches every <section> the storefront uses and
 * opened a 128px canyon between each block. Spacing here is owned by the
 * storefront's own classes.
 */
.sf section { padding: 0; }
.sf .sf-main > .sf-wrap > section:first-child { margin-top: 0; }

.sf a { color: inherit; text-decoration: none; }
.sf a:hover { text-decoration: none; }
.sf img { max-width: 100%; display: block; }

.sf :focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Screen-reader-only, for labels that must exist but not be seen. */
.sf-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sf-wrap { width: 100%; max-width: 1500px; margin-inline: auto; padding-inline: 12px; }

/* A grid item's default min-width is its content, so one long product name
   or SKU can push a track wider than the screen and drag the whole page
   sideways. Nothing here may outgrow its column. */
.sf-grid > *, .sf-showcase > *, .sf-tiles > *, .sf-autogrid > * { min-width: 0; }

/*
 * Responsive grid with a ceiling.
 *
 * Plain `auto-fit` fills the row, which is what we want on a narrow screen —
 * but on a wide one it keeps adding columns until six things are squeezed
 * side by side. The minmax floor below is the LARGER of a readable minimum
 * and "one --sf-cols-th of the row", so the track count can never exceed
 * --sf-cols however wide the screen gets, and never leaves an empty track
 * however few items there are.
 *
 * Set --sf-cols / --sf-col-min per use; anything beyond the cap simply wraps
 * to the next row.
 */
.sf-autogrid {
    --sf-cols: 4;
    --sf-col-min: 220px;
    --sf-grid-gap: 12px;
    display: grid;
    gap: var(--sf-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(
        max(var(--sf-col-min),
            calc((100% - (var(--sf-cols) - 1) * var(--sf-grid-gap)) / var(--sf-cols))),
        1fr));
}

/* ═══════════════════════ Header ═══════════════════════ */

.sf-header {
    background: var(--sf-brand); color: #fff; position: sticky; top: 0; z-index: 200;
    box-shadow: inset 0 -3px 0 var(--sf-accent);
}

/*
 * flex-wrap is load-bearing, not decoration. The search box below is
 * `flex: 1 1 100%` so that it takes a row of its own on a phone — without
 * wrapping, it stays on the same line as the logo and the account buttons,
 * their bases add up to far more than the screen, and because a flex item
 * will not shrink below its min-content the whole document ends up wider
 * than the viewport and the page scrolls sideways.
 */
.sf-header-main {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 8px 12px; min-height: var(--sf-header-h);
}

.sf-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 4px 6px; border-radius: 4px; }
.sf-logo img  { height: 30px; width: auto; }
.sf-logo span { font-weight: 800; font-size: 1.05rem; letter-spacing: .2px; color: #fff; }
.sf-logo:hover { outline: 1px solid rgba(255,255,255,.4); }

/* Deliver-to — hidden on the smallest screens, it's a nicety not a need. */
.sf-deliver {
    display: none; align-items: center; gap: 6px; color: #fff;
    padding: 4px 8px; border-radius: 4px; font-size: .78rem; line-height: 1.15;
}
.sf-deliver:hover { outline: 1px solid rgba(255,255,255,.4); }
.sf-deliver .lbl { color: #ccc; font-size: .7rem; display: block; }
.sf-deliver .val { font-weight: 700; }

/* Search — the centrepiece. On phones it drops to its own row below. */
.sf-search { flex: 1 1 100%; order: 3; position: relative; min-width: 0; }
.sf-search form { display: flex; width: 100%; border-radius: var(--sf-radius); overflow: visible; }

.sf-search-cat {
    display: none; background: var(--sf-bg-sunken); color: var(--sf-ink);
    border: 0; padding: 0 10px; font-size: .78rem; max-width: 130px;
    border-start-start-radius: var(--sf-radius); border-end-start-radius: var(--sf-radius);
    cursor: pointer;
}
.sf-search input[type="search"] {
    flex: 1; min-width: 0; border: 0; padding: 11px 14px; font-size: .95rem;
    background: #fff; color: #0f1111;
    border-start-start-radius: var(--sf-radius); border-end-start-radius: var(--sf-radius);
}
.sf-search-cat + input[type="search"] { border-start-start-radius: 0; border-end-start-radius: 0; }
.sf-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.sf-search button {
    border: 0; background: var(--sf-cta); color: var(--sf-cta-ink);
    padding: 0 16px; cursor: pointer; display: grid; place-items: center;
    border-start-end-radius: var(--sf-radius); border-end-end-radius: var(--sf-radius);
    transition: background .15s ease;
}
.sf-search button:hover { background: var(--sf-cta-hover); }

/* Type-ahead panel */
.sf-suggest {
    position: absolute; inset-inline: 0; top: calc(100% + 4px);
    background: var(--sf-bg); color: var(--sf-ink);
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-lg); overflow: hidden; z-index: 320; display: none;
}
.sf-suggest.on { display: block; }
.sf-suggest a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-bottom: 1px solid var(--sf-line); font-size: .88rem;
}
.sf-suggest a:last-child { border-bottom: 0; }
.sf-suggest a:hover, .sf-suggest a.on { background: var(--sf-bg-alt); }
.sf-suggest img { width: 38px; height: 38px; object-fit: contain; border-radius: 4px; background: #fff; }
.sf-suggest .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-suggest .pr { font-weight: 700; white-space: nowrap; }

/* Header action buttons (account / orders / cart) */
.sf-acts { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; min-width: 0; }
.sf-act {
    display: flex; flex-direction: column; justify-content: center;
    padding: 6px 8px; border-radius: 4px; color: #fff; font-size: .78rem; line-height: 1.2;
    white-space: nowrap;
}
.sf-act:hover { outline: 1px solid rgba(255,255,255,.4); }
.sf-act .lbl { color: #ccc; font-size: .68rem; }
.sf-act .val { font-weight: 700; }
.sf-act-icon { display: grid; place-items: center; padding: 8px; }

.sf-cart { display: flex; align-items: flex-end; gap: 4px; position: relative; }
.sf-cart-count {
    position: absolute; top: -2px; inset-inline-start: 17px;
    background: var(--sf-buy); color: #0f1111; font-weight: 800;
    font-size: .72rem; min-width: 18px; height: 18px; border-radius: 9px;
    display: grid; place-items: center; padding: 0 4px;
}

/* Category bar */
.sf-subnav {
    background: var(--sf-brand-2); color: #fff;
    display: flex; align-items: center; gap: 4px;
    padding: 4px 12px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sf-subnav::-webkit-scrollbar { display: none; }
.sf-subnav a, .sf-subnav button {
    color: #fff; background: none; border: 0; cursor: pointer;
    padding: 7px 10px; border-radius: 4px; font-size: .84rem; white-space: nowrap;
    display: flex; align-items: center; gap: 6px; font-family: inherit;
}
.sf-subnav a:hover, .sf-subnav button:hover { outline: 1px solid rgba(255,255,255,.45); }

/* ═══════════════════════ Mobile drawer ═══════════════════════ */

.sf-scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 400;
}
.sf-scrim.on { opacity: 1; pointer-events: auto; }

/*
 * Slide-over panels (the menu drawer and the mobile filter rail).
 *
 * Two things matter here and both were wrong before:
 *
 * 1. The off-screen direction lives on the container as --sf-off, not in a
 *    `[dir=rtl] .sf-drawer` rule. That rule was MORE specific than
 *    `.sf-drawer.on`, so in Arabic the open state could never win.
 *
 * 2. `visibility` — not just `transform` — carries the closed state. A
 *    panel that is merely translated away is still a live, focusable part
 *    of the page, and if the transform fails for any reason it simply
 *    appears, stuck open, with nothing able to close it. Hidden is hidden.
 */
.sf { --sf-off: -102%; }
.sf[dir="rtl"] { --sf-off: 102%; }

.sf-drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: min(84vw, 340px); background: var(--sf-bg); color: var(--sf-ink);
    z-index: 401; overflow-y: auto;
    visibility: hidden;
    transform: translateX(var(--sf-off));
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s linear .26s;
    box-shadow: var(--sf-shadow-lg);
}
.sf-drawer.on {
    visibility: visible;
    transform: translateX(0);
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s;
}

.sf-drawer-head {
    background: var(--sf-brand-2); color: #fff; padding: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-weight: 700; position: sticky; top: 0;
}
.sf-drawer-head button { background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; }
.sf-drawer h4 {
    margin: 0; padding: 14px 16px 6px; font-size: .95rem;
    border-top: 1px solid var(--sf-line);
}
.sf-drawer a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; font-size: .92rem; color: var(--sf-ink);
}
.sf-drawer a:hover { background: var(--sf-bg-alt); }

/* ═══════════════════════ Mobile bottom bar ═══════════════════════ */

.sf-tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 190;
    background: var(--sf-bg); border-top: 1px solid var(--sf-line);
    display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.sf-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 2px 6px; font-size: .68rem; color: var(--sf-ink-soft); position: relative;
}
.sf-tabbar a.on { color: var(--sf-accent); font-weight: 700; }
.sf-tabbar .badge {
    position: absolute; top: 2px; inset-inline-start: 52%;
    background: var(--sf-deal); color: #fff; font-size: .62rem; font-weight: 800;
    min-width: 16px; height: 16px; border-radius: 8px; display: grid;
    place-items: center; padding: 0 4px;
}
.sf-has-tabbar { padding-bottom: 62px; }

/* ═══════════════════════ Layout blocks ═══════════════════════ */

.sf-main { padding-block: 18px 40px; min-height: 55vh; }

.sf-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--sf-ink-soft); margin-bottom: 12px;
}
.sf-crumbs a { color: var(--sf-link); }
.sf-crumbs a:hover { color: var(--sf-link-hover); text-decoration: underline; }
.sf-crumbs .sep { opacity: .5; }

.sf-section { margin-bottom: 30px; }
.sf-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.sf-section-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.sf-section-head a  { color: var(--sf-link); font-size: .85rem; }
.sf-section-head a:hover { color: var(--sf-link-hover); text-decoration: underline; }

.sf-card {
    background: var(--sf-bg); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg); padding: 16px;
}

/* ═══════════════════════ Hero carousel ═══════════════════════ */

.sf-hero { position: relative; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-bg-sunken); }
.sf-hero-track { display: flex; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.sf-hero-slide { min-width: 100%; position: relative; }
.sf-hero-slide img { width: 100%; height: clamp(150px, 38vw, 380px); object-fit: cover; }
.sf-hero-copy {
    position: absolute; inset-block-end: 0; inset-inline-start: 0;
    padding: clamp(14px, 3vw, 34px); max-width: min(560px, 82%);
    color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.sf-hero-copy h2 { margin: 0 0 6px; font-size: clamp(1.1rem, 3.4vw, 2.1rem); line-height: 1.15; }
.sf-hero-copy p  { margin: 0 0 12px; font-size: clamp(.8rem, 1.8vw, 1rem); opacity: .95; }
.sf-hero-cta {
    display: inline-block; background: var(--sf-cta); color: var(--sf-cta-ink);
    padding: 9px 20px; border-radius: 22px; font-weight: 700; font-size: .88rem;
    text-shadow: none;
}
.sf-hero-cta:hover { background: var(--sf-cta-hover); }
.sf-hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.85); border: 0; width: 36px; height: 54px;
    cursor: pointer; display: none; place-items: center; color: #0f1111;
}
.sf-hero:hover .sf-hero-nav { display: grid; }
.sf-hero-nav.prev { inset-inline-start: 0; border-start-end-radius: 6px; border-end-end-radius: 6px; }
.sf-hero-nav.next { inset-inline-end: 0; border-start-start-radius: 6px; border-end-start-radius: 6px; }
.sf-hero-dots { position: absolute; inset-block-end: 10px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.sf-hero-dots button {
    width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.55);
}
.sf-hero-dots button.on { background: #fff; width: 22px; border-radius: 4px; }

/* ═══════════════════════ Product card ═══════════════════════ */

.sf-grid {
    --sf-cols: 5;
    --sf-col-min: 150px;
    --sf-grid-gap: 12px;
    display: grid;
    gap: var(--sf-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(
        max(var(--sf-col-min),
            calc((100% - (var(--sf-cols) - 1) * var(--sf-grid-gap)) / var(--sf-cols))),
        1fr));
}

.sf-prod {
    background: var(--sf-bg); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg); padding: 10px;
    display: flex; flex-direction: column; position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
}
.sf-prod:hover { box-shadow: var(--sf-shadow-lg); }
@media (hover: hover) { .sf-prod:hover { transform: translateY(-2px); } }

.sf-prod-media {
    position: relative; aspect-ratio: 1 / 1; background: #fff;
    border-radius: var(--sf-radius); overflow: hidden; margin-bottom: 9px;
}
.sf-prod-media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sf-prod-media .ph {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: var(--sf-bg-sunken); color: var(--sf-ink-soft);
}

.sf-badge {
    position: absolute; top: 7px; inset-inline-start: 7px; z-index: 2;
    background: var(--sf-deal); color: #fff; font-size: .68rem; font-weight: 800;
    padding: 3px 7px; border-radius: 4px; letter-spacing: .2px;
}
.sf-badge.alt { background: var(--sf-brand-2); }

.sf-fav {
    position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2;
    background: rgba(255,255,255,.94); border: 1px solid var(--sf-line);
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    cursor: pointer; color: var(--sf-ink-soft); transition: color .15s ease, transform .15s ease;
}
.sf-fav:hover { color: var(--sf-deal); transform: scale(1.08); }
.sf-fav.on    { color: var(--sf-deal); }

.sf-prod-brand { font-size: .72rem; color: var(--sf-ink-soft); margin-bottom: 2px; }
.sf-prod-name {
    font-size: .86rem; line-height: 1.35; margin: 0 0 5px; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.3em;
}
.sf-prod:hover .sf-prod-name { color: var(--sf-link-hover); }

.sf-rate { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; font-size: .76rem; }
.sf-stars { display: inline-flex; gap: 1px; line-height: 0; }
.sf-rate .n { color: var(--sf-link); }

.sf-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sf-price { font-size: 1.05rem; font-weight: 700; color: var(--sf-price); }
.sf-price .cur { font-size: .72em; font-weight: 600; }
.sf-was { font-size: .78rem; color: var(--sf-ink-soft); text-decoration: line-through; }
.sf-off { font-size: .74rem; color: var(--sf-deal); font-weight: 700; }

.sf-prod-meta { font-size: .74rem; color: var(--sf-ink-soft); margin-bottom: 8px; }
.sf-prod-meta .fast { color: var(--sf-success); font-weight: 600; }
.sf-prod-foot { margin-top: auto; }

.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 9px 14px; border: 0; border-radius: 20px;
    font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
    background: var(--sf-cta); color: var(--sf-cta-ink);
    transition: background .15s ease, transform .08s ease;
}
.sf-btn:hover  { background: var(--sf-cta-hover); }
.sf-btn:active { transform: translateY(1px); }
.sf-btn[disabled] { background: var(--sf-bg-sunken); color: var(--sf-ink-soft); cursor: not-allowed; }
.sf-btn.buy       { background: var(--sf-buy); color: var(--sf-buy-ink); }
.sf-btn.buy:hover { background: var(--sf-buy-hover); }
.sf-btn.ghost {
    background: transparent; border: 1px solid var(--sf-line); color: var(--sf-ink);
}
.sf-btn.ghost:hover { background: var(--sf-bg-alt); }
.sf-btn.wide { width: auto; padding-inline: 22px; }

/* Horizontal scrolling rail of cards */
.sf-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.sf-rail::-webkit-scrollbar { height: 6px; }
.sf-rail::-webkit-scrollbar-thumb { background: var(--sf-line); border-radius: 3px; }
.sf-rail > .sf-prod { min-width: 168px; max-width: 168px; scroll-snap-align: start; }

/* ── Feature cards ──────────────────────────────────────────────
   The row of boxes a marketplace opens with: a heading, a 2×2 grid of
   real products, and a link out. Two across on a phone, four on a
   desktop, and they overlap the hero the way Amazon's do. */
/* auto-fit, not a fixed four: with two cards the row would otherwise leave
   two empty tracks and look like a rendering fault. */
.sf-showcase {
    --sf-cols: 4;
    --sf-col-min: 240px;
    --sf-grid-gap: 12px;
    display: grid;
    gap: var(--sf-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(
        max(var(--sf-col-min),
            calc((100% - (var(--sf-cols) - 1) * var(--sf-grid-gap)) / var(--sf-cols))),
        1fr));
    margin-bottom: 22px;
}
.sf-show-card {
    background: var(--sf-bg); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg); padding: 14px; display: flex; flex-direction: column;
}
.sf-show-card h3 {
    margin: 0 0 11px; font-size: .95rem; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-show-cell { min-width: 0; }
.sf-show-cell .pic {
    aspect-ratio: 1 / 1; background: #fff; border-radius: 6px; overflow: hidden;
    position: relative; display: grid; place-items: center;
}
.sf-show-cell .pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sf-show-cell .cap {
    font-size: .74rem; line-height: 1.35; margin-top: 5px; color: var(--sf-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-show-cell .amt { font-size: .74rem; font-weight: 700; margin-top: 2px; }
.sf-show-cell .off {
    position: absolute; top: 4px; inset-inline-start: 4px;
    background: var(--sf-deal); color: #fff; font-size: .64rem; font-weight: 800;
    padding: 1px 5px; border-radius: 3px;
}
.sf-show-card > .more {
    margin-top: 11px; color: var(--sf-link); font-size: .8rem; align-self: flex-start;
}
.sf-show-card > .more:hover { color: var(--sf-link-hover); text-decoration: underline; }

@media (min-width: 900px) {
    /* Only lift the row when a banner is actually behind it. */
    .sf-showcase.over-hero { margin-top: -110px; position: relative; z-index: 3; }
}

/* Category tiles */
.sf-tiles {
    --sf-cols: 4;
    --sf-col-min: 148px;
    --sf-grid-gap: 12px;
    display: grid;
    gap: var(--sf-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(
        max(var(--sf-col-min),
            calc((100% - (var(--sf-cols) - 1) * var(--sf-grid-gap)) / var(--sf-cols))),
        1fr));
}
.sf-tile {
    background: var(--sf-bg); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg); padding: 14px; display: block;
}
.sf-tile:hover { box-shadow: var(--sf-shadow-lg); }
.sf-tile h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 700; }
.sf-tile-img { aspect-ratio: 4 / 3; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-bg-sunken); }
.sf-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-tile .more { display: inline-block; margin-top: 9px; color: var(--sf-link); font-size: .8rem; }

/* ═══════════════════════ Results page ═══════════════════════ */

.sf-results { display: block; }

.sf-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 0; margin-bottom: 12px; border-bottom: 1px solid var(--sf-line);
}
.sf-toolbar .count { font-size: .85rem; color: var(--sf-ink-soft); }
.sf-toolbar .count strong { color: var(--sf-ink); }
.sf-toolbar select {
    padding: 7px 10px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-ink); font-family: inherit; font-size: .84rem;
    cursor: pointer;
}
.sf-toolbar .spacer { margin-inline-start: auto; }

.sf-filter-open {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border: 1px solid var(--sf-line); border-radius: 20px;
    background: var(--sf-bg); color: var(--sf-ink); font-family: inherit;
    font-size: .84rem; font-weight: 600; cursor: pointer;
}

/* The filter rail is a slide-over on phones, a column on desktop. */
.sf-filters {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 401;
    width: min(86vw, 330px); background: var(--sf-bg); overflow-y: auto;
    visibility: hidden;
    transform: translateX(var(--sf-off));
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s linear .26s;
    box-shadow: var(--sf-shadow-lg); padding: 0 0 80px;
}
.sf-filters.on {
    visibility: visible;
    transform: translateX(0);
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s;
}

.sf-filters-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--sf-line);
    position: sticky; top: 0; background: var(--sf-bg); z-index: 2; font-weight: 700;
}
.sf-filters-head button { background: none; border: 0; cursor: pointer; color: var(--sf-ink); padding: 4px; }

.sf-facet { padding: 14px 16px; border-bottom: 1px solid var(--sf-line); }
.sf-facet h3 { margin: 0 0 9px; font-size: .9rem; font-weight: 700; }
.sf-facet ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.sf-facet li { margin-bottom: 5px; }
.sf-facet label {
    display: flex; align-items: center; gap: 8px; font-size: .85rem;
    cursor: pointer; padding: 2px 0;
}
.sf-facet label:hover { color: var(--sf-link-hover); }
.sf-facet .n { margin-inline-start: auto; color: var(--sf-ink-soft); font-size: .78rem; }
.sf-facet a { display: block; font-size: .85rem; padding: 3px 0; color: var(--sf-ink); }
.sf-facet a:hover { color: var(--sf-link-hover); text-decoration: underline; }
.sf-facet a.on { color: var(--sf-link); font-weight: 700; }

.sf-price-fields { display: flex; align-items: center; gap: 7px; }
.sf-price-fields input {
    width: 100%; min-width: 0; padding: 7px 9px; font-size: .84rem;
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
    background: var(--sf-bg); color: var(--sf-ink); font-family: inherit;
}

.sf-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.sf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sf-bg-alt); border: 1px solid var(--sf-line);
    border-radius: 16px; padding: 4px 10px; font-size: .78rem;
}
.sf-chip a { color: var(--sf-ink-soft); font-weight: 700; line-height: 1; }
.sf-chip a:hover { color: var(--sf-deal); }

.sf-empty { text-align: center; padding: 56px 20px; color: var(--sf-ink-soft); }
.sf-empty svg { opacity: .4; margin-bottom: 14px; }
.sf-empty h3  { margin: 0 0 8px; color: var(--sf-ink); font-size: 1.05rem; }
.sf-empty p   { margin: 0 0 16px; font-size: .9rem; }

.sf-pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.sf-pager a, .sf-pager span {
    min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 10px;
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
    font-size: .85rem; color: var(--sf-ink);
}
.sf-pager a:hover { background: var(--sf-bg-alt); }
.sf-pager .on { background: var(--sf-brand-2); border-color: var(--sf-brand-2); color: #fff; font-weight: 700; }
.sf-pager .gap { border: 0; }

/* ═══════════════════════ Product page ═══════════════════════ */

.sf-pdp { display: grid; gap: 20px; }

.sf-gallery { display: grid; gap: 10px; }
.sf-gallery-main {
    position: relative; aspect-ratio: 1 / 1; background: #fff;
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg); overflow: hidden;
}
.sf-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.sf-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sf-thumb {
    width: 60px; height: 60px; flex-shrink: 0; border: 1px solid var(--sf-line);
    border-radius: 6px; overflow: hidden; background: #fff; cursor: pointer; padding: 0;
}
.sf-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sf-thumb.on { border-color: var(--sf-accent); box-shadow: 0 0 0 1px var(--sf-accent); }

.sf-pdp-title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 8px; font-weight: 600; }
.sf-pdp-brand { color: var(--sf-link); font-size: .86rem; margin-bottom: 6px; }
.sf-pdp-rate  { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--sf-line); margin-bottom: 12px; font-size: .85rem; }

.sf-pdp-price { font-size: 1.7rem; font-weight: 700; color: var(--sf-price); }
.sf-pdp-price .cur { font-size: .55em; font-weight: 600; }
.sf-vat-note { font-size: .78rem; color: var(--sf-ink-soft); margin-top: 3px; }

.sf-bullets { margin: 14px 0 0; padding-inline-start: 20px; font-size: .87rem; line-height: 1.65; }
.sf-bullets li { margin-bottom: 5px; }

/* Buy box */
.sf-buybox {
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg);
    padding: 16px; background: var(--sf-bg); align-self: start;
}
.sf-buybox .price { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.sf-stock-in  { color: var(--sf-success); font-weight: 700; font-size: 1rem; margin: 10px 0 4px; }
.sf-stock-out { color: var(--sf-deal);    font-weight: 700; font-size: 1rem; margin: 10px 0 4px; }
.sf-deliver-by { font-size: .85rem; margin-bottom: 12px; }
.sf-deliver-by strong { display: block; }

.sf-qty { display: flex; align-items: center; gap: 0; margin-bottom: 12px; width: fit-content;
          border: 1px solid var(--sf-line); border-radius: 20px; overflow: hidden; }
.sf-qty button {
    width: 36px; height: 36px; border: 0; background: var(--sf-bg-alt);
    color: var(--sf-ink); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.sf-qty button:hover { background: var(--sf-bg-sunken); }
.sf-qty input {
    width: 46px; text-align: center; border: 0; padding: 8px 0; font-size: .92rem;
    background: var(--sf-bg); color: var(--sf-ink); font-family: inherit;
    -moz-appearance: textfield;
}
.sf-qty input::-webkit-outer-spin-button, .sf-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sf-assure { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sf-line); }
.sf-assure div { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; margin-bottom: 9px; color: var(--sf-ink-soft); }
.sf-assure svg { flex-shrink: 0; color: var(--sf-accent); margin-top: 1px; }

/* Sticky mobile buy bar */
.sf-buybar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 195;
    background: var(--sf-bg); border-top: 1px solid var(--sf-line);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px; box-shadow: 0 -3px 14px rgba(0,0,0,.1);
}
.sf-buybar .p { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.sf-buybar .sf-btn { width: auto; flex: 1; }

/* Tabs / sections on the product page */
.sf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sf-line); overflow-x: auto; margin-bottom: 16px; }
.sf-tabs button {
    background: none; border: 0; border-bottom: 3px solid transparent;
    padding: 10px 14px; font-family: inherit; font-size: .9rem; font-weight: 600;
    color: var(--sf-ink-soft); cursor: pointer; white-space: nowrap;
}
.sf-tabs button.on { color: var(--sf-ink); border-bottom-color: var(--sf-accent); }
.sf-tabpane { display: none; }
.sf-tabpane.on { display: block; }

.sf-spec { width: 100%; border-collapse: collapse; font-size: .87rem; }
.sf-spec th, .sf-spec td { padding: 9px 12px; border-bottom: 1px solid var(--sf-line); text-align: start; }
.sf-spec th { background: var(--sf-bg-alt); font-weight: 600; width: 38%; }

/* ═══════════════════════ Reviews ═══════════════════════ */

.sf-rev-summary { display: grid; gap: 18px; }
.sf-rev-score { text-align: center; }
.sf-rev-score .big { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.sf-rev-bars { display: grid; gap: 6px; }
.sf-rev-bar { display: flex; align-items: center; gap: 9px; font-size: .82rem; }
.sf-rev-bar .lbl { width: 52px; color: var(--sf-link); cursor: pointer; }
.sf-rev-bar .track { flex: 1; height: 18px; background: var(--sf-bg-sunken); border-radius: 3px; overflow: hidden; border: 1px solid var(--sf-line); }
.sf-rev-bar .fill { height: 100%; background: var(--sf-star); }
.sf-rev-bar .pct { width: 40px; text-align: end; color: var(--sf-ink-soft); }

.sf-review { padding: 16px 0; border-bottom: 1px solid var(--sf-line); }
.sf-review:last-child { border-bottom: 0; }
.sf-rev-who { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: .85rem; font-weight: 600; }
.sf-rev-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--sf-bg-sunken);
    display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--sf-ink-soft);
}
.sf-rev-verified { color: var(--sf-deal); font-size: .76rem; font-weight: 700; }
.sf-rev-title { font-weight: 700; font-size: .92rem; margin: 4px 0; }
.sf-rev-date  { font-size: .76rem; color: var(--sf-ink-soft); margin-bottom: 7px; }
.sf-rev-body  { font-size: .88rem; line-height: 1.6; }
.sf-rev-reply {
    margin-top: 10px; padding: 10px 13px; background: var(--sf-bg-alt);
    border-inline-start: 3px solid var(--sf-accent); border-radius: 0 6px 6px 0; font-size: .84rem;
}
.sf[dir="rtl"] .sf-rev-reply { border-radius: 6px 0 0 6px; }

.sf-star-pick { display: flex; gap: 3px; flex-direction: row-reverse; justify-content: flex-end; }
.sf-star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-star-pick label { cursor: pointer; color: rgba(140,140,150,.4); line-height: 0; padding: 2px; }
.sf-star-pick label:hover, .sf-star-pick label:hover ~ label,
.sf-star-pick input:checked ~ label { color: var(--sf-star); }

/* ═══════════════════════ Basket ═══════════════════════ */

.sf-cart { display: grid; gap: 16px; align-items: start; }

.sf-cart-line {
    display: grid; grid-template-columns: 88px minmax(0,1fr);
    gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sf-line);
}
.sf-cart-line:last-of-type { border-bottom: 0; }

.sf-cart-thumb {
    width: 88px; height: 88px; background: #fff; border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius); overflow: hidden;
}
.sf-cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.sf-cart-body { min-width: 0; }
.sf-cart-actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px;
}
.sf-cart-actions .sf-qty { margin-bottom: 0; }
.sf-qty-form { display: flex; align-items: center; gap: 8px; }

.sf-cart-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--sf-link); font-family: inherit; font-size: .82rem;
}
.sf-cart-link:hover { color: var(--sf-link-hover); text-decoration: underline; }

/* On a phone the price sits under the details; on a desktop it moves to its
   own right-hand column, which is why the grid is redefined rather than
   floated. */
.sf-cart-price { grid-column: 2; text-align: start; margin-top: 4px; }

.sf-summary { position: static; }

.sf-sum { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; font-size: .89rem; }
.sf-sum dt { color: var(--sf-ink-soft); }
.sf-sum dd { margin: 0; text-align: end; }
.sf-sum-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sf-line);
    font-size: 1.15rem; font-weight: 700;
}

.sf-freebar {
    background: var(--sf-bg-alt); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg); padding: 12px 14px; margin-bottom: 12px;
}
.sf-freebar .track {
    height: 7px; background: var(--sf-bg-sunken); border-radius: 4px; overflow: hidden;
}
.sf-freebar .track span { display: block; height: 100%; background: var(--sf-success); border-radius: 4px; }
.sf-freebar.done {
    display: flex; align-items: center; gap: 9px;
    color: var(--sf-success); font-size: .86rem; font-weight: 600;
}

/* ═══════════════════════ Simple page shells ═══════════════════════ */

/* Used by the account, tracking, order-confirmation and sign-in screens. */
.sf-panel {
    max-width: 560px; margin-inline: auto;
    background: var(--sf-bg); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg); padding: 22px;
}
.sf-panel.wide { max-width: 940px; }
.sf-panel h1 { margin: 0 0 6px; font-size: 1.3rem; }
.sf-panel .lede { margin: 0 0 18px; font-size: .88rem; color: var(--sf-ink-soft); }

.sf-field { margin-bottom: 14px; }
.sf-field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 5px; }
.sf-field input, .sf-field select, .sf-field textarea {
    width: 100%; padding: 9px 11px; font-size: .93rem; font-family: inherit;
    color: var(--sf-ink); background: var(--sf-bg);
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
}
.sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus {
    outline: none; border-color: var(--sf-accent); box-shadow: 0 0 0 3px rgba(13,148,136,.14);
}
.sf-field small { display: block; margin-top: 4px; font-size: .76rem; color: var(--sf-ink-soft); }

.sf-note {
    padding: 11px 14px; border-radius: var(--sf-radius); font-size: .86rem;
    border: 1px solid var(--sf-line); background: var(--sf-bg-alt); margin-bottom: 14px;
}
.sf-note.good { border-color: var(--sf-success); color: var(--sf-success); }
.sf-note.bad  { border-color: var(--sf-deal);    color: var(--sf-deal); }

/* Order status journey */
.sf-track { display: flex; gap: 0; margin: 20px 0; }
.sf-track-step { flex: 1; text-align: center; position: relative; font-size: .76rem; }
.sf-track-step .dot {
    width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 7px;
    display: grid; place-items: center; background: var(--sf-bg-sunken);
    color: var(--sf-ink-soft); border: 2px solid var(--sf-line); position: relative; z-index: 1;
}
.sf-track-step.done .dot { background: var(--sf-success); border-color: var(--sf-success); color: #fff; }
.sf-track-step.now  .dot { background: var(--sf-accent);  border-color: var(--sf-accent);  color: #fff; }
.sf-track-step::before {
    content: ''; position: absolute; top: 12px; inset-inline-start: -50%;
    width: 100%; height: 3px; background: var(--sf-line);
}
.sf-track-step:first-child::before { display: none; }
.sf-track-step.done::before, .sf-track-step.now::before { background: var(--sf-success); }

.sf-orders-list { display: grid; gap: 12px; }
.sf-order-row {
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg); overflow: hidden;
}
.sf-order-head {
    background: var(--sf-bg-alt); padding: 11px 14px; display: flex;
    gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--sf-ink-soft);
}
.sf-order-head strong { display: block; color: var(--sf-ink); font-size: .85rem; }
.sf-order-body { padding: 14px; }

.sf-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
    border-radius: 20px; font-size: .75rem; font-weight: 700;
}

@media (min-width: 700px) {
    .sf-cart-line { grid-template-columns: 110px minmax(0,1fr) auto; }
    .sf-cart-thumb { width: 110px; height: 110px; }
    .sf-cart-price { grid-column: auto; text-align: end; margin-top: 0; }
}

@media (min-width: 900px) {
    .sf-cart { grid-template-columns: minmax(0,1fr) 320px; gap: 22px; }
    .sf-summary { position: sticky; top: 118px; }
}

/* ═══════════════════════ Legacy page skin ═══════════════════════ */

/*
 * Checkout and the sign-in screens keep their original markup — checkout
 * holds the tested money maths and the live re-quote script, and rewriting
 * that to change how it looks would be a poor trade. Instead their existing
 * class names are re-skinned here onto the storefront tokens, so they match
 * the rest of the shop without a single line of their logic being touched.
 */

.sf .checkout-container,
.sf .auth-section { max-width: 1180px; margin-inline: auto; }

.sf .checkout-layout { display: grid; gap: 18px; align-items: start; }

.sf .checkout-card,
.sf .auth-card,
.sf .checkout-summary {
    background: var(--sf-bg); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg); padding: 18px; color: var(--sf-ink);
}
.sf .auth-card { max-width: 440px; margin-inline: auto; }
.sf .auth-card h2 { margin: 0 0 5px; font-size: 1.3rem; }
.sf .auth-subtitle { margin: 0 0 18px; font-size: .88rem; color: var(--sf-ink-soft); }

.sf .checkout-section > h2,
.sf .checkout-card > h2,
.sf .checkout-card > h3 { font-size: 1.05rem; margin: 0 0 12px; color: var(--sf-ink); }

.sf .form-group { margin-bottom: 14px; }
.sf .form-group label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 5px; color: var(--sf-ink); }
.sf .form-row { display: grid; gap: 12px; grid-template-columns: 1fr; }

.sf .checkout-card input[type="text"],
.sf .checkout-card input[type="email"],
.sf .checkout-card input[type="tel"],
.sf .checkout-card input[type="number"],
.sf .checkout-card select,
.sf .checkout-card textarea,
.sf .auth-card input[type="text"],
.sf .auth-card input[type="email"],
.sf .auth-card input[type="tel"],
.sf .auth-card input[type="password"],
.sf .coupon-input-row input {
    width: 100%; padding: 9px 11px; font-size: .93rem; font-family: inherit;
    color: var(--sf-ink); background: var(--sf-bg);
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
}
.sf .checkout-card input:focus,
.sf .checkout-card select:focus,
.sf .checkout-card textarea:focus,
.sf .auth-card input:focus {
    outline: none; border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px rgba(13,148,136,.14);
}
.sf .field-err { color: var(--sf-deal); font-size: .78rem; margin-top: 4px; }
.sf .req { color: var(--sf-deal); }

.sf .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 18px; border: 0; border-radius: 20px; cursor: pointer;
    font-family: inherit; font-size: .88rem; font-weight: 700;
    background: var(--sf-bg-alt); color: var(--sf-ink);
}
.sf .btn-primary { background: var(--sf-cta); color: var(--sf-cta-ink); }
.sf .btn-primary:hover { background: var(--sf-cta-hover); }
.sf .btn-secondary, .sf .btn-outline, .sf .btn-google {
    background: transparent; border: 1px solid var(--sf-line); color: var(--sf-ink);
}
.sf .btn-secondary:hover, .sf .btn-outline:hover, .sf .btn-google:hover { background: var(--sf-bg-alt); }
.sf .btn-block { width: 100%; }
.sf .btn-lg { padding: 12px 22px; font-size: .95rem; }
.sf .btn-sm { padding: 6px 13px; font-size: .8rem; }

.sf .checkout-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
}
.sf .checkout-steps .step { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--sf-ink-soft); }
.sf .checkout-steps .step-num {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sf-bg-sunken); color: var(--sf-ink-soft); font-size: .75rem; font-weight: 700;
}
.sf .checkout-steps .step.active { color: var(--sf-ink); font-weight: 600; }
.sf .checkout-steps .step.active .step-num { background: var(--sf-accent); color: #fff; }
.sf .checkout-steps .step-line { width: 26px; height: 2px; background: var(--sf-line); }

.sf .gateway-options { display: grid; gap: 9px; }
.sf .gateway-option {
    display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg);
    transition: border-color .15s ease, background .15s ease;
}
.sf .gateway-option:hover { border-color: var(--sf-accent); background: var(--sf-bg-alt); }
.sf .gateway-option:has(input:checked) {
    border-color: var(--sf-accent); background: rgba(13,148,136,.06);
    box-shadow: 0 0 0 1px var(--sf-accent);
}
.sf .gateway-label { font-size: .9rem; font-weight: 600; }

.sf .checkbox-label {
    display: flex; align-items: flex-start; gap: 9px; font-size: .87rem;
    cursor: pointer; margin-bottom: 9px; line-height: 1.5;
}
.sf .ship-opt {
    padding: 11px 13px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg);
}
.sf .ship-opt:has(input:checked) { border-color: var(--sf-accent); background: rgba(13,148,136,.06); }

.sf .checkout-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 0;
    border-bottom: 1px solid var(--sf-line); font-size: .85rem;
}
.sf .checkout-item:last-child { border-bottom: 0; }
.sf .checkout-item-img, .sf .checkout-item-img-ph {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 6px;
    background: #fff; border: 1px solid var(--sf-line); object-fit: contain;
}
.sf .checkout-item-name { flex: 1; min-width: 0; }
.sf .checkout-item-price { font-weight: 700; white-space: nowrap; }
.sf .checkout-item-qty { color: var(--sf-ink-soft); font-size: .8rem; }

.sf .coupon-input-row { display: flex; gap: 8px; }
.sf .coupon-applied-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
    border-radius: 20px; background: rgba(6,125,98,.12); color: var(--sf-success);
    font-size: .78rem; font-weight: 700;
}
.sf .coupon-msg { font-size: .8rem; margin-top: 6px; }
.sf .free-shipping-tag { color: var(--sf-success); font-weight: 700; }
.sf .secure-note, .sf .checkout-terms, .sf .auth-note {
    font-size: .78rem; color: var(--sf-ink-soft); line-height: 1.6;
}
.sf .edit-cart-link, .sf .auth-footer-link a, .sf .geo-locate {
    color: var(--sf-link); font-size: .84rem; cursor: pointer;
}
.sf .edit-cart-link:hover, .sf .auth-footer-link a:hover { color: var(--sf-link-hover); text-decoration: underline; }

.sf .auth-error, .sf .auth-success {
    padding: 11px 14px; border-radius: var(--sf-radius); font-size: .86rem;
    margin-bottom: 14px; border: 1px solid transparent;
}
.sf .auth-error   { background: rgba(204,12,57,.1);  border-color: rgba(204,12,57,.35);  color: var(--sf-deal); }
.sf .auth-success { background: rgba(6,125,98,.1);   border-color: rgba(6,125,98,.35);   color: var(--sf-success); }
.sf .auth-divider {
    display: flex; align-items: center; gap: 12px; margin: 18px 0;
    color: var(--sf-ink-soft); font-size: .8rem;
}
.sf .auth-divider::before, .sf .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--sf-line);
}
.sf .auth-footer-link { text-align: center; margin-top: 16px; font-size: .85rem; }
.sf .badge-test {
    display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .72rem;
    font-weight: 700; background: rgba(245,158,11,.16); color: #b45309;
}
.sf .no-gateways { padding: 16px; text-align: center; color: var(--sf-ink-soft); font-size: .87rem; }

@media (min-width: 700px) {
    .sf .form-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
@media (min-width: 950px) {
    .sf .checkout-layout { grid-template-columns: minmax(0,1fr) 350px; gap: 24px; }
    .sf .summary-sticky { position: sticky; top: 118px; }
}

/* ═══════════════════════ Trust strip & footer ═══════════════════════ */

.sf-trust {
    display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr));
    padding: 16px 0; border-block: 1px solid var(--sf-line); margin-block: 4px 26px;
}
.sf-trust div { display: flex; align-items: center; gap: 10px; font-size: .8rem; }
.sf-trust svg { color: var(--sf-accent); flex-shrink: 0; }
.sf-trust strong { display: block; font-size: .85rem; }
.sf-trust span   { color: var(--sf-ink-soft); }

.sf-footer { background: var(--sf-brand-2); color: #ddd; margin-top: 30px; }
.sf-foot-top {
    display: block; text-align: center; padding: 13px; background: #37475a;
    color: #fff; font-size: .85rem; cursor: pointer; border: 0; width: 100%; font-family: inherit;
}
.sf-foot-top:hover { background: #485769; }
.sf-foot-cols { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 30px 0; }
.sf-foot-cols h4 { margin: 0 0 10px; font-size: .92rem; color: #fff; }
.sf-foot-cols a  { display: block; padding: 4px 0; font-size: .82rem; color: #ddd; }
.sf-foot-cols a:hover { text-decoration: underline; color: #fff; }
.sf-foot-bar {
    border-top: 1px solid rgba(255,255,255,.16); padding: 18px 0;
    text-align: center; font-size: .78rem; color: #999;
}
.sf-foot-social { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.sf-foot-social a {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.1); color: #fff;
}
.sf-foot-social a:hover { background: var(--sf-accent); }
.sf-pay-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.sf-pay-row span {
    background: #fff; color: #0f1111; border-radius: 4px; padding: 3px 8px;
    font-size: .7rem; font-weight: 700;
}

/* Toast */
.sf-toast {
    position: fixed; inset-block-end: 76px; inset-inline: 12px; z-index: 500;
    background: var(--sf-ink); color: var(--sf-bg); padding: 12px 16px;
    border-radius: var(--sf-radius); font-size: .87rem; box-shadow: var(--sf-shadow-lg);
    display: flex; align-items: center; gap: 10px;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.sf-toast.on { opacity: 1; transform: translateY(0); }
.sf-toast svg { color: #4ade80; flex-shrink: 0; }

/* ═══════════════════════ Wider screens ═══════════════════════ */

@media (min-width: 600px) {
    .sf-trust { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .sf-rail > .sf-prod { min-width: 190px; max-width: 190px; }
    .sf-foot-cols { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .sf-pdp-title { font-size: 1.45rem; }
}

@media (min-width: 900px) {
    .sf-wrap { padding-inline: 20px; }
    .sf-header-main { padding: 8px 20px; gap: 14px; }
    .sf-search { flex: 1 1 auto; order: 0; max-width: 820px; }
    .sf-search-cat { display: block; }
    .sf-deliver { display: flex; }
    .sf-subnav { padding-inline: 20px; }
    .sf-grid, .sf-tiles, .sf-showcase, .sf-autogrid { --sf-grid-gap: 16px; }

    /* Filters become a permanent column; the slide-over behaviour is dropped. */
    .sf-results { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 24px; align-items: start; }
    /* The rail stops being a slide-over here, so the hidden state that
       goes with it has to be undone as well — visibility included. */
    .sf-filters {
        position: static; width: auto; transform: none; box-shadow: none;
        background: transparent; padding: 0; overflow: visible;
        visibility: visible; transition: none;
    }
    .sf-filters-head, .sf-filter-open { display: none; }
    .sf-facet { padding: 0 0 16px; margin-bottom: 16px; }
    .sf-facet:last-child { border-bottom: 0; }

    .sf-tabbar, .sf-buybar { display: none; }
    .sf-has-tabbar { padding-bottom: 0; }

    /* Product page: gallery | details | buy box */
    .sf-pdp { grid-template-columns: minmax(0,4fr) minmax(0,5fr) minmax(260px,3fr); gap: 26px; }
    .sf-gallery { grid-template-columns: 68px minmax(0,1fr); grid-template-areas: "thumbs main"; }
    .sf-gallery-main { grid-area: main; }
    .sf-thumbs { grid-area: thumbs; flex-direction: column; overflow-y: auto; max-height: 420px; }
    .sf-thumb { width: 60px; height: 60px; }
    .sf-rev-summary { grid-template-columns: 200px minmax(0,1fr); align-items: center; }
    .sf-hero-nav { display: grid; }
}

@media (min-width: 1200px) {
    .sf-rail > .sf-prod { min-width: 205px; max-width: 205px; }
}

/* Respect a reduced-motion preference: keep the state changes, drop the travel. */
@media (prefers-reduced-motion: reduce) {
    .sf *, .sf *::before, .sf *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

@media print {
    .sf-header, .sf-subnav, .sf-tabbar, .sf-buybar, .sf-footer,
    .sf-filters, .sf-fav, .sf-toast { display: none !important; }
    .sf-has-tabbar { padding-bottom: 0; }
}