/* =========================================
   Spisa — index.css
   Tibico-inspired · Scandinavian food brand
   Colors extracted from hero-banner.png
   ========================================= */

/* =========================================
   DESIGN TOKENS
   ========================================= */
:root {
  /* ── Primary brand palette ── */
  --color-red:         #EE2A37;   /* Spisa Red — buttons, highlights, accents */
  --color-mint:        #A1EFDF;   /* Fresh Mint — labels, secondary surfaces  */
  --color-cream:       #F7F3EA;   /* Nordic Cream — page background            */
  --color-ink:         #111111;   /* Charcoal Black — text, nav, footer        */
  --color-white:       #FFFFFF;   /* Clean White — cards, negative space       */

  /* ── Supporting palette ── */
  --color-kraft:       #AE9173;   /* Kraft Paper Brown — bakery/deli accents   */
  --color-grey:        #E3E3E3;   /* Soft Concrete Grey — dividers, borders    */
  --color-green:       #2F5D50;   /* Deep Grocery Green — use sparingly        */

  /* ── Semantic aliases (used throughout CSS) ── */
  --color-bg:          #F7F3EA;   /* = cream */
  --color-surface:     #FFFFFF;
  --color-border:      #E3E3E3;   /* = grey */
  --color-muted:       #888888;
  --color-accent:      #A1EFDF;   /* = mint */
  --color-accent-lt:   #E8FBF6;
  --color-accent-dk:   #EE2A37;   /* = red  — drives all existing accent-dk rules */
  --color-gold:        #AE9173;   /* = kraft */

  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;

  --radius-sm:  0.375rem;
  --radius-md:  0.75rem;
  --radius-lg:  1.25rem;
  --radius-xl:  2rem;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.07);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.10);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.14);

  --max-w:      1152px;
  --section-py: 4.5rem;
}

/* =========================================
   RESET & BASE
   ========================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

iframe { border: none; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* =========================================
   TYPOGRAPHY
   ========================================= */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

h1 { font-size: clamp(3rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

em {
  font-style: italic;
  color: var(--color-accent-dk);
}

p {
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-muted);
}

strong {
  font-weight: 500;
  color: var(--color-ink);
}

/* =========================================
   SHARED LAYOUT
   ========================================= */
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-py) 2rem;
}

.section-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  display: block;
  margin-bottom: 0.75rem;
}

.section-eyebrow.light {
  color: var(--color-accent);
}

.section-headline {
  font-family: var(--font-serif);
  color: var(--color-ink);
}

.section-sub {
  font-size: 1rem;
  color: var(--color-muted);
  font-weight: 300;
  max-width: 480px;
  margin-top: 0.5rem;
}

.section-divider {
  width: 36px;
  height: 2px;
  background: var(--color-accent-dk);
  margin: 1.25rem 0;
}

.section-alt { background: transparent; }

/* =========================================
   CARDS
   ========================================= */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* =========================================
   BUTTONS
   ========================================= */
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s,
              transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-lg {
  font-size: 0.8rem;
  padding: 0.9rem 1.8rem;
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}
.btn-primary:hover {
  background: var(--color-accent-dk);
  border-color: var(--color-accent-dk);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-accent-dk);
  color: var(--color-accent-dk);
  transform: translateY(-2px);
}

/* Outline button inside hero: white version for dark backgrounds */
.hero-actions .btn-outline {
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  border-color: rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
}
.hero-actions .btn-outline:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.75);
  color: var(--color-white);
}

.btn-ghost {
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  border-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
}
.btn-light:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* =========================================
   SCROLL ANIMATIONS
   ========================================= */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }

/* =========================================
   TOP BAR
   ========================================= */
.topbar {
  background: var(--color-ink);
  color: rgba(255,255,255,0.6);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 30;
}

.topbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.55rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-left strong {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.topbar-divider {
  color: rgba(255,255,255,0.2);
}

.topbar-right {
  display: flex;
  gap: 0.4rem;
}

.lang-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn:hover,
.lang-btn.lang-active {
  background: var(--color-accent-dk);
  border-color: var(--color-accent-dk);
  color: var(--color-white);
}

.status-open   { color: var(--color-accent); font-weight: 500; }
.status-soon   { color: #ffcc44; font-weight: 500; }
.status-closed { color: #ff6b6b; font-weight: 500; }

/* =========================================
   HEADER
   ========================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 243, 234, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

/* Offset for WP admin bar (logged-in view only) */
.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header.header-slim {
  box-shadow: var(--shadow-sm);
}

.site-header.header-slim .header-inner {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: padding 0.3s ease;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: height 0.3s ease;
}

.site-header.header-slim .logo-img {
  height: 30px;
}

.footer-logo {
  display: block;
  margin-bottom: 0.75rem;
}

.footer-logo-img {
  height: 40px;
  width: auto;
  /* Invert to white for dark footer background */
  filter: brightness(0) invert(1);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.2s;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: var(--color-ink); }

.nav-active {
  color: var(--color-accent-dk) !important;
  font-weight: 500 !important;
  border-bottom-color: var(--color-accent-dk) !important;
}

/* ---- Nav links (page links) ---- */
.nav-link {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.2s;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: var(--color-ink); }
.nav-link.is-active {
  color: var(--color-accent-dk);
  font-weight: 500;
  border-bottom-color: var(--color-accent-dk);
}

/* ---- Dropdown nav ---- */
.nav-item { position: relative; }

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.2s;
  font-family: inherit;
}
.nav-dropdown-trigger:hover { color: var(--color-ink); }
.nav-has-dropdown.is-active .nav-dropdown-trigger {
  color: var(--color-accent-dk);
  font-weight: 500;
  border-bottom-color: var(--color-accent-dk);
}

.nav-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
.nav-dropdown-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-has-dropdown {
  padding-bottom: 0.75rem;
  margin-bottom: -0.75rem;
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
.nav-dropdown-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  color: var(--color-ink);
  transition: background 0.15s;
}
.nav-dropdown-link:hover { background: var(--color-bg); }
.nav-dropdown-link.is-active { background: var(--color-bg); }
.ndl { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-ink); }
.ndd { font-size: 0.69rem; color: var(--color-muted); letter-spacing: 0.02em; }

/* ---- Mobile nav groups (accordion) ---- */
.mobile-nav-link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  transition: color 0.2s;
  text-transform: uppercase;
}
.mobile-nav-link:hover { color: var(--color-accent-dk); }
.mobile-nav-link.is-active { color: var(--color-accent-dk); font-weight: 500; }

.mobile-nav-group { display: flex; flex-direction: column; }

.mobile-nav-group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.2s;
  font-family: inherit;
  text-align: left;
}
.mobile-nav-group-btn:hover { color: var(--color-accent-dk); }
.mobile-nav-group.is-open .mobile-nav-group-btn { color: var(--color-ink); }
.mobile-nav-group-btn svg { transition: transform 0.25s ease; }
.mobile-nav-group.is-open .mobile-nav-group-btn svg { transform: rotate(180deg); }

.mobile-nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.75rem;
  margin-top: 0;
}
.mobile-nav-group.is-open .mobile-nav-submenu {
  max-height: 240px;
  margin-top: 0.5rem;
}

.mobile-nav-sublink {
  font-size: 0.82rem;
  color: var(--color-muted);
  padding: 0.2rem 0 0.2rem 0.75rem;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.mobile-nav-sublink:hover { color: var(--color-ink); border-left-color: var(--color-accent); }
.mobile-nav-sublink.is-active { color: var(--color-accent-dk); border-left-color: var(--color-accent-dk); font-weight: 500; }

.header-cta {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* ---- Hamburger ---- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  width: 32px;
  height: 32px;
}

.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Mobile backdrop ---- */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.mobile-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Mobile nav drawer ---- */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(82vw, 360px);
  height: 100dvh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: -8px 0 32px rgba(17, 17, 17, 0.12);
}

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

/* Drawer header */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.mobile-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.mobile-close:hover { color: var(--color-ink); }

/* Nav content area */
.mobile-nav-content {
  flex: 1;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}

.mobile-nav a {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.mobile-nav a:hover { color: var(--color-accent-dk); }

/* CTA strip pinned to drawer bottom */
.mobile-nav-cta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  margin-top: auto;
}

.mobile-nav-cta a {
  text-align: center;
  width: 100%;
}

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

/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  height: 88vh;
  max-height: 780px;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #b8d4e8;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(10,10,10,0.88) 0%,
      rgba(10,10,10,0.60) 35%,
      rgba(10,10,10,0.18) 60%,
      transparent        75%
    ),
    linear-gradient(
      to top,
      rgba(10,10,10,0.45) 0%,
      transparent 40%
    );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 0 2rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-white);
}

.hero-headline em {
  color: var(--color-accent);
  font-style: italic;
}

.hero-sub {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  max-width: 400px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-proof-stars {
  color: #F4C842;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.hero-proof-text {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 768px) {
  .hero { height: auto; min-height: unset; max-height: unset; }
  .hero-bg img { object-position: 65% center; }
  .hero-content { padding: 6rem 1.25rem 5rem; max-width: 100%; }
  .hero-headline { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .hero-sub { font-size: 0.95rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions a { text-align: center; }
  .hero-proof { display: none; }
}

/* ---- Hero scroll indicator ---- */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.35);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  animation: scroll-hint-pulse 2.4s ease-in-out infinite;
}

.scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}

@keyframes scroll-hint-pulse {
  0%, 100% { opacity: 0.35; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.8;  transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 768px) {
  .hero-scroll-hint { display: none; }
}

/* =========================================
   TICKER STRIP
   ========================================= */
.ticker-wrap {
  background: var(--color-accent);
  color: var(--color-ink);
  padding: 0.85rem 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ticker {
  display: inline-flex;
  gap: 2rem;
  animation: ticker-scroll 30s linear infinite;
}

.ticker span { flex-shrink: 0; }

.ticker-dot {
  color: var(--color-accent-dk);
  font-weight: 700;
}

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

.ticker-wrap:hover .ticker {
  animation-play-state: paused;
}

/* =========================================
   BRAND STORY — editorial stacked layout
   ========================================= */
.story-section { background: transparent; }

/* 1. Intro headline */
.story-intro {
  max-width: 780px;
  margin-bottom: 2.5rem;
}

.story-headline {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* 2. Cinematic wide image */
.story-hero-img {
  width: 100%;
  aspect-ratio: 21 / 8;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin-bottom: 2.5rem;
}

.story-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transition: transform 0.9s ease;
}

.story-hero-img:hover img { transform: scale(1.02); }

/* 3. Body — two-column text, editorial */
.story-body-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 0;
}

.story-col-left,
.story-col-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Lead paragraph — larger, darker, sets the tone */
.story-lead {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--color-ink) !important;
  line-height: 1.75 !important;
}

.story-body {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(17, 17, 17, 0.62);
  font-weight: 300;
}

/* Closing detail line */
.story-detail {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-top: 1.5rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 768px) {
  .story-hero-img { aspect-ratio: 3/2; border-radius: var(--radius-lg); margin-bottom: 1.5rem; }
  .story-body-cols { grid-template-columns: 1fr; gap: 0; }
  .story-col-left { margin-bottom: 1rem; }
  .story-lead { font-size: 1.05rem !important; }
  .story-body { font-size: 0.95rem; }
  .story-detail { font-size: 0.68rem; color: var(--color-muted); }
}

/* ---- Trust badges ---- */
.badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 1rem;
}

.badge {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.45rem 1rem;
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: default;
}

.badge:hover {
  background: var(--color-accent-dk);
  color: var(--color-white);
  border-color: var(--color-accent-dk);
}

/* =========================================
   VISIT
   ========================================= */

/* Location button (used in map toggle) */
.location-btn {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.location-btn:hover,
.location-btn.location-active {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}

/* Two location cards */
.visit-locations {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.visit-loc-card {
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.visit-loc-divider {
  width: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}

.visit-loc-top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.visit-loc-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

.visit-loc-tag {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.visit-loc-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.visit-loc-detail a {
  color: var(--color-muted);
  transition: color 0.2s;
}
.visit-loc-detail a:hover { color: var(--color-ink); }

.visit-detail-label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
}

.visit-loc-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* Full-width map */
.visit-map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}

.visit-map-toggle {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: flex;
  gap: 0.35rem;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  padding: 0.3rem;
  border-radius: 100px;
  box-shadow: var(--shadow-md);
}

.visit-map-wrap iframe {
  width: 100%;
  height: 400px;
  display: block;
  border: none;
}

/* Amenities — clean text strip */
.visit-amenities {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 1.25rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.amenity-sep {
  color: var(--color-border);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .visit-locations {
    grid-template-columns: 1fr;
  }
  .visit-loc-divider {
    width: 100%;
    height: 1px;
  }
  .visit-loc-card { padding: 1.75rem; }
  .visit-map-wrap iframe { height: 300px; }
  .visit-amenities { gap: 0.5rem 0.75rem; }
  .amenity-sep { display: none; }
}

/* =========================================
   DEPARTMENTS
   ========================================= */
.departments-section { background: transparent; }

.dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.dept-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
}

.dept-tile:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.dept-image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-border) 100%
  );
}

.dept-tile img {
  width: 100%;
  aspect-ratio: 4/3;
}

.dept-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dept-content h3 { margin: 0.3rem 0; }

.dept-content p {
  font-size: 0.875rem;
  line-height: 1.7;
}

.dept-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin-top: 0.75rem;
  transition: gap 0.2s;
}

.dept-link:hover { gap: 0.7rem; }
.dept-link span { transition: transform 0.2s; }
.dept-link:hover span { transform: translateX(3px); }

/* =========================================
   MENUS
   ========================================= */
.menus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.menu-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.menu-card-image-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-border) 100%
  );
}

.menu-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.menu-card-content h3 { margin: 0.3rem 0; }

.menu-card-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

/* =========================================
   EVENTS
   ========================================= */
.events-section { background: transparent; }

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.event-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.event-day {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-accent-dk);
  flex-shrink: 0;
  width: 3rem;
}

.event-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.event-content h3 { margin: 0.3rem 0; }

.event-time {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin-top: 0.5rem;
}

.event-cta {
  background: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
  flex-direction: column;
  gap: 0.75rem;
}

.event-cta h3 { color: var(--color-white); }
.event-cta p  { color: rgba(255,255,255,0.55) !important; }

.event-cta .btn-primary {
  background: var(--color-accent) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-accent) !important;
  margin-top: 0.5rem;
  align-self: flex-start;
}

.event-cta .btn-primary:hover {
  background: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

/* =========================================
   MEMBERSHIP
   ========================================= */
.membership-section {
  background: var(--color-ink);
  overflow: hidden;
}

.membership-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-py) 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.membership-headline {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--color-white) !important;
  margin: 0.5rem 0;
}

.membership-headline em {
  color: var(--color-accent);
  font-style: italic;
}

.membership-sub {
  color: rgba(255,255,255,0.55) !important;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.membership-perks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.75rem 0;
}

.membership-perks li {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}

.membership-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.membership-image-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(
    135deg,
    rgba(161, 239, 223, 0.12) 0%,
    rgba(161, 239, 223, 0.03) 100%
  );
  border: 1px solid rgba(161, 239, 223, 0.15);
  border-radius: var(--radius-xl);
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  background: var(--color-ink);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4rem 2rem 2.5rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
}

.footer-heading {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.footer-col p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 1.5rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a { transition: color 0.2s; }
.footer-links a:hover { color: rgba(255,255,255,0.7); }

.footer-social-link {
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.footer-social-link:hover { color: rgba(255,255,255,0.9); }

/* =========================================
   BACK TO TOP
   ========================================= */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--color-ink);
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.1);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  z-index: 50;
}

#back-to-top.btt-hidden  { opacity: 0; pointer-events: none; transform: translateY(12px); }
#back-to-top.btt-visible { opacity: 1; pointer-events: all; transform: translateY(0); }
#back-to-top:hover {
  background: var(--color-accent-dk);
  border-color: transparent;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .story-grid       { grid-template-columns: 1fr; gap: 2.5rem; }
  .story-headline   { position: static; }
  .dept-grid        { grid-template-columns: repeat(2, 1fr); }
  .menus-grid       { grid-template-columns: repeat(2, 1fr); }
  .events-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer-top       { grid-template-columns: repeat(2, 1fr); }
  .membership-inner { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
  :root { --section-py: 3rem; }

  .site-nav    { display: none; }
  .header-cta  { display: none; }
  .hamburger   { display: flex; }

  .hero-headline { font-size: clamp(2.8rem, 10vw, 4.5rem); }

  .visit-grid  { grid-template-columns: 1fr; }
  .dept-grid   { grid-template-columns: 1fr; }
  .menus-grid  { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .footer-top  { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .story-values { gap: 1.5rem; }
  .badge-strip  { gap: 0.5rem; }
}

@media (max-width: 480px) {
  .section-inner  { padding: var(--section-py) 1.25rem; }
  .header-inner   { padding: 0.85rem 1.25rem; }
  .topbar-inner   { padding: 0.5rem 1.25rem; }
  .hero-content   { padding: 7rem 1.25rem 5rem; }
}

/* =========================================
   VISUAL ENHANCEMENTS
   Grain textures · Atmospheric backgrounds
   Using brand colors — no palette changes
   ========================================= */

/* ---- Grain texture (reusable data URI) ---- */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");
}

/* section-alt: now handled by page-flow gradient */

.story-section { position: relative; overflow: hidden; }
.story-section .section-inner { position: relative; z-index: 1; }

.visit-section { position: relative; }
.visit-section .section-inner { position: relative; z-index: 1; }

.departments-section {
  position: relative;
  overflow: hidden;
}
.departments-section .section-inner { position: relative; z-index: 1; }

.events-section { position: relative; }
.events-section .section-inner { position: relative; z-index: 1; }

/* =========================================
   MEMBERSHIP — palm beach atmosphere
   ========================================= */
.membership-section {
  position: relative;
  overflow: hidden;
}
.membership-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://spisa.shop/wp-content/uploads/2023/06/lax-member-1024x931.jpg') center / cover no-repeat;
  opacity: 0.13;
  mix-blend-mode: luminosity;
  z-index: 0;
}
/* membership::after radial removed */
.membership-inner {
  position: relative;
  z-index: 1;
}

/* =========================================
   INSTAGRAM SECTION
   ========================================= */
.instagram-section { position: relative; }
.instagram-section .section-inner { position: relative; z-index: 1; }

.insta-header {
  max-width: 540px;
  margin-bottom: 3rem;
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 3rem;
}

.insta-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  display: block;
  background: var(--color-border);
}

.insta-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.insta-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  border-radius: var(--radius-md);
}

.insta-tile-overlay svg {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: #fff;
}

.insta-tile:hover img {
  transform: scale(1.06);
}
.insta-tile:hover .insta-tile-overlay {
  background: rgba(17,17,17,0.42);
}
.insta-tile:hover .insta-tile-overlay svg {
  opacity: 1;
  transform: scale(1);
}

.insta-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.insta-handle {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.insta-handle strong {
  color: var(--color-ink);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .insta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
  }
}

@media (max-width: 480px) {
  .insta-cta { flex-direction: column; align-items: flex-start; }
}

/* =========================================
   STORY SECTION ENHANCEMENTS
   ========================================= */

/* Remove sticky from headline now that image is present */
.story-headline {
  position: static !important;
}

/* Photo below the headline */
.story-img-left {
  margin-top: 2rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.story-img-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.story-img-left:hover img {
  transform: scale(1.04);
}

/* Pull quote */
.story-pull {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.5;
  margin: 1.75rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-accent-dk);
  letter-spacing: -0.01em;
}

/* Stats — stronger visual treatment */
.story-values {
  display: flex;
  gap: 0;
  margin-top: 2.5rem;
  padding-top: 0;
  border-top: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.story-value {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.5rem 1.75rem;
  border-right: 1px solid var(--color-border);
}

.story-value:last-child {
  border-right: none;
}

.value-number {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--color-accent-dk);
  line-height: 1;
}

.value-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  font-weight: 500;
}

/* Three-image strip below the grid */
.story-img-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 3rem 0 2.5rem;
}

.story-strip-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.story-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.story-strip-item:hover img {
  transform: scale(1.04);
}

/* Responsive */
@media (max-width: 768px) {
  .story-img-left { aspect-ratio: 16 / 9; }
  .story-values { flex-direction: column; }
  .story-value { border-right: none; border-bottom: 1px solid var(--color-border); }
  .story-value:last-child { border-bottom: none; }
  .story-img-strip { grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
}

@media (max-width: 480px) {
  .story-img-strip { grid-template-columns: repeat(2, 1fr); }
  .story-strip-item:last-child { display: none; }
}

/* =========================================
   VISIT STRIP
   ========================================= */
.visit-strip {
  background: var(--color-ink);
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.visit-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.visit-strip-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
}

.visit-strip-info strong { color: rgba(255,255,255,0.92); font-weight: 500; }
.strip-sep { color: rgba(255,255,255,0.2); }

.visit-strip-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.strip-btn-primary {
  background: var(--color-accent-dk);
  color: #fff;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.strip-btn-primary:hover { opacity: 0.82; transform: translateY(-1px); }

.strip-btn-ghost {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.strip-btn-ghost:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }

@media (max-width: 768px) {
  .visit-strip-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .visit-strip-actions { width: 100%; }
  .strip-btn-primary, .strip-btn-ghost { flex: 1; text-align: center; }
}

/* =========================================
   CATERING CTA SECTION
   ========================================= */
.catering-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
}

.catering-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://spisa.shop/wp-content/uploads/2025/07/Catering.png') center / cover no-repeat;
  opacity: 0.15;
  mix-blend-mode: luminosity;
  z-index: 0;
}

.catering-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 65% 50%,
    rgba(238,42,55,0.09) 0%, transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.catering-cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 6rem 2rem;
  display: flex;
  justify-content: center;
  text-align: center;
}

.catering-cta-content { max-width: 640px; }

.catering-cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-white);
  margin: 0.5rem 0 1.25rem;
}

.catering-cta-headline em {
  color: var(--color-accent);
  font-style: italic;
}

.catering-cta-sub {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.58);
  margin-bottom: 2.5rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.catering-cta-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .catering-cta-actions { flex-direction: column; align-items: center; }
  .catering-cta-actions .btn-light,
  .catering-cta-actions .btn-ghost { width: 100%; max-width: 280px; }
}

/* =========================================
   MOBILE OPTIMISATION — comprehensive
   All mobile overrides in one place
   ========================================= */

@media (max-width: 768px) {

  /* ---- Global ---- */
  :root { --section-py: 2.5rem; }

  h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }

  /* ---- Topbar ---- */
  .topbar-inner { padding: 0.5rem 1rem; }

  /* ---- Header ---- */
  .header-inner   { padding: 0.85rem 1rem; }
  .site-nav       { display: none; }
  .header-cta     { display: none; }
  .hamburger      { display: flex; }
  .logo-img       { height: 32px; }

  /* ---- Mobile nav ---- */
  .mobile-nav     { padding: 1.25rem 1rem; }
  .mobile-nav a   { font-size: 1rem; padding: 0.25rem 0; }
  .mobile-nav-cta { flex-direction: column; }
  .mobile-nav-cta a { text-align: center; }

  /* ---- Hero ---- */
  .hero-content {
    left: 1.25rem;
    right: 1.25rem;
    max-width: 100%;
  }
  .hero-headline  { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-sub       { font-size: 0.9rem; }
  .hero-actions   { flex-direction: column; gap: 0.6rem; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; justify-content: center; }
  .hero-proof     { display: none; }

  .hero-bar-inner { padding: 0.75rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .hero-bar-left  { font-size: 0.68rem; gap: 0.5rem; }
  .hero-bar-loc   { display: none; }
  .hero-bar-right { width: 100%; }
  .hero-bar-btn   { justify-content: center; padding: 0.55rem 0.75rem; font-size: 0.68rem; width: 100%; }

  /* ---- Ticker ---- */
  .ticker-wrap    { font-size: 0.65rem; padding: 0.65rem 0; }

  /* ---- Story ---- */
  .story-intro    { margin-bottom: 1.5rem; }
  .story-headline { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .story-hero-img { aspect-ratio: 3/2; border-radius: var(--radius-lg); margin-bottom: 1.5rem; }
  .story-body-cols { grid-template-columns: 1fr; gap: 0; }
  .story-col-left { margin-bottom: 1rem; }
  .story-lead     { font-size: 1.05rem !important; line-height: 1.7 !important; }
  .story-body     { font-size: 0.95rem; line-height: 1.8; }
  .story-detail   { font-size: 0.7rem; color: var(--color-muted); letter-spacing: 0.08em; }

  /* ---- Section inner ---- */
  .section-inner  { padding: var(--section-py) 1.25rem; }

  /* ---- Visit ---- */
  .visit-locations { grid-template-columns: 1fr; }
  .visit-loc-divider { width: 100%; height: 1px; }
  .visit-loc-card { padding: 1.5rem; }
  .visit-loc-name { font-size: 1.25rem; }
  .visit-map-wrap iframe { height: 280px; }
  .visit-map-toggle { top: 0.6rem; left: 0.6rem; }
  .visit-amenities { font-size: 0.65rem; padding: 1rem; gap: 0.4rem 0.6rem; }
  .amenity-sep    { display: none; }

  /* ---- Departments ---- */
  .dept-grid      { grid-template-columns: 1fr; }
  .dept-tile img  { aspect-ratio: 16/9; }

  /* ---- Menus ---- */
  .menus-grid     { grid-template-columns: 1fr; }
  .menu-card-actions { flex-direction: column; }
  .menu-card-actions a { text-align: center; }

  /* ---- Events ---- */
  .events-grid    { grid-template-columns: 1fr; }
  .event-cta      { padding: 1.5rem; }

  /* ---- Catering CTA ---- */
  .catering-cta-inner  { padding: 4rem 1.25rem; }
  .catering-cta-actions { flex-direction: column; align-items: center; }
  .catering-cta-actions .btn-light,
  .catering-cta-actions .btn-ghost { width: 100%; max-width: 320px; }

  /* ---- Instagram ---- */
  .insta-grid     { grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
  .insta-cta      { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
  .insta-cta .btn-primary { width: 100%; justify-content: center; }

  /* ---- Membership ---- */
  .membership-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem; }
  .membership-image { display: none; }
  .membership-headline { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }

  /* ---- Footer ---- */
  .footer-top     { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom  { flex-direction: column; gap: 0.75rem; text-align: center; }
  .footer-inner   { padding: 2.5rem 1.25rem 1.75rem; }
  .footer-links   { justify-content: center; }
  .logo-img.footer-logo-img { height: 32px; }

  /* ---- Back to top ---- */
  #back-to-top { bottom: 1.25rem; right: 1.25rem; width: 40px; height: 40px; }

}

/* ---- 480px — tighter phones ---- */
@media (max-width: 480px) {
  .hero-headline  { font-size: clamp(2.2rem, 9vw, 3rem); }
  .insta-grid     { grid-template-columns: repeat(2, 1fr); }
  .hero-bar-right { grid-template-columns: 1fr; }
  .hero-bar-btn   { width: 100%; }
  .visit-loc-actions { flex-direction: column; }
  .visit-loc-actions a { text-align: center; }
  .catering-cta-actions .btn-light,
  .catering-cta-actions .btn-ghost { max-width: 100%; }
}


/* =========================================
   SECTION BACKGROUNDS — clean & simple
   All light sections share the base linen.
   Only dark sections break the flow.
   ========================================= */

/* Single clean base — no radial blobs */
body {
  background-color: var(--color-bg);
}

/* All light sections: transparent, flow with body */
.story-section,
.visit-section,
.departments-section,
.menus-section,
.events-section,
.instagram-section {
  background: transparent !important;
}

/* Visit section: mint background */
.visit-section {
  background: var(--color-accent) !important;
}

/* Keep the section-alt gradient override clean */
.section-alt {
  background: transparent !important;
}

/* No border dividers — sections separated by spacing only */

/* Dark sections keep their solid backgrounds */
.catering-cta  { background-color: var(--color-ink) !important; }
.membership-section { background-color: var(--color-ink) !important; }

/* =========================================
   PAGE HERO — compact variant for sub-pages
   ========================================= */
.hero-page {
  height: 62vh;
  max-height: 680px;
  min-height: 440px;
}

.hero-page .hero-bg img {
  object-position: center 40%;
}

@media (max-width: 768px) {
  .hero-page { height: auto; min-height: unset; max-height: unset; }
}

/* =========================================
   SWEDISH SHELF — product names grid
   ========================================= */
.shelf-section { background: transparent; }

.shelf-intro { max-width: 640px; margin-bottom: 3rem; }

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.shelf-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: default;
}

.shelf-item:hover {
  background: var(--color-accent-lt);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

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

/* =========================================
   SOURCING PHILOSOPHY — two-column layout
   ========================================= */
.sourcing-section { background: transparent; }

.sourcing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.sourcing-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sourcing-body {
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(17, 17, 17, 0.62);
  font-weight: 300;
  margin-top: 0.75rem;
}

.sourcing-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.sourcing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.sourcing-image:hover img { transform: scale(1.03); }

@media (max-width: 768px) {
  .sourcing-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
  .sourcing-image { aspect-ratio: 3 / 2; }
}

/* =========================================
   GROCERY CATEGORY CARDS — 4×2 grid
   ========================================= */
.grocery-cats-section { background: transparent; }

.grocery-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

.grocery-cat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s, transform 0.3s;
}

.grocery-cat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.grocery-cat-top {
  padding: 1.4rem 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.grocery-cat-icon {
  width: 40px;
  height: 40px;
  background: var(--color-accent-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  flex-shrink: 0;
}

.grocery-cat-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-ink);
}

.grocery-cat-num {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
}

.grocery-cat-name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0.2rem 0 0;
}

.grocery-cat-items {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--color-muted);
  font-weight: 300;
  margin-top: 0.45rem;
}

.grocery-cat-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.grocery-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.grocery-cat-card:hover .grocery-cat-img img {
  transform: scale(1.06);
}

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

@media (max-width: 480px) {
  .grocery-cats-grid { grid-template-columns: 1fr; }
  .grocery-cat-img   { aspect-ratio: 16/9; }
}

/* =========================================
   IN-STORE FEATURES — 6-col strip
   ========================================= */
.in-store-section { background: var(--color-surface); }

.in-store-header {
  text-align: center;
  margin-bottom: 3rem;
}

.in-store-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 0.5rem;
}

.in-store-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 2.5rem;
}

.in-store-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.in-store-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  margin-bottom: 0.35rem;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.in-store-item:hover .in-store-icon {
  background: var(--color-accent-lt);
  border-color: var(--color-accent);
}

.in-store-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-ink);
  fill: none;
  stroke-width: 1.5;
}

.in-store-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.in-store-desc {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-muted);
  font-weight: 300;
}

@media (max-width: 1024px) {
  .in-store-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

@media (max-width: 600px) {
  .in-store-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* =========================================
   GROCERY VALUES STRIP — 4 trust items
   ========================================= */
.grocery-values-strip {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 1.25rem 0;
}

.grocery-values-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.grocery-value-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.grocery-value-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-muted);
  fill: none;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .grocery-values-inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0 1.25rem; }
}

@media (max-width: 480px) {
  .grocery-values-inner { grid-template-columns: 1fr; }
}

/* =========================================
   GROCERIES PAGE — editorial layout
   ========================================= */

.page-intro-section { background: transparent; }

.page-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: flex-start;
  padding-top: 2rem;
}

.page-intro-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.page-breadcrumb a {
  color: var(--color-muted);
  transition: color 0.2s;
}
.page-breadcrumb a:hover { color: var(--color-ink); }

.page-intro-headline {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0.25rem 0;
}

.page-intro-desc {
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(17, 17, 17, 0.62);
  font-weight: 300;
  max-width: 480px;
  margin-top: 0.25rem;
}

.page-intro-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.page-intro-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.page-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.page-intro-image:hover img { transform: scale(1.03); }

/* -- Category rows -- */
.cat-row-section { background: transparent; }

.cat-row-alt { background: var(--color-surface) !important; }

.cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.cat-row-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.cat-row-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cat-row-image:hover img { transform: scale(1.03); }

.cat-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cat-row-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.cat-row-title em {
  font-style: italic;
  color: var(--color-accent-dk);
}

.cat-row-desc {
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(17, 17, 17, 0.62);
  font-weight: 300;
  margin-top: 0.25rem;
  max-width: 420px;
}

.cat-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.cat-tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: default;
}

.cat-tag:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

/* -- Store strip (darker variant of visit-strip) -- */
.store-strip {
  background: var(--color-ink);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.store-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.store-strip-info {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
}

.store-strip-info strong {
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}

.store-strip-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* -- Responsive -- */
@media (max-width: 1024px) {
  .page-intro-grid { gap: 3rem; }
  .cat-row         { gap: 3rem; }
}

@media (max-width: 768px) {
  .page-intro-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .page-intro-image {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg);
  }
  .cat-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cat-row-reverse .cat-row-info  { order: 1; }
  .cat-row-reverse .cat-row-image { order: 2; }
  .cat-row-image   { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); }
  .cat-row-desc    { max-width: 100%; }
  .store-strip-inner  { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .store-strip-actions { width: 100%; }
  .store-strip-actions a { flex: 1; text-align: center; }
}

/* =========================================
   SCANDINAVIAN SNOW BACKGROUND
   ========================================= */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
}

@media (prefers-reduced-motion: reduce) {
  #bg-canvas { display: none; }
}

/* =========================================
   DELI — philosophy quote strip
   ========================================= */
.page-philosophy-strip {
  background: var(--color-ink);
  padding: 4.5rem 0;
  text-align: center;
}

.page-philosophy-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  max-width: 800px;
  margin: 0 auto 1.25rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.page-philosophy-attr {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

/* =========================================
   BAKERY — "09:00" fresh time strip
   ========================================= */
.bakery-fresh-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 0;
}

.bakery-fresh-inner {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}

.bakery-fresh-time {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.bakery-fresh-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin-bottom: 0.5rem;
}

.bakery-fresh-sub {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.75;
  font-weight: 300;
  max-width: 400px;
}

.bakery-fresh-link {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.bakery-fresh-link:hover { color: var(--color-accent-dk); }

@media (max-width: 768px) {
  .bakery-fresh-inner { gap: 1.5rem; }
  .bakery-fresh-link  { margin-left: 0; }
}

/* =========================================
   SIBYLLA — 1932 heritage banner
   ========================================= */
.sibylla-heritage {
  background: var(--color-ink);
  padding: 4.5rem 0;
}

.sibylla-heritage-inner {
  display: flex;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.sibylla-heritage-year {
  font-family: var(--font-serif);
  font-size: clamp(5.5rem, 12vw, 10rem);
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.sibylla-heritage-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.65rem;
}

.sibylla-heritage-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.sibylla-heritage-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.85;
  font-weight: 300;
  max-width: 520px;
}

@media (max-width: 768px) {
  .sibylla-heritage-inner { gap: 2rem; }
  .sibylla-heritage-year  { font-size: 5rem; }
}

/* =========================================
   EVENTS — upcoming dates strip
   ========================================= */
.events-upcoming {
  display: flex;
  align-items: center;
  gap: 3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  margin: 3rem 0;
  flex-wrap: wrap;
}

.events-upcoming-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.events-upcoming-day {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
}

.events-upcoming-date {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.03em;
}

.events-upcoming-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-ink);
  margin-top: 0.35rem;
}

.events-upcoming-time {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-weight: 300;
}

.events-upcoming-sep {
  font-size: 2rem;
  color: var(--color-border);
  flex-shrink: 0;
}

.events-upcoming-insta {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.events-upcoming-insta:hover { color: var(--color-ink); }

@media (max-width: 768px) {
  .events-upcoming { padding: 1.75rem; gap: 1.5rem; }
  .events-upcoming-insta { margin-left: 0; }
  .events-upcoming-sep { display: none; }
}

/* =========================================
   CATERING — 3-step process (dark)
   ========================================= */
.catering-steps {
  background: var(--color-ink);
  padding: var(--section-py) 0;
}

.catering-steps-header {
  margin-bottom: 3.5rem;
}

.catering-steps-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 0.5rem;
}

.catering-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 3rem;
}

.catering-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.catering-step-num {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.04em;
  margin-bottom: 0.25rem;
}

.catering-step .catering-step-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: rgba(255,255,255,0.92);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.catering-step-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.85;
  font-weight: 300;
}

.catering-step-desc a {
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.catering-step-desc a:hover { color: var(--color-accent); }

@media (max-width: 768px) {
  .catering-steps-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .catering-step-num   { font-size: 3rem; }
}

/* =========================================
   PAGE INTRO ACTIONS — CTA row on sub-pages
   ========================================= */
.page-intro-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* =========================================
   EVENT PAGE CARDS — large editorial layout
   ========================================= */
.event-page-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-bottom: 4rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--color-border);
}

.event-page-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.event-page-card-reverse {
  direction: rtl;
}

.event-page-card-reverse > * {
  direction: ltr;
}

.event-page-card-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.event-page-day {
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
  letter-spacing: -0.04em;
}

.event-page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0.5rem 0 1rem;
}

.event-page-desc {
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(17, 17, 17, 0.62);
  font-weight: 300;
  margin-bottom: 0.75rem;
}

.event-page-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
}

.event-page-features li {
  padding: 0.55rem 0;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 400;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.event-page-features li::before {
  content: '—';
  color: var(--color-accent-dk);
  font-weight: 500;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .event-page-card,
  .event-page-card-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 2rem;
  }
  .event-page-day { font-size: 3.5rem; }
}

/* =========================================
   FOOTER UTILITY
   ========================================= */
.footer-email-link {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-email-link:hover {
  color: rgba(255, 255, 255, 0.75);
}
.footer-note {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
}


/* =========================================
   STORY — simplified single column
   ========================================= */
.story-body-simple {
  max-width: 680px;
  margin: 2.5rem auto 0;
  text-align: left;
}

.story-body-simple .story-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(17,17,17,0.62);
  font-weight: 300;
}

.story-body-simple .story-pull {
  border-left: 2px solid var(--color-accent-dk);
  padding-left: 1.25rem;
  margin: 1.75rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-ink);
  background: none;
  quotes: none;
}

.story-body-simple .story-pull::before,
.story-body-simple .story-pull::after { content: none; }

.story-body-simple .story-detail {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 1.5rem;
  font-weight: 400;
}

@media (max-width: 768px) {
  .story-body-simple { max-width: 100%; }
}


/* =========================================
   DEPARTMENTS CAROUSEL
   ========================================= */
.dept-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.dept-carousel-header .section-headline { margin: 0; }

.dept-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  cursor: grab;
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.dept-carousel::-webkit-scrollbar { display: none; }
.dept-carousel.is-dragging { cursor: grabbing; user-select: none; }

.dept-carousel-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.dept-carousel-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.dept-carousel-card > img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.dept-carousel-card:hover > img { transform: scale(1.04); }

/* Cards inside carousel use same dept-content class — remap to carousel context */
.dept-carousel .dept-content { padding: 1.5rem; }
.dept-carousel .dept-content h3 { margin: 0.3rem 0 0.6rem; }
.dept-carousel .dept-content p { font-size: 0.875rem; line-height: 1.7; margin-bottom: 1.25rem; }

@media (max-width: 1024px) {
  .dept-carousel-card { flex: 0 0 210px; }
}

@media (max-width: 640px) {
  .dept-carousel-card { flex: 0 0 185px; }
}


/* =========================================
   CANDY SHOP
   ========================================= */
.candy-section {
  background: var(--color-ink);
  overflow: hidden;
  position: relative;
}

.candy-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(161,239,223,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.candy-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-py) 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.candy-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

.candy-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--color-white);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.candy-headline em {
  color: var(--color-accent);
  font-style: italic;
}

.candy-section .section-divider {
  background: rgba(255,255,255,0.12);
  margin: 1.25rem 0;
}

.candy-sub {
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  max-width: 440px;
  margin-bottom: 2rem;
}

.candy-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.candy-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
  font-weight: 300;
}

.candy-visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
}

.candy-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.candy-visual:hover img { transform: scale(1.04); }

@media (max-width: 1024px) {
  .candy-inner { gap: 2.5rem; }
}

@media (max-width: 768px) {
  .candy-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .candy-visual {
    aspect-ratio: 16/9;
    order: -1;
  }
  .candy-sub { max-width: 100%; }
}


/* =========================================
   TOPBAR — MOBILE
   ========================================= */
@media (max-width: 768px) {
  .topbar-address {
    display: none;
  }

  .topbar-sep {
    display: none;
  }

  .topbar-inner {
    padding: 0.45rem 1rem;
  }

  .topbar-left {
    gap: 0;
  }
}


/* =========================================
   INFINITE CAROUSEL OVERRIDES
   ========================================= */

/* Outer container: clips the track, no scroll */
.dept-carousel {
  overflow: hidden !important;
  cursor: default !important;
  scrollbar-width: auto;
}

/* The scrolling track */
.dept-carousel-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: deptScroll 40s linear infinite;
  padding-bottom: 0.5rem;
}

/* Pause on hover so users can read/click cards */
.dept-carousel:hover .dept-carousel-track,
.dept-carousel:focus-within .dept-carousel-track {
  animation-play-state: paused;
}

@keyframes deptScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--carousel-dist, -50%)); }
}

/* Accessibility: stop animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dept-carousel-track {
    animation: none !important;
    flex-wrap: wrap;
  }
}

/* ---- Full card clickability (stretched link) ---- */
.dept-carousel .dept-carousel-card {
  position: relative;
  cursor: pointer;
}

/* The dept-link pseudo-element covers the entire card */
.dept-carousel .dept-carousel-card .dept-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* IMPORTANT: the link must stay position:static (no position here) so its
   ::after overlay resolves to the .dept-carousel-card (which is
   position:relative) and covers the whole card. Do NOT add pointer-events:none
   or position:relative — either one breaks full-card click navigation. */


/* =========================================
   HERO VIDEO
   ========================================= */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    /* Keep poster visible, pause video via JS */
    animation: none;
  }
}


/* =========================================
   GROCERY PAGE — ONLY HERE STATEMENT
   ========================================= */
.grocery-statement-section {
  background: var(--color-ink);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.grocery-statement-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(161,239,223,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.grocery-statement-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.grocery-statement-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--color-white);
  line-height: 1.5;
  font-style: italic;
  font-weight: 400;
}

.grocery-statement-text strong {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1em;
}

.grocery-statement-sub {
  margin-top: 2rem;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
}


/* =========================================
   GROCERY PAGE — PRODUCT SPOTLIGHTS (editorial)
   ========================================= */
.grocery-spotlights-section {
  background: var(--color-bg);
  padding: var(--section-py) 2rem;
}

.grocery-spotlights-header {
  text-align: left;
  margin-bottom: 2.5rem;
}

.grocery-spotlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Editorial — no card treatment */
.grocery-spotlight {
  background: none;
  border: none;
  border-radius: 0;
}

.grocery-spotlight-img-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.grocery-spotlight-img-wrap img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}

.grocery-spotlight-body {
  padding: 1.25rem 0 0;
}

.grocery-spotlight-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin-bottom: 0.5rem;
}

.grocery-spotlight-name {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-ink);
  line-height: 1.1;
  margin-bottom: 0.65rem;
  font-weight: 400;
}

.grocery-spotlight-copy {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(17,17,17,0.62);
  line-height: 1.8;
}

@media (max-width: 1024px) {
  .grocery-spotlights-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .grocery-spotlights-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* =========================================
   GROCERY PAGE — SIMPLIFIED AISLE GRID
   ========================================= */
.grocery-aisles-section {
  background: var(--color-surface);
  padding: var(--section-py) 2rem;
}

.grocery-aisles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

.grocery-aisle-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  transition: box-shadow 0.25s ease;
}

.grocery-aisle-card:hover {
  box-shadow: 0 4px 16px rgba(17,17,17,0.08);
}

.grocery-aisle-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.grocery-aisle-card:hover img {
  transform: scale(1.04);
}

.grocery-aisle-info {
  padding: 0.9rem 1rem;
}

.grocery-aisle-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}

.grocery-aisle-desc {
  font-size: 0.72rem;
  color: var(--color-muted);
  line-height: 1.5;
  font-weight: 300;
}

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

@media (max-width: 640px) {
  .grocery-aisles-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .grocery-aisle-info { padding: 0.75rem; }
}


/* =========================================
   GROCERY PAGE — MERGED STATEMENT HEADING
   ========================================= */
.grocery-statement-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--color-ink);
  max-width: 720px;
  margin: 0.25rem 0 0;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .grocery-statement-heading { font-size: clamp(1.4rem, 4vw, 1.8rem); }
}


/* =========================================
   PAGE INTRO — expanded description text
   ========================================= */
.page-intro-desc {
  font-size: 1.1rem !important;
  line-height: 1.9 !important;
  max-width: 540px !important;
}


/* =========================================
   GROCERIES PAGE — DECORATIVE EFFECTS
   ========================================= */

/* ─── 1. Hero image: lift off the cream background ─── */
.page-intro-image {
  box-shadow:
    0 24px 64px rgba(17,17,17,0.10),
    0 4px 16px rgba(17,17,17,0.05);
}

/* ─── 2. Hero section: subtle mint bloom in bottom-left ─── */
/* Anchors to where the headline sits, adds warmth without competing */
.page-intro-section {
  position: relative;
  overflow: hidden;
}

.page-intro-section::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(161, 239, 223, 0.14) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

/* Keep page-intro content above the bloom */
.page-intro-section .section-inner {
  position: relative;
  z-index: 1;
}


/* ─── 3. Spotlights section: mint bloom upper-right ─── */
/* Mirrors the technique used on candy/membership dark sections,
   inverted for a light background. Barely visible but adds depth. */
.grocery-spotlights-section {
  position: relative;
  overflow: hidden;
}

.grocery-spotlights-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(161, 239, 223, 0.20) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.grocery-spotlights-section .section-inner {
  position: relative;
  z-index: 1;
}


/* ─── 4. Decorative opening quote on the statement heading ─── */
/* Typographic only — signals "this is a claim worth reading"    */
.grocery-statement-heading::before {
  content: '\201C';
  display: block;
  font-family: var(--font-serif);
  font-size: 7rem;
  line-height: 0.55;
  color: var(--color-accent);
  opacity: 0.45;
  margin-bottom: 0.5rem;
  font-style: normal;
  font-weight: 400;
}


/* ─── 5. Aisle grid: white background + mint section divider ─── */
/* The white break creates visual rhythm after two cream sections.
   The mint top border signals freshness and section transition.    */
.grocery-aisles-section {
  background: var(--color-surface);
  border-top: 2px solid rgba(161, 239, 223, 0.55);
  position: relative;
}

/* Subtle kraft warmth — a very faint warm gradient at the top
   of the aisle grid. Evokes the tactile feel of a real market. */
.grocery-aisles-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(
    to bottom,
    rgba(174, 145, 115, 0.05) 0%,
    transparent 100%
  );
  pointer-events: none;
}


/* =========================================
   DELI PAGE — FEATURED DISHES SECTION
   ========================================= */
.deli-spotlights-section {
  background: var(--color-surface);
  padding: var(--section-py) 2rem;
}

.deli-spotlights-header {
  margin-bottom: 2.5rem;
}


/* =========================================
   DELI PAGE — TABBED MENU
   ========================================= */
.deli-menu-section {
  background: var(--color-bg);
  padding: var(--section-py) 2rem;
}

.deli-menu-header {
  margin-bottom: 2.5rem;
}

.deli-menu-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0.25rem 0;
}

.deli-menu-sub {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--color-muted);
  max-width: 540px;
  line-height: 1.75;
}

/* ── Tabs ── */
.menu-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 3rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.menu-tabs::-webkit-scrollbar { display: none; }

.menu-tab-btn {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-tab-btn.is-active {
  color: var(--color-accent-dk);
  border-bottom-color: var(--color-accent-dk);
}

.menu-tab-btn:hover:not(.is-active) {
  color: var(--color-ink);
}

/* ── Tab panels ── */
.menu-tab-panel {
  display: none;
}

.menu-tab-panel.is-active {
  display: block;
  animation: tabFadeIn 0.25s ease;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel grid ── */
.menu-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

/* ── Category ── */
.menu-category-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin-bottom: 0.35rem;
  display: block;
}

.menu-category-heading {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-ink);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.menu-category-intro {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
  font-style: italic;
}

/* ── Items ── */
.menu-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--color-ink);
  border-bottom: 1px solid rgba(17,17,17,0.05);
  line-height: 1.35;
  font-weight: 400;
}

.menu-item:last-child { border-bottom: none; }

.menu-item-sub {
  display: block;
  font-size: 0.73rem;
  color: var(--color-muted);
  font-weight: 300;
  margin-top: 0.15rem;
  line-height: 1.4;
}

.menu-item-gluten {
  font-size: 0.65rem;
  color: var(--color-accent-dk);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Featured item (Toast Skagen "The Classic" style) ── */
.menu-item.menu-item-featured {
  background: rgba(161, 239, 223, 0.16);
  border: 1px solid rgba(161, 239, 223, 0.55);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  margin: 0.35rem 0;
  border-bottom: 1px solid rgba(161, 239, 223, 0.55) !important;
}

.menu-item-featured-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  display: block;
  margin-bottom: 0.25rem;
}

.menu-item.menu-item-featured strong {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  color: var(--color-ink);
}

/* ── Daily special box ── */
.menu-daily-special {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.menu-daily-text {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.menu-insta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  text-decoration: none;
  transition: opacity 0.2s;
}

.menu-insta-link:hover { opacity: 0.7; }

/* ── PDF row ── */
.menu-pdf-row {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.menu-pdf-note {
  font-size: 0.82rem;
  color: var(--color-muted);
  font-style: italic;
  max-width: 440px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .menu-panel-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .menu-panel-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .menu-tab-btn    { padding: 0.75rem 1.25rem; font-size: 0.68rem; }
  .menu-pdf-row    { flex-direction: column; align-items: flex-start; }
}


/* =========================================
   GROCERIES — CORRECTED SECTION RHYTHM
   cream → white → cream → dark
   ========================================= */
.grocery-spotlights-section { background: var(--color-surface); }
.grocery-aisles-section     { background: var(--color-bg); border-top: none; }


/* =========================================
   DESIGN LANGUAGE EXPANSION
   Inspired by the Spisa menu PDF:
   mint as section colour, dotted borders,
   script accents, perforated callouts.
   ========================================= */

/* ── 1. INSTAGRAM SECTION — Mint background ── */
.instagram-section--mint {
  background: var(--color-accent) !important;
}

/* All text inside mint section darkens to ink */
.instagram-section--mint .section-eyebrow,
.instagram-section--mint .insta-handle strong,
.instagram-section--mint .insta-handle {
  color: var(--color-ink) !important;
}

/* Override the large Instagram handle to be ink on mint */
.instagram-section--mint h2,
.instagram-section--mint .section-headline {
  color: var(--color-ink) !important;
}

.instagram-section--mint .insta-sub {
  color: rgba(17,17,17,0.65) !important;
}

/* Follow button inverted for mint background */
.instagram-section--mint .btn-primary {
  background: var(--color-ink) !important;
  color: var(--color-white) !important;
  border-color: var(--color-ink) !important;
}

.instagram-section--mint .btn-primary:hover {
  background: var(--color-accent-dk) !important;
  border-color: var(--color-accent-dk) !important;
}

/* Insta tile overlays keep their dark hover */
.instagram-section--mint .insta-tile-overlay {
  background: rgba(17,17,17,0) !important;
}
.instagram-section--mint .insta-tile:hover .insta-tile-overlay {
  background: rgba(17,17,17,0.42) !important;
}


/* ── 2. AMENITY PILLS — Mint treatment ── */
/* The "Free parking nearby · Outdoor terrace" strip */
.visit-amenities-strip {
  background: rgba(161, 239, 223, 0.18) !important;
  border-top: 1px solid rgba(161, 239, 223, 0.4) !important;
  border-bottom: 1px solid rgba(161, 239, 223, 0.4) !important;
}

.visit-amenity-item,
.amenity-item {
  color: var(--color-ink) !important;
  font-weight: 500 !important;
}

.amenity-sep { color: var(--color-accent-dk) !important; }


/* ── 3. DOTTED / PERFORATED BORDER UTILITY ── */
/* Applied to callout boxes, featured items, special sections */
/* Echoes the zipper/perforation pattern in the menu PDF */
.perf-border {
  border: 1.5px dashed rgba(161, 239, 223, 0.7) !important;
  border-radius: var(--radius-sm) !important;
}

/* Override the solid mint border on Toast Skagen featured item */
.menu-item.menu-item-featured {
  border: 1.5px dashed rgba(161, 239, 223, 0.7) !important;
}

/* Candy section badge gets dotted treatment too */
.candy-badge {
  border: 1.5px dashed rgba(17,17,17,0.2);
}


/* ── 4. SCRIPT ACCENT CLASS ── */
/* Small handwritten-note moments, like "In the garage below us" */
/* Uses DM Serif Display italic at small size for the handwriting feel */
.script-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.01em;
  display: block;
}

/* On dark backgrounds */
.script-accent-light {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.01em;
  display: block;
}


/* ── 5. MINT SECTION DIVIDER MODIFIER ── */
.section-divider.mint {
  background: var(--color-accent) !important;
}


/* ── 6. FREE PARKING BANNER ── */
.parking-banner {
  background: var(--color-ink);
  position: relative;
  overflow: hidden;
  padding: 3rem 2rem;
}

/* Subtle illustration texture — large faint circular mark */
.parking-banner::before {
  content: 'P';
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: 22rem;
  font-weight: 700;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.parking-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.parking-script {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-accent);
  font-weight: 400;
  display: block;
}

.parking-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
}

/* "Free" gets the mint accent */
.parking-headline strong,
.parking-headline em {
  color: var(--color-accent);
  font-style: italic;
}

.parking-note {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: block;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .parking-banner { padding: 2.5rem 1.25rem; }
  .parking-banner::before { display: none; }
}


/* =========================================
   FOOD PHOTO AUTO-SCROLL STRIP
   Full-width, no text, pure visual texture.
   Sits between Story and Visit sections.
   ========================================= */
.food-photo-strip {
  overflow: hidden;
  height: 340px;
  position: relative;
  cursor: default;
}

/* Fade edges to cream — blends with surrounding sections */
.food-photo-strip::before,
.food-photo-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.food-photo-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
}
.food-photo-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%);
}

.food-photo-track {
  display: flex;
  gap: 0.6rem;
  height: 100%;
  width: max-content;
  animation: foodScroll 55s linear infinite;
}

.food-photo-strip:hover .food-photo-track {
  animation-play-state: paused;
}

@keyframes foodScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--food-scroll-dist, -50%)); }
}

.food-photo-item {
  height: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

/* Landscape images get wider ratio */
.food-photo-item.is-landscape {
  aspect-ratio: 4/3;
}

.food-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.food-photo-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .food-photo-strip { height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .food-photo-track { animation: none; }
  .food-photo-strip { overflow-x: auto; }
}


/* =========================================
   DELI MENU BOARD — Phase 19
   Digital version of the printed SPISA menu
   ========================================= */

/* ── Override Phase 15 background — section is now turquoise ── */
.deli-menu-section {
  background: var(--color-accent) !important;
  padding: 0 !important;
}

/* ── Outer turquoise frame ── */
.menu-board-frame {
  padding: 3rem 2rem 2.5rem;
  position: relative;
}

/* ── Red "BIENVENIDOS" welcome headline ── */
.menu-board-welcome-wrap {
  text-align: center;
  margin-bottom: 1.75rem;
}

.menu-board-welcome-headline {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--color-accent-dk);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* ── White paper board ── */
.menu-board-paper {
  background:
    radial-gradient(circle at 18% 12%, rgba(0,0,0,.018) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,.014) 0 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.008) 0 1px, transparent 1px),
    #FFFDF8;
  background-size: 22px 22px, 30px 30px, 18px 18px, auto;
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 0 rgba(0,0,0,0.06),
    0 12px 40px rgba(0,0,0,0.14),
    0 40px 100px rgba(0,0,0,0.10);
  overflow: hidden;
  max-width: 1360px;
  margin: 0 auto;
}


/* ── Board info bar (OPEN · MENY · BOKA) ── */
.menu-board-infobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid rgba(18,18,18,0.12);
  background: rgba(18,18,18,0.02);
  gap: 1rem;
}

.menu-infobar-left,
.menu-infobar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.menu-infobar-center {
  text-align: center;
}

.menu-open-badge {
  background: #2a9d2a;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  line-height: 1;
}

.menu-infobar-script {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-muted);
  display: block;
}

.menu-infobar-sub {
  font-size: 0.65rem;
  color: rgba(18,18,18,0.45);
  letter-spacing: 0.04em;
  display: block;
}

.menu-infobar-brand {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin: 0;
  line-height: 1;
}

.menu-infobar-meny {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.1;
}

.menu-infobar-boka {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.1rem;
}

.menu-infobar-email {
  font-size: 0.72rem;
  color: var(--color-ink);
  margin: 0;
}

.menu-infobar-right svg {
  color: var(--color-muted);
  flex-shrink: 0;
}


/* ── Tab buttons: board-style ── */
/* Override Phase 15 tab styles when inside the paper board */
.menu-board-paper .menu-tab-btn {
  color: rgba(18,18,18,0.45);
  border-bottom-color: transparent;
  font-size: 0.68rem;
}

.menu-board-paper .menu-tab-btn.is-active {
  color: var(--color-accent-dk);
  border-bottom-color: var(--color-accent-dk);
}

.menu-board-paper .menu-tab-btn:hover:not(.is-active) {
  color: var(--color-ink);
}


/* ══════════════════════════════════════════
   BOARD GRID — 4-column poster layout
   ══════════════════════════════════════════ */
.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(18,18,18,0.10);
}

.board-col {
  padding: 1.75rem 1.5rem;
  border-right: 1px solid rgba(18,18,18,0.08);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.board-col:last-child { border-right: none; }


/* ── Board section (menu category) ── */
.board-section {}

.board-section-title {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #121212;
  margin: 0 0 0.2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(18,18,18,0.15);
}

.board-section-sub {
  font-size: 0.68rem;
  color: #6f6f6f;
  font-style: italic;
  margin: 0.2rem 0 0.5rem;
  line-height: 1.3;
}


/* ── Board item list ── */
.board-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.board-items li {
  padding: 0.3rem 0.4rem 0.3rem 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #121212;
  line-height: 1.35;
  border-left: 2px solid transparent;
  border-radius: 2px;
  transition: background 0.15s ease, border-left-color 0.15s ease, padding-left 0.15s ease;
  cursor: default;
}

.board-items li:hover {
  background: rgba(161,239,223,0.18);
  border-left-color: var(--color-accent-dk);
  padding-left: 0.7rem;
}

.board-item-translation {
  font-size: 0.72rem;
  font-weight: 400;
  color: #6f6f6f;
}

.board-item-detail {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: #6f6f6f;
  margin-top: 0.05rem;
  line-height: 1.3;
}


/* ── Inline badges ── */
.board-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.board-badge--gf {
  background: rgba(47,93,80,0.1);
  color: #2f5d50;
  border: 1px solid rgba(47,93,80,0.25);
}

.board-badge--daily {
  background: rgba(238,42,55,0.08);
  color: var(--color-accent-dk);
  border: 1px solid rgba(238,42,55,0.2);
}


/* ── Feature cards: dotted borders + stamp ── */
.board-feature {
  position: relative;
  padding: 0.85rem 0.9rem;
  border: 1.5px dotted rgba(18,18,18,0.4);
  border-radius: 4px;
  background: rgba(255,253,248,0.6);
  margin-top: 0.25rem;
}

.board-stamp {
  position: absolute;
  top: -0.55rem;
  left: 0.75rem;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent-dk);
  padding: 0.12rem 0.5rem;
  border-radius: 2px;
  line-height: 1.4;
}

/* Toast Skagen — red accent */
.board-feature--classic {
  border-color: rgba(238,42,55,0.55);
  background: rgba(238,42,55,0.025);
  text-align: center;
}

.board-feature-headline {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: #121212;
  letter-spacing: -0.01em;
  margin: 0.25rem 0 0.15rem;
}

.board-feature-tagline {
  font-size: 0.72rem;
  font-style: italic;
  color: #6f6f6f;
  margin: 0;
}

/* Daily Specials — mint accent */
.board-feature--daily {
  border-color: rgba(161,239,223,0.7);
  background: rgba(161,239,223,0.06);
}

/* Sibylla — charcoal dotted */
.board-feature--sibylla {
  border-color: rgba(18,18,18,0.35);
  background: rgba(18,18,18,0.015);
}

/* Shots — kraft accent */
.board-feature--shots {
  border-color: rgba(174,145,115,0.5);
  background: rgba(174,145,115,0.04);
}

/* Member — soft accent */
.board-feature--member {
  border-color: rgba(238,42,55,0.3);
  background: rgba(238,42,55,0.015);
}

.board-insta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  text-decoration: none;
  transition: opacity 0.2s;
}
.board-insta-link:hover { opacity: 0.7; }


/* ── Board footer strip ── */
.board-footer-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 2rem;
  border-top: 1px solid rgba(18,18,18,0.10);
  background: rgba(18,18,18,0.02);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.4);
}

.board-footer-strip span[aria-hidden="true"] {
  color: rgba(18,18,18,0.2);
}


/* ── Responsive ── */
@media (max-width: 1100px) {
  .board-grid { grid-template-columns: 1fr 1fr; }
  .board-col { border-right: 1px solid rgba(18,18,18,0.08); }
  .board-col:nth-child(even) { border-right: none; }
  .board-col:nth-child(1),
  .board-col:nth-child(2) { border-bottom: 1px solid rgba(18,18,18,0.08); }
}

@media (max-width: 720px) {
  .menu-board-frame { padding: 2rem 1rem 1.5rem; }
  .menu-board-welcome-headline { font-size: 1.3rem; }
  .board-grid { grid-template-columns: 1fr; }
  .board-col { border-right: none; border-bottom: 1px solid rgba(18,18,18,0.07); }
  .board-col:last-child { border-bottom: none; }
  .menu-board-infobar { display: none; } /* Too compact on mobile — hide the bar */
  .menu-board-paper .menu-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* =========================================
   SIBYLLA PAGE — Phase 20
   ========================================= */

/* ── Menu section: turquoise frame ── */
.sibylla-menu-section {
  background: var(--color-accent);
  padding: 0;
}

.sibylla-menu-frame {
  padding: 3rem 2rem 2.5rem;
}

/* ── Welcome headline ── */
.sibylla-menu-headline-wrap {
  text-align: center;
  margin-bottom: 1.75rem;
}

.sibylla-menu-headline {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--color-accent-dk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── White paper card ── */
.sibylla-menu-card {
  background:
    radial-gradient(circle at 15% 15%, rgba(0,0,0,.016) 0 1px, transparent 1px),
    radial-gradient(circle at 85% 85%, rgba(0,0,0,.012) 0 1px, transparent 1px),
    #FFFDF8;
  background-size: 20px 20px, 28px 28px, auto;
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 4px 0 rgba(0,0,0,0.05),
    0 12px 40px rgba(0,0,0,0.12),
    0 32px 80px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: 1260px;
  margin: 0 auto;
}

/* ── Card header bar ── */
.sibylla-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid rgba(18,18,18,0.10);
  background: rgba(18,18,18,0.015);
  gap: 1rem;
}

.sibylla-card-header-left,
.sibylla-card-header-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sibylla-card-header-center { text-align: center; }

.sibylla-card-brand {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin: 0;
  line-height: 1;
}

.sibylla-card-sub {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.sibylla-card-since {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

.sibylla-card-location {
  font-size: 0.7rem;
  color: rgba(18,18,18,0.4);
  margin: 0;
}

/* ── Section heading inside card ── */
.sibylla-menu-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin: 0.25rem 0;
}

.sibylla-menu-sub {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-muted);
  max-width: 600px;
  line-height: 1.75;
  margin-top: 0.75rem;
}

/* ── Three-column menu grid ── */
.sibylla-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(18,18,18,0.08);
  margin-top: 1.5rem;
}

.sibylla-menu-col {
  padding: 2rem 1.75rem;
  border-right: 1px solid rgba(18,18,18,0.08);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sibylla-menu-col:last-child { border-right: none; }

/* ── Column header ── */
.sibylla-col-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin: 0 0 0.3rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-accent-dk);
  display: inline-block;
}

.sibylla-col-intro {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-muted);
  margin: 0.3rem 0 0.75rem;
  line-height: 1.4;
}

/* ── Menu items ── */
.sibylla-menu-item {
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(18,18,18,0.05);
  position: relative;
  transition: background 0.15s, padding-left 0.15s;
  cursor: default;
  border-left: 2px solid transparent;
  padding-left: 0.4rem;
}

.sibylla-menu-item:last-child { border-bottom: none; }

.sibylla-menu-item:hover {
  background: rgba(161,239,223,0.12);
  border-left-color: var(--color-accent-dk);
  padding-left: 0.8rem;
}

/* Featured item variant */
.sibylla-menu-item--featured {
  margin: 0.4rem -0.4rem;
  padding: 0.65rem 0.75rem;
  border: 1.5px dotted rgba(238,42,55,0.45);
  border-radius: 4px;
  background: rgba(238,42,55,0.02);
  border-left: 1.5px dotted rgba(238,42,55,0.45) !important;
}

.sibylla-menu-item--featured:hover {
  background: rgba(238,42,55,0.04) !important;
  border-left-color: var(--color-accent-dk) !important;
}

/* Stamp label on featured items */
.sibylla-item-stamp {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent-dk);
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 0.2rem;
}

.sibylla-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 0.1rem;
  line-height: 1.3;
}

.sibylla-item-sub {
  font-weight: 400;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.sibylla-item-desc {
  font-size: 0.73rem;
  font-weight: 300;
  color: rgba(18,18,18,0.5);
  margin: 0;
  line-height: 1.4;
}

.sibylla-col-spacer { flex: 1; }

/* Serving options note */
.sibylla-serving-note {
  margin-top: auto;
  padding: 0.85rem 0.9rem;
  background: rgba(161,239,223,0.12);
  border: 1px solid rgba(161,239,223,0.45);
  border-radius: 4px;
}

.sibylla-serving-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  margin: 0 0 0.4rem;
}

.sibylla-serving-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}

.sibylla-serving-list li {
  font-size: 0.77rem;
  color: var(--color-ink);
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(18,18,18,0.05);
}

.sibylla-serving-note-sub {
  font-size: 0.65rem;
  color: var(--color-muted);
  font-style: italic;
  margin: 0;
}

/* ── Card footer strip ── */
.sibylla-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.7rem 2rem;
  border-top: 1px solid rgba(18,18,18,0.08);
  background: rgba(18,18,18,0.018);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.35);
}


/* ── Visual section ── */
.sibylla-visual-section {
  background: var(--color-surface);
  padding: var(--section-py) 2rem;
}

.sibylla-visual-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
  max-width: var(--max-w);
  margin: 0 auto;
  height: 420px;
}

.sibylla-visual-main {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.sibylla-visual-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.sibylla-visual-main:hover img { transform: scale(1.03); }

.sibylla-visual-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sibylla-visual-item {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.sibylla-visual-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.sibylla-visual-item:hover img { transform: scale(1.04); }


/* ── Responsive ── */
@media (max-width: 1024px) {
  .sibylla-menu-grid { grid-template-columns: 1fr; }
  .sibylla-menu-col { border-right: none; border-bottom: 1px solid rgba(18,18,18,0.07); }
  .sibylla-menu-col:last-child { border-bottom: none; }
  .sibylla-visual-grid { grid-template-columns: 1fr 1fr; height: 320px; }
  .sibylla-visual-side { flex-direction: row; }
}

@media (max-width: 640px) {
  .sibylla-menu-frame { padding: 2rem 1rem 1.5rem; }
  .sibylla-menu-headline { font-size: 0.85rem; }
  .sibylla-card-header { display: none; }
  .sibylla-visual-grid { grid-template-columns: 1fr; height: auto; }
  .sibylla-visual-main { height: 260px; }
  .sibylla-visual-side { flex-direction: column; }
  .sibylla-visual-item { height: 180px; }
}


/* =========================================
   BAKERY PAGE — Phase 21
   ========================================= */

/* ── Spotlights section ── */
.bakery-spotlights-section {
  background: var(--color-bg);
  padding: 3rem 2rem 2rem;
}

.bakery-spotlights-header {
  margin-bottom: 1.5rem;
}


/* ── Photo gallery ── */
.bakery-gallery-section {
  background: var(--color-surface);
  padding: 2rem 2rem;
}

.bakery-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 0.85rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

.bakery-gallery-item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.bakery-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.bakery-gallery-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 640px) {
  .bakery-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bakery-gallery-item { aspect-ratio: 4/3; }
}


/* ── Fika cultural section ── */
.bakery-fika-section {
  background: var(--color-ink);
  padding: 5.5rem 2rem;
  position: relative;
  overflow: hidden;
}

.bakery-fika-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(161,239,223,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.bakery-fika-inner {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.bakery-fika-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-white);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  margin: 1.25rem 0 1.75rem;
}

.bakery-fika-quote span {
  display: block;
  font-size: 0.78em;
  color: rgba(255,255,255,0.55);
  margin-top: 0.85rem;
  line-height: 1.7;
  font-style: italic;
}

.bakery-fika-footer {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* =========================================
   GROCERIES — EXPAT CONTEXT SECTION
   ========================================= */
.grocery-expat-section {
  background: var(--color-ink);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.grocery-expat-section::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(161,239,223,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.grocery-expat-inner {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.grocery-expat-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.4;
  margin: 1rem 0 2rem;
  border-left: none;
  padding: 0;
}

.grocery-expat-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.grocery-expat-body p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
  max-width: 680px;
}

.grocery-expat-body p:last-child {
  color: rgba(255,255,255,0.70);
  font-weight: 400;
}

.grocery-expat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.grocery-expat-link:hover { opacity: 0.7; }


/* =========================================
   GROCERIES — 4-IMAGE GALLERY STRIP
   ========================================= */
.grocery-gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 300px;
  gap: 0;
}

.grocery-gallery-item {
  overflow: hidden;
  position: relative;
}

.grocery-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.grocery-gallery-item:hover img {
  transform: scale(1.06);
}

.grocery-gallery-item + .grocery-gallery-item {
  border-left: 2px solid rgba(255,255,255,0.15);
}

@media (max-width: 768px) {
  .grocery-gallery-strip {
    grid-template-columns: 1fr 1fr;
    height: auto;
    grid-template-rows: 200px 200px;
  }
  .grocery-gallery-item + .grocery-gallery-item { border-left: none; }
}

@media (max-width: 480px) {
  .grocery-gallery-strip {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px;
  }
}


/* =========================================
   GROCERIES — MEMBERSHIP CALLOUT STRIP
   ========================================= */
.grocery-member-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.grocery-member-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink);
}

.grocery-member-link {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  text-decoration: none;
  transition: opacity 0.2s;
}

.grocery-member-link:hover { opacity: 0.7; }


/* ── Catering page — 3-col grid (responsive, not inline) ── */
.grocery-cats-grid--catering {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .grocery-cats-grid--catering {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .grocery-cats-grid--catering {
    grid-template-columns: 1fr;
  }
}


/* ── Bigger images — bakery-scoped overrides ── */

/* Spotlight images: square ratio, edge-to-edge with zoom on hover */
.bakery-spotlights-section .grocery-spotlight-img-wrap img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.bakery-spotlights-section .grocery-spotlight-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bakery-spotlights-section .grocery-spotlight-img-wrap img {
  transition: transform 0.55s ease;
}

.bakery-spotlights-section .grocery-spotlight:hover .grocery-spotlight-img-wrap img {
  transform: scale(1.06);
}

/* Gallery: taller rows, full max-width, bigger gap (desktop only) */
@media (min-width: 641px) {
  .bakery-gallery-grid {
    grid-template-rows: 380px 380px;
    gap: 1rem;
  }
}

/* =========================================
   EVENTS PAGE — Phase 23
   ========================================= */

/* ── Next Up dates strip ── */
.events-next-up {
  background: var(--color-ink);
  padding: 2.5rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.events-next-up-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.events-nup-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.events-next-up-dates {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.events-nup-event {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.events-nup-day {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  text-transform: uppercase;
}

.events-nup-date {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.events-nup-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-top: 0.1rem;
}

.events-nup-time {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

.events-nup-divider {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.events-nup-insta {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
  margin-left: auto;
  white-space: nowrap;
}

.events-nup-insta:hover { color: var(--color-accent); }

@media (max-width: 768px) {
  .events-next-up-inner  { gap: 1.5rem; }
  .events-nup-insta      { margin-left: 0; width: 100%; white-space: normal; }
}


/* ── Event sections ── */
.event-section {
  background: var(--color-surface);
  padding: var(--section-py) 0;
}

.event-section--alt {
  background: var(--color-bg);
}

.event-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Reversed layout — text left, image right */
.event-layout--reverse .event-layout-media {
  order: 2;
}
.event-layout--reverse .event-layout-content {
  order: 1;
}

.event-layout-media {
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 3/4;
  box-shadow:
    0 4px 0 rgba(0,0,0,0.04),
    0 16px 48px rgba(0,0,0,0.10);
}

.event-layout-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.event-layout:hover .event-layout-media img {
  transform: scale(1.03);
}

/* The large day mark — THU / SAT */
.event-day-mark {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 6.5rem);
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
  opacity: 0.85;
}

.event-schedule {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.4rem;
}

.event-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin: 0;
}

.event-body {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(17,17,17,0.68);
  margin-bottom: 0.65rem;
  max-width: 500px;
}

.event-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.event-features li {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.35;
}

.event-features li::before {
  content: '—';
  color: var(--color-accent-dk);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.event-features li:last-child { border-bottom: none; }

/* Responsive */
@media (max-width: 1024px) {
  .event-layout { gap: 3rem; }
}

@media (max-width: 768px) {
  .event-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.25rem;
  }
  .event-layout--reverse .event-layout-media { order: 0; }
  .event-layout--reverse .event-layout-content { order: 0; }
  .event-layout-media { aspect-ratio: 4/3; }
}


/* ── Community quote moment ── */
.events-community-moment {
  background: var(--color-ink);
  padding: 5.5rem 2rem;
  /* mobile override: see @media (max-width: 768px) below */
  position: relative;
  overflow: hidden;
}

.events-community-moment::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(161,239,223,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.events-community-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-white);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .events-community-moment { padding: 3.5rem 1.25rem; }
  .bakery-fika-section      { padding: 3.5rem 1.25rem; }
  .grocery-expat-section    { padding: 3.5rem 1.25rem; }
}