/* ════════════════════════════════════════════════════════════════════
   SCR — Global stylesheet
   All design tokens + components lifted from design/scr-wireframes-v2.html
   Hub HTML is the design truth. Update tokens here when hub updates.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND COLORS ── */
  --color-slate:        #474748;
  --color-forest:       #417059;
  --color-earth:        #B44E18;
  --color-ocean:        #376875;
  --color-haze:         #D1CECF;
  --color-shell:        #F5F4F4;
  --color-ink:          #1C1C1C;
  --color-white:        #FFFFFF;
  --color-forest-10:    #ECF1EE;
  --color-forest-20:    #D9E2DE;
  --color-forest-40:    #B3C6BD;
  --color-forest-60:    #8DA99B;
  --color-forest-80:    #678D7A;
  --color-forest-dark:  #345A47;
  --color-earth-10:     #F8EDE8;
  --color-earth-20:     #F0DCD1;
  --color-earth-40:     #E1B8A3;
  --color-earth-60:     #D29574;
  --color-earth-80:     #C37146;
  --color-earth-dark:   #903E13;
  --color-ocean-10:     #EBF0F1;
  --color-ocean-20:     #D7E1E3;
  --color-ocean-40:     #AFC3C8;
  --color-ocean-60:     #87A4AC;
  --color-ocean-80:     #5F8691;
  --color-ocean-dark:   #2C535E;
  --color-slate-10:     #EDEDED;
  --color-slate-20:     #DADADA;
  --color-slate-40:     #B5B5B6;
  --color-slate-60:     #919191;
  --color-slate-80:     #6C6C6D;
  --color-slate-dark:   #39393A;

  /* ── FONTS ── */
  --font-display:  -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui:       -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-label:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;  /* labels, eyebrows, captions, metadata. Renamed from --font-mono and migrated from IBM Plex Mono 2026-06-05; fallback chain is proportional sans (no monospace) per Stacie. */

  /* ── TYPE SCALE ── */
  --text-xs:       0.625rem;
  --text-sm:       0.8125rem;
  --text-base:     0.9375rem;
  --text-md:       1.0625rem;
  --text-lg:       1.25rem;
  --text-xl:       1.625rem;
  --text-2xl:      2.25rem;
  --text-3xl:      3rem;
  --text-4xl:      4rem;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      900;

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:    -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.12em;
  --tracking-widest:    0.18em;

  /* ── SPACING ── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ── GRID ── */
  --grid-columns:    6;
  --grid-gap:        24px;
  --max-width:       1160px;
  --max-width-text:  720px;
  --gutter:          40px;
  --gutter-mobile:   20px;

  /* ── BUTTONS ── */
  --btn-radius:        0px;
  --btn-padding-y:     12px;
  --btn-padding-x:     24px;
  --btn-padding-y-sm:  8px;
  --btn-padding-x-sm:  16px;
  --btn-font-size:     12px;
  --btn-tracking:      0.14em;
  --btn-weight:        var(--weight-bold);

  /* ── SHADOWS ── */
  --shadow-sm:         0 1px 3px rgba(28, 28, 28, 0.08), 0 1px 2px rgba(28, 28, 28, 0.06);
  --shadow-md:         0 4px 12px rgba(28, 28, 28, 0.10), 0 2px 4px rgba(28, 28, 28, 0.06);
  --shadow-lg:         0 12px 32px rgba(28, 28, 28, 0.12), 0 4px 8px rgba(28, 28, 28, 0.06);
  --shadow-card:       0 2px 8px rgba(28, 28, 28, 0.07);
  --shadow-btn:        0 2px 6px rgba(28, 28, 28, 0.18);
  --shadow-btn-hover:  0 4px 12px rgba(28, 28, 28, 0.24);
  --shadow-none:       none;

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;

  --border-thin:       1px solid;
  --border-mid:        1.5px solid;
  --border-strong:     2px solid;
  --border-color:      var(--color-haze);
  --border-color-dark: rgba(255, 255, 255, 0.10);

  --z-dropdown:   100;
  --z-sticky:     200;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
  font-family: var(--font-ui);
  color: var(--color-ink);
  background: var(--color-slate);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── LINKS ── */
.link {
  color: var(--color-forest-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-forest-40);
}
.link:hover { color: var(--color-slate-60); text-decoration-color: var(--color-slate-60); }
.link--dark {
  color: var(--color-shell);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-slate-40);
}
.link--dark:hover { color: var(--color-slate-60); text-decoration-color: var(--color-slate-60); }

/* Nav link — shared across header nav, footer nav, footer store names */
.nav-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
  position: relative;
  display: inline-block;
  transition: color var(--transition-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-earth);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}
.nav-link:hover { color: var(--color-slate-60); }
.nav-link:hover::after { transform: scaleX(1); }

/* ════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR + HEADER
   ════════════════════════════════════════════════════════════════════ */
.announcement-bar {
  background: var(--color-slate-dark);
  text-align: center;
  padding: var(--space-2) var(--gutter-mobile);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
}

.site-header {
  background: var(--color-slate);
  padding: var(--space-4) var(--gutter-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.site-logo img { height: 48px; width: auto; }
body.theme-ro .site-logo img,
body.store-ro .site-logo img { height: 60px; }

.store-indicator {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-earth-40);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-earth-40);
  border-radius: 20px;
  order: -1; /* Sit to the LEFT of the Shop Locations dropdown in desktop nav */
}

.nav-toggle {
  display: flex; flex-direction: column; gap: var(--space-1);
  cursor: pointer; padding: var(--space-2);
  background: none; border: none;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--color-shell);
  display: block;
}

.main-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--color-slate);
  padding: var(--space-4) var(--gutter-mobile);
  border-top: var(--border-thin) var(--border-color-dark);
  z-index: var(--z-dropdown);
  text-align: center;
}
.main-nav.open { display: block; }
.main-nav .nav-link {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin) var(--border-color-dark);
}

/* Shop Locations dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  background: var(--color-slate);
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu .nav-link {
  display: block;
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  border-bottom: none;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE — HERO + STORE SELECTOR
   ════════════════════════════════════════════════════════════════════ */
.hero-and-stores {
  position: relative;
  overflow: hidden;
  background: var(--color-slate);
}
.hero-brand {
  position: relative;
  padding: var(--space-16) var(--gutter-mobile) var(--space-10);
  text-align: center;
}
.hero-bg-video {
  position: absolute;
  top: 0;
  left: -5%;
  width: 160%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(71, 71, 72, 0.55);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-brand h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-shell);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.hero-brand .subline {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-shell);
  line-height: var(--leading-normal);
  max-width: var(--max-width-text);
  margin: 0 auto;
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-and-stores {
    background-image: url(/assets/video/scr-farm-loop-c-poster.jpg);
    background-size: cover;
    background-position: center;
  }
}

.store-selector {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 0 var(--gutter-mobile) var(--space-16);
  text-align: center;
}
.store-selector .section-label {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-shell);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--space-8);
}
.store-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  max-width: var(--max-width);
  margin: 0 auto;
}
.store-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  cursor: pointer;
  transition: var(--transition-base);
  border: 1px solid var(--color-haze);
  border-radius: 10px;
}
.store-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,28,28,0.9) 0%, rgba(28,28,28,0.5) 50%, rgba(28,28,28,0.3) 100%);
  z-index: 1;
}
.store-card--slo {
  background: var(--color-slate-dark) url(/assets/photos/scr-slo-front-bw.jpg) center/cover no-repeat;
}
.store-card--gb {
  background: var(--color-slate-dark) url(/assets/photos/scr-grover-beach-front-712-bw.jpg) center/cover no-repeat;
}
.store-card--ro {
  background: var(--color-slate-dark) url(/assets/photos/scr-root-one-front-bw.jpg) center/cover no-repeat;
}

.store-card-content { position: relative; z-index: 2; text-align: center; }
.store-card .store-city {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-shell);
  margin-bottom: var(--space-2);
}
.store-card .store-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-shell);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}
.store-card .store-tagline {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-shell);
  margin-bottom: var(--space-6);
  opacity: 0.9;
}
.store-card .store-cta {
  display: inline-block;
  color: var(--color-shell);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-btn);
  transition: var(--transition-fast);
  border: none;
}
.store-card--slo .store-cta { background: var(--color-forest); }
.store-card--slo .store-cta:hover { background: var(--color-forest-dark); box-shadow: var(--shadow-btn-hover); }
.store-card--gb .store-cta { background: var(--color-earth); }
.store-card--gb .store-cta:hover { background: var(--color-earth-dark); box-shadow: var(--shadow-btn-hover); }
.store-card--ro .store-cta { background: var(--color-ocean); }
.store-card--ro .store-cta:hover { background: var(--color-ocean-dark); box-shadow: var(--shadow-btn-hover); }

/* ════════════════════════════════════════════════════════════════════
   4 PILLARS
   ════════════════════════════════════════════════════════════════════ */
.four-pillars {
  background: var(--color-shell);
  padding: var(--space-16) var(--gutter-mobile);
  text-align: center;
}
.four-pillars .section-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: var(--space-3);
}
.four-pillars h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-12);
}
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  max-width: var(--max-width);
  margin: 0 auto;
}
.pillar-card { text-align: center; padding: 0 var(--space-4); }
.pillar-icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); }
.pillar-icon img { width: 100%; height: 100%; object-fit: contain; }
.pillar-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.pillar-card p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-slate);
  line-height: var(--leading-normal);
  max-width: 320px;
  margin: 0 auto;
}
.pillar-card .pillar-link {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-earth);
  transition: var(--transition-fast);
}
.pillar-card .pillar-link:hover { color: var(--color-earth-dark); }

/* ════════════════════════════════════════════════════════════════════
   GOOGLE REVIEWS
   ════════════════════════════════════════════════════════════════════ */
.google-reviews {
  background: var(--color-earth);
  padding: var(--space-16) var(--gutter-mobile);
  text-align: center;
}
.google-reviews .section-eyebrow,
.store-reviews .section-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-shell);
  opacity: 0.8;
  margin-bottom: var(--space-3);
}
.google-reviews h2,
.store-reviews h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-shell);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}
.google-reviews .reviews-subtitle,
.store-reviews .reviews-rating {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-shell);
  opacity: 0.85;
  margin-bottom: var(--space-12);
}
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  max-width: var(--max-width);
  margin: 0 auto;
}
.review-card {
  background: var(--color-white);
  padding: var(--space-8) var(--space-6);
  text-align: left;
  border: 1px solid var(--color-haze);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.review-stars {
  color: var(--color-slate);
  font-size: var(--text-lg);
  letter-spacing: var(--space-1);
  margin-bottom: var(--space-4);
}
.review-text {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  font-style: italic;
}
.review-author {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.review-location {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-60);
  margin-top: var(--space-1);
}
.reviews-cta { margin-top: var(--space-10); }
.reviews-cta a {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  color: var(--color-slate);
  background: var(--color-shell);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: none;
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-btn);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.reviews-cta a:hover { background: var(--color-haze); box-shadow: var(--shadow-btn-hover); }

.store-reviews { background: var(--color-forest); padding: var(--space-12) var(--gutter-mobile); text-align: center; }
.store-reviews--gb { background: var(--color-earth); }
.store-reviews--ro { background: var(--color-ocean); }

/* ════════════════════════════════════════════════════════════════════
   STORE HOME — hero, big deal, deals, menu, info, events
   ════════════════════════════════════════════════════════════════════ */
.store-hero {
  position: relative;
  padding: var(--space-10) var(--gutter-mobile) var(--space-8);
  text-align: center;
  overflow: hidden;
}
.store-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(28,28,28,0.7) 0%, rgba(28,28,28,0.85) 100%);
  z-index: 1;
}
.store-hero--slo,
.store-hero--gb,
.store-hero--ro { background: var(--color-slate-dark); }

.store-hero-content {
  position: relative; z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
}
.store-hero .store-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: 20px;
  margin-bottom: var(--space-4);
}
.store-hero--slo .store-badge { background: var(--color-forest); color: var(--color-shell); }
.store-hero--gb .store-badge  { background: var(--color-earth);  color: var(--color-shell); }
.store-hero--ro .store-badge  { background: var(--color-ocean);  color: var(--color-shell); }

.store-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-shell);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}
.store-hero .store-tagline-hero {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-shell);
  opacity: 0.85;
  margin-bottom: var(--space-6);
}
.store-hero-details {
  display: flex; flex-direction: column;
  gap: var(--space-1); align-items: center;
  margin-bottom: var(--space-6);
}
.store-hero-detail {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-shell);
  opacity: 0.75;
}
.store-hero-detail strong { font-weight: var(--weight-semibold); opacity: 1; }
.store-hero-actions {
  display: flex; flex-direction: column;
  gap: var(--space-3); align-items: center;
}

/* Buttons */
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-btn);
  transition: var(--transition-fast);
  border: none;
  cursor: pointer;
  text-align: center;
  min-width: 180px;
}
.btn-primary { color: var(--color-shell); }
.btn-primary:hover { box-shadow: var(--shadow-btn-hover); }
.store-hero--slo .btn-primary { background: var(--color-forest); }
.store-hero--slo .btn-primary:hover { background: var(--color-forest-dark); }
.store-hero--gb .btn-primary { background: var(--color-earth); }
.store-hero--gb .btn-primary:hover { background: var(--color-earth-dark); }
.store-hero--ro .btn-primary { background: var(--color-ocean); }
.store-hero--ro .btn-primary:hover { background: var(--color-ocean-dark); }
.btn-secondary {
  background: transparent;
  color: var(--color-shell);
  border: var(--border-thin) rgba(255,255,255,0.3);
}
.btn-secondary:hover { border-color: var(--color-shell); box-shadow: none; }

/* Big deal hero */
.big-deal-hero {
  background: var(--color-earth);
  padding: var(--space-12) var(--gutter-mobile);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.big-deal-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  z-index: 2;
}
.big-deal-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.big-deal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-earth);
  opacity: 0.72;
}
body.theme-slo .big-deal-overlay { background: var(--color-forest); }
body.theme-gb  .big-deal-overlay { background: var(--color-earth); }
body.theme-ro  .big-deal-overlay { background: var(--color-ocean); }
.big-deal-hero .big-deal-inner { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 3; }
.big-deal-hero .big-deal-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-shell);
  opacity: 0.8;
  margin-bottom: var(--space-3);
}
.big-deal-hero .big-deal-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-shell);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}
.big-deal-hero .big-deal-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-shell);
  opacity: 0.9;
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.big-deal-hero .big-deal-price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-shell);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.big-deal-hero .big-deal-cta {
  display: inline-block;
  margin-top: var(--space-6);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  background: var(--color-shell);
  color: var(--color-earth-dark);
  border: none;
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-btn);
  transition: var(--transition-fast);
  cursor: pointer;
}
.big-deal-hero .big-deal-cta:hover { background: var(--color-haze); box-shadow: var(--shadow-btn-hover); }

/* Today's Deals */
.todays-deals {
  background: var(--color-shell);
  padding: var(--space-12) var(--gutter-mobile);
}
.todays-deals .section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: var(--max-width);
  margin: 0 auto var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.todays-deals .section-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: var(--space-3);
}
.todays-deals h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}
.todays-deals .deals-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-earth);
  transition: var(--transition-fast);
}
.todays-deals .deals-link:hover { color: var(--color-earth-dark); }

.deals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  max-width: var(--max-width);
  margin: 0 auto;
}
.deal-card {
  background: var(--color-white);
  border: 1px solid var(--color-haze);
  border-radius: 10px;
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.deal-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 20px;
  margin-bottom: var(--space-3);
  background: var(--color-earth);
  color: var(--color-shell);
}
.deal-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.deal-card .deal-description {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-slate);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}
.deal-card .deal-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-earth);
}
.deal-card .deal-price .was {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-slate-60);
  text-decoration: line-through;
  margin-left: var(--space-2);
}

/* Menu section */
.menu-section {
  background: var(--color-white);
  padding: var(--space-12) var(--gutter-mobile);
  border-top: 1px solid var(--color-haze);
}
.menu-section .section-header {
  max-width: var(--max-width);
  margin: 0 auto var(--space-6);
  text-align: center;
}
.menu-section .section-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: var(--space-3);
}
.menu-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}
.menu-section .menu-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-slate);
  margin-bottom: var(--space-8);
}

.menu-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  max-width: var(--max-width);
  margin: 0 auto var(--space-8);
}
.menu-cat-tab {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate);
  background: var(--color-shell);
  border: 1px solid var(--color-haze);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}
.menu-cat-tab:hover { border-color: var(--color-slate-40); }
.menu-cat-tab.active {
  background: var(--color-slate);
  color: var(--color-shell);
  border-color: var(--color-slate);
}

/* Jane embed slot — replace contents with iframe once SCR-4 unblocks */
.menu-embed {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--color-shell);
  border: 2px dashed var(--color-haze);
  border-radius: 10px;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}
.menu-embed .embed-label {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-40);
  margin-bottom: var(--space-3);
}
.menu-embed .embed-note {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-slate-40);
  max-width: 400px;
  margin: 0 auto;
}

/* Store info */
.store-info {
  background: var(--color-slate);
  padding: var(--space-12) var(--gutter-mobile);
}
.store-info-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.store-photo {
  background: var(--color-slate-dark);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-photo img { width: 100%; height: 100%; object-fit: cover; }
.store-photo .photo-placeholder {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-60);
}
.store-description {
  max-width: var(--max-width);
  margin: 0 auto var(--space-10);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-shell);
  line-height: var(--leading-relaxed);
  opacity: 0.9;
}
.store-details-card { color: var(--color-shell); }
.store-details-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-shell);
  margin-bottom: var(--space-6);
}
.store-detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-ui);
  font-size: var(--text-base);
}
.store-detail-row .label {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-shell);
}
.store-detail-row .value { color: var(--color-shell); opacity: 0.75; text-align: right; }
.store-detail-row .value a { color: var(--color-earth-40); text-decoration: underline; text-underline-offset: 3px; }
.store-detail-row .value a:hover { color: var(--color-earth); }
.store-detail-about { flex-direction: column; gap: var(--space-2); }
.store-detail-about .value { text-align: left; opacity: 0.75; line-height: 1.6; }

.store-cash-notice {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--color-earth);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-shell);
  opacity: 0.8;
}
.store-directions-btn {
  display: inline-block;
  margin-top: var(--space-6);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  color: var(--color-shell);
  background: transparent;
  border: var(--border-thin) rgba(255,255,255,0.3);
  border-radius: var(--btn-radius);
  transition: var(--transition-fast);
  cursor: pointer;
}
.store-directions-btn:hover { border-color: var(--color-shell); }

/* Events preview */
.events-preview {
  background: var(--color-shell);
  padding: var(--space-12) var(--gutter-mobile);
  text-align: center;
}
.events-preview .section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: var(--max-width);
  margin: 0 auto var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-3);
  text-align: left;
}
.events-preview .section-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-3);
}
.events-preview h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.events-preview .events-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-forest);
}
.events-preview .events-link:hover { color: var(--color-forest-dark); }

.event-card {
  background: var(--color-white);
  border: 1px solid var(--color-haze);
  border-radius: 10px;
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.event-card .event-date {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-3);
}
.event-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.event-card p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-slate);
  line-height: var(--leading-normal);
}
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE-IN-PROGRESS PLACEHOLDER (used by stub pages)
   ════════════════════════════════════════════════════════════════════ */
.placeholder-section {
  background: var(--color-shell);
  padding: var(--space-24) var(--gutter-mobile);
  text-align: center;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.placeholder-section .ph-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: var(--space-3);
}
.placeholder-section h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
  max-width: 720px;
}
.placeholder-section p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-slate);
  max-width: 540px;
  margin-bottom: var(--space-6);
}
.placeholder-section .ph-meta {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-60);
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--color-slate);
  padding: var(--space-12) var(--gutter-mobile);
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: start;
  text-align: center;
  margin-bottom: var(--space-10);
}
.footer-brand { display: flex; justify-content: center; }
.footer-brand img { height: 120px; }
.footer-brand-nav { list-style: none; padding: 0; margin: 0; }
.footer-brand-nav li { margin-bottom: var(--space-3); }
.footer-location h5 { margin-bottom: var(--space-2); }
.footer-location p {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-shell);
  line-height: var(--leading-relaxed);
  opacity: 0.75;
}

.footer-forms {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-bottom: var(--space-10);
  text-align: center;
}
.footer-collapse { border: var(--border-thin) var(--border-color-dark); }
.footer-collapse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
}
.footer-collapse-toggle .arrow {
  font-size: 0.75rem;
  color: var(--color-earth);
  transition: var(--transition-fast);
}
.footer-collapse.open .arrow { transform: rotate(180deg); }
.footer-collapse-body {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
}
.footer-collapse.open .footer-collapse-body { display: block; }
.footer-collapse input[type="email"],
.footer-collapse input[type="text"],
.footer-collapse textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: var(--border-thin) var(--border-color-dark);
  color: var(--color-shell);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  border-radius: 0;
}
.footer-collapse input::placeholder,
.footer-collapse textarea::placeholder { color: var(--color-slate-40); }
.footer-collapse button[type="submit"] {
  background: var(--color-earth);
  color: var(--color-shell);
  border: none;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-btn);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.footer-collapse button[type="submit"]:hover {
  background: var(--color-earth-dark);
  box-shadow: var(--shadow-btn-hover);
}

.footer-bottom-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  padding-top: var(--space-8);
  border-top: var(--border-thin) var(--border-color-dark);
  text-align: center;
}

.footer-pillars {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-6);
}
.footer-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: var(--transition-fast);
}
.footer-pillar:hover { opacity: 0.8; }
.footer-pillar img {
  height: 28px;
  width: 28px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
.footer-pillar span {
  display: block;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
  margin-top: var(--space-1);
  text-align: center;
}

.footer-social {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-slate);
  border-radius: var(--btn-radius);
  text-decoration: none !important;
  transition: var(--transition-fast);
}
.footer-social a::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--color-shell);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  transition: background-color var(--transition-fast);
}
.footer-social a:hover::before { background-color: var(--color-earth); }
.footer-social a.is-fb { --icon: url('/assets/facebook-icon.svg'); }
.footer-social a.is-x  { --icon: url('/assets/x-icon.svg'); }
.footer-social a.is-ig { --icon: url('/assets/instagram-icon.svg'); }

.footer-cash {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-shell);
  margin-bottom: var(--space-4);
}
.footer-legal {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-shell);
  line-height: var(--leading-relaxed);
  opacity: 0.6;
}
.footer-legal p { margin-bottom: var(--space-3); }

/* ════════════════════════════════════════════════════════════════════
   DEALS PAGE — categorized sections
   ════════════════════════════════════════════════════════════════════ */
.deals-page {
  background: var(--color-shell);
  padding: var(--space-12) var(--gutter-mobile);
}
.deals-page-inner { max-width: var(--max-width); margin: 0 auto; }
.deals-page .deal-category {
  margin-bottom: var(--space-16);
}
.deals-page .deal-category-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-haze);
  padding-bottom: var(--space-3);
}
.deals-page .deal-category-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.deals-page .deal-category-header .count {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-60);
}
.deals-page .deals-grid { gap: var(--grid-gap); }

/* ════════════════════════════════════════════════════════════════════
   STORIES — blog hub card grid
   ════════════════════════════════════════════════════════════════════ */
.culture-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  max-width: var(--max-width);
  margin: 0 auto;
}
.story-card {
  background: var(--color-white);
  border: 1px solid var(--color-haze);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.story-card .story-thumb {
  background: var(--color-slate-dark);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-card .story-thumb .ph {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-60);
}
.story-card .story-body { padding: var(--space-6); }
.story-card .story-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.story-tag {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 20px;
  background: var(--color-earth);
  color: var(--color-shell);
}
.story-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.story-card p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-slate);
}
.story-card .story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
a.story-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
a.story-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,0.12));
}
.story-card.is-hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════
   DESKTOP — 768px+
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .site-header { padding: var(--space-4) var(--gutter); }
  .nav-toggle { display: none; }
  .main-nav {
    display: flex !important;
    position: static;
    padding: 0;
    border: none;
    align-items: center;
    gap: var(--space-6);
    background: transparent;
    text-align: left;
  }
  .main-nav .nav-link {
    display: inline-block;
    padding: var(--space-2) 0;
    border: none;
  }
  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-slate);
    min-width: 220px;
    margin-top: 0;
    padding: var(--space-3) 0;
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
  }
  /* Invisible hover bridge so cursor can travel from trigger to menu without losing :hover */
  .nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
    display: none;
  }
  .nav-dropdown:hover::after { display: block; }
  .nav-dropdown-menu .nav-link {
    display: block;
    padding: var(--space-2) var(--space-5);
  }
  .nav-dropdown-menu .nav-link::after { display: none; }
  .nav-dropdown-menu .nav-link:hover { color: var(--color-earth); }

  .hero-brand { padding: var(--space-24) var(--gutter) var(--space-16); }
  .hero-brand h1 { font-size: var(--text-3xl); }

  .store-selector { padding: 0 var(--gutter) var(--space-20); }
  .store-cards { grid-template-columns: repeat(3, 1fr); }
  .store-card { aspect-ratio: 3 / 3.2; }

  .four-pillars { padding: var(--space-20) var(--gutter); }
  .pillars-grid { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }

  .google-reviews { padding: var(--space-20) var(--gutter); }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }

  .store-hero { padding: var(--space-12) var(--gutter) var(--space-10); }
  .store-hero h1 { font-size: var(--text-3xl); }
  .store-hero-details {
    flex-direction: row;
    gap: var(--space-4);
    justify-content: center;
  }
  .store-hero-details .divider {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.3);
    display: block;
  }
  .store-hero-actions { flex-direction: row; justify-content: center; }

  .todays-deals { padding: var(--space-16) var(--gutter); }
  .todays-deals .section-header { padding: 0; }
  .deals-grid { grid-template-columns: repeat(6, 1fr); }
  .deal-card { grid-column: span 2; }

  .menu-section { padding: var(--space-16) var(--gutter); }

  .big-deal-hero { padding: var(--space-16) var(--gutter); }
  .big-deal-hero .big-deal-title { font-size: var(--text-4xl); }
  .big-deal-hero .big-deal-price { font-size: 5rem; }

  .store-reviews { padding: var(--space-16) var(--gutter); }
  .store-reviews .reviews-grid { grid-template-columns: repeat(6, 1fr); }
  .store-reviews .review-card { grid-column: span 2; }

  .events-preview { padding: var(--space-16) var(--gutter); }
  .events-grid { grid-template-columns: repeat(6, 1fr); }
  .events-grid .event-card { grid-column: span 3; }

  .store-info { padding: var(--space-16) var(--gutter); }
  .store-info-inner {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--grid-gap);
    align-items: end;
  }
  .store-details-card { grid-column: span 3; order: -1; }
  .store-photo { grid-column: span 3; aspect-ratio: auto; height: 100%; }

  .deals-page { padding: var(--space-16) var(--gutter); }

  .culture-grid { grid-template-columns: repeat(3, 1fr); }

  .site-footer { padding: var(--space-16) var(--gutter); text-align: left; }
  .footer-top { grid-template-columns: repeat(6, 1fr); text-align: left; }
  .footer-brand { grid-column: span 2; justify-content: flex-start; }
  .footer-brand img { margin: 0; }
  .footer-nav-col { grid-column: span 1; }
  .footer-forms { grid-template-columns: repeat(6, 1fr); text-align: left; }
  .footer-forms .footer-collapse { grid-column: span 2; }
  .footer-bottom-row { grid-template-columns: repeat(6, 1fr); text-align: left; }
  .footer-bottom-left { grid-column: span 3; }
  .footer-bottom-right { grid-column: span 3; }
  .footer-pillars { justify-content: flex-start; }
  .footer-social { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   PER-STORE THEMING
   Apply via <body class="theme-slo|theme-gb|theme-ro">.
   Overrides cascade through .big-deal-hero, .deal-card, .store-indicator,
   and section eyebrows on store-scoped pages.
   GB uses brand defaults (earth) — class kept for symmetry, no overrides needed.
   ════════════════════════════════════════════════════════════════════ */

/* SLO — Forest. Every brand-colored element uses Forest. */
body.theme-slo .big-deal-hero { background: var(--color-forest); }
body.theme-slo .big-deal-hero .big-deal-cta { color: var(--color-forest-dark); }
body.theme-slo .store-indicator {
  color: var(--color-forest-40);
  border-color: var(--color-forest-40);
}
body.theme-slo .deal-badge { background: var(--color-forest); }
body.theme-slo .deal-card .deal-price { color: var(--color-forest); }
body.theme-slo .todays-deals .section-eyebrow,
body.theme-slo .todays-deals .deals-link,
body.theme-slo .menu-section .section-eyebrow,
body.theme-slo .events-preview .section-eyebrow,
body.theme-slo .events-preview .events-link,
body.theme-slo .placeholder-section .ph-eyebrow { color: var(--color-forest); }
body.theme-slo .todays-deals .deals-link:hover,
body.theme-slo .events-preview .events-link:hover { color: var(--color-forest-dark); }

/* Grover Beach — Earth (default brand color elsewhere). Override events-preview which defaults to Forest. */
body.theme-gb .events-preview .section-eyebrow,
body.theme-gb .events-preview .events-link { color: var(--color-earth); }
body.theme-gb .events-preview .events-link:hover { color: var(--color-earth-dark); }

/* Root One — Ocean. Every brand-colored element uses Ocean. */
body.theme-ro .big-deal-hero { background: var(--color-ocean); }
body.theme-ro .big-deal-hero .big-deal-cta { color: var(--color-ocean-dark); }
body.theme-ro .store-indicator {
  color: var(--color-shell);
  border-color: var(--color-shell);
}
body.theme-ro .deal-badge { background: var(--color-ocean); }
body.theme-ro .deal-card .deal-price { color: var(--color-ocean); }
body.theme-ro .todays-deals .section-eyebrow,
body.theme-ro .todays-deals .deals-link,
body.theme-ro .menu-section .section-eyebrow,
body.theme-ro .events-preview .section-eyebrow,
body.theme-ro .events-preview .events-link,
body.theme-ro .placeholder-section .ph-eyebrow { color: var(--color-ocean); }
body.theme-ro .todays-deals .deals-link:hover,
body.theme-ro .events-preview .events-link:hover { color: var(--color-ocean-dark); }

/* Root One footer: Root One mark + "Part of SLO CAL Roots" lockup */
body.theme-ro .footer-brand {
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
body.theme-ro .footer-brand .footer-brand-mark { height: 80px; }
body.theme-ro .footer-brand-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
body.theme-ro .footer-brand-parent-label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
  opacity: 0.6;
}
body.theme-ro .footer-brand-parent img { height: 24px; }


/* ════════════════════════════════════════════════════════════════════
   ALL DEALS HOME — three themed store sections on one page
   ════════════════════════════════════════════════════════════════════ */
.all-deals-intro {
  background: var(--color-shell);
  padding: var(--space-12) var(--gutter-mobile) var(--space-4);
  text-align: center;
}
.all-deals-intro h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.all-deals-intro p {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-slate);
  max-width: 60ch;
  margin: 0 auto;
}

.all-deals-page {
  background: var(--color-shell);
  padding: var(--space-10) var(--gutter-mobile) var(--space-16);
}
.all-deals-inner { max-width: var(--max-width); margin: 0 auto; }

.store-deals { margin-bottom: var(--space-16); }
.store-deals:last-child { margin-bottom: 0; }

.store-deals-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-ink);
}
.store-deals-eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-60);
  margin-bottom: var(--space-2);
}
.store-deals-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin: 0;
}
.store-deals-link {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-earth);
  text-decoration: none;
  transition: var(--transition-fast);
}
.store-deals-link:hover { color: var(--color-earth-dark); }

.store-deals .deals-grid { gap: var(--grid-gap); }

/* Cards as links — strip default anchor styling, restore card look, add hover lift */
a.deal-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
a.deal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,0.12));
}
a.deal-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

/* Section-scoped theme variants (mirror body.theme-* rules, scoped to .store-deals wrappers) */
.store-deals.theme-slo .deal-badge { background: var(--color-forest); }
.store-deals.theme-slo .deal-card .deal-price { color: var(--color-forest); }
.store-deals.theme-slo .store-deals-link { color: var(--color-forest); }
.store-deals.theme-slo .store-deals-link:hover { color: var(--color-forest-dark); }
.store-deals.theme-slo .store-deals-header { border-bottom-color: var(--color-forest); }

.store-deals.theme-gb .deal-badge { background: var(--color-earth); }
.store-deals.theme-gb .deal-card .deal-price { color: var(--color-earth); }
.store-deals.theme-gb .store-deals-link { color: var(--color-earth); }
.store-deals.theme-gb .store-deals-link:hover { color: var(--color-earth-dark); }
.store-deals.theme-gb .store-deals-header { border-bottom-color: var(--color-earth); }

.store-deals.theme-ro .deal-badge { background: var(--color-ocean); }
.store-deals.theme-ro .deal-card .deal-price { color: var(--color-ocean); }
.store-deals.theme-ro .store-deals-link { color: var(--color-ocean); }
.store-deals.theme-ro .store-deals-link:hover { color: var(--color-ocean-dark); }
.store-deals.theme-ro .store-deals-header { border-bottom-color: var(--color-ocean); }

@media (min-width: 768px) {
  .all-deals-intro { padding: var(--space-16) var(--gutter) var(--space-6); }
  .all-deals-page { padding: var(--space-10) var(--gutter) var(--space-20); }
  .all-deals-intro h1 { font-size: var(--text-4xl, 2.5rem); }
}

/* ════════════════════════════════════════════════════════════════════
   FEATURED DEAL ROTATOR — banner above the store sections
   ════════════════════════════════════════════════════════════════════ */
.featured-rotator {
  position: relative;
  background: var(--color-earth);
  overflow: hidden;
  transition: background var(--transition-base, 400ms ease);
}
.featured-rotator[data-active-theme="theme-slo"] { background: var(--color-forest); }
.featured-rotator[data-active-theme="theme-gb"]  { background: var(--color-earth); }
.featured-rotator[data-active-theme="theme-ro"]  { background: var(--color-ocean); }

.featured-rotator-inner {
  display: grid;
  max-width: var(--max-width);
  margin: 0 auto;
}

.featured-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  padding: var(--space-10) var(--gutter-mobile) calc(var(--space-10) + 28px);
  color: var(--color-shell);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}
.featured-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.featured-slide-inner {
  max-width: 720px;
  width: 100%;
}
.featured-slide-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.featured-slide-store {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
  opacity: 0.85;
}
.featured-slide-badge {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-shell);
}
.featured-slide-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  color: var(--color-shell);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight, 1.15);
}
.featured-slide-desc {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-shell);
  opacity: 0.9;
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.featured-slide-bottom {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.featured-slide-price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-shell);
}
.featured-slide-price .was {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  opacity: 0.7;
  text-decoration: line-through;
  margin-left: var(--space-2);
}
.featured-slide-cta {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

.featured-rotator-dots {
  position: absolute;
  left: 0; right: 0; bottom: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.featured-rotator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.featured-rotator-dot:hover { background: rgba(255, 255, 255, 0.7); }
.featured-rotator-dot.is-active {
  background: var(--color-shell);
  transform: scale(1.2);
}

@media (min-width: 768px) {
  .featured-slide { padding: var(--space-16) var(--gutter) calc(var(--space-16) + 28px); }
  .featured-slide-title { font-size: var(--text-5xl, 3rem); }
  .featured-slide-price { font-size: var(--text-4xl, 2.5rem); }
}

/* ════════════════════════════════════════════════════════════════════
   STORY ARTICLE PAGES — shared template styles
   Used by every /culture/{slug}/index.html article. Hero with image
   overlay, semantic article body (720px measure), inline media slots,
   related-culture grid.
   ════════════════════════════════════════════════════════════════════ */
.article-hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-shell);
  padding: var(--space-16) var(--gutter-mobile) var(--space-12);
  overflow: hidden;
}
.article-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.article-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}
.article-back {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
  opacity: 0.85;
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-6);
}
.article-back:hover { opacity: 1; }
.article-tags {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.article-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight, 1.15);
  color: var(--color-shell);
  margin-bottom: var(--space-4);
}
.article-hero .article-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-shell);
  opacity: 0.9;
  margin-bottom: var(--space-6);
}
.article-meta {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-shell);
  opacity: 0.75;
}

.article-body {
  background: var(--color-shell);
  padding: var(--space-12) var(--gutter-mobile);
}
.article-body-inner {
  max-width: 720px;
  margin: 0 auto;
}
.article-intro p,
.article-section p {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}
.article-section {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-haze);
}
.article-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}
.article-section h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.article-section ul,
.article-section ol,
.article-intro ul,
.article-intro ol {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}
.article-section li,
.article-intro li { margin-bottom: var(--space-2); }
.article-section blockquote,
.article-intro blockquote {
  border-left: 3px solid var(--color-haze);
  padding-left: var(--space-5);
  margin: var(--space-5) 0;
  font-style: italic;
  color: var(--color-slate);
}
.article-section .strain-media,
.article-section .article-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: var(--space-5);
  background: var(--color-haze);
}
.article-section .strain-media img,
.article-section .article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-section .reviewer {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-slate-60);
  display: block;
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-5);
}
.article-outro {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-haze);
}
.article-outro p {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.article-source-note {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-style: italic;
  letter-spacing: var(--tracking-wider);
  color: var(--color-slate-60);
}

.related-culture {
  background: var(--color-shell);
  padding: var(--space-12) var(--gutter-mobile);
  border-top: 1px solid var(--color-haze);
}
.related-culture-inner { max-width: var(--max-width); margin: 0 auto; }
.related-culture h2 {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-6);
  text-align: center;
}

/* Carousel mode (injected by JS — see main.js related-culture carousel block) */
.related-culture.is-carousel { position: relative; }
.related-culture.is-carousel .culture-grid {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  /* Hide scrollbar — arrows + native swipe provide the affordance */
  scrollbar-width: none;
}
.related-culture.is-carousel .culture-grid::-webkit-scrollbar { display: none; }
.related-culture.is-carousel .culture-grid > .story-card {
  flex: 0 0 calc(100% - var(--space-6));
  scroll-snap-align: start;
  max-width: calc(100% - var(--space-6));
}
.related-culture.is-carousel a.story-card:hover { transform: none; }
.related-culture .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-shell);
  border: none;
  box-shadow: 0 2px 6px rgba(28,28,28,0.18);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.related-culture .carousel-arrow:hover { box-shadow: 0 4px 12px rgba(28,28,28,0.24); }
.related-culture .carousel-arrow.is-hidden { opacity: 0; pointer-events: none; }
.related-culture .carousel-arrow.carousel-prev { left: 4px; }
.related-culture .carousel-arrow.carousel-next { right: 4px; }

@media (min-width: 768px) {
  .article-hero { padding: var(--space-20, 5rem) var(--gutter) var(--space-16); }
  .article-hero h1 { font-size: var(--text-5xl, 3rem); }
  .article-body { padding: var(--space-16) var(--gutter); }
  .article-section h2 { font-size: var(--text-3xl); }
  .article-section h3 { font-size: var(--text-xl); }
  .related-culture { padding: var(--space-16) var(--gutter); }
  /* Carousel card widths step up at wider breakpoints */
  .related-culture.is-carousel .culture-grid > .story-card {
    flex: 0 0 calc((100% - var(--grid-gap)) / 2);
    max-width: calc((100% - var(--grid-gap)) / 2);
  }
}
@media (min-width: 1024px) {
  .related-culture.is-carousel .culture-grid > .story-card {
    flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 3);
    max-width: calc((100% - 2 * var(--grid-gap)) / 3);
  }
}