/* W Walnut Cookie Co - Redesigned Styles */

/* ===== CSS Variables ===== */
:root {
  --color-bg: #faf7f2;
  --color-primary: #2c1810;
  --color-accent: #dc7b3f;
  --color-secondary: #f0e6d3;
  --color-white: #ffffff;
  --color-gray: #6b5e54;
  --color-light-gray: #f5f0ea;

  /* The footer sits on a dark background in EVERY theme, so its text colours
     are fixed here instead of being pulled from --color-secondary / --color-gray
     / --color-white. Those three invert in dark mode, which is what left the
     footer headings ("Hours", "Visit Us", ...) at a 1.24:1 contrast ratio -
     dark brown on near-black, effectively invisible. Do not swap these back to
     theme variables; a dark surface needs colours that don't flip with the theme. */
  --footer-heading: #f5ead9;   /* 16.5:1 on the dark footer, 14.2:1 on the light one */
  --footer-text:    #d9cec4;   /* body copy and links */
  --footer-muted:   #a89a8e;   /* copyright + build credit, 7.2:1 / 6.2:1 */

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', Arial, sans-serif;

  --max-width: 1200px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2.2rem;
  --spacing-lg: 4.4rem;
  --spacing-xl: 6.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 8px;

  --transition: 0.3s ease;
  --shadow-sm: 0 1px 6px rgba(44, 24, 16, 0.05);
  --shadow-md: 0 4px 14px rgba(44, 24, 16, 0.07);
  --shadow-lg: 0 8px 22px rgba(44, 24, 16, 0.1);
}

/* ===== Color Themes ===== */
[data-theme="berry"] {
  --color-bg: #faf2f5;
  --color-primary: #2e1520;
  --color-accent: #c95a79;
  --color-secondary: #f2d9e2;
  --color-gray: #6b4f5a;
  --color-light-gray: #f5edf1;
}

[data-theme="ocean"] {
  --color-bg: #f2f6fa;
  --color-primary: #132840;
  --color-accent: #3f83c6;
  --color-secondary: #d0e2f2;
  --color-gray: #4a6580;
  --color-light-gray: #eaf1f7;
}

[data-theme="sage"] {
  --color-bg: #f3f7f2;
  --color-primary: #1a2e1c;
  --color-accent: #5a8960;
  --color-secondary: #d4e6d2;
  --color-gray: #546b55;
  --color-light-gray: #ecf2eb;
}

[data-theme="plum"] {
  --color-bg: #f6f2fa;
  --color-primary: #211530;
  --color-accent: #835fb4;
  --color-secondary: #e0d2f0;
  --color-gray: #5e4a70;
  --color-light-gray: #f0ebf5;
}

[data-theme="dark"] {
  --color-bg: #16120f;
  --color-primary: #f4e8da;
  --color-accent: #e58d4d;
  --color-secondary: #2a211b;
  --color-white: #211a15;
  --color-gray: #c9b8a7;
  --color-light-gray: #1c1612;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-primary);
  background-color: var(--color-bg);
}

[data-theme="dark"] .header,
[data-theme="dark"] .hero,
[data-theme="dark"] .page-header,
[data-theme="dark"] .page-header-premium,
[data-theme="dark"] .featured,
[data-theme="dark"] .cta-section {
  background-color: var(--color-light-gray);
}

[data-theme="dark"] .product-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .surface-card,
[data-theme="dark"] .order-card,
[data-theme="dark"] .order-form,
[data-theme="dark"] .contact-form-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .menu-note,
[data-theme="dark"] .bundle-card,
[data-theme="dark"] .allergen-note {
  background-color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .social-links a {
  background-color: #0f0b09;
  color: var(--color-primary);
}

/* Background only - the footer's text colours come from the --footer-* tokens
   so they stay put across themes. */
[data-theme="dark"] .footer {
  background-color: #0f0b09;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .social-links a:hover {
  background-color: color-mix(in srgb, #0f0b09 75%, var(--color-accent));
}

[data-theme="dark"] .btn-outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

[data-theme="dark"] .btn-outline:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #23170f;
}

[data-theme="dark"] .map-container,
[data-theme="dark"] .contact-info .hours,
[data-theme="dark"] .pickup-hours-card {
  background-color: #17120f;
}

[data-theme="dark"] .theme-toggle {
  background: #1f1914;
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--spacing-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  z-index: 1200;
}

.skip-link:focus {
  top: var(--spacing-sm);
}

/* ===== Logo Intro Overlay ===== */
body.intro-playing {
  overflow: hidden;
}

/* --- Oven Door Reveal Intro --- */
.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 55%),
    radial-gradient(circle at center, var(--color-secondary) 0%, var(--color-bg) 70%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.logo-intro.is-active {
  visibility: visible;
  pointer-events: auto;
  animation: logoIntroOverlay 2.8s ease-in-out forwards;
}

.logo-intro.is-finished {
  display: none;
}

.logo-intro-inner {
  position: relative;
  width: min(82vw, 380px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 3;
  transform: translateY(-40px);
}

/* Warm halo rings — oven heat glow */
.logo-intro-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent) 0%, transparent 70%);
  opacity: 0;
  animation: ovenHalo 2.2s ease-out 0.15s both;
}

.logo-intro-ring-outer {
  border: none;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 70%);
  opacity: 0;
  animation: ovenHalo 2.4s ease-out 0.25s both;
}

/* Logo — blurred through oven glass, sharpens as door opens */
.logo-intro-logo {
  width: 100%;
  max-width: 350px;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(26px) brightness(1.35) drop-shadow(0 0 40px rgba(232, 119, 42, 0.5));
  animation: ovenRevealLogo 2.1s cubic-bezier(0.22, 0.6, 0.36, 1) 0.1s both;
}

/* Large warm oven glow behind everything */
.logo-intro-glow {
  position: absolute;
  width: min(90vw, 800px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 50%, transparent) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.65);
  animation: ovenGlow 2.4s ease-out 0s both;
}

/* Rising heat shimmer */
.logo-intro-sweep {
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    to top,
    transparent 0%,
    color-mix(in srgb, var(--color-accent) 10%, transparent) 25%,
    color-mix(in srgb, var(--color-accent) 18%, transparent) 45%,
    color-mix(in srgb, var(--color-accent) 10%, transparent) 65%,
    transparent 100%
  );
  opacity: 0;
  filter: blur(18px);
  animation: ovenHeatRise 2.4s ease-out 0.1s both;
}

/* Text — blur-to-sharp reveal */
.logo-intro-wordmark {
  position: absolute;
  top: calc(50% - 40px + min(28vw, 200px));
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: 0.05em;
  color: var(--color-primary);
  opacity: 0;
  filter: blur(10px);
  z-index: 3;
  animation: ovenTextReveal 1.1s ease-out 0.9s both;
}

.logo-intro-tagline {
  position: absolute;
  top: calc(50% - 40px + min(35vw, 248px));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--color-gray);
  opacity: 0;
  filter: blur(8px);
  z-index: 3;
  animation: ovenTextReveal 1s ease-out 1.15s both;
}

/* Heat spark particles — float upward like embers */
.logo-intro-crumbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.logo-intro-crumbs span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 90%, var(--color-white));
  opacity: 0;
  box-shadow: 0 0 8px 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
  animation: ovenSpark 1.8s ease-out both;
}

.logo-intro-crumbs span:nth-child(1) { bottom: 18%; left: 28%; animation-delay: 0.35s; }
.logo-intro-crumbs span:nth-child(2) { bottom: 22%; left: 52%; animation-delay: 0.5s; }
.logo-intro-crumbs span:nth-child(3) { bottom: 14%; left: 72%; animation-delay: 0.6s; }
.logo-intro-crumbs span:nth-child(4) { bottom: 26%; left: 42%; animation-delay: 0.45s; }
.logo-intro-crumbs span:nth-child(5) { bottom: 20%; left: 18%; animation-delay: 0.7s; }
.logo-intro-crumbs span:nth-child(6) { bottom: 16%; left: 82%; animation-delay: 0.55s; }

/* ---- Oven Reveal Keyframes ---- */

@keyframes logoIntroOverlay {
  0%   { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Logo: heavy blur + warm brightness → crystal sharp */
@keyframes ovenRevealLogo {
  0% {
    opacity: 0.45;
    transform: scale(1.06);
    filter: blur(26px) brightness(1.35) drop-shadow(0 0 40px rgba(232, 119, 42, 0.5));
  }
  30% {
    opacity: 0.75;
    transform: scale(1.035);
    filter: blur(14px) brightness(1.18) drop-shadow(0 0 30px rgba(232, 119, 42, 0.35));
  }
  60% {
    opacity: 0.92;
    transform: scale(1.012);
    filter: blur(5px) brightness(1.06) drop-shadow(0 6px 18px rgba(44, 24, 16, 0.25));
  }
  85% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px) brightness(1) drop-shadow(0 12px 24px rgba(44, 24, 16, 0.35));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px) brightness(1) drop-shadow(0 12px 24px rgba(44, 24, 16, 0.35));
  }
}

/* Warm oven glow — intensifies then dissipates */
@keyframes ovenGlow {
  0% {
    opacity: 0.25;
    transform: scale(0.65);
  }
  28% {
    opacity: 1;
    transform: scale(1.05);
  }
  55% {
    opacity: 0.55;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

/* Warm halo pulse outward */
@keyframes ovenHalo {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }
  35% {
    opacity: 0.75;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* Heat shimmer — rises upward like oven heat */
@keyframes ovenHeatRise {
  0% {
    opacity: 0;
    transform: translateY(35%);
  }
  25% {
    opacity: 0.55;
    transform: translateY(12%);
  }
  60% {
    opacity: 0.22;
    transform: translateY(-18%);
  }
  100% {
    opacity: 0;
    transform: translateY(-55%);
  }
}

/* Text: blur-to-sharp with gentle rise */
@keyframes ovenTextReveal {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-50%) translateY(6px);
  }
  60% {
    opacity: 0.8;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(-50%) translateY(0);
  }
}

/* Ember sparks — float upward and fade */
@keyframes ovenSpark {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.3);
  }
  20% {
    opacity: 0.85;
    transform: translateY(-16px) scale(1);
  }
  60% {
    opacity: 0.4;
    transform: translateY(-45px) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.1);
  }
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.12;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
}

p {
  margin-bottom: var(--spacing-sm);
}

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

section {
  padding: var(--spacing-xl) 0;
}

/* ===== Header & Navigation ===== */
.header {
  position: sticky;
  top: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-secondary);
  z-index: 1000;
  transition: box-shadow var(--transition);
}

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

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.logo span {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  gap: var(--spacing-md);
}

.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

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

.nav-links a.active {
  color: var(--color-accent);
}

/* Mobile Menu Button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  z-index: 1002;
  position: relative;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  margin: 6px 0;
  transition: all var(--transition);
  border-radius: 2px;
}

/* ===== Hero Section ===== */
.hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 30%),
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 34%),
    linear-gradient(180deg, var(--color-secondary) 0%, color-mix(in srgb, var(--color-bg) 92%, var(--color-secondary)) 100%);
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.hero::before {
  top: -110px;
  left: -110px;
  width: min(42vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 68%);
  opacity: 0.85;
}

.hero::after {
  right: -120px;
  bottom: -120px;
  width: min(46vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 70%);
  opacity: 0.7;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.hero-content {
  position: relative;
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  max-width: 700px;
}

.hero h1 {
  margin-bottom: var(--spacing-sm);
}

.hero-eyebrow {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-white));
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero p {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin-bottom: var(--spacing-md);
  color: var(--color-gray);
  line-height: 1.7;
}

.hero-logo {
  max-width: 350px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--spacing-md);
}

.hero-ctas {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.hero-kickers {
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--color-gray);
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.02em;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-accent) 80%, black);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.btn-secondary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 80%, black);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* ===== Marquee ===== */
.marquee {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding: 0.75rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-inner {
  display: inline-flex;
  animation: marquee-scroll 25s linear infinite;
}

.marquee-inner span {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 2rem;
}

.marquee-inner span::after {
  content: '\2022';
  margin-left: 2rem;
  opacity: 0.5;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ===== Product Grid ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-md);
}

.product-card {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

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

.product-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-info {
  padding: var(--spacing-sm) var(--spacing-sm) 1.25rem;
  text-align: center;
}

.product-info h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.product-info .price {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.05rem;
}

.product-info .role {
  color: var(--color-gray);
  font-size: 0.9rem;
}

.cookie-badge {
  display: inline-block;
  margin: var(--spacing-sm) var(--spacing-sm) 0;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.taste-note {
  color: var(--color-gray);
  font-size: 0.92rem;
  margin-top: 0.4rem;
  margin-bottom: 0;
}

/* Product Overlay (for menu page) */
.product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(44, 24, 16, 0.85));
  color: var(--color-white);
  padding: var(--spacing-md) var(--spacing-sm);
  transform: translateY(100%);
  transition: transform var(--transition);
}

.product-card:hover .product-overlay {
  transform: translateY(0);
}

/* ===== Featured / Alternating Sections ===== */
.featured {
  background-color: var(--color-light-gray);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.section-header h2 {
  margin-bottom: var(--spacing-xs);
}

.section-header p {
  color: var(--color-gray);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

/* ===== About Preview (homepage) ===== */
.about-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.about-preview img,
.about-preview .placeholder-img {
  border-radius: var(--radius-md);
}

.about-content h2 {
  margin-bottom: var(--spacing-sm);
}

.about-content p {
  color: var(--color-gray);
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
}

.story-points {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--spacing-md);
}

.story-points li {
  margin-bottom: 0.45rem;
  color: var(--color-gray);
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-secondary);
}

.testimonial-card h3 {
  margin-bottom: var(--spacing-xs);
}

.testimonial-card p {
  color: var(--color-gray);
}

.testimonial-source {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: var(--spacing-md);
}

/* ===== Email Signup ===== */
.email-signup {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.email-signup h2 {
  color: var(--color-white);
  margin-bottom: var(--spacing-xs);
}

.email-signup p {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.email-form {
  display: flex;
  gap: var(--spacing-sm);
  max-width: 480px;
  margin: 0 auto;
}

.email-form input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.email-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.email-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.email-form .btn {
  flex-shrink: 0;
}

/* ===== Category Tabs ===== */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.category-tab {
  padding: 0.48rem 1.2rem;
  background-color: transparent;
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--color-primary);
}

.category-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.category-tab.active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ===== Order Page ===== */
.order-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  max-width: 800px;
  margin: 0 auto;
}

.order-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.order-card .card-body {
  padding: var(--spacing-md);
}

.order-card h3 {
  margin-bottom: var(--spacing-xs);
}

.order-card p {
  color: var(--color-gray);
  font-size: 0.95rem;
}

.order-section {
  background-color: var(--color-light-gray);
}

.order-form,
.contact-form-card {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--transition);
  background: var(--color-white);
  color: var(--color-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Pre-order Date Picker */
.preorder-notice {
  background-color: var(--color-secondary);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

/* Square Button Placeholder */
.square-checkout {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  text-align: center;
  margin-top: var(--spacing-sm);
  border: 2px dashed color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.square-checkout p {
  margin-bottom: 0.25rem;
}

.square-checkout p strong {
  color: var(--color-accent);
}

/* Order CTA Card */
.order-cta-card {
  background:
    radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 50%),
    var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.order-cta-content h2 {
  font-family: var(--font-heading);
  margin-bottom: var(--spacing-sm);
}

.order-cta-content p {
  color: var(--color-gray);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto var(--spacing-md);
}

.order-cta-content .btn-lg {
  padding: 1rem 3rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.order-cta-note {
  font-size: 0.82rem !important;
  opacity: 0.6;
  margin-top: var(--spacing-sm);
  margin-bottom: 0 !important;
}

/* ===== Contact Page ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.contact-info h3 {
  margin-bottom: var(--spacing-xs);
  color: var(--color-accent);
  font-size: 1.15rem;
}

.contact-info p {
  margin-bottom: var(--spacing-md);
  color: var(--color-gray);
}

.contact-info .hours {
  background-color: var(--color-light-gray);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.map-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 400px;
  background-color: var(--color-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--spacing-sm);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  transition: all var(--transition);
}

.social-links a:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

/* ===== Flavors Page ===== */
.flavors-section {
  padding: var(--spacing-lg) 0;
}

.flavors-frame-wrapper {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

.flavors-iframe {
  width: 100%;
  min-height: 800px;
  border: none;
  display: block;
}

.square-store-iframe {
  min-height: 1200px;
}

.flavors-fallback {
  text-align: center;
  padding: var(--spacing-sm) 0;
  margin-top: var(--spacing-sm);
}

.flavors-fallback p {
  color: var(--color-gray);
  font-size: 0.9rem;
}

.flavors-fallback a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: underline;
}

.flavors-fallback a:hover {
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .flavors-iframe {
    min-height: 600px;
  }
}

/* ===== Footer ===== */
.footer {
  background-color: var(--color-primary);
  color: var(--footer-text);
  padding: var(--spacing-xl) 0 var(--spacing-md);
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--spacing-lg);
}

.footer-brand p {
  color: var(--footer-text);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: var(--spacing-xs);
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--spacing-sm);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  transition: all var(--transition);
}

.footer-social a:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.footer h4 {
  color: var(--footer-heading);
  margin-bottom: var(--spacing-sm);
  font-size: 1rem;
}

.footer ul li {
  margin-bottom: 0.5rem;
}

.footer a {
  color: var(--footer-text);
  transition: color var(--transition);
  font-size: 0.9rem;
}

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

.footer-bottom {
  text-align: center;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--footer-muted);
  font-size: 0.85rem;
}

/* Three stacked lines down here now, so drop the default paragraph margin -
   they should read as one block, not three separate statements. */
.footer-bottom p {
  margin: 0 0 0.2rem;
}

.footer-bottom p:last-child {
  margin-bottom: 0;
}

/* The build credit sits a step quieter than the two copyright lines. Its link
   inherits that size rather than the 0.9rem every other footer link gets. */
.footer-credit {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.footer-credit a {
  font-size: inherit;
  color: var(--footer-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.footer-address,
.footer-phone {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.footer-phone {
  margin-top: 0.45rem;
}

/* ===== Page Headers ===== */
.page-header {
  background-color: var(--color-secondary);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.page-header h1 {
  margin-bottom: var(--spacing-xs);
}

.page-header p {
  color: var(--color-gray);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.page-header-premium {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 28%),
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 32%),
    linear-gradient(180deg, var(--color-secondary) 0%, color-mix(in srgb, var(--color-bg) 92%, var(--color-secondary)) 100%);
}

.page-header-premium::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  width: 560px;
  max-width: 90vw;
  height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 24%, transparent) 0%, transparent 68%);
  opacity: 0.8;
  pointer-events: none;
}

.page-header-premium .container {
  position: relative;
  z-index: 1;
}


.surface-card {
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.menu-note {
  margin: var(--spacing-md) auto 0;
  max-width: 760px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 1.1rem;
  color: var(--color-gray);
}

.menu-note strong {
  color: var(--color-primary);
}

.menu-grid .product-card {
  border: 1px solid color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.menu-grid .product-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

main > section + section {
  position: relative;
}

main > section + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(120px, 24vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent);
  opacity: 0.55;
}

/* ===== About Page ===== */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.about-story.reverse {
  direction: rtl;
}

.about-story.reverse > * {
  direction: ltr;
}

.about-story p {
  color: var(--color-gray);
  line-height: 1.8;
}

.about-image {
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

/* Values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.value-card {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 68%, transparent);
  transition: transform var(--transition), box-shadow var(--transition);
}

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

.value-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-sm);
  background: var(--color-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.value-card h3 {
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
  font-size: 1.2rem;
}

.value-card p {
  color: var(--color-gray);
  font-size: 0.95rem;
}

/* CTA Section */
.cta-section {
  background-color: var(--color-secondary);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.cta-section h2 {
  margin-bottom: var(--spacing-xs);
}

.cta-section p {
  color: var(--color-gray);
  margin-bottom: var(--spacing-md);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Pickup Info ===== */
.pickup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  max-width: 800px;
  margin: 0 auto;
}

.pickup-grid h3 {
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
  font-size: 1.15rem;
}

.pickup-grid ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.pickup-grid ul li {
  margin-bottom: 0.5rem;
  color: var(--color-gray);
}

.pickup-location {
  color: var(--color-gray);
}

.pickup-hours-title {
  margin-top: 1.5rem;
}

.pickup-hours-card {
  background: var(--color-light-gray);
  padding: 1.5rem;
  border-radius: 12px;
}

.pickup-hours-card p {
  color: var(--color-gray);
}

.pickup-hours-card p:last-child {
  margin-bottom: 0;
}

.order-card,
.contact-info,
.order-form,
.contact-form-card {
  border: 1px solid color-mix(in srgb, var(--color-secondary) 68%, transparent);
}

.order-card .placeholder-img {
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Floating Mobile CTA ===== */
.mobile-cta {
  display: none;
}

/* ===== Responsive Design ===== */
@media (max-width: 968px) {
  .about-preview,
  .contact-grid,
  .about-story,
  .order-cards,
  .pickup-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
  }

  .about-story.reverse {
    direction: ltr;
  }

  .values-grid {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }

  .values-grid > * {
    scroll-snap-align: center;
  }

}

/* Navigation switches to the full-screen overlay at 1180px, not 768px.
   Measured, not guessed: the eight nav items need 728px, the wordmark 339px,
   and the container padding 70px - so the inline row needs ~1178px before it
   runs into the logo and wraps it onto two lines.

   Re-measure this if nav items are added or removed. The sum above is the
   whole calculation. Everything else stays at the 768px breakpoint in the
   block further below. */
@media (max-width: 1180px) {
  /* Full-screen Mobile Navigation */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: var(--color-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1001;
  }

  .nav-links li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-links.active {
    opacity: 1;
    visibility: visible;
  }

  /* Every item becomes visible; the rules below only stagger the timing.
     This used to set opacity on nth-child(1)..(4) only, which meant the 5th
     link onward stayed at opacity:0 and was invisible in the mobile menu.
     Keep visibility separate from the stagger so adding a nav item can never
     silently hide it again. */
  .nav-links.active li {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-links.active li:nth-child(1) { transition-delay: 0.10s; }
  .nav-links.active li:nth-child(2) { transition-delay: 0.15s; }
  .nav-links.active li:nth-child(3) { transition-delay: 0.20s; }
  .nav-links.active li:nth-child(4) { transition-delay: 0.25s; }
  .nav-links.active li:nth-child(5) { transition-delay: 0.30s; }
  .nav-links.active li:nth-child(6) { transition-delay: 0.35s; }
  .nav-links.active li:nth-child(n+7) { transition-delay: 0.40s; }

  .nav-links a {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    padding: 0.75rem 0;
    display: block;
  }

  .nav-links a::after {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* Mobile Overlay (behind nav) */
  .nav-overlay {
    display: none;
  }
}

/* Everything below is the ordinary mobile layout, unchanged at 768px. */
@media (max-width: 768px) {
  .hero {
    min-height: 70vh;
  }

  .hero-logo {
    max-width: 250px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
  }

  .logo-intro-inner {
    width: min(80vw, 280px);
  }

  .logo-intro-logo {
    max-width: 250px;
  }

  .logo-intro-wordmark {
    top: calc(50% + min(32vw, 180px));
    letter-spacing: 0.03em;
  }

  .logo-intro-tagline {
    top: calc(50% + min(40vw, 224px));
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  .menu-note {
    border-radius: var(--radius-md);
  }


  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  .email-form {
    flex-direction: column;
  }

  /* Floating CTA */
  .mobile-cta {
    display: block;
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
  }

  .mobile-cta .btn {
    box-shadow: 0 4px 16px rgba(232, 119, 42, 0.4);
    padding: 0.75rem 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-intro {
    display: none !important;
  }
}

/* ===== Utility Classes ===== */
.text-center {
  text-align: center;
}

.no-margin {
  margin: 0 !important;
}

.full-width-btn {
  width: 100%;
}

.text-muted {
  color: var(--color-gray);
}

.text-muted-sm {
  font-size: 0.85rem;
  margin: 0;
}

.ratio-square {
  aspect-ratio: 1;
}

.ratio-wide {
  aspect-ratio: 16/9;
}

.ratio-landscape {
  aspect-ratio: 4/3;
}

.team-grid {
  max-width: 900px;
  margin: 0 auto;
}

.square-checkout-mini {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition);
}

.square-checkout-mini:hover {
  background-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-secondary));
}

.btn-buy {
  display: inline-block;
  margin-top: 0.75rem;
  text-align: center;
  width: 100%;
  font-size: 0.95rem;
}

.product-desc {
  color: var(--color-gray);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.product-desc em {
  font-size: 0.8rem;
  opacity: 0.75;
}

.map-placeholder {
  text-align: center;
  color: var(--color-gray);
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* Placeholder Image Styling */
.placeholder-img {
  background: linear-gradient(135deg, var(--color-secondary) 0%, color-mix(in srgb, var(--color-accent) 50%, var(--color-secondary)) 50%, var(--color-accent) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  padding: var(--spacing-sm);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.placeholder-img::before {
  content: '\1F36A';
  font-size: 2.5rem;
  text-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* When a real image is behind this tile, drop the cookie glyph - otherwise it
   sits on top of the artwork. */
.placeholder-img.has-image::before {
  content: none;
}

/* ===== Theme Toggle ===== */
.theme-toggle {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 80%, transparent);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .theme-toggle {
    bottom: 4.5rem;
    left: 1rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.72rem;
  }
}

/* ===== Catalog: cookies, bundles, merch =====
   Everything below drives cards built from js/catalog.js. */

/* --- Product media ---
   The cookie artwork is sticker/badge art with transparent edges and wildly
   different aspect ratios (one is a 2:1 oval). So: contain, never crop, and
   let the tile background show through around it. */
.product-media {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  background:
    radial-gradient(circle at 50% 42%,
      var(--color-white) 0%,
      color-mix(in srgb, var(--color-secondary) 55%, var(--color-white)) 58%,
      var(--color-secondary) 100%);
}

.product-card .product-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(44, 24, 16, 0.16));
  transition: transform var(--transition);
}

.product-card:hover .product-media img {
  transform: scale(1.04);
}

/* Merch is real photography on a white sweep - crop to fill, no drop shadow. */
.product-media-photo {
  padding: 0;
  background: var(--color-white);
}

.product-card .product-media-photo img {
  object-fit: cover;
  filter: none;
}

/* --- Card body --- */
.product-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.product-head h3 {
  font-size: 1.05rem;
  margin: 0;
  text-align: left;
}

.product-head .price {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
}

.product-info-left {
  text-align: left;
}

.product-ingredients {
  color: var(--color-gray);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--color-secondary) 65%, transparent);
}

/* "No nuts" - shown only where the seller states it themselves. */
.product-note {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- "Fresh today" pill, driven by the live bakery feed --- */
.availability-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(44, 24, 16, 0.22);
}

/* --- Size legend on the menu --- */
.size-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin-top: var(--spacing-sm);
  color: var(--color-gray);
  font-size: 0.9rem;
}

.size-legend strong {
  color: var(--color-primary);
}

/* --- Allergen note --- */
.allergen-note {
  margin: var(--spacing-md) auto 0;
  max-width: 760px;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  border-left: 3px solid var(--color-accent);
  color: var(--color-gray);
  font-size: 0.88rem;
  line-height: 1.6;
}

.allergen-note strong {
  color: var(--color-primary);
}

/* --- Shipping bundles --- */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  max-width: 820px;
  margin: 0 auto;
}

.bundle-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.bundle-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  box-shadow: var(--shadow-lg);
}

.bundle-count {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-accent);
}

.bundle-card h3 {
  margin: 0.5rem 0 0.35rem;
  font-size: 1.25rem;
}

.bundle-card .price {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.15rem;
}

.bundle-card p {
  color: var(--color-gray);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0.6rem 0 0;
}

.bundle-card .btn {
  margin-top: auto;
}

.bundle-card .bundle-spacer {
  margin-top: var(--spacing-sm);
}

/* --- Free shipping strip --- */
.shipping-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 auto var(--spacing-md);
  max-width: 820px;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}

/* --- Order paths (pickup vs ship) --- */
.order-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-md);
  max-width: 820px;
  margin: var(--spacing-md) auto 0;
}

.order-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  box-shadow: var(--shadow-sm);
}

.order-path h3 {
  margin: 0;
  font-size: 1.15rem;
}

.order-path p {
  color: var(--color-gray);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.order-path .btn {
  margin-top: auto;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

[data-theme="dark"] .order-path {
  background-color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* --- Merch grid: denser than cookies, photos carry the page --- */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-sm);
}

.merch-group-title {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  font-size: 1.35rem;
}

.merch-group-title:first-of-type {
  margin-top: 0;
}

.merch-grid .product-info {
  padding: 0.9rem 0.9rem 1.1rem;
}

.merch-grid .product-head h3 {
  font-size: 0.95rem;
  line-height: 1.35;
}

.merch-grid .product-head .price {
  font-size: 0.95rem;
}

.merch-note {
  color: var(--color-gray);
  font-size: 0.78rem;
  margin: 0.35rem 0 0;
}

@media (max-width: 768px) {
  .merch-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .product-media {
    padding: 1rem;
  }

  .bundle-count {
    font-size: 2.2rem;
  }
}

/* ===== Forms ===== */

/* Netlify's spam honeypot. Must stay in the DOM and stay submittable, but no
   human should ever see or tab into it. */
.visually-hidden-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form-section-title {
  margin: var(--spacing-md) 0 0.35rem;
  font-size: 1.05rem;
}

.form-hint {
  color: var(--color-gray);
  font-size: 0.85rem;
  margin: 0 0 0.7rem;
}

.form-required {
  color: var(--color-accent);
}

/* Checkbox / radio groups */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem;
}

/* Name-only tiles, for the past-flavor archive on occasions.html. Those have
   no description line, so they pack tighter than the menu flavors do. */
.choice-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0.4rem;
}

.choice-grid-compact .choice {
  padding: 0.5rem 0.65rem;
  font-size: 0.86rem;
  align-items: center;
}

/* The archive runs to 40 flavors. Collapsed by default so it doesn't bury the
   rest of the form; the inputs inside are ordinary static checkboxes either
   way, so they post normally whether or not anyone opens this. */
.flavor-archive {
  margin-top: 0.6rem;
}

.flavor-archive summary {
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.flavor-archive summary:hover {
  border-style: solid;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.flavor-archive summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.flavor-archive[open] summary {
  margin-bottom: 0.6rem;
}

/* These sit inside .form-group, which already styles every label and input for
   full-width text fields. Both selectors below are deliberately more specific
   than `.form-group label` and `.form-group input` so a choice tile stays a
   tile: without this the label reverts to display:block and the checkbox gets
   stretched to width:100%. */
.form-group label.choice,
label.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 75%, transparent);
  background: var(--color-white);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.4;
  transition: border-color var(--transition), background-color var(--transition);
}

.choice:hover {
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.form-group .choice input[type="checkbox"],
.form-group .choice input[type="radio"],
.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
  margin: 0.15rem 0 0;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.choice small {
  display: block;
  color: var(--color-gray);
  font-size: 0.8rem;
}

.choice:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-white));
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choice-row .choice {
  flex: 0 1 auto;
  min-width: 130px;
}

/* Two fields side by side (date + time) */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
}

[data-theme="dark"] .choice {
  background-color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

[data-theme="dark"] .choice:has(input:checked) {
  border-color: var(--color-accent);
}

/* In-page jump links.
   Smooth scrolling lives here rather than in JS: the old scrollIntoView()
   approach silently failed when a link was clicked while the page was still
   settling after load. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Anchor targets must clear the sticky header, or jumping to a section parks
   its heading underneath the nav bar. Deliberately generic - any section given
   an id becomes a jump target automatically, with no CSS change needed. */
:target,
#main-content,
main section[id] {
  scroll-margin-top: 90px;
}

/* Surface cards use 2.2rem padding, which on a 320px phone leaves too little
   room for the content and pushes the page sideways. Ease it off on the
   narrowest screens. */
@media (max-width: 400px) {
  .surface-card,
  .order-form,
  .contact-form-card {
    padding: var(--spacing-sm);
  }
}

/* ===== About: story prose ===== */
.story-prose {
  max-width: 740px;
  margin: 0 auto;
}

.story-prose p {
  color: var(--color-gray);
  line-height: 1.75;
  margin: 0 0 1.1rem;
}

.story-prose p:last-child {
  margin-bottom: 0;
}

/* First paragraph reads as an intro, slightly larger and darker. */
.story-lede {
  font-size: 1.06rem;
  color: var(--color-primary) !important;
}

/* Real photo in the about-story layout, replacing a .placeholder-img. */
.about-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ===== Ice cream flavors =====
   Plain page content, deliberately not an iframe: a scrolling panel inside a
   scrolling page is awkward on a phone and hides flavors below its own fold. */
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-sm);
}

.flavor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1rem 0.85rem 1.1rem;
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

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

.flavor-media {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0.4rem;
}

.flavor-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flavor-name {
  font-size: 0.98rem;
  line-height: 1.3;
  margin: 0;
}

/* Names, roles and facts are typed into an admin form, so a long unbroken
   string is possible. Without this, one overflows its card and pushes the
   whole page sideways on a phone. */
.flavor-name,
.flavor-card,
.team-card .product-head h3,
.team-card .role,
.team-fav,
.team-fact {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.flavor-nutrition {
  font-size: 0.78rem;
  color: var(--color-gray);
  text-decoration: underline;
}

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

.flavor-count {
  text-align: center;
  color: var(--color-gray);
  font-size: 0.9rem;
  margin: 0 0 var(--spacing-sm);
}

[data-theme="dark"] .flavor-card {
  background-color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

@media (max-width: 768px) {
  .flavor-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* ===== In the shop only ===== */
.inshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--spacing-sm);
  max-width: 960px;
  margin: 0 auto;
}

.inshop-card {
  padding: var(--spacing-sm);
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.inshop-card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.inshop-card p {
  color: var(--color-gray);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.inshop-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

.inshop-note {
  max-width: 960px;
  margin: var(--spacing-sm) auto 0;
  text-align: center;
  color: var(--color-gray);
  font-size: 0.88rem;
}

[data-theme="dark"] .inshop-card {
  background-color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-left-color: var(--color-accent);
}

/* ===== Real cookie photos =====
   When a cookie has a photo from the Staff Toolkit it becomes the card image
   and the flavour badge shrinks into the corner, so the artwork still shows
   without covering the cookie. */
.product-media.has-flavor-badge {
  padding: 0;
  background: var(--color-white);
}

.product-card .product-media.has-flavor-badge > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.product-card .product-media .flavor-badge-corner {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 34%;
  max-width: 74px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(44, 24, 16, 0.35));
  pointer-events: none;
  transform: none !important;
}

/* ===== Cookie of the Month ===== */
.cotm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--spacing-md);
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-md);
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.cotm-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-secondary);
}

.cotm-media {
  position: relative;
}

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

/* Flavour badge (or the shop logo) sitting on the corner of the photo, the
   same treatment the cookie cards use. */
.cotm-badge {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 26%;
  max-width: 88px;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(44, 24, 16, 0.4));
  pointer-events: none;
}

/* No photo yet: the badge or logo becomes the image, centred on the warm
   gradient rather than stretched to fill. */
.cotm-media-badge {
  display: grid;
  place-items: center;
  padding: var(--spacing-md);
  background: radial-gradient(circle at 50% 45%,
    var(--color-white) 0%,
    color-mix(in srgb, var(--color-secondary) 60%, var(--color-white)) 60%,
    var(--color-secondary) 100%);
}

.cotm-badge-only {
  width: auto !important;
  height: auto !important;
  max-width: 62%;
  max-height: 80%;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(44, 24, 16, 0.2));
}

.cotm-eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cotm-name {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}

.cotm-blurb {
  color: var(--color-gray);
  line-height: 1.65;
  margin: 0 0 var(--spacing-sm);
  overflow-wrap: anywhere;
}

[data-theme="dark"] .cotm-card {
  background-color: var(--color-white);
}

@media (max-width: 700px) {
  .cotm-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cotm-name { font-size: 1.5rem; }
}

/* ===== Meet the Team ===== */
.team-empty {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0;
  padding: var(--spacing-md) 0;
}

.team-card .product-info {
  text-align: center;
}

.team-card .role {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.15rem 0 0;
}

.team-fav {
  color: var(--color-gray);
  font-size: 0.82rem;
  margin: 0.5rem 0 0;
}

/* Cookie and ice cream favorites sit together as one block. */
.team-fav + .team-fav {
  margin-top: 0.15rem;
}

.team-fact {
  color: var(--color-gray);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.4rem 0 0;
  font-style: italic;
}

/* Shown when a team member has no photo yet. */
.team-initials {
  background: linear-gradient(135deg,
    var(--color-secondary) 0%,
    color-mix(in srgb, var(--color-accent) 45%, var(--color-secondary)) 100%);
}

.team-initials span {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--color-white);
  text-shadow: 0 2px 6px rgba(44, 24, 16, 0.25);
}

[data-theme="dark"] .team-initials span {
  color: var(--color-primary);
}

/* ===== Thank-you page ===== */
.thanks-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.thanks-mark {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}