/*
 * NeevRun Storefront — hand-written CSS, no build step.
 *
 * Deliberate choice over a Tailwind/Vite pipeline: the existing Tailwind
 * config only globs resources/js/** (set up for the dead Inertia+React
 * frontend, never for Blade views), and this environment cannot run/verify
 * `npm run build` visually. A small, self-contained stylesheet ships
 * correctly on every request with zero build risk.
 *
 * STOREFRONT_VISUAL_AND_SETTINGS_CLEANUP_REPORT.md pass: introduces a real
 * design-token system (spacing/radius/shadow/type scale) so component rules
 * below reference tokens instead of one-off pixel values, and reworks
 * header/hero/categories/product cards/footer for quick-commerce density.
 * Admin panel styling (navy/orange operational UI, admin-redesign.css) is
 * untouched and unrelated - this file only ever affects storefront.*.blade.php.
 */

:root {
  /* Admin Branding (Settings -> Branding) source-of-truth tokens. These
     are static fallback DEFAULTS ONLY - the layout
     (storefront/layouts/app.blade.php) overrides them per-request from
     App\Services\BrandingService. Values here match BrandingService's
     defaults so there's no flash-of-wrong-color if that inline override is
     ever missing. Do not hardcode brand colors anywhere else in this file. */
  --brand-primary: #0E2A4D;
  --brand-secondary: #F5821F;
  --brand-button: #F5821F;
  --brand-header: #0E2A4D;
  --brand-header-text: #ffffff;
  --brand-surface: #F5F7FA;

  --brand: var(--brand-primary);
  /* Fixed design-system tokens (not admin-editable via Branding) - the
     storefront's own "architectural blueprint" identity: a second, darker
     navy for nav/footer surfaces, and an engineering blue used only for
     icon tints/dividers, distinct from the admin-configurable brand color. */
  --brand-dark: #153A67;
  --brand-light: #FFF1E4;
  --accent: var(--brand-secondary);
  --accent-dark: #D96C0C;
  --blue: #1E6FEB;
  --blue-tint: #EAF2FF;

  /* Neutrals */
  --ink: #131C27;
  --ink-muted: #5C6B7A;
  --ink-faint: #9aa1ac;
  --border: #E2E7EF;
  --bg: #F5F7FA;
  --surface: #ffffff;
  --success: #0b8a3e;
  --danger: #d92d20;

  /* Type families - Archivo for headings (architectural, high-contrast),
     Inter for body/UI text, IBM Plex Mono for prices/labels/eyebrows
     (drawing-annotation feel). Loaded via Google Fonts in the layout head;
     falls back to system fonts if that link is ever blocked/offline. */
  --font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale - component rules below reference these instead of
     one-off values, so the rhythm stays consistent across the page. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 2px 8px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

  /* Type scale */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 25px;
  --fs-3xl: 32px;

  --header-h: 60px;
  --nav-h: 40px;
  --announce-h: 32px;

  /* Product-card layout - referenced by both the grid and rail so card
     width stays consistent whichever container it's in. */
  --card-radius: var(--radius);
  --card-img-h: 168px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -.01em; }
.mono, .sf-eyebrow, .sf-card__price { font-family: var(--font-mono); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
[x-cloak] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
@media (min-width: 1700px) { .container { max-width: 1440px; } }

/* ---------- Announcement bar ---------- */
.sf-announce {
  background: var(--brand-dark); color: #fff;
  height: var(--announce-h); overflow: hidden; position: relative;
}
.sf-announce__track {
  display: flex; align-items: center; gap: 64px; height: 100%;
  white-space: nowrap; width: max-content;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .03em;
  animation: sf-announce-scroll 18s linear infinite;
  padding-left: 100%;
}
.sf-announce__track:hover { animation-play-state: paused; }
@keyframes sf-announce-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-announce__track { animation: none; padding-left: var(--sp-4); }
}

/* ---------- Header ---------- */
.sf-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--brand-header); border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--brand-header-text);
  box-shadow: var(--shadow-sm);
}
.sf-header__bar {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--header-h);
}
.sf-logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-xl); color: var(--brand-header-text); flex-shrink: 0; font-family: var(--font-heading); }
.sf-logo__img { height: 34px; width: auto; max-width: 160px; object-fit: contain; }
.sf-logo__mark {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--blue), var(--brand-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0; position: relative;
}
.sf-logo__mark::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; }
.sf-logo__text { letter-spacing: -.02em; }
.sf-logo__text .sf-logo__accent { color: var(--accent); }

.sf-location { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.1); font-size: var(--fs-sm); cursor: pointer; flex-shrink: 0; max-width: 220px; color: inherit; transition: background-color .12s; }
.sf-location:hover { background: rgba(255,255,255,.16); }
.sf-location__label { opacity: .75; font-size: var(--fs-xs); line-height: 1.1; }
.sf-location__value { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sf-search { flex: 1; min-width: 0; max-width: 640px; position: relative; }
.sf-search input {
  width: 100%; padding: 11px 16px 11px 42px; border: none; border-radius: var(--radius-pill);
  background: var(--surface); font-size: var(--fs-base); color: var(--ink);
  box-shadow: inset 0 0 0 1px transparent;
}
.sf-search input::placeholder { color: var(--ink-faint); }
.sf-search input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.sf-search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.sf-search form { position: relative; }
.sf-search input { padding-right: 46px; }
.sf-search__btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; }
.sf-search__btn:hover { background: var(--accent-dark); }
.sf-search__results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 70vh; overflow-y: auto; z-index: 50; color: var(--ink); }
.sf-search__item { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.sf-search__item:last-child { border-bottom: none; }
.sf-search__item img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg); }

.sf-header__actions { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }
.sf-icon-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: inherit; transition: opacity .12s; }
.sf-icon-btn:hover { opacity: .8; }
.sf-icon-btn__label { font-size: 10px; color: inherit; opacity: .85; }
.sf-badge { position: absolute; top: -2px; right: -2px; background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: 700; min-width: 17px; height: 17px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--brand-header); }

/* ---------- Category nav ---------- */
/* Desktop horizontal bar - hidden on mobile (the off-canvas drawer below
   replaces it there, rather than squeezing hover-dropdown markup into an
   inline mobile list). */
.sf-nav { background: var(--brand-dark); position: relative; z-index: 39; }
.sf-nav__bar { display: flex; align-items: center; }
.sf-nav__list { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.sf-nav__list::-webkit-scrollbar { display: none; }
.sf-nav__item { position: relative; flex-shrink: 0; }
.sf-nav__link { display: flex; align-items: center; gap: 4px; padding: 10px 14px; color: rgba(255,255,255,.9); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; height: var(--nav-h); }
.sf-nav__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.sf-nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); padding: var(--sp-2) 0; display: flex; flex-direction: column; }
.sf-nav__dropdown a { padding: 9px 18px; font-size: var(--fs-sm); color: var(--ink); }
.sf-nav__dropdown a:hover { background: var(--brand-light); color: var(--brand-dark); }

/* Hamburger trigger, header-row - hidden on desktop. */
.sf-nav__hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-pill); background: none; border: none; color: inherit; }
.sf-nav__hamburger:hover { background: rgba(255,255,255,.14); }

/* ---------- Mobile category drawer (off-canvas, overlays the page) ---------- */
.sf-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.sf-drawer--open { visibility: visible; }
.sf-drawer__backdrop { position: absolute; inset: 0; background: rgba(8,32,68,.5); opacity: 0; transition: opacity .2s ease; }
.sf-drawer--open .sf-drawer__backdrop { opacity: 1; }
.sf-drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 340px;
  background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .22s ease;
}
.sf-drawer--open .sf-drawer__panel { transform: translateX(0); }
.sf-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4); border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: var(--fs-md); color: var(--ink); flex-shrink: 0;
}
.sf-drawer__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); border: none; background: var(--bg); color: var(--ink-muted); }
.sf-drawer__body { overflow-y: auto; flex: 1; padding: var(--sp-2) 0; }
.sf-drawer__item { border-bottom: 1px solid var(--border); }
.sf-drawer__parent-row { display: flex; align-items: stretch; }
.sf-drawer__parent-row a { flex: 1; padding: 13px var(--sp-4); font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.sf-drawer__chevron { flex-shrink: 0; width: 46px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--ink-muted); transition: transform .15s ease; }
.sf-drawer__chevron--open { transform: rotate(180deg); color: var(--brand); }
.sf-drawer__children { display: flex; flex-direction: column; background: var(--bg); padding: 4px 0 8px; }
.sf-drawer__children a { padding: 10px var(--sp-4) 10px calc(var(--sp-4) + 10px); font-size: var(--fs-sm); color: var(--ink-muted); }
.sf-drawer__children a:active { color: var(--brand); }

@media (max-width: 900px) {
  .sf-nav { display: none; }
  .sf-nav__hamburger { display: flex; }
}

/* ---------- Pincode notice ---------- */
.sf-pincode-notice {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--brand-light); color: var(--brand-dark);
  font-size: var(--fs-sm); cursor: pointer;
}
.sf-pincode-notice svg { flex-shrink: 0; color: var(--accent); }

/* ---------- Customer auth (Mobile OTP + Google) ---------- */
.sf-auth {
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--bg);
}
.sf-auth__card {
  width: 100%; max-width: 400px;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-8) var(--sp-6);
}
.sf-auth__logo { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.sf-auth__logo img { max-height: 40px; width: auto; }
.sf-auth__title { font-size: var(--fs-2xl); font-weight: 800; text-align: center; margin: 0 0 6px; letter-spacing: -.01em; }
.sf-auth__subtitle { font-size: var(--fs-sm); color: var(--ink-muted); text-align: center; margin: 0 0 var(--sp-5); }
.sf-auth__subtitle a { color: var(--brand); font-weight: 600; }

.sf-auth__phone-row {
  display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface);
}
.sf-auth__cc { padding: 12px 12px; background: var(--bg); color: var(--ink-muted); font-weight: 700; font-size: var(--fs-base); border-right: 1px solid var(--border); }
.sf-auth__phone-row input { flex: 1; border: none; padding: 12px 14px; font-size: var(--fs-md); letter-spacing: .02em; }
.sf-auth__phone-row input:focus { outline: none; }

.sf-auth__otp-input {
  width: 100%; text-align: center; letter-spacing: 10px; font-size: var(--fs-xl); font-weight: 700;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.sf-auth__otp-input:focus { outline: 2px solid var(--brand); }

.sf-auth__divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--ink-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.sf-auth__divider::before, .sf-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.sf-auth__google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--fs-base);
  transition: background-color .12s;
}
.sf-auth__google:hover:not(:disabled) { background: var(--bg); }
.sf-auth__google:disabled { opacity: .6; cursor: not-allowed; }

.sf-auth__fallback { text-align: center; font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--sp-5); }
.sf-auth__fallback a { color: var(--brand); font-weight: 600; }

@media (max-width: 480px) {
  .sf-auth { padding: 0; align-items: stretch; }
  .sf-auth__card { max-width: none; border-radius: 0; box-shadow: none; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- Hero ---------- */
.sf-hero { display: grid; gap: var(--sp-3); }
.sf-hero--split { grid-template-columns: 2fr 1fr; }
.sf-hero__primary { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: block; background: var(--surface); }
.sf-hero__primary picture { display: block; }
.sf-hero__primary img { width: 100%; aspect-ratio: 16/6; object-fit: cover; }

/* Full-bleed hero: one banner, no container, flush under the header. The image
   keeps its own 1648x610 ratio here instead of being cropped to 16/6 - at full
   viewport width there is no reason to cut the sides off. */
.sf-hero--full { gap: 0; }
.sf-hero--full .sf-hero__primary { border-radius: 0; box-shadow: none; }
.sf-hero--full .sf-hero__primary img { aspect-ratio: 1648 / 610; }
.sf-hero__secondary { display: flex; flex-direction: column; gap: var(--sp-3); }
.sf-hero__secondary-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); flex: 1; display: block; background: var(--surface); }
.sf-hero__secondary-card picture { display: block; height: 100%; }
.sf-hero__secondary-card img { width: 100%; height: 100%; min-height: 90px; object-fit: cover; }

/* ---------- Trust strip (real Admin -> Trust Badges labels only) ---------- */
.sf-trust { background: var(--surface); border-bottom: 1px solid var(--border); }
.sf-trust__row { display: grid; grid-template-columns: repeat(3, 1fr); }
.sf-trust__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); border-right: 1px solid var(--border); }
.sf-trust__item:last-child { border-right: none; }
.sf-trust__ic { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--blue-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); }
.sf-trust__ic svg { width: 19px; height: 19px; }
.sf-trust__item b { font-size: var(--fs-sm); color: var(--brand); font-weight: 700; }

@media (max-width: 720px) {
  .sf-trust__row { grid-template-columns: 1fr; }
  .sf-trust__item { border-right: none; border-bottom: 1px solid var(--border); }
  .sf-trust__item:last-child { border-bottom: none; }
}

@media (max-width: 720px) {
  .sf-hero--split { grid-template-columns: 1fr; }
  .sf-hero--split .sf-hero__primary img { aspect-ratio: 16/9; }
  /* Mobile art is 800x900 - a portrait crop, not 16/9. */
  .sf-hero--full .sf-hero__primary img { aspect-ratio: 800 / 900; }
  .sf-hero__secondary { flex-direction: row; }
  .sf-hero__secondary-card img { aspect-ratio: 16/9; min-height: 0; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-base); border: 1px solid transparent; transition: transform .05s ease, filter .12s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand-button); color: #fff; }
.btn-primary:hover { filter: brightness(0.92); }
.btn-outline { background: var(--surface); color: var(--brand-dark); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand-light); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Layout helpers ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.grid { display: grid; }
.hidden { display: none; }
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.py-8{padding-top:32px;padding-bottom:32px}.py-12{padding-top:48px;padding-bottom:48px}
.text-sm { font-size: var(--fs-sm); } .text-xs{font-size:var(--fs-xs)} .text-lg{font-size:var(--fs-lg)} .text-xl{font-size:var(--fs-xl)} .text-2xl{font-size:var(--fs-2xl)}
.font-bold{font-weight:700}.font-semibold{font-weight:600}
.text-muted { color: var(--ink-muted); }
.text-brand { color: var(--brand); }
.text-danger { color: var(--danger); }
.rounded { border-radius: var(--radius); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.shadow { box-shadow: var(--shadow); }
.w-full { width: 100%; }

/* ---------- Sections / headings ---------- */
.sf-section { padding: var(--sp-8) 0; }
.sf-section--tinted { background: var(--brand-light); }
.sf-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }
.sf-section__head h2 { font-size: var(--fs-xl); margin: 0; font-weight: 800; letter-spacing: -.01em; }
.sf-section__head a { font-size: var(--fs-sm); color: var(--brand); font-weight: 700; }

/* Dimension-line eyebrow - a small drawing-annotation mark above section
   headings, matching the "architectural blueprint" identity. */
.sf-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 8px; font-weight: 600;
}
.sf-eyebrow__tick { width: 30px; height: 8px; position: relative; flex: none; }
.sf-eyebrow__tick::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--blue); }
.sf-eyebrow__tick::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--blue); }

/* ---------- Category shortcuts ---------- */
.sf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-5) var(--sp-3); }
.sf-cat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.sf-cat__img {
  width: 88px; height: 88px; border-radius: 50%; background: var(--brand-light);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: transform .12s, box-shadow .12s;
}
.sf-cat:hover .sf-cat__img { transform: translateY(-2px); box-shadow: var(--shadow); }
.sf-cat__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-cat__fallback { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand); }
.sf-cat__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 104px; }

@media (max-width: 640px) {
  .sf-cats { grid-auto-flow: column; grid-auto-columns: 78px; grid-template-columns: none; overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: none; }
  .sf-cats::-webkit-scrollbar { display: none; }
  .sf-cat__img { width: 68px; height: 68px; }
  .sf-cat__name { max-width: 78px; }
}

/* ---------- Product grid/cards ---------- */
.sf-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.sf-product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-1); scroll-snap-type: x proximity; }
.sf-product-rail > * { scroll-snap-align: start; }

.sf-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: box-shadow .15s, transform .15s;
}
.sf-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.sf-card__img { height: var(--card-img-h); background: var(--surface); position: relative; padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.sf-card__img img { width: 100%; height: 100%; object-fit: contain; }
.sf-card__badge { position: absolute; top: var(--sp-2); left: var(--sp-2); background: var(--brand); color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm); z-index: 2; }
.sf-card__oos { position: absolute; inset: 0; background: rgba(255,255,255,.82); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); color: var(--danger); }
.sf-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.sf-card__name { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.sf-card__price-row { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: 2px; }
.sf-card__price { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -.01em; }
.sf-card__price--strike { color: var(--ink-faint); text-decoration: line-through; font-size: var(--fs-sm); font-weight: 400; }
.sf-card__bulk { font-size: var(--fs-xs); color: var(--brand-dark); font-weight: 700; background: var(--brand-light); border-radius: var(--radius-sm); padding: 3px 7px; display: inline-flex; align-items: center; gap: 3px; width: fit-content; }
.sf-card__add { margin-top: auto; padding-top: var(--sp-1); }
.sf-add-btn {
  width: 100%; padding: 9px; border-radius: var(--radius-sm); border: 1.5px solid var(--brand-button);
  background: var(--surface); color: var(--brand-button); font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: .02em; transition: background-color .12s, color .12s;
}
.sf-add-btn:hover:not(:disabled) { background: var(--brand-button); color: #fff; }
.sf-qty-stepper { display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-button); }
.sf-qty-stepper button { background: transparent; color: #fff; border: none; width: 30px; height: 32px; font-size: 16px; font-weight: 700; }
.sf-qty-stepper .sf-qty-bulk { width: 42px; font-size: 12px; border-left: 1px solid rgba(255,255,255,.28); }
.sf-qty-stepper span { flex: 1; text-align: center; font-weight: 800; font-size: var(--fs-sm); color: #fff; }

@media (min-width: 640px) { .sf-product-grid { grid-template-columns: repeat(3, 1fr); } .sf-product-rail { grid-auto-columns: 31%; } }
@media (min-width: 900px) { :root { --card-img-h: 190px; } .sf-product-grid { grid-template-columns: repeat(4, 1fr); } .sf-product-rail { grid-auto-columns: 23%; } }
@media (min-width: 1100px) { .sf-product-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1400px) { .sf-product-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 480px) {
  .sf-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .sf-product-rail { grid-auto-columns: 44%; }
  :root { --card-img-h: 140px; }
  .sf-card__name { font-size: 13px; min-height: 32px; }
  .sf-card__price { font-size: var(--fs-base); }
}

/* ---------- Product detail page ---------- */
.sf-pdp-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); padding: var(--sp-5) 0 var(--sp-8); align-items: start; }

.sf-pdp-gallery__main {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  height: 380px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.sf-pdp-gallery__main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-pdp-gallery__badge { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm); z-index: 2; }
.sf-pdp-gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.sf-pdp-thumb { width: 60px; height: 60px; border-radius: var(--radius-sm); background: var(--surface); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 4px; }
.sf-pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sf-pdp-thumb--active { border-color: var(--accent); }

.sf-pdp-title { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand); line-height: 1.25; margin: 0 0 var(--sp-2); }
.sf-pdp-subtitle { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 var(--sp-4); line-height: 1.6; }

.sf-pdp-rating { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.sf-pdp-rating__stars { display: flex; gap: 2px; color: var(--accent); }
.sf-pdp-rating__stars svg { width: 15px; height: 15px; }
.sf-pdp-rating__value { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); font-weight: 600; }

.sf-pdp-price-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); }
.sf-pdp-price-row { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.sf-pdp-price-row__now { font-size: 28px; font-weight: 600; color: var(--brand); }
.sf-pdp-price-row__was { font-size: var(--fs-md); color: var(--ink-faint); text-decoration: line-through; }
.sf-pdp-price-row__off { background: var(--brand-light); color: var(--accent-dark); font-size: var(--fs-sm); font-weight: 700; padding: 4px 9px; border-radius: var(--radius-sm); }

.sf-pdp-bulk { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-4); }
.sf-pdp-bulk__head { background: var(--blue-tint); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-dark); padding: 9px 14px; }
.sf-pdp-bulk__row { display: flex; justify-content: space-between; padding: 10px 14px; font-size: var(--fs-sm); border-top: 1px solid var(--border); color: var(--ink-muted); }
.sf-pdp-bulk__row:first-of-type { font-weight: 700; color: var(--brand); background: var(--brand-light); }
.sf-pdp-bulk__row b { color: var(--brand); }

.sf-pdp-stock-line { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--success); font-weight: 600; margin: 0 0 var(--sp-4); }
.sf-pdp-stock-line svg { width: 16px; height: 16px; flex-shrink: 0; }
.sf-pdp-stock-line--muted { color: var(--ink-muted); font-weight: 400; }
.sf-pdp-stock-line--danger { color: var(--danger); }

.sf-pdp-qty-row { display: flex; gap: var(--sp-3); }
.sf-pdp-qty-box { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); height: 48px; flex-shrink: 0; }
.sf-pdp-qty-box button { width: 42px; height: 100%; background: none; border: none; font-size: 18px; color: var(--brand); cursor: pointer; }
.sf-pdp-qty-box span { width: 36px; text-align: center; font-family: var(--font-mono); font-weight: 600; }
.sf-pdp-add-btn {
  flex: 1; height: 48px; border-radius: var(--radius-sm); background: var(--brand-button); color: #fff; border: none;
  font-weight: 700; font-size: var(--fs-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.sf-pdp-add-btn svg { width: 18px; height: 18px; }
.sf-pdp-add-btn:hover:not(:disabled) { filter: brightness(.92); }
.sf-pdp-add-btn:disabled { opacity: .6; }

.sf-pdp-tabs { margin-top: var(--sp-4); }
.sf-pdp-tabs__bar { display: flex; gap: var(--sp-1); border-bottom: 1.5px solid var(--border); margin-bottom: var(--sp-6); }
.sf-pdp-tab { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-muted); background: none; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; cursor: pointer; }
.sf-pdp-tab--active { color: var(--brand); border-color: var(--accent); }
.sf-pdp-spec-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); }
.sf-pdp-spec-card h3 { font-size: var(--fs-lg); color: var(--brand); margin: 0 0 var(--sp-3); }
.sf-pdp-prose { font-size: 13.8px; color: var(--ink-muted); line-height: 1.75; }
.sf-pdp-spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sf-pdp-spec-table tr { border-bottom: 1px solid var(--border); }
.sf-pdp-spec-table tr:last-child { border-bottom: none; }
.sf-pdp-spec-table td { padding: 11px 0; }
.sf-pdp-spec-table td:first-child { color: var(--ink-muted); width: 40%; }
.sf-pdp-spec-table td:last-child { color: var(--ink); font-weight: 600; }
.sf-pdp-faq { border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; }
.sf-pdp-faq:last-child { border-bottom: none; }
.sf-pdp-faq summary { cursor: pointer; font-size: 13.8px; font-weight: 600; color: var(--brand); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.sf-pdp-faq summary::-webkit-details-marker { display: none; }
.sf-pdp-faq summary::after { content: '+'; font-size: 18px; color: var(--accent); flex-shrink: 0; }
.sf-pdp-faq[open] summary::after { content: '\2013'; }
.sf-pdp-faq p { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--sp-2); line-height: 1.65; }

@media (max-width: 900px) {
  .sf-pdp-top { grid-template-columns: 1fr; }
}

/* ---------- Blog teaser ---------- */
.sf-blog-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.sf-blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sf-blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sf-blog-card__body { padding: var(--sp-3) var(--sp-4); }
.sf-blog-card__body h3 { font-size: var(--fs-md); margin: 0 0 4px; }
.sf-blog-card__body p { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; line-height: 1.5; }

/* ---------- Footer ---------- */
.sf-footer { background: var(--brand-dark); color: #eaf3ee; margin-top: var(--sp-10); padding: 44px 0 22px; }
.sf-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.sf-footer h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--sp-3); color: #fff; font-weight: 700; }
.sf-footer a { display: block; padding: 4px 0; color: #cfe4d8; font-size: var(--fs-base); }
.sf-footer a:hover { color: #fff; }
.sf-footer__bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--sp-6); padding-top: var(--sp-4); font-size: var(--fs-sm); color: #b9d2c4; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }

@media (max-width: 720px) {
  .sf-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Breadcrumb ---------- */
.sf-breadcrumb { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-4); }
.sf-breadcrumb a { color: var(--blue); }
.sf-breadcrumb span { margin: 0 6px; color: var(--border); }

/* ---------- Category page head ---------- */
.sf-page-head { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); }
.sf-page-head h1 { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand); margin: 0 0 4px; }
.sf-page-head__count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-muted); }

/* ---------- Subcategory rail ---------- */
.sf-subcat-rail { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-6); scrollbar-width: none; }
.sf-subcat-rail::-webkit-scrollbar { display: none; }
.sf-subcat-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--surface); min-width: 92px; text-align: center; transition: border-color .15s ease;
}
.sf-subcat-chip:hover { border-color: var(--accent); }
.sf-subcat-chip__img { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-subcat-chip__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-subcat-chip span:last-child { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }

/* ---------- Listing layout: filters + grid ---------- */
.sf-listing { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-10); }
.sf-filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + var(--nav-h) + var(--sp-4)); }
.sf-filters h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--sp-4); }
.sf-filters__group { margin-bottom: var(--sp-5); }
.sf-filters__group h4 { font-size: var(--fs-base); font-weight: 700; color: var(--ink); margin: 0 0 var(--sp-3); }
.sf-filters__group label { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-2); cursor: pointer; }
.sf-filters__group input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.sf-filters__price-row { display: flex; align-items: center; gap: var(--sp-2); }
.sf-filters__price-row input { width: 100%; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--sp-2); font-family: var(--font-mono); font-size: 12px; }
.sf-filters__price-row span { color: var(--ink-faint); }
.sf-filters__apply { width: 100%; height: 38px; border-radius: var(--radius-sm); background: var(--brand); color: #fff; border: none; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; margin-top: 4px; }
.sf-filters__apply:hover { background: var(--brand-dark); }
.sf-filters__clear { display: block; text-align: center; font-size: 12px; color: var(--blue); margin-top: var(--sp-3); }

.sf-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.sf-toolbar__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sf-chip-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-tint); color: var(--brand-dark); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-pill); }
.sf-chip-tag svg { width: 11px; height: 11px; }
.sf-sort-select { height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); padding: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink); }

@media (max-width: 960px) {
  .sf-listing { grid-template-columns: 1fr; }
  .sf-filters { position: static; }
}

/* ---------- Pagination ---------- */
.sf-pagination { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-6); flex-wrap: wrap; }
.sf-pagination a, .sf-pagination span { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: var(--fs-sm); }
.sf-pagination .active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Forms ---------- */
.sf-field { margin-bottom: var(--sp-4); }
.sf-field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 5px; }
.sf-field input, .sf-field select, .sf-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-base); background: var(--surface); }
.sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus { outline: 2px solid var(--brand); }
.sf-field-error { color: var(--danger); font-size: var(--fs-xs); margin-top: 4px; }

/* ---------- Cart ---------- */
.sf-cart-row { display: flex; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.sf-cart-row img { width: 68px; height: 68px; object-fit: contain; background: var(--bg); border-radius: var(--radius-sm); flex-shrink: 0; }
.sf-cart-summary { position: sticky; top: calc(var(--header-h) + var(--nav-h) + var(--sp-4)); }
.sf-summary-row { display: flex; justify-content: space-between; font-size: var(--fs-base); padding: 6px 0; }
.sf-summary-row.total { font-weight: 700; font-size: var(--fs-lg); border-top: 1px solid var(--border); margin-top: 6px; padding-top: var(--sp-3); }

/* ---------- Sticky mobile cart bar ---------- */
.sf-sticky-cart { position: fixed; bottom: 0; left: 0; right: 0; background: var(--brand-button); color: #fff; padding: var(--sp-3) var(--sp-4); display: none; align-items: center; justify-content: space-between; z-index: 45; box-shadow: 0 -2px 8px rgba(0,0,0,.15); }
.sf-sticky-cart.show { display: flex; }

@media (max-width: 720px) {
  .sf-search { order: 3; flex-basis: 100%; }
  .sf-header__bar { flex-wrap: wrap; height: auto; padding: var(--sp-2) 0; gap: var(--sp-2); }
  .sf-logo__text { display: none; }
  .sf-location { max-width: 130px; }
  .sf-header__actions { margin-left: auto; gap: var(--sp-3); }
  .sf-icon-btn__label { display: none; }
}

/* ---------- Policy page prose (raw admin-authored HTML) ---------- */
.sf-policy-content h1, .sf-policy-content h2, .sf-policy-content h3 { margin: 20px 0 10px; font-weight: 700; color: var(--ink); }
.sf-policy-content h1:first-child, .sf-policy-content h2:first-child, .sf-policy-content h3:first-child { margin-top: 0; }
.sf-policy-content p { margin: 0 0 12px; color: var(--ink); line-height: 1.7; }
.sf-policy-content ul, .sf-policy-content ol { margin: 0 0 12px 22px; }
.sf-policy-content li { margin-bottom: 6px; line-height: 1.6; }
.sf-policy-content a { color: var(--brand); }
.sf-policy-content table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.sf-policy-content table td, .sf-policy-content table th { border: 1px solid var(--border); padding: 8px; text-align: left; }

/* =========================================================================
   Home page: hero band, trust strip, category tiles, promo banner
   -------------------------------------------------------------------------
   Appended after the base rules (and after their media queries) so these
   deliberately win, including the mobile overrides re-declared at the end of
   this block. Everything here is driven by admin-configured copy - see
   SettingController::storefrontHome() - and each block is simply absent from
   the DOM when its fields are blank.
   ========================================================================= */

/* ---------- Buttons ---------- */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: var(--fs-base); cursor: pointer;
  border: 1.5px solid transparent; transition: transform .12s ease, background .12s ease;
  text-decoration: none; white-space: nowrap;
}
.sf-btn:hover { transform: translateY(-1px); }
.sf-btn--orange { background: var(--accent); color: #fff; }
.sf-btn--orange:hover { background: var(--accent-dark); color: #fff; }
.sf-btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.sf-btn--ghost:hover { border-color: #fff; color: #fff; }
.sf-btn--navy { background: var(--brand); color: #fff; }
.sf-btn--navy:hover { background: var(--brand-dark); color: #fff; }

/* ---------- Hero band ---------- */
/* The blueprint grid is drawn with two repeating-linear-gradients rather
   than a background image so it stays crisp at any width and costs no
   extra request. */
.sf-hero-band {
  background:
    linear-gradient(180deg, rgba(14,42,77,.97), rgba(14,42,77,.93)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    var(--brand);
  color: #fff; overflow: hidden;
}
.sf-hero-band__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px;
  align-items: center; padding-top: 56px; padding-bottom: 56px;
}
.sf-hero-band__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(249,115,22,.14); border: 1px solid rgba(249,115,22,.45);
  color: #ffb877; font-size: var(--fs-sm); letter-spacing: .1em;
  padding: 6px 12px; border-radius: 20px; margin-bottom: 22px; text-transform: uppercase;
}
.sf-hero-band__eyebrow i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.sf-hero-band h1 {
  font-size: 46px; line-height: 1.08; font-weight: 900;
  margin: 0 0 18px; letter-spacing: -.02em; color: #fff;
}
.sf-hero-band h1 em { font-style: normal; color: var(--accent); }
.sf-hero-band p { font-size: var(--fs-lg); color: #c3d3e8; max-width: 460px; margin: 0 0 30px; line-height: 1.6; }
.sf-hero-band__cta { display: flex; gap: 14px; margin-bottom: 34px; flex-wrap: wrap; }
.sf-hero-band__stats { display: flex; gap: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); flex-wrap: wrap; }
.sf-hero-band__stats b { display: block; font-size: var(--fs-xl); color: #fff; font-weight: 700; }
.sf-hero-band__stats span { font-size: var(--fs-sm); color: #93a7c1; text-transform: uppercase; letter-spacing: .06em; }
.sf-hero-band__art { position: relative; height: 420px; }
.sf-hero-band__art svg { width: 100%; height: 100%; }

/* ---------- Trust strip ---------- */
.sf-trust__row { grid-template-columns: repeat(4, 1fr); }
.sf-trust__text { display: flex; flex-direction: column; min-width: 0; }
.sf-trust__text b { font-size: var(--fs-sm); color: var(--brand); font-weight: 700; }
.sf-trust__text span { font-size: var(--fs-sm); color: var(--ink-muted); }

/* ---------- Category tiles ---------- */
/* Bordered cards rather than bare circles: with icon fallbacks the tiles
   otherwise had no edge to sit against and the grid read as loose dots. */
.sf-cats { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-3); }
.sf-cat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 10px 14px; gap: 0;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sf-cat:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.sf-cat__img {
  width: 52px; height: 52px; background: var(--brand-light);
  margin: 0 auto 10px; border: none; box-shadow: none; color: var(--brand);
}
.sf-cat:hover .sf-cat__img { transform: none; box-shadow: none; }
.sf-cat__name { max-width: none; font-size: var(--fs-sm); }

/* ---------- Product card icon fallback ---------- */
.sf-card__img--icon { display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand); }
.sf-card__img--icon svg { opacity: .75; }

/* ---------- Promo banner ---------- */
.sf-promo {
  background: linear-gradient(120deg, var(--accent) 0%, #ff9d45 100%);
  border-radius: 16px; padding: 38px 40px; color: #fff; position: relative; overflow: hidden;
}
.sf-promo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 2px, transparent 2px 26px);
}
.sf-promo__text { position: relative; z-index: 1; max-width: 520px; }
.sf-promo h3 { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 8px; color: #fff; }
.sf-promo p { font-size: var(--fs-base); color: #fff0e2; margin: 0 0 18px; }
.sf-eyebrow--light { color: #fff; }
.sf-eyebrow--light .sf-eyebrow__tick::before,
.sf-eyebrow--light .sf-eyebrow__tick::after { background: #fff; }

/* Rails already carry their own top rhythm; this stops stacked sections
   from doubling up the gap. */
.sf-section--tight { padding-top: 0; }

/* ---------- Footer brand column ---------- */
.sf-footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); }
.sf-footer__brand img { max-height: 40px; width: auto; }
.sf-footer__wordmark { font-size: var(--fs-xl); font-weight: 900; color: #fff; letter-spacing: -.02em; }
.sf-footer__wordmark span { color: var(--accent); }
.sf-footer__brand p { font-size: var(--fs-sm); color: #93a7c1; margin: 14px 0 0; line-height: 1.6; max-width: 260px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sf-hero-band__grid { grid-template-columns: 1fr; padding-top: 36px; gap: 24px; }
  .sf-hero-band__art { height: 280px; order: -1; }
  .sf-trust__row { grid-template-columns: repeat(2, 1fr); }
  .sf-trust__item:nth-child(2) { border-right: none; }
  .sf-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .sf-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sf-hero-band h1 { font-size: 32px; }
  .sf-hero-band p { font-size: var(--fs-base); }
  .sf-hero-band__cta .sf-btn { flex: 1 1 auto; }
  .sf-promo { padding: 26px 22px; }
  .sf-cats {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr); overflow-x: visible;
  }
  .sf-cat { padding: 14px 6px 12px; }
  .sf-cat__img { width: 46px; height: 46px; }
  .sf-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Navigation: single hamburger drawer at every width
   -------------------------------------------------------------------------
   The desktop category bar (.sf-nav) is gone from the markup - a flat
   catalogue of 20+ top-level categories overflowed it - so the hamburger is
   now always visible and the drawer is the only nav surface. These rules sit
   after the old ones (including their 900px media query) so they win.
   ========================================================================= */
.sf-nav__hamburger { display: flex; }
.sf-drawer__primary { display: flex; flex-direction: column; padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.sf-drawer__primary a { padding: 12px 4px; font-size: var(--fs-lg); font-weight: 700; color: var(--brand); }
.sf-drawer__primary a:hover { color: var(--accent-dark); }
.sf-drawer__section-title {
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-muted); padding: var(--sp-2) 4px;
}

/* =========================================================================
   Home hero banner: exact admin aspect ratios
   -------------------------------------------------------------------------
   The banner boxes used to be 16/6 on desktop and 16/9 on mobile, neither of
   which matches what the admin screen asks for (1648x610 desktop, 800x900
   mobile). object-fit:cover then quietly cropped the edges off every upload.
   Matching the ratio exactly means cover has nothing left to crop, so the
   banner is shown whole, full width, without stretching.
   ========================================================================= */
.sf-hero__primary img { aspect-ratio: 1648 / 610; }

@media (max-width: 720px) {
  /* The mobile crop is portrait, so it needs its own ratio - the desktop
     one letterboxes it badly. */
  .sf-hero__primary img { aspect-ratio: 800 / 900; }
}

/* =========================================================================
   PRODUCT DETAIL PAGE  (rebuilt)
   -------------------------------------------------------------------------
   Replaces the previous layout, which put the price, stock, bulk table and
   cart controls inside one large bordered box floating away from the product
   information, and gave the gallery an unbounded box that left a mostly
   empty canvas next to a small image.

   Structure: a two-column hero (gallery / buy column) on one wide container,
   then full-width tabbed information and related products. Cards are used
   only where something genuinely groups - bulk pricing, delivery - rather
   than around every element.
   ========================================================================= */

.sf-pdp { --pdp-gap: 40px; }
.sf-pdp__wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* ---------- breadcrumb ---------- */
.sf-pdp-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: var(--fs-sm); color: var(--ink-muted); padding: 14px 0 12px;
}
.sf-pdp-crumb a { color: var(--ink-muted); }
.sf-pdp-crumb a:hover { color: var(--accent-dark); }
.sf-pdp-crumb__current { color: var(--ink); font-weight: 600; }

/* ---------- hero ---------- */
.sf-pdp-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pdp-gap); align-items: start; padding-bottom: 40px;
}

/* ---------- gallery ---------- */
.sf-pdp-media { position: sticky; top: 88px; }
.sf-pdp-stage {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; height: 470px; display: flex; align-items: center;
  justify-content: center; padding: 24px; overflow: hidden;
}
.sf-pdp-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-pdp-stage__badge {
  position: absolute; top: 14px; left: 14px; background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 6px;
}
.sf-pdp-stage__empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink-faint); text-align: center;
}
.sf-pdp-stage__empty svg { width: 64px; height: 64px; color: var(--brand); opacity: .28; }
.sf-pdp-stage__empty span { font-size: var(--fs-sm); }

.sf-pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sf-pdp-thumbs__item {
  width: 66px; height: 66px; border: 1.5px solid var(--border); border-radius: 8px;
  background: #fff; padding: 5px; cursor: pointer; transition: border-color .12s;
}
.sf-pdp-thumbs__item img { width: 100%; height: 100%; object-fit: contain; }
.sf-pdp-thumbs__item:hover { border-color: var(--accent); }
.sf-pdp-thumbs__item.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--brand-light); }

/* ---------- buy column ---------- */
.sf-pdp-eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 8px;
}
.sf-pdp-eyebrow__brand {
  font-weight: 700; color: var(--brand); text-transform: uppercase;
  letter-spacing: .06em; font-size: 12px;
}
.sf-pdp-eyebrow a { color: var(--blue); }

.sf-pdp-h1 {
  font-size: 30px; line-height: 1.25; font-weight: 800; color: var(--brand);
  margin: 0 0 10px; letter-spacing: -.01em;
}
.sf-pdp-lede { font-size: var(--fs-base); color: var(--ink-muted); line-height: 1.6; margin: 0 0 14px; }

.sf-pdp-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sf-pdp-rating__stars { display: flex; gap: 2px; color: var(--accent); }
.sf-pdp-rating__stars svg { width: 15px; height: 15px; }
.sf-pdp-rating__value { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); font-weight: 600; }

.sf-pdp-meta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.sf-pdp-meta__stock { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.sf-pdp-meta__stock.is-in { color: var(--success); }
.sf-pdp-meta__stock.is-out { color: var(--danger); }
.sf-pdp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sf-pdp-meta__sku { color: var(--ink-muted); }
.sf-pdp-meta__sku b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }

/* ---------- price ---------- */
.sf-pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sf-pdp-price__now { font-size: 32px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.sf-pdp-price__was { font-size: var(--fs-lg); color: var(--ink-faint); text-decoration: line-through; }
.sf-pdp-price__off {
  background: var(--brand-light); color: var(--accent-dark);
  font-size: var(--fs-sm); font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.sf-pdp-tax { font-size: 12.5px; color: var(--ink-muted); margin: 4px 0 0; }

/* ---------- variation pills ---------- */
.sf-pdp-opts { margin-top: 22px; }
.sf-pdp-opts__head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font-size: var(--fs-base); font-weight: 700; color: var(--brand);
}
.sf-pdp-opts__chosen { font-weight: 500; color: var(--ink-muted); font-size: var(--fs-sm); }
.sf-pdp-opts__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-pdp-opt {
  min-width: 96px; padding: 9px 14px; background: #fff; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 10px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.sf-pdp-opt__label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.sf-pdp-opt__price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.sf-pdp-opt:hover:not(.is-disabled) { border-color: var(--accent); }
.sf-pdp-opt.is-selected {
  border-color: var(--accent); background: var(--brand-light);
  box-shadow: 0 0 0 1px var(--accent);
}
.sf-pdp-opt.is-selected .sf-pdp-opt__label { color: var(--brand); }
.sf-pdp-opt.is-disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* ---------- bulk pricing ---------- */
.sf-pdp-bulk {
  margin-top: 22px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.sf-pdp-bulk__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--blue-tint); border-bottom: 1px solid var(--border);
}
.sf-pdp-bulk__head b { color: var(--brand); font-size: var(--fs-base); }
.sf-pdp-bulk__head span { font-size: 12.5px; color: var(--ink-muted); }
.sf-pdp-bulk__tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.sf-pdp-bulk__tier {
  padding: 12px 14px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.sf-pdp-bulk__tier:last-child { border-right: none; }
.sf-pdp-bulk__tier.is-best { background: var(--brand-light); }
.sf-pdp-bulk__qty { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.sf-pdp-bulk__price { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; color: var(--brand); }
.sf-pdp-bulk__unit { font-size: 11px; color: var(--ink-faint); }
.sf-pdp-bulk__hint {
  margin: 0; padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--accent-dark); background: #fff;
}

/* ---------- delivery ---------- */
.sf-pdp-deliver {
  margin-top: 20px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; padding: 14px 16px;
}
.sf-pdp-deliver__row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); flex-wrap: wrap; }
.sf-pdp-deliver__row svg { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; }
.sf-pdp-deliver__row b { color: var(--brand); font-family: var(--font-mono); }
.sf-pdp-deliver__change {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--blue); font-weight: 700; font-size: var(--fs-sm);
}
.sf-pdp-deliver__note { margin: 8px 0 0 27px; font-size: var(--fs-sm); color: var(--success); font-weight: 600; }
.sf-pdp-deliver__note.is-out { color: var(--danger); }

/* ---------- qty + cta ---------- */
.sf-pdp-buyrow { display: flex; gap: 12px; margin-top: 22px; }
.sf-pdp-qty {
  display: flex; align-items: center; border: 1.5px solid var(--border);
  border-radius: 10px; height: 52px; flex-shrink: 0; background: #fff;
}
.sf-pdp-qty.is-disabled { opacity: .5; }
.sf-pdp-qty button { width: 44px; height: 100%; background: none; border: none; font-size: 20px; color: var(--brand); cursor: pointer; }
.sf-pdp-qty .sf-qty-bulk { width: 52px; font-size: 13px; border-left: 1px solid var(--border); }
.sf-pdp-qty input {
  width: 46px; height: 100%; border: none; text-align: center; background: none;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-base); color: var(--ink);
}
.sf-pdp-qty input:focus { outline: none; }
.sf-pdp-cta {
  flex: 1; height: 52px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: var(--fs-lg); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .12s, opacity .12s;
}
.sf-pdp-cta svg { width: 19px; height: 19px; }
.sf-pdp-cta:hover:not(:disabled) { background: var(--accent-dark); }
.sf-pdp-cta:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- trust strip ---------- */
.sf-pdp-trust {
  list-style: none; margin: 20px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
}
.sf-pdp-trust li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.sf-pdp-trust svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }

/* ---------- tabs ---------- */
.sf-pdp-info { margin-top: 8px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.sf-pdp-info__bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.sf-pdp-info__bar button {
  padding: 14px 20px; background: none; border: none; cursor: pointer; white-space: nowrap;
  font-size: var(--fs-base); font-weight: 700; color: var(--ink-muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.sf-pdp-info__bar button.is-active { color: var(--brand); border-color: var(--accent); }
.sf-pdp-info__panel { padding: 22px 24px; font-size: var(--fs-base); color: var(--ink-muted); line-height: 1.7; }
.sf-pdp-info__panel p { margin: 0 0 10px; }
.sf-pdp-info__links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.sf-pdp-info__links a { color: var(--blue); font-weight: 600; }
.sf-pdp-prose :is(h1,h2,h3,h4) { color: var(--brand); margin: 18px 0 8px; }
.sf-pdp-prose ul, .sf-pdp-prose ol { padding-left: 20px; margin: 0 0 10px; }
.sf-pdp-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.sf-pdp-specs { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.sf-pdp-specs th, .sf-pdp-specs td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.sf-pdp-specs th { width: 34%; color: var(--ink-muted); font-weight: 600; background: var(--surface); }
.sf-pdp-specs td { color: var(--ink); font-weight: 600; }
.sf-pdp-specs tr:last-child th, .sf-pdp-specs tr:last-child td { border-bottom: none; }
.sf-pdp-faq { border-bottom: 1px solid var(--border); padding: 12px 0; }
.sf-pdp-faq summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.sf-pdp-faq p { margin: 8px 0 0; }

/* ---------- documents ---------- */
.sf-pdp-docs { margin-top: 34px; }
.sf-pdp-docs h2 { font-size: var(--fs-xl); color: var(--brand); margin: 0 0 14px; }
.sf-pdp-docs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sf-pdp-doc {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; text-align: center; display: block;
}
.sf-pdp-doc img, .sf-pdp-doc__icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 84px; object-fit: contain; margin-bottom: 8px; color: var(--brand);
}
.sf-pdp-doc__icon svg { width: 34px; height: 34px; }
.sf-pdp-doc b { display: block; font-size: var(--fs-sm); color: var(--ink); }
.sf-pdp-doc span { font-size: 11px; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- related ---------- */
.sf-pdp-related { margin: 40px 0 56px; }
.sf-pdp-related__head { margin-bottom: 18px; }
.sf-pdp-related__head h2 { font-size: var(--fs-xl); font-weight: 800; color: var(--brand); margin: 0; }
.sf-pdp-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* The shared card fixes its own width for the home rails; inside this grid the
   column decides, so the four cards fill the row instead of leaving the right
   half of the screen empty. */
.sf-pdp-related__grid > * { width: auto !important; }

/* ---------- mobile sticky buy bar ---------- */
.sf-pdp-sticky { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .sf-pdp { --pdp-gap: 28px; }
  .sf-pdp-stage { height: 400px; }
  .sf-pdp-h1 { font-size: 26px; }
  .sf-pdp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .sf-pdp-main { grid-template-columns: 1fr; gap: 24px; }
  .sf-pdp-media { position: static; }
  .sf-pdp-stage { height: 320px; padding: 16px; }
}

@media (max-width: 640px) {
  .sf-pdp__wrap { padding: 0 14px; }
  .sf-pdp-h1 { font-size: 22px; }
  .sf-pdp-price__now { font-size: 26px; }
  .sf-pdp-stage { height: 280px; }
  .sf-pdp-thumbs__item { width: 56px; height: 56px; }
  .sf-pdp-info__panel { padding: 18px 16px; }
  .sf-pdp-specs th { width: 42%; }
  .sf-pdp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* The desktop buy row scrolls away on a phone, so it is repeated in a bar
     pinned to the bottom. The page gets matching bottom padding so nothing is
     ever hidden underneath it. */
  .sf-pdp-sticky {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(14, 42, 77, .08);
  }
  .sf-pdp-sticky__price { display: flex; flex-direction: column; line-height: 1.2; }
  .sf-pdp-sticky__price span { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 800; color: var(--brand); }
  .sf-pdp-sticky__price small { font-size: 11px; color: var(--ink-faint); text-decoration: line-through; }
  .sf-pdp-sticky .sf-pdp-cta { height: 46px; flex: 1; font-size: var(--fs-base); }
  .sf-pdp-related { margin-bottom: 96px; }
}

/* =========================================================================
   Desktop primary navigation
   -------------------------------------------------------------------------
   The hamburger drawer stays, but only where it is needed. Above the drawer
   breakpoint a real nav row is shown and the hamburger is hidden, so desktop
   no longer hides every destination behind an icon. Categories open as a
   dropdown rather than being listed inline, which is what used to overflow
   this bar on a flat 20+ category catalogue.
   ========================================================================= */
.sf-topnav { background: var(--brand-dark); border-top: 1px solid rgba(255, 255, 255, .08); }
.sf-topnav__inner { display: flex; align-items: center; gap: 4px; height: 46px; }

.sf-topnav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 46px; background: none; border: none; cursor: pointer;
  font-size: var(--fs-base); font-weight: 600; color: #dce7f7;
  border-bottom: 2.5px solid transparent;
}
.sf-topnav__link:hover { color: #fff; }
.sf-topnav__link.is-active { color: #fff; border-bottom-color: var(--accent); }
.sf-topnav__link svg { width: 12px; height: 12px; }

.sf-topnav__drop { position: relative; }
.sf-topnav__menu {
  position: absolute; top: 100%; left: 0; z-index: 45; min-width: 250px;
  max-height: 65vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow); padding: 6px 0;
}
.sf-topnav__menu a {
  display: block; padding: 9px 16px; font-size: var(--fs-sm); color: var(--ink);
}
.sf-topnav__menu a:hover { background: var(--brand-light); color: var(--brand-dark); }

/* The hamburger is for the drawer, and the drawer is for narrow screens. */
.sf-nav__hamburger { display: none; }

@media (max-width: 900px) {
  .sf-topnav { display: none; }
  .sf-nav__hamburger { display: flex; }
}