/* ============================================================
   WILLIAMS CANDY SHOP — SHARED STYLESHEET
   Single source of truth for index.html and menu.html.

   Section 1  BASE + HOMEPAGE  — extracted verbatim from the former
              inline <style> in index.html. Do not reorder.
   Section 2  MENU PAGE        — rules that are genuinely specific to
              menu.html, scoped under body.page-menu so they are inert
              on the homepage.

   Before this file existed, each page carried its own copy of the base
   styles and they had drifted (header height 72px vs 64px, nav sizing,
   footer padding). Section 1 is now authoritative for both pages.
   ============================================================ */

/* ============================================================
   SECTION 1 — BASE + HOMEPAGE
   ============================================================ */
/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* Was #0A0A0A - the last un-overridden survivor of the original dark theme.
     Six later `body` rules re-declare `color` (it ends up var(--foreground)),
     but NOT ONE re-declares `background`, so the document canvas stayed
     near-black underneath a light site. Every section paints its own background,
     which is why it is not obvious head-on - it showed up as a black band on
     iOS/Android rubber-band overscroll, and anywhere a section background did
     not reach edge to edge. Tracks the palette now instead of being hardcoded. */
  background: var(--bg);
  color: #FFFFFF;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* LAYOUT TOKENS ONLY. The brand palette is NOT here - see the ":root" under
   "MODERN CANDY SHOP REDESIGN" further down, which is the live one.

   This block used to also declare the original dark theme (--bg:#0A0A0A,
   --card:#141414, --white:#FFFFFF, --muted:#A0A0A0 and nine more). Every one of
   those was re-declared by the light candy-shop palette below. Because both
   blocks are plain top-level :root rules with identical specificity, the LATER
   declaration wins for the whole document - so all thirteen were dead, and
   anyone who "fixed a colour" up here would have seen absolutely no change on
   the site while believing they had. They are removed rather than left as a
   trap. --max and --header-h stayed because they are declared ONLY here and are
   live (.container reads var(--max); the sticky header reads var(--header-h)). */
:root {
  --max:     1280px;
  --header-h: 72px;
}

h1, h2, h3, h4 { font-family: 'Bebas Neue', sans-serif; font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.97);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.logo { display: flex; align-items: center; gap: 10px; height: 100%; }
.logo-mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.55rem;
  color: var(--yellow);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.logo-mark .script { font-family: 'Caveat', cursive; font-weight: 700; color: var(--red); font-size: 1.85rem; padding-right: 4px; }

.nav { display: flex; gap: 26px; align-items: center; }
.nav a { font-size: 0.82rem; font-weight: 500; color: var(--white); text-transform: uppercase; letter-spacing: 0.12em; position: relative; padding: 6px 0; }
.nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--yellow); transition: width 0.25s; }
.nav a:hover::after { width: 100%; }

.nav-cta {
  padding: 10px 22px; background: var(--yellow); color: #000 !important; border-radius: 999px;
  font-weight: 700; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,230,0,0.55); }
.nav-cta::after { display: none; }

.hamburger { display: none; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--white); transition: transform 0.3s, opacity 0.3s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position: fixed; top: var(--header-h); right: 0; height: calc(100vh - var(--header-h)); width: 280px;
  background: #0A0A0A; border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform 0.35s ease; z-index: 99;
  display: flex; flex-direction: column; padding: 32px 24px; gap: 20px;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer a { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.05em; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden; padding: 100px 24px 120px;
}
/* Blush rather than #000, for parity with the mobile override further down
   (@media max-width:900px). The hero photo covers this completely, so it only
   shows while that image loads or if it ever 404s — but a black flash on a pink
   candy-shop page is jarring, and mobile was already fixed while desktop was
   left behind. Same value in both places now. */
.hero-bg { position: absolute; inset: 0; background: #f6e6ee; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.64) 48%, rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.72) 60%, rgba(10,10,10,0.96) 100%);
}
.hero-content {
  position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.32em; color: var(--yellow);
  text-transform: uppercase; padding: 6px 16px; border: 1px solid rgba(255,230,0,0.45); border-radius: 999px;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(6px);
}
.hero-eyebrow .dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px var(--green); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.hero h1 {
  font-size: clamp(3.4rem, 11vw, 8rem);
  color: var(--yellow);
  text-shadow:
    0 0 12px rgba(255, 230, 0, 0.65),
    0 0 32px rgba(255, 230, 0, 0.4),
    0 0 64px rgba(255, 230, 0, 0.22),
    0 4px 0 rgba(0,0,0,0.4);
  letter-spacing: 0.01em;
}
.hero h1 .script {
  font-family: 'Caveat', cursive; font-weight: 700; color: var(--red);
  text-shadow: 0 0 18px rgba(225,6,0,0.5), 0 4px 0 rgba(0,0,0,0.4);
  font-size: 1.05em;
}
.hero-tagline { font-size: clamp(1rem, 1.8vw, 1.3rem); color: var(--white); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }
.hero-tagline .since { color: var(--yellow); font-family: 'Bebas Neue'; font-size: 1.4em; padding: 0 6px; }
.hero-sub { color: rgba(255,255,255,0.85); font-size: 0.98rem; max-width: 640px; margin-top: 8px; }

.hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
  margin-top: 18px;
}
.hero-trust span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,230,0,0.32);
  border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
}
.hero-trust svg { width: 14px; height: 14px; color: var(--yellow); }

.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 32px; font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #FFE600 0%, #F5B800 100%);
  color: #000;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 36px rgba(255, 200, 0, 0.65), 0 0 60px rgba(255, 230, 0, 0.2);
}
.btn-secondary {
  background: var(--red); color: #fff;
  box-shadow: 0 4px 20px rgba(225,6,0,0.4);
}
.btn-secondary:hover {
  background: var(--red-deep);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 30px rgba(225,6,0,0.55);
}
.btn-outline {
  background: rgba(255, 230, 0, 0.08);
  color: var(--yellow);
  border: 1.5px solid rgba(255, 230, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: var(--yellow);
  color: #000;
  transform: translateY(-3px) scale(1.03);
  border-color: var(--yellow);
}
@media (max-width: 768px) {
  .hero {
    min-height: calc(100svh - 76px);
    padding: 88px 24px 110px;
  }
  .hero-content { gap: 10px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.1rem); }
  .hero-tagline { letter-spacing: 0.08em; line-height: 1.35; max-width: 320px; }
  .hero-sub { font-size: 0.92rem; line-height: 1.55; }
  .hero-trust { margin-top: 8px; gap: 8px; }
  .hero-trust span { padding: 5px 10px; }
  .hero-cta { margin-top: 12px; gap: 10px; }
  .hero-cta .btn-outline { display: none; }
  .btn { padding: 13px 24px; }
  .scroll-cue { display: none; }
}

.scroll-cue {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scroll-cue .line {
  width: 1px; height: 32px; background: var(--yellow); animation: pulse 1.6s ease-in-out infinite;
}
.scroll-cue:hover { color: var(--yellow); }
.scroll-cue:focus-visible {
  outline: 2px solid rgba(255, 230, 0, 0.65);
  outline-offset: 8px;
  border-radius: 999px;
}
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (max-width: 768px) {
  .hero-eyebrow {
    letter-spacing: 0.18em;
    line-height: 1.5;
    text-align: center;
  }
  .scroll-cue { display: none; }
}

/* ============================================================
   STICKY MOBILE CTA BAR (CRO 2026)
   ============================================================ */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: rgba(10,10,10,0.96); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,230,0,0.35);
  padding: 10px 12px;
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
}
.sticky-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sticky-bar a.call    { background: var(--yellow); color: #000; }
.sticky-bar a.directions { background: var(--card-2); color: var(--white); border: 1px solid rgba(255,230,0,0.4); }
.sticky-bar a.menu, .sticky-bar a.order      { background: var(--red); color: var(--white); }
.sticky-bar svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
  .sticky-bar { display: grid; }
  body { padding-bottom: 76px; }
}

/* ============================================================
   VIBE STRIP (carousel of storefront photos)
   ============================================================ */
/* Background was #000 — a leftover from the original dark theme and the only
   genuinely visible dark block left on this light page. It sits between the hero
   and Featured Treats, 160px tall on desktop, and because .vibe-track img is
   opacity:0.9 the black bled through every photo and showed as a solid band in
   any gap or while images loaded. Blush (matching the mobile .hero-bg override
   at the "Image focal audit" media query below) keeps the strip reading as part
   of the page instead of a hole punched through it. */
.vibe-strip { overflow: hidden; padding: 0; background: #f6e6ee; height: 160px; position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.vibe-track {
  display: flex; gap: 0; height: 100%; animation: scroll-x 42s linear infinite; width: max-content;
}
.vibe-track img { height: 100%; width: 300px; object-fit: cover; flex-shrink: 0; opacity: 0.9; }
@keyframes scroll-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.vibe-strip:hover .vibe-track { animation-play-state: paused; }
@media (max-width: 768px) { .vibe-strip { display: none; } }

/* ============================================================
   SECTIONS — tightened for faster scroll
   ============================================================ */
section { padding: 64px 0; }
@media (max-width: 768px) { section { padding: 48px 0; } }
.section-eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.4em; color: var(--yellow); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
h2.section-title { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 14px; }
.section-lede { color: var(--muted); font-size: 1rem; max-width: 640px; line-height: 1.55; }
.section-head { text-align: center; margin-bottom: 36px; }
.section-head .section-lede { margin: 10px auto 0; }

/* ============================================================
   MENU PREVIEW — homepage menu teaser cards (link to menu.html)
   ============================================================ */
.menu-preview-section { background: var(--bg); }
.menu-preview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px;
}
.menu-preview-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 4px 16px; padding: 22px 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.menu-preview-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--yellow); transform: scaleY(0); transform-origin: top;
  transition: transform 0.25s;
}
.menu-preview-card:hover {
  transform: translateY(-3px); border-color: var(--yellow);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
.menu-preview-card:hover::before { transform: scaleY(1); }
.menu-preview-card .mp-num {
  grid-row: 1 / 3; align-self: center;
  font-family: 'Bebas Neue'; font-size: 2.2rem; color: var(--yellow);
  line-height: 1; letter-spacing: 0.02em;
}
.menu-preview-card .mp-name {
  font-family: 'Bebas Neue'; font-size: 1.4rem; color: var(--white);
  letter-spacing: 0.02em; line-height: 1.1;
}
.menu-preview-card .mp-count {
  color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em;
}
.menu-preview-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 900px) { .menu-preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .menu-preview-grid { grid-template-columns: 1fr; } .menu-preview-card { padding: 18px 20px; } }
.featured-section { background: var(--bg); }
.featured-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.featured-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  display: flex; flex-direction: column;
}
.featured-card:hover {
  transform: translateY(-4px); border-color: var(--yellow);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.featured-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; background: #000; }
.featured-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.featured-card:hover img { transform: scale(1.06); }
.featured-card .body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.featured-card .name { font-family: 'Bebas Neue'; font-size: 1.45rem; color: var(--white); line-height: 1.05; letter-spacing: 0.02em; }
.featured-card .price { color: var(--yellow); font-weight: 700; font-size: 1rem; }
.featured-card .desc { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.featured-card .badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--red); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.featured-card .img-wrap { position: relative; }

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

/* ============================================================
   ABOUT / OUR STORY
   ============================================================ */
.about-section { background: #141414; }
.about-inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: center; }
.about-badge-wrap { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.about-badge-img {
  width: 280px; height: 280px; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--yellow);
  box-shadow: 0 0 50px rgba(255,215,0,0.25);
}
.about-stats-row { display: flex; gap: 32px; justify-content: center; }
.about-stat { text-align: center; }
.about-stat-num { font-family: 'Bebas Neue'; font-size: 2.6rem; color: var(--yellow); line-height: 1; }
.about-stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-top: 4px; }
.about-text { }
.about-text h2 { margin-bottom: 18px; }
.about-text p { color: #e8e8e8; line-height: 1.85; margin-bottom: 16px; font-size: 1.02rem; }
.about-text strong { color: var(--white); font-weight: 600; }
.about-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
.about-pillar { background: #222; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r); padding: 16px 18px; }
.about-pillar-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--yellow); font-weight: 700; margin-bottom: 6px; }
.about-pillar-desc { font-size: 0.9rem; color: #e0e0e0; line-height: 1.55; }

@media (max-width: 900px) { .about-inner { grid-template-columns: 1fr; gap: 40px; } .about-badge-wrap { flex-direction: row; } .about-badge-img { width: 180px; height: 180px; } }
@media (max-width: 600px) { .about-badge-wrap { flex-direction: column; } .about-pillars { grid-template-columns: 1fr; } }

/* ============================================================
   MENU SECTION (full menu preview)
   ============================================================ */
.menu-section { background: var(--bg); }
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.menu-tab {
  padding: 10px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; transition: all 0.2s;
}
.menu-tab:hover { color: var(--white); border-color: rgba(255,230,0,0.4); }
.menu-tab.is-active { background: var(--yellow); color: #000; border-color: var(--yellow); }

.menu-cat { margin-bottom: 48px; scroll-margin-top: 100px; }
.menu-cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.menu-cat-title { font-family: 'Bebas Neue'; font-size: 2rem; color: var(--white); letter-spacing: 0.02em; }
.menu-cat-note { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }

.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
.menu-item {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 16px;
  padding: 12px 0; align-items: center;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.menu-item .thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: #000; }
.menu-item .info { min-width: 0; }
.menu-item .name { color: var(--white); font-weight: 600; font-size: 1rem; margin-bottom: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.menu-item .badge-pop { font-size: 0.62rem; background: var(--red); color: #fff; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.menu-item .desc { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.menu-item .price { color: var(--yellow); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }

@media (max-width: 768px) {
  .menu-grid { grid-template-columns: 1fr; }
  .menu-item { grid-template-columns: 56px 1fr auto; }
  .menu-item .thumb { width: 56px; height: 56px; }
}

#featured {
  padding-bottom: 64px !important;
}

/* ============================================================
   PHOTO CAROUSEL — variety of subject types (storefront, window, product, customer, interior)
   ============================================================ */
.gallery-section { background: var(--card); padding: 64px 0; }
.gallery-section + .press-section { padding-top: 64px; }
@media (max-width: 768px) {
  .gallery-section + .press-section { padding-top: 48px; }
}
.gallery-wrap { position: relative; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  grid-auto-rows: 160px;
}
.gallery-grid .tile {
  position: relative; overflow: hidden; border-radius: 10px;
  background: #000; cursor: pointer;
}
.gallery-grid .tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease, filter 0.3s ease;
}
.gallery-grid .tile:hover img { transform: scale(1.06); filter: brightness(1.08); }
.gallery-grid .tile .tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 12px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  color: #fff; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  line-height: 1.3; opacity: 0; transition: opacity 0.25s;
}
.gallery-grid .tile:hover .tile-cap { opacity: 1; }

/* Asymmetric tiles for visual variety */
.gallery-grid .tile.tall { grid-row: span 2; }
.gallery-grid .tile.wide { grid-column: span 2; }

@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 140px; }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gallery-grid .tile.wide { grid-column: span 2; }
  .gallery-grid .tile.tall { grid-row: span 1; }
}
@media (max-width: 420px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .gallery-grid .tile.wide { grid-column: span 1; }
}

.gallery-view-all { text-align: center; margin-top: 24px; color: var(--muted); font-size: 0.85rem; }

/* ============================================================
   PRESS / FEATURED IN
   ============================================================ */
.press-section { background: var(--bg); padding: 64px 0; }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.press-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.press-card:hover { border-color: var(--yellow); transform: translateY(-3px); }
.press-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.press-source { color: var(--yellow); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.press-date { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; }
.press-title { font-family: 'Bebas Neue'; font-size: 1.18rem; line-height: 1.15; color: var(--white); }
.press-note { color: var(--muted); font-size: 0.82rem; line-height: 1.45; flex: 1; }
@media (max-width: 900px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .press-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PETE'S CLAM STOP — next-door family connection
   ============================================================ */
.petes-section { background: var(--card); padding: 64px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.petes-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.petes-text h2 { margin-bottom: 16px; }
.petes-text p { color: #e0e0e0; line-height: 1.75; margin-bottom: 12px; font-size: 1rem; }
.petes-text .fact-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.petes-text .fact { display: flex; flex-direction: column; gap: 2px; }
.petes-text .fact-label { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.petes-text .fact-value { color: var(--white); font-family: 'Bebas Neue'; font-size: 1.4rem; line-height: 1; }
.petes-text .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.petes-card {
  background: linear-gradient(135deg, #1A1A1A 0%, #0F0F0F 100%);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px 24px; text-align: center;
}
.petes-card .pete-name { font-family: 'Bebas Neue'; font-size: 2.4rem; color: var(--yellow); letter-spacing: 0.04em; margin-bottom: 4px; }
.petes-card .pete-tag { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; }
.petes-card .pete-addr { color: var(--white); margin-top: 14px; font-size: 0.95rem; line-height: 1.4; }
.petes-card .pete-meta { color: var(--muted); font-size: 0.82rem; margin-top: 8px; }
@media (max-width: 900px) { .petes-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: #141414; padding: 64px 0; }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: border-color 0.2s;
}
.faq-item:hover { border-color: rgba(255,230,0,0.4); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: 'Bebas Neue'; font-size: 1.25rem; color: var(--white); letter-spacing: 0.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: inherit; font-size: 1.6rem; color: var(--yellow); transition: transform 0.3s; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .answer { padding: 0 24px 22px; color: #e0e0e0; line-height: 1.7; font-size: 0.96rem; }

/* ============================================================
   REVIEWS / TRUST
   ============================================================ */
.reviews-section { background: var(--bg); }
.review-platforms {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px;
}
.rv-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 24px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  transition: transform 0.2s, border-color 0.2s;
}
.rv-card:hover { transform: translateY(-3px); border-color: rgba(255,230,0,0.4); }
.rv-platform { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.rv-score { font-family: 'Bebas Neue'; font-size: 3rem; color: var(--yellow); line-height: 1; margin: 4px 0; }
.rv-stars { color: var(--yellow); letter-spacing: 2px; font-size: 1.1rem; }
.rv-count { color: var(--muted); font-size: 0.78rem; }
@media (max-width: 768px) { .review-platforms { grid-template-columns: repeat(2, 1fr); } }

.review-quotes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px;
}
.review-quote {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px;
}
.review-quote .stars { color: var(--yellow); font-size: 1rem; }
.review-quote blockquote {
  font-family: 'Caveat', cursive; font-size: 1.4rem; line-height: 1.35; color: var(--white);
  font-weight: 400;
}
.review-quote cite { color: var(--muted); font-size: 0.82rem; font-style: normal; }
.review-quote cite strong { color: var(--yellow); font-weight: 600; }
@media (max-width: 900px) { .review-quotes { grid-template-columns: 1fr; } }

.review-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 34px;
  padding: 8px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.review-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: reviewsMarquee 74s linear infinite;
  will-change: transform;
}
.review-carousel:hover .review-track { animation-play-state: paused; }
.review-candy-card {
  width: clamp(270px, 28vw, 360px);
  min-height: 232px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 18px;
  border-radius: 28px 28px 28px 8px;
  border: 2px solid rgba(255,255,255,0.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(253,237,201,0.76) 43%, rgba(248,216,234,0.82)),
    radial-gradient(circle at 16% 16%, rgba(138,207,209,0.52), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(230,112,171,0.3), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -12px 24px rgba(208,79,153,0.09),
    0 16px 34px rgba(208,79,153,0.16);
  color: #3b2340;
}
.review-candy-card:nth-child(3n+2) {
  border-radius: 28px 8px 28px 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(178,225,235,0.5) 38%, rgba(253,237,201,0.82)),
    radial-gradient(circle at 80% 18%, rgba(230,112,171,0.32), transparent 36%);
}
.review-candy-card:nth-child(3n+3) {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(251,226,167,0.82) 40%, rgba(243,160,202,0.58)),
    radial-gradient(circle at 18% 82%, rgba(138,207,209,0.42), transparent 34%);
}
.review-candy-card.review-variant-0 {
  border-radius: 28px 28px 28px 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(253,237,201,0.76) 43%, rgba(248,216,234,0.82)),
    radial-gradient(circle at 16% 16%, rgba(138,207,209,0.42), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(230,112,171,0.3), transparent 38%);
}
.review-candy-card.review-variant-1 {
  border-radius: 28px 8px 28px 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,216,234,0.58) 38%, rgba(253,237,201,0.82)),
    radial-gradient(circle at 80% 18%, rgba(230,112,171,0.32), transparent 36%);
}
.review-candy-card.review-variant-2 {
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(251,226,167,0.82) 40%, rgba(243,160,202,0.58)),
    radial-gradient(circle at 18% 82%, rgba(255,154,37,0.18), transparent 34%);
}
.review-candy-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.review-candy-stars {
  color: #d04f99;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
.review-candy-source {
  color: #277582;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.review-candy-card blockquote {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.48;
  font-weight: 850;
  color: #3b2340;
  text-wrap: balance;
}
.review-candy-card cite {
  margin-top: auto;
  color: #765d6f;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
}
.review-candy-card cite strong { color: #d04f99; font-weight: 950; }
@keyframes reviewsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--review-loop-distance, 50%))); }
}
@media (max-width: 768px) {
  .review-carousel { margin-inline: -16px; padding-left: 16px; }
  .review-track { gap: 12px; animation-duration: 62s; }
  .review-candy-card {
    width: min(82vw, 320px);
    min-height: 218px;
    padding: 18px;
    border-radius: 24px 24px 24px 8px;
  }
  .review-candy-card blockquote { font-size: 0.94rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .review-track { animation: none; flex-wrap: nowrap; overflow-x: auto; }
}

/* ============================================================
   LOCATION
   ============================================================ */
.location-section { background: var(--card); padding: 64px 0; }
.loc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: stretch; }
.map-frame {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); min-height: 460px;
  background: var(--card-2);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 460px; border: 0; filter: invert(0.92) hue-rotate(180deg); }
.info-stack { display: flex; flex-direction: column; gap: 14px; }
.info-card {
  background: var(--card-2); border: 1px solid var(--border); border-left: 4px solid var(--yellow);
  border-radius: var(--r); padding: 18px 22px;
}
.info-card .label { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.info-card .value { font-size: 1rem; font-weight: 500; line-height: 1.5; }
.info-card a:hover { color: var(--yellow); }
.hours-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.92rem; }
.hours-grid span:nth-child(odd) { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; padding-top: 2px; }
.hours-grid .is-today { color: var(--yellow); font-weight: 700; }
.hours-grid .is-today::before { content: '● '; }

.nearby-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nearby-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem;
}
.nearby-row strong { color: var(--white); font-weight: 600; }
.nearby-row span { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

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

/* ============================================================
   DELIVERY ROW (footer + sticky)
   ============================================================ */
.delivery-row {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 14px; padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: #0F0F0F;
}
.delivery-row .label { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-right: 6px; }
.delivery-row a {
  padding: 8px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 0.2s;
}
.delivery-row a:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }
.delivery-row a.featured { background: var(--red); color: #fff; border-color: var(--red); }
.delivery-row a.featured:hover { background: var(--red-deep); }
.delivery-row .sep { color: var(--border); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--darker); padding: 56px 24px 28px; border-top: 1px solid var(--border); }
.footer-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.footer-grid h4 { font-family: 'Bebas Neue'; font-size: 1.1rem; color: var(--yellow); margin-bottom: 14px; letter-spacing: 0.12em; }
.footer-grid a { display: block; padding: 5px 0; color: var(--muted); font-size: 0.9rem; transition: color 0.2s; }
.footer-grid a:hover { color: var(--yellow); }
.footer-grid p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.footer-bottom {
  max-width: var(--max); margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%;
  display: grid; place-items: center; transition: all 0.2s;
}
.footer-social a:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(255,230,0,0.06); }
.footer-social svg { width: 16px; height: 16px; }

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

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width: 880px) {
  .nav { display: none; }
  .hamburger { display: flex; }
}

/* ============================================================
   UTILS
   ============================================================ */
.divider-yellow { width: 60px; height: 3px; background: var(--yellow); margin: 12px auto 0; }
.divider-red { width: 60px; height: 3px; background: var(--red); margin: 12px auto 0; }
.text-yellow { color: var(--yellow); }
.text-red { color: var(--red); }
.text-script { font-family: 'Caveat', cursive; font-weight: 700; }

/* ============================================================
   JSON-LD-friendly semantic landmarks
   ============================================================ */
[role="region"][aria-label] { scroll-margin-top: 100px; }

/* ============================================================
   MODERN CANDY SHOP REDESIGN  <- the live brand palette

   Every custom property in this stylesheet is now declared EXACTLY ONCE, so the
   value you read is the value the browser uses. That was not true before: nine
   separate top-level custom-property blocks between them carried 95 declarations
   of 89 properties, and the duplicates all lost silently to whichever block came
   last. Editing a colour in the wrong one changed nothing while looking like it
   should have.

   Two things to know about where the live values actually live:

     --card (#fdedc9, cream) and --border (#d04f99, a saturated magenta) are
     declared in the "V8 PASTEL CANDY THEME" block further down, not here. That
     block is a shadcn/ui token set, which is also where --muted came from - it
     redefined --muted from this palette's grey TEXT colour to a pale blue
     SURFACE colour, silently dropping all 49 of its text call sites to about
     1.3:1 contrast. That override is gone; see the note beside --muted there.

     If you add a property, add it in ONE place. Two declarations of the same
     name is how every problem described above started.
   ============================================================ */
:root {
  --yellow: #ffd84d;
  --red: #ff4f8b;
  --red-deep: #d92867;
  --cream: #fff6df;
  --bg: #fff7fb;
  --card-2: #fff0f7;
  /* NAME LIES, VALUE IS CORRECT - do not "fix" this to #fff.
     --white is the light theme's primary INK colour (a dark plum), not white.
     It kept its old name through the dark-to-light redesign, and all 17 call
     sites use it for text on cream/white surfaces, where dark plum is right and
     reads at strong contrast. Setting it to actual white would turn the nav,
     hero tagline, menu item names, card titles and press headlines invisible in
     one stroke. Read it as --ink. */
  --white: #32162b;
  --muted: #765d6f;
  --green: #28c78f;
  --darker: #fff0d9;
  --mint: #b8f7e0;
  --sky: #bde7ff;
  --grape: #7a5cff;
  --shadow: 0 18px 45px rgba(255, 79, 139, 0.14);
  --r: 22px;
}

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  background:
    linear-gradient(180deg, #fff7fb 0%, #fff9ef 44%, #f1fff9 100%);
  color: #32162b;
}

h1, h2, h3, h4,
.logo-mark,
.menu-preview-card .mp-num,
.menu-preview-card .mp-name,
.featured-card .name,
.about-stat-num,
.menu-cat-title,
.press-title,
.petes-card .pete-name,
.rv-score,
.footer-grid h4 {
  font-family: 'Fredoka', system-ui, sans-serif;
  letter-spacing: 0;
}

.text-script,
.logo-mark .script,
.hero h1 .script,
.menu-hero h1 .script,
.review-quote blockquote {
  font-family: 'Fredoka', system-ui, sans-serif;
}

.site-header {
  background: rgba(255, 247, 251, 0.9);
  border-bottom: 1px solid rgba(255, 79, 139, 0.16);
  box-shadow: 0 12px 30px rgba(255, 79, 139, 0.08);
}
.site-header.is-scrolled { background: rgba(255, 247, 251, 0.98); }
.logo-mark { color: #32162b; font-weight: 800; }
.logo-mark .script { color: var(--red); }
.nav a { color: #32162b; letter-spacing: 0.03em; text-transform: none; font-weight: 800; }
.nav a::after { background: var(--red); }
.nav-cta {
  background: #32162b;
  color: #fff !important;
  border-radius: 16px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow);
}
.hamburger span { background: #32162b; }
.mobile-drawer {
  background: #fff7fb;
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 50px rgba(255, 79, 139, 0.16);
}
.mobile-drawer a {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: #32162b;
  border-bottom-color: var(--border);
}

.hero { min-height: 92vh; padding: 104px 24px 96px; }
.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(255, 247, 251, 0.72) 0%, rgba(255, 247, 251, 0.58) 42%, rgba(255, 247, 251, 0.94) 100%),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.25), rgba(255, 216, 77, 0.18) 36%, rgba(255, 79, 139, 0.14) 68%);
}
.hero-content { gap: 18px; }
.hero-eyebrow {
  color: #32162b;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255, 79, 139, 0.25);
  box-shadow: var(--shadow);
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: 999px;
}
.hero h1 {
  color: var(--red);
  text-shadow: 0 8px 28px rgba(255, 79, 139, 0.2);
  line-height: 0.95;
}
.hero h1 .script {
  color: #32162b;
  text-shadow: none;
}
.hero-tagline {
  color: #32162b;
  letter-spacing: 0.03em;
  text-transform: none;
  font-weight: 800;
}
.hero-tagline .since {
  color: var(--red-deep);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 1.05em;
}
.hero-sub {
  color: #4e3347;
  background: rgba(255,255,255,0.72);
  padding: 10px 16px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(255,255,255,0.35);
}
.hero-ratings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(100%, 820px);
  margin: 2px auto 0;
}
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(255, 79, 139, 0.12);
  color: #32162b;
  font-weight: 900;
  font-size: 0.84rem;
  backdrop-filter: blur(16px) saturate(1.25);
}
.rating-pill .stars {
  color: #d28a00;
  letter-spacing: 0.02em;
}
.rating-stars {
  --rating: 5;
  --star-fill: #d7488e;
  --star-empty: rgba(215, 72, 142, 0.24);
  position: relative;
  display: inline-block;
  width: 5em;
  flex: 0 0 auto;
  line-height: 1;
  letter-spacing: 0;
  color: transparent;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}
.rating-stars::before,
.rating-stars::after {
  content: "★★★★★";
  display: block;
  white-space: nowrap;
}
.rating-stars::before {
  color: var(--star-empty);
}
.rating-stars::after {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc((var(--rating) / 5) * 100%);
  overflow: hidden;
  color: var(--star-fill);
}
.text-yellow { color: var(--red-deep); }
.hero-trust { gap: 10px; margin-top: 8px; }
.hero-trust span {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255, 79, 139, 0.18);
  color: #32162b;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(255, 79, 139, 0.1);
}
.hero-trust span:nth-child(2) { background: rgba(184,247,224,0.9); }
.hero-trust span:nth-child(3) { background: rgba(255,216,77,0.9); }
.hero-trust span:nth-child(4) { background: rgba(189,231,255,0.9); }
.hero-trust svg { color: var(--red-deep); }

.btn {
  border-radius: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(255, 79, 139, 0.16), inset 0 1px 0 rgba(255,255,255,0.64);
  border: 1px solid rgba(255,255,255,0.72);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.54) 42%, transparent 68%);
  transform: translateX(-140%);
  transition: transform 520ms ease;
  z-index: -1;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px rgba(255, 79, 139, 0.22), inset 0 1px 0 rgba(255,255,255,0.78);
}
.btn:hover::before { transform: translateX(140%); }
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible {
  outline: 3px solid rgba(40, 199, 143, 0.42);
  outline-offset: 3px;
}
.btn-primary {
  background: linear-gradient(135deg, #ffe27a 0%, #ffb34f 100%);
  color: #32162b;
}
.btn-secondary {
  background: linear-gradient(135deg, #ff4f8b 0%, #ff7ab8 100%);
  color: #fff;
}
.btn-outline {
  background: rgba(255,255,255,0.82);
  color: #32162b;
  border: 1px solid rgba(255, 79, 139, 0.22);
}

section { background: transparent; }
.section-eyebrow {
  color: var(--red-deep);
  letter-spacing: 0.08em;
  text-transform: none;
}
h2.section-title { color: #32162b; }
.section-lede { color: #765d6f; }
.divider-yellow, .divider-red {
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4f8b, #ffd84d, #28c78f);
}

.featured-card,
.menu-preview-card,
.about-pillar,
.press-card,
.press-item,
.rv-card,
.review-quote,
.info-card,
.faq-item,
.petes-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.58));
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow: 0 18px 46px rgba(255, 79, 139, 0.13), inset 0 1px 0 rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(1.22);
}
.featured-card,
.gallery-grid .tile,
.menu-preview-card,
.press-card,
.press-item,
.rv-card,
.review-quote,
.info-card,
.faq-item { border-radius: 22px; }
.featured-card,
.menu-preview-card,
.about-pillar,
.rv-card,
.review-quote,
.info-card,
.faq-item,
.gallery-grid .tile {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.featured-card:hover,
.menu-preview-card:hover,
.about-pillar:hover,
.rv-card:hover,
.review-quote:hover,
.info-card:hover,
.faq-item:hover,
.gallery-grid .tile:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 79, 139, 0.22);
  box-shadow: 0 24px 54px rgba(255, 79, 139, 0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}

.featured-card .img-wrap { background: #fff0f7; }
.featured-card .badge {
  background: #32162b;
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 12px;
}
.featured-card .name,
.menu-preview-card .mp-num,
.featured-card .desc,
.press-title,
.review-quote blockquote,
.info-card .value,
.faq-item summary,
.petes-text .fact-value { color: #32162b; }
.featured-card .price,
.about-stat-num,
.rv-score,
.rv-stars,
.press-source,
.footer-grid h4 { color: var(--red-deep); }
.featured-card .desc,
.press-note,
.rv-count,
.rv-platform,
.review-quote cite,
.info-card .label,
.nearby-row span,
.footer-grid p,
.footer-grid a { color: #765d6f; }

.about-section,
.gallery-section,
.faq-section,
.location-section,
.reviews-section,
.press-section,
.menu-preview-section,
.petes-section {
  background: transparent;
}
.about-badge-img {
  border-radius: 28px;
  border: 6px solid #fff;
  box-shadow: var(--shadow);
}
.about-text p { color: #4e3347; }
.about-text strong { color: #32162b; }

.menu-preview-card::before { background: linear-gradient(180deg, #ff4f8b, #ffd84d); }
.menu-preview-card .mp-num { color: var(--red); }
.menu-preview-card .mp-name { color: #32162b; }
.menu-preview-card .mp-count { color: #765d6f; }

.gallery-grid { gap: 14px; }
.gallery-grid .tile {
  background: #fff;
  border: 6px solid #fff;
  box-shadow: var(--shadow);
}
.gallery-grid .tile .tile-cap {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(50,22,43,0.74) 100%);
  font-weight: 800;
}
.gallery-grid .tile img {
  background: linear-gradient(135deg, #fff0f7, #f1fff9);
}
.gallery-grid .tile img.is-broken { display: none; }

.press-accordion {
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.press-item {
  padding: 0;
  overflow: hidden;
}
.press-item summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
}
.press-item summary::-webkit-details-marker { display: none; }
.press-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 79, 139, 0.1);
  color: var(--red-deep);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  transition: transform 180ms ease, background 180ms ease;
}
.press-item[open] summary::after {
  transform: rotate(45deg);
  background: rgba(40, 199, 143, 0.16);
}
.press-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--red-deep);
  font-weight: 900;
  font-size: 0.78rem;
  margin-bottom: 6px;
}
.press-title {
  display: block;
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.15;
}
.press-date { color: #765d6f; font-weight: 800; }
.press-note {
  padding: 0 20px 18px;
  line-height: 1.6;
}
.press-note a {
  color: var(--red-deep);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.petes-card { background: linear-gradient(135deg, #fff 0%, #fff0f7 100%); }
.petes-card .pete-name { color: var(--red-deep); }
.petes-card .pete-addr { color: #32162b; }
.faq-item summary {
  font-family: 'Fredoka', system-ui, sans-serif;
  letter-spacing: 0;
}
.faq-item .answer,
.petes-text p { color: #4e3347; }
.faq-item summary::after { color: var(--red); }

.map-frame {
  border: 6px solid #fff;
  box-shadow: var(--shadow);
}
.map-frame iframe { filter: none; }
.info-card { border-left: 6px solid var(--red); }
.hours-grid .is-today { color: var(--red-deep); }

.delivery-row {
  background: rgba(255,255,255,0.7);
  border-color: var(--border);
}
.delivery-row .label { color: #765d6f; letter-spacing: 0.08em; }
.delivery-row a {
  background: #fff;
  color: #32162b;
  border-color: var(--border);
  border-radius: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.delivery-row a.featured {
  background: var(--red);
  border-color: var(--red);
}
.site-footer {
  background: #fff0d9;
  border-top: 1px solid var(--border);
}
.footer-bottom { border-top-color: var(--border); color: #765d6f; }
.footer-social a { border-color: var(--border); background: #fff; color: #32162b; }

.sticky-bar {
  background: rgba(255, 247, 251, 0.96);
  border-top: 1px solid rgba(255, 79, 139, 0.18);
  box-shadow: 0 -14px 40px rgba(255, 79, 139, 0.16);
}
.sticky-bar a {
  border-radius: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.76rem;
}
.sticky-bar a.call { background: #ffd84d; color: #32162b; }
.sticky-bar a.directions {
  background: #fff;
  color: #32162b;
  border-color: rgba(255, 79, 139, 0.22);
}
.sticky-bar a.menu, .sticky-bar a.order { background: #ff4f8b; color: #fff; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .featured-card,
  .menu-preview-card,
  .about-pillar,
  .rv-card,
  .review-quote,
  .info-card,
  .faq-item,
  .gallery-grid .tile,
  .reveal {
    transition: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .site-header { height: 68px; }
  .logo-mark { font-size: 1.28rem; }
  .logo-mark .script { font-size: 1.45rem; }
  .hero {
    min-height: auto;
    padding: 92px 18px 34px;
    align-items: flex-start;
  }
  .hero-bg img {
    height: 56%;
    object-position: center top;
  }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(255,247,251,0.48) 0%, rgba(255,247,251,0.78) 44%, #fff7fb 78%, #fff7fb 100%);
  }
  .hero-content {
    gap: 12px;
    margin-top: 0;
  }
  .hero-eyebrow {
    max-width: 100%;
    padding: 7px 12px;
    font-size: 0.76rem;
  }
  .hero h1 {
    font-size: clamp(3rem, 16vw, 4.25rem);
    max-width: 360px;
  }
  .hero-tagline {
    max-width: 290px;
    font-size: 1rem;
  }
  .hero-sub {
    max-width: 340px;
    font-size: 0.95rem;
    margin-top: 0;
    padding: 12px 14px;
  }
  .hero-ratings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 340px);
    gap: 8px;
  }
  .rating-pill {
    justify-content: center;
    min-height: 42px;
    padding: 8px 7px;
    text-align: center;
    font-size: 0.76rem;
  }
  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 340px);
    gap: 8px;
  }
  .hero-trust span {
    justify-content: center;
    min-height: 44px;
    padding: 8px;
    text-align: center;
    font-size: 0.74rem;
  }
  .hero-cta {
    width: min(100%, 340px);
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 8px;
  }
  .hero-cta .btn { width: 100%; }
  .btn { min-height: 54px; }
  section { padding: 44px 0; }
  .section-head { margin-bottom: 24px; }
  .featured-grid,
  .review-platforms,
  .review-quotes,
  .footer-grid { grid-template-columns: 1fr; }
  .press-accordion { gap: 10px; }
  .press-item summary {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 16px;
  }
  .press-note { padding: 0 16px 16px; }
  .featured-card .body { padding: 16px; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    grid-auto-rows: 150px;
  }
  .gallery-grid .tile { border-width: 4px; }
  .gallery-grid .tile.wide,
  .gallery-grid .tile.tall { grid-column: auto; grid-row: auto; }
  .about-badge-wrap { gap: 18px; }
  .about-badge-img {
    width: 100%;
    height: 220px;
    border-radius: 24px;
  }
  .about-stats-row {
    width: 100%;
    gap: 10px;
    justify-content: space-between;
  }
  .about-stat { flex: 1; }
  .about-stat-num { font-size: 2rem; }
}

/* ============================================================
   VISUAL LEVEL-UP PASS — stronger typography, glass, contrast
   ============================================================ */
:root {
  --berry: #ec3f8c;
  --berry-deep: #b91561;
  --candy-gold: #f0a800;
  --glass: rgba(255,255,255,0.58);
  --glass-strong: rgba(255,255,255,0.74);
}

body {
  font-weight: 700;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 136, 190, 0.22), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(72, 214, 196, 0.18), transparent 26%),
    linear-gradient(180deg, #fff7fc 0%, #fff4e5 48%, #ecfff8 100%);
}

h1, h2, h3, h4,
.logo-mark,
.featured-card .name,
.menu-preview-card .mp-name,
.press-title,
.about-stat-num,
.rv-score {
  font-weight: 800;
}

.site-header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  border-bottom: 1px solid rgba(255,255,255,0.88);
}
.logo-mark {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
}
.logo-mark .script {
  color: var(--berry);
  text-shadow: 0 7px 18px rgba(236, 63, 140, 0.22);
}

.hero {
  min-height: 96vh;
}
.hero-bg img {
  object-position: center 42%;
  filter: saturate(1.2) contrast(1.05) brightness(1.03);
}
.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(255, 247, 252, 0.52) 0%, rgba(255, 247, 252, 0.66) 48%, rgba(255, 247, 252, 0.94) 100%),
    radial-gradient(circle at 50% 36%, rgba(255,255,255,0.16), rgba(255, 226, 122, 0.16) 32%, rgba(236, 63, 140, 0.18) 66%);
}
.hero h1 {
  font-size: clamp(5rem, 13vw, 10rem);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--berry);
  text-shadow: 0 14px 34px rgba(236, 63, 140, 0.25);
}
.hero h1 .script {
  color: var(--ink);
}
.hero-tagline {
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 900;
}
.hero-sub {
  max-width: 780px;
  padding: 16px 20px;
  color: #43223d;
  font-weight: 800;
  background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,255,255,0.5));
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(1.25);
}
.hero-eyebrow,
.rating-pill,
.hero-trust span {
  background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.48));
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: 0 16px 42px rgba(185, 21, 97, 0.14), inset 0 1px 0 rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
}
.rating-pill {
  min-height: 44px;
  padding: 10px 15px;
  font-size: 0.9rem;
}
.rating-pill .stars,
.review-quote .stars,
.rv-stars {
  color: var(--candy-gold);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.btn {
  min-height: 54px;
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 0.94rem;
  font-weight: 900;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.7), rgba(255,255,255,0.28)),
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.95), transparent 34%);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 20px 46px rgba(185, 21, 97, 0.2), inset 0 1px 0 rgba(255,255,255,1), inset 0 -14px 28px rgba(255,255,255,0.22);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.btn::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 8px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.12));
  pointer-events: none;
  z-index: 0;
}
.btn > *,
.btn svg {
  position: relative;
  z-index: 1;
}
.btn-primary {
  background:
    linear-gradient(145deg, rgba(255, 226, 122, 0.74), rgba(255, 173, 75, 0.46)),
    radial-gradient(circle at 25% 8%, rgba(255,255,255,0.92), transparent 38%);
  border-color: rgba(255,255,255,0.9);
}
.btn-secondary {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(236, 63, 140, 0.9), rgba(255, 122, 184, 0.66)),
    radial-gradient(circle at 25% 8%, rgba(255,255,255,0.62), transparent 36%);
}
.btn-outline {
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.36)),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.98), transparent 36%);
  border-color: rgba(236, 63, 140, 0.24);
}

.section-eyebrow,
.about-pillar-title {
  color: var(--berry-deep);
  font-size: 0.8rem;
  font-weight: 1000;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h2.section-title {
  color: var(--ink);
  font-size: clamp(2.35rem, 6vw, 4.5rem);
  line-height: 0.98;
  font-weight: 800;
}
.section-lede,
.about-text p,
.featured-card .desc,
.about-pillar-desc,
.press-note,
.rv-count,
.rv-platform,
.review-quote cite,
.info-card .label,
.footer-grid p,
.footer-grid a {
  color: #5a3b52;
  font-weight: 750;
}

.featured-card,
.menu-preview-card,
.about-pillar,
.press-item,
.rv-card,
.review-quote,
.info-card,
.faq-item,
.petes-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.76), rgba(255,255,255,0.42)),
    radial-gradient(circle at 16% 0%, rgba(255,255,255,0.92), transparent 36%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.about-pillar {
  padding: 20px 22px;
}
.about-pillar-desc {
  font-size: 0.98rem;
  line-height: 1.62;
}
.featured-card .img-wrap {
  height: 250px;
  background: linear-gradient(135deg, #fff0f7, #fff9e7);
}
.featured-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
}
.featured-card .badge {
  background: rgba(42, 19, 48, 0.82);
  backdrop-filter: blur(12px);
}
.featured-card .name {
  font-size: 1.45rem;
}
.featured-card .price {
  color: var(--berry-deep);
  font-size: 1.15rem;
  font-weight: 1000;
}

.sticky-bar {
  gap: 10px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  border-top: 1px solid rgba(255,255,255,0.92);
  box-shadow: 0 -22px 50px rgba(185, 21, 97, 0.16);
}
.sticky-bar a {
  min-height: 58px;
  border-radius: 22px;
  font-weight: 1000;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32)),
    radial-gradient(circle at 20% 8%, rgba(255,255,255,0.96), transparent 34%);
  border: 1px solid rgba(255,255,255,0.92);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(185, 21, 97, 0.16), inset 0 1px 0 rgba(255,255,255,1), inset 0 -12px 24px rgba(255,255,255,0.24);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  position: relative;
  overflow: hidden;
}
.sticky-bar a::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 8px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.1));
  pointer-events: none;
}
.sticky-bar a span,
.sticky-bar a svg {
  position: relative;
  z-index: 1;
}
.sticky-bar a.call {
  background:
    linear-gradient(145deg, rgba(255, 226, 122, 0.8), rgba(255, 178, 79, 0.5)),
    radial-gradient(circle at 20% 8%, rgba(255,255,255,0.94), transparent 36%);
}
.sticky-bar a.menu, .sticky-bar a.order {
  background:
    linear-gradient(145deg, rgba(236, 63, 140, 0.92), rgba(255, 122, 184, 0.7)),
    radial-gradient(circle at 20% 8%, rgba(255,255,255,0.62), transparent 36%);
  color: #fff;
}

@media (max-width: 768px) {
  .hero {
    min-height: 92svh;
    padding: 86px 18px 44px;
  }
  .hero-bg img {
    height: 62%;
    object-position: center top;
  }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(255,247,252,0.34) 0%, rgba(255,247,252,0.72) 42%, #fff7fc 76%, #fff7fc 100%);
  }
  .hero h1 {
    font-size: clamp(3.45rem, 18vw, 5.1rem);
  }
  .hero-sub {
    max-width: 100%;
    font-size: 1rem;
  }
  .rating-pill {
    min-height: 46px;
    font-size: 0.78rem;
  }
  h2.section-title {
    font-size: clamp(2.2rem, 10vw, 3.1rem);
  }
  .about-pillars {
    gap: 14px;
  }
  .about-pillar {
    padding: 18px;
  }
  .featured-card .img-wrap {
    height: 232px;
  }
}

/* ============================================================
   PALETTE + TYPE PIVOT — no Dunkin bubble aesthetic
   ============================================================ */
:root {
  --cocoa: #3a2438;
  --cherry: #9f1239;
  --cherry-bright: #d61f53;
  --cranberry: #7f1d4f;
  --mint-deep: #0f8f84;
  --mint-soft: #d8fff5;
  --vanilla: #fff8ec;
  --sugar: #fffaf7;
  --blush-soft: #f7dce6;
  --gold-soft: #c48a1b;
  --glass-edge: rgba(255,255,255,0.88);
  --glass-shadow: 0 26px 72px rgba(127, 29, 79, 0.14), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -18px 36px rgba(15,143,132,0.045);
}

body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 650;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(216, 255, 245, 0.62), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(247, 220, 230, 0.48), transparent 28%),
    linear-gradient(180deg, #fffaf7 0%, #fff7ef 46%, #f1fff9 100%);
}

h1, h2, h3, h4,
.logo-mark,
.hero h1,
.section-title,
.featured-card .name,
.menu-preview-card .mp-name,
.press-title,
.about-stat-num,
.rv-score,
.petes-card .pete-name,
.petes-text .fact-value,
.faq-item summary,
.footer-grid h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 850;
  letter-spacing: 0;
}

.text-script,
.logo-mark .script,
.hero h1 .script,
.menu-hero h1 .script,
.review-quote blockquote {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 850;
}

.site-header {
  background: rgba(255, 250, 247, 0.76);
  border-bottom: 1px solid rgba(255,255,255,0.86);
  box-shadow: 0 18px 38px rgba(35, 21, 43, 0.08);
}
.logo-mark {
  color: var(--ink);
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
}
.logo-mark .script {
  color: var(--cherry);
  text-shadow: none;
}
.hamburger span {
  background: var(--ink);
}
.mobile-drawer a,
.hero-tagline .since {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 900;
}

.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(255,250,247,0.48) 0%, rgba(255,250,247,0.66) 48%, rgba(255,250,247,0.96) 100%),
    radial-gradient(circle at 52% 36%, rgba(216,255,245,0.16), rgba(255,248,236,0.28) 36%, rgba(159,18,57,0.12) 74%);
}
.hero h1 {
  color: var(--cherry);
  line-height: 0.88;
  text-shadow: 0 16px 38px rgba(159, 18, 57, 0.16);
}
.hero h1 .script {
  color: var(--ink);
}
.hero-tagline,
.hero-sub,
.hero-eyebrow,
.hero-trust span,
.rating-pill {
  color: var(--cocoa);
}
.hero-tagline .since,
.text-yellow {
  color: var(--mint-deep);
}
.rating-pill .stars,
.review-quote .stars,
.rv-stars {
  color: var(--gold-soft);
}
.hero-trust span:nth-child(2),
.hero-trust span:nth-child(3),
.hero-trust span:nth-child(4) {
  background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(216,255,245,0.36));
}
.hero-trust svg {
  color: var(--mint-deep);
}

.btn,
.sticky-bar a {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 850;
}
.btn-primary,
.sticky-bar a.call {
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(216,255,245,0.82), rgba(255,255,255,0.36)),
    radial-gradient(circle at 24% 8%, rgba(255,255,255,0.92), transparent 38%);
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 18px 44px rgba(15, 143, 132, 0.16), inset 0 1px 0 rgba(255,255,255,1), inset 0 -14px 30px rgba(15,143,132,0.08);
}
.btn-secondary,
.sticky-bar a.menu, .sticky-bar a.order {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(159,18,57,0.94), rgba(214,31,83,0.76)),
    radial-gradient(circle at 24% 8%, rgba(255,255,255,0.46), transparent 38%);
  box-shadow: 0 18px 44px rgba(159, 18, 57, 0.22), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -14px 30px rgba(35,21,43,0.1);
}
.btn-outline,
.sticky-bar a.directions {
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,248,236,0.42)),
    radial-gradient(circle at 24% 8%, rgba(255,255,255,0.98), transparent 38%);
  border-color: rgba(127,29,79,0.16);
}

.section-eyebrow,
.about-pillar-title,
.press-source,
.footer-grid h4 {
  color: var(--mint-deep);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.14em;
}
h2.section-title {
  color: var(--ink);
}
.section-lede,
.about-text p,
.featured-card .desc,
.about-pillar-desc,
.press-note,
.rv-count,
.rv-platform,
.review-quote cite,
.info-card .label,
.footer-grid p,
.footer-grid a,
.menu-preview-card .mp-count {
  color: #644b60;
}
.divider-yellow,
.divider-red {
  background: linear-gradient(90deg, var(--cherry), var(--mint-deep), var(--gold-soft));
}

.featured-card,
.menu-preview-card,
.about-pillar,
.press-item,
.rv-card,
.review-quote,
.info-card,
.faq-item,
.petes-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,248,236,0.42)),
    radial-gradient(circle at 14% 0%, rgba(216,255,245,0.42), transparent 34%);
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow: var(--glass-shadow);
}
.menu-preview-card {
  grid-template-columns: 58px 1fr;
  gap: 6px 18px;
}
.menu-preview-card::before {
  width: 5px;
  background: linear-gradient(180deg, var(--cherry), var(--mint-deep));
}
.menu-preview-card:hover {
  border-color: rgba(15,143,132,0.24);
}
.menu-preview-card .mp-num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(145deg, var(--cherry), var(--cranberry));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 24px rgba(159,18,57,0.16);
}
.menu-preview-card .mp-name {
  color: var(--ink);
  font-size: clamp(1.28rem, 4.8vw, 1.65rem);
  line-height: 1.05;
}
.featured-card .price,
.about-stat-num,
.rv-score,
.petes-card .pete-name {
  color: var(--cherry);
}
.featured-card .badge {
  background: rgba(35, 21, 43, 0.82);
}
.gallery-grid .tile {
  border-color: rgba(255,255,255,0.82);
}
.site-footer {
  background: #f4fff9;
}
.sticky-bar {
  background: rgba(255,250,247,0.72);
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: clamp(3rem, 16vw, 4.75rem);
  }
  .menu-preview-card {
    grid-template-columns: 52px 1fr;
    padding: 18px;
  }
  .menu-preview-card .mp-num {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1rem;
  }
}
/* ============================================================
   VIBRANT CANDY V5 — marshmallow UI, no slot font
   ============================================================ */
:root {
  --ink: #2d1732;
  --plum: #3d2147;
  --candy-red: #e52245;
  --candy-pink: #ff4f91;
  --candy-orange: #ff8f1f;
  --candy-yellow: #ffd447;
  --candy-mint: #49e5bd;
  --candy-blue: #45c7ff;
  --marshmallow: #fff9f2;
  --marshmallow-2: #fff1f7;
  --v5-shadow: 0 24px 68px rgba(229, 34, 69, 0.16), inset 0 1px 0 rgba(255,255,255,0.95);
}

body {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  font-weight: 750;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 212, 71, 0.32), transparent 26%),
    radial-gradient(circle at 84% 10%, rgba(73, 229, 189, 0.25), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(255, 79, 145, 0.13), transparent 36%),
    linear-gradient(180deg, #fff9f2 0%, #fff4fb 46%, #effff9 100%);
}

h1, h2, h3, h4,
.logo-mark,
.hero h1,
.section-title,
.featured-card .name,
.menu-preview-card .mp-name,
.press-title,
.about-stat-num,
.rv-score,
.petes-card .pete-name,
.petes-text .fact-value,
.faq-item summary,
.footer-grid h4 {
  font-family: 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif;
  font-weight: 800;
}

.text-script,
.logo-mark .script,
.hero h1 .script,
.menu-hero h1 .script,
.review-quote blockquote {
  font-family: 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif;
  font-weight: 800;
}

.site-header {
  background: rgba(255, 249, 242, 0.78);
  border-bottom: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 16px 36px rgba(229, 34, 69, 0.11);
}
.logo-mark {
  color: var(--plum);
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  line-height: 1;
  text-shadow: 0 10px 22px rgba(255, 143, 31, 0.12);
}
.logo-mark .script {
  color: var(--candy-red);
  filter: drop-shadow(0 8px 14px rgba(229, 34, 69, 0.22));
}

.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(255,249,242,0.38) 0%, rgba(255,249,242,0.58) 46%, rgba(255,249,242,0.95) 100%),
    radial-gradient(circle at 50% 34%, rgba(255, 212, 71, 0.24), rgba(255, 143, 31, 0.16) 34%, rgba(255, 79, 145, 0.15) 68%);
}
.hero h1 {
  color: var(--candy-red);
  line-height: 0.88;
  text-shadow:
    0 5px 0 rgba(255, 212, 71, 0.55),
    0 18px 42px rgba(229, 34, 69, 0.28);
}
.hero h1 .script {
  color: var(--plum);
  text-shadow: 0 5px 0 rgba(255, 212, 71, 0.42), 0 16px 34px rgba(45, 23, 50, 0.16);
}
.hero-tagline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--plum);
  background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,241,247,0.54));
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: var(--v5-shadow);
  font-weight: 950;
}
.hero-tagline .since {
  color: var(--candy-red);
  background: linear-gradient(90deg, var(--candy-yellow), #fff1a7);
  border-radius: 999px;
  padding: 1px 8px;
}
.hero-sub {
  color: #4b294f;
  background: linear-gradient(145deg, rgba(255,255,255,0.76), rgba(255,244,251,0.58));
  box-shadow: var(--v5-shadow);
}

.rating-pill {
  min-height: 46px;
  padding: 10px 15px 11px;
  border-radius: 999px 999px 28px 999px;
  color: var(--plum);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.95), transparent 34%),
    linear-gradient(145deg, #fff 0%, var(--marshmallow-2) 58%, #fff7df 100%);
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 16px 36px rgba(255, 79, 145, 0.14), inset 0 2px 0 rgba(255,255,255,1), inset 0 -10px 22px rgba(255, 212, 71, 0.12);
  font-weight: 950;
}
.rating-pill .stars {
  color: var(--candy-orange);
}
.hero-trust span {
  color: var(--plum);
  background: linear-gradient(145deg, rgba(255,255,255,0.84), rgba(239,255,249,0.58));
  border: 1px solid rgba(255,255,255,0.92);
  font-weight: 900;
}
.hero-trust span:nth-child(3) {
  background: linear-gradient(145deg, rgba(255, 212, 71, 0.78), rgba(255,255,255,0.46));
}
.hero-trust svg {
  color: var(--candy-red);
}

.btn,
.sticky-bar a,
.nav a,
.section-eyebrow,
.about-pillar-title {
  font-family: 'Nunito Sans', system-ui, sans-serif;
}
.btn-primary,
.sticky-bar a.call {
  color: var(--ink);
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.9), transparent 36%),
    linear-gradient(145deg, var(--candy-yellow), var(--candy-orange));
  box-shadow: 0 18px 42px rgba(255, 143, 31, 0.26), inset 0 2px 0 rgba(255,255,255,0.7), inset 0 -14px 30px rgba(255, 79, 145, 0.12);
}
.btn-secondary,
.sticky-bar a.menu, .sticky-bar a.order {
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.62), transparent 36%),
    linear-gradient(145deg, var(--candy-red), var(--candy-pink));
  color: #fff;
  box-shadow: 0 18px 42px rgba(229, 34, 69, 0.26), inset 0 2px 0 rgba(255,255,255,0.34), inset 0 -14px 30px rgba(45,23,50,0.1);
}
.btn-outline,
.sticky-bar a.directions {
  color: var(--plum);
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.98), transparent 36%),
    linear-gradient(145deg, #fff, #fff1f7);
}

.section-eyebrow,
.about-pillar-title,
.press-source,
.footer-grid h4 {
  color: var(--candy-red);
}
.divider-yellow,
.divider-red {
  background: linear-gradient(90deg, var(--candy-yellow), var(--candy-orange), var(--candy-pink), var(--candy-mint));
}
.featured-card,
.menu-preview-card,
.about-pillar,
.press-item,
.rv-card,
.review-quote,
.info-card,
.faq-item,
.petes-card {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,0.88), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,244,251,0.5));
  box-shadow: var(--v5-shadow);
}
.menu-preview-card .mp-num {
  color: var(--ink);
  background: linear-gradient(145deg, var(--candy-yellow), var(--candy-orange));
}
.menu-preview-card::before {
  background: linear-gradient(180deg, var(--candy-yellow), var(--candy-orange), var(--candy-pink));
}
.menu-preview-card .mp-name,
h2.section-title {
  color: var(--plum);
}
.featured-card .price,
.about-stat-num,
.rv-score,
.petes-card .pete-name {
  color: var(--candy-red);
}
.sticky-bar {
  background: rgba(255, 249, 242, 0.78);
}

@media (max-width: 768px) {
  .logo-mark {
    font-size: 1.35rem;
  }
  .hero h1 {
    font-size: clamp(3.25rem, 17vw, 5rem);
  }
  .hero-tagline {
    width: min(100%, 350px);
    font-size: 1rem;
  }
  .rating-pill {
    font-size: 0.76rem;
  }
}
/* ============================================================
   V6 VARIATION — electric candy signage
   ============================================================ */
:root {
  --v6-ink: #251032;
  --v6-plum: #421852;
  --v6-raspberry: #f12669;
  --v6-red: #e7193f;
  --v6-orange: #ff8a12;
  --v6-lemon: #ffe84b;
  --v6-teal: #20d6b5;
  --v6-sky: #62cfff;
  --v6-cream: #fff8ea;
  --v6-card: rgba(255,255,255,0.74);
  --v6-shadow: 0 24px 70px rgba(241, 38, 105, 0.18), inset 0 1px 0 rgba(255,255,255,0.96);
}

body {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  font-weight: 650;
  color: var(--v6-ink);
  background:
    radial-gradient(circle at 9% 7%, rgba(255,232,75,0.42), transparent 28%),
    radial-gradient(circle at 86% 9%, rgba(32,214,181,0.28), transparent 28%),
    radial-gradient(circle at 46% -2%, rgba(241,38,105,0.18), transparent 36%),
    linear-gradient(180deg, #fff8ea 0%, #fff2f8 48%, #effffb 100%);
}

h1, h2, h3, h4,
.logo-mark,
.hero h1,
.section-title,
.featured-card .name,
.menu-preview-card .mp-name,
.press-title,
.about-stat-num,
.rv-score,
.petes-card .pete-name,
.petes-text .fact-value,
.faq-item summary,
.footer-grid h4 {
  font-family: 'Paytone One', 'Sora', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.text-script,
.logo-mark .script,
.hero h1 .script,
.menu-hero h1 .script,
.review-quote blockquote {
  font-family: 'Paytone One', 'Sora', system-ui, sans-serif;
  font-weight: 400;
}

.site-header {
  background: rgba(255,248,234,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 16px 38px rgba(241,38,105,0.12);
}
.logo-mark {
  color: var(--v6-plum);
  font-size: clamp(1.38rem, 3vw, 1.85rem);
  text-shadow: 0 3px 0 rgba(255,232,75,0.72), 0 13px 24px rgba(241,38,105,0.14);
}
.logo-mark .script {
  color: var(--v6-red);
}

.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(255,248,234,0.34) 0%, rgba(255,248,234,0.6) 46%, rgba(255,248,234,0.96) 100%),
    radial-gradient(circle at 50% 35%, rgba(255,232,75,0.28), rgba(255,138,18,0.18) 34%, rgba(241,38,105,0.16) 70%);
}
.hero h1 {
  color: var(--v6-red);
  line-height: 0.9;
  text-shadow: 0 6px 0 var(--v6-lemon), 0 22px 44px rgba(241,38,105,0.28);
}
.hero h1 .script {
  color: var(--v6-plum);
}
.hero-tagline {
  color: var(--v6-plum);
  background:
    radial-gradient(circle at 25% 12%, rgba(255,255,255,0.95), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,242,248,0.56));
  border: 2px solid rgba(255,255,255,0.92);
  box-shadow: var(--v6-shadow);
}
.hero-tagline .since {
  color: var(--v6-ink);
  background: linear-gradient(90deg, var(--v6-lemon), #fff3a2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.hero-sub {
  color: #4a2854;
  background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,242,248,0.54));
  box-shadow: var(--v6-shadow);
}

.rating-pill {
  color: var(--v6-plum);
  background:
    radial-gradient(circle at 25% 12%, rgba(255,255,255,0.98), transparent 36%),
    linear-gradient(145deg, #fff 0%, #fff2f8 54%, #fff6cf 100%);
  border: 2px solid rgba(255,255,255,0.96);
  box-shadow: 0 16px 38px rgba(241,38,105,0.14), inset 0 2px 0 rgba(255,255,255,1), inset 0 -12px 24px rgba(255,232,75,0.14);
}
.rating-pill .stars,
.review-quote .stars,
.rv-stars {
  color: var(--v6-orange);
}

.hero-trust span {
  color: var(--v6-plum);
  background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(239,255,251,0.58));
}
.hero-trust svg {
  color: var(--v6-red);
}
.hero-trust span:nth-child(3) {
  background: linear-gradient(145deg, rgba(255,232,75,0.78), rgba(255,255,255,0.48));
}

.btn,
.sticky-bar a,
.nav a,
.section-eyebrow,
.about-pillar-title {
  font-family: 'Sora', system-ui, sans-serif;
}
.btn-primary,
.sticky-bar a.call {
  color: var(--v6-ink);
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.9), transparent 36%),
    linear-gradient(145deg, var(--v6-lemon), var(--v6-orange));
  box-shadow: 0 18px 44px rgba(255,138,18,0.26), inset 0 2px 0 rgba(255,255,255,0.72), inset 0 -14px 30px rgba(241,38,105,0.1);
}
.btn-secondary,
.sticky-bar a.menu, .sticky-bar a.order {
  color: #fff;
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.58), transparent 36%),
    linear-gradient(145deg, var(--v6-red), var(--v6-raspberry));
  box-shadow: 0 18px 44px rgba(241,38,105,0.28), inset 0 2px 0 rgba(255,255,255,0.34), inset 0 -14px 30px rgba(37,16,50,0.1);
}
.btn-outline,
.sticky-bar a.directions {
  color: var(--v6-plum);
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,1), transparent 36%),
    linear-gradient(145deg, #fff, #fff2f8);
}

.section-eyebrow,
.about-pillar-title,
.press-source,
.footer-grid h4 {
  color: var(--v6-red);
}
.divider-yellow,
.divider-red {
  background: linear-gradient(90deg, var(--v6-lemon), var(--v6-orange), var(--v6-raspberry), var(--v6-teal));
}
.featured-card,
.menu-preview-card,
.about-pillar,
.press-item,
.rv-card,
.review-quote,
.info-card,
.faq-item,
.petes-card {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,0.88), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,242,248,0.52));
  box-shadow: var(--v6-shadow);
}
.menu-preview-card .mp-num {
  color: var(--v6-ink);
  background: linear-gradient(145deg, var(--v6-lemon), var(--v6-orange));
}
.menu-preview-card::before {
  background: linear-gradient(180deg, var(--v6-lemon), var(--v6-orange), var(--v6-raspberry));
}
.menu-preview-card .mp-name,
h2.section-title {
  color: var(--v6-plum);
}
.featured-card .price,
.about-stat-num,
.rv-score,
.petes-card .pete-name {
  color: var(--v6-red);
}
.sticky-bar {
  background: rgba(255,248,234,0.78);
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: clamp(3.05rem, 16vw, 4.75rem);
  }
  .hero-tagline {
    font-size: 0.98rem;
  }
}

/* ============================================================
   HERO CONVERSION POLISH — candy-object proof chips
   ============================================================ */
.btn,
.sticky-bar a {
  font-size: clamp(0.9rem, 1.2vw, 1.02rem);
  line-height: 1.08;
}
.sticky-bar a {
  font-size: clamp(0.82rem, 2.55vw, 0.94rem);
  letter-spacing: 0;
}

.hero-ratings,
.hero-trust {
  gap: 10px;
}
.rating-pill,
.hero-trust span {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid rgba(255,255,255,0.96);
  outline: 1px solid rgba(255, 143, 31, 0.28);
  outline-offset: -4px;
  background:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,0.98), transparent 34%),
    linear-gradient(145deg, #fff 0%, #fff4fb 54%, #fff7d8 100%);
  box-shadow:
    0 15px 34px rgba(241, 38, 105, 0.14),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -12px 24px rgba(255, 232, 75, 0.14);
}
.rating-pill::after,
.hero-trust span::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 7px;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.08));
  z-index: -1;
}
.rating-pill {
  min-width: 166px;
  justify-content: center;
  border-radius: 999px 999px 30px 999px;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  padding: 11px 15px 12px;
}
.rating-pill:nth-child(2),
.rating-pill:nth-child(4) {
  border-radius: 999px 999px 999px 30px;
}
.hero-trust span {
  min-height: 52px;
  min-width: 168px;
  justify-content: center;
  padding: 10px 13px;
  border-radius: 28px 999px 999px 999px;
  font-size: clamp(0.74rem, 1vw, 0.84rem);
  text-align: center;
}
.hero-trust span:nth-child(2),
.hero-trust span:nth-child(4) {
  border-radius: 999px 28px 999px 999px;
}
.hero-trust span:nth-child(2) {
  background:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,0.98), transparent 34%),
    linear-gradient(145deg, #fff 0%, #effffb 58%, #fff7d8 100%);
}
.hero-trust span:nth-child(3) {
  background:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,0.88), transparent 34%),
    linear-gradient(145deg, #ffe84b 0%, #ffb13b 100%);
}
.hero-trust span:nth-child(4) {
  background:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,0.98), transparent 34%),
    linear-gradient(145deg, #fff 0%, #fff4fb 48%, #fff1d4 100%);
}
.hero-trust svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .hero-ratings,
  .hero-trust {
    width: min(100%, 360px);
    grid-template-columns: 1fr 1fr;
  }
  .rating-pill,
  .hero-trust span {
    min-width: 0;
    width: 100%;
  }
  .hero-trust span {
    min-height: 56px;
    font-size: clamp(0.72rem, 3vw, 0.82rem);
  }
  .rating-pill {
    min-height: 56px;
    font-size: clamp(0.72rem, 3vw, 0.82rem);
  }
  .sticky-bar a {
    min-height: 58px;
    font-size: clamp(0.82rem, 3.3vw, 0.92rem);
  }
}
/* ============================================================
   V8 PASTEL CANDY THEME — user palette
   ============================================================ */
:root {
  --card: #fdedc9;
  --ring: #e670ab;
  --input: #e4e4e4;
  /* --muted DELIBERATELY NOT DECLARED HERE. Do not re-add it.
     ------------------------------------------------------------------
     This block is a shadcn/ui token set. In shadcn, --muted is a muted
     BACKGROUND surface and --muted-foreground (below) is the muted TEXT colour.
     Williams' own stylesheet had used --muted as its grey TEXT colour since
     long before this block existed, in 49 places.
     Pasting the set in therefore silently retyped --muted from "grey text" to
     "pale blue surface" (#b2e1eb) for the whole document, and every one of those
     49 text rules started rendering pale blue on cream and near-white:
         #b2e1eb on #fff7fb = 1.34:1     #b2e1eb on #fdedc9 = 1.22:1
     against a WCAG AA floor of 4.5:1 - i.e. effectively invisible.
     The damage was previously chased selector-by-selector with hardcoded
     #765f6f patches (.section-lede L1096, .footer-grid a L1181, menu item
     descriptions L5088), but the patches were incomplete AND were themselves
     re-broken further down where later rules set colour back to var(--muted).
     Removing the override here restores --muted to #765d6f from the light
     palette, which measures 5.09-5.89:1 on the same surfaces, and fixes all of
     them at once. If you want shadcn's muted surface colour, use a NEW name. */
  --accent: #fbe2a7;
  --border: #d04f99;
  --radius: 0.4rem;
  --chart-1: #e670ab;
  --chart-2: #84d2e2;
  --chart-3: #fbe2a7;
  --chart-4: #f3a0ca;
  --chart-5: #d7488e;
  --popover: #ffffff;
  --primary: #d04f99;
  --sidebar: #f8d8ea;
  --font-sans: 'Poppins', sans-serif;
  --secondary: #8acfd1;
  --background: #f6e6ee;
  --font-serif: 'Lora', serif;
  --foreground: #5b4c58;
  --shadow-color: rgba(208, 79, 153, 0.5);
  --card-foreground: #4e3c4b;
  --muted-foreground: #735f70;
  --accent-foreground: #333333;
  --primary-foreground: #ffffff;
  --secondary-foreground: #333333;
  --candy-shadow: 3px 3px 0 rgba(208, 79, 153, 0.5);
  --soft-shadow: 0 18px 42px rgba(208, 79, 153, 0.18), inset 0 1px 0 rgba(255,255,255,0.92);
}

body {
  font-family: var(--font-sans);
  font-weight: 650;
  color: var(--foreground);
  background:
    radial-gradient(circle at 12% 7%, rgba(251,226,167,0.72), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(178,225,235,0.58), transparent 30%),
    radial-gradient(circle at 50% 0%, rgba(243,160,202,0.34), transparent 36%),
    linear-gradient(180deg, #f6e6ee 0%, #fff6dc 48%, #ecfbff 100%);
}

h1, h2, h3, h4,
.logo-mark,
.hero h1,
.section-title,
.featured-card .name,
.menu-preview-card .mp-name,
.press-title,
.about-stat-num,
.rv-score,
.petes-card .pete-name,
.petes-text .fact-value,
.faq-item summary,
.footer-grid h4 {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: 0;
}
.review-quote blockquote {
  font-family: var(--font-serif);
  font-weight: 700;
}

.site-header {
  background: rgba(246, 230, 238, 0.82);
  border-bottom: 1px solid rgba(255,255,255,0.88);
  box-shadow: 0 14px 34px rgba(208,79,153,0.16);
}
.logo-mark {
  color: #3b2340;
  font-size: clamp(1.42rem, 3vw, 1.9rem);
  text-shadow: 3px 3px 0 rgba(251,226,167,0.95);
}
.logo-mark .script {
  color: #d7488e;
  filter: none;
}

.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(246,230,238,0.34) 0%, rgba(246,230,238,0.58) 46%, rgba(246,230,238,0.96) 100%),
    radial-gradient(circle at 50% 35%, rgba(251,226,167,0.32), rgba(230,112,171,0.16) 38%, rgba(132,210,226,0.16) 72%);
}
.hero h1 {
  color: #d7488e;
  line-height: 0.9;
  text-shadow: 5px 5px 0 rgba(251,226,167,0.95), 0 18px 38px rgba(208,79,153,0.24);
}
.hero h1 .script {
  color: #3b2340;
}
.hero-tagline {
  color: #4a314b;
  background:
    radial-gradient(circle at 24% 12%, rgba(255,255,255,0.96), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(248,216,234,0.62));
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: var(--soft-shadow);
}
.hero-tagline .since {
  color: #333333;
  background: linear-gradient(90deg, #fbe2a7, #fff4c5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.hero-sub {
  color: #4f3f4d;
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,0.9), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.76), rgba(248,216,234,0.54));
  border-color: rgba(255,255,255,0.92);
  box-shadow: var(--soft-shadow);
}

.rating-pill,
.hero-trust span {
  color: #4a314b;
  border: 2px solid rgba(255,255,255,0.98);
  outline: 1px solid rgba(208,79,153,0.32);
  outline-offset: -4px;
  background:
    radial-gradient(circle at 24% 12%, rgba(255,255,255,1), transparent 35%),
    linear-gradient(145deg, #ffffff 0%, #f8d8ea 54%, #fdedc9 100%);
  box-shadow:
    0 14px 34px rgba(208,79,153,0.16),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -12px 24px rgba(251,226,167,0.2);
  font-weight: 900;
}
.rating-pill .stars,
.review-quote .stars,
.rv-stars {
  color: #d7488e;
}
.hero-trust span:nth-child(2),
.hero-trust span:nth-child(4) {
  background:
    radial-gradient(circle at 24% 12%, rgba(255,255,255,1), transparent 35%),
    linear-gradient(145deg, #ffffff 0%, #ecfbff 54%, #f8d8ea 100%);
}
.hero-trust span:nth-child(3) {
  background:
    radial-gradient(circle at 24% 12%, rgba(255,255,255,0.92), transparent 35%),
    linear-gradient(145deg, #fbe2a7 0%, #e670ab 100%);
  color: #332532;
}
.hero-trust svg {
  color: #d04f99;
}

.btn,
.sticky-bar a,
.nav a,
.section-eyebrow,
.about-pillar-title {
  font-family: var(--font-sans);
}
.btn-primary,
.sticky-bar a.call {
  color: #333333;
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.92), transparent 36%),
    linear-gradient(145deg, #fbe2a7, #e670ab);
  box-shadow: 3px 3px 0 rgba(208,79,153,0.5), inset 0 2px 0 rgba(255,255,255,0.72);
}
.btn-secondary,
.sticky-bar a.menu, .sticky-bar a.order {
  color: #fff;
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.58), transparent 36%),
    linear-gradient(145deg, #d04f99, #d7488e);
  box-shadow: 3px 3px 0 rgba(91,91,91,0.22), inset 0 2px 0 rgba(255,255,255,0.34);
}
.btn-outline,
.sticky-bar a.directions {
  color: #4a314b;
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,1), transparent 36%),
    linear-gradient(145deg, #ffffff, #f8d8ea);
  box-shadow: 3px 3px 0 rgba(208,79,153,0.26), inset 0 2px 0 rgba(255,255,255,1);
}

.section-eyebrow,
.about-pillar-title,
.press-source,
.footer-grid h4 {
  color: #d04f99;
}
.divider-yellow,
.divider-red {
  background: linear-gradient(90deg, #e670ab, #84d2e2, #fbe2a7, #f3a0ca);
}
.featured-card,
.menu-preview-card,
.about-pillar,
.press-item,
.rv-card,
.review-quote,
.info-card,
.faq-item,
.petes-card {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,0.9), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(253,237,201,0.52));
  border-color: rgba(255,255,255,0.9);
  box-shadow: var(--soft-shadow);
}
.menu-preview-card .mp-num {
  color: #333333;
  background: linear-gradient(145deg, #fbe2a7, #e670ab);
  box-shadow: 3px 3px 0 rgba(208,79,153,0.45);
}
.menu-preview-card::before {
  background: linear-gradient(180deg, #e670ab, #84d2e2, #fbe2a7);
}
.menu-preview-card .mp-name,
h2.section-title {
  color: #3b2340;
}
.featured-card .price,
.about-stat-num,
.rv-score,
.petes-card .pete-name {
  color: #d04f99;
}
.sticky-bar {
  background: rgba(246,230,238,0.86);
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: clamp(3rem, 16vw, 4.7rem);
  }
  .hero-tagline {
    font-size: 0.98rem;
  }
}

/* V9 brand color correction: keep Poppins, fix Williams Candy colors */
:root {
  --brand-williams: #e33b62;
  --brand-candy: #197f8f;
  --brand-cream-pop: #fff0b8;
  --brand-ink-shadow: rgba(57, 42, 58, 0.18);
}
.logo-mark {
  color: var(--brand-candy);
  text-shadow:
    2px 2px 0 var(--brand-cream-pop),
    0 10px 22px rgba(25, 127, 143, 0.12);
}
.logo-mark .script {
  color: var(--brand-williams);
  text-shadow:
    2px 2px 0 var(--brand-cream-pop),
    0 10px 22px rgba(227, 59, 98, 0.16);
}
.hero h1 {
  color: var(--brand-candy);
  text-shadow:
    5px 5px 0 var(--brand-cream-pop),
    0 18px 42px rgba(25, 127, 143, 0.18);
}
.hero h1 .script {
  color: var(--brand-williams);
  text-shadow:
    5px 5px 0 var(--brand-cream-pop),
    0 18px 42px rgba(227, 59, 98, 0.22);
}
.hero-tagline {
  color: #3d3341;
}
.hero-tagline .since {
  color: #3d3341;
}

/* Generated 3D logo placement */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.brand-logo-img {
  width: clamp(96px, 12vw, 138px);
  max-height: 42px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(208, 79, 153, 0.2));
}
.hero-logo-title {
  margin: 0;
  line-height: 1;
}
.hero-logo-img {
  width: min(84vw, 660px);
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 20px 34px rgba(91, 91, 91, 0.18));
}
.footer-logo-img {
  width: min(240px, 68vw);
  height: auto;
  margin: 0 0 14px;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(208, 79, 153, 0.16));
}

.hero {
  min-height: auto;
  padding: 76px 24px 60px;
}

.hero-logo-img {
  width: min(68vw, 600px);
}

@media (max-width: 768px) {
  .brand-logo-img {
    width: clamp(94px, 28vw, 126px);
    max-height: 40px;
  }
  .hero-logo-img {
    width: min(90vw, 500px);
  }
}

.rating-pill-copy {
  display: none;
}

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

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: 76px;
    padding-bottom: 22px;
  }

  .hero-content {
    gap: 10px;
  }

  .hero-logo-img {
    width: min(86vw, 390px);
  }

  .hero-sub {
    max-width: 350px;
    padding: 11px 14px;
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .hero-ratings {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: min(100%, 366px);
    overflow: hidden;
    gap: 10px;
    margin-top: 0;
    padding: 2px 18px 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }

  .hero-ratings-track {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    width: max-content;
    padding-right: 10px;
    animation: ratingsMarquee 23s linear infinite;
    will-change: transform;
  }

  .hero-ratings .rating-pill {
    display: inline-flex;
    flex: 0 0 152px;
    justify-content: center;
    width: 152px !important;
    max-width: 152px;
    min-width: 152px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .hero-ratings:hover .hero-ratings-track {
    animation-play-state: paused;
  }

  .rating-pill-copy {
    display: inline-flex;
  }

  .hero-trust {
    width: min(100%, 350px);
    gap: 8px;
  }

  .hero-trust span {
    min-height: 44px;
    padding: 8px 9px;
  }

  .hero-cta {
    display: none;
  }
}

/* Visual audit fix: small screens need copy hierarchy, not stacked bubbles. */
@media (max-width: 900px) {
  .hero {
    padding-top: 70px;
    padding-bottom: 34px;
  }

  .hero-content {
    gap: 8px;
  }

  .hero-logo-img {
    width: min(78vw, 350px);
    transform: translateX(4px);
  }

  .hero-tagline {
    max-width: 310px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #fffdf8;
    font-size: clamp(0.95rem, 2.8vw, 1.06rem);
    line-height: 1.2;
    text-shadow:
      0 4px 16px rgba(59,35,64,0.82),
      0 1px 0 rgba(59,35,64,0.72),
      0 0 14px rgba(255,255,255,0.18);
  }

  .hero-tagline .since {
    display: inline-flex;
    margin-left: 5px;
    padding: 5px 13px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d04f99 0%, #e670ab 58%, #f3a0ca 100%);
    color: #fff6dc;
    font-size: 0.92em;
    line-height: 1;
    border: 2px solid rgba(255,255,255,0.92);
    box-shadow:
      0 10px 22px rgba(59,35,64,0.2),
      inset 0 1px 0 rgba(255,255,255,0.62);
    text-shadow: 0 1px 0 rgba(59,35,64,0.38);
  }

  .hero-sub {
    max-width: 330px;
    padding: 0 6px;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #4a314b;
    font-size: clamp(0.88rem, 2.55vw, 0.96rem);
    line-height: 1.36;
  }

  .hero-ratings {
    position: relative;
    display: block;
    width: min(100%, 278px);
    height: 42px;
    margin-top: 2px;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-ratings-track {
    position: relative;
    width: 100%;
    height: 42px;
    padding: 0;
    gap: 0;
    animation: none;
  }

  .hero-ratings .rating-pill {
    position: absolute;
    left: 50%;
    top: 0;
    display: inline-flex;
    transform: translateX(-50%) translateY(4px) scale(0.97);
    opacity: 0;
    width: auto !important;
    max-width: none;
    min-width: max-content;
    min-height: 40px;
    padding: 8px 16px 9px;
    gap: 6px;
    font-size: 0.77rem;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transition:
      opacity 420ms ease,
      transform 420ms ease;
  }

  .hero-ratings .rating-pill.is-active {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  .hero-ratings .rating-pill-copy {
    display: none !important;
  }

  .hero-ratings .rating-pill .stars {
    flex: 0 0 auto;
  }

  .hero-trust {
    grid-template-columns: 1fr 1fr;
    width: min(100%, 322px);
    margin-top: 8px;
    margin-bottom: 16px;
    gap: 10px;
  }

  .hero-trust span:nth-child(1),
  .hero-trust span:nth-child(2) {
    display: none;
  }

  .hero-trust span {
    min-width: 0;
    min-height: 46px;
    padding: 8px 10px;
    font-size: 0.76rem;
    line-height: 1.12;
  }

  .scroll-cue {
    display: flex;
    bottom: 7px;
    z-index: 2;
    color: #3b2340;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.78);
  }

  .scroll-cue .line {
    width: 9px;
    height: 9px;
    border-right: 2px solid #d04f99;
    border-bottom: 2px solid #d04f99;
    background: transparent;
    transform: rotate(45deg);
    animation: bounceCue 1.35s ease-in-out infinite;
  }
}

/* Contrast audit: keep the candy palette, but stop pastel text from washing out. */
.about-stat-label,
.menu-preview-card .mp-count,
.menu-cat-note,
.rv-platform,
.rv-count,
.info-card .label,
.hours-grid span:nth-child(odd),
.nearby-row span,
.delivery-row .label,
.footer-grid p,
.footer-bottom {
  color: #2f8491;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

.section-lede,
.about-text p,
.petes-text p,
.faq-item .answer,
.press-note,
.review-quote cite,
.featured-card .desc,
.menu-item .desc {
  color: #5d4659;
}

.section-eyebrow,
.about-pillar-title,
.press-kicker,
.press-source,
.footer-grid h4 {
  color: #c63f88;
  text-shadow: 0 1px 0 rgba(255,255,255,0.62);
}

/* Image focal audit: keep the hero immersive, not pasted into empty space. */
@media (max-width: 900px) {
  .hero-bg {
    background: #f6e6ee;
  }

  .hero-bg img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.3);
    transform-origin: center top;
    background: none;
  }

  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(246,230,238,0.18) 0%, rgba(246,230,238,0.26) 50%, rgba(246,230,238,0.34) 100%),
      radial-gradient(circle at 50% 44%, rgba(251,226,167,0.12), rgba(230,112,171,0.08) 42%, rgba(132,210,226,0.04) 76%);
  }

  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 86px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(246,230,238,0) 0%, rgba(246,230,238,0.34) 46%, rgba(253,237,201,0.92) 100%);
  }
}

@keyframes bounceCue {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.55; }
  50% { transform: translateY(5px) rotate(45deg); opacity: 1; }
}

/* Hero text contrast audit: keep the palette, make copy readable over red apples. */
.hero-tagline {
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  max-width: min(760px, 92vw);
  color: #fffdf8;
  font-size: clamp(1.02rem, 2.1vw, 1.55rem);
  line-height: 1.16;
  text-shadow:
    0 3px 14px rgba(59,35,64,0.78),
    0 1px 0 rgba(59,35,64,0.64),
    0 0 18px rgba(255,255,255,0.22);
}

.hero-tagline .since {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 5px 13px 6px;
  color: #fff6dc;
  font-size: 0.78em;
  line-height: 1;
  background: linear-gradient(135deg, #d04f99 0%, #e670ab 58%, #f3a0ca 100%);
  border: 2px solid rgba(255,255,255,0.92);
  border-radius: 999px;
  box-shadow:
    0 10px 22px rgba(59,35,64,0.2),
    inset 0 1px 0 rgba(255,255,255,0.62);
  text-shadow: 0 1px 0 rgba(59,35,64,0.38);
}

.hero-sub {
  max-width: 660px;
  padding: 11px 17px 12px;
  color: #fff7fb;
  background: rgba(59,35,64,0.34);
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(59,35,64,0.16);
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  line-height: 1.42;
  text-shadow: 0 1px 0 rgba(59,35,64,0.46);
  backdrop-filter: blur(6px) saturate(1.1);
}

@media (max-width: 900px) {
  .hero-tagline {
    max-width: 330px;
    color: #fff7fb;
    font-size: clamp(0.9rem, 2.55vw, 1rem);
    line-height: 1.14;
  }

  .hero-tagline .since {
    padding: 4px 11px 5px;
    font-size: 0.84em;
    line-height: 1;
  }

  .hero-sub {
    max-width: 328px;
    padding: 8px 13px 9px;
    color: #fff7fb;
    font-size: clamp(0.82rem, 2.38vw, 0.9rem);
    line-height: 1.3;
    border-radius: 14px;
  }
}

/* Final hero polish: remove the extra copy blob, soften the logo transition,
   and keep the apples background immersive instead of pasted-in. */
.hero-logo-title {
  position: relative;
  width: fit-content;
  margin: -2px auto -12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-logo-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 82%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(230,112,171,0.44) 0%, rgba(230,112,171,0.18) 36%, rgba(230,112,171,0) 74%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.hero-logo-img {
  width: min(74vw, 540px);
  position: relative;
  z-index: 1;
  display: block;
}

.hero-tagline {
  margin-top: -16px;
  margin-bottom: 16px;
  max-width: min(760px, 92vw);
}

.hero-sub {
  display: none !important;
}

.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(255,247,251,0.08) 0%, rgba(255,247,251,0.18) 24%, rgba(246,230,238,0.50) 70%, rgba(246,230,238,0.92) 100%),
    radial-gradient(circle at 50% 38%, rgba(230,112,171,0.18), rgba(251,226,167,0.08) 40%, rgba(255,255,255,0) 74%);
}

@media (max-width: 900px) {
  .hero-content {
    gap: 2px;
  }

  .hero-logo-title {
    margin-top: 0;
  }

  .hero-logo-img {
    width: min(82vw, 372px);
  }

  .hero-tagline {
    margin-top: -12px;
    margin-bottom: 16px;
  }

  .hero-ratings {
    margin-top: 14px;
  }
}

@media (min-width: 901px) {
  .hero-bg img {
    object-position: center 32%;
  }
}

/* Final contrast sweep: keep cyan in-palette, but readable on cream/white. */
:root {
  --readable-teal: #186f7c;
  --readable-teal-deep: #105764;
}

.petes-card .pete-tag,
.petes-card .pete-meta,
.petes-card a,
.petes-text .fact-label,
.about-stat-label,
.menu-preview-card .mp-count,
.menu-cat-note,
.rv-platform,
.rv-count,
.info-card .label,
.hours-grid span:nth-child(odd),
.nearby-row span,
.delivery-row .label,
.footer-grid p,
.footer-bottom {
  color: var(--readable-teal) !important;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,0.78);
}

.petes-card .pete-tag,
.petes-text .fact-label,
.about-stat-label,
.menu-cat-note,
.rv-platform,
.info-card .label {
  letter-spacing: 0.11em;
}

.press-more {
  max-width: 980px;
  margin: 14px auto 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(208,79,153,0.22);
  box-shadow: 0 14px 34px rgba(208,79,153,0.1);
  overflow: hidden;
}

.press-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 20px;
  color: #3b2340;
  font-weight: 950;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.press-more > summary::-webkit-details-marker {
  display: none;
}

.press-more > summary::after {
  content: "Show";
  color: #fff6dc;
  background: linear-gradient(135deg, #d04f99, #e670ab);
  border: 2px solid rgba(255,255,255,0.82);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.78rem;
  flex: 0 0 auto;
}

.press-more[open] > summary::after {
  content: "Hide";
}

.press-more-list {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

/* V26 visual QA: mobile crop, menu-card clipping, contrast, and over-polished copy cleanup. */
.featured-card img[src*="product_softserve_sprinkles_focus"],
.gallery-grid img[src*="product_softserve_sprinkles_focus"] {
  object-fit: contain;
  object-position: center 38%;
  padding: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.88), transparent 38%),
    linear-gradient(145deg, rgba(253,237,201,0.92), rgba(248,216,234,0.82));
}

.menu-preview-card {
  min-height: 112px;
  align-items: center;
  overflow: visible;
  isolation: isolate;
}

.menu-preview-card::before {
  z-index: -1;
}

.menu-preview-card .mp-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  font-size: 1.04rem;
  line-height: 1;
}

.menu-preview-card .mp-name {
  display: block;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
  font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  line-height: 1.13;
}

.menu-preview-card .mp-count {
  font-size: 0.82rem;
  line-height: 1.25;
}

.about-stat-label,
.menu-preview-card .mp-count,
.menu-cat-note,
.rv-platform,
.rv-count,
.info-card .label,
.hours-grid span:nth-child(odd),
.nearby-row span,
.delivery-row .label,
.petes-card .pete-tag,
.petes-card .pete-meta,
.petes-card a,
.petes-text .fact-label,
.footer-grid p,
.footer-bottom {
  color: var(--readable-teal) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

.footer-grid a,
.petes-card a,
.petes-card [style*="var(--muted)"],
.visit-card [style*="var(--muted)"],
.info-card [style*="var(--muted)"] {
  color: var(--readable-teal-deep) !important;
  font-weight: 900;
  text-decoration-color: rgba(208,79,153,0.52) !important;
  text-underline-offset: 3px;
}

.petes-card .pete-tag,
.petes-card .pete-meta,
.petes-text .fact-label,
.footer-grid p,
.footer-bottom,
.about-stat-label,
.menu-preview-card .mp-count,
.menu-cat-note,
.rv-platform,
.rv-count,
.info-card .label,
.hours-grid span:nth-child(odd),
.nearby-row span,
.delivery-row .label {
  color: var(--readable-teal) !important;
}

/* V28 polish: warmer Pete's accents, drawer candy CTA, catering form, and tighter media crops. */
.mobile-drawer {
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.mobile-drawer .drawer-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 4px;
  padding: 12px 16px;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  color: #2f1538 !important;
  font-size: clamp(0.95rem, 4.1vw, 1.08rem);
  line-height: 1.05;
  text-align: center;
  background:
    radial-gradient(circle at 24% 10%, rgba(255,255,255,0.96), transparent 36%),
    linear-gradient(145deg, #ffe85a 0%, #ff9a25 54%, #f06ba7 100%);
  box-shadow:
    0 18px 38px rgba(208,79,153,0.22),
    inset 0 2px 0 rgba(255,255,255,0.82),
    inset 0 -14px 28px rgba(208,79,153,0.12);
}

.mobile-drawer .drawer-call::after {
  display: none;
}

.mobile-drawer .drawer-call .cta-nowrap {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .mobile-drawer {
    width: min(82vw, 310px);
    height: calc(100svh - var(--header-h));
    overflow-y: auto;
    gap: 10px !important;
    padding: 18px 18px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-drawer a {
    font-size: clamp(1.02rem, 4.4vw, 1.28rem) !important;
    padding: 9px 0 !important;
    line-height: 1.08;
  }

  .mobile-drawer .drawer-call {
    min-height: 50px;
    margin-top: 6px;
    padding: 11px 14px !important;
    font-size: clamp(0.9rem, 3.9vw, 1.02rem) !important;
  }
}

.about-stat-num {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
}

.petes-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.94), transparent 35%),
    linear-gradient(145deg, rgba(255,246,224,0.94), rgba(255,232,243,0.72) 56%, rgba(253,237,201,0.9));
  border-color: rgba(208,79,153,0.22);
}

.petes-card .pete-tag,
.petes-card .pete-meta,
.petes-card [style*="var(--muted)"],
.petes-card a,
.petes-text .fact-label {
  color: #6d315f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.86);
}

.petes-card .pete-name,
.petes-text .fact-value {
  color: #d04f99 !important;
}

.petes-card a {
  text-decoration-color: rgba(208,79,153,0.62) !important;
}

.petes-card span[style*="display:inline-block"] {
  color: #3b2340 !important;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.95), transparent 36%),
    linear-gradient(145deg, #fff7fb, #fbe2a7 120%) !important;
  border-color: rgba(208,79,153,0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}

.featured-card img[src*="product_softserve_sprinkles_focus"],
.gallery-grid img[src*="product_softserve_sprinkles_focus"] {
  object-fit: cover !important;
  object-position: center 28% !important;
  padding: 0 !important;
  background: #fff7fb !important;
}

.gallery-grid .tile img[src*="product_softserve_sprinkles_focus"] {
  transform: scale(1.12);
}

.gallery-grid .tile:hover img[src*="product_softserve_sprinkles_focus"] {
  transform: scale(1.18);
}

.catering-section {
  padding: 56px 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(251,226,167,0.66), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(243,160,202,0.42), transparent 32%),
    linear-gradient(180deg, #fff7fb 0%, #fff6e0 100%);
}

.catering-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: start;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
  border: 2px solid rgba(255,255,255,0.94);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.92), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,232,243,0.58));
  box-shadow: 0 24px 58px rgba(208,79,153,0.14), inset 0 1px 0 rgba(255,255,255,0.95);
}

.catering-copy h2 {
  color: #3b2340;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1;
  margin-bottom: 12px;
}

.catering-copy p {
  color: #5d4659;
  font-weight: 800;
  line-height: 1.58;
}

.catering-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.catering-list span {
  padding: 7px 12px;
  border-radius: 999px;
  color: #3b2340;
  font-weight: 950;
  font-size: 0.8rem;
  background:
    radial-gradient(circle at 24% 10%, rgba(255,255,255,0.96), transparent 36%),
    linear-gradient(145deg, #fff, #fbe2a7);
  border: 1px solid rgba(208,79,153,0.28);
}

.catering-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.catering-form label {
  display: grid;
  gap: 6px;
  color: #3b2340;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catering-form label.full {
  grid-column: 1 / -1;
}

.catering-form input,
.catering-form select,
.catering-form textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(208,79,153,0.26);
  border-radius: 16px;
  padding: 12px 14px;
  color: #3b2340;
  font-weight: 800;
  background: rgba(255,255,255,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.catering-form textarea {
  min-height: 96px;
  resize: vertical;
}

.catering-form .btn {
  grid-column: 1 / -1;
  width: 100%;
}

.catering-form-note {
  grid-column: 1 / -1;
  color: #6d315f;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .catering-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .about-stat-num {
    font-size: 1.85rem;
  }

  .catering-section {
    padding: 44px 0;
  }

  .catering-form {
    grid-template-columns: 1fr;
  }
}

/* V30 scroll + section polish: less glare, quicker decision flow, Pete's gets its own Coney glass mood. */
@media (max-width: 768px) {
  section {
    padding: 38px 0;
  }

  .section-head {
    margin-bottom: 24px;
  }

  h2.section-title {
    font-size: clamp(2rem, 10.5vw, 3.05rem);
  }

  .section-lede {
    font-size: 0.94rem;
    line-height: 1.48;
  }
}

.btn::after,
.sticky-bar a::after {
  left: 20%;
  right: 20%;
  top: 9px;
  height: 24%;
  opacity: 0.48;
  background: linear-gradient(180deg, rgba(255,246,224,0.6), rgba(255,255,255,0.04));
}

.catering-form .btn::after,
.mobile-drawer .drawer-call::before {
  opacity: 0.34;
  background: linear-gradient(180deg, rgba(255,246,224,0.5), rgba(255,255,255,0.02));
}

.mobile-drawer .drawer-call {
  background:
    radial-gradient(circle at 24% 10%, rgba(255,246,224,0.58), transparent 34%),
    linear-gradient(145deg, #ffd44d 0%, #ff9828 52%, #ed6f9d 100%);
}

.catering-section {
  padding: 42px 0;
}

.catering-card {
  gap: 22px;
  padding: clamp(18px, 3vw, 28px);
}

.catering-copy h2 {
  font-size: clamp(1.85rem, 3.8vw, 3rem);
  margin-bottom: 8px;
}

.catering-copy p {
  line-height: 1.48;
}

.catering-list {
  margin-top: 12px;
}

.catering-form {
  gap: 10px;
}

.catering-form input,
.catering-form select {
  min-height: 44px;
}

.catering-form textarea {
  min-height: 82px;
}

.catering-form .btn {
  min-height: 54px;
  background:
    radial-gradient(circle at 25% 8%, rgba(255,246,224,0.48), transparent 34%),
    linear-gradient(145deg, #ffd66b 0%, #f4a54a 34%, #e670ab 100%);
}

.petes-section {
  position: relative;
  overflow: hidden;
  padding: 52px 0;
  background:
    radial-gradient(circle at 10% 4%, rgba(255,143,31,0.26), transparent 32%),
    radial-gradient(circle at 92% 20%, rgba(255,204,91,0.24), transparent 30%),
    linear-gradient(135deg, #fff5e3 0%, #fff0dc 42%, #ffe3c6 100%);
  border-top: 1px solid rgba(255,143,31,0.28);
  border-bottom: 1px solid rgba(255,143,31,0.28);
}

.petes-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,143,31,0.08), transparent 28%, rgba(208,79,153,0.06) 78%, transparent),
    radial-gradient(circle at 50% -18%, rgba(255,255,255,0.72), transparent 34%);
}

.petes-section .container {
  position: relative;
  z-index: 1;
}

.petes-section .section-eyebrow {
  color: #bf4f16;
}

.petes-text p {
  color: #4b3040;
  line-height: 1.62;
}

.petes-text .fact-row {
  gap: 12px;
}

.petes-text .fact {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}

.petes-text .fact-label,
.petes-card .pete-tag,
.petes-card .pete-meta,
.petes-card [style*="var(--muted)"],
.petes-card a {
  color: #7a3d20 !important;
}

.petes-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.7), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.54), rgba(255,235,209,0.38));
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow:
    0 24px 60px rgba(191,79,22,0.14),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -18px 36px rgba(255,143,31,0.08);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}

.petes-card .pete-name,
.petes-text .fact-value {
  color: #c94f1c !important;
  text-shadow: 0 2px 0 rgba(255,229,184,0.82);
}

.petes-card span[style*="display:inline-block"] {
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.8), transparent 36%),
    linear-gradient(145deg, #fff8ef, #ffd18b) !important;
  border-color: rgba(201,79,28,0.34) !important;
}

.petes-mobile-more {
  margin: 12px 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
  overflow: hidden;
}

.petes-mobile-more summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #7a3d20;
  font-weight: 950;
}

.petes-mobile-more p {
  padding: 0 14px 12px;
  margin: 0;
}

@media (max-width: 768px) {
  .catering-section,
  .petes-section,
  .location-section,
  .press-section,
  .faq-section,
  .gallery-section {
    padding: 36px 0;
  }

  .catering-card {
    padding: 18px;
    border-radius: 22px;
    gap: 14px;
  }

  .catering-copy h2 {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }

  .catering-copy p {
    font-size: 0.88rem;
    line-height: 1.42;
    margin-bottom: 0;
  }

  .catering-list {
    gap: 6px;
    margin-top: 10px;
  }

  .catering-list span {
    padding: 5px 9px;
    font-size: 0.72rem;
  }

  .catering-form {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .catering-form label {
    gap: 4px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .catering-form input,
  .catering-form select {
    min-height: 40px;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .catering-form label.full,
  .catering-form .btn,
  .catering-form-note {
    grid-column: 1 / -1;
  }

  .catering-form textarea {
    min-height: 64px;
    padding: 10px;
  }

  .catering-form .btn {
    min-height: 48px;
  }

  .catering-form-note {
    font-size: 0.76rem;
  }

  .petes-text p {
    font-size: 0.94rem;
    line-height: 1.55;
  }

  .petes-text .fact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .petes-text .fact {
    padding: 8px 10px;
  }

  .petes-text .fact-label {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }

  .petes-text .fact-value {
    font-size: 1.05rem;
  }

  .petes-text .cta-row {
    gap: 8px;
    margin-top: 14px;
  }

  .petes-text .cta-row .btn {
    width: 100%;
    min-height: 48px;
  }

  .petes-text .cta-row .btn-outline {
    display: none;
  }

  .petes-card {
    padding: 20px 16px;
  }

  .petes-card .pete-name {
    font-size: 2rem;
  }

  .petes-card .pete-tag {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .petes-card .pete-addr {
    margin-top: 8px;
    font-size: 0.9rem;
  }

  .petes-card .pete-meta {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  .petes-card > div[style*="text-align:left"],
  .petes-card > div[style*="justify-content:center"] {
    display: none !important;
  }
}

/* V33 Pete's-only orange carnival finish: no blue, no candy-shop pink dominance. */
.petes-section {
  --petes-orange: #ff7a18;
  --petes-orange-deep: #c94a12;
  --petes-corn: #ffd36a;
  --petes-cream: #fff8ed;
  background:
    radial-gradient(circle at 9% 4%, rgba(255,122,24,0.46), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(255,211,106,0.54), transparent 28%),
    linear-gradient(135deg, #fffaf1 0%, #fff0d4 44%, #ffd7ab 100%) !important;
  border-color: rgba(255,122,24,0.36) !important;
}

.petes-section::before {
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,0.76), transparent 34%),
    repeating-linear-gradient(115deg, rgba(255,122,24,0.08) 0 10px, transparent 10px 26px) !important;
}

.petes-section .section-eyebrow,
.petes-card .pete-name,
.petes-text .fact-value {
  color: var(--petes-orange-deep) !important;
  text-shadow: 0 2px 0 rgba(255,229,184,0.92);
}

.petes-section h2.section-title {
  color: #32162b;
}

.petes-text p,
.petes-mobile-more summary,
.petes-mobile-more p,
.petes-card .pete-tag,
.petes-card .pete-meta,
.petes-card [style*="var(--muted)"],
.petes-card a,
.petes-text .fact-label {
  color: #733514 !important;
}

.petes-mobile-more,
.petes-text .fact,
.petes-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.78), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.6), rgba(255,223,182,0.38)) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  box-shadow:
    0 18px 44px rgba(201,74,18,0.12),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -14px 26px rgba(255,122,24,0.08) !important;
}

.petes-text .cta-row .btn-primary {
  color: #32162b !important;
  background:
    radial-gradient(circle at 24% 9%, rgba(255,248,237,0.62), transparent 34%),
    linear-gradient(145deg, #ffd36a 0%, #ff9a24 48%, #ff6b18 100%) !important;
  border-color: rgba(255,255,255,0.92) !important;
  box-shadow:
    0 18px 40px rgba(255,122,24,0.24),
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -13px 26px rgba(201,74,18,0.14) !important;
}

.petes-text .cta-row .btn-primary::after {
  opacity: 0.28;
  background: linear-gradient(180deg, rgba(255,248,237,0.52), rgba(255,255,255,0.02));
}

.petes-text .cta-row .btn-outline {
  color: #733514 !important;
  background:
    radial-gradient(circle at 24% 9%, rgba(255,255,255,0.72), transparent 34%),
    linear-gradient(145deg, #fff8ed, #ffd8a7) !important;
  border-color: rgba(255,122,24,0.24) !important;
}

.petes-card span[style*="display:inline-block"] {
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.82), transparent 36%),
    linear-gradient(145deg, #fff8ed, #ffc46f) !important;
  border-color: rgba(255,122,24,0.38) !important;
}

.petes-section .pete-meta span,
.petes-section .pete-meta a,
.petes-section [style*="color:var(--green)"],
.petes-section [style*="color:var(--muted)"] {
  color: #733514 !important;
}

@media (max-width: 900px) {
  .menu-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .menu-preview-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 104px;
    padding: 16px 14px;
    gap: 5px 12px;
  }

  .menu-preview-card .mp-num {
    width: 40px;
    height: 40px;
    font-size: 0.94rem;
  }

  .menu-preview-card .mp-name {
    font-size: clamp(1rem, 3.8vw, 1.18rem);
  }
}

@media (max-width: 560px) {
  .menu-preview-grid {
    grid-template-columns: 1fr;
  }

  .menu-preview-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 92px;
    padding: 15px 16px;
  }

  .featured-card img[src*="product_softserve_sprinkles_focus"] {
    padding: 10px;
  }
}

/* Candy loader: quick brand moment, then it gets out of the visitor's way. */
.candy-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.9), transparent 28%),
    linear-gradient(135deg, #fff7fb 0%, #fdedc9 46%, #f8d8ea 100%);
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.candy-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-candy-stage {
  position: relative;
  width: min(78vw, 330px);
  min-height: 190px;
  display: grid;
  place-items: center;
}

.peppermint-spinner {
  width: 94px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #d04f99 0 12.5%, #fff 12.5% 25%, #e670ab 25% 37.5%, #fff 37.5% 50%, #d04f99 50% 62.5%, #fff 62.5% 75%, #e670ab 75% 87.5%, #fff 87.5% 100%);
  border: 7px solid rgba(255,255,255,0.96);
  box-shadow:
    0 20px 45px rgba(208,79,153,0.28),
    inset 0 0 0 9px rgba(251,226,167,0.78);
  animation: peppermintSpin 1.05s linear infinite;
}

.loader-candy {
  position: absolute;
  width: 28px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbe2a7, #e670ab);
  box-shadow: 0 10px 22px rgba(208,79,153,0.24), inset 0 1px 0 rgba(255,255,255,0.82);
  animation: candyFloat 1.8s ease-in-out infinite;
}

.loader-candy::before,
.loader-candy::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 14px;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 3px;
}

.loader-candy::before { left: -6px; }
.loader-candy::after { right: -6px; }
.loader-candy.one { left: 26px; top: 34px; background: linear-gradient(135deg, #84d2e2, #f3a0ca); animation-delay: -0.3s; }
.loader-candy.two { right: 24px; top: 42px; background: linear-gradient(135deg, #fbe2a7, #f96f70); animation-delay: -0.8s; }
.loader-candy.three { left: 54px; bottom: 24px; background: linear-gradient(135deg, #e670ab, #fdedc9); animation-delay: -1.1s; }
.loader-candy.four { right: 50px; bottom: 18px; background: linear-gradient(135deg, #8acfd1, #fff7fb); animation-delay: -1.4s; }

.loader-copy {
  position: absolute;
  bottom: -2px;
  margin: 0;
  color: #3b2340;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

@keyframes peppermintSpin {
  to { transform: rotate(360deg); }
}

@keyframes candyFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .peppermint-spinner,
  .loader-candy {
    animation: none;
  }
}

/* Final hero spacing override: keep the logo/tagline stack stable, then place
   the review and location pills lower so the mobile hero fills the first view. */
.hero-logo-title {
  margin-bottom: -20px !important;
}

.hero-tagline {
  margin-top: -20px !important;
  margin-bottom: 26px !important;
  color: #fffafd !important;
  text-shadow:
    0 2px 10px rgba(59,35,64,0.78),
    0 1px 0 rgba(59,35,64,0.66),
    0 0 16px rgba(255,255,255,0.34) !important;
}

.hero-tagline .since {
  display: inline-flex !important;
  align-items: center;
  margin-left: 6px;
  padding: 5px 13px 6px !important;
  color: #fff6dc !important;
  line-height: 1;
  background: linear-gradient(135deg, #d04f99 0%, #e670ab 58%, #f3a0ca 100%) !important;
  border: 2px solid rgba(255,255,255,0.92) !important;
  border-radius: 999px;
  box-shadow:
    0 10px 22px rgba(59,35,64,0.2),
    inset 0 1px 0 rgba(255,255,255,0.62) !important;
  text-shadow: 0 1px 0 rgba(59,35,64,0.38) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-tagline .since::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -55%;
  width: 42%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  opacity: 0.72;
  animation: sinceGlare 2.7s ease-in-out infinite;
  z-index: 0;
}

@keyframes sinceGlare {
  0%, 46% { left: -55%; }
  68%, 100% { left: 115%; }
}

.hero-ratings {
  margin-top: 44px !important;
}

.hero-trust {
  margin-top: 18px !important;
}

.scroll-cue {
  bottom: 22px !important;
}

@media (max-width: 900px) {
  .hero {
    min-height: calc(100svh - 100px) !important;
    padding-bottom: 72px !important;
  }

  .hero-content {
    gap: 0 !important;
  }

  .hero-logo-title {
    margin-bottom: -14px !important;
  }

  .hero-tagline {
    margin-top: -14px !important;
    margin-bottom: 12px !important;
    color: #fffefb !important;
    text-shadow:
      0 4px 16px rgba(59,35,64,0.84),
      0 1px 0 rgba(59,35,64,0.72),
      0 0 20px rgba(255,255,255,0.24) !important;
  }

  .hero-tagline {
    transform: translateX(3px);
  }

  /* This rule used to read ".hero-ratings, .hero-trust { transform:
     translateX(3px) translateY(34px); }". transform doesn't affect layout
     flow, only paint, so that 34px downward nudge was invisible to every
     layout-based check and only showed up as real, visible overlap on a
     device: first .hero-trust onto .hero-cta below it, and then — once
     .hero-trust's own transform was removed — .hero-trust onto .hero-ratings
     above it, because .hero-ratings was still shifted down but .hero-trust
     no longer was. Removed entirely rather than patched again: both elements
     now render at their real, natural, unshifted layout position, so this
     class of bug can't recur here. Fixed 2026-07-28. */

  .hero-tagline .since {
    background: linear-gradient(135deg, #d04f99 0%, #e670ab 58%, #f3a0ca 100%) !important;
    color: #fff7df !important;
    border: 2px solid rgba(255,255,255,0.96) !important;
    box-shadow:
      0 12px 24px rgba(59,35,64,0.2),
      inset 0 1px 0 rgba(255,255,255,0.64) !important;
    text-shadow: 0 1px 0 rgba(59,35,64,0.38) !important;
  }

  .hero-ratings {
    margin-top: 8px !important;
  }

  .hero-trust {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
  }

  .scroll-cue {
    bottom: 70px !important;
  }
}

.product-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: #173c67;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 0 9%, transparent 10%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.75) 0 7%, transparent 8%),
    linear-gradient(135deg, #fff0f7, #d8fff5);
}
.product-placeholder strong {
  max-width: 14ch;
  font-size: clamp(1.15rem, 3vw, 1.65rem);
  line-height: 1.12;
}
@media (max-width: 768px) {
  .hamburger {
    width: 44px;
    height: 44px;
  }
  .mobile-drawer a,
  .delivery-row a,
  .info-card a,
  .press-item a,
  .site-footer a,
  .catering-form-note a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .mobile-drawer a,
  .site-footer a {
    width: 100%;
  }
  .footer-social a {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* ============================================================
   2026-07-24 RESPONSIVE CONSOLIDATION
   One authoritative final layer for spacing, type, image crops,
   and the mobile quick-action bar.
   ============================================================ */
.section-head {
  max-width: 760px !important;
  margin: 0 auto 30px !important;
}

section[id] {
  scroll-margin-top: 84px;
}

.reveal,
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

h2.section-title {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.45rem, 5.4vw, 4.5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.section-lede {
  max-width: 650px !important;
  margin-inline: auto !important;
  font-size: clamp(.98rem, 1.5vw, 1.12rem) !important;
  line-height: 1.55 !important;
}

.featured-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#featured {
  padding-bottom: 64px !important;
}

.featured-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

.featured-card .img-wrap {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
}

.featured-card .img-wrap img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.featured-card .body {
  padding: 16px !important;
}

.featured-card .name {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
}

.featured-card .desc {
  font-size: .9rem !important;
  line-height: 1.45 !important;
}

.menu-preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.menu-preview-card {
  min-height: 118px !important;
  padding: 18px !important;
}

.delivery-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px max(20px, env(safe-area-inset-left)) !important;
  flex-wrap: wrap !important;
}

.delivery-row .label {
  flex-basis: 100%;
  margin: 0 0 2px !important;
  text-align: center;
}

.delivery-row .sep {
  display: none !important;
}

.delivery-row a {
  min-height: 44px;
  padding: 10px 17px !important;
}

.about-more {
  margin-top: 18px;
}

.about-more summary {
  width: fit-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 18px;
  border: 2px solid rgba(208,79,153,.32);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #6f2156;
  font-weight: 900;
}

.about-more[open] summary {
  margin-bottom: 18px;
}

.map-link-card {
  display: none;
}

.gallery-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
}

.gallery-grid .tile,
.gallery-grid .tile.tall,
.gallery-grid .tile.wide {
  aspect-ratio: 1 / 1 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

.gallery-grid .tile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 900px) {
  section,
  .gallery-section,
  .faq-section,
  .press-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  #featured {
    padding-bottom: 52px !important;
  }

  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .menu-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .gallery-grid .tile:last-child {
    grid-column: span 2 !important;
    aspect-ratio: 2 / 1 !important;
  }

  .about-inner {
    gap: 28px !important;
  }

  .sticky-bar {
    display: none !important;
  }
}

@media (max-width: 600px) {
  html {
    scroll-padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: 0 !important;
    overflow-x: clip;
  }

  .container {
    width: min(100% - 28px, 1180px) !important;
  }

  section,
  .gallery-section,
  .faq-section,
  .press-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .section-head {
    margin-bottom: 22px !important;
  }

  .section-eyebrow {
    margin-bottom: 10px !important;
    font-size: .78rem !important;
    letter-spacing: .16em !important;
  }

  h2.section-title {
    max-width: 14ch;
    margin-bottom: 14px !important;
    font-size: clamp(2.15rem, 10.4vw, 3rem) !important;
    line-height: .96 !important;
  }

  .section-lede {
    font-size: .98rem !important;
    line-height: 1.5 !important;
  }

  .hero-eyebrow {
    margin-top: 14px !important;
    padding: 9px 15px !important;
    font-size: .83rem !important;
    line-height: 1.15 !important;
  }

  .hero {
    min-height: calc(100svh - 82px) !important;
    padding-top: 116px !important;
    padding-bottom: 62px !important;
  }

  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .featured-card .badge {
    top: 8px !important;
    left: 8px !important;
    padding: 5px 8px !important;
    font-size: .62rem !important;
  }

  .featured-card .body {
    padding: 12px !important;
    min-height: 190px !important;
  }

  .featured-card {
    height: 440px !important;
    min-height: 440px !important;
  }

  .featured-card .name {
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }

  .featured-card .price {
    margin-top: 3px;
    font-size: .9rem !important;
  }

  .featured-card .desc {
    margin-top: 6px;
    font-size: .76rem !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  .review-platforms {
    margin-bottom: 20px !important;
  }

  .review-candy-card {
    padding: 18px !important;
  }

  .menu-preview-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .menu-preview-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 84px !important;
    padding: 13px 15px !important;
  }

  .delivery-row {
    gap: 8px !important;
    padding: 16px 14px !important;
  }

  .delivery-row a {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    text-align: center;
  }

  .map-frame {
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .map-frame iframe {
    display: none !important;
  }

  .map-link-card {
    min-height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 22px;
    color: #32162b;
    text-decoration: none;
    background:
      radial-gradient(circle at 85% 20%, rgba(255,79,139,.22), transparent 34%),
      linear-gradient(135deg, #fffafd, #fff0cf);
  }

  .map-link-card strong {
    font-size: 1.25rem;
  }

  .map-link-card span:last-child {
    color: #a22975;
    font-weight: 900;
  }

  .about-badge-wrap {
    gap: 14px !important;
  }

  .about-badge-img {
    width: 100% !important;
    height: auto !important;
    max-height: 260px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .about-stats-row {
    width: 100%;
  }

  .about-text h2.section-title {
    max-width: 12ch;
    margin-inline: 0;
    font-size: clamp(1.95rem, 8.7vw, 2.55rem) !important;
  }

  .about-text p {
    margin-bottom: 12px !important;
    font-size: .98rem !important;
    line-height: 1.58 !important;
  }

  .about-pillars {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
  }

  .about-pillar {
    padding: 14px !important;
  }

  .about-pillar-title {
    font-size: .9rem !important;
  }

  .about-pillar-desc {
    font-size: .76rem !important;
    line-height: 1.4 !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .gallery-grid .tile:last-child {
    grid-column: span 2 !important;
    aspect-ratio: 2 / 1 !important;
  }

  .faq-list {
    gap: 9px !important;
  }

  .faq-item summary {
    min-height: 52px;
    padding: 14px 16px !important;
    font-size: .98rem !important;
    line-height: 1.3 !important;
  }

  .faq-item .answer {
    padding: 0 16px 16px !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }

  .site-footer {
    padding-bottom: 28px !important;
  }

  .sticky-bar {
    display: none !important;
  }
}

/* ============================================================
   SECTION 2 — MENU PAGE (body.page-menu)
   These are deliberate page-specific designs, not drift:
   the menu page hides item thumbnails and uses a horizontally
   scrolling category strip instead of a wrapping tab row.
   ============================================================ */
body.page-menu h1, body.page-menu h2, body.page-menu h3, body.page-menu h4{font-family:'Bebas Neue',sans-serif;font-weight:700;letter-spacing:.02em;line-height:1.05}
body.page-menu .nav a.is-active{color:var(--yellow)}
body.page-menu .nav a:hover::after, body.page-menu .nav a.is-active::after{width:100%}
body.page-menu .menu-hero{padding:calc(var(--header-h) + 40px) 24px 32px;background:linear-gradient(180deg,#141414 0%,#0A0A0A 100%);border-bottom:1px solid var(--border);text-align:center}
body.page-menu .menu-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:12px}
body.page-menu .menu-hero h1 .script{font-family:'Caveat',cursive;font-weight:700;color:var(--red);font-size:1.05em}
body.page-menu .menu-hero p{color:var(--muted);font-size:1rem;max-width:640px;margin:0 auto 6px}
body.page-menu .menu-hero .meta{color:var(--yellow);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-top:14px}
body.page-menu .menu-hero .price-range{color:var(--muted);font-size:.85rem;margin-top:6px}
body.page-menu .order-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:18px 24px;background:var(--card);border-bottom:1px solid var(--border)}
body.page-menu .order-bar .label{color:var(--muted);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;align-self:center;margin-right:6px}
body.page-menu .order-bar a{padding:9px 18px;background:var(--card-2);border:1px solid var(--border);border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:all .2s}
body.page-menu .order-bar a:hover{background:var(--yellow);color:#000;border-color:var(--yellow)}
body.page-menu .order-bar a.featured{background:var(--red);color:#fff;border-color:var(--red)}
body.page-menu .order-bar a.featured:hover{background:var(--red-deep)}
body.page-menu .menu-tabs-wrap{position:sticky;top:var(--header-h);background:rgba(10,10,10,.96);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid var(--border);padding:10px 0}
body.page-menu .menu-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.page-menu .menu-tabs::-webkit-scrollbar{display:none}
body.page-menu .menu-tab{flex-shrink:0;padding:8px 16px;background:var(--card);border:1px solid var(--border);border-radius:999px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap;font-weight:600}
body.page-menu .menu-tab:hover{color:#fff;border-color:rgba(255,230,0,.4)}
body.page-menu .menu-page{padding:20px 0 80px}
body.page-menu .menu-cat{margin:32px 0;scroll-margin-top:calc(var(--header-h) + 60px)}
body.page-menu .menu-cat-shell{display:grid;grid-template-columns:164px 1fr;gap:22px;align-items:start;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
body.page-menu .menu-cat-photo{width:164px;aspect-ratio:1/1;border-radius:10px;object-fit:cover;background:#000;border:1px solid rgba(255,255,255,.08)}
body.page-menu .menu-cat-body{min-width:0}
body.page-menu .menu-cat-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border);gap:16px;flex-wrap:wrap}
body.page-menu .menu-cat-title{font-family:'Bebas Neue';font-size:1.85rem;color:#fff;letter-spacing:.02em}
body.page-menu .menu-cat-note{color:var(--muted);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
body.page-menu .items-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
@media (max-width:860px){
body.page-menu .menu-cat-shell{grid-template-columns:112px 1fr}
body.page-menu .menu-cat-photo{width:112px}
}
@media (max-width:768px){
body.page-menu .items-grid{grid-template-columns:1fr}
body.page-menu .menu-cat-shell{grid-template-columns:1fr}
body.page-menu .menu-cat-photo{width:100%;height:180px;aspect-ratio:auto}
}
body.page-menu .menu-item{display:grid;grid-template-columns:1fr auto;gap:14px;padding:10px 0;align-items:center;border-bottom:1px dashed rgba(255,255,255,.08)}
body.page-menu .menu-item .thumb{display:none}
body.page-menu .menu-item .name{color:#fff;font-weight:600;font-size:.96rem;margin-bottom:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.page-menu .menu-item .badge-pop{font-size:.6rem;background:var(--red);color:#fff;padding:2px 7px;border-radius:999px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;flex-shrink:0}
body.page-menu .menu-item .desc{color:var(--muted);font-size:.82rem;line-height:1.4}
body.page-menu .menu-item .price{color:var(--yellow);font-weight:700;font-size:1rem;white-space:nowrap;flex-shrink:0}
body.page-menu .notice{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--yellow);border-radius:var(--r);padding:18px 22px;margin:24px auto;max-width:920px;font-size:.92rem;color:#e0e0e0}
body.page-menu .notice strong{color:var(--yellow)}
body.page-menu .site-footer .links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:18px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
body.page-menu .site-footer .links a{color:var(--muted)}
body.page-menu .site-footer .links a:hover{color:var(--yellow)}
body.page-menu .site-footer p{color:var(--muted);font-size:.76rem;letter-spacing:.04em}
body.page-menu h1, body.page-menu h2, body.page-menu h3, body.page-menu h4, body.page-menu .logo-mark, body.page-menu .menu-cat-title{font-family:'Fredoka',system-ui,sans-serif;letter-spacing:0}
body.page-menu .logo-mark .script, body.page-menu .menu-hero h1 .script{font-family:'Fredoka',system-ui,sans-serif}
body.page-menu .nav a.is-active{color:var(--red-deep)}
body.page-menu .menu-hero{background: radial-gradient(circle at top left,rgba(255,216,77,.36),transparent 32%), radial-gradient(circle at top right,rgba(184,247,224,.5),transparent 34%), linear-gradient(180deg,#fff7fb 0%,#fff9ef 100%); border-bottom:1px solid var(--border); padding:calc(var(--header-h) + 38px) 24px 34px}
body.page-menu .menu-hero h1{color:#32162b}
body.page-menu .menu-hero h1 .script{color:var(--red)}
body.page-menu .menu-hero p, body.page-menu .menu-hero .price-range{color:#765d6f}
body.page-menu .menu-hero .meta{color:var(--red-deep);letter-spacing:.08em}
body.page-menu .order-bar{background:rgba(255,255,255,.78); border-bottom:1px solid var(--border); gap:12px}
body.page-menu .order-bar .label{color:#765d6f;letter-spacing:.08em}
body.page-menu .order-bar a{background:#fff;border-color:var(--border);border-radius:16px;color:#32162b; letter-spacing:0;text-transform:none;box-shadow:0 10px 24px rgba(255,79,139,.08)}
body.page-menu .order-bar a.featured{background:var(--red);border-color:var(--red);color:#fff}
body.page-menu .menu-tabs-wrap{background:rgba(255,247,251,.94);border-bottom:1px solid var(--border)}
body.page-menu .menu-tab{background:#fff;border-color:var(--border);border-radius:16px;color:#765d6f; letter-spacing:0;text-transform:none;box-shadow:0 8px 20px rgba(255,79,139,.07)}
body.page-menu .menu-tabs .menu-tab{color:#32162b!important;font-weight:800;min-width:max-content}
body.page-menu .menu-cat-shell{background:rgba(255,255,255,.9);border-color:rgba(255,79,139,.16); border-radius:24px;box-shadow:var(--shadow)}
body.page-menu .menu-cat-photo{border:6px solid #fff;border-radius:22px;background:linear-gradient(135deg,#fff0f7,#f1fff9)}
body.page-menu .menu-cat-head{border-bottom-color:var(--border)}
body.page-menu .menu-cat-title{color:#32162b}
body.page-menu .menu-cat-note{color:#765d6f;letter-spacing:.04em}
body.page-menu .menu-item{border-bottom-color:rgba(255,79,139,.13)}
body.page-menu .menu-item .name{color:#32162b}
body.page-menu .menu-item .desc{color:#765d6f}
body.page-menu .menu-item .badge-pop{background:#32162b;color:#fff;letter-spacing:0;text-transform:none;border-radius:10px}
body.page-menu .menu-item .price{color:var(--red-deep)}
body.page-menu .notice{background:rgba(255,255,255,.9);border-color:rgba(255,79,139,.16);border-left:6px solid var(--red); color:#4e3347;box-shadow:var(--shadow);border-radius:22px}
body.page-menu .notice strong{color:var(--red-deep)}
body.page-menu .site-footer .links a, body.page-menu .site-footer p{color:#765d6f}
@media(max-width:768px){
body.page-menu .menu-hero{padding:calc(var(--header-h) + 28px) 18px 28px}
body.page-menu .menu-hero h1{font-size:clamp(2rem,10vw,2.7rem)}
body.page-menu .order-bar{padding:16px 18px}
body.page-menu .order-bar .label{width:100%;text-align:center;margin:0}
body.page-menu .order-bar a{min-width:136px;text-align:center}
body.page-menu .menu-tabs{padding:4px 18px}
body.page-menu .menu-page{padding-top:12px}
body.page-menu .notice{margin:18px auto;padding:16px}
body.page-menu .menu-cat{margin:22px 0}
body.page-menu .menu-cat-shell{padding:14px;gap:14px}
body.page-menu .menu-cat-photo{height:190px;border-width:4px}
body.page-menu .items-grid{gap:0}
body.page-menu .menu-item{grid-template-columns:1fr auto;gap:12px;padding:13px 0}
body.page-menu .menu-item .name{font-size:.98rem}
body.page-menu .menu-item .desc{font-size:.82rem}
}
body.page-menu h1, body.page-menu h2, body.page-menu h3, body.page-menu h4, body.page-menu .logo-mark, body.page-menu .menu-cat-title{font-family:'Fraunces',Georgia,serif; font-weight:850; letter-spacing:0}
body.page-menu .logo-mark .script, body.page-menu .menu-hero h1 .script{font-family:'Fraunces',Georgia,serif; font-weight:850;}
body.page-menu .nav a.is-active{color:var(--mint-deep)}
body.page-menu .menu-hero{background: radial-gradient(circle at top left,rgba(216,255,245,.7),transparent 34%), radial-gradient(circle at top right,rgba(247,220,230,.55),transparent 32%), linear-gradient(180deg,#fffaf7 0%,#fff8ec 100%); border-bottom:1px solid var(--border)}
body.page-menu .menu-hero h1{color:var(--ink)}
body.page-menu .menu-hero h1 .script{color:var(--cherry)}
body.page-menu .menu-hero p, body.page-menu .menu-hero .price-range{color:var(--muted);font-weight:700}
body.page-menu .menu-hero .meta{color:var(--mint-deep);font-family:'Manrope',system-ui,sans-serif;font-weight:900;letter-spacing:.12em}
body.page-menu .order-bar, body.page-menu .menu-tabs-wrap{background:rgba(255,250,247,.78); border-bottom:1px solid rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25)}
body.page-menu .order-bar .label{color:var(--muted);font-weight:900;letter-spacing:.1em}
body.page-menu .order-bar a, body.page-menu .menu-tab{background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,248,236,.42)); border:1px solid rgba(255,255,255,.86); color:var(--ink); border-radius:18px; box-shadow:0 14px 32px rgba(127,29,79,.1),inset 0 1px 0 rgba(255,255,255,.92); font-family:'Manrope',system-ui,sans-serif; font-weight:850; letter-spacing:0; text-transform:none}
body.page-menu .order-bar a.featured, body.page-menu .menu-tab.is-active{background:linear-gradient(145deg,var(--cherry),var(--cranberry)); border-color:rgba(255,255,255,.62); color:#fff!important}
body.page-menu .menu-cat-shell{background: linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,248,236,.45)), radial-gradient(circle at 16% 0%,rgba(216,255,245,.42),transparent 34%); border:1px solid rgba(255,255,255,.88); box-shadow:var(--shadow)}
body.page-menu .menu-cat-photo{border-color:rgba(255,255,255,.86);background:linear-gradient(135deg,#fff8ec,#d8fff5)}
body.page-menu .menu-cat-head{border-bottom-color:var(--border)}
body.page-menu .menu-cat-title{color:var(--ink)}
body.page-menu .menu-cat-note{color:var(--muted);font-weight:800}
body.page-menu .menu-item{border-bottom-color:rgba(127,29,79,.12)}
body.page-menu .menu-item .name{color:var(--ink);font-weight:850}
body.page-menu .menu-item .desc{color:var(--muted);font-weight:650}
body.page-menu .menu-item .badge-pop{background:var(--mint-deep);color:#fff}
body.page-menu .menu-item .price{color:var(--cherry);font-weight:900}
body.page-menu .notice{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,248,236,.48)); border-color:rgba(255,255,255,.86); border-left-color:var(--mint-deep); color:var(--cocoa); box-shadow:var(--shadow)}
body.page-menu .notice strong{color:var(--cherry)}
body.page-menu .site-footer .links a, body.page-menu .site-footer p{color:var(--muted)}
body.page-menu h1, body.page-menu h2, body.page-menu h3, body.page-menu h4, body.page-menu .logo-mark, body.page-menu .menu-cat-title{font-family:'Bricolage Grotesque','Nunito Sans',system-ui,sans-serif; font-weight:800}
body.page-menu .logo-mark .script, body.page-menu .menu-hero h1 .script{font-family:'Bricolage Grotesque','Nunito Sans',system-ui,sans-serif; font-weight:800}
body.page-menu .nav a, body.page-menu .mobile-drawer a{font-family:'Nunito Sans',system-ui,sans-serif;color:var(--ink);font-weight:900}
body.page-menu .nav a.is-active{color:var(--candy-red)}
body.page-menu .menu-hero{background: radial-gradient(circle at top left,rgba(255,212,71,.42),transparent 34%), radial-gradient(circle at top right,rgba(73,229,189,.35),transparent 32%), linear-gradient(180deg,#fff9f2 0%,#fff1f7 100%); border-bottom:1px solid var(--border)}
body.page-menu .menu-hero h1{color:var(--plum)}
body.page-menu .menu-hero h1 .script{color:var(--candy-red)}
body.page-menu .menu-hero p, body.page-menu .menu-hero .price-range{color:var(--muted)}
body.page-menu .menu-hero .meta{color:var(--candy-red);font-family:'Nunito Sans',system-ui,sans-serif}
body.page-menu .order-bar, body.page-menu .menu-tabs-wrap{background:rgba(255,249,242,.82); border-bottom:1px solid rgba(255,255,255,.9)}
body.page-menu .order-bar a, body.page-menu .menu-tab{font-family:'Nunito Sans',system-ui,sans-serif; font-weight:900; color:var(--plum); background: radial-gradient(circle at 24% 9%,rgba(255,255,255,.95),transparent 36%), linear-gradient(145deg,#fff,var(--marshmallow-2)); border:1px solid rgba(255,255,255,.92); box-shadow:0 14px 32px rgba(255,79,145,.12),inset 0 1px 0 rgba(255,255,255,1)}
body.page-menu .order-bar a.featured, body.page-menu .menu-tab.is-active{color:var(--ink)!important; background:linear-gradient(145deg,var(--candy-yellow),var(--candy-orange)); border-color:rgba(255,255,255,.86)}
body.page-menu .menu-cat-shell{background: radial-gradient(circle at 16% 0%,rgba(255,255,255,.88),transparent 34%), linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,244,251,.5)); box-shadow:var(--shadow)}
body.page-menu .menu-cat-title{color:var(--plum)}
body.page-menu .menu-cat-note, body.page-menu .menu-item .desc{color:var(--muted)}
body.page-menu .menu-item .name{color:var(--ink);font-weight:900}
body.page-menu .menu-item .price{color:var(--candy-red);font-weight:950}
body.page-menu .menu-item .badge-pop{background:linear-gradient(145deg,var(--candy-red),var(--candy-pink))}
body.page-menu .notice{border-left-color:var(--candy-orange)}
body.page-menu .notice strong{color:var(--candy-red)}
body.page-menu h1, body.page-menu h2, body.page-menu h3, body.page-menu h4, body.page-menu .logo-mark, body.page-menu .menu-cat-title{font-family:'Paytone One','Sora',system-ui,sans-serif; font-weight:400}
body.page-menu .logo-mark .script, body.page-menu .menu-hero h1 .script{font-family:'Paytone One','Sora',system-ui,sans-serif; font-weight:400}
body.page-menu .nav a, body.page-menu .mobile-drawer a{font-family:'Sora',system-ui,sans-serif; color:var(--v6-ink); font-weight:800}
body.page-menu .nav a.is-active{color:var(--v6-red)}
body.page-menu .menu-hero{background: radial-gradient(circle at top left,rgba(255,232,75,.46),transparent 34%), radial-gradient(circle at top right,rgba(32,214,181,.35),transparent 32%), linear-gradient(180deg,#fff8ea 0%,#fff2f8 100%); border-bottom:1px solid var(--border)}
body.page-menu .menu-hero h1{color:var(--v6-plum);text-shadow:0 4px 0 rgba(255,232,75,.55)}
body.page-menu .menu-hero h1 .script{color:var(--v6-red)}
body.page-menu .menu-hero p, body.page-menu .menu-hero .price-range{color:var(--muted)}
body.page-menu .menu-hero .meta{color:var(--v6-red);font-family:'Sora',system-ui,sans-serif}
body.page-menu .order-bar, body.page-menu .menu-tabs-wrap{background:rgba(255,248,234,.82); border-bottom:1px solid rgba(255,255,255,.9)}
body.page-menu .order-bar a, body.page-menu .menu-tab{font-family:'Sora',system-ui,sans-serif; font-weight:800; color:var(--v6-plum); background: radial-gradient(circle at 24% 9%,rgba(255,255,255,.96),transparent 36%), linear-gradient(145deg,#fff,#fff2f8); border:1px solid rgba(255,255,255,.92); box-shadow:0 14px 32px rgba(241,38,105,.12),inset 0 1px 0 rgba(255,255,255,1)}
body.page-menu .order-bar a.featured, body.page-menu .menu-tab.is-active{color:var(--v6-ink)!important; background:linear-gradient(145deg,var(--v6-lemon),var(--v6-orange)); border-color:rgba(255,255,255,.86)}
body.page-menu .menu-cat-shell{background: radial-gradient(circle at 16% 0%,rgba(255,255,255,.88),transparent 34%), linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,242,248,.52)); box-shadow:var(--shadow)}
body.page-menu .menu-cat-title{color:var(--v6-plum)}
body.page-menu .menu-cat-note, body.page-menu .menu-item .desc{color:var(--muted)}
body.page-menu .menu-item .name{color:var(--v6-ink);font-weight:800}
body.page-menu .menu-item .price{color:var(--v6-red);font-weight:900}
body.page-menu .menu-item .badge-pop{background:linear-gradient(145deg,var(--v6-red),var(--v6-raspberry))}
body.page-menu .notice{border-left-color:var(--v6-orange)}
body.page-menu .notice strong{color:var(--v6-red)}
body.page-menu h1, body.page-menu h2, body.page-menu h3, body.page-menu h4, body.page-menu .logo-mark, body.page-menu .menu-cat-title{font-family:var(--font-sans); font-weight:900}
body.page-menu .logo-mark .script, body.page-menu .menu-hero h1 .script{font-family:var(--font-sans); font-weight:900}
body.page-menu .nav a, body.page-menu .mobile-drawer a{font-family:var(--font-sans); color:#4a314b; font-weight:800}
body.page-menu .nav a.is-active{color:#d04f99}
body.page-menu .menu-hero{background: radial-gradient(circle at top left,rgba(251,226,167,.72),transparent 34%), radial-gradient(circle at top right,rgba(178,225,235,.58),transparent 32%), linear-gradient(180deg,#f6e6ee 0%,#fff6dc 100%); border-bottom:1px solid rgba(208,79,153,.18)}
body.page-menu .menu-hero h1{color:#3b2340;text-shadow:3px 3px 0 rgba(251,226,167,.95)}
body.page-menu .menu-hero h1 .script{color:#d7488e}
body.page-menu .menu-hero p, body.page-menu .menu-hero .price-range{color:#735f70}
body.page-menu .menu-hero .meta{color:#d04f99;font-family:var(--font-sans)}
body.page-menu .order-bar, body.page-menu .menu-tabs-wrap{background:rgba(246,230,238,.86); border-bottom:1px solid rgba(255,255,255,.88)}
body.page-menu .order-bar a, body.page-menu .menu-tab{font-family:var(--font-sans); font-weight:800; color:#4a314b; background: radial-gradient(circle at 24% 9%,rgba(255,255,255,1),transparent 36%), linear-gradient(145deg,#fff,#f8d8ea); border:1px solid rgba(255,255,255,.92); box-shadow:3px 3px 0 rgba(208,79,153,.24),inset 0 1px 0 rgba(255,255,255,1)}
body.page-menu .order-bar a.featured, body.page-menu .menu-tab.is-active{color:#333!important; background:linear-gradient(145deg,#fbe2a7,#e670ab); border-color:rgba(255,255,255,.9)}
body.page-menu .menu-cat-shell{background: radial-gradient(circle at 16% 0%,rgba(255,255,255,.9),transparent 34%), linear-gradient(145deg,rgba(255,255,255,.78),rgba(253,237,201,.52)); box-shadow:var(--shadow)}
body.page-menu .menu-cat-title{color:#3b2340}
body.page-menu .menu-cat-note, body.page-menu .menu-item .desc{color:#735f70}
body.page-menu .menu-item .name{color:#4e3c4b;font-weight:850}
body.page-menu .menu-item .price{color:#d04f99;font-weight:900}
body.page-menu .menu-item .badge-pop{background:linear-gradient(145deg,#d04f99,#d7488e)}
body.page-menu .notice{border-left-color:#84d2e2}
body.page-menu .notice strong{color:#d04f99}
body.page-menu .menu-hero h1{color:var(--brand-candy); text-shadow:3px 3px 0 var(--brand-cream-pop)}
body.page-menu .menu-hero h1 .script{color:var(--brand-williams)}
body.page-menu .menu-hero p, body.page-menu .menu-hero .price-range, body.page-menu .order-bar .label, body.page-menu .menu-tab, body.page-menu .menu-cat-note, body.page-menu .site-footer .links a, body.page-menu .site-footer p{color:#186f7c!important; font-weight:850; text-shadow:0 1px 0 rgba(255,255,255,.78);}
body.page-menu .menu-item .desc{color:#5d4659!important; font-weight:700;}
body.page-menu .menu-cat-photo[src*="product_softserve_sprinkles_focus"]{object-fit: contain; object-position: center 38%; padding: 8px; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.88), transparent 38%), linear-gradient(145deg, rgba(253,237,201,.92), rgba(248,216,234,.82));}
body.page-menu .menu-hero .meta, body.page-menu .menu-hero .price-range, body.page-menu .order-bar .label, body.page-menu .menu-tab, body.page-menu .menu-cat-note, body.page-menu .notice, body.page-menu .notice a, body.page-menu .site-footer .links a, body.page-menu .site-footer p{color:#186f7c!important; text-shadow:0 1px 0 rgba(255,255,255,.9);}
body.page-menu .notice a, body.page-menu .site-footer .links a{color:#105764!important; font-weight:900; text-decoration-color:rgba(208,79,153,.52); text-underline-offset:3px;}
@media (max-width:860px){
body.page-menu .menu-cat-shell{grid-template-columns: 1fr; overflow: visible;}
body.page-menu .menu-cat-photo{width: 100%; max-width: none; height: 220px; aspect-ratio: auto;}
body.page-menu .menu-cat-photo[src*="product_softserve_sprinkles_focus"]{height: 220px; padding: 10px;}
}
body.page-menu .menu-cat-placeholder{width: 164px; aspect-ratio: 1; border: 6px solid rgba(255,255,255,.86); border-radius: 22px; display: grid; place-items: center; padding: 1rem; background: linear-gradient(135deg,#fff0f7,#d8fff5); color: #173c67; text-align: center; font-weight: 800; line-height: 1.1;}
@media (max-width:860px){
body.page-menu .menu-cat-placeholder{width:112px;}
}
@media (max-width:768px){
body.page-menu .menu-cat-placeholder{width:100%; min-height:150px; aspect-ratio:auto;}
}
body.page-menu .order-bar a, body.page-menu .menu-tab{min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
body.page-menu .notice a, body.page-menu .site-footer .links a{min-width:44px; min-height:44px; display:inline-flex; align-items:center;}

/* portal: sold-out styling (shared) */
.badge-sold{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:#fee2e2;color:#991b1b;vertical-align:middle;white-space:nowrap}
.is-sold .info, .is-sold .tap-style, .is-sold .tap-origin, .is-sold .tap-abv,
.is-sold .desc, .is-sold .price, .is-sold .food-price{opacity:.55}

/* ============================================================
   PHASE 3 — UX / CONVERSION
   ============================================================ */

/* Closed-state pill: the hero status dot goes from live-green to muted
   when the shop is actually shut, so the badge cannot read as "open"
   at a glance while saying "Closed now". */
.hero-eyebrow.is-closed .dot { background: var(--muted); box-shadow: none; animation: none; }
.hero-eyebrow.is-closed { opacity: .85; }

/* The menu page now carries the same sticky action bar as the homepage.
   Both are 3-up: Order | Call | Directions. */
body.page-menu { padding-bottom: 0; }
@media (max-width: 768px) {
  body.page-menu { padding-bottom: 76px; }
}

/* ============================================================
   PHASE 6a — PRODUCT CATALOG
   Featured cards and menu rows open a shareable detail overlay.
   ============================================================ */
.featured-link { display: block; color: inherit; }
/* .menu-item IS the <a> (see site.js Module 3 menu render): the anchor is the
   grid container itself, using the same grid-template-columns the row used
   when it was a plain div. That avoids display:contents, which several
   browsers drop from the accessibility tree, so the link is reachable by
   keyboard and announced by screen readers instead of being mouse-only. */
.featured-card .featured-link:focus-visible,
.menu-item:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 12px;
}

body.product-open { overflow: hidden; }

.product-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.product-back { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.product-card {
  position: relative; z-index: 1; width: min(560px, 100%);
  max-height: min(88vh, 780px); overflow-y: auto;
  background: var(--card, #141414); color: var(--white, #fff);
  border: 1px solid var(--border, #2A2A2A); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.product-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 999px; font-size: 1.6rem; line-height: 1;
  background: rgba(0,0,0,.55); color: #fff;
}
.product-close:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.product-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px 18px 0 0; }
.product-photo.product-placeholder { display: grid; place-items: center; background: var(--card-2, #1A1A1A); text-align: center; padding: 20px; }
.product-body { padding: 20px 22px 24px; }
.product-cat { color: var(--muted, #A0A0A0); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.product-name { font-size: clamp(1.5rem, 4vw, 2rem); margin: 6px 0 4px; }
.product-price { color: var(--yellow, #FFE600); font-size: 1.25rem; font-weight: 800; }
.product-desc { color: var(--muted, #A0A0A0); margin-top: 10px; line-height: 1.55; }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.product-actions .btn { flex: 1 1 180px; text-align: center; }
.product-note { color: var(--muted, #A0A0A0); font-size: .8rem; margin-top: 12px; }

@media (max-width: 520px) {
  .product-overlay { padding: 0; place-items: end stretch; }
  .product-card { max-height: 92vh; border-radius: 18px 18px 0 0; }
  .product-photo { border-radius: 18px 18px 0 0; }
}

/* ============================================================
   PHASE 6b — CATERING / ORDER REQUEST
   ============================================================ */
.catering-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.catering-form-status { margin-top: 10px; font-weight: 700; font-size: .9rem; }
.catering-form-status.is-ok { color: var(--green, #00FF88); }
.catering-form-status.is-error { color: #ff9a9a; }
.catering-form .check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.catering-form .check input { width: 18px; height: 18px; flex: 0 0 auto; }

/* ============================================================
   ICONS  (assets/icons.svg — reicon, MIT)
   ------------------------------------------------------------
   Replaces the emoji and dingbat glyphs that used to sit in
   buttons and status pills. Sized in em so an icon always
   matches its neighbouring text, and coloured by currentColor
   so it inherits its context rather than fighting it.

   NOTE: the review-carousel stars are deliberately NOT icons.
   They are content (a rating a customer left), not chrome, and
   an outline star reads as an EMPTY rating. Do not "finish the
   job" by swapping those.
   ============================================================ */
.ico {
  width: 1.05em; height: 1.05em;
  display: inline-block; vertical-align: -.14em;
  flex: none;
}
.ico-lg { width: 1.35em; height: 1.35em; vertical-align: -.24em; }

/* ============================================================
   REDUCED MOTION - single authoritative guard
   ============================================================
   Appended last so it wins on source order over every animation above.

   Why this exists: the stylesheet had three prefers-reduced-motion blocks
   (L719, L1360, L4414) covering the review marquee, card/button transitions and
   the preloader spinner. Nine INFINITE animations were declared in total, so the
   blinking status dot, the vibe-strip photo marquee, the ratings marquee, the
   scroll cue and the "SINCE 1941" glare all kept animating forever for visitors
   who had asked their operating system to stop exactly that. Those earlier
   blocks are left in place - they are narrower than this one and harmless.

   Approach: cut DURATIONS rather than blanket "animation: none". Killing an
   animation outright also discards its end state, so anything that animates
   from opacity:0 to opacity:1 would be stranded invisible. Williams happens to
   have no fill-mode animations today, but a 0.01ms duration is correct whether
   or not that stays true, and it still fires animationend listeners.

   The marquees are the one case that needs "none": they translate to -50%, so a
   0.01ms duration would snap them to fully-scrolled-off instead of stopping
   them. Parked at translateX(0) they read as a normal static photo strip. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Marquees: stop them where they start, do not fast-forward them. */
  .vibe-track,
  .review-track,
  .hero-ratings-track {
    animation: none !important;
    transform: translateX(0) !important;
  }

  /* Purely decorative loops with nothing to preserve. */
  .hero-eyebrow .dot,
  .scroll-cue .line,
  .hero-tagline .since::after,
  .peppermint-spinner,
  .loader-candy {
    animation: none !important;
  }

  html { scroll-behavior: auto; }
}

/* Skip-link — a11y. index.html and menu.html each carry <main id="main">, added
   during the July 2026 SEO/a11y pass, but no visible skip link ever pointed at
   it, so a keyboard/screen-reader visitor had a landmark with no way to reach
   it. Pete's has carried this exact pattern since June 2026; matched here using
   Williams' own outline convention (var(--yellow), same as .btn:focus-visible
   and .product-close:focus-visible above) rather than copying Pete's colour. */
.skip-link {
  position: absolute; top: -100px; left: 12px;
  background: var(--red); color: #fff;
  padding: 12px 18px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  font-size: 0.85rem; z-index: 10000;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 12px; outline: 3px solid var(--yellow); outline-offset: 2px; }


/* ============================================================================
   SECTION 3 — RESPONSIVE NORMALIZATION            (appended 2026-07-27)
   ============================================================================

   READ THIS BEFORE ADDING CSS ANYWHERE IN THIS FILE.

   This stylesheet is ~5,400 lines of SEVEN sequential redesign passes stacked
   on top of each other:

     L17    SECTION 1 — BASE + HOMEPAGE
     L834   MODERN CANDY SHOP REDESIGN      <- the live brand palette
     L1505  VISUAL LEVEL-UP PASS
     L1822  PALETTE + TYPE PIVOT
     L2076  VIBRANT CANDY V5
     L2517  HERO CONVERSION POLISH
     L4597  2026-07-24 RESPONSIVE CONSOLIDATION
     L5036  SECTION 2 — MENU PAGE
     L5251  PHASE 3 — UX / CONVERSION

   Each pass re-declared selectors the earlier passes had already styled. That
   is survivable for colour, but it is NOT survivable for layout, because of one
   cascade rule people forget:

     A later UNQUALIFIED rule beats an earlier rule that sits INSIDE a media
     query, when specificity is equal. Media queries add ZERO specificity.

   So a mobile rule written in pass 1 is silently killed by a desktop rule
   written in pass 4, and the page looks fine on the laptop it was authored on.
   A static audit of this file on 2026-07-27 found 171 declarations in that
   state, 41 of them layout-critical. Two were live customer-facing faults:

     1. .hero-cta   { display: none }  @media (max-width:768px)   L3070
        .sticky-bar { display: none !important } @media (max-width:900px) L4787
        .sticky-bar { display: none !important } @media (max-width:600px) L5031

        Between them these removed EVERY primary call-to-action from the
        homepage and the menu page on every phone and on iPad portrait. The
        markup for both was still on the page and still correct; it was
        rendering at zero. The only route to "Order" on a phone was to open the
        hamburger drawer. This block restores both.

     2. .catering-form { grid-template-columns: 1fr 1fr } @media (max-width:768px)
        L4097 outranked the 1fr rule at L3869 (max-width:560), so the catering
        form ran two fields per row down to 320px.

   HOW TO ADD CSS FROM NOW ON
   --------------------------
   Append to THIS section. Do not start an eighth pass at the bottom of the
   file, and do not edit the seven passes above — they are the visual design and
   they are intentionally left byte-for-byte intact. Nothing in this section
   changes a colour, a font-family, a border-radius, a shadow, or any :root
   custom property. It changes geometry only.

   ONE BREAKPOINT SYSTEM
   ---------------------
   The file above uses eleven different widths (420 / 520 / 540 / 560 / 600 /
   640 / 768 / 860 / 880 / 900 / 980 / 1024) with no iPad-portrait band and no
   orientation handling at all. Everything below uses exactly four bands plus
   one orientation guard:

     phone            <= 560px
     tablet portrait  561px - 834px    (iPad mini 768, iPad Air 820, iPad 834)
     tablet landscape 835px - 1024px
     desktop          >= 1025px
     short landscape  (orientation:landscape) and (max-height:520px)

   WHY !important APPEARS HERE
   ---------------------------
   Reluctantly, and only where an existing `!important` in the 2026-07-24
   consolidation layer has to be beaten. Every use is a direct answer to a
   specific line above, and that line is named in the comment. Do not copy the
   pattern for new work — plain declarations in this section already win on
   source order.

   The prefers-reduced-motion guard at L5368 is unaffected: it uses !important
   on animation/transition properties, and nothing in this section touches those.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   3.1  MOBILE CONVERSION BAR — restored
   ----------------------------------------------------------------------------
   Beats the two `display:none !important` rules at L4787 and L5031. The bar's
   own visual treatment (glass, pink/red gradients, 58px pills) is defined at
   L1731-1786 and L1937-1960 and is deliberately reused untouched — this only
   puts it back on screen.

   Shown up to 900px so it covers phones AND iPad portrait, matching the widest
   of the two rules it overrides. Above 900px the hero CTA row and the header
   nav are both visible, so a fixed bottom bar would be redundant chrome.

   Order of the three actions is deliberate and matches the funnel: Order first
   (the only one that transacts), then Call, then Directions. index.html and
   menu.html already carry them in that DOM order.
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sticky-bar {
    display: grid !important;              /* beats L4787 and L5031 */
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Clear the fixed bar so it never covers the last section, the footer, or a
     form's submit button. L4795 sets `padding-bottom: 0 !important` on body
     under 600px on the assumption the bar was gone; it is not gone any more.
     58px pill + 10px top padding + max(10px, safe-area) bottom = 78px, rounded
     to 82px so a focus ring on the last footer link is never clipped. */
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Anchor jumps (#visit, #faq, the nav links) must not land under the bar. */
  html {
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  /* The product overlay sets body.product-open and locks body scroll (L5281);
     it manages its own full-height scroll and must not inherit the offset.
     The mobile drawer toggles .is-open on the drawer element itself, not on
     body, so it needs nothing here. */
  body.product-open {
    padding-bottom: 0 !important;
  }
}

/* club.php has no .sticky-bar in its markup (it is a single-purpose signup
   page, and a bottom bar competing with its own submit button would hurt it).
   Make sure it never inherits the body offset reserved for a bar it lacks. */
body.page-club {
  padding-bottom: 0 !important;
}


/* ----------------------------------------------------------------------------
   3.2  HERO CALL-TO-ACTION — restored, with a real hierarchy
   ----------------------------------------------------------------------------
   Beats `.hero-cta { display: none }` at L3070.

   The hero markup declares four buttons:
     .btn-primary    Order pickup            <- transacts
     .btn-secondary  View menu & prices      <- the top informational intent
     .btn-outline    Delivery on DoorDash    <- third-party, lower margin
     .btn-outline    Call the shop           <- duplicated by the sticky bar

   Four side-by-side buttons is what caused the wrapping and overlap that led
   someone to hide the row outright. The fix is hierarchy, not deletion: on
   phone and tablet-portrait the row shows the two that matter, stacked full
   width so they can never wrap into each other.

   The two hidden .btn-outline actions are NOT lost:
     - "Call the shop"        -> sticky bar, and the header drawer
     - "Delivery on DoorDash" -> .delivery-row in the #menu section
                                 (index.html:622), alongside Uber Eats and
                                 Order.online
   Verify both of those still exist before changing this block.
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-cta {
    display: grid;                         /* beats L3070 `display: none` */
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, 340px);
    margin: 16px auto 0;
  }

  .hero-cta .btn {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Secondary actions live elsewhere on small screens — see the note above. */
  .hero-cta .btn-outline {
    display: none;
  }
}

/* Tablet portrait is wide enough for the two primary actions side by side. */
@media (min-width: 561px) and (max-width: 900px) {
  .hero-cta {
    grid-template-columns: 1fr 1fr;
    width: min(100%, 520px);
  }
}


/* ----------------------------------------------------------------------------
   3.3  GRIDS — column counts that match the available width
   ----------------------------------------------------------------------------
   Every rule here beats an `!important` in the 2026-07-24 consolidation layer,
   which set desktop column counts with no media query and then only partially
   re-narrowed them. Column counts below are chosen so no card is ever narrower
   than ~150px, the point at which the product photos start reading as texture
   rather than as a candy apple.
   ---------------------------------------------------------------------------- */

/* Phone — one thing at a time. */
@media (max-width: 560px) {
  /* L4847 leaves this at 2 columns down to 320px: two 140px cards with a photo,
     a name, a description and a price in each. */
  .featured-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* L4097 (max-width:768) outranked the 1fr rule at L3869 (max-width:560), so
     name/phone/date/guests ran two-up on a 360px screen. A form field narrower
     than ~160px cannot show its own placeholder. */
  .catering-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .catering-form .full,
  .catering-form button,
  .catering-form .catering-form-status,
  .catering-form .catering-form-note {
    grid-column: 1 / -1;
  }

  /* L4980 forces 1fr 1fr !important under 600px. Each pillar carries a title
     and two lines of body copy; at 360px that is roughly 14 characters a line. */
  .about-pillars {
    grid-template-columns: 1fr !important;
  }

  /* L4999 leaves the gallery at 2 columns with aspect-ratio 1/1, i.e. ~160px
     square tiles. Two is right for a photo strip — keep it, but let the tiles
     breathe. */
  .gallery-grid {
    gap: 10px !important;
  }
}

/* Tablet portrait — iPad mini 768, iPad Air 820, iPad 834.
   This band did not exist anywhere in the file above; 768 fell into the phone
   rules and 820 fell into the desktop rules, which is why iPad portrait was the
   worst-looking viewport on the site. */
@media (min-width: 561px) and (max-width: 834px) {
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .menu-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .review-platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-pillars {
    grid-template-columns: 1fr 1fr !important;
  }
  .catering-form {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Two-column prose at this width gives ~40 characters a line, below the
     comfortable 45-75 range. Keep the story and location blocks single-column
     until tablet landscape. */
  .about-inner,
  .loc-grid,
  .petes-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet landscape — enough width for the desktop layout, not enough for the
   widest grids at their desktop column counts. */
@media (min-width: 835px) and (max-width: 1024px) {
  .featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* ----------------------------------------------------------------------------
   3.4  IMAGES — nothing cropped, nothing collapsed, nothing shifting
   ----------------------------------------------------------------------------
   Every <img> on the site is a photograph inside a fixed-ratio box. Two things
   have to hold at every viewport: the box keeps its ratio (so the layout does
   not jump while the photo loads) and the photo covers the box from its centre
   (so the subject is never sliced off an edge).
   ---------------------------------------------------------------------------- */
.hero-bg img,
.featured-card .img-wrap img,
.gallery-grid .tile img,
.vibe-track img,
.menu-item .thumb img,
.press-item img,
.petes-card img {
  object-fit: cover;
  object-position: center;
  max-width: 100%;
}

/* A photo must never be the thing that makes the page scroll sideways. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 900px) {
  /* The hero photo is the LCP element. It is absolutely positioned behind the
     content, so it needs an explicit box or it collapses to intrinsic height
     and leaves a band of background above the fold. */
  .hero-bg,
  .hero-bg img {
    width: 100%;
    height: 100%;
  }

  /* The logo is the visual H1. Cap it against BOTH axes: capping only width
     lets it eat the whole viewport in landscape, pushing the tagline, the
     rating pills and the CTA row below the fold. */
  .hero-logo-img {
    width: min(82vw, 380px);
    max-height: 30vh;
    height: auto;
    object-fit: contain;
  }
}


/* ----------------------------------------------------------------------------
   3.5  SHORT LANDSCAPE — phone held sideways
   ----------------------------------------------------------------------------
   A 390x844 phone rotated is 844x390. Nothing in the file above tests height,
   so every `min-height: 92svh` hero rule fires and produces a hero taller than
   the screen with the logo, the tagline, four rating pills, four trust chips
   and the CTA row all fighting for 390 vertical pixels. That is the "buttons
   overlap in landscape" report.
   ---------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  .hero {
    min-height: auto !important;           /* beats L4494 `!important` */
    padding: 76px 24px 32px !important;
  }
  .hero-logo-img {
    width: min(46vw, 300px);
    max-height: 34vh;
  }
  /* Decorative-only rows. Dropping them buys ~90px of vertical space and costs
     nothing a visitor came for; the same facts are in the #about pillars. */
  .hero-trust,
  .scroll-cue {
    display: none !important;
  }
  .hero-ratings {
    margin-top: 4px;
  }
  .hero-cta {
    grid-template-columns: 1fr 1fr;
    width: min(100%, 520px);
    margin-top: 10px;
  }
  /* A fixed bottom bar on a 390px-tall viewport costs a fifth of the screen.
     The header nav is still reachable, and rotating back restores the bar. */
  .sticky-bar {
    display: none !important;
  }
  body {
    padding-bottom: 0 !important;
  }
}


/* ----------------------------------------------------------------------------
   3.6  TAP TARGETS AND OVERLAP GUARDS
   ----------------------------------------------------------------------------
   L4568 already set 44px minimums on the drawer, footer, press and info links.
   This extends the same floor to everything else interactive and fixes the
   places where two elements could occupy the same pixels.
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .btn,
  .sticky-bar a,
  .delivery-row a,
  .nav a,
  .faq-item .question,
  .product-close,
  .catering-form button,
  .rating-pill {
    min-height: 44px;
  }

  .faq-item .question,
  .catering-form button,
  .product-close {
    display: flex;
    align-items: center;
  }

  /* The fixed header and the hero both start at the top of the page. The hero's
     padding-top is set at L2965 with NO media query (76px) while the header is
     68px tall at this width (L1394) — 8px of clearance, and less once a focus
     ring or the announcement bar is present. Hard-coded rather than derived
     from var(--header-h): that variable is 72px (L58) and is NOT re-declared
     for mobile — the 68px mobile header comes from a direct height rule, so
     the variable would compute against the wrong number. */
  .hero {
    padding-top: 92px;
  }

  /* Anchored sections must clear the fixed header too, or #visit and #faq land
     with their heading hidden behind it. */
  html {
    scroll-padding-top: 84px;
  }

  /* The scroll cue is absolutely positioned at the bottom of the hero and the
     restored CTA row now occupies that space. */
  .scroll-cue {
    display: none;
  }
}

/* Nothing may cause a horizontal scrollbar.
   ---------------------------------------------------------------------------
   `body` already carries `overflow-x: hidden` from the base layer (L37), and
   the 2026-07-24 layer already upgrades it to `clip` below 600px (L4797). This
   extends that same, already-made decision to every width instead of leaving
   two different behaviours either side of an arbitrary breakpoint.

   `clip` rather than `hidden` matters here and is not cosmetic: `overflow:
   hidden` on one axis forces the other axis to `auto`, which makes the element
   a scroll container — and a scroll container breaks `position: sticky` for
   its descendants. `body.page-menu .menu-tabs-wrap` (L5056) is sticky, so
   `hidden` on body is the exact shape of bug that silently unsticks the menu
   category tabs. `clip` is compatible with `visible` on the other axis and
   creates no scroll container.

   Deliberately scoped to `body` and NOT `html`. Clipping the root element as
   well would be a bigger behavioural change than the problem needs, and it is
   not verifiable without a real browser — which this pass did not have. If a
   horizontal scrollbar ever survives this rule, find the element that
   overflows rather than adding `html` here. */
body {
  overflow-x: clip;
  max-width: 100%;
}


/* ----------------------------------------------------------------------------
   3.7  SECTION RHYTHM — one spacing scale across all pages
   ----------------------------------------------------------------------------
   index.html, menu.html and club.php each ended up with their own section
   padding through the seven passes. One scale, applied to all three.
   ---------------------------------------------------------------------------- */
@media (max-width: 560px) {
  section {
    padding: 40px 0;
  }
  .section-head {
    margin-bottom: 24px;
  }
}

@media (min-width: 561px) and (max-width: 834px) {
  section {
    padding: 52px 0;
  }
  .section-head {
    margin-bottom: 30px;
  }
}


/* ----------------------------------------------------------------------------
   3.8  ACCESSIBILITY — open QA finding #7 does not apply to this codebase
   ----------------------------------------------------------------------------
   qa/WILLIAMS_QA_REPORT.json carries an open low-severity finding stating that
   the menu-page product links use `display: contents`, which some older
   browsers drop from the accessibility tree, leaving the links mouse-only.

   RE-CHECKED 2026-07-27: that is not the case here, and no CSS is needed.
   `display: contents` appears nowhere in this stylesheet — the only match for
   the string is the explanatory comment at L5271-5275. site.js Module 3 renders
   each row with `.menu-item` AS the <a> element (assets/site.js:910), and the
   anchor is itself the grid container using the row's own
   grid-template-columns. That is exactly the remedy the finding asked for, and
   it was already in place.

   The finding is reclassified as no_change_needed in the new QA report rather
   than fixed. What remains genuinely untested is screen-reader behaviour in
   general: no VoiceOver or NVDA pass has been run at any point in this project.
   That is a testing gap, not a defect, and is recorded as such.
   ---------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   3.9  MENU CATEGORY PICKER ON PHONE/TABLET — dropdown, not a scroll row
   ----------------------------------------------------------------------------
   body.page-menu .menu-tabs (L5063) is a horizontal-scroll button row. On a
   narrow screen it never renders scrolled to its start — the tab a visitor
   actually wants can load off-screen with a partial label clipped at both
   edges, and finding the rest means a sideways swipe with no visible
   affordance that there's more to scroll to. That reads as broken, not as a
   feature, and is exactly what a native <select> avoids by construction:
   one visible option at a time, no scroll position to get wrong.

   assets/site.js builds a `.menu-cat-select` immediately after `#menuTabs`
   with the same categories, the same data/value keys, and the same
   scrollIntoView jump the tab buttons already use — this is a second control
   on the existing behavior, not a second implementation of it. Only one of
   the two is visible at a time, split by width below. Desktop keeps the tab
   row untouched: it has the horizontal space and nobody reported a problem
   with it there. */
.menu-cat-select { display: none; }

@media (max-width: 900px) {
  body.page-menu .menu-tabs { display: none; }

  body.page-menu .menu-cat-select {
    display: block;
    width: calc(100% - 48px);
    margin: 0 24px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 800;
    color: var(--ink, #32162b);
    background: #fff;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(255, 79, 139, 0.08);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332162b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px;
  }

  /* The tab row (113px, can wrap to 2 lines) is gone on this width; the
     select is one line, ~52px including the wrapper's own 10px top/bottom
     padding. .menu-tabs-wrap's sticky height shrinks with it, so the fixed
     header + sticky bar together reserve far less top space than before —
     L5068's scroll-margin-top must shrink to match, or a category jump now
     leaves a large gap instead of the original cut-off-heading problem. */
  body.page-menu .menu-cat {
    scroll-margin-top: calc(var(--header-h) + 64px);
  }
}


/* ----------------------------------------------------------------------------
   3.10  HOMEPAGE HERO — one CTA on phone/tablet, not two stacked buttons
   ----------------------------------------------------------------------------
   3.2 (L5552) already cut the hero row from four buttons to two on this
   width: Order pickup (btn-primary) and View menu & prices (btn-secondary).
   Two full-width 52px buttons plus the badge row above them still read as
   crowded on a phone, and Order is not lost by hiding it here — the sticky
   bar restored in 3.1 puts Order first, on every screen, the entire time
   the visitor is on the page, which is a stronger placement than a hero
   button that scrolls out of view. Keeping only View menu & prices in the
   hero gives the page a single clear first action instead of two competing
   ones. Desktop is untouched: at that width the sticky bar is hidden
   (3.1's 900px cutoff) and Order pickup is the row's only primary button. */
@media (max-width: 900px) {
  .hero-cta .btn-primary {
    display: none;
  }
}


/* ----------------------------------------------------------------------------
   3.11  FAN FAVORITES PHOTOS — fill the card, don't float in it
   ----------------------------------------------------------------------------
   `!important` is fought property-by-property, not rule-by-rule. L4652's
   `.featured-card .img-wrap { aspect-ratio: 1/1 !important; }` correctly
   beats L1816's un-important `height: 232px`, but L1816's `height` DECLARATION
   still wins — nothing with equal-or-higher priority ever overrides that one
   property. So the box is forced into an explicit 232px height (from 1816)
   at a forced 1:1 ratio (from 4652), which together fix its WIDTH at 232px
   too, regardless of how wide the card actually is. On a 338px-wide phone
   card that leaves ~106px of flat card background to the right of every
   photo — which reads as photos "cut off on the right," a section that
   feels oversized for four products, and, because the visual weight is
   wrong, a page that's slower to convince someone to scroll down and order.

   Fix: kill the stray height so aspect-ratio has only ONE dimension to
   resolve from — the card's actual width. Photo becomes a true full-bleed
   square at whatever size the card is, on every breakpoint this file has. */
.featured-card .img-wrap {
  height: auto !important;
}


/* ----------------------------------------------------------------------------
   3.12  SHIPPING BANNER — captures out-of-state intent, doesn't fake a checkout
   ----------------------------------------------------------------------------
   New section, new rule, no prior version to conflict with. Kept deliberately
   simple: a colored strip, not a full section-weight block, because its job
   is a single sentence and one CTA, read in the first few seconds after the
   hero — not to compete with Fan Favorites for attention. */
.ship-banner {
  background: linear-gradient(135deg, var(--cherry, #e10600) 0%, var(--cranberry, #b8005a) 100%);
  padding: 28px 24px;
}
.ship-banner-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ship-banner-eyebrow {
  display: block;
  color: rgba(255,255,255,0.82);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ship-banner-text h2 {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 6px;
}
.ship-banner-text p {
  color: rgba(255,255,255,0.92);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 520px;
  margin: 0;
}
.ship-banner-cta {
  background: #fff;
  color: var(--cherry, #e10600);
  white-space: nowrap;
  flex-shrink: 0;
}
.ship-banner-cta:hover {
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .ship-banner-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .ship-banner-text p {
    max-width: none;
  }
  .ship-banner-cta {
    width: 100%;
    text-align: center;
  }
}