/* ============================================================
   Smokey Design Tokens — v4.0 (Premium / Luxury)
   ------------------------------------------------------------
   Goal: cinematic dark aesthetic, strong hierarchy, gold accent.
   Philosophy:
     - Deeper blacks, softer surfaces → more depth
     - Gold as the true accent; red reserved for CTAs/alerts
     - Display serif for headlines (Fraunces) + Inter for UI
     - Generous spacing scale (8pt) with larger section rhythm
     - Real shadows + ambient glows for tactile surfaces
   ============================================================ */
:root {
  /* ---------- Brand ---------- */
  --color-primary: #E6003C;           /* CTA red, used sparingly */
  --color-primary-hover: #FF1A4F;
  --color-primary-active: #B3002E;
  --color-alert: #FF3D2E;

  /* Gold — the luxury accent (locked to brief spec #D4AF37) */
  --color-gold: #D4AF37;              /* brief-specified luxury gold */
  --color-gold-soft: #E8CB8C;
  --color-gold-muted: #8A7238;
  --color-gold-glow: rgba(212, 175, 55, 0.35);

  /* ---------- CTA contrast lock (WCAG AAA on gold) ----------
     These tokens are the single source of truth for gold-CTA
     text/backgrounds. Change here and every gold button updates. */
  --cta-gold-bg-start: #E8CB8C;
  --cta-gold-bg-mid:   #D4AF37;
  --cta-gold-bg-end:   #8A7238;
  --cta-gold-ink:      #0A0A0A;       /* locked ink — never #fff */
  --cta-gold-ink-soft: #1A1A1A;
  --cta-gold-border:   rgba(255,255,255,0.22);

  --color-open: #22C55E;

  /* ---------- Surfaces (layered depth) ---------- */
  --color-bg: #0A0A0A;                 /* brief-spec background */
  --color-bg-2: #0A0A0A;               /* section alt */
  --color-surface: #0E0E0E;
  --color-surface-2: #121212;
  --color-card: #161616;               /* elevated */
  --color-card-2: #1B1B1B;
  --color-divider: #1C1C1C;
  --color-border: #242424;
  --color-border-soft: rgba(255,255,255,0.06);
  --color-border-strong: rgba(255,255,255,0.12);
  --color-muted: #2A2A2A;

  /* ---------- Text ---------- */
  --color-text-1: #F5F3EE;             /* warm off-white */
  --color-text-2: #A8A29A;             /* warm muted */
  --color-text-3: #6B6760;
  --color-text-invert: #0A0A0A;

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Modular scale — fluid */
  --font-size-display: clamp(44px, 7vw, 96px);     /* hero H1 */
  --font-size-hero: clamp(40px, 6vw, 72px);
  --font-size-h1: clamp(36px, 5vw, 56px);
  --font-size-h2: clamp(28px, 3.5vw, 44px);
  --font-size-h3: clamp(22px, 2.4vw, 30px);
  --font-size-section: clamp(28px, 3.2vw, 40px);
  --font-size-eyebrow: 12px;
  --font-size-card: 17px;
  --font-size-body: 16px;
  --font-size-body-lg: 18px;
  --font-size-meta: 13px;
  --font-size-label: 11px;

  --line-height-tight: 1.05;
  --line-height-display: 1.08;
  --line-height-heading: 1.15;
  --line-height-body: 1.7;
  --line-height: var(--line-height-body);

  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.14em;

  /* ---------- Spacing (8pt system) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --space-section: 72px;                /* mobile default */
  --space-section-d: 120px;             /* desktop */
  --space-pad: 20px;
  --space-pad-d: 40px;
  --space-gap: 16px;
  --space-gap-d: 24px;
  --space-cta-gap: 12px;
  --space-text-block: 48px;
  --max-width: 1280px;
  --max-width-narrow: 920px;
  --max-width-text: 640px;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows & Glows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35);
  --shadow-xl: 0 40px 100px rgba(0,0,0,0.6), 0 10px 30px rgba(0,0,0,0.4);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-glow-gold: 0 0 0 1px rgba(212,178,106,0.4), 0 12px 40px rgba(212,178,106,0.18);
  --shadow-glow-red: 0 0 0 1px rgba(230,0,60,0.45), 0 12px 36px rgba(230,0,60,0.22);

  /* ---------- Gradients / Overlays (cinematic) ---------- */
  --grad-hero: linear-gradient(180deg,
      rgba(5,5,5,0.15) 0%,
      rgba(5,5,5,0.45) 40%,
      rgba(5,5,5,0.85) 80%,
      #050505 100%);
  --grad-image: linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,0.75) 100%);
  --grad-radial-spot: radial-gradient(ellipse at 50% 0%, rgba(212,178,106,0.08), transparent 60%);
  --grad-gold: linear-gradient(135deg, #E8CB8C 0%, #D4B26A 45%, #8A7238 100%);
  --grad-card: linear-gradient(180deg, #1B1B1B 0%, #101010 100%);
  --grad-divider-gold: linear-gradient(90deg, transparent, rgba(212,178,106,0.5), transparent);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-med: 320ms var(--ease-out);
  --transition-slow: 600ms var(--ease-out);

  /* ---------- Z-index (canonical tier scale) ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 900;          /* mobile sticky CTA bar */
  --z-header: 950;          /* site header / top bar */
  --z-drawer: 1000;         /* nav drawer, filters */
  --z-modal-backdrop: 1100;
  --z-modal: 1101;
  --z-age-gate: 2000;       /* age gate sits above everything normal */
  --z-toast: 2100;

  /* Legacy aliases (kept for backward compat — do not add new usages) */
  --z-bar: var(--z-header);
  --z-overlay: var(--z-modal-backdrop);

  /* ---------- Compatibility aliases ----------
     Mapped to the canonical tokens above so legacy or spec-style
     variable names resolve without forking the palette. Do NOT
     add new colors here — add them above and alias them down. */
  --color-text: var(--color-text-1);              /* alias */
  --color-accent: var(--color-gold);              /* brand accent = gold, NOT neon */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.4);   /* alias requested in brief */
  --shadow-glow-soft: var(--shadow-md);
}

@media (min-width: 768px) {
  :root {
    --space-section: var(--space-section-d);
    --space-pad: var(--space-pad-d);
    --space-gap: var(--space-gap-d);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms linear;
    --transition-med: 0ms linear;
    --transition-slow: 0ms linear;
  }
}
/* ============================================================
   Smokey Base — v4.0 (Premium)
   Sets global type, layout primitives, and utilities.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--color-bg);
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text-1);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  font-feature-settings: "ss01","cv11","kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient top gold hairline (luxury signature) — replaces red bar */
body::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--grad-divider-gold);
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-bar);
  opacity: 0.8;
  pointer-events: none;
}

/* Subtle ambient spotlight behind content for cinematic depth */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--grad-radial-spot);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

/* ---------- Selection ---------- */
::selection {
  background: var(--color-gold);
  color: var(--color-bg);
}

/* ---------- Headings (global luxury type) ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;              /* display serif looks rich at 500 */
  letter-spacing: var(--tracking-display);
  line-height: var(--line-height-heading);
  color: var(--color-text-1);
}
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-display); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p { max-width: 70ch; }

/* ---------- Section wrapper ---------- */
.section {
  position: relative;
  padding: var(--space-section) var(--space-pad);
  z-index: 1;
}
.section--surface { background: var(--color-surface); }
.section--bg-2    { background: var(--color-bg-2); }
.section--flush   { padding-top: 0; }
.section--tight   { padding-top: calc(var(--space-section) * 0.6); padding-bottom: calc(var(--space-section) * 0.6); }

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}
.section__inner--narrow { max-width: var(--max-width-narrow); }

/* Eyebrow + section headline system */
.section__eyebrow {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.section__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.8;
}

.section__headline {
  font-family: var(--font-display);
  font-size: var(--font-size-section);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-3);
  max-width: 24ch;
}

.section__lede {
  font-size: var(--font-size-body-lg);
  line-height: 1.6;
  color: var(--color-text-2);
  max-width: var(--max-width-text);
  margin-bottom: var(--space-7);
}

/* Gold underline accent for headlines that want emphasis */
.section__headline--accent::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin-top: var(--space-4);
  background: var(--grad-gold);
  border-radius: 2px;
}

/* ---------- Grid system ---------- */
.grid { display: grid; gap: var(--space-gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Horizontal scroll (premium snap) ---------- */
.hscroll {
  display: flex;
  gap: var(--space-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--space-pad);
  margin: 0 calc(var(--space-pad) * -1);
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ---------- Card base (elevated, glassy) ---------- */
.card {
  position: relative;
  background: var(--grad-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--shadow-inset);
  transition: transform var(--transition-med),
              box-shadow var(--transition-med),
              border-color var(--transition-med);
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg), var(--shadow-inset);
}

/* Gold hairline on top of card on hover */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: var(--grad-divider-gold);
  opacity: 0;
  transition: opacity var(--transition-med);
}
.card:hover::after { opacity: 1; }

/* ---------- Text utilities ---------- */
.text-1 { color: var(--color-text-1); }
.text-2 { color: var(--color-text-2); }
.text-3 { color: var(--color-text-3); }
.text-gold { color: var(--color-gold); }
.text-red { color: var(--color-primary); }
.text-center { text-align: center; }
.text-display { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
.text-eyebrow {
  font-size: var(--font-size-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold);
}
/* .font-800 dropped — Inter 800 is no longer in the font URL (see theme.liquid).
   If reintroduced, also re-add "800" to the Inter weights in the Google Fonts request. */
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }
.font-500 { font-weight: 500; }

/* ---------- A11y ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 10000;
  padding: 12px 16px;
  background: var(--color-primary);
  color: var(--color-text-1);
  clip: auto;
  width: auto; height: auto;
  overflow: visible; white-space: normal;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid var(--color-text-1);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Gold divider element */
.divider-gold {
  width: 100%;
  height: 1px;
  background: var(--grad-divider-gold);
  border: 0;
  margin: var(--space-6) 0;
  opacity: 0.5;
}

/* Responsive image component — lives here (not inline in the snippet)
   so it isn't duplicated on every image render. */
.responsive-image { width: 100%; height: auto; display: block; }
.responsive-image--placeholder {
  background: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Focus states (premium, gold) ---------- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
/* ============================================================
   Smokey Premium Overlay — v5.0 "Atelier"
   ------------------------------------------------------------
   Second-pass luxury polish layer.
   Applied ON TOP of base.css + any section-level <style> blocks.
   Goal: atmosphere, depth layering, cinematic hierarchy, grain.
   Load order: tokens.css -> base.css -> premium.css
   ============================================================ */

/* ============================================================
   0. ATMOSPHERE — film grain, ambient spotlight, section fades
   ------------------------------------------------------------
   A subtle static grain texture across the whole page gives the
   site film/photographic depth (the #1 trick luxury brands use).
   ============================================================ */
html { background: #030303; }
body { background: radial-gradient(ellipse at 50% -10%, #0C0A08 0%, #050505 35%, #030303 100%); }

/* Ambient film grain (SVG noise, GPU-friendly) */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.88  0 0 0 0 0.82  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  animation: grain-shift 8s steps(8) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -1%); }
  20%  { transform: translate(1%, 2%); }
  30%  { transform: translate(-1%, 1%); }
  40%  { transform: translate(2%, -2%); }
  50%  { transform: translate(-2%, 2%); }
  60%  { transform: translate(1%, -1%); }
  70%  { transform: translate(-1%, -2%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Replace default top bar with rich gold hairline */
body > ::before { /* no-op; handled by body::before grain now */ }

/* ============================================================
   1. SECTION TRANSITIONS — soft gradient fades between blocks
   ------------------------------------------------------------
   Kills the "hard cut" between bg-dark and surface sections.
   Creates visual continuity (the luxury flow).
   ============================================================ */
.section {
  position: relative;
  padding: clamp(72px, 10vw, 140px) var(--space-pad) !important;
}
.section--surface {
  background: linear-gradient(180deg, #080808 0%, #0C0C0C 50%, #080808 100%) !important;
}

/* Gradient fade INTO every surface section from the bg above */
.section--surface::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(3,3,3,1) 0%, rgba(12,12,12,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.section--surface::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg, rgba(3,3,3,1) 0%, rgba(12,12,12,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.section--surface > * { position: relative; z-index: 1; }

/* Every section gets a faint gold hairline divider at top (except hero next) */
.section + .section::before,
.section--surface + .section::before,
.section + .section--surface::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(200px, 30%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,178,106,0.3), transparent);
  opacity: 0.6;
  pointer-events: none;
}

/* Hero → first section: soft reveal */
.hero-wrapper + .section,
.hero + .section {
  position: relative;
}

/* ============================================================
   2. TYPOGRAPHY HIERARCHY — true editorial display system
   ============================================================ */
.section__headline {
  font-family: var(--font-display) !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 400 !important;                    /* Fraunces 400 looks richer than 500 at size */
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  margin-bottom: clamp(32px, 5vw, 64px) !important;
  max-width: 22ch;
  color: #F5F2EB;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  text-wrap: balance;
}

/* Italic stylistic accent available via .serif-italic on a <span> inside */
.section__headline em,
.section__headline i,
.section__headline .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold);
  letter-spacing: -0.04em;
}

/* Section intro pattern: eyebrow + headline + lede */
.section__inner > .section__headline:first-child::before,
.section__inner > h2.section__headline:first-of-type::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);
  margin-bottom: 20px;
  opacity: 0.7;
}

/* Body text readability */
p, .text-2 { line-height: 1.7; letter-spacing: 0.005em; }

/* ============================================================
   3. HERO — deepen the atmosphere
   ============================================================ */
.hero { min-height: 720px; }

/* Stronger cinematic gradient with warm tint */
.hero::after {
  background: rgba(0,0,0,0.55) !important;
}

/* Add cinematic scan line / film bar top + bottom */
.hero::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 15%, var(--color-gold) 50%, transparent 85%);
  opacity: 0.35;
  z-index: 3;
  pointer-events: none;
}

.hero__headline {
  font-family: var(--font-display) !important;
  font-size: clamp(48px, 8vw, 108px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8DFC8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 48px rgba(0,0,0,0.6));
}
.hero__headline::after {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  background: var(--color-gold);
  margin-top: clamp(16px, 2vw, 28px);
  opacity: 0.8;
  -webkit-text-fill-color: initial;
}

.hero__subtext {
  font-size: clamp(16px, 1.5vw, 20px) !important;
  line-height: 1.55 !important;
  color: #C8C3B8 !important;
  opacity: 1 !important;
  max-width: 48ch !important;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* ============================================================
   4. BUTTONS — tactile, glowy, refined
   ============================================================ */
.cta {
  position: relative;
  height: 56px !important;
  padding: 0 32px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  transition: transform 350ms var(--ease-out),
              box-shadow 450ms var(--ease-out),
              background 250ms var(--ease-out),
              border-color 250ms var(--ease-out) !important;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}

/* Primary — premium gold gradient w/ inner sheen + ambient glow
   Contrast locked via tokens in tokens.css. Never ship white text here. */
.cta--primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg,
      var(--cta-gold-bg-start) 0%,
      var(--cta-gold-bg-mid) 40%,
      var(--cta-gold-bg-end) 100%) !important;
  color: var(--cta-gold-ink) !important;
  border: 1px solid var(--cta-gold-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 0 0 1px rgba(212,175,55,0.3),
    0 10px 30px rgba(212,175,55,0.2),
    0 2px 6px rgba(0,0,0,0.4);
}
.cta--primary:hover {
  transform: translateY(-2px) scale(1.02);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #F0D99A 0%, #DFC05A 40%, #9A8240 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 0 0 1px rgba(212,175,55,0.5),
    0 18px 48px rgba(212,175,55,0.35),
    0 4px 10px rgba(0,0,0,0.5);
}
.cta--primary:active { transform: translateY(0) scale(0.99); }

/* Secondary — glass, gold on hover */
.cta--secondary {
  background: rgba(255,255,255,0.03) !important;
  color: #F5F2EB !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.cta--secondary:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--color-gold) !important;
  color: var(--color-gold-soft, #E8CB8C) !important;
  background: rgba(212,178,106,0.06) !important;
  box-shadow: 0 0 0 1px rgba(212,178,106,0.4), 0 14px 40px rgba(212,178,106,0.18);
}

/* Text — gold with animated underline */
.cta--text {
  color: var(--color-gold) !important;
  height: auto !important;
  padding: 10px 4px !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-transform: uppercase;
  letter-spacing: 0.15em !important;
  font-size: 12px !important;
  box-shadow: none !important;
  border: 0 !important;
}
.cta--text::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  height: 1px;
  background: var(--color-gold);
  transform-origin: left;
  transform: scaleX(0.3);
  opacity: 0.5;
  transition: transform 450ms var(--ease-out), opacity 250ms;
}
.cta--text:hover { color: #E8CB8C !important; transform: none; }
.cta--text:hover::after { transform: scaleX(1); opacity: 1; }

/* ============================================================
   5. CATEGORY GRID — true editorial cards
   ============================================================ */
.cat-grid { gap: clamp(16px, 2vw, 28px) !important; }

.cat-card {
  aspect-ratio: 4 / 5 !important;
  min-height: 280px !important;
  border-radius: 6px !important;          /* tight, editorial corners */
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  overflow: hidden;
  isolation: isolate;
  transition: transform 550ms var(--ease-out),
              box-shadow 450ms var(--ease-out),
              border-color 300ms !important;
}

.cat-card__img { position: absolute; inset: 0; z-index: 0; }
.cat-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.7) contrast(1.1) brightness(0.75);
  transition: transform 1200ms var(--ease-out), filter 600ms;
  transform: scale(1.02);
}

/* Triple-stop cinematic overlay so text always reads cleanly */
.cat-card__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.1) 0%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.85) 100%) !important;
  transition: background 400ms, opacity 400ms !important;
  z-index: 1;
}

.cat-card__content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: clamp(20px, 2.5vw, 32px) !important;
  gap: 4px;
}

.cat-card__name {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #F5F2EB !important;
}
.cat-card__count {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(212,178,106,0.85) !important;
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(212,178,106,0.25);
  display: inline-block;
  align-self: flex-start;
}

/* Gold thin frame reveal on hover */
.cat-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212,178,106,0);
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  transition: border-color 450ms, inset 450ms var(--ease-out);
}
.cat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212,178,106,0.35) !important;
  box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,178,106,0.3);
}
.cat-card:hover::before { border-color: rgba(212,178,106,0.5); inset: 12px; }
.cat-card:hover .cat-card__img img {
  transform: scale(1.1);
  filter: saturate(1) contrast(1.1) brightness(0.95);
}
.cat-card:hover .cat-card__overlay {
  background:
    radial-gradient(ellipse 90% 60% at 50% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.25) 45%,
      rgba(0,0,0,0.8) 100%) !important;
}

/* ============================================================
   6. PRODUCT CAROUSEL CARDS — significantly upgraded
   ------------------------------------------------------------
   Original cards were 160px wide, cramped, dark-on-dark images.
   Boost size, add gradient fills, proper hierarchy, gold accent.
   ============================================================ */
.prod-scroll { gap: clamp(14px, 1.8vw, 22px) !important; padding-top: 4px !important; padding-bottom: 12px !important; }

.prod-card {
  width: clamp(200px, 20vw, 260px) !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, #1A1815 0%, #0E0D0B 100%) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden;
  transition: transform 450ms var(--ease-out), box-shadow 450ms, border-color 300ms !important;
}
.prod-card:hover {
  transform: translateY(-6px) !important;
  background: linear-gradient(180deg, #201D18 0%, #110F0D 100%) !important;
  border-color: rgba(212,178,106,0.4) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,178,106,0.2), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.prod-card__img-wrap {
  position: relative;
  margin: 0 !important;
  padding: 20px 20px 10px !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212,178,106,0.08) 0%, transparent 65%),
    linear-gradient(180deg, #14120F 0%, #0B0A08 100%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prod-card__img-wrap img {
  border-radius: 6px !important;
  aspect-ratio: 4/5 !important;
  object-fit: cover !important;
  filter: contrast(1.05) saturate(0.95);
  transition: transform 900ms var(--ease-out), filter 450ms;
}
.prod-card:hover .prod-card__img-wrap img {
  transform: scale(1.06);
  filter: contrast(1.1) saturate(1.05);
}

/* Tag chip — proper premium treatment */
.prod-card__tag {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  padding: 5px 10px !important;
  background: rgba(5,5,5,0.7) !important;
  backdrop-filter: blur(8px);
  border-radius: 999px !important;
  border-width: 1px !important;
}

.prod-card__info {
  padding: 16px 20px 20px !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
.prod-card__name {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  color: #F5F2EB !important;
}
.prod-card__brand {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(212,178,106,0.85) !important;
  margin-top: 4px !important;
}
.prod-card__stock {
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  font-size: 11px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #8A867C !important;
  letter-spacing: 0.03em;
}
.prod-card__stock svg { color: #22C55E; flex-shrink: 0; }

/* Horizontal scroll "end" CTA block — proper card-like panel */
.prod-scroll__end {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 32px !important;
  min-width: 220px;
  flex-shrink: 0;
  border-left: 1px solid rgba(212,178,106,0.2);
  margin-left: 12px;
}

/* ============================================================
   7. LOCATION SECTION — heighten hierarchy
   ============================================================ */
#location-section .section__headline {
  max-width: 20ch;
}
.hours-table__row--today .hours-table__day,
.hours-table__row--today .hours-table__time {
  color: var(--color-gold) !important;
  font-weight: 600;
}

/* ============================================================
   8. HEADER — refined floating glass
   ============================================================ */
.site-header,
.header,
header[role="banner"] {
  background: rgba(3,3,3,0.75) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: background 300ms, backdrop-filter 300ms;
}
.site-header.is-scrolled,
header.is-scrolled {
  background: rgba(3,3,3,0.92) !important;
  box-shadow: 0 1px 0 rgba(212,178,106,0.15), 0 12px 40px rgba(0,0,0,0.4);
}

/* ============================================================
   9. FOOTER
   ============================================================ */
footer,
.site-footer,
.footer {
  position: relative;
  background: linear-gradient(180deg, #050505 0%, #000 100%) !important;
  padding-top: clamp(64px, 8vw, 96px) !important;
  padding-bottom: clamp(32px, 4vw, 48px) !important;
  border-top: 1px solid rgba(212,178,106,0.12) !important;
  color: #8A867C !important;
}
footer a,
.footer a { color: #A8A29A; transition: color 200ms; }
footer a:hover,
.footer a:hover { color: var(--color-gold); }

/* ============================================================
   10. STICKY MOBILE BAR — deeper premium glass
   ============================================================ */
.sticky-bar {
  background: rgba(3,3,3,0.94) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(212,178,106,0.2) !important;
  box-shadow: 0 -16px 40px rgba(0,0,0,0.6) !important;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
}
/* .sticky-bar .cta height was locked here at 48px; buttons.css section 11
   now owns the single source of truth (56px) with an !important rule
   that beats this in cascade order. Kept padding + font-size in the
   combined selector below where still useful, removed redundant height. */
.sticky-bar .cta { padding: 0 20px !important; font-size: 13px !important; }

/* ============================================================
   11. TRUST STRIP
   ============================================================ */
.trust-strip,
.trust-strip-section {
  background: linear-gradient(180deg, #070706 0%, #0A0A09 50%, #070706 100%) !important;
  border-top: 1px solid rgba(212,178,106,0.08);
  border-bottom: 1px solid rgba(212,178,106,0.08);
  padding-top: clamp(32px, 4vw, 48px) !important;
  padding-bottom: clamp(32px, 4vw, 48px) !important;
}
.trust-strip strong,
.trust-strip-section strong { color: var(--color-gold) !important; }

/* Section 12 (CTA SECTION base styling) consolidated into the
   later "FINAL CTA" block below — it declares the same selectors
   with a richer gradient and padding. The earlier version was
   fully overridden; removing it here eliminates the dupe. */

/* ============================================================
   13. REVIEWS CAROUSEL
   ============================================================ */
.reviews-carousel .card,
.review-card {
  padding: clamp(24px, 3vw, 36px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, #14120F 0%, #0B0A08 100%) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.reviews-carousel blockquote,
.review-card blockquote,
.review-card p {
  font-family: var(--font-display) !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.5 !important;
  letter-spacing: -0.01em;
  color: #D8D3C9 !important;
}

/* ============================================================
   14. IMAGE TREATMENT — global cinematic filter
   ============================================================ */
.hero__bg img,
.hero__bg-video,
.hero__bg-image img,
.cat-card__img img,
.prod-card__img-wrap img,
.photo-benefit img,
.location-section iframe,
.reviews-carousel img {
  transition: transform 900ms var(--ease-out), filter 600ms;
}

/* Photo benefit — add consistent cinematic wash */
.photo-benefit {
  position: relative;
}
.photo-benefit img {
  filter: saturate(0.85) contrast(1.08) brightness(0.9);
}
.photo-benefit::before {
  /* subtle gold light leak on benefit photos */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(212,178,106,0.06) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   15. SCROLL REVEAL — fade up on enter
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   16. MOBILE POLISH
   ============================================================ */
@media (max-width: 767px) {
  .section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .section__headline { font-size: clamp(30px, 8vw, 44px) !important; }
  .hero__headline { font-size: clamp(44px, 12vw, 72px) !important; }
  .hero__subtext { font-size: 15px !important; }

  .cat-card { min-height: 220px !important; }
  .cat-card__name { font-size: 20px !important; }

  .prod-card { width: 175px !important; }
  .prod-card__img-wrap { padding: 14px 14px 8px !important; }
  .prod-card__info { padding: 12px 14px 16px !important; }
  .prod-card__name { font-size: 15px !important; }

  .cta { height: 52px !important; padding: 0 24px !important; font-size: 13px !important; }
  .hero__ctas .cta { width: 100% !important; }

  /* Sticky bar: flex split only. Height is owned by buttons.css (56px).
     Older 46px value here was dead — buttons.css !important beat it. */
  .sticky-bar .cta { flex: 1; }
}

/* ============================================================
   17. FOCUS (a11y) — keep gold ring always visible
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-gold) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ============================================================
   18. BRIEF LOCK (v6) — implementing exact spec values
   ------------------------------------------------------------
   Overrides earlier passes to match the final agency brief:
   H1 60–72px · H2 32–40px · Body 16–18px
   BG #0A0A0A · Text #FFF/#BFBFBF · Gold #D4AF37
   Section padding 80–120px
   Business goal: MAX emphasis on "Get Directions"
   ============================================================ */

/* — Exact palette lock — */
:root {
  --brief-bg: #0A0A0A;
  --brief-text: #FFFFFF;
  --brief-text-soft: #BFBFBF;
  --brief-gold: #D4AF37;
}
body { background: #0A0A0A !important; }

/* — Typography scale lock (brief) — */
.hero__headline {
  font-size: clamp(48px, 7vw, 72px) !important;   /* brief: 60–72px */
  line-height: 1.02 !important;
}
.section__headline {
  font-size: clamp(30px, 3.8vw, 40px) !important; /* brief: 32–40px */
  line-height: 1.1 !important;
  margin-bottom: clamp(32px, 4vw, 56px) !important;
}
body, p, .text-2, .hero__subtext {
  font-size: clamp(16px, 1.2vw, 18px) !important; /* brief: 16–18px */
}

/* Body copy color lock */
.section p,
.section .text-2,
.hero__subtext {
  color: #BFBFBF !important;
}

/* — Section padding lock (brief: 80–120px) — */
.section {
  padding-top: clamp(80px, 9vw, 120px) !important;
  padding-bottom: clamp(80px, 9vw, 120px) !important;
}

/* ============================================================
   BUSINESS-GOAL EMPHASIS — "Get Directions" dominance
   ------------------------------------------------------------
   Goal is store visits, not sales. Any CTA that links to
   Google Maps or contains "Direction" text gets MAX visual
   weight so every page section funnels toward it.
   ============================================================ */

/* Target Directions CTAs specifically (all map links) */
.cta[href*="maps.app.goo.gl"],
.cta[href*="maps.google"],
.cta[href*="google.com/maps"],
.cta[data-analytics*="directions"] {
  height: 60px !important;
  padding: 0 36px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #E8CB8C 0%, #D4AF37 40%, #8A7238 100%) !important;
  color: #000 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 0 0 1px rgba(212,175,55,0.4),
    0 14px 36px rgba(212,175,55,0.25),
    0 2px 8px rgba(0,0,0,0.5) !important;
  animation: directions-pulse 3s ease-in-out infinite;
}

@keyframes directions-pulse {
  0%, 100% { box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 0 0 1px rgba(212,175,55,0.4),
    0 14px 36px rgba(212,175,55,0.25),
    0 2px 8px rgba(0,0,0,0.5); }
  50% { box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 0 0 1px rgba(232,203,140,0.55),
    0 20px 56px rgba(212,175,55,0.4),
    0 2px 8px rgba(0,0,0,0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .cta[href*="maps"],
  .cta[data-analytics*="directions"] { animation: none; }
}

/* ============================================================
   HERO (Brief section 1)
   ============================================================ */
.hero {
  height: 100vh !important;
  height: 100svh !important;
  min-height: 680px;
}
.hero__bg img,
.hero__bg-video,
.hero__bg-image img {
  filter: saturate(0.92) contrast(1.08) blur(0.5px) !important;
}
.hero::after {
  background: rgba(0,0,0,0.55) !important;
}
.hero__headline {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  text-shadow: 0 6px 40px rgba(0,0,0,0.6);
  font-weight: 700 !important;
  font-family: var(--font) !important;         /* bold sans per brief hierarchy */
  letter-spacing: -0.03em !important;
  max-width: 14ch;
}
.hero__headline::after {
  background: var(--brief-gold);
  width: 60px;
}
.hero__subtext {
  color: #BFBFBF !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-size: 13px !important;
  font-weight: 500;
}

/* ============================================================
   TRUST STRIP (Brief section 2)
   ============================================================ */
.trust-strip,
.trust-strip-section {
  padding-top: clamp(28px, 3vw, 40px) !important;
  padding-bottom: clamp(28px, 3vw, 40px) !important;
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid rgba(212,175,55,0.15) !important;
  border-bottom: 1px solid rgba(212,175,55,0.15) !important;
}

/* ============================================================
   CATEGORY CARDS (Brief section 3) — brief-spec 12-16px radius
   ============================================================ */
.cat-card {
  border-radius: 14px !important;     /* brief: 12–16px */
}
.cat-card::before { border-radius: 10px !important; }

/* ============================================================
   VISIT STORE SECTION (Brief section 4 — MOST IMPORTANT)
   ============================================================ */
#location-section {
  background: linear-gradient(180deg, #0A0A0A 0%, #0D0D0D 50%, #0A0A0A 100%) !important;
}
#location-section .section__headline {
  color: #FFFFFF !important;
  font-weight: 400 !important;
}
#location-section .section__headline::after {
  background: var(--brief-gold) !important;
  width: 80px !important;
  height: 2px !important;
}

/* Make the Get Directions button in this section IMPOSSIBLY prominent */
.loc-info__cta .cta--primary {
  height: 64px !important;
  padding: 0 40px !important;
  font-size: 15px !important;
}
.loc-info__cta { gap: 14px !important; }

/* ============================================================
   STORE GALLERY (Brief section 5 — photo-benefit role)
   ============================================================ */
.photo-benefit img {
  filter: saturate(0.85) contrast(1.1) brightness(0.9);
  transition: transform 900ms var(--ease-out), filter 450ms;
  border-radius: 10px;
}
.photo-benefit img:hover {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.1) brightness(0.95);
}

/* ============================================================
   BEST SELLERS (Brief section 6) — "AVAILABLE IN-STORE TODAY"
   ============================================================ */
.product-carousel-section .section__headline {
  position: relative;
}
.product-carousel-section .section__headline::before {
  content: 'Available In-Store Today';
  display: block;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brief-gold);
  margin-bottom: 16px;
  padding-bottom: 0;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

/* De-emphasize cart/price e-commerce cues (brief: "reduce e-commerce feel") */
.prod-card__stock { color: #8A867C !important; }
.prod-card__stock svg { color: var(--brief-gold) !important; }

/* ============================================================
   SEO TEXT BLOCK (Brief section 7 — local-seo-faq)
   ============================================================ */
.local-seo-faq-section,
.local-seo-faq {
  background: #0A0A0A !important;
}
.local-seo-faq-section .section__headline,
.local-seo-faq .section__headline {
  max-width: 24ch;
}
.local-seo-faq-section p,
.local-seo-faq p {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #BFBFBF !important;
  max-width: 68ch;
}

/* ============================================================
   CTA SECTION — consolidated ("Ready to Visit?" callout)
   Merged from the former section 12 + "Final CTA" block so
   .cta-section / .cta-block has a single source of truth.
   ============================================================ */
.cta-section,
.cta-block {
  position: relative !important;
  padding-top: clamp(100px, 12vw, 160px) !important;
  padding-bottom: clamp(100px, 12vw, 160px) !important;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(212,175,55,0.08) 0%, transparent 65%),
    linear-gradient(180deg, #0A0A0A 0%, #0D0B07 50%, #0A0A0A 100%) !important;
  border-top: 1px solid rgba(212,175,55,0.18) !important;
  border-bottom: 1px solid rgba(212,175,55,0.18) !important;
  text-align: center;
}
.cta-section .section__headline,
.cta-block .section__headline {
  font-size: clamp(40px, 6vw, 72px) !important;
  text-align: center;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  color: #FFFFFF !important;
  font-weight: 400 !important;
}
.cta-section .section__headline::after,
.cta-block .section__headline::after {
  margin-left: auto;
  margin-right: auto;
  width: 80px !important;
}

/* ============================================================
   STICKY MOBILE BAR — maximum Directions visibility
   ============================================================ */
.sticky-bar .cta[href*="maps"],
.sticky-bar .cta--primary {
  flex: 2 !important;                 /* Directions takes 2/3 of bar */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #E8CB8C 0%, #D4AF37 40%, #8A7238 100%) !important;
  color: #000 !important;
  font-weight: 700 !important;
}
.sticky-bar .cta--secondary { flex: 1 !important; }

/* ============================================================
   GOLD ACCENT LOCK — every gold touchpoint uses #D4AF37
   ============================================================ */
.section__eyebrow,
.text-gold,
.text-eyebrow,
.cat-card__count,
.prod-card__brand,
.hours-table__row--today .hours-table__day,
.hours-table__row--today .hours-table__time,
.loc-info__label,
.stars {
  color: #D4AF37 !important;
}

.section__eyebrow::before,
.section__headline--accent::after,
.hero__headline::after {
  background: linear-gradient(90deg, #D4AF37 0%, rgba(212,175,55,0.1) 100%) !important;
}

/* ============================================================
   REMOVE LOW-END FEEL — kill any lingering Shopify default
   ============================================================ */
.shopify-section--apps,
.shopify-section-header-sticky { background: transparent !important; }

/* Clean any stray default buttons */
button:not(.cta):not([class*="hamburger"]):not([class*="menu"]) {
  font-family: var(--font);
  letter-spacing: 0.02em;
}

/* ============================================================
   CTA READABILITY LOCK — WCAG AAA on gold, always
   ------------------------------------------------------------
   Defense against any cascade bug that tries to render white
   text on a gold CTA. Every descendant (icon, label, badge)
   inherits the locked ink color. Nothing inside a primary CTA
   may be lighter than --cta-gold-ink-soft.
   ============================================================ */
.cta--primary,
.cta--primary *,
.sticky-bar .cta--primary,
.sticky-bar .cta--primary *,
.sticky-cta .cta--primary,
.sticky-cta .cta--primary *,
a.cta--primary,
a.cta--primary:visited,
a.cta--primary:hover,
a.cta--primary:focus {
  color: var(--cta-gold-ink) !important;
  -webkit-text-fill-color: var(--cta-gold-ink) !important;
}
.cta--primary .cta__icon,
.cta--primary svg {
  stroke: var(--cta-gold-ink) !important;
  color: var(--cta-gold-ink) !important;
}
/* Sticky-bar primary uses the same locked gradient + ink */
.sticky-bar .cta[href*="maps"],
.sticky-bar .cta--primary,
.sticky-cta__primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg,
      var(--cta-gold-bg-start) 0%,
      var(--cta-gold-bg-mid) 40%,
      var(--cta-gold-bg-end) 100%) !important;
  color: var(--cta-gold-ink) !important;
  font-weight: 700 !important;
}
/* ============================================================
   Smokey — Unified Design System Bridge
   ------------------------------------------------------------
   Purpose: Harmonize the newly-added Claude local-SEO sections
   (hero-local, about-*, contact-*, local-content, trust-strip,
   map-directions, internal-links, faq-local, legal-content)
   with the existing premium dark/gold theme defined in
   tokens.css + premium.css.

   Load order: tokens.css -> base.css -> premium.css -> unified.css
   This file is an OVERRIDE layer. It never !important's unless
   strictly necessary to neutralize inline-scoped section styles.
   ============================================================ */

/* ---------- 1. Global background + base typography sync ---------- */
.hero-local,
.about-hero,
.about-content,
.about-trust,
.contact-hero,
.contact-info,
.contact-map,
.contact-actions,
.local-content,
.trust-strip,
.map-directions,
.internal-links,
.faq-local,
.legal-content {
  background: var(--color-bg) !important;
  color: var(--color-text-1) !important;
  font-family: var(--font) !important;
  padding-top: var(--space-section) !important;
  padding-bottom: var(--space-section) !important;
}

.hero-local h1,
.about-hero h1,
.contact-hero h1,
.local-content h1,
.about-content h2,
.about-trust h2,
.contact-info h2,
.local-content h2,
.internal-links h2,
.faq-local h2,
.legal-content h2,
.map-directions h2 {
  font-family: var(--font-display) !important;
  color: var(--color-text-1) !important;
  letter-spacing: var(--tracking-display);
  line-height: var(--line-height-display);
  font-weight: 600;
}

.hero-local h1,
.about-hero h1,
.contact-hero h1 {
  font-size: var(--font-size-hero) !important;
}

.about-content h2,
.contact-info h2,
.local-content h2,
.internal-links h2,
.faq-local h2,
.legal-content h2,
.map-directions h2,
.about-trust h2 {
  font-size: var(--font-size-h2) !important;
}

.hero-local p,
.about-hero p,
.contact-hero p,
.about-content p,
.contact-info p,
.local-content p,
.internal-links p,
.faq-local p,
.legal-content p {
  color: var(--color-text-2) !important;
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
}

/* Eyebrow labels */
.hero-local .eyebrow,
.about-hero .eyebrow,
.contact-hero .eyebrow,
.local-content .eyebrow {
  color: var(--color-gold) !important;
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* ---------- 2. Heroes — cinematic gradient ---------- */
.hero-local,
.about-hero,
.contact-hero {
  position: relative;
  overflow: hidden;
}

.hero-local::after,
.about-hero::after,
.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  pointer-events: none;
  z-index: 1;
}

.hero-local > *,
.about-hero > *,
.contact-hero > * {
  position: relative;
  z-index: 2;
}

/* Subtle gold spotlight over heroes */
.hero-local::before,
.about-hero::before,
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-radial-spot);
  pointer-events: none;
  z-index: 1;
}

/* ---------- 3. Unified Button System ---------- */
.hero-local .btn,
.about-hero .btn,
.contact-hero .btn,
.contact-actions .btn,
.map-directions .btn,
.internal-links .btn,
a.btn-primary,
a.btn-secondary,
.btn-directions,
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 14px 28px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
}

/* Primary = Get Directions (gold, premium) */
.hero-local .btn-primary,
.about-hero .btn-primary,
.contact-hero .btn-primary,
.contact-actions .btn-primary,
.map-directions .btn-primary,
.internal-links .btn-primary,
a.btn-primary,
.btn-directions {
  background: var(--grad-gold) !important;
  color: var(--color-text-invert) !important;
  box-shadow: var(--shadow-glow-gold);
}
.hero-local .btn-primary:hover,
.about-hero .btn-primary:hover,
.contact-hero .btn-primary:hover,
.contact-actions .btn-primary:hover,
.map-directions .btn-primary:hover,
a.btn-primary:hover,
.btn-directions:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--color-gold), 0 18px 48px rgba(212,175,55,0.28);
}

/* Secondary = Call Now (outlined, warm off-white) */
.hero-local .btn-secondary,
.about-hero .btn-secondary,
.contact-hero .btn-secondary,
.contact-actions .btn-secondary,
.map-directions .btn-secondary,
.internal-links .btn-secondary,
a.btn-secondary,
.btn-call {
  background: transparent !important;
  color: var(--color-text-1) !important;
  border-color: var(--color-border-strong) !important;
}
a.btn-secondary:hover,
.btn-call:hover,
.hero-local .btn-secondary:hover,
.about-hero .btn-secondary:hover,
.contact-hero .btn-secondary:hover,
.contact-actions .btn-secondary:hover,
.map-directions .btn-secondary:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
  transform: translateY(-1px);
}

/* ---------- 4. Cards & surfaces (trust, info, links, faq) ---------- */
.about-trust .card,
.about-trust .trust-card,
.contact-info .info-card,
.contact-info .card,
.contact-actions .action-card,
.local-content .content-card,
.internal-links .link-card,
.faq-local details,
.trust-strip .trust-item,
.map-directions .map-card,
.legal-content .notice {
  background: var(--grad-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--color-text-1) !important;
  box-shadow: var(--shadow-md);
  padding: var(--space-6) !important;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.about-trust .card:hover,
.about-trust .trust-card:hover,
.contact-info .info-card:hover,
.contact-actions .action-card:hover,
.internal-links .link-card:hover {
  border-color: var(--color-gold) !important;
  transform: translateY(-2px);
}

.about-trust h3,
.contact-info h3,
.contact-actions h3,
.internal-links h3,
.faq-local summary,
.legal-content h3 {
  font-family: var(--font-display) !important;
  font-size: var(--font-size-h3) !important;
  color: var(--color-text-1) !important;
  letter-spacing: var(--tracking-tight);
}

/* FAQ accordion polish */
.faq-local details {
  margin-bottom: var(--space-3);
  padding: var(--space-5) var(--space-6) !important;
}
.faq-local summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq-local summary::-webkit-details-marker { display: none; }
.faq-local summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--color-gold);
  font-size: 24px;
  font-weight: 300;
  transition: transform var(--transition-fast);
}
.faq-local details[open] summary::after {
  content: "−";
  transform: rotate(0);
}
.faq-local details > *:not(summary) {
  margin-top: var(--space-4);
  color: var(--color-text-2);
}

/* ---------- 5. Trust strip ---------- */
.trust-strip {
  padding-top: var(--space-6) !important;
  padding-bottom: var(--space-6) !important;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.trust-strip .trust-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-3) var(--space-4) !important;
  color: var(--color-text-2) !important;
}

/* ---------- 6. Contact info grid ---------- */
.contact-info .info-card .icon,
.contact-actions .action-card .icon,
.about-trust .card .icon {
  color: var(--color-gold) !important;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
}
.contact-info a,
.contact-actions a,
.map-directions a,
.legal-content a {
  color: var(--color-gold) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.contact-info a:hover,
.contact-actions a:hover,
.legal-content a:hover {
  border-bottom-color: var(--color-gold);
}

/* ---------- 7. Map ---------- */
.contact-map iframe,
.map-directions iframe {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border) !important;
  filter: grayscale(0.25) contrast(1.02);
}

/* ---------- 8. Legal content typography ---------- */
.legal-content {
  padding-left: var(--space-pad) !important;
  padding-right: var(--space-pad) !important;
}
.legal-content .container,
.legal-content .wrap {
  max-width: var(--max-width-text) !important;
}
.legal-content h2 { margin-top: var(--space-7) !important; }
.legal-content h3 { margin-top: var(--space-6) !important; color: var(--color-gold) !important; }
.legal-content p,
.legal-content li {
  color: var(--color-text-2) !important;
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
}
.legal-content .notice {
  border-left: 3px solid var(--color-gold) !important;
  background: var(--color-card-2) !important;
}

/* ---------- 9. Internal links block ---------- */
.internal-links .link-card {
  display: block;
  text-decoration: none;
}
.internal-links .link-card p {
  color: var(--color-text-2) !important;
}

/* ---------- 10. Local content body ---------- */
.local-content .content-card,
.local-content article {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.local-content h3 {
  color: var(--color-gold) !important;
  font-family: var(--font-display) !important;
}

/* ---------- 11. Age-gate alignment ---------- */
.smokey-age-gate {
  background: rgba(5,5,5,0.96) !important;
  backdrop-filter: blur(8px);
}
.smokey-age-gate .dialog,
.smokey-age-gate .modal,
.smokey-age-gate__panel {
  background: var(--grad-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: var(--color-text-1);
}
.smokey-age-gate button {
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
}
.smokey-age-gate .btn-primary {
  background: var(--grad-gold) !important;
  color: var(--color-text-invert) !important;
  border: none;
}
.smokey-age-gate .btn-secondary {
  background: transparent !important;
  color: var(--color-text-2) !important;
  border: 1px solid var(--color-border-strong) !important;
}

/* ---------- 12. Mobile sticky bar alignment ---------- */
.mobile-sticky-bar {
  background: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border) !important;
}
.mobile-sticky-bar a {
  min-height: 48px;
  font-weight: 600;
  border-radius: var(--radius-pill);
}
.mobile-sticky-bar .btn-primary {
  background: var(--grad-gold) !important;
  color: var(--color-text-invert) !important;
}
.mobile-sticky-bar .btn-secondary {
  background: transparent !important;
  color: var(--color-text-1) !important;
  border: 1px solid var(--color-border-strong) !important;
}

/* ---------- 13. Responsive tightening ---------- */
@media (max-width: 767px) {
  .hero-local,
  .about-hero,
  .contact-hero,
  .about-content,
  .about-trust,
  .contact-info,
  .contact-map,
  .contact-actions,
  .local-content,
  .map-directions,
  .internal-links,
  .faq-local,
  .legal-content {
    padding-left: var(--space-pad) !important;
    padding-right: var(--space-pad) !important;
  }
  .hero-local .btn,
  .about-hero .btn,
  .contact-hero .btn,
  .contact-actions .btn,
  a.btn-primary,
  a.btn-secondary,
  .btn-directions,
  .btn-call {
    width: 100%;
  }
  .contact-actions .action-card,
  .about-trust .card,
  .contact-info .info-card {
    padding: var(--space-5) !important;
  }
}

/* ---------- 14. Accessibility ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
details summary:focus-visible {
  outline: 2px solid var(--color-gold) !important;
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- 15. Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-local .btn,
  .about-hero .btn,
  .contact-hero .btn,
  .contact-actions .btn,
  a.btn-primary,
  a.btn-secondary,
  .btn-directions,
  .btn-call,
  .about-trust .card,
  .contact-info .info-card,
  .internal-links .link-card {
    transition: none !important;
    transform: none !important;
  }
}
/* ============================================================
   Smokey — Unified Button System
   ------------------------------------------------------------
   One global button system for the entire theme.
   Overrides BEM-style (.btn--primary), single-dash (.btn-primary),
   and section-specific button classes (msb__btn, smokey-age-gate__btn,
   password-page__btn, hero-local__cta, etc.) so every CTA looks
   identical regardless of where it appears.

   Load order: tokens.css -> base.css -> premium.css -> unified.css -> buttons.css
   ============================================================ */

:root {
  /* ----- Button size tokens (fixed heights — 8pt aligned) ----- */
  --btn-height-sm: 40px;
  --btn-height-md: 48px;
  --btn-height-lg: 56px;

  --btn-padding-sm: 0 16px;
  --btn-padding-md: 0 22px;
  --btn-padding-lg: 0 28px;

  --btn-font-sm: 13px;
  --btn-font-md: 15px;
  --btn-font-lg: 16px;

  --btn-icon-size: 18px;
  --btn-icon-gap: 10px;

  --btn-radius: 999px;              /* pill — premium */
  --btn-border-width: 1px;
  --btn-font-weight: 600;
  --btn-letter-spacing: 0.02em;
  --btn-transition: transform 180ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
                    box-shadow 180ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
                    background 180ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
                    color 180ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
                    border-color 180ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

/* ============================================================
   1. BASE BUTTON — every button shares this
   ============================================================ */
.btn,
.hero-local__cta,
.contact-hero__ctas .btn,
.contact-map__cta .btn,
.map-directions__ctas .btn,
.msb__btn,
.smokey-age-gate__btn,
.password-page__btn,
a.btn-primary,
a.btn-secondary,
a.btn-directions,
a.btn-call {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--btn-icon-gap) !important;
  height: var(--btn-height-md) !important;
  min-height: var(--btn-height-md) !important;
  padding: var(--btn-padding-md) !important;
  font-family: var(--font, system-ui, sans-serif) !important;
  font-size: var(--btn-font-md) !important;
  font-weight: var(--btn-font-weight) !important;
  letter-spacing: var(--btn-letter-spacing) !important;
  line-height: 1 !important;
  border-radius: var(--btn-radius) !important;
  border: var(--btn-border-width) solid transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  user-select: none;
  transition: var(--btn-transition) !important;
  -webkit-tap-highlight-color: transparent;
}

/* Button icon (SVG or <i>) inside any button */
.btn svg,
.hero-local__cta svg,
.msb__btn svg,
.smokey-age-gate__btn svg,
a.btn-primary svg,
a.btn-secondary svg,
.btn i,
a.btn-primary i,
a.btn-secondary i {
  width: var(--btn-icon-size) !important;
  height: var(--btn-icon-size) !important;
  flex-shrink: 0;
}

/* ============================================================
   2. SIZE MODIFIERS
   ============================================================ */
.btn-sm,
.btn--sm {
  height: var(--btn-height-sm) !important;
  min-height: var(--btn-height-sm) !important;
  padding: var(--btn-padding-sm) !important;
  font-size: var(--btn-font-sm) !important;
}

.btn-md,
.btn--md {
  height: var(--btn-height-md) !important;
  min-height: var(--btn-height-md) !important;
  padding: var(--btn-padding-md) !important;
  font-size: var(--btn-font-md) !important;
}

.btn-lg,
.btn--lg,
.hero-local .btn,
.about-hero .btn,
.contact-hero .btn,
.contact-actions .btn {
  height: var(--btn-height-lg) !important;
  min-height: var(--btn-height-lg) !important;
  padding: var(--btn-padding-lg) !important;
  font-size: var(--btn-font-lg) !important;
}

/* ============================================================
   3. PRIMARY — Get Directions (gold, premium, glowing)
   ============================================================ */
.btn-primary,
.btn--primary,
.btn-directions,
.hero-local .btn--primary,
.contact-hero__ctas .btn--primary,
.contact-map__cta .btn--primary,
.map-directions__ctas .btn--primary,
.msb__btn--directions,
.smokey-age-gate__btn--enter,
.password-page__btn {
  background: var(--grad-gold, linear-gradient(135deg, #E8CB8C 0%, #D4B26A 45%, #8A7238 100%)) !important;
  color: var(--color-text-invert, #0A0A0A) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow-gold, 0 0 0 1px rgba(212,178,106,0.4), 0 12px 40px rgba(212,178,106,0.18)) !important;
}
.btn-primary:hover,
.btn--primary:hover,
.btn-directions:hover,
.msb__btn--directions:hover,
.smokey-age-gate__btn--enter:hover,
.password-page__btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px var(--color-gold, #D4AF37), 0 18px 48px rgba(212,175,55,0.32) !important;
  filter: none !important;
}
.btn-primary:active,
.btn--primary:active,
.btn-directions:active,
.msb__btn--directions:active {
  transform: translateY(0) !important;
  box-shadow: 0 0 0 1px var(--color-gold, #D4AF37), 0 6px 16px rgba(212,175,55,0.25) !important;
}

/* ============================================================
   4. SECONDARY — Call Now (outlined, warm)
   ============================================================ */
.btn-secondary,
.btn--secondary,
.btn-call,
.hero-local .btn--secondary,
.contact-hero__ctas .btn--secondary,
.map-directions__ctas .btn--secondary,
.msb__btn--call,
.smokey-age-gate__btn--exit {
  background: transparent !important;
  color: var(--color-text-1, #F5F3EE) !important;
  border: var(--btn-border-width) solid var(--color-border-strong, rgba(255,255,255,0.16)) !important;
}
.btn-secondary:hover,
.btn--secondary:hover,
.btn-call:hover,
.msb__btn--call:hover,
.smokey-age-gate__btn--exit:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--color-gold, #D4AF37) !important;
  color: var(--color-gold, #D4AF37) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

/* ============================================================
   5. TERTIARY — text / inline link
   ============================================================ */
.btn-text,
.btn--text {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--color-gold, #D4AF37) !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
}
.btn-text:hover,
.btn--text:hover {
  border-bottom-color: var(--color-gold, #D4AF37) !important;
  transform: none !important;
}

/* ============================================================
   6. DISABLED
   ============================================================ */
.btn[disabled],
.btn[aria-disabled="true"],
.btn--disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   7. FOCUS (accessibility)
   ============================================================ */
.btn:focus-visible,
.hero-local__cta:focus-visible,
.msb__btn:focus-visible,
.smokey-age-gate__btn:focus-visible,
.password-page__btn:focus-visible,
a.btn-primary:focus-visible,
a.btn-secondary:focus-visible {
  outline: 2px solid var(--color-gold, #D4AF37) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   8. MOBILE — full-width stacking + min 48px tap target
   ============================================================ */
@media (max-width: 767px) {
  .btn,
  .hero-local__cta,
  .contact-hero__ctas .btn,
  .contact-map__cta .btn,
  .map-directions__ctas .btn,
  a.btn-primary,
  a.btn-secondary,
  a.btn-directions,
  a.btn-call {
    width: 100% !important;
    height: var(--btn-height-md) !important;
    min-height: var(--btn-height-md) !important;
  }
  /* Large hero buttons stay hero-sized on mobile too */
  .btn-lg,
  .btn--lg,
  .hero-local .btn,
  .about-hero .btn,
  .contact-hero .btn,
  .contact-actions .btn {
    height: 52px !important;
    min-height: 52px !important;
  }
  /* Exception: sticky bar buttons are side-by-side, half-width each */
  .msb__btn {
    width: auto !important;
    flex: 1;
  }
  /* Exception: text buttons are inline, never full-width */
  .btn-text,
  .btn--text {
    width: auto !important;
  }
  /* Space between stacked CTAs */
  .hero-local__cta + .hero-local__cta,
  .contact-hero__ctas .btn + .btn,
  .contact-actions .btn + .btn,
  .map-directions__ctas .btn + .btn {
    margin-top: 12px;
  }
}

/* ============================================================
   9. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .hero-local__cta,
  .msb__btn,
  .smokey-age-gate__btn,
  a.btn-primary,
  a.btn-secondary,
  .password-page__btn {
    transition: none !important;
    transform: none !important;
  }
  .btn:hover,
  a.btn-primary:hover,
  a.btn-secondary:hover {
    transform: none !important;
  }
}

/* ============================================================
   10. NEUTRALIZE LEGACY INLINE SECTION OVERRIDES
   Section files still ship their own .btn--primary background
   declarations; these rules (above) already use !important to
   beat them. This block kills residual filter: brightness() hover
   tricks that used to fight our glow.
   ============================================================ */
.hero-local .btn--primary:hover,
.msb__btn--directions:hover,
.smokey-age-gate__btn--enter:hover,
.password-page__btn:hover {
  filter: none !important;
}

/* ============================================================
   11. STICKY BAR HEIGHT FIX
   premium.css sets .sticky-bar .cta to 48px but the maps-href
   rule doesn't override height on .cta--primary, causing a
   60px Directions vs 48px Call mismatch. Lock both to 56px.
   ============================================================ */
.sticky-bar .cta,
.sticky-bar .cta--primary,
.sticky-bar .cta--secondary,
.sticky-bar .cta[href*="maps"],
.sticky-bar__inner .cta {
  height: 56px !important;
  min-height: 56px !important;
}

/* ============================================================
   Section inline styles (extracted from Liquid sections)
   ============================================================ */

/* --- about-content --- */
  .about-content { padding: 64px 16px; background: #fff; color: #1a1a1a; }
  .about-content__inner { max-width: 820px; margin: 0 auto; }
  .about-content__h2 { font-size: clamp(22px, 3.2vw, 28px); color: #1F3A5F; font-weight: 700; margin: 28px 0 12px; }
  .about-content__h2:first-child { margin-top: 0; }
  .about-content__p { font-size: 17px; line-height: 1.7; margin: 0 0 16px; color: #2a2a2a; }
  .about-content__p p { margin: 0 0 14px; }
  .about-content__stat { display: inline-block; margin: 16px 24px 16px 0; padding: 14px 18px; border-left: 3px solid #E2A233; background: #F6F2EA; border-radius: 4px; }
  .about-content__stat-value { font-size: 22px; font-weight: 700; color: #1F3A5F; }
  .about-content__stat-label { font-size: 13px; color: #555; text-transform: uppercase; letter-spacing: .06em; }

/* --- about-hero --- */
  .about-hero {
    position: relative;
    padding: 96px 16px;
    color: #fff;
    background-color: #0E1620;
    background-size: cover;
    background-position: center;
    {%- if section.settings.bg_image != blank -%}
    /* Fallback first — browsers that don't understand image-set() stop here */
    background-image:
      linear-gradient(rgba(14,22,32,.62), rgba(14,22,32,.62)),
      url({{ bg_url_desktop }});
    /* Modern browsers with image-set() support pick the right DPR variant */
    background-image:
      linear-gradient(rgba(14,22,32,.62), rgba(14,22,32,.62)),
      image-set(
        url({{ bg_url_mobile }}) 1x,
        url({{ bg_url_tablet }}) 1.5x,
        url({{ bg_url_desktop }}) 2x
      );
    {%- endif -%}
  }
  .about-hero__inner { max-width: 900px; margin: 0 auto; text-align: center; }
  .about-hero__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; opacity: .85; margin: 0 0 10px; color: var(--color-gold, #E2A233); }
  .about-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 5.2vw, 48px);
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: var(--line-height-heading);
    margin: 0 0 14px;
  }
  .about-hero__subtext { font-size: clamp(16px, 2.2vw, 19px); opacity: .95; max-width: 680px; margin: 0 auto; line-height: 1.55; color: var(--color-text-2, #fff); }
  @media (max-width: 640px) { .about-hero { padding: 64px 16px; } }

/* --- about-trust --- */
  .about-trust {
    padding: clamp(48px, 8vw, 80px) 16px;
    background: var(--color-bg, #060606);
  }
  .about-trust__inner { max-width: 1100px; margin: 0 auto; }

  .about-trust__h2 {
    font-family: var(--font-display, serif);
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 600;
    color: var(--color-text-1, #F5F0E8) !important;
    margin: 0 0 10px;
    text-align: center;
  }
  .about-trust__intro {
    text-align: center;
    font-size: 15px;
    color: var(--color-text-2, #A8A29A);
    max-width: 600px;
    margin: 0 auto 40px;
  }

  .about-trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }

  .about-trust__card {
    background: #fff;
    padding: 24px 22px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }
  .about-trust__icon { font-size: 28px; margin-bottom: 12px; display: block; }

  /* Force readable dark text — overrides any global h3 token colour */
  .about-trust__card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A !important;
    -webkit-text-fill-color: #0A0A0A !important;
    margin: 0 0 8px;
    line-height: 1.3;
  }
  .about-trust__card-body {
    font-size: 14px;
    line-height: 1.6;
    color: #3D3D3D !important;
    -webkit-text-fill-color: #3D3D3D !important;
    margin: 0;
  }

/* --- category-grid --- */
  .cat-grid { gap: var(--space-gap); }
  .cat-card {
    position: relative;
    display: block;
    aspect-ratio: 1;
    min-height: 140px;
    border: none;
  }
  .cat-card__img { position: absolute; inset: 0; }
  .cat-card__img img { width: 100%; height: 100%; object-fit: cover; }
  .cat-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,6,6,0.45);
    transition: background var(--transition-med);
  }
  .cat-card:hover .cat-card__overlay { background: rgba(6,6,6,0.25); }
  .cat-card:hover { border-bottom: 3px solid var(--color-primary); }

  /* Mobile tap feedback — fires on touch devices where :hover is flaky.
     Gives users a confirmation that the tap registered before navigation. */
  .cat-card {
    transition: transform 120ms var(--ease-out), box-shadow 180ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .cat-card:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-md);
  }
  .cat-card:active .cat-card__overlay {
    background: rgba(6,6,6,0.15);
  }
  @media (prefers-reduced-motion: reduce) {
    .cat-card, .cat-card:active { transition: none; transform: none; }
  }
  .cat-card__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
  }
  .cat-card__name { font-size: var(--font-size-card); font-weight: 600; }
  .cat-card__count { font-size: 12px; color: var(--color-text-2); margin-top: 2px; }

  @media (min-width: 768px) {
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-card { min-height: 200px; }
  }

/* --- contact-actions --- */
  .contact-actions { padding: 32px 16px 64px; background: #fff; }
  .contact-actions__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .contact-actions__card { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 12px; text-decoration: none; color: #fff; font-weight: 500; min-height: 88px; transition: transform .15s ease, box-shadow .15s ease; }
  .contact-actions__card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
  .contact-actions__card--call { background: #0E1620; }
  .contact-actions__card--directions { background: #E2A233; color: #0E1620; }
  .contact-actions__icon { font-size: 32px; line-height: 1; }
  .contact-actions__label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
  .contact-actions__value { font-size: 19px; font-weight: 700; margin-top: 2px; }
  @media (max-width: 640px) { .contact-actions__inner { grid-template-columns: 1fr; } }

/* --- contact-form --- */
  .contact-grid { display: flex; flex-direction: column; gap: 32px; }
  .contact__headline {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .contact__sub { color: var(--color-text-2); margin-bottom: 24px; }
  .contact__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }
  .contact__field--full { grid-column: 1 / -1; }
  .contact__label {
    display: block;
    font-size: var(--font-size-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-2);
    margin-bottom: 6px;
  }
  .contact__input {
    width: 100%;
    background: var(--color-muted);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 16px;
    padding: 12px 14px;
    font-family: inherit;
    transition: border-color var(--transition-fast);
  }
  .contact__input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  .contact__textarea { resize: vertical; min-height: 120px; }
  .contact__success {
    background: rgba(196,162,78,0.1);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    color: var(--color-gold);
  }
  .contact__errors {
    background: rgba(255,61,46,0.1);
    border: 1px solid var(--color-alert);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    color: var(--color-alert);
  }
  .contact-info { display: flex; flex-direction: column; gap: 24px; }
  .contact-info__block {
    padding: 20px;
    background: var(--color-muted);
    border-radius: var(--radius-md);
  }
  .contact-info__label {
    font-size: var(--font-size-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-2);
    margin-bottom: 8px;
  }
  .contact-info__link { color: var(--color-text); text-decoration: none; }
  .contact-info__link:hover { color: var(--color-primary); }

  @media (min-width: 768px) {
    .contact-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 48px;
      align-items: start;
    }
    .contact__fields { grid-template-columns: 1fr 1fr; }
  }

/* --- contact-hero --- */
  .contact-hero { padding: 72px 16px; background: {{ section.settings.bg | default: '#0E1620' }}; color: #fff; text-align: center; }
  .contact-hero__inner { max-width: 820px; margin: 0 auto; }
  .contact-hero__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: #E2A233; margin: 0 0 8px; }
  .contact-hero__h1 { font-size: clamp(30px, 4.8vw, 44px); margin: 0 0 14px; font-weight: 700; }
  .contact-hero__subtext { font-size: clamp(16px, 2.2vw, 18px); opacity: .92; margin: 0 auto 24px; max-width: 600px; line-height: 1.55; }
  .contact-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .contact-hero__ctas .cta { min-height: 48px; }

/* --- contact-info --- */
  .contact-info { padding: 48px 16px; background: #fff; }
  .contact-info__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
  .contact-info__h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: #1F3A5F; font-weight: 700; margin: 0 0 8px; }
  .contact-info__address { font-style: normal; line-height: 1.55; font-size: 16px; color: #222; margin: 0; }
  .contact-info__phone { font-size: 20px; font-weight: 700; color: #1F3A5F; text-decoration: none; }
  .contact-info__hours { list-style: none; padding: 0; margin: 0; font-size: 15px; color: #333; }
  .contact-info__hours li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #eee; }
  .contact-info__hours li span:first-child { color: #666; }

/* --- contact-map --- */
  .contact-map { padding: 48px 16px; background: var(--color-bg, #060606); }
  .contact-map__inner { max-width: 1100px; margin: 0 auto; }
  .contact-map__h2 { font-size: clamp(22px, 3vw, 28px); color: var(--color-text-1, #F5F0E8); margin: 0 0 16px; }
  .contact-map__frame iframe { border-radius: 10px; box-shadow: 0 2px 14px rgba(0,0,0,.08); display: block; }
  .contact-map__placeholder { padding: 80px 20px; text-align: center; background: #eee; border-radius: 10px; color: #666; }
  .contact-map__cta { margin-top: 16px; text-align: center; }
  @media (max-width: 640px) { .contact-map__frame iframe { height: 360px; } }

/* --- cta-section --- */
  .cta-section {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }
  .cta-section__bg {
    position: absolute;
    inset: 0;
  }
  .cta-section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cta-section__overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,6,6,0.75);
  }
  .cta-section__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .cta-section__headline {
    font-family: var(--font-display);
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: var(--line-height-heading);
    max-width: 560px;
  }
  .cta-section__sub {
    max-width: 400px;
    color: var(--color-text-2);
  }
  .cta-section__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
  }
  .cta-section__actions .cta { min-width: 160px; }
  .cta-section__trust { margin-top: 8px; }

/* --- faq-local --- */
  .faq-local { padding: 48px 16px; background: {{ section.settings.bg | default: '#FFFFFF' }}; }
  .faq-local__inner { max-width: 820px; margin: 0 auto; }
  .faq-local__h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 18px; color: #1F3A5F; }
  .faq-local__list { border-top: 1px solid #e5e5e5; }
  .faq-local__item { border-bottom: 1px solid #e5e5e5; padding: 4px 0; }
  .faq-local__q { font-weight: 600; font-size: 17px; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #1a1a1a; }
  .faq-local__q::-webkit-details-marker { display: none; }
  .faq-local__q::after { content: "+"; font-size: 22px; color: #1F3A5F; transition: transform .2s ease; }
  .faq-local__item[open] .faq-local__q::after { content: "−"; }
  .faq-local__a { padding: 0 0 16px; line-height: 1.6; color: #333; font-size: 16px; }
  .faq-local__a p { margin: 0 0 10px; }

/* --- footer --- */
  /* ── Footer shell ─────────────────────────────────────────────── */
  .footer {
    background: #0E0E0E;
    position: relative;
    overflow-x: hidden; /* prevent any column bleed */
  }
  .footer__inner {
    padding: 40px 20px 24px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* ── Mobile-first: single column ─────────────────────────────── */
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
  }

  /* Brand */
  .footer__logo { display: block; max-width: 160px; width: 100%; height: auto; margin-bottom: 8px; }
  .footer__tagline { color: var(--color-text-2); font-size: 13px; margin: 0; }

  /* Column labels */
  .footer__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-2);
    margin: 0 0 10px;
  }

  /* Visit Us */
  .footer__info .text-3 { margin: 0 0 4px; color: var(--color-text-2); font-size: 13px; line-height: 1.5; }
  .footer__link { color: var(--color-text-2); text-decoration: none; }
  .footer__link:hover { color: var(--color-primary); }
  .footer__visit-ctas { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
  .footer__visit-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-2);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms);
    min-height: 28px;
  }
  .footer__visit-cta:hover { color: var(--color-primary); }
  .footer__visit-cta--review:hover { color: var(--color-gold); }

  /* Hours — tabular layout, no overflow */
  .footer__hours .text-3 { font-size: 13px; color: var(--color-text-2); margin: 0; }
  .footer__hour-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0 10px;
    line-height: 1.9;
    font-size: 13px;
    color: var(--color-text-2);
  }
  .footer__hour-row span:last-child { text-align: left; }

  /* Social */
  .footer__social-links { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  .footer__social-link {
    color: var(--color-text-2);
    transition: color var(--transition-fast, 150ms);
    display: flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
  .footer__social-link:hover { color: var(--color-primary); }
  .footer__compliance { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .footer__badge-21 {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 12px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.4;
    flex-shrink: 0;
  }
  .footer__compliance .text-3 { font-size: 12px; color: var(--color-text-2); margin: 0; }

  /* ── Legal bar ────────────────────────────────────────────────── */
  .footer__legal {
    border-top: 1px solid var(--color-divider, rgba(255,255,255,0.08));
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer__legal p { color: var(--color-text-2); font-size: 12px; margin: 0; }
  .footer__legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
  .footer__legal-link { color: var(--color-text-2); text-decoration: none; font-size: 12px; }
  .footer__legal-link:hover { color: var(--color-text); }

  /* ── Accent bar ───────────────────────────────────────────────── */
  .footer__bar { height: 2px; background: var(--color-primary); }

  /* ── Tablet: 2-column grid ────────────────────────────────────── */
  @media (min-width: 540px) {
    .footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px 32px;
    }
    .footer__brand { grid-column: 1 / -1; } /* brand still spans full width */
    .footer__social { grid-column: 1 / -1; } /* social full width on tablet */
    .footer__legal {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }

  /* ── Desktop: 4-column grid ───────────────────────────────────── */
  @media (min-width: 900px) {
    .footer__inner { padding: 56px 40px 28px; }
    .footer__grid {
      grid-template-columns: 2fr 1.2fr 1.2fr 1fr;
      gap: 48px;
      align-items: start;
    }
    .footer__brand { grid-column: auto; }
    .footer__social { grid-column: auto; }
  }

/* --- header --- */
  /* ================================================================
     HEADER — Base (mobile-first)
     Pill is ALWAYS visible. Nav + Call button are desktop-only.
     ================================================================ */
  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 999);
    background: rgba(14,14,14,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-divider);
    height: 56px;
    padding-top: env(safe-area-inset-top);
    transition: box-shadow .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
  }
  body.scrolled .header {
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 10px;
  }
  .header__logo-img { height: 36px; width: auto; display: block; }
  .header__wordmark { font-size: 20px; font-weight: 800; color: var(--color-primary); }

  /* Nav — desktop only */
  .header__nav { display: none; flex: 1; gap: 24px; }
  .header__link {
    font-size: var(--font-size-meta);
    color: rgba(255,255,255,0.45);
    transition: color var(--transition-fast);
    letter-spacing: 0.03em;
  }
  .header__link:hover, .header__link.is-active { color: rgba(255,255,255,0.85); }

  /* Actions (Call button) — desktop only.
     Sizing matched to .header__status-cta so the two header CTAs
     ("Call Store" and "Get Directions") read as a visual pair.
     !important is required because premium.css .cta locks 56px !important. */
  .header__actions { display: none; align-items: center; gap: 14px; }
  .header__actions .cta {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
    border-radius: 999px !important;
  }

  /* ================================================================
     STATUS PILL — always visible, adapts per breakpoint
     ================================================================ */
  .header__status-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 4px 4px 4px 6px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    min-height: 44px;
    margin-left: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color .25s ease,
      background .25s ease,
      transform .25s ease,
      box-shadow .3s ease;
  }
  .header__status-group:focus-visible {
    outline: 2px solid #E8CB8C;
    outline-offset: 3px;
    border-color: rgba(212,175,55,0.3);
  }
  .header__status-group:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition-duration: .1s;
  }

  /* Children — visual only, clicks pass to <a> */
  .header__status-group .store-status {
    margin: 0; padding: 0; border: 0;
    pointer-events: none;
  }

  /* CTA button inside pill.
     Height + padding matched to .header__actions .cta ("Call Store")
     so the two buttons render at the same visible size. */
  .header__status-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #000;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
      linear-gradient(135deg, #E8CB8C 0%, #D4AF37 40%, #8A7238 100%);
    transition: background .25s ease;
  }
  .header__status-cta-icon { flex-shrink: 0; width: 13px; height: 13px; }
  .header__status-cta-label { /* text label, hidden on mobile */ }

  /* ── MOBILE DEFAULT (≤ 767px): compact pill ── */
  /* Hide countdown, show only gold "Directions" button */
  .header__status-group .store-status { display: none; }
  .header__status-cta-label { display: none; }
  .header__status-group::after { display: none; }
  .header__status-group { margin-left: auto; }

  /* Burger */
  .header__burger {
    width: 44px; height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    min-height: 44px;
    flex-shrink: 0;
  }
  .header__burger span { display: block; width: 20px; height: 2px; background: var(--color-text-1); transition: all var(--transition-fast); }

  /* ================================================================
     480px — Small mobile: tighter everything
     ================================================================ */
  @media (max-width: 480px) {
    .header { height: 52px; }
    .header__inner { padding: 0 10px; gap: 6px; }
    .header__logo-img { height: 30px; }
    .header__status-cta {
      height: 30px;
      padding: 0 10px;
      font-size: 10px;
    }
  }

  /* ================================================================
     768px+ — Desktop: full layout
     ================================================================ */
  @media (min-width: 768px) {
    .header { height: 64px; }
    .header__inner { padding: 0 var(--space-pad); gap: 20px; }
    .header__logo-img { height: 40px; }
    .header__nav { display: flex; }
    .header__actions { display: flex; }
    .header__burger { display: none; }

    /* Pill expands: show countdown + full label.
       Outer group padding tightened so container height = inner pill (40px). */
    .header__status-group {
      margin-left: 0;
      gap: 10px;
      padding: 0 0 0 14px;
      min-height: 40px;
    }
    .header__status-group .store-status { display: inline-flex; }
    .header__status-cta-label { display: inline; }
    /* Desktop: keep the inner gold pill at the base 40px so it matches
       .header__actions .cta ("Call Store"). Only pill padding changes. */
    .header__status-cta {
      height: 40px;
      padding: 0 18px;
      font-size: 11px;
    }

    /* Desktop hover effects */
    .header__status-group:hover {
      border-color: rgba(212,175,55,0.25);
      background: rgba(255,255,255,0.05);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(212,175,55,0.12);
    }
    .header__status-group:active {
      transform: translateY(0) scale(0.985);
    }
    .header__status-group:hover .header__status-cta {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%),
        linear-gradient(135deg, #F0D99A 0%, #DFC05A 40%, #9A8240 100%);
    }

    /* Tooltip */
    .header__status-group::after {
      display: block;
      content: 'Opens in Google Maps';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      font-weight: 400;
      letter-spacing: 0.03em;
      color: rgba(255,255,255,0.3);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .25s ease;
    }
    .header__status-group:hover::after { opacity: 1; }

    /* Dot glow on hover */
    .header__status-group:hover .store-status__dot.is-open {
      box-shadow: 0 0 10px rgba(52,211,153,0.8);
    }
    .header__status-group:hover .store-status__dot.is-closing {
      box-shadow: 0 0 10px rgba(251,146,60,0.8);
    }
  }

  /* ================================================================
     768px – 1199px — Tablet: tighten pill
     Both CTAs shrink together so they stay matched.
     ================================================================ */
  @media (min-width: 768px) and (max-width: 1199px) {
    .header__actions { gap: 10px; }
    .header__actions .cta { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; }
    .header__status-group {
      gap: 8px;
      padding: 0 0 0 12px;
      min-height: 36px;
    }
    .header__status-cta {
      height: 36px;
      padding: 0 14px;
      font-size: 11px;
    }
    .header__status-cta-icon { display: none; }
    .header__status-group::after { display: none; }
    .header__nav { gap: 18px; }
  }

  /* ================================================================
     768px – 900px — Small tablet: extra squeeze
     Both CTAs stay matched at the smaller size.
     ================================================================ */
  @media (min-width: 768px) and (max-width: 900px) {
    .header__actions .cta { height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: 11px !important; }
    .header__status-group {
      gap: 6px;
      padding: 0 0 0 10px;
      min-height: 32px;
    }
    .header__status-cta {
      height: 32px;
      padding: 0 12px;
      font-size: 11px;
      letter-spacing: 0.02em;
    }
    .header__status-group .store-status__detail { display: none; }
  }

  /* ================================================================
     MOBILE MENU (full CTA version with countdown)
     ================================================================ */
  .mobile-menu {
    position: fixed; inset: 0; z-index: 1001;
    background: var(--color-bg);
    transform: translateX(100%);
    transition: transform 300ms ease;
    padding: 80px var(--space-pad) var(--space-pad);
    padding-bottom: calc(var(--space-pad) + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
  }
  .mobile-menu.is-open { transform: translateX(0); }
  .mobile-menu__nav { display: flex; flex-direction: column; gap: 8px; }
  .mobile-menu__link {
    font-size: 24px;
    font-weight: 700;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-divider);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .mobile-menu__ctas {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-cta-gap);
  }
  .mobile-menu__ctas .cta { min-height: 48px; }
  .mobile-menu__info { margin-top: 16px; text-align: center; font-size: var(--font-size-meta); }
  .mobile-menu__info p { margin-bottom: 4px; }

  /* ================================================================
     DROPDOWN (desktop)
     ================================================================ */
  .header__dropdown-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  /* ── Button reset: make it look & sit exactly like an <a> nav link ── */
  .header__link--has-dropdown {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-meta);
    font-weight: inherit;
    letter-spacing: 0.03em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* identical colour to .header__link */
    color: rgba(255,255,255,0.45);
    transition: color var(--transition-fast);
  }
  .header__link--has-dropdown:hover,
  .header__link--has-dropdown.is-active,
  .header__dropdown-wrap:hover .header__link--has-dropdown {
    color: rgba(255,255,255,0.85);
  }
  .header__chevron {
    flex-shrink: 0;
    transition: transform 200ms ease;
  }
  .header__link--has-dropdown[aria-expanded="true"] .header__chevron {
    transform: rotate(180deg);
  }

  /* ── Invisible bridge: fills gap so mouse doesn't leave wrap ── */
  .header__dropdown-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    height: 14px; /* matches the gap below */
    background: transparent;
    pointer-events: auto;
  }

  .header__dropdown {
    position: absolute;
    top: calc(100% + 14px); /* gap matched to bridge height */
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 210px;
    background: rgba(16, 16, 16, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 6px;
    list-style: none;
    margin: 0;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  }
  /* Arrow pointer */
  .header__dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: rgba(16,16,16,0.98);
    border-left: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  /* Open state */
  .header__dropdown-wrap:hover .header__dropdown,
  .header__dropdown-wrap.is-open .header__dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .header__dropdown-item {
    display: block;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-radius: 8px;
    transition: background 150ms ease, color 150ms ease;
    white-space: nowrap;
  }
  .header__dropdown-item:hover,
  .header__dropdown-item.is-active {
    background: rgba(255,255,255,0.07);
    color: #fff;
  }
  .header__dropdown-item.is-active {
    color: var(--color-gold, #D4AF37);
  }

  /* ================================================================
     MOBILE MENU — accordion sub-items
     ================================================================ */
  .mobile-menu__group { border-bottom: 1px solid var(--color-divider); }
  .mobile-menu__link--parent {
    background: none;
    border: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: var(--font, inherit);
    color: var(--color-text-1);
    font-size: 24px;
    font-weight: 700;
    padding: 12px 0;
    min-height: 44px;
  }
  .mobile-menu__chevron {
    flex-shrink: 0;
    transition: transform 200ms ease;
  }
  .mobile-menu__link--parent[aria-expanded="true"] .mobile-menu__chevron {
    transform: rotate(180deg);
  }
  .mobile-menu__sub {
    padding: 4px 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-menu__sublink {
    display: block;
    padding: 10px 8px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: color 150ms ease, background 150ms ease;
  }
  .mobile-menu__sublink:hover,
  .mobile-menu__sublink.is-active {
    color: #fff;
    background: rgba(255,255,255,0.06);
  }

  /* ================================================================
     ACCESSIBILITY: Reduced motion
     ================================================================ */
  @media (prefers-reduced-motion: reduce) {
    .header__status-group,
    .header__status-group *,
    .header__status-group::after,
    .header__dropdown,
    .header__chevron,
    .mobile-menu__chevron {
      transition: none !important;
      animation: none !important;
    }
  }

/* --- hero-local --- */
  .hero-local { padding: 48px 16px; background: {{ section.settings.bg_color | default: '#0E1620' }}; color: {{ section.settings.text_color | default: '#FFFFFF' }}; }
  .hero-local__inner { max-width: 1100px; margin: 0 auto; text-align: {{ section.settings.alignment | default: 'left' }}; }
  .hero-local__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; opacity: .8; margin: 0 0 8px; }
  .hero-local__h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin: 0 0 12px; font-weight: 700; }
  .hero-local__subtext { font-size: clamp(16px, 2.2vw, 18px); max-width: 720px; margin: 0 0 24px; opacity: .92; }
  .hero-local__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero-local__ctas .cta { min-height: 48px; }
  @media (max-width: 640px) {
    .hero-local { padding: 32px 16px; text-align: center; }
    .hero-local__inner { text-align: center; }
    .hero-local__ctas { justify-content: center; }
  }

/* --- hero-section --- */
  .hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .hero__bg { position: absolute; inset: 0; z-index: 0; }
  .hero__bg-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero__bg-image {
    display: none;
    z-index: 0;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1;
    pointer-events: none;
  }
  .hero__content {
    position: relative;
    z-index: 2;
    padding: 0 var(--space-pad) 40px;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
  }
  .hero__logo { margin-bottom: 16px; }
  .hero__headline {
    font-size: var(--font-size-hero);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .hero__subtext {
    font-size: var(--font-size-body);
    color: var(--color-text-2);
    margin-bottom: 8px;
    max-width: 480px;
  }
  .hero__trust { margin-bottom: 16px; }
  .hero__trust .stars__count { color: var(--color-gold); }
  .hero__ctas {
    display: flex;
    flex-direction: column;
    gap: var(--space-cta-gap);
    max-width: 400px;
  }

  @media (max-width: 768px) {
    .hero__bg-video {
      display: none;
    }

    .hero[data-mobile-video="enabled"] .hero__bg-video {
      display: block;
    }

    .hero__bg-image {
      display: block;
      position: absolute;
      inset: 0;
    }

    .hero[data-mobile-video="enabled"] .hero__bg-image {
      display: none;
    }

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

    .hero__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 24px 16px 32px;
      max-width: 100%;
    }

    .hero__logo {
      order: 0;
      margin-bottom: 12px;
    }

    .hero__title,
    .hero__headline {
      order: 1;
      font-size: clamp(26px, 6vw, 36px) !important;
      line-height: 1.2 !important;
      max-width: 12ch;
      margin-bottom: 10px;
    }

    .hero__subtext {
      order: 2;
      max-width: 32rem;
      margin-bottom: 12px;
    }

    .hero__trust {
      order: 3;
      margin-bottom: 16px;
    }

    .hero__ctas {
      order: 4;
      width: 100%;
      max-width: 360px;
      gap: 10px;
    }

    .hero__ctas .cta {
      width: 100%;
      justify-content: center;
    }

    /* Hierarchy: dominant gold primary, demoted secondary, text tertiary */
    .hero__ctas .cta--primary { height: 56px; font-size: 16px; }
    .hero__ctas .cta--secondary {
      height: 46px;
      font-size: 14px;
      background: transparent !important;
      border-color: rgba(255,255,255,0.14) !important;
    }
    .hero__ctas .cta--text {
      align-self: center;
      margin-top: 4px;
      height: auto;
      font-size: 12px;
    }

    .hero__ctas .cta:nth-child(1) { order: 1; }
    .hero__ctas .cta:nth-child(2) { order: 2; }
    .hero__ctas .cta:nth-child(3) { order: 3; }

    .header__status-group {
      order: 1;
      width: 100%;
      min-width: 0;
      justify-content: center;
      margin-left: 0;
    }

    .header__status-cta {
      width: 100%;
      justify-content: center;
    }

    .header__status-cta-label {
      display: inline;
    }
  }

  @media (max-width: 480px) {
    .hero[data-mobile-video="enabled"] .hero__bg-video,
    .hero__bg-video {
      display: none;
    }

    .hero[data-mobile-video="enabled"] .hero__bg-image,
    .hero__bg-image {
      display: block;
      position: absolute;
      inset: 0;
    }
  }

  @media (min-width: 769px) {
    .hero {
      height: 85vh;
      align-items: center;
    }
    .hero__content {
      padding: 0 var(--space-pad);
      max-width: 560px;
      margin: 0 0 0 max(var(--space-pad), calc((100vw - var(--max-width))/2 + var(--space-pad)));
    }
    .hero__ctas {
      flex-direction: column;
      gap: 10px;
      max-width: 320px;
    }
    .hero__ctas .cta--full { width: auto; flex: none; }
  }

/* --- internal-links --- */
  .internal-links { padding: 40px 16px; background: {{ section.settings.bg | default: '#FFFFFF' }}; }
  .internal-links__inner { max-width: 1100px; margin: 0 auto; }
  .internal-links__h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 8px; color: #1F3A5F; }
  .internal-links__intro { color: #555; margin: 0 0 20px; max-width: 720px; }
  .internal-links__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .internal-links__card { display: block; padding: 16px 18px; border: 1px solid #e5e5e5; border-radius: 10px; text-decoration: none; color: #111; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
  .internal-links__card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: #d0d0d0; }
  .internal-links__kind { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #E2A233; font-weight: 700; margin-bottom: 4px; }
  .internal-links__anchor { display: block; font-size: 16px; font-weight: 600; color: #1F3A5F; margin-bottom: 4px; }
  .internal-links__desc { display: block; font-size: 14px; color: #555; line-height: 1.45; }

/* --- legal-content --- */
  .legal-content { padding: 56px 16px 80px; background: #fff; color: #1a1a1a; }
  .legal-content__inner { max-width: 780px; margin: 0 auto; }
  .legal-content__h1 { font-size: clamp(28px, 4vw, 36px); color: #1F3A5F; margin: 0 0 6px; font-weight: 700; }
  .legal-content__updated { color: #777; font-size: 14px; margin: 0 0 32px; }
  .legal-content__h2 { font-size: clamp(20px, 2.8vw, 24px); color: #1F3A5F; margin: 32px 0 10px; font-weight: 700; }
  .legal-content__h3 { font-size: 17px; color: #2E5A8A; margin: 20px 0 6px; font-weight: 600; }
  .legal-content__p { font-size: 16px; line-height: 1.7; margin: 0 0 14px; color: #2a2a2a; }
  .legal-content__p p { margin: 0 0 14px; }
  .legal-content__list { padding-left: 22px; margin: 0 0 16px; }
  .legal-content__list li { margin: 6px 0; line-height: 1.55; }
  .legal-content__notice { background: #F6F2EA; border-left: 4px solid #E2A233; padding: 14px 16px; margin: 20px 0; border-radius: 4px; font-size: 15px; line-height: 1.55; }

/* --- local-content --- */
  .local-content { padding: 48px 16px; background: {{ section.settings.bg | default: '#FFFFFF' }}; color: #1a1a1a; }
  .local-content__inner { max-width: 820px; margin: 0 auto; }
  .local-content__h2 { font-size: clamp(22px, 3.2vw, 28px); margin: 28px 0 12px; font-weight: 700; color: #1F3A5F; }
  .local-content__h2:first-child { margin-top: 0; }
  .local-content__h3 { font-size: 18px; margin: 20px 0 8px; font-weight: 600; color: #2E5A8A; }
  .local-content__p { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
  .local-content__p p { margin: 0 0 14px; }
  .local-content__p a { color: #1F3A5F; text-decoration: underline; }
  .local-content__list { padding-left: 22px; margin: 0 0 16px; }
  .local-content__list li { margin: 6px 0; line-height: 1.55; }
  .local-content__callout { background: #F6F2EA; border-left: 4px solid #E2A233; padding: 14px 16px; margin: 20px 0; border-radius: 4px; }
  .local-content__callout strong { display: block; margin-bottom: 4px; }

/* --- local-seo-faq --- */
  .faq-section__sub {
    color: var(--color-text-2);
    margin-top: -8px;
    margin-bottom: 24px;
    max-width: 560px;
  }
  .faq-list {
    max-width: 720px;
    border-top: 1px solid var(--color-divider);
  }
  .faq-item {
    border-bottom: 1px solid var(--color-divider);
  }
  .faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    padding: 18px 0;
    cursor: pointer;
    text-align: left;
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 600;
    color: var(--color-text);
    transition: color var(--transition-fast);
  }
  .faq-item__q:hover { color: var(--color-primary); }
  .faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(180deg); }
  .faq-item__icon {
    flex-shrink: 0;
    color: var(--color-text-2);
    transition: transform 200ms ease;
  }
  .faq-item__a {
    overflow: hidden;
  }
  .faq-item__a:not([hidden]) {
    padding-bottom: 18px;
  }
  .faq-item__a .text-2 { color: var(--color-text-2); line-height: 1.65; }
  .faq-item__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
  }
  .faq-item__cta:hover { opacity: 0.8; }

/* --- location-section --- */
  #location-section { padding-top: var(--space-section); padding-bottom: var(--space-section); }

  .loc-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* Map column delegates to the shared `store-map` snippet.
     All pin / vignette / iframe CSS now lives there. */

  /* ---- Info column ---- */
  .loc-info { display: flex; flex-direction: column; gap: 24px; }
  .loc-info__block { padding-bottom: 20px; border-bottom: 1px solid var(--color-border-soft); }
  .loc-info__block:last-of-type { border-bottom: 0; padding-bottom: 0; }

  .loc-info__label {
    font-family: var(--font);
    font-size: var(--font-size-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-gold);
    margin-bottom: 8px;
  }
  .loc-info__value {
    font-size: var(--font-size-body-lg);
    color: var(--color-text-1);
    line-height: 1.5;
  }
  .loc-info__link { color: var(--color-text-1); text-decoration: none; transition: color var(--transition-fast); }
  .loc-info__link:hover { color: var(--color-gold); }

  /* Hours table */
  .hours-table { width: 100%; font-size: var(--font-size-body); }
  .hours-table__row { border-bottom: 1px solid var(--color-border-soft); }
  .hours-table__row:last-child { border-bottom: 0; }
  .hours-table__row--today { color: var(--color-gold); font-weight: 600; }
  .hours-table__row--today .hours-table__time { color: var(--color-gold); }
  .hours-table__day {
    padding: 10px 0;
    width: 80px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    color: var(--color-text-2);
  }
  .hours-table__row--today .hours-table__day { color: var(--color-gold); }
  .hours-table__time { padding: 10px 0; text-align: right; color: var(--color-text-1); }
  .hours-table__today-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(212,178,106,0.25);
  }

  .loc-info__cta {
    display: grid;
    grid-template-columns: 1fr;   /* single column by default on mobile */
    gap: 10px;
    margin-top: 8px;
  }
  .loc-info__cta .cta,
  .loc-info__cta .btn,
  .loc-info__cta > a,
  .loc-info__cta > button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Side-by-side only when there's genuinely enough room */
  @media (min-width: 480px) {
    .loc-info__cta { grid-template-columns: 1fr 1fr; gap: 12px; }
  }

  /* ── Call Now (secondary) — visible on dark background ── */
  .loc-info__cta .cta--secondary {
    background: transparent;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
    transition: background var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
  }
  .loc-info__cta .cta--secondary:hover,
  .loc-info__cta .cta--secondary:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  .loc-info__cta .cta--secondary .cta__icon {
    stroke: #ffffff;
  }


  .loc-info__review-cta { margin-top: 4px; }
  .loc-review-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-2);
    text-decoration: none;
    transition: color var(--transition-fast);
    letter-spacing: 0.02em;
  }
  .loc-review-link:hover { color: var(--color-gold); }

  @media (min-width: 768px) {
    .loc-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 56px;
      align-items: start;
    }
  }

/* --- main-404 --- */
  .main-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px var(--space-pad, 20px);
  }
  .main-404__inner {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .main-404__code {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary, #E6003C);
    margin: 0;
    letter-spacing: -4px;
  }
  .main-404__heading {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
  }
  .main-404__text {
    color: var(--color-text-2, #888);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 400px;
  }
  .main-404__search { width: 100%; max-width: 460px; }
  .main-404__form {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
  }
  @media (min-width: 480px) {
    .main-404__form { flex-direction: row; align-items: stretch; }
    .main-404__input { flex: 1; min-width: 0; }
  }
  .main-404__input {
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-divider, #222);
    background: var(--color-muted, #111);
    color: var(--color-text-1, #fff);
    font-size: 15px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
  }
  .main-404__input:focus {
    outline: none;
    border-color: var(--color-primary, #E6003C);
  }
  .main-404__submit {
    height: 48px;
    padding: 0 24px;
    background: var(--color-primary, #E6003C);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s;
  }
  .main-404__submit:hover { opacity: 0.85; }
  .main-404__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
  }

/* --- main-collection --- */
  .main-collection__header { text-align: center; margin-bottom: 32px; }
  .main-collection__title { font-size: clamp(24px, 4vw, 40px); font-weight: 800; margin-bottom: 8px; }
  .main-collection__desc { color: var(--color-text-2, #aaa); max-width: 560px; margin: 0 auto 8px; }
  .main-collection__count { font-size: 13px; color: var(--color-text-2, #888); }
  .main-collection__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-gap, 12px);
  }
  @media (min-width: 600px) { .main-collection__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1024px) { .main-collection__grid { grid-template-columns: repeat(4, 1fr); } }
  .main-collection__card { display: block; text-decoration: none; }
  .main-collection__card-img {
    position: relative; aspect-ratio: 1; overflow: hidden;
    border-radius: var(--radius-lg, 12px); background: var(--color-muted, #111); margin-bottom: 10px;
  }
  .main-collection__card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
  .main-collection__card:hover img { transform: scale(1.03); }
  .main-collection__card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  .main-collection__badge {
    position: absolute; bottom: 8px; left: 8px;
    background: rgba(0,0,0,0.75); color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
  }
  .main-collection__card-vendor { font-size: 11px; color: var(--color-primary, #E6003C); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
  .main-collection__card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--color-text-1, #fff); }
  .main-collection__card-price { font-size: 14px; color: var(--color-text-2, #aaa); }
  .main-collection__empty { text-align: center; padding: 64px 20px; color: var(--color-text-2, #aaa); display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .main-collection__pagination { margin-top: 40px; text-align: center; }

/* --- main-page --- */
  .main-page__inner { max-width: 800px; margin: 0 auto; padding: 48px var(--space-pad, 20px); }
  .main-page__title { font-size: clamp(24px, 4vw, 40px); font-weight: 800; margin-bottom: 24px; }
  .main-page__content { line-height: 1.7; color: var(--color-text-2, #aaa); }
  .main-page__content h2 { font-size: 22px; font-weight: 700; color: var(--color-text-1, #fff); margin: 32px 0 12px; }
  .main-page__content h3 { font-size: 18px; font-weight: 600; color: var(--color-text-1, #fff); margin: 24px 0 8px; }
  .main-page__content p { margin-bottom: 16px; }
  .main-page__content a { color: var(--color-primary, #E6003C); text-decoration: underline; text-underline-offset: 2px; }
  .main-page__content ul, .main-page__content ol { padding-left: 20px; margin-bottom: 16px; }
  .main-page__content li { margin-bottom: 8px; }

/* --- main-product --- */
  .main-product__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px var(--space-pad, 20px);
  }
  @media (min-width: 768px) {
    .main-product__inner { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  }
  .main-product__img { width: 100%; border-radius: var(--radius-lg, 12px); object-fit: cover; }
  .main-product__img-placeholder {
    width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg, 12px);
    background: var(--color-muted, #111); display: flex; align-items: center; justify-content: center;
  }
  .main-product__vendor { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-primary, #E6003C); font-weight: 600; margin-bottom: 8px; }
  .main-product__title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin-bottom: 16px; line-height: 1.2; }
  .main-product__price { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
  .main-product__price-compare { font-size: 16px; color: var(--color-text-2, #888); text-decoration: line-through; }
  .main-product__price-current { font-size: 24px; font-weight: 800; color: var(--color-text-1, #fff); }
  .main-product__badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
  .main-product__badge--in { background: rgba(34,197,94,0.15); color: #22c55e; }
  .main-product__badge--out { background: rgba(239,68,68,0.15); color: #ef4444; }
  .main-product__desc { color: var(--color-text-2, #aaa); line-height: 1.7; margin-bottom: 24px; }
  .main-product__option { margin-bottom: 16px; }
  .main-product__option-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
  .main-product__select {
    width: 100%; height: 44px; padding: 0 12px;
    background: var(--color-muted, #111); border: 1px solid var(--color-divider, #222);
    color: var(--color-text-1, #fff); border-radius: var(--radius-md, 8px); font-size: 15px; font-family: inherit;
  }
  .main-product__add { width: 100%; margin-top: 8px; }
  .main-product__visit-note { margin-top: 16px; font-size: 14px; color: var(--color-text-2, #888); text-align: center; }
  .main-product__visit-link { color: var(--color-primary, #E6003C); text-decoration: underline; }

/* --- map-directions --- */
  .map-directions { padding: 48px 16px; background: {{ section.settings.bg | default: '#FAFAFA' }}; }
  .map-directions__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .map-directions__h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 12px; color: #1F3A5F; }
  .map-directions__nap { font-style: normal; line-height: 1.6; margin: 0 0 12px; font-size: 16px; }
  .map-directions__nap a { color: #1F3A5F; }
  .map-directions__hours { margin: 8px 0 12px; }
  .map-directions__routes { font-size: 15px; line-height: 1.6; color: #333; margin: 8px 0 16px; }
  .map-directions__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
  .map-directions__map iframe { border-radius: 8px; box-shadow: 0 2px 14px rgba(0,0,0,.08); display: block; }
  .map-directions__placeholder { padding: 60px 20px; text-align: center; background: #eee; border-radius: 8px; color: #666; }
  @media (max-width: 820px) {
    .map-directions__inner { grid-template-columns: 1fr; }
    .map-directions__map iframe { height: 340px; }
  }

/* --- page-hero --- */
  .page-hero {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-muted);
  }
  .page-hero__bg {
    position: absolute;
    inset: 0;
  }
  .page-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--color-bg) 0%, rgba(6,6,6,0.5) 60%, transparent 100%);
  }
  .page-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 80px;
    padding-bottom: 32px;
  }
  .page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: var(--line-height-heading);
    margin-bottom: 8px;
  }
  .page-hero__sub {
    color: var(--color-text-2);
    max-width: 480px;
  }
  @media (min-width: 768px) {
    .page-hero { min-height: 320px; }
    .page-hero__inner { padding-top: 120px; padding-bottom: 48px; }
  }

/* --- photo-benefit --- */
  .pb-stack { display: flex; flex-direction: column; gap: 24px; }
  .pb-pair__photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .pb-pair__photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,6,6,0.3);
  }
  .pb-pair__benefit {
    padding: 16px;
    border-left: 3px solid var(--color-primary);
    margin-top: -8px;
    position: relative;
    z-index: 2;
    margin-left: 12px;
    margin-right: 12px;
  }
  .pb-pair__title { font-size: var(--font-size-card); font-weight: 600; margin-bottom: 4px; }
  .pb-pair__desc { font-size: var(--font-size-meta); }
  .pb-cta { text-align: center; margin-top: 32px; }
  .pb-cta .cta { max-width: 320px; }

  @media (min-width: 768px) {
    .pb-pair {
      display: grid;
      grid-template-columns: 60% 40%;
      align-items: center;
      gap: 0;
    }
    .pb-pair--alt { grid-template-columns: 40% 60%; }
    .pb-pair--alt .pb-pair__photo { order: 2; }
    .pb-pair--alt .pb-pair__benefit { order: 1; }
    .pb-pair__benefit {
      margin: 0;
      margin-left: -24px;
    }
    .pb-pair--alt .pb-pair__benefit {
      margin-left: 0;
      margin-right: -24px;
    }
  }

/* --- product-carousel --- */
  .prod-scroll { padding-left: var(--space-pad); }
  .prod-card {
    width: 160px;
    padding: 12px;
    flex-shrink: 0;
    transition: all var(--transition-med);
  }
  .prod-card:hover {
    background: var(--color-divider);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .prod-card__img-wrap {
    position: relative;
    margin-bottom: 8px;
  }
  .prod-card__img-wrap img { border-radius: var(--radius-md); }
  .prod-card__placeholder {
    aspect-ratio: 1;
    background: var(--color-muted);
    border-radius: var(--radius-md);
  }
  .prod-card__tag {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: var(--radius-pill);
    background: var(--color-card);
  }
  .prod-card__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
  .prod-card__brand { display: block; font-size: 12px; margin-top: 2px; }
  .prod-card__stock { display: flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 6px; }
  .prod-scroll__end {
    display: flex;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;
    white-space: nowrap;
  }

/* --- reviews-carousel --- */
  .reviews-header { margin-bottom: 24px; }
  .reviews-header__score {
    display: block;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: 1;
    margin-bottom: 4px;
  }
  .reviews-header__stars { margin-bottom: 4px; display: flex; justify-content: center; }
  .reviews-header__count { font-size: 14px; }
  .reviews-scroll { padding-left: var(--space-pad); }
  .review-card {
    width: 280px;
    padding: 18px;
    flex-shrink: 0;
  }
  .review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .review-card__name { font-size: 14px; }
  .review-card__text { font-size: 13px; margin-bottom: 8px; }
  .review-card__date { font-size: 12px; }

  /* Bridge CTA — post-reviews conversion moment */
  .reviews-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    text-align: center;
  }
  .reviews-bridge__lede {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.6vw, 22px);
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    color: var(--color-text-1);
    max-width: 40ch;
    margin: 0;
  }
  .reviews-bridge .cta {
    min-width: 220px;
  }
  .reviews-bridge__link {
    font-size: var(--font-size-meta);
    margin-top: 4px;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.15);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
  }
  .reviews-bridge__link:hover {
    color: var(--color-gold);
    text-decoration-color: var(--color-gold);
  }

  @media (min-width: 768px) {
    .reviews-scroll {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-gap);
      overflow: visible;
      padding: 0;
    }
    .review-card { width: auto; }
  }

/* --- rich-text --- */
  .rich-text__inner { max-width: 720px; }
  .rich-text__headline {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
  }
  .rte { color: var(--color-text-2); line-height: 1.7; }
  .rte h3 { color: var(--color-text); font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
  .rte h4 { color: var(--color-text); font-size: 17px; font-weight: 700; margin: 24px 0 6px; }
  .rte p { margin: 0 0 16px; }
  .rte ul, .rte ol { padding-left: 20px; margin: 0 0 16px; }
  .rte li { margin-bottom: 6px; }
  .rte a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
  .rte a:hover { color: var(--color-text); }
  .rte blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 16px;
    margin: 20px 0;
    font-style: italic;
    color: var(--color-text);
  }
  .rte img { max-width: 100%; border-radius: var(--radius-md); margin: 16px 0; }

/* --- scan-strip --- */
  .scan-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 16px;
    margin-top: var(--space-4);
  }
  .scan-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
  }
  .scan-strip__icon {
    flex-shrink: 0;
    color: var(--color-gold);
    margin-top: 2px;
  }
  .scan-strip__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .scan-strip__label {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-text-1);
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  .scan-strip__sub {
    font-size: var(--font-size-meta);
    line-height: 1.4;
  }

  @media (min-width: 768px) {
    .scan-strip__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .scan-strip__item { padding: 16px 0; }
  }

/* --- sms-section --- */
  .sms-grid { display: flex; flex-direction: column; gap: 24px; }
  .sms-content { display: flex; flex-direction: column; gap: 16px; }
  .sms-content__headline {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    line-height: 1.1;
  }
  .sms-content__sub { color: var(--color-text-2); }
  .sms-keyword {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sms-keyword__word,
  .sms-keyword__number {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 2px;
  }
  .sms-keyword__label { color: var(--color-text-2); }
  .sms-cta { max-width: 280px; }
  .sms-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sms-benefits__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-2);
  }
  .sms-benefits__item svg { flex-shrink: 0; }
  .sms-incentive { color: var(--color-gold); font-weight: 600; }
  .sms-trust { color: var(--color-text-2); }
  .sms-image { border-radius: var(--radius-lg); overflow: hidden; }

  @media (min-width: 768px) {
    .sms-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
  }

/* --- sticky-bar --- */
  .sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: rgba(14,14,14,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-divider);
    transform: translateY(100%);
    transition: transform 200ms ease-out;
    will-change: transform;
  }
  .sticky-bar.is-visible { transform: translateY(0); }
  .sticky-bar__status {
    text-align: center;
    padding: 4px 16px 0;
    font-size: 11px;
  }
  .sticky-bar__inner {
    display: flex;
    gap: 0;
    max-width: var(--max-width);
    margin: 0 auto;
  }
  .sticky-bar__inner .cta {
    flex: 1;
    border-radius: 0;
    height: 56px;
    border: none;
  }
  .sticky-bar__divider {
    width: 1px;
    background: var(--color-border);
    flex-shrink: 0;
  }

  @media (min-width: 768px) {
    .sticky-bar { display: none; }
  }

/* --- top-bar --- */
.sd-topbar * { box-sizing: border-box; margin: 0; padding: 0; }
.sd-topbar {
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  height: 40px;
  position: relative;
  z-index: 901;
  font-family: 'Inter', sans-serif;
}
.sd-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
}
.sd-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sd-topbar-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
  display: inline-block;
  flex-shrink: 0;
}
.sd-topbar a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color .2s ease;
}
.sd-topbar a:hover { color: var(--color-gold, #E6C77A); }
.sd-topbar-icon { font-size: 13px; line-height: 1; }

/* ── Status indicator ── */
.sd-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: background .3s ease, box-shadow .3s ease;
}
.sd-status-dot--open {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.45);
  animation: sd-pulse 3s ease-in-out infinite;
}
.sd-status-dot--closed {
  background: #ef4444;
  box-shadow: 0 0 5px rgba(239,68,68,0.35);
}
@keyframes sd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.sd-status-label {
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .3s ease;
}
.sd-status-label--open { color: #4ade80; }
.sd-status-label--closed { color: #f87171; }
.sd-status-detail {
  color: rgba(255,255,255,0.45);
  font-weight: 400;
}

/* ── Responsive ── */

/* Tablet */
@media (max-width: 900px) {
  .sd-topbar-inner { gap: 16px; font-size: 11px; padding: 0 16px; }
  .sd-topbar-sep { height: 11px; }
}

/* Mobile — location + phone only */
@media (max-width: 768px) {
  .sd-topbar-inner { gap: 12px; font-size: 11px; padding: 0 14px; }
  .sd-topbar .sd-topbar-hide-sm { display: none; }
  #sd-store-status { display: none; }
}

/* Small mobile */
@media (max-width: 480px) {
  .sd-topbar { height: 36px; }
  .sd-topbar-inner { gap: 8px; font-size: 10px; padding: 0 12px; }
  .sd-topbar-sep { height: 10px; }
}

/* --- trust-strip --- */
  .trust-strip { padding: 14px 16px; }
  .trust-strip__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 32px; }
  .trust-strip__item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text-1); }
  .trust-strip__icon { font-size: 16px; }
  .trust-strip__label { color: var(--color-text-2); }
  .trust-strip__value { font-weight: 600; color: var(--color-text-1); }
  @media (max-width: 640px) {
    .trust-strip__inner { gap: 10px 16px; }
    .trust-strip__item { font-size: 13px; }
  }

/* --- snippet: age-verification --- */
  .smokey-age-gate {
    position: fixed;
    inset: 0;
    z-index: var(--z-age-gate, 2000);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .smokey-age-gate.is-open { display: flex; }
  .smokey-age-gate__backdrop {
    position: absolute; inset: 0;
    background: rgba(5, 5, 5, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .smokey-age-gate__modal {
    position: relative;
    max-width: 460px;
    width: 100%;
    background: linear-gradient(180deg, #161616 0%, #0E0E0E 100%);
    color: var(--color-text-1, #F5F3EE);
    padding: 40px 28px 28px;
    border-radius: var(--radius-lg, 16px);
    text-align: center;
    box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 10px 30px rgba(0,0,0,0.4);
    border: 1px solid rgba(212, 175, 55, 0.25);
    outline: none;
  }
  .smokey-age-gate__brand {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gold, #D4AF37);
    margin-bottom: 18px;
  }
  .smokey-age-gate__title {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(22px, 3.4vw, 28px);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    line-height: 1.2;
    color: var(--color-text-1, #F5F3EE);
  }
  .smokey-age-gate__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-2, #A8A29A);
    margin: 0 0 24px;
  }
  .smokey-age-gate__actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
  .smokey-age-gate__btn {
    height: 52px;
    padding: 0 16px;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font, 'Inter', sans-serif);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: 0;
    cursor: pointer;
    transition: transform 150ms ease, filter 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .smokey-age-gate__btn--enter {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%),
      linear-gradient(135deg,
        var(--cta-gold-bg-start, #E8CB8C) 0%,
        var(--cta-gold-bg-mid, #D4AF37) 40%,
        var(--cta-gold-bg-end, #8A7238) 100%);
    color: var(--cta-gold-ink, #0A0A0A);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25);
  }
  .smokey-age-gate__btn--enter:hover { transform: translateY(-1px); filter: brightness(1.04); }
  .smokey-age-gate__btn--enter:active { transform: translateY(0) scale(0.98); }
  .smokey-age-gate__btn--exit {
    background: transparent;
    color: var(--color-text-1, #F5F3EE);
    border: 1px solid rgba(255,255,255,0.18);
  }
  .smokey-age-gate__btn--exit:hover { background: rgba(255,255,255,0.05); }
  .smokey-age-gate__btn:focus-visible {
    outline: 2px solid var(--color-gold, #D4AF37);
    outline-offset: 3px;
  }
  .smokey-age-gate__fine {
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-text-3, #6B6760);
    margin: 0;
  }
  html.smokey-age-gate-locked,
  body.smokey-age-gate-locked { overflow: hidden !important; }

  @media (max-width: 420px) {
    .smokey-age-gate__actions { grid-template-columns: 1fr; }
    .smokey-age-gate__modal { padding: 32px 20px 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .smokey-age-gate__btn,
    .smokey-age-gate__btn--enter:hover,
    .smokey-age-gate__btn--enter:active { transition: none !important; transform: none !important; }
  }

/* --- snippet: cta-button --- */
  /* Base CTA — shape only. Visual variants are polished in premium.css */
  .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 30px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    min-width: 48px;
    line-height: 1;
    white-space: nowrap;
  }
  .cta--full { width: 100%; }
  .cta__icon { flex-shrink: 0; transition: transform var(--transition-fast); }
  .cta:hover .cta__icon { transform: translateX(2px); }

  /* Defaults (overridden by premium.css) */
  .cta--primary   { background: var(--color-primary); color: var(--color-text-1); }
  .cta--secondary { background: transparent; color: var(--color-text-1); border: 1px solid var(--color-border-strong); }
  .cta--text      { background: transparent; color: var(--color-gold); padding: 6px 2px; height: auto; border-radius: 0; }

/* --- snippet: mobile-sticky-bar --- */
  /* -----------------------------------------------------------
     Mobile Sticky CTA — Pass 8 grid rebuild
     Height is published to CSS via --sticky-cta-h (see smokey.js)
     so other components can offset safely instead of guessing.
     ----------------------------------------------------------- */
  .sticky-cta { display: none; }

  /* Hard suppression on non-engagement templates */
  body.template-cart .sticky-cta,
  body.template-checkout .sticky-cta,
  body.template-product .sticky-cta,
  body.template-password .sticky-cta,
  body.template-customers-login .sticky-cta,
  body.template-customers-register .sticky-cta,
  body.template-customers-account .sticky-cta { display: none !important; }

  @media (max-width: 768px) {
    .sticky-cta {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: rgba(10, 10, 10, 0.94);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
      border-top: 1px solid rgba(212, 175, 55, 0.18);
      z-index: var(--z-sticky, 900);
      transform: translateY(0);
      transition: transform var(--transition-med, 300ms cubic-bezier(0.16, 1, 0.3, 1));
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
    }

    .sticky-cta[data-hidden="true"] { transform: translateY(110%); }

    .sticky-cta__primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 0;
      width: 100%;
      height: 52px;
      padding: 0 18px;
      /* Locked gradient — tokens live in tokens.css */
      background:
        linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%),
        linear-gradient(135deg,
          var(--cta-gold-bg-start) 0%,
          var(--cta-gold-bg-mid) 40%,
          var(--cta-gold-bg-end) 100%);
      color: var(--cta-gold-ink);
      border: 1px solid var(--cta-gold-border);
      border-radius: var(--radius-pill, 999px);
      font-family: var(--font, system-ui, sans-serif);
      font-weight: 700;
      letter-spacing: 0.01em;
      text-decoration: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 8px 22px rgba(212, 175, 55, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.4);
      transition: transform 150ms var(--ease-out);
    }
    .sticky-cta__primary:active { transform: scale(0.98); }

    .sticky-cta__labels {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.05;
      min-width: 0;
    }
    .sticky-cta__status {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.78;
      color: var(--cta-gold-ink);
    }
    .sticky-cta__label {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: var(--cta-gold-ink);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      background: var(--color-open, #22C55E);
      border-radius: 50%;
      flex: 0 0 auto;
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
      animation: sticky-pulse 2s infinite;
    }
    .sticky-cta.closed .status-dot,
    .status-dot.is-closed {
      background: var(--color-primary, #E6003C);
      animation: none;
    }
    .status-dot.is-closing { background: #fb923c; }

    .sticky-cta__secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 52px;
      min-width: 52px;
      padding: 0 16px;
      color: var(--color-text-1, #F5F3EE);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius-pill, 999px);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }
    .sticky-cta__secondary:active { background: rgba(255, 255, 255, 0.08); }
    .sticky-cta__icon { flex: 0 0 auto; }
  }

  @media (max-width: 360px) {
    .sticky-cta__primary { padding: 0 14px; gap: 8px; }
    .sticky-cta__label { font-size: 14px; }
    .sticky-cta__secondary span { display: none; }
    .sticky-cta__secondary { padding: 0; width: 52px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sticky-cta,
    .sticky-cta__primary,
    .status-dot {
      animation: none !important;
      transition: none !important;
    }
  }

  @keyframes sticky-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  }

/* --- snippet: star-rating --- */
  .stars { display: inline-flex; align-items: center; gap: 2px; }
  .stars__count {
    margin-left: 6px;
    font-size: var(--font-size-meta);
    color: var(--color-text-2);
  }

/* --- snippet: store-map --- */
  /* -----------------------------------------------------------
     Store Map — canonical embedded map wrapper
     Mobile-first padding-top aspect trick (supports older iOS).
     ----------------------------------------------------------- */
  .store-map {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--color-card, #0f0f0f);
    isolation: isolate;
    /* Default aspect (mobile): ~16:9 via padding hack for broad support */
    padding-top: 56.25%;
  }
  .store-map--aspect-4-3   { padding-top: 75%; }
  .store-map--aspect-16-11 { padding-top: 68.75%; }
  .store-map--aspect-16-9  { padding-top: 56.25%; }
  .store-map--aspect-21-9  { padding-top: 42.86%; }

  /* Iframe (whether merchant-pasted or fallback) fills the wrap */
  .store-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Premium variant — dark border + cinematic tone-match on tiles */
  .store-map--premium {
    border: 1px solid var(--color-border-soft, rgba(255,255,255,0.08));
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,0.35)),
                var(--shadow-inset, inset 0 1px 0 rgba(255,255,255,0.04));
  }
  .store-map--premium iframe {
    filter: saturate(0.75) contrast(1.05) brightness(0.92) hue-rotate(-8deg);
  }
  .store-map--premium::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.35);
    z-index: 1;
  }

  /* Flat variant — no filter, no vignette */
  .store-map--flat { border: 1px solid var(--color-border-soft, rgba(255,255,255,0.06)); }

  /* Decorative pin overlay (opt-in) */
  .store-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  }
  .store-map__pin-label {
    margin-top: 2px;
    padding: 3px 10px;
    background: rgba(5,5,5,0.82);
    color: var(--color-gold, #D4B26A);
    border: 1px solid rgba(212,178,106,0.4);
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
  }

  /* Bottom-right "Open in Google Maps" overlay chip — tap target ≥ 44px */
  .store-map__overlay {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    background: rgba(255,255,255,0.95);
    border-radius: var(--radius-pill, 999px);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    transition: transform var(--transition-fast, 160ms ease), background var(--transition-fast, 160ms ease), color var(--transition-fast, 160ms ease);
    -webkit-tap-highlight-color: transparent;
  }
  .store-map__overlay:hover {
    background: var(--color-gold, #D4B26A);
    color: #0a0a0a;
  }
  .store-map__overlay:active { transform: scale(0.97); }

  @media (prefers-reduced-motion: reduce) {
    .store-map__overlay { transition: none; }
    .store-map__overlay:active { transform: none; }
  }

  @media (min-width: 768px) {
    /* On desktop, fall back to aspect-ratio for accurate box sizing */
    .store-map                 { padding-top: 0; aspect-ratio: 16 / 9; }
    .store-map--aspect-4-3     { aspect-ratio: 4 / 3; }
    .store-map--aspect-16-11   { aspect-ratio: 16 / 11; }
    .store-map--aspect-16-9    { aspect-ratio: 16 / 9; }
    .store-map--aspect-21-9    { aspect-ratio: 21 / 9; }
    .store-map--aspect-mobile  { aspect-ratio: 16 / 9; }
  }

/* --- snippet: store-status --- */
  .store-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--font-size-meta);
    color: var(--color-text-2);
    transition: opacity .3s ease;
    opacity: 0;
    cursor: default;
  }
  .store-status.is-ready {
    visibility: visible !important;
    opacity: 1;
  }

  .store-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 300ms ease, box-shadow 300ms ease;
  }
  .store-status__dot.is-open {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52,211,153,0.55);
    animation: ss-pulse 3s ease-in-out infinite;
  }
  .store-status__dot.is-closing {
    background: #fb923c;
    box-shadow: 0 0 6px rgba(251,146,60,0.55);
    animation: ss-pulse 2s ease-in-out infinite;
  }
  .store-status__dot.is-closed {
    background: #ef4444;
    box-shadow: 0 0 5px rgba(239,68,68,0.35);
  }

  @keyframes ss-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }

  .header__actions:has(.cta--primary:hover) .store-status__dot.is-open {
    box-shadow: 0 0 10px rgba(52,211,153,0.8);
  }
  .header__actions:has(.cta--primary:hover) .store-status__dot.is-closing {
    box-shadow: 0 0 10px rgba(251,146,60,0.8);
  }

  .store-status__text {
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 300ms ease, opacity 200ms ease;
    color: rgba(255,255,255,0.9);
  }
  .store-status__text.is-open { color: #ffffff; }
  .store-status__text.is-closing { color: #fdba74; font-weight: 600; }
  .store-status__text.is-closed { color: #fca5a5; }

  .store-status__detail {
    font-weight: 400;
    color: rgba(255,255,255,0.4);
    font-size: var(--font-size-meta);
    letter-spacing: 0.01em;
  }
  .store-status__detail:empty { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .store-status__dot.is-open,
    .store-status__dot.is-closing { animation: none; }
  }

/* ============================================================
   PATCH: Missing class definitions for static HTML conversion
   ============================================================ */

/* Review card avatar — initial letter circle */
.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cta-gold-bg-start, #E8CB8C), var(--cta-gold-bg-end, #8A7238));
  color: var(--cta-gold-ink, #0A0A0A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 12px;
}
.review-card__head {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.review-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-1, #F5F3EE);
}

/* Reviews header — aggregate score display */
.reviews-header {
  text-align: center;
  margin-bottom: 32px;
}
.reviews-header__score {
  display: block;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--color-text-1, #F5F3EE);
}

/* Reviews scroll — grid on desktop, flex scroll on mobile */
.reviews-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.reviews-scroll .review-card {
  flex-shrink: 0;
  width: 320px;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .reviews-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
  .reviews-scroll .review-card { width: auto; }
}

/* Reviews bridge CTA */
.reviews-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  text-align: center;
}

/* Photo benefits — pb-pair layout (supplement premium overlay) */
.pb-pair {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
.pb-pair:last-of-type { margin-bottom: 0; }
.pb-pair__photo {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
.pb-pair__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pb-pair__benefit h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--color-text-1, #F5F3EE);
}
.pb-pair__benefit p {
  color: var(--color-text-2, #A8A29A);
  line-height: 1.7;
  max-width: 48ch;
}
@media (min-width: 768px) {
  .pb-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .pb-pair--alt { grid-template-columns: 1fr 1fr; }
  .pb-pair--alt .pb-pair__photo { order: 2; }
  .pb-pair--alt .pb-pair__benefit { order: 1; }
}

/* Scan strip grid — supplement base definition */
.scan-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
  margin-top: var(--space-4, 16px);
}
.scan-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}
.scan-strip__icon {
  flex-shrink: 0;
  color: var(--color-gold, #D4AF37);
  margin-top: 2px;
}
.scan-strip__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.scan-strip__label {
  font-size: var(--font-size-body, 16px);
  font-weight: 600;
  color: var(--color-text-1, #F5F3EE);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.scan-strip__sub {
  font-size: var(--font-size-meta, 14px);
  color: var(--color-text-2, #A8A29A);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .scan-strip__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* CTA section — ensure overlay works */
.cta-section__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,6,6,0.75);
  z-index: 1;
}
.cta-section__inner {
  position: relative;
  z-index: 2;
}

/* Location info blocks */
.loc-info__block {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border-soft, rgba(255,255,255,0.08));
}
.loc-info__block:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}