/* ════════════════════════════════════════════════════════════════════════
   SITE.CSS — Public-facing store site
   Light editorial aesthetic. Multi-store themable.
   Replaces main.css + premium.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────── */
/* 1. FONTS — Fontshare CDN (free, no key needed)                        */
/* ───────────────────────────────────────────────────────────────────── */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&f[]=cabinet-grotesk@500,700,800,900&display=swap');

/* ───────────────────────────────────────────────────────────────────── */
/* 2. DESIGN TOKENS                                                      */
/* These are the fallback defaults. themeStyles() (PHP) emits a second   */
/* :root block AFTER this stylesheet that overrides the store-tinted    */
/* values (--primary-*, --neutral-*, etc).                               */
/* ───────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces — warm off-white editorial palette */
  --bg:               #fafaf9;
  --bg-elevated:      #ffffff;
  --bg-muted:         #f5f5f4;
  --bg-tinted:        var(--primary-50, #f4f7fb);

  /* Foreground — warm near-black, never pure */
  --fg:               #1c1917;
  --fg-strong:        #0c0a09;
  --fg-muted:         #57534e;
  --fg-subtle:        #78716c;
  --fg-faint:         #a8a29e;

  /* Borders — warm grays */
  --border:           #e7e5e4;
  --border-strong:    #d6d3d1;
  --border-subtle:    #f5f5f4;

  /* Accent — derived from store primary */
  --accent:           var(--primary-500, #1a73e8);
  --accent-hover:     var(--primary-600, #1464cc);
  --accent-active:    var(--primary-700, #154e98);
  --accent-fg:        var(--on-primary, #ffffff);
  --accent-soft:      var(--primary-50, #f4f7fb);
  --accent-soft-fg:   var(--primary-700, #154e98);

  /* Semantic — fixed across stores */
  --success:          #16a34a;
  --warning:          #ea580c;
  --error:            #dc2626;

  /* Focus ring */
  --ring:             var(--accent);
  --ring-offset:      var(--bg);

  /* Shadows — tinted, layered, never neon */
  --shadow-xs:  0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 2px 6px rgba(28, 25, 23, 0.04);
  --shadow-md:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 8px 24px rgba(28, 25, 23, 0.06);
  --shadow-lg:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 24px 48px -8px rgba(28, 25, 23, 0.12);
  --shadow-xl:  0 1px 2px rgba(28, 25, 23, 0.04),
                0 40px 80px -16px rgba(28, 25, 23, 0.16);

  /* Radii — zero everywhere: sharp, architectural */
  --r-xs:   0px;
  --r-sm:   0px;
  --r-md:   0px;
  --r-lg:   0px;
  --r-xl:   0px;
  --r-2xl:  0px;
  --r-pill: 0px;

  /* Secondary accent — from themeStyles(); fallback warm gold */
  --secondary:      var(--secondary-500, #d97706);
  --secondary-soft: var(--secondary-50,  #fffbeb);
  --secondary-fg:   var(--on-secondary,  #ffffff);

  /* Spacing — 4-based, semantic */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    20px;
  --s-6:    24px;
  --s-8:    32px;
  --s-10:   40px;
  --s-12:   48px;
  --s-16:   64px;
  --s-20:   80px;
  --s-24:   96px;
  --s-32:   128px;

  /* Motion */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:       180ms;
  --t-base:       300ms;
  --t-slow:       600ms;

  /* Typography */
  --font-display: 'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans:    'Satoshi', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Container widths */
  --w-content:    1440px;
  --w-narrow:     960px;
  --w-prose:      65ch;

  /* Z-index scale */
  --z-base:       1;
  --z-sticky:     50;
  --z-dropdown:   100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-toast:      400;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 2b. DARK THEME                                                        */
/* Auto (OS prefers-color-scheme) unless overridden by data-theme, plus  */
/* an explicit data-theme="dark" for the manual toggle (theme-toggle.js).*/
/* Reuses the store's own primary/neutral scale from themeStyles() so   */
/* every store gets a dark theme tinted to their brand, not a fixed one.*/
/* This block must stay in THIS file, after :root above — themeStyles()' */
/* inline <style> block loads before this stylesheet in every page head, */
/* so an unconditional rule here always wins the cascade over it.       */
/* ───────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:               var(--neutral-900, #121113);
    --bg-elevated:      var(--neutral-800, #1c1b1e);
    --bg-muted:         var(--neutral-800, #1c1b1e);
    --bg-tinted:        var(--primary-900, #241f0d);

    --fg:               var(--neutral-50,  #f2efe9);
    --fg-strong:        #ffffff;
    --fg-muted:         var(--neutral-300, #b6b0a8);
    --fg-subtle:        var(--neutral-400, #8f8a82);
    --fg-faint:         var(--neutral-500, #635e58);

    --border:           var(--neutral-700, #302f33);
    --border-strong:    var(--neutral-600, #45434a);
    --border-subtle:    var(--neutral-800, #1c1b1e);

    --accent-soft:      var(--primary-900, #241f0d);
    --accent-soft-fg:   var(--primary-200, #ffd633);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 56px -8px rgba(0, 0, 0, 0.55);
    --shadow-xl:  0 1px 2px rgba(0, 0, 0, 0.5), 0 40px 88px -16px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bg:               var(--neutral-900, #121113);
  --bg-elevated:      var(--neutral-800, #1c1b1e);
  --bg-muted:         var(--neutral-800, #1c1b1e);
  --bg-tinted:        var(--primary-900, #241f0d);

  --fg:               var(--neutral-50,  #f2efe9);
  --fg-strong:        #ffffff;
  --fg-muted:         var(--neutral-300, #b6b0a8);
  --fg-subtle:        var(--neutral-400, #8f8a82);
  --fg-faint:         var(--neutral-500, #635e58);

  --border:           var(--neutral-700, #302f33);
  --border-strong:    var(--neutral-600, #45434a);
  --border-subtle:    var(--neutral-800, #1c1b1e);

  --accent-soft:      var(--primary-900, #241f0d);
  --accent-soft-fg:   var(--primary-200, #ffd633);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 56px -8px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 1px 2px rgba(0, 0, 0, 0.5), 0 40px 88px -16px rgba(0, 0, 0, 0.6);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 3. RESET + BASE                                                       */
/* ───────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  font-variant-ligatures: common-ligatures;
  overflow-x: hidden; /* prevent horizontal scroll from any overflowing child */
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { list-style: none; padding: 0; margin: 0; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* ───────────────────────────────────────────────────────────────────── */
/* 4. FOCUS RINGS — keyboard-visible only                                */
/* ───────────────────────────────────────────────────────────────────── */

*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 0;
}

/* Custom focus for the card link (no outline jitter) */
a.v-card:focus-visible,
button.v-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--ring-offset),
    0 0 0 5px var(--ring),
    var(--shadow-md);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 5. TYPOGRAPHY                                                         */
/* ───────────────────────────────────────────────────────────────────── */

.display-xl,
.display-lg,
.display-md,
.display-sm {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

.display-xl { font-size: clamp(48px, 7vw, 88px); letter-spacing: -0.035em; }
.display-lg { font-size: clamp(40px, 5.5vw, 64px); letter-spacing: -0.03em; }
.display-md { font-size: clamp(32px, 4vw, 48px); }
.display-sm { font-size: clamp(24px, 3vw, 36px); line-height: 1.1; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h1 { font-size: clamp(32px, 4vw, 48px); }
h2 { font-size: clamp(28px, 3.2vw, 40px); }
h3 { font-size: clamp(22px, 2.2vw, 28px); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0; }
p + p { margin-top: 1em; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft-fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--secondary, var(--accent));
}

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: var(--w-prose);
}

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

.mono { font-family: var(--font-mono); font-feature-settings: 'zero', 'ss01'; }

/* ───────────────────────────────────────────────────────────────────── */
/* 6. LAYOUT HELPERS                                                     */
/* ───────────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.container-narrow {
  width: 100%;
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.section {
  padding-block: var(--s-20);
}

.section-sm {
  padding-block: var(--s-12);
}

/* Secondary-tinted section background */
.section--secondary {
  background: var(--secondary-soft);
  border-block: 1px solid color-mix(in srgb, var(--secondary) 15%, transparent);
}

@media (max-width: 768px) {
  .container, .container-narrow { padding-inline: var(--s-4); }
  .section { padding-block: var(--s-16); }
  .section-sm { padding-block: var(--s-10); }
}

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* Stack utility */
.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }

/* Flex helpers */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); }

/* ───────────────────────────────────────────────────────────────────── */
/* 7. BUTTONS                                                            */
/* ───────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 10px;
  transition: all var(--t-base) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--btn-primary-bg, var(--accent));
  color: var(--btn-primary-fg, var(--accent-fg));
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-accent:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--fg-strong);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--fg-strong);
}
.btn-ghost:hover {
  background: var(--bg-muted);
}

.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 18px 28px; font-size: 16px; }

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
}

.btn-block { width: 100%; }

/* Arrow that nudges on hover */
.btn .arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 8. FORMS                                                              */
/* ───────────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.005em;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 15px;
  color: var(--fg-strong);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--fg-faint);
}

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

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.help { font-size: 12px; color: var(--fg-muted); }
.field-error { font-size: 12px; color: var(--error); }

/* Star-rating picker — pure CSS, no JS. Radios render 5..1 in DOM order with
   flex-direction:row-reverse so they display 1..5 left-to-right; the
   general-sibling combinator lights up the checked star and everything
   visually to its left (later in DOM, due to the reversal). */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  width: fit-content;
}
.star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.star-rating label {
  font-size: 30px;
  line-height: 1;
  color: var(--border-strong, #d6d3d1);
  cursor: pointer;
  transition: color var(--t-fast, 150ms) var(--ease-out, ease);
}
.star-rating input:checked ~ label { color: #f59e0b; }
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f59e0b; }

/* ───────────────────────────────────────────────────────────────────── */
/* 9. ICONS                                                              */
/* ───────────────────────────────────────────────────────────────────── */

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 32px; height: 32px; }

/* ───────────────────────────────────────────────────────────────────── */
/* 10. REVEAL ON SCROLL — used by reveal.js                              */
/* ───────────────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--d1 { transition-delay: 80ms; }
.reveal--d2 { transition-delay: 160ms; }
.reveal--d3 { transition-delay: 240ms; }
.reveal--d4 { transition-delay: 320ms; }
.reveal--d5 { transition-delay: 400ms; }

/* ════════════════════════════════════════════════════════════════════════
   COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────── */
/* 11. NAVIGATION                                                        */
/* ───────────────────────────────────────────────────────────────────── */

/* ── Utility bar — thin strip above the main header (hours/phone/location, social) */
.nav-util {
  background: var(--fg-strong);
  color: var(--bg);
  font-size: 12.5px;
}
.nav-util__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 6px var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.nav-util__left { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.nav-util__item { display: inline-flex; align-items: center; gap: 6px; opacity: .85; text-decoration: none; color: inherit; }
.nav-util__item .icon { width: 13px; height: 13px; flex-shrink: 0; }
a.nav-util__item:hover { opacity: 1; color: var(--accent); }
.nav-util__right { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.nav-util__social { display: inline-flex; color: inherit; opacity: .85; transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.nav-util__social:hover { opacity: 1; color: var(--accent); }
@media (max-width: 768px) { .nav-util { display: none; } }

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: #0B2545;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: border-color var(--t-base) var(--ease-out);
}

.nav.is-scrolled {
  border-bottom-color: rgba(255,255,255,.18);
  background: #0B2545;
}

:root[data-theme="dark"] .nav {
  background: #0B2545;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="dark"] .nav.is-scrolled {
  background: #0B2545;
  border-bottom-color: var(--border);
}

.nav__inner {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 10px var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.nav__brand img {
  height: var(--logo-h, 75px);
  max-height: 85px;
  width: auto;
  object-fit: contain;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav__link {
  position: relative;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  border-radius: 0;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.nav__link:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.nav__link[aria-current="page"] {
  color: #fff;
  background: rgba(255,255,255,.1);
}

.nav__cta-group {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  color: #fff;
}

.nav__phone {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding: 6px 10px;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease-out);
}
.nav__phone:hover { background: rgba(255,255,255,.08); }

.nav__burger {
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 0;
}

.nav__burger:hover { background: var(--bg-muted); }

/* Day / night toggle — desktop nav bar + mobile drawer head (theme-toggle
   wiring lives in nav.php's inline script) */
.nav__theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nav__theme-toggle:hover { background: var(--bg-muted); border-color: var(--border-strong); }

.theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun  { display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: block; }

/* ── Shop mega-menu (desktop) ────────────────────────────────────────── */
.nav__mega-wrap { position: relative; }

.nav__mega-trigger { display: inline-flex; align-items: center; cursor: pointer; }

.nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(6px);
  width: max-content;
  max-width: min(90vw, 640px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
  z-index: var(--z-sticky, 100);
}

.nav__mega-wrap:hover .nav__mega,
.nav__mega-wrap:focus-within .nav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Two-pane split: a fixed-width category list on the left (always the same
   shape regardless of which categories have subcategories) and a panel on
   the right that swaps content per hovered category — sidesteps the ragged
   grid a flat multi-column layout gets when only some categories have
   children. */
.nav__mega--split { display: flex; align-items: stretch; }

.nav__mega-catlist {
  flex: 0 0 210px;
  background: var(--bg-muted);
  border-right: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Tall enough for a generous category count before it ever needs to
     scroll — 420px was clipping a perfectly normal 12-category list. */
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nav__mega-catitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav__mega-catitem .icon { width: 14px; height: 14px; flex-shrink: 0; opacity: .5; }
.nav__mega-catitem.is-active,
.nav__mega-catitem:hover {
  background: var(--bg-elevated);
  color: var(--accent);
}
.nav__mega-catitem.is-active .icon { opacity: 1; }

.nav__mega-panel {
  flex: 1 1 auto;
  min-width: 260px;
  padding: 20px 24px;
  position: relative;
}

.nav__mega-panel-group {
  display: none;
}
.nav__mega-panel-group.is-active {
  display: block;
  animation: nav-mega-fade 160ms var(--ease-out);
}
@keyframes nav-mega-fade { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }

.nav__mega-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
}
.nav__mega-list a {
  display: block;
  font-size: 13.5px;
  color: var(--fg-muted);
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav__mega-list a:hover { color: var(--accent); transform: translateX(2px); }

.nav__mega-browse-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-strong);
}
.nav__mega-browse-all:hover { color: var(--accent); }
.nav__mega-browse-all .icon { width: 14px; height: 14px; }

/* ── Hero slideshow, split layout (product image + text panel) ──────────
   This component is entirely inline-styled from tree_renderer.php (no CSS
   backed it at all), so it never adapted below the desktop 55%/45% split.
   Two tiers:
   - 641–900px (tablet): stack image-over-text and size the section to its
     own content. The image height and heading size both scale with
     viewport width (not a flat px cliff) so the image doesn't suddenly
     shrink to near-nothing while the heading stays desktop-sized.
   - ≤640px (phone): the stacked layout still reads heading-heavy at that
     width no matter how far the image/text are tuned, so it's swapped for
     a real swipeable card carousel instead (.hero-mobile-carousel, built
     alongside the original markup in tree_renderer.php) — the layout the
     split was already approximating once squeezed this narrow. */
@media (max-width: 900px) {
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) {
    height: auto !important;
  }
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) .ss-slide {
    position: relative !important;
    inset: auto !important;
  }
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) [style*="grid-template-columns:55% 45%"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) [style*="grid-template-columns:55% 45%"] > div:first-child {
    height: clamp(260px, 46vw, 400px) !important;
  }
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) .ss-caption-pos {
    position: relative !important;
    max-width: 100% !important;
    transform: none !important;
    inset: auto !important;
  }
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) .ss-caption-inner {
    padding: 28px 20px 36px !important;
  }
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) h2 {
    font-size: clamp(1.4rem, 4.6vw, 2.35rem) !important;
    line-height: 1.12 !important;
  }
}
@media (max-width: 640px) {
  /* Phone: hide the squeezed split layout entirely in favour of the card
     carousel rendered right after it. */
  .ss-wrap:has([style*="grid-template-columns:55% 45%"]) { display: none !important; }
}
.hero-mobile-carousel { display: none; }
@media (max-width: 640px) {
  .hero-mobile-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 16px 20px 24px;
    -webkit-overflow-scrolling: touch;
  }
  .hero-mc-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
    text-decoration: none;
    border: 1px solid var(--border, #e7e5e4);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-elevated, #fff);
  }
  .hero-mc-media {
    height: 46vw;
    min-height: 180px;
    max-height: 260px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-muted, #f5f5f4);
  }
  .hero-mc-body { padding: 14px 16px 18px; }
  .hero-mc-body h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--fg-strong, #0c0a09);
  }
  .hero-mc-price { font-size: 15px; font-weight: 800; color: var(--accent, #1a73e8); margin-bottom: 8px; }
  .hero-mc-cta { display: inline-flex; font-size: 12.5px; font-weight: 700; color: var(--fg-strong, #0c0a09); text-decoration: underline; text-underline-offset: 3px; }
}

/* Category showcase tiles (homepage "shop by category") — pointer-tracked
   tilt (JS sets --rx/--ry per mouse position) plus a spring-like overshoot
   easing, an accent bar that grows in from the left, image scale, and CTA
   arrow nudge. Several small motions together read as "this is alive," one
   alone reads as a static hover. */
.showcase-tile {
  --rx: 0deg;
  --ry: 0deg;
  perspective: 900px;
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.showcase-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.showcase-tile__inner {
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1);
  transform-style: preserve-3d;
}
/* Radial fade instead of a hard edge — most catalog photos are on a white
   background, and without this every tile would show a visible white
   rectangle sitting on the dark card. The mask fades that background to
   transparent toward the image's own edges while leaving the product
   itself (centred, inside the untouched middle of the mask) fully opaque. */
.showcase-tile__img {
  transition: transform 420ms cubic-bezier(.16,1,.3,1), filter 420ms var(--ease-out);
  /* The product itself needs to stay identifiable, but a catalog photo's
     white studio backdrop can't just fade at the very edge — inside that
     radius it'd still be 100% opaque white, which is the glow this was
     built to avoid. Flattening brightness alone read as washed-out/grey,
     so contrast and saturation are pushed up harder to compensate instead
     of just crushing brightness down. */
  filter: brightness(.92) contrast(1.2) saturate(1.1);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 98%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 98%);
}
.showcase-tile:hover .showcase-tile__img { filter: brightness(1) contrast(1.2) saturate(1.1); }
.showcase-tile:hover .showcase-tile__img {
  transform: scale(1.06);
}
.showcase-tile__heading {
  transition: color 220ms var(--ease-out);
}
.showcase-tile:hover .showcase-tile__heading {
  color: var(--accent);
}
.showcase-tile__cta {
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.showcase-tile:hover .showcase-tile__cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}
@media (prefers-reduced-motion: reduce) {
  .showcase-tile, .showcase-tile__inner, .showcase-tile__img { transition: none !important; transform: none !important; }
}

/* ── Category accordion (main categories) — narrow portrait panels that
   widen on hover, revealing the label with its own entrance motion. ── */
.cat-accordion {
  display: flex;
  height: 480px;
  gap: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.cat-accordion__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 60px;
  text-decoration: none;
  transition: flex-grow 550ms cubic-bezier(.16,1,.3,1);
  overflow: hidden;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: flex-grow 550ms cubic-bezier(.16,1,.3,1), outline-color 300ms var(--ease-out);
}
.cat-accordion__panel:hover,
.cat-accordion__panel:focus-visible {
  flex-grow: 3;
  outline-color: var(--accent);
}
.cat-accordion__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.08) 55%);
}
.cat-accordion__label {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 16px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.15;
  opacity: .8;
  transform: translateY(6px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), font-size 400ms var(--ease-out);
}
.cat-accordion__panel:hover .cat-accordion__label,
.cat-accordion__panel:focus-visible .cat-accordion__label {
  opacity: 1;
  transform: translateY(0);
  font-size: 22px;
}
@media (max-width: 768px) {
  .cat-accordion { flex-direction: column; height: auto; }
  /* Stacked panels are narrower proportionally than the desktop strip, so
     "cover" (fills the box, crops whatever doesn't fit) was cropping thin
     or oddly-proportioned product photos — a magazine shot square-on was
     often cropped down to an unrecognisable sliver. "contain" always shows
     the whole photo; the fill colour behind it keeps the letterboxed
     panel from looking like a blank gap. Also taller (150px vs 110px) so
     a contained photo has room to actually read at a glance. */
  .cat-accordion__panel {
    flex: none;
    height: 150px;
    /* Catalog photos are shot on a white/light-grey studio background, so
       a dark letterbox fill (visible on the left/right of anything
       narrower than the panel, now that it's "contain" instead of
       "cover") read as a jarring black bar instead of blending in.
       Layering a light gradient close to the photos' own backdrop BEHIND
       the photo (--panel-img, set alongside background-image in the PHP
       renderer) fills those gaps instead. The bottom scrim
       (.cat-accordion__scrim) still darkens toward the label regardless,
       so it stays legible either way. */
    background-image: var(--panel-img, none), linear-gradient(180deg, #fbfaf8 0%, #e9e7e2 100%) !important;
    background-size: contain, 100% 100% !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
  }
  .cat-accordion__panel:hover { flex-grow: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-accordion__panel, .cat-accordion__label { transition: none !important; }
}

/* Varied bento sizing for the "rest of the categories" grid below the
   accordion — every 5th tile spans 2 columns so the grid has rhythm
   instead of repeating identical boxes. The 4-column track count and
   210px row height are pushed inline from PHP and never adapted below
   desktop — at tablet/mobile widths that squeezed each tile to ~160px
   wide with a hard-capped row height, which is exactly what let the
   product photo (sized as a % of the tile) crowd out the heading and
   "Shop X" button next to it. Widening the row (minmax instead of a
   fixed px) and stepping the column count down more gradually, plus
   shrinking the tile's own text/image proportions on small screens,
   keeps the button clear of the image at every width. */
.showcase-grid--bento { grid-auto-flow: dense; grid-auto-rows: minmax(210px, auto) !important; }
@media (max-width: 1024px) {
  .showcase-grid--bento { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 640px) {
  .showcase-grid--bento { grid-template-columns: repeat(2,1fr) !important; }
  .showcase-grid--bento [style*="grid-column:span 2"] { grid-column: span 2; }
}
@media (max-width: 480px) {
  .showcase-grid--bento { grid-template-columns: 1fr !important; }
  /* Single-column track — a "wide" tile spanning 2 columns here would force
     an implicit 2nd column into existence just to satisfy the span, which
     is what silently reintroduced a lopsided 2-column layout under this
     breakpoint despite the rule above. */
  .showcase-grid--bento [style*="grid-column:span 2"] { grid-column: span 1 !important; }
}
@media (max-width: 640px) {
  .showcase-tile { padding: 16px !important; min-height: 180px !important; }
  .showcase-tile__img { max-width: 44% !important; max-height: 60% !important; }
  .showcase-tile__heading { font-size: 15px !important; }
  .showcase-tile__cta { padding: 7px 12px !important; font-size: 11px !important; margin-top: 10px !important; }
}

/* ── Shop accordion (mobile drawer) ──────────────────────────────────── */
.drawer__accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.drawer__accordion-trigger svg { transition: transform 200ms var(--ease-out); }
.drawer__accordion.is-open .drawer__accordion-trigger svg { transform: rotate(180deg); }

.drawer__accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease-out);
}
.drawer__accordion-inner { overflow: hidden; }
.drawer__accordion.is-open .drawer__accordion-panel { grid-template-rows: 1fr; }

.drawer__cat-group { padding: 4px 0; }
.drawer__sublink { display: block; padding: 8px 0 8px 16px; font-size: 14px; color: var(--fg-muted); }
.drawer__sublink--all { padding-left: 16px; font-weight: 700; color: var(--fg-strong); }
.drawer__sublink--heading { font-weight: 700; color: var(--fg-strong); padding-left: 16px; }
.drawer__sublink--child { padding-left: 30px; font-size: 13.5px; }

.drawer__head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

@media (max-width: 920px) {
  .nav__links, .nav__phone { display: none; }
  .nav__burger { display: inline-flex; }
  /* A custom logo height is set for the desktop bar and isn't guaranteed to
     fit the much narrower mobile bar alongside the CTA button + hamburger —
     cap it regardless of the store's configured height. */
  .nav__brand img { height: min(var(--logo-h, 32px), 60px); }
  /* The CTA button is redundant here — the drawer the hamburger opens already
     has the same "Get in touch" button in its footer — and on a narrow phone
     screen, keeping both it and a taller logo in one row is what pushes the
     hamburger button past the viewport edge, where it's clipped invisible by
     body's overflow-x:hidden rather than just becoming scrollable. */
  .nav__cta-group > a.btn { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer__head {
  padding: 14px var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.drawer__body {
  padding: var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.drawer__link {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  padding: var(--s-3) 0;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.drawer.is-open .drawer__link {
  opacity: 1;
  transform: translateX(0);
}

.drawer.is-open .drawer__link:nth-child(1) { transition-delay: 80ms; }
.drawer.is-open .drawer__link:nth-child(2) { transition-delay: 140ms; }
.drawer.is-open .drawer__link:nth-child(3) { transition-delay: 200ms; }
.drawer.is-open .drawer__link:nth-child(4) { transition-delay: 260ms; }
.drawer.is-open .drawer__link:nth-child(5) { transition-delay: 320ms; }

.drawer__foot {
  margin-top: auto;
  padding: var(--s-8) var(--s-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Lock body scroll when drawer is open */
body.no-scroll { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────────── */
/* 12. HERO                                                              */
/* ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-top: var(--s-16);
  padding-bottom: var(--s-24);
  overflow: hidden;
}

/* Subtle dot-grid texture — low opacity so it never competes */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  display: grid;
  grid-template-columns: 54% 1fr;
  gap: var(--s-16);
  align-items: center;
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-10); padding-inline: var(--s-6); }
  .hero { padding-top: var(--s-12); padding-bottom: var(--s-16); }
}

.hero__content { display: flex; flex-direction: column; gap: var(--s-5); }

/* H1 inside the hero gets weight 900 + tighter tracking */
.hero__content .display-xl {
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero__cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

.hero__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--accent-soft);
  box-shadow: 0 2px 4px rgba(28,25,23,0.04),
              0 16px 48px -8px rgba(28,25,23,0.16),
              0 40px 80px -20px rgba(28,25,23,0.08);
}

.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Left-edge fade: blends image into background. Add .no-fade class to disable. */
.hero__visual:not(.no-fade)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              var(--bg) 0%,
              color-mix(in srgb, var(--bg) 40%, transparent) 25%,
              transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Bottom vignette */
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              transparent 55%,
              rgba(28, 25, 23, 0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Hero floating stat chips */
.hero__chip {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(28,25,23,0.12), 0 1px 3px rgba(28,25,23,0.06);
  border: 1px solid rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: 0.01em;
}

.hero__chip--tl { top: 20px; left: 20px; }
.hero__chip--br {
  bottom: 20px; right: 20px;
  background: color-mix(in srgb, var(--secondary, var(--accent)) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--secondary-fg, var(--accent-fg));
  border-color: transparent;
}

.hero__chip-dot {
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-soft 2.4s var(--ease-in-out) infinite;
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  50%       { opacity: 0.8; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

/* ── Hero segmented search ──────────────────────────────── */

/* Micro-label row above the grid */
.hs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}

.hs-header__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.hs-header__count {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--fg-subtle);
}

.hs-header__count strong {
  color: var(--accent);
  font-weight: 700;
}

/* One flat surface — gap:1px on accent-colored parent = hairline dividers.
   Accent top stripe anchors the form visually to the brand. */
.hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 1px;
  background: var(--border-strong);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(28,25,23,0.08),
              0 1px 4px rgba(28,25,23,0.04);
}

/* Each filter column — min 56px so touch targets pass the 44px rule */
.hs-seg {
  background: var(--bg-elevated);
  padding: 14px var(--s-4) 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 56px;
  transition: background var(--t-fast) var(--ease-out);
  cursor: pointer;
}

.hs-seg:hover     { background: var(--bg-muted); }
.hs-seg:focus-within { background: var(--bg-muted); }

/* Active — inset top stripe makes the selected state unmistakable */
.hs-seg.is-active {
  background: var(--accent-soft);
  box-shadow: inset 0 2px 0 var(--accent);
}
.hs-seg.is-active:hover { background: var(--accent-soft); }

.hs-seg__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease-out);
}

.hs-seg.is-active .hs-seg__label { color: var(--accent); }

/* Borderless native select flush to the segment */
.hs-seg__sel {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  padding-right: 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  width: 100%;
  outline: none;
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-seg.is-active .hs-seg__sel {
  color: var(--accent-soft-fg);
  font-weight: 600;
}

/* Submit — uppercase, lifts on hover for tactile feel */
.hs-submit {
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  padding: 0 var(--s-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  min-width: 100px;
  transition: background var(--t-fast) var(--ease-out),
              transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}

.hs-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(28,25,23,0.16);
}

.hs-submit:active {
  background: var(--accent-active);
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.hs-submit.is-loading {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.hs-submit svg { flex-shrink: 0; }

/* Browse-all + phone — clean inline row with arrow link */
.hs-browse {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-subtle);
}

.hs-browse a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.hs-browse a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.hs-browse a svg { transition: transform var(--t-fast) var(--ease-out); }
.hs-browse a:hover svg { transform: translateX(2px); }

.hs-browse__sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border-strong);
}

/* ── Mobile: 2×2 grid, search spans full width ─────────── */
@media (max-width: 640px) {
  .hs-grid { grid-template-columns: 1fr 1fr; }
  .hs-submit {
    grid-column: 1 / -1;
    padding: var(--s-4) var(--s-6);
    font-size: 13px;
  }
  .hs-seg { padding: var(--s-3) var(--s-3) 10px; min-height: 52px; }
  .hs-header { margin-bottom: var(--s-1); }
}

/* ═══════════════════════════════════════════════════════
   HERO VARIANT: SLIDESHOW
   ═══════════════════════════════════════════════════════ */

.hero-ss { position: relative; }

.hero-ss__stage {
  position: relative;
  width: 100%;
  height: 68vh;
  min-height: 460px;
  max-height: 700px;
  overflow: hidden;
  background: var(--fg-strong);
}

.hero-ss__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
  will-change: opacity;
}

.hero-ss__slide.is-active { opacity: 1; }

/* Two-tone gradient overlay — bottom to top for text legibility */
.hero-ss__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 9, 11, 0.75) 0%,
    rgba(9, 9, 11, 0.18) 55%,
    rgba(9, 9, 11, 0.06) 100%
  );
  pointer-events: none;
}

/* Text anchored bottom-left */
.hero-ss__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--s-12);
}

.hero-ss__text-inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.hero-ss__eyebrow { color: rgba(250,250,249,0.65); }
.hero-ss__eyebrow::before { background: rgba(250,250,249,0.45); }

.hero-ss__h1 {
  color: #fafaf9;
  max-width: 18ch;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.97;
}

/* Navigation dots */
.hero-ss__dots {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--s-2);
  z-index: 2;
}

.hero-ss__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250,250,249,0.35);
  border: none;
  cursor: pointer;
  /* Invisible padding for 44px touch target */
  padding: 18px 8px;
  margin: -18px -8px;
  box-sizing: content-box;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.hero-ss__dot:hover    { background: rgba(250,250,249,0.65); }
.hero-ss__dot.is-active {
  background: #fafaf9;
  transform: scale(1.4);
}

/* Search section below the stage */
.hero-ss__search-bar {
  background: var(--bg);
  padding: var(--s-8) 0 var(--s-10);
  border-bottom: 1px solid var(--border);
}

.hero-ss__search-inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
}

@media (max-width: 640px) {
  .hero-ss__stage { height: 55vh; min-height: 360px; }
  .hero-ss__text-inner { padding-inline: var(--s-4); }
  .hero-ss__search-inner { padding-inline: var(--s-4); }
}

/* ═══════════════════════════════════════════════════════
   HERO VARIANT: CINEMATIC (CENTERED)
   ═══════════════════════════════════════════════════════ */

.hero-cx {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Video background — same treatment as bg image but rendered as <video> */
.hero-cx__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The parallax layer — slightly oversized so translateX/Y don't expose edges */
.hero-cx__bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  background-color: var(--fg-strong);
  will-change: transform;
}

.hero-cx__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 11, var(--cx-opacity, 0.45));
  pointer-events: none;
}

.hero-cx__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  padding-block: var(--s-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-10);
  text-align: center;
}

.hero-cx__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.hero-cx__eyebrow { color: rgba(250,250,249,0.65); }
.hero-cx__eyebrow::before { background: rgba(250,250,249,0.45); }

.hero-cx__h1 {
  color: #fafaf9;
  max-width: 20ch;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.97;
}

.hero-cx__lede {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: rgba(250,250,249,0.7);
  max-width: 52ch;
}

/* Search — white surface floating over dark bg */
.hero-cx__search {
  width: 100%;
  max-width: 680px;
}

/* Override hs-header text for dark hero */
.hero-cx__hs-header .hs-header__label  { color: rgba(250,250,249,0.5); }
.hero-cx__hs-header .hs-header__count  { color: rgba(250,250,249,0.4); }
.hero-cx__hs-header .hs-header__count strong { color: rgba(250,250,249,0.9); }

/* Override browse links for dark hero */
.hero-cx__browse                  { color: rgba(250,250,249,0.45); }
.hero-cx__browse a                { color: rgba(250,250,249,0.65); border-color: rgba(250,250,249,0.3); }
.hero-cx__browse a:hover          { color: #fafaf9; border-color: rgba(250,250,249,0.7); }
.hero-cx__browse .hs-browse__sep  { background: rgba(250,250,249,0.2); }

/* Animated scroll indicator at the bottom */
.hero-cx__scroll {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cx-scroll-bob 2.2s var(--ease-in-out) infinite;
}

.hero-cx__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(250,250,249,0.55), transparent);
}

@keyframes cx-scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

@media (max-width: 768px) {
  .hero-cx__inner  { padding-inline: var(--s-4); gap: var(--s-8); }
  .hero-cx__search { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────── */
/* Page hero (smaller, used on inventory/about/contact) */
.page-hero {
  padding-top: var(--s-12);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--border);
}

.page-hero__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 13. MARQUEE — trust strip                                             */
/* ───────────────────────────────────────────────────────────────────── */

/* ── Trust stats strip ──────────────────────────────────── */

.trust-strip {
  border-block: 1px solid var(--border);
  background: var(--bg-elevated);
}

.trust-strip__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-8);
  display: flex;
  align-items: stretch;
}

.trust-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--s-5) var(--s-4);
  text-align: center;
  transition: background var(--t-fast) var(--ease-out);
}

.trust-stat:hover { background: var(--bg-muted); }

.trust-stat__num {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 5px;
}

.trust-stat__num svg { color: var(--accent); width: 16px; height: 16px; }

.trust-stat__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Thin vertical dividers between stats */
.trust-strip__div {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  align-self: stretch;
  margin-block: var(--s-3);
}

@media (max-width: 640px) {
  .trust-strip__inner {
    flex-wrap: wrap;
    padding-inline: var(--s-4);
  }
  .trust-stat { flex: 1 1 50%; min-width: 0; padding: var(--s-5) var(--s-3); }
  .trust-strip__div { display: none; }
}

/* ── Makes marquee — refined, slower, from real stock ───── */

.marquee {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
  overflow: hidden;
  position: relative;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  width: max-content;
  /* --marquee-duration is set by the block renderer (slow=40s, normal=25s, fast=15s) */
  animation: marquee var(--marquee-duration, 25s) linear infinite;
}

.marquee__item {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}

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

/* Thin accent dot separator */
.marquee__sep {
  width: 4px;
  height: 4px;
  background: var(--accent);
  opacity: 0.4;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

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

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

/* Gradient fade at edges */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 1;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-muted), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg-muted), transparent); }

/* ───────────────────────────────────────────────────────────────────── */
/* 14. SECTION HEADERS                                                   */
/* ───────────────────────────────────────────────────────────────────── */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-10);
  max-width: var(--w-narrow);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}

.section-head--split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-12);
  align-items: end;
  max-width: 100%;
}

.section-head--split .section-head__title-block {
  display: flex; flex-direction: column; gap: var(--s-3);
}

@media (max-width: 768px) {
  .section-head--split { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 15. PRODUCT CARD (.v-card)                                            */
/* Single canonical card. Whole card is the link.                        */
/* ───────────────────────────────────────────────────────────────────── */

.v-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

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

@media (max-width: 600px) {
  .v-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Related-products carousel (Swiper — public_html/assets/vendor/swiper/).
   .v-card itself is untouched; Swiper's own CSS gives .swiper-slide
   flex-shrink:0, so the breakpoints in the inline init script are all
   that's needed for sizing. */
.v-carousel-wrap { position: relative; }
.v-carousel { padding: 4px 2px 8px; }
.v-carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(9,9,11,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fafaf9;
  border: 1px solid rgba(255,255,255,0.12);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
}
.v-carousel-arrow:hover  { background: rgba(9,9,11,0.80); }
.v-carousel-arrow:active { transform: translateY(-50%) scale(0.93); }
.v-carousel-arrow--prev { left: -8px; }
.v-carousel-arrow--next { right: -8px; }
.v-carousel-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }

.v-card {
  display: flex;
  flex-direction: column;
  background: var(--c-card-bg, var(--bg-elevated));
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              border-top-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  box-shadow: var(--shadow-xs);
}

.v-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  border-top-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

.v-card:active {
  transform: translateY(-1px) scale(0.998);
}

/* Media */
.v-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--bg-muted);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.v-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 500ms var(--ease-out);
}

.v-card:hover .v-card__media img {
  transform: scale(1.02);
}

.v-card__media--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Badges */
.v-card__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.v-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.v-badge--hot   { background: var(--accent); color: var(--accent-fg); }
.v-badge--new   { background: rgba(28, 25, 23, 0.92); color: #fafafa; }
.v-badge--sale  { background: var(--deal, var(--warning)); color: var(--deal-fg, #ffffff); }

/* Body */
.v-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  text-align: var(--c-card-align, left);
}

/* Year label — colour + size controlled by card style settings */
.v-card__meta {
  display: flex;
  align-items: center;
  justify-content: var(--c-card-justify, flex-start);
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-card-year, var(--secondary, var(--fg-subtle)));
  font-size: var(--c-card-year-size, 12px);
}

.v-card__sep { opacity: 0.4; }

.v-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-card-title, var(--fg-strong));
  line-height: 1.1;
  margin: 0;
}

.v-card__trim {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spec chips */
.v-card__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--c-card-justify, flex-start);
  gap: 14px;
  font-size: 13px;
  color: var(--c-card-spec, var(--fg-muted));
}

.v-card__specs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.v-card__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v-card__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.v-card__price-block {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.v-card__price-original {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-faint);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.v-card__price {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--c-card-price, var(--fg-strong));
  letter-spacing: -0.03em;
}

.v-card__price--sale { color: var(--deal, var(--warning)); }

.v-card__price-poa {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
}

.v-card__view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-card-view, var(--secondary, var(--accent)));
  white-space: nowrap;
  transition: gap var(--t-base) var(--ease-out);
}

.v-card:hover .v-card__view {
  gap: 8px;
}

.v-card__view svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sold state */
.v-card--sold .v-card__media { filter: grayscale(0.7) brightness(0.95); }
.v-card--sold::after {
  content: 'SOLD';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--error);
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 28px;
  border: 3px solid var(--error);
  border-radius: 0;
  pointer-events: none;
  z-index: 3;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 16. BENTO GRID — for featured products                                */
/* First card spans 2 columns on desktop                                 */
/* ───────────────────────────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

.bento > :nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.bento > :nth-child(1) .v-card__media { aspect-ratio: 16 / 11; }
.bento > :nth-child(1) .v-card__title { font-size: 28px; }
.bento > :nth-child(1) .v-card__price { font-size: 28px; }

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :nth-child(1) { grid-column: span 2; grid-row: auto; }
  .bento > :nth-child(1) .v-card__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento > :nth-child(1) { grid-column: auto; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 17. PROCESS — sticky scroll story                                     */
/* ───────────────────────────────────────────────────────────────────── */

.process {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-20);
  align-items: start;
}

.process__sticky {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.process__steps {
  display: flex;
  flex-direction: column;
}

/* Editorial steps — no boxes, just hairline dividers + ghost numbers */
.process__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
  background: transparent;
  border-radius: 0;
  align-items: start;
  transition: border-top-color var(--t-base) var(--ease-out);
}

.process__step:last-child {
  border-bottom: 1px solid var(--border);
}

.process__step:hover {
  border-top-color: var(--accent);
  box-shadow: none;
}

/* Ghost outline numbers — premium editorial technique */
.process__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: none;
  width: auto;
  height: auto;
  display: block;
  padding-top: 4px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-strong);
  transition: -webkit-text-stroke-color var(--t-base) var(--ease-out);
}

.process__step:hover .process__num {
  -webkit-text-stroke-color: var(--accent);
}

.process__step h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}

.process__step p {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin-top: 0;
}

@media (max-width: 920px) {
  .process { grid-template-columns: 1fr; gap: var(--s-10); }
  .process__sticky { position: static; }
  .process__step { grid-template-columns: 44px 1fr; gap: var(--s-4); }
  .process__num { font-size: 36px; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 18. PULL QUOTE                                                        */
/* ───────────────────────────────────────────────────────────────────── */

/* Left-aligned editorial pull quote — accent left bar, no centered cliché */
.quote {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-left: var(--s-8);
  border-left: 4px solid var(--accent);
}

/* Hide the big decorative " — the border does the job cleanly */
.quote__mark { display: none; }

.quote__body {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.28;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}

.quote__attr {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-direction: row;
}

.quote__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-strong);
}

.quote__role {
  font-size: 13px;
  color: var(--fg-muted);
}

.quote__attr::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fg-faint);
  flex-shrink: 0;
}

/* Review grid — unified surface via gap:1px, not separate cards */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s-10);
}

.review {
  padding: var(--s-5);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: none;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease-out);
}

.review:hover { background: var(--bg-muted); }

.review__stars {
  display: inline-flex;
  gap: 2px;
  color: #d97706;  /* amber — warm gold, not harsh yellow */
}

.review__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg);
  flex: 1;
}

.review__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: var(--s-1);
}

/* ───────────────────────────────────────────────────────────────────── */
/* 19. SPLIT FEATURE                                */
/* ───────────────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
}

.split__card {
  position: relative;
  padding: var(--s-10);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
}

.split__card--accent {
  background: var(--fg-strong);
  color: #fafafa;
}

.split__card--muted {
  background: var(--bg-muted);
  color: var(--fg-strong);
  border: 1px solid var(--border);
}

.split__card h3 {
  color: inherit;
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 8px;
}

.split__card p {
  color: inherit;
  opacity: 0.78;
  font-size: 15px;
  max-width: 28ch;
}

.split__card .btn {
  align-self: flex-start;
  margin-top: var(--s-6);
}

.split__card--accent .btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.split__card--accent .btn-primary:hover {
  background: var(--accent-hover);
}

/* Precise geometric corner — not a blob */
.split__card--accent::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 140px;
  height: 140px;
  background: var(--accent);
  opacity: 0.22;
  transform: rotate(12deg);
  pointer-events: none;
}

@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; }
  .split__card { padding: var(--s-8); min-height: 280px; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 20. CTA STRIP                                                         */
/* ───────────────────────────────────────────────────────────────────── */

.cta-strip {
  padding: var(--s-16) var(--s-8);
  background: var(--fg-strong);
  color: #fafafa;
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture — mirrors the hero for page-level coherence */
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(250,250,249,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

.cta-strip__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-12);
}

.cta-strip__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.cta-strip h2 {
  color: inherit;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cta-strip p {
  color: rgba(250, 250, 249, 0.65);
  font-size: 16px;
  max-width: 44ch;
}

.cta-strip__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex-shrink: 0;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .cta-strip__inner {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .cta-strip__actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .cta-strip { padding: var(--s-12) var(--s-6); }
}

/* (duplicate ::before removed — dot-grid version above is used) */

.cta-strip .btn-accent {
  font-size: 16px;
  padding: 18px 32px;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 21. FOOTER                                                            */
/* ───────────────────────────────────────────────────────────────────── */

.footer {
  padding-block: var(--s-16) var(--s-6);
  background: #0B2545;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-10);
}

@media (max-width: 920px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 540px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--s-8); }
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}

.footer__brand:hover { opacity: 0.75; }

.footer__logo {
  height: 75px;
  max-height: 85px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__tag {
  color: rgba(255,255,255,.55);
  font-size: 15px;
  max-width: 32ch;
  line-height: 1.5;
}

.footer__col h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--s-4);
}

.footer__col a, .footer__col li {
  color: rgba(255,255,255,.75);
  font-size: 14.5px;
  line-height: 2.0;
  transition: color var(--t-fast) var(--ease-out);
}

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

.footer__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.75);
  padding: 4px 0;
}

.footer__contact .icon {
  color: rgba(255,255,255,.4);
  width: 16px; height: 16px;
}

.footer__bottom {
  max-width: var(--w-content);
  margin: var(--s-12) auto 0;
  padding: var(--s-6) var(--s-6) 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 13px;
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 22. INVENTORY PAGE                                                    */
/* ───────────────────────────────────────────────────────────────────── */

/* Compact hero for interior pages */
.page-hero--sm { min-height: 0; padding: var(--s-12) 0 var(--s-8); }
.page-hero--sm h1 { font-size: clamp(28px, 4vw, 40px); }

/* ── Full-bleed sidebar + content layout ── */
.inv {
  display: grid;
  /* --sb-w is set/cleared by JS for collapse animation; default 300px */
  grid-template-columns: var(--sb-w, 300px) 1fr;
  /* NO align-items:start here — grid cells must stretch so sticky works */
  border-top: 1px solid var(--border);
  min-height: calc(100dvh - 180px); /* fill below hero */
  transition: grid-template-columns 320ms var(--ease-out);
}

/* Right sidebar — reorder items, flip border */
.inv--sb-right {
  grid-template-columns: 1fr var(--sb-w, 300px);
}
.inv--sb-right .inv__filters {
  order: 2;
  border-right: none;
  border-left: 1px solid var(--border);
}
.inv--sb-right .inv__main {
  order: 1;
}
/* Flip the collapse chevron for right sidebar */
.inv--sb-right .inv__sb-collapse svg {
  transform: rotate(180deg);
}
/* Flip the expand chevron for right sidebar */
.inv--sb-right .inv__sb-expand svg {
  transform: rotate(180deg);
}

/* Inside sidebar: column count driven by --inv-cols CSS variable (set from PHP/admin) */
@media (min-width: 921px) {
  .inv .v-grid {
    grid-template-columns: repeat(var(--inv-cols, 3), 1fr);
  }
}

@media (max-width: 920px) {
  .inv { grid-template-columns: 1fr; border-top: none; }
  .inv .v-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .inv .v-grid { grid-template-columns: 1fr; }
}

/* Mobile bar strip — shown only on small screens, sticky below nav */
.inv-mobile-strip {
  display: none;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: rgba(250,250,249,0.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  position: sticky;
  top: 72px;   /* matches nav height */
  z-index: var(--z-sticky);
}
@media (max-width: 920px) {
  .inv-mobile-strip { display: block; }
}

/* Backdrop overlay behind the sidebar drawer on mobile */
.inv-drawer-backdrop {
  display: none;
}
@media (max-width: 920px) {
  .inv-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: rgba(12, 10, 9, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease-out);
  }
  .inv-drawer-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Mobile bar (filter open + view toggle) ── */
.inv-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.inv-mobile-bar__right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Filter count badge */
.inv-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* ── Sidebar ── */
.inv__filters {
  /* Sticky full-height panel */
  position: sticky;
  top: 72px;           /* below nav */
  height: calc(100dvh - 72px);
  overflow-x: hidden;  /* clips content during collapse animation */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;

  /* Appearance: flush panel, right border only */
  background: var(--c-sb-bg, var(--bg-elevated));
  border-right: 1px solid var(--border);
  transition: border-color 320ms var(--ease-out);
}

/* When collapsed: hide the border so there's no 1px ghost line */
.inv--sb-collapsed .inv__filters {
  border-right-color: transparent;
}
.inv--sb-right.inv--sb-collapsed .inv__filters {
  border-left-color: transparent;
}

.inv__filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 2;
}

.inv__filters-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}

.inv__filters-close {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  color: var(--fg-muted);
}
.inv__filters-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* Desktop sidebar collapse button (shown in sidebar header) */
.inv__sb-collapse {
  /* Visible at every width — on mobile this is the drawer's close button, on
     desktop it collapses the sidebar to the floating dock. Same action, two
     icons (see below), swapped per breakpoint since neither reads right in
     the other context (a chevron doesn't say "close" in a fullscreen overlay,
     an X doesn't say "collapse to the edge" in an inline column). */
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  color: var(--fg-muted);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  flex-shrink: 0;
}
.inv__sb-collapse:hover {
  background: var(--bg-muted);
  color: var(--fg-strong);
}
.inv__sb-collapse svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.inv__sb-collapse .sb-collapse-icon--mobile { display: none; }
@media (max-width: 920px) {
  .inv__sb-collapse .sb-collapse-icon--desktop { display: none; }
  .inv__sb-collapse .sb-collapse-icon--mobile  { display: block; }
}

/* ─── Expand tab — visible in main area when sidebar is collapsed ─────── */
/*
 * Design notes:
 *  • background: --accent  →  impossible to miss, no animation needed to spot it
 *  • display: flex + width: fit-content  →  block-level so position:sticky fires
 *  • box-shadow ring uses rgba() not var(--accent)→transparent, which avoids
 *    the grey-fade interpolation bug in older Chrome/Edge builds
 */
.inv__sb-expand {
  display: none;                       /* shown via media query below */
  width: fit-content;
  position: sticky;
  top: calc(72px + var(--s-4));
  z-index: 5;
  align-self: start;

  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 14px;

  background: var(--accent);           /* solid accent — obvious at a glance */
  color: var(--accent-fg);
  border: none;

  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: var(--s-4);

  animation:
    sb-breathe 2.6s ease-in-out         infinite,
    sb-ring    2.2s ease-out      0.6s  infinite;

  transition: background var(--t-fast) var(--ease-out);
}

.inv__sb-expand:hover {
  background: var(--accent-hover);
  animation-play-state: paused;
}

.inv__sb-expand svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out);
}
.inv__sb-expand:hover svg {
  transform: translateX(3px);
}

/*
 * Breathe — 15% scale is obvious on any button size.
 * transform-origin defaults to center so the button expands
 * symmetrically — text moves with it, confirming it's "alive".
 */
@keyframes sb-breathe {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.15); }
}

/*
 * Sonar ring — accent-coloured halo expands outward and fades.
 *
 * color-mix(in srgb, var(--accent) 50%, transparent) produces
 * the accent at half opacity without any grey-shift. Supported in
 * Chrome 111+, Edge 111+, Firefox 113+ (all evergreen since 2023).
 *
 * Fallback for older browsers: the rgba(0,0,0,…) layer still fires,
 * giving a dark grey ring that's clearly visible on any background.
 */
@keyframes sb-ring {
  0% {
    box-shadow:
      0 0 0  0   rgba(0, 0, 0, 0.22),
      0 0 0  0   color-mix(in srgb, var(--accent) 55%, transparent);
  }
  70% {
    box-shadow:
      0 0 0 18px rgba(0, 0, 0, 0),
      0 0 0 22px color-mix(in srgb, var(--accent)  0%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 18px rgba(0, 0, 0, 0),
      0 0 0 22px color-mix(in srgb, var(--accent)  0%, transparent);
  }
}

/* Show expand button when sidebar is collapsed (desktop only) */
@media (min-width: 921px) {
  .inv--sb-collapsed .inv__sb-expand { display: flex; }
}

/* Right sidebar — button floats to the right of the content area */
.inv--sb-right .inv__sb-expand {
  margin-left: auto;
}

.inv__clear-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.inv__clear-link:hover { text-decoration: underline; }

.inv__filter-form {
  padding: 0 22px 24px;
}

/* Mobile: sidebar becomes full-screen slide-in drawer */
@media (max-width: 920px) {
  .inv__filters {
    position: fixed;
    inset: 0;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform 320ms var(--ease-out);
    overflow-y: auto;
    border-right: none;
  }
  .inv__filters.is-open {
    transform: translateX(0);
  }
  .inv__filters-close { display: flex; }
}

/* ── Collapsible filter sections ── */
.filter-section {
  border-bottom: 1px solid var(--border);
  padding: 2px 0;
}
.filter-section:last-of-type { border-bottom: none; }

.filter-section__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 12px 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: left;
}
.filter-section__head:hover { color: var(--fg-strong); }

.filter-chevron {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease-out);
  flex-shrink: 0;
}

.filter-section.is-closed .filter-chevron {
  transform: rotate(-90deg);
}

.filter-section__body {
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-section.is-closed .filter-section__body {
  display: none;
}

/* ── Individual filter group ── */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 150ms;
}

.filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ── Body type chips ── */
.body-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.body-chip-wrap input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.body-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1.5px solid var(--c-sb-btn, var(--border));
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-sb-btn, var(--fg-muted));
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  transition: all 150ms var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.body-chip:hover {
  border-color: var(--c-sb-hover, var(--fg-muted));
  color: var(--c-sb-hover, var(--fg-strong));
}
.body-chip--any { font-size: 12px; color: var(--fg-faint); }

.body-chip-wrap input[type="radio"]:checked + .body-chip {
  background: var(--c-sb-active, var(--fg-strong));
  border-color: var(--c-sb-active, var(--fg-strong));
  color: var(--bg);
  font-weight: 600;
}

/* ── Radio pills (transmission, fuel) ── */
.radio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.radio-pills > div {
  display: contents;
}

.radio-pills input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1.5px solid var(--c-sb-btn, var(--border));
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-sb-btn, var(--fg-muted));
  cursor: pointer;
  transition: all 150ms var(--ease-out);
  white-space: nowrap;
}
.radio-pill:hover {
  border-color: var(--c-sb-hover, var(--fg-muted));
  color: var(--c-sb-hover, var(--fg-strong));
}

.radio-pills input[type="radio"]:checked + .radio-pill {
  background: var(--c-sb-active, var(--fg-strong));
  border-color: var(--c-sb-active, var(--fg-strong));
  color: var(--bg);
  font-weight: 600;
}

/* ── Category filter (shop sidebar) — a flat radio list standing in for a
   real tree, so hierarchy has to be shown through weight/size/indent/colour
   instead of actual nesting. Previously reused .radio-pill (a bordered
   chip button) with just a 14px margin-left for children, so a subcategory
   looked like a same-weight, same-size sibling that happened to sit a
   little further right — not visibly "nested under" anything. Parent rows
   are now bolder and un-indented; child rows are smaller, muted, indented
   further, and get a small corner tick connecting them to their parent. */
.cat-filter-list { display: flex; flex-direction: column; align-items: stretch; gap: 1px; width: 100%; }
.cat-filter-row { position: relative; display: block; width: 100%; }
.cat-filter-row input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.cat-filter-label {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 4px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color 150ms var(--ease-out);
  color: var(--fg-muted);
}
.cat-filter-label--all,
.cat-filter-label--parent {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-strong);
}
.cat-filter-label--child {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--fg-muted);
}
/* Corner tick — a short line dropping from the parent row above and
   turning into the child row, the standard "nested under" visual cue. */
.cat-filter-row--child::before {
  content: '';
  position: absolute;
  left: -12px;
  top: -2px;
  width: 10px;
  height: 16px;
  border-left: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  border-radius: 0 0 0 4px;
}
.cat-filter-row--parent:not(:first-child) { margin-top: 4px; }
.cat-filter-label:hover { color: var(--fg-strong); }
.cat-filter-row input[type="radio"]:checked + .cat-filter-label {
  color: var(--c-sb-active, var(--accent));
  font-weight: 700;
}
.cat-filter-count {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--fg-faint);
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
}

/* ── Range pair (year / price inputs) ── */
.range-pair {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.range-pair .input { flex: 1; min-width: 0; }
.range-sep {
  font-size: 14px;
  color: var(--fg-faint);
  flex-shrink: 0;
}

/* ── Price preset buttons ── */
.price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.price-preset {
  padding: 5px 10px;
  background: none;
  border: 1.5px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}
.price-preset:hover { border-color: var(--fg-muted); color: var(--fg-strong); }
.price-preset.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-soft-fg);
  font-weight: 600;
}

/* ── Feature chips ── */
.feature-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feature-cat__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.feat-chip-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.feat-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1.5px solid var(--c-sb-btn, var(--border));
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-sb-btn, var(--fg-muted));
  cursor: pointer;
  transition: all 150ms;
}
.feat-chip:hover {
  border-color: var(--c-sb-hover, var(--fg-muted));
  color: var(--c-sb-hover, var(--fg-strong));
}

.feat-chip-wrap input[type="checkbox"]:checked + .feat-chip {
  background: var(--c-sb-active, var(--fg-strong));
  border-color: var(--c-sb-active, var(--fg-strong));
  color: var(--bg);
  font-weight: 600;
}

/* ── Active filter chips — removable pills at top of sidebar ── */
.filter-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 22px 6px;
}

.filter-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  background: var(--accent-soft);
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-soft-fg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms var(--ease-out),
              border-color 150ms var(--ease-out),
              color 150ms var(--ease-out);
  white-space: nowrap;
}

.filter-active-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.filter-active-chip__x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.55;
}

.filter-active-chip:hover .filter-active-chip__x {
  opacity: 1;
}

/* Active indicator dot on section headers */
.fs-active-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 5px;
  border-radius: 0 !important;
  flex-shrink: 0;
}

/* Count badges inside filter option chips */
.body-chip__count,
.radio-pill-count,
.feat-chip__count {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-faint);
  margin-left: 3px;
  flex-shrink: 0;
}

/* Count inherits inverted colour when parent chip is selected */
.body-chip-wrap input[type="radio"]:checked + .body-chip .body-chip__count,
.radio-pills input[type="radio"]:checked + .radio-pill .radio-pill-count,
.feat-chip-wrap input[type="checkbox"]:checked + .feat-chip .feat-chip__count {
  color: var(--bg);
  opacity: 0.65;
}

/* Apply arrow button (year / price range) */
.range-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  align-self: stretch;
  background: var(--fg-strong);
  color: var(--bg);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms var(--ease-out);
}

.range-apply:hover {
  background: var(--accent);
}

.range-apply svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Brief loading cursor while filter navigation fires */
body.is-filtering { cursor: progress; }

/* ── Main content area ── */
.inv__main {
  padding: var(--s-6) var(--s-8) var(--s-20);
  min-width: 0; /* prevent grid blowout */
}

.inv__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.inv__count {
  font-size: 14px;
  color: var(--fg-muted);
}
.inv__count strong {
  color: var(--fg-strong);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 15px;
}

.inv__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* View toggle */
.inv__view-toggle {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3px;
}

.inv__view-btn {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--fg-faint);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.inv__view-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
}
.inv__view-btn:hover { color: var(--fg-strong); }
.inv__view-btn.is-active {
  background: var(--fg-strong);
  color: var(--bg);
}

/* ── List view ── */
.v-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-list-item {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  transition: border-top-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.v-list-item:hover {
  border-top-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.v-list-item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-muted);
}
.v-list-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.v-list-item__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.v-list-item__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary, var(--fg-subtle));
}

.v-list-item__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  line-height: 1.1;
}

.v-list-item__trim {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
}

.v-list-item__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.v-list-item__specs span::before {
  content: '';
}

.v-list-item__price {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  border-left: 1px solid var(--border);
  gap: 8px;
  min-width: 160px;
}

.v-list-item__price-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--fg-strong);
}

.v-list-item__poa {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
}

.v-list-item__view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.v-list-item__view svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
  .v-list-item { grid-template-columns: 160px 1fr; }
  .v-list-item__price {
    grid-column: span 2;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .v-list-item { grid-template-columns: 120px 1fr; }
}

/* Empty state */
.empty {
  padding: var(--s-20) var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
  background: var(--bg-muted);
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
}

/* Pagination */
.pager {
  margin-top: var(--s-12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.pager a, .pager span {
  min-width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: all var(--t-fast) var(--ease-out);
}

.pager a:hover {
  border-color: var(--border-strong);
  color: var(--fg-strong);
}

.pager .is-current {
  background: var(--fg-strong);
  color: var(--bg);
  border-color: var(--fg-strong);
}

/* Infinite scroll loader — three bouncing dots */
.scroll-loader {
  display: none; /* shown via JS */
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: var(--s-8) 0;
}
.scroll-loader.is-visible { display: flex; }
.scroll-loader__dot {
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 0;
  animation: scroll-bounce 0.6s var(--ease-out) infinite alternate;
}
.scroll-loader__dot:nth-child(2) { animation-delay: 0.15s; }
.scroll-loader__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes scroll-bounce {
  from { transform: translateY(0);    opacity: 0.35; }
  to   { transform: translateY(-8px); opacity: 1; }
}

.scroll-sentinel {
  height: 1px;
  margin-top: var(--s-5);
}

/* End-of-results marker */
.scroll-end {
  display: none;
  text-align: center;
  padding: var(--s-8) 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.scroll-end.is-visible { display: block; }

/* ───────────────────────────────────────────────────────────────────── */
/* 23. PRODUCT DETAIL                                                    */
/* ───────────────────────────────────────────────────────────────────── */

.vd {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-10);
  margin-top: var(--s-8);
}

@media (max-width: 920px) {
  .vd { grid-template-columns: 1fr; gap: var(--s-8); }
}

.vd__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0; /* allow this grid column to shrink below its content's natural width so .vd__thumbs can scroll instead of overflowing the page */
}

.vd__hero-img {
  aspect-ratio: 16 / 11;
  background: var(--accent-soft);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  /* Reveals arrows on hover (desktop) */
  --arrow-op: 0;
}

.vd__hero-img:hover { --arrow-op: 1; }

.vd__hero-img img {
  width: 100%; height: 100%;
  object-fit: contain;   /* show full product, no cropping */
  background: var(--bg-muted);
  cursor: zoom-in;
  transition: opacity 120ms ease-out;
}

/* Prev / Next arrow buttons */
.vd__gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(9,9,11,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fafaf9;
  border: 1px solid rgba(255,255,255,0.12);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  /* Hidden on desktop until hover; always visible on touch */
  opacity: var(--arrow-op, 0);
}

.vd__gallery-arrow:hover  { background: rgba(9,9,11,0.80); }
.vd__gallery-arrow:active { transform: translateY(-50%) scale(0.93); }

.vd__gallery-arrow--prev { left: var(--s-3); }
.vd__gallery-arrow--next { right: var(--s-3); }

/* Touch devices: always show arrows */
@media (pointer: coarse) {
  .vd__hero-img { --arrow-op: 1; }
}

.vd__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px; /* keep scrollbar clear of thumb border */
}

.vd__thumb {
  flex: 0 0 auto;
  width: clamp(64px, 11vw, 88px);
  aspect-ratio: 4 / 3;
  background: var(--accent-soft);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.65;
  scroll-snap-align: start;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.vd__thumb.is-active { opacity: 1; }
.vd__thumb:hover { opacity: 1; transform: scale(1.02); }
.vd__thumb img { width: 100%; height: 100%; object-fit: cover; }

.vd__info {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

@media (max-width: 920px) {
  .vd__info { position: static; }
}

.vd__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.vd__price strong {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  line-height: 1;
}

.vd__price-monthly {
  font-size: 14px;
  color: var(--fg-muted);
}

.vd__quick-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg-muted);
  border-radius: 0;
  font-size: 14px;
}

.vd__quick-specs > div { display: flex; gap: 8px; align-items: center; }
.vd__quick-specs strong { color: var(--fg-strong); font-weight: 600; }
.vd__quick-specs .icon { color: var(--fg-subtle); }

.vd__cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.vd__cta-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

/* Full spec table — no boxy cards */
.vd-specs {
  margin-top: var(--s-16);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

.vd-specs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.vd-specs__row dt {
  color: var(--fg-muted);
  font-weight: 500;
}

.vd-specs__row dd {
  color: var(--fg-strong);
  font-weight: 600;
  text-align: right;
  margin: 0;
}

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

/* ─── VD action buttons ───────────────────────────────────────────── */
.vd__action-btns {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.vd__action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

@media (max-width: 400px) {
  .vd__action-row { grid-template-columns: 1fr; }
}

/* ─── VD banners ──────────────────────────────────────────────────── */
.vd__success-banner,
.vd__error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
  margin-bottom: var(--s-2);
}

.vd__success-banner {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}

.vd__error-banner {
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-color: color-mix(in srgb, var(--error) 30%, transparent);
  color: var(--error);
}

/* ─── VD share row ────────────────────────────────────────────────── */
.vd__share {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.vd__share-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  flex-shrink: 0;
}

.vd__share-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  font-size: 0;        /* kill any stray text */
  flex-shrink: 0;
}

.share-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.share-btn:active { transform: scale(0.94); }

/* Copied state for copy-link button */
.share-btn.copied {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.vd__share-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 var(--s-1);
  flex-shrink: 0;
}

/* ─── VD modal system ─────────────────────────────────────────────── */
.vd-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  align-items: flex-end;     /* panel slides up from bottom on mobile */
  justify-content: center;
}

.vd-modal.is-open {
  display: flex;
}

@media (min-width: 640px) {
  .vd-modal { align-items: center; }
}

.vd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.vd-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  width: 100%;
  max-width: 540px;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}

@media (max-width: 639px) {
  .vd-modal__panel {
    max-height: 94dvh;
    border-bottom: none;
  }
}

.vd-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 2;
}

.vd-modal__head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.015em;
  margin: 0;
}

.vd-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.vd-modal__close:hover {
  background: var(--bg-muted);
  color: var(--fg);
}

.vd-modal__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow-y: auto;
}

.vd-modal__product {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.vd-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.vd-modal__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

@media (max-width: 480px) {
  .vd-modal__grid2 { grid-template-columns: 1fr; }
}

/* Modal tab switcher */
.vd-modal__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--s-2);
}

.vd-modal__tab {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-muted);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.vd-modal__tab:last-child { border-right: none; }

.vd-modal__tab.is-active {
  background: var(--accent);
  color: var(--accent-fg);
}

.vd-modal__tab:hover:not(.is-active) {
  background: var(--bg-elevated);
  color: var(--fg);
}

/* Confirmation / notice banner inside modal */
.vd-modal__notice {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--fg);
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Success message inside modal */
.vd-modal__success {
  padding: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}

/* Error message inside modal */
.vd-modal__error {
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
}

/* Section divider label inside modal (Income / Expenses groups) */
.vd-modal__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-top: var(--s-2);
}

/* Live affordability indicator */
.vd-modal__affordability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--success) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 22%, transparent);
  gap: var(--s-3);
}

.vd-modal__afford-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-muted);
}

.vd-modal__afford-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--success);
}

.vd-modal__afford-value.is-negative {
  color: var(--error);
}

/* Print is handled by /product-brochure — no print styles needed in site.css */

/* ───────────────────────────────────────────────────────────────────── */
/* 24. ABOUT PAGE                                                        */
/* ───────────────────────────────────────────────────────────────────── */

.zigzag {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}

.zigzag__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}

.zigzag__row:nth-child(even) .zigzag__media { order: -1; }

.zigzag__media {
  aspect-ratio: 4 / 3;
  background: var(--accent-soft);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

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

.zigzag__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (max-width: 768px) {
  .zigzag__row { grid-template-columns: 1fr; gap: var(--s-6); }
  .zigzag__row:nth-child(even) .zigzag__media { order: 0; }
}

/* Team grid (no boxy cards) */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-8);
}

.team__member {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.team__avatar {
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
}

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

.team__avatar-fallback {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-soft-fg);
  letter-spacing: -0.02em;
}

.team__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}

.team__role {
  font-size: 13.5px;
  color: var(--fg-muted);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--secondary), var(--border));
}

.timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(var(--s-10) * -1 + 1px);
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--secondary);
  border: 2px solid var(--secondary);
}

.timeline__year {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary, var(--accent-soft-fg));
}

.timeline__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.015em;
}

.timeline__body {
  font-size: 15px;
  color: var(--fg-muted);
  max-width: 60ch;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 25. CONTACT PAGE                                                      */
/* ───────────────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-10);
  margin-top: var(--s-8);
}

@media (max-width: 920px) {
  .contact { grid-template-columns: 1fr; }
}

.contact__map {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact__form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (max-width: 768px) {
  .contact__map { aspect-ratio: 16 / 11; }
  .contact__form { padding: var(--s-6); }
}

.contact__info {
  margin-top: var(--s-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
}

.contact__info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--s-3);
  border-right: 1px solid var(--border);
}

.contact__info-item:last-child { border-right: none; }

.contact__info-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.contact__info-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-strong);
}

@media (max-width: 720px) {
  .contact__info { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .contact__info-item:nth-child(even) { border-right: none; }
}
@media (max-width: 420px) {
  .contact__info { grid-template-columns: 1fr; }
  .contact__info-item { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: var(--s-3); }
  .contact__info-item:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* 26. UTILITIES                                                         */
/* ───────────────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }


/* Sharp corners used to be a sitewide lock here. Real ecommerce UI reads
   friendlier with rounded cards/buttons/badges, so components below now
   set their own radius instead of a blanket zero. */

/* ══════════════════════════════════════════════════════════
   PRODUCT GALLERY LIGHTBOX
   ══════════════════════════════════════════════════════════ */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(9,9,11,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.lb-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lb-img-wrap {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img-wrap img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  transition: opacity 150ms ease-out;
}
.lb-img-wrap img.is-loading { opacity: 0; }

/* Close button */
.lb-close {
  position: fixed;
  top: 16px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fafafa;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms;
  line-height: 1;
  border-radius: 0 !important;
}
.lb-close:hover { background: rgba(255,255,255,0.22); }

/* Prev / Next */
.lb-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 64px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fafafa;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms, opacity 150ms;
  border-radius: 0 !important;
}
.lb-nav:hover { background: rgba(255,255,255,0.22); }
.lb-nav.is-hidden { opacity: 0; pointer-events: none; }
.lb-nav--prev { left: 16px; }
.lb-nav--next { right: 16px; }

/* Counter */
.lb-counter {
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}

/* Thumbnail strip in lightbox */
.lb-thumbs {
  position: fixed;
  bottom: 44px; left: 50%; transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: 90vw;
  overflow-x: auto;
  padding: 4px;
}
.lb-thumb {
  width: 52px; height: 38px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity 150ms, border-color 150ms;
  flex-shrink: 0;
}
.lb-thumb.is-active {
  opacity: 1;
  border-color: #fafafa;
}
.lb-thumb:hover { opacity: 0.8; }

/* ============================================================================
   Page Builder Blocks
   ============================================================================ */

/* Block zone */
.pb-zone {
  width: 100%;
}
.pb-empty-zone {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-8) var(--s-4);
}
.pb-empty-hint {
  border: 2px dashed var(--border);
  padding: var(--s-6);
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
}

/* Individual block wrapper */
.pb-block {
  position: relative;
}

/* Edit-mode block control bar — sits INSIDE the block at the top.
   No absolute positioning above the block boundary, so moving the mouse
   up to click the buttons never leaves the hover zone. */
.pb-block-bar {
  width: 100%;
  height: 32px;
  background: #1f6feb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 500;
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
  user-select: none;
  /* Drag handle cursor on the bar itself */
  cursor: grab;
}
.pb-block-bar:active { cursor: grabbing; }
.pb-block:hover .pb-block-bar,
.pb-block.pb-dragging .pb-block-bar {
  opacity: 1;
  pointer-events: all;
}
/* Drag-over target highlight */
.pb-block.pb-drag-over {
  outline: 2px dashed #1f6feb;
  outline-offset: 2px;
}
.pb-block-type {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pb-block-actions { display: flex; gap: 4px; }
.pb-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  border-radius: 3px;
  transition: background .12s;
}
.pb-btn:hover { background: rgba(255,255,255,.3); }
.pb-delete:hover { background: #da3633; }

/* Block content styles */
.pb-heading {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: var(--s-6) var(--s-4) var(--s-2);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}

.pb-paragraph {
  max-width: var(--w-prose);
  margin-inline: auto;
  padding: var(--s-4) var(--s-4);
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg);
}

.pb-image {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
}
.pb-image img {
  width: 100%;
  height: auto;
  display: block;
}
.pb-image figcaption {
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
  margin-top: var(--s-2);
}
.pb-image-placeholder {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: var(--s-10) var(--s-4);
  border: 2px dashed var(--border);
  text-align: center;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 14px;
}
.pb-image-placeholder:hover { border-color: #1f6feb; color: #1f6feb; }

.pb-button-wrap {
  display: flex;
  justify-content: center;
  padding: var(--s-6) var(--s-4);
}

.pb-divider {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
  border: none;
}
.pb-divider--line { border-top: 1px solid var(--border); }
.pb-divider--thick { border-top: 3px solid var(--border); }
.pb-divider--accent { border-top: 3px solid var(--accent); }

.pb-spacer--sm { height: var(--s-4); }
.pb-spacer--md { height: var(--s-10); }
.pb-spacer--lg { height: var(--s-16); }
.pb-spacer--xl { height: var(--s-24, 96px); }

/* Grid layouts */
.pb-grid {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
  display: grid;
  gap: var(--s-6);
}
.pb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pb-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .pb-grid-2, .pb-grid-3 { grid-template-columns: 1fr; }
}

.pb-col-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--s-2);
  color: var(--fg);
}
.pb-col-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg);
  margin: 0;
}

/* ── Flexible Columns block ───────────────────────────────────── */
.pb-columns {
  max-width: var(--w-content);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
  display: grid;
  gap: var(--s-6);
  /* grid-template-columns set inline from weights */
}
@media (max-width: 768px) {
  .pb-columns { grid-template-columns: 1fr !important; }
}
/* Width control shown in edit mode */
.pb-col-weight-wrap {
  margin-top: var(--s-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-col-weight-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1f6feb;
  font-weight: 700;
}
.pb-col-weight {
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #1f6feb;
  background: rgba(31,111,235,.08);
  color: #1f6feb;
  cursor: pointer;
}
.pb-col-add-bar {
  max-width: var(--w-content);
  margin: var(--s-2) auto var(--s-4);
  padding: 0 var(--s-4);
  display: flex;
  gap: 8px;
}

/* ── Section block ────────────────────────────────────────────── */
.pb-section {
  width: 100%;
}
.pb-section--sm { padding: var(--s-6)  var(--s-4); }
.pb-section--md { padding: var(--s-10) var(--s-4); }
.pb-section--lg { padding: var(--s-16) var(--s-4); }
.pb-section--xl { padding: var(--s-24, 96px) var(--s-4); }

.pb-section-inner {
  max-width: var(--w-content);
  margin: 0 auto;
}
.pb-section-heading {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: var(--s-3);
  color: inherit;
  line-height: 1.1;
}
.pb-section-sub {
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto var(--s-6);
  color: inherit;
  opacity: .85;
}
.pb-section-btn-wrap {
  margin-top: var(--s-4);
}
.pb-section-url-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: .5;
  cursor: text;
}
.pb-section-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed rgba(127,127,127,.3);
  font-size: 11px;
  font-weight: 600;
}
.pb-section-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  opacity: .7;
}
.pb-section-controls input[type=color] {
  width: 28px; height: 22px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}
.pb-section-controls select {
  font-size: 11px;
  padding: 2px 4px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(127,127,127,.4);
  color: inherit;
  cursor: pointer;
}

/* ── HTML / Embed block ───────────────────────────────────────── */
.pb-html {
  max-width: var(--w-content);
  margin: var(--s-4) auto;
  padding: 0 var(--s-4);
}
.pb-html-wrap {
  max-width: var(--w-content);
  margin: var(--s-4) auto;
  padding: 0 var(--s-4);
}
.pb-html-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 8px;
}
.pb-html-label {
  font-size: 11px;
  font-weight: 700;
  color: #1f6feb;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pb-html-editor {
  border: 1px solid #1f6feb;
  background: #0d1117;
  padding: 0;
  margin-bottom: 8px;
}
.pb-html-ta {
  width: 100%;
  min-height: 160px;
  background: #0d1117;
  color: #e6edf3;
  border: none;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  display: block;
}
.pb-html-actions {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: #161b22;
  border-top: 1px solid #30363d;
}
.pb-html-preview { line-height: 1.6; }
.pb-html-empty {
  color: #8b949e;
  font-size: 13px;
  padding: var(--s-4) 0;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   Page Builder section wrappers (edit mode only)
   ───────────────────────────────────────────────────────────── */
.pb-section-wrap {
  position: relative;
}

/* Drag handle bar
   Display is controlled by JavaScript (mouseenter/mouseleave with delay)
   NOT by CSS :hover — this prevents the bar from disappearing mid-move. */
.pb-section-wrap .pb-drag-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: #1f6feb;
  display: none;           /* JS sets to flex on hover */
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 999;
  cursor: grab;
  user-select: none;
  border-radius: 0;
}
.pb-section-wrap .pb-drag-bar:active { cursor: grabbing; }
/* Always show bar on selected section */
.pb-section-wrap.pb-selected .pb-drag-bar { display: flex !important; }
/* Dim section while dragging */
.pb-section-wrap.pb-dragging { opacity: .5; }

/* Highlight selected section */
.pb-section-wrap.pb-selected {
  outline: 2px solid #1f6feb;
  outline-offset: -2px;
}
.pb-section-wrap:hover:not(.pb-selected) {
  outline: 1px dashed #1f6feb88;
  outline-offset: -1px;
}

/* Drag bar internals */
.pb-drag-label {
  font-size: 11px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 6px;
}
.pb-drag-icon { opacity: .7; font-size: 13px; cursor: grab; }
.pb-drag-actions { display: flex; gap: 3px; }
.pb-drag-btn {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 7px;
  cursor: pointer; border-radius: 3px; transition: background .1s;
}
.pb-drag-btn:hover { background: rgba(255,255,255,.3); }
.pb-drag-btn.pb-del:hover { background: #da3633; }

/* Ghost/chosen states for SortableJS */
.pb-sortable-ghost   { opacity: .3; background: #1f6feb22 !important; }
.pb-sortable-chosen  { box-shadow: 0 0 0 2px #1f6feb; }
.pb-sortable-drag    { opacity: .9; }

/* ── Hero product slideshow overlay info ───────────────────────── */
.hero-ss__product-info {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 40px 48px; text-decoration: none; color: #fff;
  z-index: 3;
}
.hero-ss__product-inner {
  max-width: 480px;
}
.hero-ss__product-year {
  display: block; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.7); margin-bottom: 6px;
}
.hero-ss__product-name {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.1;
  color: #fff;
}
.hero-ss__product-variant {
  display: block; font-size: 14px; color: rgba(255,255,255,.75);
  margin-bottom: 12px;
}
.hero-ss__product-price {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700;
  color: #fff; margin-bottom: 20px; letter-spacing: -.01em;
}
.hero-ss__product-cta {
  display: inline-block; padding: 11px 28px;
  background: var(--accent, #1a73e8); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: .03em;
  transition: opacity .15s;
}
.hero-ss__product-info:hover .hero-ss__product-cta { opacity: .85; }

/* ── Hero browse link hover effects ───────────────────────────── */
@keyframes pulse-breathing {
  0%,100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(var(--accent-rgb,26,115,232),.4); }
  50%      { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(var(--accent-rgb,26,115,232),0); }
}
.hs-hover-pulse { animation: pulse-breathing 2.5s ease-in-out infinite; }
.hs-hover-lift  { transition: transform .2s; }
.hs-hover-lift:hover { transform: translateY(-2px); }
.hs-hover-glow:hover { box-shadow: 0 4px 16px rgba(0,0,0,.2); }

/* ── Block tree layout helpers ─────────────────────────────────── */
@media (max-width: 768px) {
  .pb-stack-mobile { grid-template-columns: 1fr !important; }
}
.pb-columns { width: 100%; }
.pb-tree-block {
  position: relative;
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition: outline-color .15s;
  /* Fill grid cell height so product showcase / column children display correctly */
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Direct children of .pb-tree-block fill it when it's a grid cell */
.pb-columns > .pb-tree-block { flex: 1; }
.pb-columns > .pb-tree-block > * { flex: 1; min-height: 0; }
body.pb-edit-active .pb-tree-block:hover {
  outline-color: rgba(59,130,246,.45);
}
.pb-tree-block--selected {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 0px;
}
body.pb-edit-active .pb-tree-block:hover > .pb-block-edit-label {
  display: flex;
}
.pb-block-edit-label {
  display: none;
  position: absolute;
  top: 0; left: 0;
  z-index: 9000;
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-bottom-right-radius: 4px;
  pointer-events: none;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pb-btn { display: inline-block; font-weight: 700; text-decoration: none; cursor: pointer; transition: opacity .15s, transform .15s; }
.pb-btn:hover { opacity: .85; }

/* ── Always-on button animation effects ────────────────────────────────── */

/* Breathing glow — gentle pulsing shadow, great for primary CTAs */
.btn-fx-breathe {
  animation: btn-breathe 2.8s ease-in-out infinite;
}
@keyframes btn-breathe {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-soft, rgba(26,115,232,.45)); }
  50%     { box-shadow: 0 0 0 10px transparent; }
}

/* Shimmer — light sweep across the face of the button */
.btn-fx-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-fx-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  animation: btn-shimmer 2.4s linear infinite;
}
@keyframes btn-shimmer {
  0%   { left: -75%; }
  100% { left: 125%; }
}

/* Subtle bounce — gentle up/down, keeps button lively without being annoying */
.btn-fx-bounce {
  animation: btn-bounce 1.6s ease-in-out infinite;
}
@keyframes btn-bounce {
  0%,100% { transform: translateY(0); }
  45%     { transform: translateY(-4px); }
}

/* ── Inventory floating dock — appears when sidebar is collapsed ─── */
.inv-float-dock {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fg, #0c0a09);
  color: var(--bg, #fafaf9);
  padding: 11px 20px;
  border-radius: 100px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.inv-float-dock__label { opacity: .85; }
.inv-float-dock__chips { font-size: 12px; opacity: .7; }
.inv-float-dock__btn {
  background: var(--accent, #1a73e8);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s;
}
.inv-float-dock__btn:hover { opacity: .85; }

/* The float dock is JS-shown (inline style) only after the sidebar is
   explicitly collapsed on desktop — but on mobile the sidebar starts closed
   by default (it's a fixed slide-out drawer there, see .inv__filters below),
   so the dock needs to be the visible entry point from first load, not only
   after some other action. !important is what it takes to win over that
   inline style at this specific breakpoint. */
@media (max-width: 920px) {
  .inv-float-dock { display: flex !important; }
}

/* Attention pulse — scale + glow combo, strongest draw for urgent CTAs */
.btn-fx-attention {
  animation: btn-attention 1.4s ease-in-out infinite;
}
@keyframes btn-attention {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0 var(--accent-soft, rgba(26,115,232,.5)); }
  50%     { transform: scale(1.04); box-shadow: 0 0 0 8px transparent; }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-fx-breathe, .btn-fx-bounce, .btn-fx-attention { animation: none; }
  .btn-fx-shimmer::after { animation: none; left: 125%; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* PRODUCT CARD HOVER ANIMATIONS — page-builder "Hover animation" setting */
/* (Products / Inventory Grid blocks). One effect class per card, chosen  */
/* by the store; .vcard-fx--tilt's transform is driven by JS (site      */
/* interactions script) since it tracks cursor position.                 */
/* ───────────────────────────────────────────────────────────────────── */
.vcard-fx {
  /* A card with zero rest-state shadow reads as a flat rectangle, not a
     tangible object — every hover effect below only ADDS depth on top of
     this, so without a base shadow the card looks inert until touched. */
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px -6px rgba(0,0,0,.10);
  transition: transform 340ms cubic-bezier(.22,1,.36,1), box-shadow 340ms cubic-bezier(.22,1,.36,1);
}

.vcard-fx--lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.28);
}

.vcard-fx--zoom img { transition: transform 520ms cubic-bezier(.22,1,.36,1); }
.vcard-fx--zoom:hover img { transform: scale(1.08); }
.vcard-fx--zoom:hover { box-shadow: 0 16px 32px -12px rgba(0,0,0,.2); }

.vcard-fx--glow:hover {
  box-shadow: 0 0 0 2px var(--accent, #1a73e8),
              0 20px 40px -14px color-mix(in srgb, var(--accent, #1a73e8) 45%, transparent);
}

/* Tilt: box-shadow eases via CSS; the rotate/scale transform itself is set
   directly by JS on mousemove for continuous cursor tracking, so its own
   transition is faster (120ms) to feel responsive rather than laggy. */
.vcard-fx--tilt { transition: transform 120ms ease-out, box-shadow 340ms ease-out; }
.vcard-fx--tilt:hover { box-shadow: 0 28px 56px -18px rgba(0,0,0,.32); }
.vcard-fx--tilt img { transition: transform 220ms ease-out; }

/* Touch devices have no cursor to hover with, so :hover rules (including the
   JS-driven tilt, which the site interactions script skips entirely there)
   never trigger — without this a card on a phone would feel completely
   inert. A tap-and-hold press gives real tactile feedback instead. */
@media (hover: none) {
  .vcard-fx:active { transform: scale(0.97); box-shadow: 0 10px 24px -10px rgba(0,0,0,.24); }
  .vcard-fx--zoom:active img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .vcard-fx,
  .vcard-fx--zoom img,
  .vcard-fx--tilt img { transition: none !important; }
  .vcard-fx--lift:hover,
  .vcard-fx--tilt { transform: none !important; }
}

/* Footer legal links */
.footer__legal a { color: inherit; opacity: .75; text-decoration: none; }
.footer__legal a:hover, .footer__legal a:focus-visible { opacity: 1; text-decoration: underline; }