/* ===== Loader skeleton blocks (shimmer) ===== */
.bb-skel {
  background: #e6e3e0;
  position: relative;
  overflow: hidden;
}
.bb-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: bbShimmer 1.4s infinite;
}
@keyframes bbShimmer {
  100% { transform: translateX(100%); }
}

@keyframes fadeInOnLoad {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-load {
  opacity: 0;
  animation: fadeInOnLoad 1s ease forwards;
}

/* ===== Stagger support for the existing fade-in-scroll system =====
   Wrap a group of .fade-in-scroll children in .stagger-group and they'll
   reveal in sequence rather than all at once. */
.stagger-group .fade-in-scroll:nth-child(1) { transition-delay: 0.05s; }
.stagger-group .fade-in-scroll:nth-child(2) { transition-delay: 0.13s; }
.stagger-group .fade-in-scroll:nth-child(3) { transition-delay: 0.21s; }
.stagger-group .fade-in-scroll:nth-child(4) { transition-delay: 0.29s; }
.stagger-group .fade-in-scroll:nth-child(5) { transition-delay: 0.37s; }
.stagger-group .fade-in-scroll:nth-child(6) { transition-delay: 0.45s; }
.stagger-group .fade-in-scroll:nth-child(7) { transition-delay: 0.53s; }
.stagger-group .fade-in-scroll:nth-child(8) { transition-delay: 0.61s; }
@media (prefers-reduced-motion: reduce) {
  .fade-in-scroll, .fade-in-scroll-two { opacity: 1; transform: none; transition: none; }
}
.hero-flower-wrap {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.hero-flower-corner {
  top: 110px;
  right: 60px;
  width: 130px;
}
.hero-flower-bottom {
  bottom: 40px;
  left: 50%;
  width: 110px;
}
.hero-flower { display: block; width: 100%; }

.fade-in-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-scroll-two{
    opacity: 0;
    transform: translateY(1px);
    transition: opacity 0.10s ease, transform 0.10s ease;
}
.fade-in-scroll-two.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants — same reveal-once behavior, different entry direction */
.fade-in-left {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-left.visible { opacity: 1; transform: translateX(0); }
.fade-in-right {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-right.visible { opacity: 1; transform: translateX(0); }
.fade-in-bottom {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-bottom.visible { opacity: 1; transform: translateY(0); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  /* Lock the site to light rendering. This site has no dark theme, but the
     browser can still impose one: UA-styled widgets (the chat input, buttons,
     scrollbars, form fields) flip to dark palettes when the OS is in dark
     mode, and Chrome on Android can auto-invert whole pages. Declaring
     color-scheme opts out of all of that, so what we designed is what ships. */
  color-scheme: light;      /* fallback: understood everywhere */
  color-scheme: light only; /* stronger: also blocks Chrome's forced auto-dark.
                               Kept as a second declaration because browsers
                               that don't parse `only` discard the whole line —
                               this way they still get plain `light` above. */

  --pink:   #E8527A;
  --pink-d: #C73A61;
  --yellow: #F5C842;
  --dark:   #160E12;
  --text:   #2A1E24;
  --muted:  #8A7278;
  --border: #EAD8DF;
  --cream:  #FFFFFF;
  --warm:   #F9F0EC;
  --purple: #9B7FE0;
  --purple-d: #7C5FC4;
  --pink-pastel: #FBD9E3;
  --offwhite-dark: #F0EFEC;
  --beige: #F3ECE0;
}

body { font-family: 'Roboto', sans-serif; background: var(--cream); color: var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Fredoka', sans-serif; }
a { text-decoration: none; color: inherit; }
button { font-family: 'Roboto', sans-serif; cursor: pointer; }

.ph { background: var(--warm); border: 1.5px dashed var(--border); display: flex; align-items: center; justify-content: center; }
.ph span { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pink); margin-bottom: 14px; }
.btn-fill { display: inline-block; background: var(--pink); color: white; border: 1.5px solid transparent; border-radius: 6px; padding: 13px 28px; font-size: 14px; font-weight: 600; line-height: 1.2; transition: background .15s, transform .15s, box-shadow .15s; cursor: pointer; }
.btn-big { padding: 20px 44px; font-size: 18px; border-radius: 10px; }
.btn-icon { display: inline-flex; align-items: center; gap: 10px; }
.btn-icon svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-fill:hover { background: var(--pink-d); transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(199,58,97,.35); }
.btn-outline { display: inline-block; background: transparent; color: var(--dark); border: 1.5px solid var(--border); border-radius: 6px; padding: 13px 28px; font-size: 14px; font-weight: 600; line-height: 1.2; transition: border-color .15s, transform .15s, background .15s; cursor: pointer; }
.btn-outline:hover { border-color: var(--dark); transform: translateY(-2px) scale(1.03); background: rgba(0,0,0,0.03); }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 14px 48px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
nav.scrolled { background: rgba(249,240,236,0.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); box-shadow: 0 2px 16px rgba(22,14,18,.06); }
.nav-logo { margin-right: 0; }
.nav-logo a { display: block; }
.nav-logo img { transition: filter .25s ease; }
.nav-right { display: flex; align-items: center; gap: 36px; }
.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--dark); transition: background .2s; }
nav.nav-on-dark:not(.scrolled) .nav-toggle span { background: white; }
.nav-links a { position: relative; font-size: 16px; font-weight: 700; color: var(--muted); transition: color .15s; text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
  transition: width .25s ease, left .25s ease;
}
.nav-links a:hover::after { width: 100%; left: 0; }
.nav-links a.active { color: var(--pink); text-decoration: underline; text-decoration-color: var(--pink); }
.nav-links a:hover { color: var(--dark); }
.nav-order { display: flex; align-items: center; gap: 8px; background: var(--pink); color: #fff !important; border: none; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 700; transition: background .15s, transform .15s, box-shadow .15s; }
.nav-order:hover { background: var(--pink-d); transform: scale(1.06); box-shadow: 0 6px 16px rgba(199,58,97,.35); }
.nav-order svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-cta { background: var(--pink); color: white; border: none; border-radius: 6px; padding: 9px 20px; font-size: 13px; font-weight: 700; transition: background .15s; }
.nav-cta:hover { background: var(--pink-d); }

.hero { position: relative; min-height: 100vh; overflow: hidden; }
.hero.hero-compact { min-height: 420px; }
.hero.hero-compact .hero-inner { justify-content: center; text-align: center; padding: 140px 40px 40px; }
.hero.hero-compact .hero-content { max-width: 700px; margin: 0 auto; }
.hero.hero-compact .hero-h1 { color: white; }
.hero-text-spotlight {
  display: inline-block;
  background: rgba(0,0,0,0.45);
  padding: 20px 40px;
  border-radius: 20px;
  backdrop-filter: blur(2px);
}
.btn-smooth { border-radius: 999px; box-shadow: 0 8px 24px rgba(199,58,97,.3); }
.order-cta { text-align: center; padding: 56px 20px 24px; }
.order-cta-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(36px, 4.6vw, 54px); color: var(--dark); margin-bottom: 24px; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Slideshow crossfade (homepage hero only — scoped to .hero-photo so this
   doesn't affect the plain autoplay-loop .hero-video used on other pages).
   Both slide layers are toggled purely via .is-active; whichever doesn't
   have it just fades to transparent underneath. */
.hero-video.hero-photo { opacity: 0; transition: opacity .9s ease; will-change: opacity; }
.hero-video.hero-photo.is-active { opacity: 1; }
/* Light scrim so the hero heading/rating stay readable over the video without
   flattening it into a dark backdrop. */
.hero-dark-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.32); pointer-events: none; }

.hero-slide-arrow {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  font-size: 26px; color: var(--dark);
  cursor: pointer; z-index: 30;
  transition: background .18s, color .18s, transform .18s;
}
.hero-slide-arrow:hover { background: var(--pink); color: #fff; transform: translateY(-50%) scale(1.06); }
.hero-slide-arrow-left { left: 24px; }
.hero-slide-arrow-right { right: 24px; }

.hero-slide-dots {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; gap: 9px; z-index: 30;
}
.hero-slide-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.55); cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.hero-slide-dot:hover { background: rgba(255,255,255,.8); }
.hero-slide-dot.is-active { background: var(--pink); width: 26px; border-radius: 5px; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.hero-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start; min-height: 100vh; text-align: left; padding: 150px 80px 48px 12%; }
.hero-content { max-width: 640px; }
.hero-h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(44px, 6vw, 82px); color: var(--dark); margin: 0 0 20px; line-height: 1.05; letter-spacing: -0.5px; }
.hero-sub { font-size: 18px; line-height: 1.7; color: var(--muted); margin-bottom: 32px; max-width: 440px; }
.hero-badges { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.hero-rating { display: flex; align-items: center; gap: 10px; }
.hero-stars { color: var(--yellow); font-size: 20px; letter-spacing: 2px; }
.hero-rating-num { font-size: 14px; font-weight: 700; color: var(--dark); }
.hero-badge-divider { width: 1px; height: 28px; background: var(--border); }
.hero-local { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Dark hero variant — used with the black-background hero video */
.hero.hero-dark { background-color: #0a0a0a; }
.hero.hero-dark .hero-h1 { color: #ffffff; }
.hero.hero-dark .hero-h1 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(56px, 8vw, 108px);
  line-height: 1.05;
  letter-spacing: 0;
}
.hero-heart { color: var(--pink); }
.hero-h1-accent { color: var(--pink); font-style: italic; }
.hero.hero-dark .hero-inner { justify-content: center; text-align: center; padding-left: 40px; padding-right: 40px; padding-top: 90px; padding-bottom: 140px; }
.hero.hero-dark .hero-content { margin: 0 auto; }
.hero.hero-dark .hero-sub { margin-left: auto; margin-right: auto; }
.hero.hero-dark .hero-btns { justify-content: center; }
.hero.hero-dark .hero-badges { justify-content: center; }
.hero.hero-dark .hero-sub { color: rgba(255,255,255,0.75); }
.hero.hero-dark .hero-rating-num { color: #ffffff; }
.hero.hero-dark .hero-local { color: rgba(255,255,255,0.75); }
.hero.hero-dark .hero-badge-divider { background: rgba(255,255,255,0.3); }
.hero.hero-dark .btn-outline { color: #ffffff; border-color: rgba(255,255,255,0.5); }
.hero.hero-dark .btn-outline:hover { border-color: #ffffff; }
/* Make sure nothing paints a box behind the hero text on the dark hero */
.hero.hero-dark .hero-h1,
.hero.hero-dark .hero-sub,
.hero.hero-dark .tag { background: transparent; }

/* Hero plays through once on load — no scroll-jacking, so the track is just
   a normal-height wrapper and the hero itself is a regular (non-sticky) section. */
.hero-scroll-track { position: relative; height: auto; z-index: 1; }
.hero.hero-sticky { position: relative; height: 100vh; min-height: 100vh; overflow: hidden; }
.hero.hero-sticky .hero-inner { min-height: 100%; height: 100%; }

#this-week.week-pink-zone { background: var(--offwhite-dark); position: relative; overflow: hidden; }
.week-pink-zone .this-week { padding-bottom: 50px; }
.week-zone-wave { display: block; width: 100%; height: 90px; position: relative; z-index: 1; margin-top: -1px; }
.this-week { position: relative; padding: 90px 80px 100px; max-width: 1500px; margin: 0 auto; }

/* Full-width single-column This Week layout: centered header, big carousel, centered footer */
.this-week-full { display: flex; flex-direction: column; align-items: center; }
.week-header-center { text-align: center; margin-bottom: 40px; }
.week-header-center .week-dates { margin-bottom: 0; }
.week-tagline { font-size: 20px; font-weight: 600; color: var(--dark); margin: 4px 0 20px; }
.week-features { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 24px; }
.week-feature { font-size: 14px; font-weight: 600; color: var(--muted); }
.this-week-full .flavor-carousel { width: 100%; }
.week-footer-center { text-align: center; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.week-footer-center .week-note { margin-top: 0; }

.this-week-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr;
  column-gap: 220px;
  align-items: center;
}
.week-col-left { display: flex; flex-direction: column; gap: 32px; position: relative; z-index: 2; }
.week-header {}
.week-left {
  margin-top: -40px;
}
.week-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.week-h2 { font-family: 'Caveat', cursive; font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.5px; color: var(--dark); margin-bottom: 8px; line-height: 1.1; }
.week-dates { display: inline-block; background: var(--warm); border: 1px solid var(--border); border-radius: 6px; padding: 7px 16px; font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 32px; }

/* ── This Week's Flavors: immersive full-bleed photo hero ── */
.week-redesign { width: 100%; max-width: 960px; margin: 0 auto; background: var(--cream); border-radius: 22px; overflow: hidden; box-shadow: 0 16px 36px rgba(22,14,18,0.10); }
.week-hero-split { display: grid; grid-template-columns: 1.6fr 1fr; position: relative; }
.week-hero-photo { position: relative; overflow: hidden; min-height: 320px; background: var(--offwhite-dark); }
.week-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease, transform .4s ease; }
.week-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22,14,18,0.75) 0%, rgba(22,14,18,0.4) 40%, rgba(22,14,18,0) 65%); }
.week-doodle { position: absolute; pointer-events: none; z-index: 1; }
.week-doodle-1 { top: 10%; right: 14%; width: 42px; height: 42px; }
.week-doodle-2 { top: 12%; right: 30%; width: 35px; height: 41px; }
.week-arrow {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  border: none;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(199,58,97,.35);
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.week-arrow:hover { background: var(--pink-d); transform: scale(1.08); }
.week-arrow-onphoto { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); z-index: 5; }
.week-arrow-onphoto:hover { transform: translateY(-50%) scale(1.08); }
/* Hidden on desktop — the seam arrow (.week-arrow-mid) handles "next" there.
   Shown on mobile instead, mirroring the "prev" arrow on the photo's other edge. */
.week-arrow-onphoto-right { display: none; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); z-index: 5; }
.week-arrow-onphoto-right:hover { transform: translateY(-50%) scale(1.08); }
.week-arrow-mid {
  position: absolute;
  top: 50%;
  left: 61.5%;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.week-arrow-mid:hover { transform: translate(-50%, -50%) scale(1.08); }
.week-hero-overlay { position: absolute; left: 27px; right: 27px; bottom: 24px; z-index: 2; color: #fff; transition: opacity .2s ease; }
.week-feature-badge {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(199,58,97,.3);
}
.week-feature-badge-alt { background: var(--dark); }
.week-feature-name { font-family: 'Fredoka', sans-serif; font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; color: #fff; margin-top: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.week-feature-desc { font-size: 12px; color: rgba(255,255,255,0.88); line-height: 1.5; margin-top: 6px; max-width: 240px; }
.week-feature-icons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.wfi { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; width: 50px; }
.wfi svg { width: 15px; height: 15px; color: var(--pink); }
.wfi span { font-size: 8px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.wfi-onphoto svg { color: #fff; }
.wfi-onphoto span { color: rgba(255,255,255,0.85); }

.week-side { text-align: left; background: var(--cream); padding: 34px 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.week-side-icon { width: 22px; height: 22px; margin-bottom: 6px; }
.week-heart { color: var(--pink); font-size: 0.75em; }
.week-side-btns { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.week-side-helper { font-size: 11px; color: var(--muted); margin-top: 10px; }
.week-side-name { transition: opacity .18s ease; }
.week-side-desc { transition: opacity .18s ease; }

/* Its own standalone heading now (not nested inside the card), so it reads
   as a real section title rather than default-styled text sitting on a card. */
.week-carousel-title {
  font-family: 'Caveat', cursive;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  color: var(--pink);
  text-align: center;
  margin: 0 auto 28px;
  max-width: 900px;
}
.week-thumb-strip { background: var(--offwhite-dark); padding: 16px 24px; }
.week-thumb-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.week-arrow-small { width: 28px; height: 28px; font-size: 14px; }
/* justify-content:center on a scrollable flex row splits the overflow across
   BOTH sides, pushing the first items to a negative offset. scrollLeft can't go
   below 0, so those items become permanently unreachable — that hid the first
   flavors of 9 on mobile. Auto margins on the end items center the row only
   while there's free space and collapse to 0 once it overflows, so every thumb
   stays scrollable. (Preferred over `safe center`, which some browsers still
   drop, and unlike a media query this self-corrects at any width.) */
.week-thumbs { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; flex: 1; min-width: 0; justify-content: flex-start; }
.week-thumbs > :first-child { margin-inline-start: auto; }
.week-thumbs > :last-child  { margin-inline-end: auto; }
.week-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 5px 12px rgba(22,14,18,0.08);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.week-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.week-thumb:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(22,14,18,0.14); }
.week-thumb.is-active { border-color: var(--pink); box-shadow: 0 10px 22px rgba(199,58,97,.28); }

.flavor-carousel {
  --card-size: 300px;
  --card-height: 560px;
  --card-spacing: 250px;
  position: relative;
  height: 760px;
  perspective: 2000px;
  display: flex;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.flavor-carousel.is-dragging { cursor: grabbing; }
.flavor-carousel img { -webkit-user-drag: none; }
  justify-content: center;
  overflow: hidden;
}
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-size);
  height: var(--card-height, var(--card-size));
  margin-top: calc(var(--card-height, var(--card-size)) / -2);
  margin-left: calc(var(--card-size) / -2);
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(199,58,97,.12);
  transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
  display: flex;
  flex-direction: column;
}
.ci-img { width: 100%; height: 52%; overflow: hidden; flex-shrink: 0; }
.ci-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ci-body { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.ci-name { font-family: 'Fredoka', sans-serif; font-size: 22px; font-weight: 600; color: var(--dark); }
.ci-name::after { content: ''; display: block; width: 40px; height: 3px; background: var(--pink); border-radius: 2px; margin-top: 8px; }
.ci-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }
.ci-order { margin-top: auto; }
.ci-order .btn-fill { width: 100%; padding: 12px; font-size: 14px; }
.ci-badge-featured { background: var(--pink); }
.ci-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 5;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(199,58,97,.3);
}
/* Selection is shown as a translucent darker-pink wash over the active card's
   photo, instead of scaling the whole card up — a gentler "this one's picked" cue. */
.ci-img { position: relative; }
.ci-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(199,58,97,0.32);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 2;
}
.carousel-item.is-active .ci-img::before { opacity: 1; }
.carousel-card-label { display: none; }
.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(199,58,97,.2);
  font-size: 28px;
  color: var(--pink);
  cursor: pointer;
  z-index: 200;
  transition: background .18s, color .18s;
}
.carousel-arrow:hover { background: var(--pink); color: #fff; }
.carousel-arrow-left { left: 12px; }
.carousel-arrow-right { right: 12px; }
.carousel-item.is-active {
  box-shadow: 0 20px 40px rgba(0,0,0,.14);
  cursor: default;
  z-index: 100;
}

.flavor-btn {
  background: none;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: color 0.5s;
}
.flavor-btn:hover { color: var(--pink); }
.flavor-btn.active { color: var(--pink); font-weight: 700; }

/* Carousel pagination dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: -80px;
  position: relative;
  z-index: 4;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: all .3s ease;
}
.carousel-dot.active {
  background: var(--pink);
  width: 24px;
  border-radius: 4px;
}
.cat-1 {position: absolute; z-index: 1; top: 100px; left: 100px; transform: rotate(15deg) scale(0.5)}
.cat-2 { position: absolute; z-index: 1; top: 50px; left: 150px; transform: rotate(-15deg) scale(0.5)}
.cat-3 { position: absolute; z-index: 1; top: 330px; left: 150px; transform: rotate(-15deg)  scale(0.5)}
.boba-1 {position: absolute; z-index: 1; top: 200px; left: 100px; transform: rotate(15deg) scale(0.5)}
.boba-2 {position: absolute; z-index: 1; top: 400px; left: 100px; transform: rotate(15deg) scale(0.5)}


.menu-section { background: var(--dark); padding: 88px 48px; }
.menu-inner { max-width: 1120px; margin: 0 auto; }
.menu-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }
.menu-h2 { font-size: clamp(32px, 3.2vw, 48px); font-weight: 800; letter-spacing: -0.5px; color: white; }
.menu-link { font-size: 13px; font-weight: 600; color: var(--pink); border-bottom: 1.5px solid var(--pink); padding-bottom: 2px; transition: opacity .15s; }
.menu-link:hover { opacity: 0.75; }
.menu-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.menu-card { border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: border-color .2s; }
.menu-card:hover { border-color: rgba(255,255,255,.18); }
.menu-card-img { width: 100%; height: 350px; object-fit: cover; display: block; }
.menu-card-body { padding: 24px 22px; }
.menu-card-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pink); margin-bottom: 8px; }
.menu-card-title { font-size: 20px; font-weight: 800; color: white; letter-spacing: -0.3px; margin-bottom: 10px; }
.menu-card-desc { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.65; }

.menu-grid-section { padding: 88px 48px; position: relative; overflow: hidden; }

.deco-icon {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.deco-icon.fade-in-scroll { transition: opacity 0.7s ease; opacity: 0; }
.deco-icon.fade-in-scroll.visible { opacity: 0.85; }
.deco-icon.deco-1 { top: 3%;  left: 2%;   width: 180px; transform: rotate(-12deg); }
.deco-icon.deco-2 { top: 10%; right: 4%;  width: 130px; transform: rotate(9deg); }
.deco-icon.deco-3 { top: 42%; left: -15%;   width: 150px; transform: rotate(6deg); }
.deco-icon.deco-4 { bottom: 6%; right: 2%; width: 190px; transform: rotate(-8deg); }
.deco-icon.deco-5 { top: 4%;  right: 10%; width: 120px; transform: rotate(14deg); }
.deco-icon.deco-6 { bottom: 4%; left: 3%;  width: 160px; transform: rotate(-15deg); }
.deco-icon.deco-7 { top: 50%; right: -15%; width: 130px; transform: rotate(5deg); }

/* Menu-page-only extra icons (deco-m1 to deco-m5) — used only in menu.html,
   filling gaps the shared deco-1..7 positions don't cover on that page. */
.deco-icon.deco-m1 { top: 28%; left: -8%;  width: 110px; transform: rotate(11deg); }
.deco-icon.deco-m2 { bottom: 30%; right: 8%; width: 100px; transform: rotate(-10deg); }
.deco-icon.deco-m3 { top: 22%; right: -10%; width: 140px; transform: rotate(-6deg); }
.deco-icon.deco-m4 { top: 18%; left: 10%;  width: 120px; transform: rotate(-13deg); }
.deco-icon.deco-m5 { bottom: -4%; left: 40%; width: 130px; transform: rotate(8deg); }

.menu-grid-section.is-white { background: #FFFFFF; }
.menu-grid-section.is-warm  { background: var(--warm); border-top: 1px solid var(--border); }
.menu-grid-head { max-width: 1120px; margin: 0 auto 40px; position: relative; z-index: 2; }
.menu-grid-h2 { font-family: 'Caveat', cursive; font-size: clamp(34px, 3.6vw, 50px); font-weight: 700; letter-spacing: -0.3px; color: var(--dark); }
.drink-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}
.drink-card { text-align: center; }
.drink-img-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--warm);
  margin-bottom: 12px;
}
.drink-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.drink-img-frame { transition: transform .25s ease, box-shadow .25s ease; }
.drink-card:hover .drink-img { transform: scale(1.08); }
.drink-card:hover .drink-img-frame { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(22,14,18,0.16); }
.drink-name { transition: color .2s ease; }
.drink-card:hover .drink-name { color: var(--pink); }
.drink-name { font-size: 14px; font-weight: 600; color: var(--text); }
.drink-price { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.drink-card.out-of-stock .drink-img-frame { opacity: 0.5; }
.drink-oos-tag { font-size: 11px; font-weight: 700; color: var(--pink); text-transform: uppercase; letter-spacing: 0.4px; }

nav.nav-on-dark:not(.scrolled) .nav-links a { color: rgba(255,255,255,.85); }
nav.nav-on-dark:not(.scrolled) .nav-links a:hover { color: white; }
nav.nav-on-dark:not(.scrolled) .nav-logo img { filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }

.hero-catering {
  background-image: linear-gradient(rgba(22,14,18,0.42), rgba(22,14,18,0.55)), url('cateringhero.jpg');
  background-size: cover;
  background-position: center;
}
.hero-catering .hero-sub { color: rgba(255,255,255,.85); max-width: 480px; margin: 0 auto; }
/* Catering hero scaled up ~1.5x — scoped to .hero-catering so it doesn't
   affect menu.html, which shares the base .hero-compact rules. */
.hero.hero-catering { min-height: 630px; }
.hero-catering .hero-h1 { font-size: clamp(56px, 7.4vw, 108px); }

/* Catering page content scaled up ~1.5x from the original sizing. */
.catering-desc {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 48px 20px;
  text-align: center;
  font-size: 22px;
  line-height: 1.7;
  color: var(--muted);
}

.catering-section-head { text-align: center; max-width: 1300px; margin: 0 auto 56px; position: relative; z-index: 2; }
.catering-section-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(52px, 6.6vw, 86px); color: var(--dark); line-height: 1.15; }
.catering-section-subtitle { font-size: 22px; font-weight: 600; color: var(--muted); margin-top: 10px; letter-spacing: 0.3px; }

.catering-photo-banner {
  max-width: 1300px;
  margin: 0 auto 56px;
  border-radius: 26px;
  overflow: hidden;
}
.catering-photo-banner img { width: 100%; height: 320px; object-fit: cover; display: block; }

.catering-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 68px;
  position: relative;
  z-index: 2;
}
.catering-col-head { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.catering-col-head img { width: 80px; height: 80px; object-fit: cover; border-radius: 16px; flex-shrink: 0; }
.catering-col-head h3 { font-family: 'Caveat', cursive; font-size: 42px; font-weight: 700; color: var(--dark); }

.catering-item { margin-bottom: 32px; }
.catering-item-name { font-size: 22px; font-weight: 700; color: var(--text); }
.catering-item-price { font-size: 19px; font-weight: 700; color: var(--pink); margin-left: 11px; }
.catering-item-detail { font-size: 18px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.catering-item ul { margin: 10px 0 0 28px; padding: 0; font-size: 18px; color: var(--muted); line-height: 1.7; }

.catering-note { font-size: 18px; color: var(--muted); line-height: 1.7; margin-top: 22px; }

.delivery-banner {
  max-width: 1300px;
  margin: 56px auto 0;
  background: var(--yellow);
  border-radius: 22px;
  padding: 28px 40px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 23px;
  color: var(--dark);
}

.catering-contact-cta {
  text-align: center;
  max-width: 980px;
  margin: 64px auto 0;
  padding: 68px 56px;
  background: var(--warm);
  border-radius: 32px;
}
.catering-contact-cta-top { margin-top: 44px; }
.catering-cta-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(44px, 5.4vw, 64px); color: var(--dark); margin-bottom: 18px; }
.catering-cta-desc { font-size: 21px; line-height: 1.7; color: var(--muted); margin-bottom: 10px; }
.catering-cta-phone { font-size: 22px; line-height: 1.6; color: var(--text); font-weight: 600; }
.catering-cta-phone a { color: var(--pink); font-weight: 800; font-size: 27px; }
.catering-cta-phone a.cta-email-link { font-size: 21px; }

.catering-flyer-section { max-width: 1300px; margin: 0 auto; padding: 40px 48px 0; text-align: center; }
.catering-flyer-head { margin-bottom: 44px; }
.catering-flyer-link {
  position: relative;
  display: block;
  max-width: 940px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(22,14,18,.14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.catering-flyer-link:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(22,14,18,.2); }
.catering-flyer-img { width: 100%; display: block; }
.catering-flyer-badge {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(199,58,97,.35);
}
.catering-flyer-badge svg { width: 17px; height: 17px; flex-shrink: 0; }

.tuesday { background: var(--yellow); padding: 72px 48px; }
.tuesday-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.tue-img { margin-left: auto; }
.tue-img-placeholder { width: 320px; height: 180px; border-radius: 16px; }

/* ── AWARDS & RECOGNITION ── */
.awards-section { background: #FBF6F1; border-top: 1px solid var(--border); padding: 160px 48px; min-height: 620px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.awards-head { text-align: center; margin-bottom: 56px; position: relative; z-index: 2; }
.awards-title { font-family: 'Caveat', cursive; font-size: clamp(46px, 5vw, 68px); font-weight: 700; color: var(--pink); }
.awards-sub { font-size: 18px; color: var(--muted); max-width: 540px; margin: 12px auto 0; line-height: 1.6; }

/* Grid (not flex-wrap) so the five items — cat, testimonial, badge, testimonial,
   cat — always stay on one row and scale proportionally with the available
   width instead of wrapping when they don't all fit at a fixed size. */
.awards-row {
  max-width: 1760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.35fr 2.2fr 1.35fr 0.8fr;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 2;
}
.awards-cat { display: flex; justify-content: center; align-items: center; position: relative; }
.awards-cat-ph { width: 100%; max-width: 230px; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.08)); }

.awards-badges { display: flex; justify-content: center; }
.award-item { width: 100%; max-width: 560px; aspect-ratio: 1 / 1; border-radius: 28px; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,0.13); display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; box-sizing: border-box; transition: transform .25s ease, box-shadow .25s ease; }
.award-item:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 52px rgba(0,0,0,0.19); }
.award-item-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.awards-testimonial {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: var(--pink-pastel);
  border-radius: 24px;
  padding: 36px 30px 30px;
  box-shadow: 0 16px 34px rgba(199,58,97,.14);
}
.awards-quote-icon { width: 40px; height: 30px; color: var(--pink); opacity: .55; margin-bottom: 12px; }
.awards-quote { font-size: 17px; line-height: 1.6; color: var(--dark); font-style: italic; }
.awards-reviewer { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.awards-reviewer-name { font-weight: 700; color: var(--pink-d); font-size: 15px; }
.awards-stars { color: var(--pink); letter-spacing: 2px; font-size: 14px; }

/* ── PROMOS & SPECIALS: "Today's pick" card-stack carousel ──
   Premium/editorial, not bubbly — warm beige bg, white cards, soft depth. ── */
.promo-carousel-section { background: var(--beige); padding: 150px 48px; overflow: hidden; }
/* Both tracks are fr-based (not a fixed minmax(240px,420px)) so they actually
   shrink together at mid-range widths — a plain minmax(240px,420px) grabs its
   max every time and starves the stack+arrows column instead of sharing. */
.promo-carousel-inner { max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.5fr); gap: 48px; align-items: center; }

.promo-carousel-copy .tag { display: inline-block; }
.promo-carousel-title { font-family: 'Caveat', cursive; font-size: clamp(46px, 4.8vw, 66px); font-weight: 700; line-height: 1.15; color: var(--dark); margin-top: 10px; }
.promo-carousel-sub { font-size: 19px; color: var(--muted); margin-top: 18px; max-width: 340px; }
.promo-carousel-dots { display: flex; gap: 9px; margin-top: 40px; }
.promo-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: #D8CFC0; cursor: pointer; transition: background .2s ease, width .2s ease; }
.promo-dot.is-active { background: var(--pink); width: 24px; border-radius: 5px; }

/* The back cards peek out to the lower-right of the active card (see
   .promo-card-back-2's translate) by up to ~60px — the gap on that side
   needs to clear that or the "next" arrow visually collides with it. */
.promo-stack-wrap { display: flex; align-items: center; justify-content: center; gap: 28px; min-width: 0; }
.promo-stack-arrow-right { margin-left: 44px; }
.promo-stack-arrow {
  width: 60px; height: 60px; border-radius: 50%; background: #fff; border: none;
  box-shadow: 0 10px 26px rgba(60,40,20,.12); display: flex; align-items: center;
  justify-content: center; font-size: 24px; color: var(--dark); cursor: pointer;
  flex-shrink: 0; transition: transform .15s ease, box-shadow .15s ease;
}
.promo-stack-arrow:hover { transform: scale(1.08); box-shadow: 0 14px 32px rgba(60,40,20,.18); }

/* Width shrinks to fit the available flex space (arrows are flex-shrink:0 so
   the stack absorbs the squeeze first) — height stays fixed rather than
   scaling with width, since the card holds real text content that would
   otherwise get clipped by .promo-card's overflow:hidden at narrower widths. */
.promo-stack { position: relative; width: 100%; max-width: 460px; height: 620px; flex-shrink: 1; min-width: 0; }
.promo-card {
  position: absolute; inset: 0; border-radius: 32px; background: #fff; overflow: hidden; box-shadow: 0 26px 60px rgba(60,40,20,.18);
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease, filter .45s ease, z-index 0s .1s;
}
.promo-card-back { pointer-events: none; }
.promo-card-back .promo-card-body { display: none; }
.promo-card-back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card-back-1 { transform: translate(9%, 7%) scale(.95); opacity: .75; filter: blur(1px); z-index: 1; }
.promo-card-back-2 { transform: translate(17%, 13%) scale(.9); opacity: .5; filter: blur(2px); z-index: 0; }
.promo-card-active { transform: translate(0, 0) scale(1); opacity: 1; filter: none; z-index: 2; }
.promo-card-photo { height: 52%; }
.promo-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card-body { padding: 22px 26px 28px; }
.promo-card-pill { display: inline-block; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; }
.promo-card-title { font-family: 'Fredoka', sans-serif; font-size: 25px; font-weight: 700; color: var(--dark); margin-top: 14px; line-height: 1.25; }
.promo-card-desc { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.55; }
.promo-card-arrow-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-top: 20px;
  font-size: 17px; box-shadow: 0 8px 20px rgba(199,58,97,.3);
  transition: background .15s ease, transform .15s ease;
}
.promo-card-arrow-btn:hover { background: var(--pink-d); transform: scale(1.08); }

/* ── INSTAGRAM: polaroid / scrapbook style ── */
.ig-section { background: var(--warm); padding: 140px 48px; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.ig-head { text-align: center; margin-bottom: 72px; position: relative; z-index: 2; }
.ig-title { font-family: 'Caveat', cursive; font-size: clamp(48px, 6vw, 72px); font-weight: 700; color: var(--dark); }
.ig-handle { display: inline-block; margin-top: 10px; font-size: 20px; font-weight: 700; color: var(--pink); }
.ig-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; position: relative; z-index: 2; align-items: start; }
.ig-post {
  background: #fff;
  padding: 22px 22px 64px;
  border-radius: 6px;
  box-shadow: 0 20px 44px rgba(22,14,18,0.18);
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* First and third lean inward toward the center card, like a fanned stack of photos */
.ig-post-1 { transform: rotate(5deg); }
.ig-post-2 { transform: rotate(0deg); margin-top: 28px; }
.ig-post-3 { transform: rotate(-5deg); }
.ig-post:hover { transform: rotate(0deg) translateY(-8px) scale(1.05); box-shadow: 0 28px 56px rgba(22,14,18,0.24); z-index: 5; }
.ig-post-tape {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 84px;
  height: 30px;
  background: rgba(232,82,122,0.35);
  border: 1px solid rgba(232,82,122,0.15);
}
.ig-post-photo { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #000; }
.ig-post-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-post-caption { font-family: 'Caveat', cursive; font-size: 30px; font-weight: 700; color: var(--text); text-align: center; margin-top: 14px; }
.ig-followers { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 10px; }
.ig-stat { display: flex; flex-direction: column; align-items: center; }
.ig-stat-divider { width: 1px; height: 46px; background: var(--border); }
.ig-followers .ig-follower-num { font-size: clamp(46px, 6vw, 64px); font-weight: 800; color: var(--dark); display: block; line-height: 1; }
.ig-stat-label { font-size: 16px; font-weight: 700; color: var(--pink); margin-top: 6px; }
.ig-cta { text-align: center; margin-top: 72px; position: relative; z-index: 2; }
.ig-follow-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-size: 17px; margin-top: 20px; }
.ig-follow-btn svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ── VISIT PAGE (professional/editorial redesign — restrained pink, no
   mascots). Headings use the same sitewide font as body text instead of a
   second display font, so the whole page reads as one consistent typeface. ── */
.vu-h1 { font-family: 'Caveat', cursive; font-size: clamp(56px, 7vw, 96px); font-weight: 700; color: var(--dark); line-height: 1.05; }
.vu-h2 { font-family: 'Caveat', cursive; font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; color: var(--dark); }

.vu-hero { max-width: 1400px; margin: 0 auto; padding: 156px 48px 80px; }
.vu-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vu-hero-sub { font-size: 18px; line-height: 1.7; color: var(--muted); margin-top: 20px; max-width: 440px; }
.vu-hero-photo img { width: 100%; height: 480px; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px rgba(22,14,18,.14); display: block; }

.vu-shop-section { max-width: 1400px; margin: 0 auto; padding: 0 48px 100px; }
.vu-shop-card { background: #fff; border-radius: 28px; box-shadow: 0 20px 50px rgba(22,14,18,.08); display: grid; grid-template-columns: 1fr 1.2fr; overflow: hidden; }
.vu-shop-details { padding: 56px; }
.vu-address { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 14px 0 24px; }
.vu-directions-btn { display: inline-block; }
.vu-hours { margin-top: 36px; border-top: 1px solid var(--border); padding-top: 24px; }
.vu-hours-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pink); margin-bottom: 14px; }
.vu-hours-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--dark); padding: 8px 0; border-bottom: 1px solid var(--border); }
.vu-hours-row:last-child { border-bottom: none; }
.vu-shop-map { position: relative; min-height: 420px; }
.vu-shop-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vu-markets-section { max-width: 1800px; margin: 0 auto; padding: 20px 48px 170px; text-align: center; }
.vu-markets-head { margin-bottom: 72px; }
.vu-markets-sub { font-size: 16px; color: var(--muted); margin-top: 10px; }
/* minmax(0,1fr) lets each column shrink below the photo stack's natural size
   instead of overflowing on narrower desktop widths. */
/* Single centered column — was a 2-col grid when we listed two markets; with one
   it would sit in the left half against an empty right half. 820px keeps the
   block the same visual width one column used to have, so .vu-photo-stack still
   renders at its 780px cap and the section looks unchanged apart from centering. */
.vu-markets-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 64px; max-width: 820px; margin: 0 auto; }
.vu-market-block { text-align: center; }

/* Width is a percentage of the market-block's own column (not the viewport),
   so it can never exceed its track and collide with the other column no
   matter how wide the ceiling is — height just follows via aspect-ratio. */
.vu-photo-stack { position: relative; width: clamp(260px, 96%, 780px); aspect-ratio: 230 / 300; margin: 0 auto 48px; }
.vu-stack-item { position: absolute; width: 64%; height: 68%; background: #fff; padding: 3.5%; border-radius: 3px; box-shadow: 0 24px 48px rgba(22,14,18,.2); }
.vu-stack-item video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; }
.vu-stack-item-1 { left: 0; top: 2%; transform: rotate(-6deg); z-index: 1; }
.vu-stack-item-2 { left: 34%; top: 14%; transform: rotate(5deg); z-index: 2; }
.vu-tape { position: absolute; top: -4%; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 24%; height: 8%; background: rgba(214,192,160,.85); box-shadow: 0 2px 5px rgba(0,0,0,.12); }

.vu-market-name { font-family: 'Fredoka', sans-serif; font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; color: var(--dark); }
.vu-market-addr { font-size: clamp(18px, 1.9vw, 23px); color: var(--muted); line-height: 1.6; margin-top: 14px; }
.vu-market-divider { width: 84px; height: 4px; background: var(--pink); margin: 34px auto; }
.vu-market-hours-label { font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pink); margin-bottom: 12px; }
.vu-market-hours div { font-size: clamp(18px, 1.9vw, 23px); color: var(--dark); line-height: 1.8; }
/* Separates the second day/time pair so the two schedules don't read as one
   run-on list of four lines. */
.vu-market-hours .vu-market-hours-next { margin-top: 16px; }
.tue-price { font-size: clamp(80px, 9vw, 128px); font-weight: 600; color: var(--dark); line-height: 1; letter-spacing: -1px; flex-shrink: 0; font-family: 'Roboto', sans-serif; }
.tue-line { width: 1px; height: 90px; background: rgba(22,14,18,.15); flex-shrink: 0; }
.tue-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(22,14,18,.45); margin-bottom: 10px; }
.tue-headline { font-size: clamp(22px, 2.8vw, 36px); font-weight: 600; color: var(--dark); letter-spacing: -0.3px; line-height: 1.2; margin-bottom: 10px; font-family: 'Roboto', sans-serif; }
.tue-sub { font-size: 14px; color: rgba(22,14,18,.5); font-weight: 400; }

.about-section { padding: 88px 48px; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-img { width: 100%; height: 520px; object-fit: cover; border-radius: 16px; display: block; }
.about-h2 { font-family: 'Caveat', cursive; font-size: clamp(36px, 4vw, 54px); font-weight: 700; letter-spacing: -0.3px; color: var(--dark); margin-bottom: 20px; }
.about-p { font-size: 16px; line-height: 1.8; color: var(--muted); margin-bottom: 16px; }
.about-quote { padding: 20px 24px; border-left: 3px solid var(--pink); background: var(--warm); border-radius: 0 8px 8px 0; }
.about-quote p { font-size: 15px; font-weight: 500; font-style: italic; color: var(--dark); line-height: 1.6; margin-bottom: 10px; }
.about-quote span { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pink); }


.visit { background: var(--warm); border-top: 1px solid var(--border); padding: 88px 48px; }
.visit-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.visit-h2 { font-size: clamp(28px, 2.8vw, 42px); font-weight: 800; letter-spacing: -0.3px; color: var(--dark); margin-bottom: 40px; }
.visit-rows { display: flex; flex-direction: column; gap: 28px; }
.vr-key { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vr-val { font-size: 15px; font-weight: 600; color: var(--dark); line-height: 1.55; }
.vr-val a { transition: color .15s; }
.vr-val a:hover { color: var(--pink); }
.visit-btns { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.visit-map { width: 100%; height: 380px; border-radius: 12px; border: none; display: block; }

footer { background: var(--dark); padding: 56px 48px 32px; }
.footer-inner { max-width: 1120px; margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 44px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.07); }
.f-logo { font-size: 15px; font-weight: 800; color: white; margin-bottom: 8px; }
.f-logo span { color: var(--pink); }
.f-sub { font-size: 13px; color: rgba(255,255,255,.28); line-height: 1.6; max-width: 200px; }
.f-col-head { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.22); margin-bottom: 16px; }
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.f-col ul a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.38); transition: color .15s; }
.f-col ul a:hover { color: white; }
.f-col-text { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); line-height: 1.8; }
.f-col-text a { color: rgba(255,255,255,.55); transition: color .15s; }
.f-col-text a:hover { color: white; }
.footer-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.f-copy { font-size: 12px; color: rgba(255,255,255,.18); }
.f-ig { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.28); transition: color .15s; }
.f-ig:hover { color: var(--pink); }

/* translateY(0) is flush with the canvas box's own bottom edge, but that
   still left a visible gap under the head on desktop — same category of
   issue as the mobile browser-chrome gap, just from the canvas art itself
   having empty headroom rather than filling all the way to its edge. Nudge
   the resting peek down to close it, same pattern as mobile's fix. */
@keyframes _peep-bob  { 0%,100%{transform:translateY(40px)} 50%{transform:translateY(32px)} }
@keyframes _spring-up-desk {
  0%{transform:translateY(40px)} 52%{transform:translateY(-22px)}
  68%{transform:translateY(10px)} 82%{transform:translateY(-8px)}
  91%{transform:translateY(3px)}  100%{transform:translateY(0)}
}
@keyframes _meow-blink {
  0%,45%  { opacity:0; transform:translateY(4px) rotate(var(--meow-tilt, 10deg)); }
  55%,88% { opacity:1; transform:translateY(0)    rotate(var(--meow-tilt, 10deg)); }
  100%    { opacity:0; transform:translateY(4px) rotate(var(--meow-tilt, 10deg)); }
}
@keyframes _chat-in  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes _msg-in   { from{opacity:0;transform:translateY(6px)}  to{opacity:1;transform:translateY(0)} }
@keyframes _dot-pulse{ 0%,80%,100%{opacity:.2;transform:scale(1)} 40%{opacity:1;transform:scale(1.2)} }

#bb-widget { position:fixed; bottom:0; right:24px; z-index:9999; width:340px; }

#bb-cat-wrap { transform:translateY(40px); transform-origin:bottom center; }
.bb-s-peep   #bb-cat-wrap { animation:_peep-bob 2.6s ease-in-out infinite; transform:translateY(40px); }
.bb-s-spring #bb-cat-wrap { animation:_spring-up-desk 0.85s cubic-bezier(0.22,1,0.36,1) forwards; }
.bb-s-idle   #bb-cat-wrap { transform:translateY(0); }
.bb-s-sleep  #bb-cat-wrap { transform:translateY(0); }

#bb-cat-stage { position:relative; width:340px; margin-left:auto; cursor:pointer; overflow:visible; }
.bb-meow-bubble { position: absolute; opacity: 0; pointer-events: none; font-weight: 700; }
#bb-meow-bubble-l { top: 228px; left: 6px;   --meow-tilt: -10deg; }
#bb-meow-bubble-r { top: 228px; left: 246px; --meow-tilt: 10deg; }
.bb-s-peep #bb-meow-bubble-l { animation: _meow-blink 2.4s ease-in-out infinite; }
.bb-s-peep #bb-meow-bubble-r { animation: _meow-blink 2.4s ease-in-out infinite; animation-delay: 1.2s; }
#bb-rive { display:block; width:340px; height:340px; cursor:pointer; background:transparent !important; pointer-events: none; }
#bb-cat-hitzone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  cursor: pointer;
  z-index: 2;
}

#bb-chat {
  position:absolute; bottom: 300px; right:0; width:340px;
  background:#FEFCF8; border-radius:20px;
  border:1.5px solid #EAD8DF;
  box-shadow:0 8px 40px rgba(26,16,20,.13);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Roboto',system-ui,sans-serif;
  max-height:700px; opacity:0; pointer-events:none;
  transition:max-height .4s ease, opacity .3s ease;
}
#bb-chat.open { max-height:700px; opacity:1; pointer-events:all; animation:_chat-in .3s ease; }

#bb-header {
  background: linear-gradient(135deg, #F4789A 0%, #E8527A 40%, #C73A61 100%);
  padding:14px 18px; display:flex; align-items:center;
  justify-content:space-between; flex-shrink:0;
  box-shadow: 0 2px 12px rgba(199,58,97,.25);
}
.bb-header-left { display:flex; align-items:center; gap:10px; }
.bb-header-avatar {
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0; overflow:hidden;
}
.bb-name   { font-size:15px; font-weight:700; color:white; }
.bb-status { font-size:11px; color:rgba(255,255,255,.75); font-weight:600; margin-top:2px; }
#bb-close  { background:rgba(255,255,255,.2); border:none; border-radius:50%; width:28px; height:28px; color:white; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#bb-close:hover { background:rgba(255,255,255,.35); }

#bb-msgs {height: 340px; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#FEFCF8; flex-shrink:1; }
.bb-row { display:flex; align-items:flex-end; gap:7px; }
.bb-row.usr { justify-content:flex-end; }
.bb-avatar {
  width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg,#F9EEF1,#F2D5DC);
  border: 1.5px solid #EAD8DF;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0; margin-bottom:2px;
}
.bb-bubble { max-width:82%; padding:10px 14px; font-size:13px; font-weight:500; line-height:1.55; animation:_msg-in .22s ease; }
.bb-bubble.bot { background:white; border:1.5px solid #EAD8DF; border-radius:16px 16px 16px 4px; color:#1C1412; }
.bb-bubble.usr { background:linear-gradient(135deg,#E8527A,#C73A61); border-radius:16px 16px 4px 16px; color:white; }
.bb-dots { display:flex; gap:4px; align-items:center; padding:10px 16px; background:white; border:1.5px solid #EAD8DF; border-radius:16px 16px 16px 4px; }
.bb-dots span { width:6px; height:6px; border-radius:50%; background:#e8a0ae; }
.bb-dots span:nth-child(1){animation:_dot-pulse 1.2s ease-in-out 0.0s infinite}
.bb-dots span:nth-child(2){animation:_dot-pulse 1.2s ease-in-out 0.2s infinite}
.bb-dots span:nth-child(3){animation:_dot-pulse 1.2s ease-in-out 0.4s infinite}

#bb-chips { padding:8px 14px 4px; display:flex; gap:6px; flex-wrap:wrap; background:white; flex-shrink:0; }
.bb-chip { background:#F9EEF1; border:1.5px solid #EAD8DF; border-radius:999px; padding:5px 13px; font-size:11px; font-weight:600; cursor:pointer; color:#E8527A; font-family:inherit; transition:background .15s; }
.bb-chip:hover { background:#f2d5dc; }

#bb-input-row { padding:10px 14px 14px; display:flex; gap:8px; background:white; flex-shrink:0; }
#bb-input { flex:1; border:1.5px solid #EAD8DF; border-radius:999px; padding:9px 16px; font-family:inherit; font-size:13px; background:#FEFCF8; color:#1C1412; outline:none; transition:border-color .2s, box-shadow .2s; }
#bb-input:focus { border-color:#E8527A; box-shadow:0 0 0 3px rgba(232,82,122,.14); }
#bb-send { background:#E8527A; border:none; border-radius:999px; padding:9px 18px; color:white; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .18s; }
#bb-send:hover    { background:#C73A61; }
#bb-send:disabled { background:#e8a0ae; cursor:not-allowed; }

@media (max-width: 768px) {
  /* Mobile decorative icons: instead of hiding everything, show a small,
     hand-picked subset per page at mobile-appropriate size and position.
     Uses the pg-home / pg-menu / pg-catering wrapper class (added alongside
     deco-icon in the HTML) so the three pages don't fight over shared deco-N rules. */
  /* All decorative icons are hidden on mobile — the icon PNGs aren't transparent,
     so at mobile size they render as white boxes over the content. Hidden here
     with !important so nothing can re-enable them. They still show on desktop. */
  .deco-icon,
  .pg-home.deco-icon,
  .pg-menu.deco-icon,
  .pg-catering.deco-icon { display: none !important; }

  nav { padding: 0 16px; height: 56px; flex-direction: row; justify-content: space-between; gap: 0; }
  .nav-logo img { height: 34px !important; }

  /* Hamburger that morphs into an X when the drawer is open */
  .nav-toggle { display: flex; position: relative; width: 24px; height: 18px; padding: 0; }
  .nav-toggle span {
    position: absolute; left: 0; width: 24px; height: 2px;
    transition: transform .3s ease, opacity .2s ease, top .3s ease;
  }
  .nav-toggle span:nth-child(1) { top: 0; }
  .nav-toggle span:nth-child(2) { top: 8px; }
  .nav-toggle span:nth-child(3) { top: 16px; }
  .nav-toggle.active span:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

  /* nav establishes its own stacking context (position:fixed + z-index), so
     .nav-links' z-index:200 is only compared *inside* nav — against other
     top-level elements like .nav-backdrop, what matters is nav's own z-index.
     Raise it above the backdrop (199) so the drawer inside it stays clickable
     instead of the backdrop rendering on top of the whole nav. */
  nav { z-index: 201; }

  /* Dimmed backdrop behind the sliding drawer */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(22,14,18,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
  }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }
  body.nav-open-lock { overflow: hidden; }

  /* Slide-in drawer — takes 85% of the viewport width, slides from the right */
  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 85%;
    max-width: 360px;
    flex-direction: column;
    gap: 0;
    background: rgba(254,249,246,0.99);
    backdrop-filter: blur(14px);
    box-shadow: -12px 0 40px rgba(22,14,18,.18);
    padding: 100px 0 24px;
    margin: 0;
    overflow-y: auto;
    z-index: 200;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.32,.72,0,1);
  }
  .nav-links.mobile-open {
    transform: translateX(0);
  }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 16px 28px; font-size: 17px; color: var(--muted) !important; }
  .nav-links a.active { color: var(--pink) !important; }
  .nav-cta { padding: 8px 14px; font-size: 12px; }
  .nav-right { gap: 10px; }
  .nav-order { padding: 8px 14px; font-size: 12px; }
  .nav-order span { display: none; }

  .hero { min-height: 48vh; }
  .hero-inner { padding: 52px 20px 20px; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
  .hero.hero-dark .hero-inner { padding-top: 52px; padding-bottom: 20px; }
  .hero-photo { object-position: 25% center; }
  .hero-slide-arrow { width: 38px; height: 38px; font-size: 20px; }
  .hero-slide-arrow-left { left: 10px; }
  .hero-slide-arrow-right { right: 10px; }
  .hero-slide-dots { bottom: 14px; }
  .hero-content { max-width: 88%; }
  .hero-content .tag { margin-bottom: 6px; }
  .hero-h1 { font-size: clamp(30px, 9vw, 42px); margin-bottom: 10px; line-height: 1.02; }
  .hero.hero-dark .hero-h1 { font-size: clamp(38px, 13vw, 58px); }
  .hero-btns { justify-content: center; }
  .hero-badges { margin-top: 14px; }
  .hero-sub { display: none; }
  .tag { font-size: 10px; }
  .btn-big { padding: 12px 24px; font-size: 14px; border-radius: 8px; }
  .hero.hero-compact { min-height: 320px; }
  .hero.hero-compact .hero-inner { padding: 100px 20px 24px; }
  .hero-flower-corner { width: 80px; top: 70px; right: 20px; }
  .hero-flower-bottom { width: 70px; bottom: 24px; }

  .this-week { padding: 56px 20px; }
  .week-pink-zone .this-week { padding-bottom: 36px; }
  .week-zone-wave { height: 50px; }
  .this-week-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .week-col-left { display: contents; }
  .week-header { order: 1; position: relative; z-index: 2; }
  .week-right { order: 2; }
  .week-left { order: 3; align-self: auto; margin-top: 0; }
  .flavors-grid { display: none; }
  .week-features { display: none; }
  .flavor-carousel {
    --card-size: 260px;
    --card-height: 450px;
    --card-spacing: 215px;
    height: 540px;
    justify-content: center;
    overflow: hidden;
  }
  .carousel-dots { margin-top: -28px; }

  .week-redesign { border-radius: 20px; }
  /* Flatten week-hero-split so photo, thumb strip, and side panel become siblings —
     lets us reorder the thumb strip to sit right after the photo instead of at
     the very bottom, where it was easy to miss. */
  .week-redesign { display: flex; flex-direction: column; }
  .week-hero-split { display: contents; }
  .week-hero-photo { order: 1; min-height: 380px; }
  .week-thumb-strip { order: 2; }
  .week-side { order: 3; }
  .week-hero-overlay { left: 20px; right: 20px; bottom: 20px; }
  .week-feature-icons { gap: 14px; }
  .week-side { text-align: center; align-items: center; padding: 36px 24px; }
  .week-side-btns { justify-content: center; }
  /* The mid-seam arrow only makes sense between two side-by-side columns; on mobile
     we show a dedicated "next" arrow on the photo's right edge instead. */
  .week-arrow-mid { display: none; }
  .week-arrow-onphoto,
  .week-arrow-onphoto-right { width: 34px; height: 34px; font-size: 16px; }
  .week-arrow-onphoto { left: 10px; }
  .week-arrow-onphoto-right { display: flex; right: 10px; }
  .week-thumb-strip { padding: 16px 20px; }
  .week-thumb { width: 64px; height: 64px; }
  .ci-desc { font-size: 15px; }
  .ci-name { font-size: 22px; }
  .carousel-card-label {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 12px;
    background: linear-gradient(to top, rgba(22,14,18,.78), transparent);
    color: white;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
  }
  .carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 8px 20px rgba(22,14,18,.18);
    font-size: 24px;
    color: var(--pink);
    cursor: pointer;
    z-index: 200;
  }
  .carousel-arrow-left { left: 4px; }
  .carousel-arrow-right { right: 4px; }
  .carousel-item.is-active { box-shadow: 0 16px 32px rgba(199,58,97,.18); }

  /* ── Hero on mobile: normal 100vh section, video autoplays (no scrub/pin) ──
     100dvh (dynamic viewport height) tracks the browser chrome collapsing/expanding
     on scroll — plain 100vh leaves a black gap below the video once the address
     bar hides, because the section was sized for the shorter initial viewport. */
  .hero.hero-sticky { position: relative; height: 100vh; height: 100dvh; }
  /* Oversize the video a few % beyond the section box (instead of an exact
     inset:0 match) so any leftover mobile viewport-height rounding/dvh support
     gap can't expose the black section background underneath — it just crops
     a sliver more of the video instead. */
  .hero-video.hero-photo {
    top: -3%;
    bottom: -3%;
    left: 0;
    right: 0;
    width: 100%;
    height: 106%;
    object-fit: cover;
    object-position: center center;
  }

  /* ── Promo card-stack carousel: copy centered on top, stack below.
     Arrows move on top of the card (like the This Week photo arrows
     elsewhere on the site) instead of sitting beside it, so the stack
     itself can use almost the full width instead of being squeezed. ── */
  .promo-carousel-section { padding: 64px 20px; }
  .promo-carousel-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .promo-carousel-sub { margin-left: auto; margin-right: auto; }
  .promo-carousel-dots { justify-content: center; }
  .promo-stack-wrap { position: relative; padding-right: 0; gap: 0; margin: 0 auto; width: 100%; max-width: 320px; }
  .promo-stack { width: 100%; max-width: 320px; height: 440px; margin: 0 auto; }
  .promo-stack-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; font-size: 18px; }
  .promo-stack-arrow:hover { transform: translateY(-50%) scale(1.08); }
  .promo-stack-arrow-left { left: 6px; }
  .promo-stack-arrow-right { right: 6px; margin-left: 0; }
  .promo-card-body { padding: 18px 20px 22px; }
  .promo-card-title { font-size: 21px; }
  .promo-card-desc { font-size: 14px; }

  /* ── Awards: stack vertically, badge centered (grid becomes a single column) ── */
  .awards-section { padding: 72px 20px; }
  .awards-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .awards-cat-ph { width: 90px; max-width: none; height: 90px; }
  .award-item { width: min(280px, 78vw); max-width: none; }
  .awards-testimonial { width: 100%; max-width: 320px; }

  /* ── Instagram: stack posts, keep them tappable ── */
  .ig-section { padding: 48px 20px; }
  .ig-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .ig-post-1, .ig-post-2, .ig-post-3 { transform: rotate(-2deg); margin-top: 0; }
  .ig-post:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); }
  .ig-post-caption { font-size: 18px; }

  .menu-section { padding: 56px 20px; }
  .menu-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .menu-cards { grid-template-columns: 1fr; gap: 16px; }
  .menu-grid-section { padding: 56px 20px; }
  .drink-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* ── Catering: scale everything down for mobile, still ~1.5x the original mobile sizing ── */
  .catering-grid { grid-template-columns: 1fr; gap: 28px; }
  .catering-section-head { margin: 0 auto 40px; }
  .catering-section-title { font-size: 54px; line-height: 1.05; }
  .catering-section-subtitle { font-size: 19px; margin-top: 8px; }
  .catering-col-head { gap: 17px; margin-bottom: 22px; }
  .catering-col-head h3 { font-size: 37px; }
  .catering-col-head img { width: 64px; height: 64px; border-radius: 14px; }
  .catering-item { margin-bottom: 25px; }
  .catering-item-name { font-size: 20px; }
  .catering-item-price { font-size: 17px; margin-left: 7px; }
  .catering-item-detail { font-size: 16px; margin-top: 3px; }
  .catering-item ul { font-size: 16px; margin: 8px 0 0 22px; line-height: 1.6; }
  .catering-note { font-size: 16px; margin-top: 16px; line-height: 1.6; }
  .catering-desc { font-size: 19px; padding: 50px 24px 22px; }
  .delivery-banner { font-size: 21px; padding: 22px 26px; margin-top: 44px; }
  .catering-photo-banner img { height: 220px; }
  .catering-photo-banner { border-radius: 18px; margin-bottom: 32px; }
  .catering-contact-cta { padding: 44px 26px; margin-top: 56px; border-radius: 26px; }
  .catering-cta-title { font-size: 35px; margin-bottom: 16px; }
  .catering-cta-desc { font-size: 19px; }
  .catering-cta-phone { font-size: 21px; }
  .catering-cta-phone a { font-size: 25px; }
  .catering-cta-phone a.cta-email-link { font-size: 18px; }
  .hero-catering .hero-h1 { font-size: clamp(33px, 9vw, 44px); }
  .hero.hero-catering { min-height: 440px; }
  .catering-flyer-section { padding: 28px 20px 0; }
  .catering-flyer-head { margin-bottom: 28px; }
  .catering-flyer-link { border-radius: 16px; }
  .catering-flyer-badge { right: 12px; bottom: 12px; font-size: 12px; padding: 8px 14px; gap: 6px; }
  .catering-flyer-badge svg { width: 14px; height: 14px; }

  .tuesday { padding: 40px 20px; }
  .tuesday-inner { gap: 20px; }
  .tue-line { display: none; }

  .about-section { grid-template-columns: 1fr; padding: 56px 20px; gap: 32px; }

  .visit { padding: 56px 20px; }
  .visit-inner { grid-template-columns: 1fr; gap: 36px; }
  .visit-btns { flex-direction: column; }
  .visit-btns button { width: 100%; }

  .visit-map { height: 260px !important; }

  /* ── Visit Us page ── */
  .vu-hero { padding: 110px 20px 48px; }
  .vu-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .vu-hero-photo { order: -1; }
  .vu-hero-photo img { height: 260px; }
  .vu-shop-section { padding: 0 20px 64px; }
  .vu-shop-card { grid-template-columns: 1fr; border-radius: 20px; }
  .vu-shop-details { padding: 32px 24px; }
  .vu-shop-map { min-height: 260px; order: -1; }
  .vu-markets-section { padding: 12px 20px 72px; }
  .vu-markets-head { margin-bottom: 40px; }
  .vu-markets-grid { grid-template-columns: 1fr; gap: 56px; max-width: 340px; }

  footer { padding: 40px 20px 24px; }
  .footer-top { flex-direction: column; gap: 28px; }
  .footer-bot { flex-direction: column; align-items: flex-start; }

  #bb-widget {
    position: fixed;
    bottom: 0; right: 0; left: 0;
    width: 100%;
    z-index: 9999;
  }

  #bb-cat-stage {
    position: fixed;
    bottom: 0;
    right: 8px;
    width: 220px !important;
    cursor: pointer;
    overflow: visible;
    /* The stage box is 220x220 and mostly empty, but a transparent div still
       catches taps — so it was stealing them from anything beneath it. Let
       taps fall through the empty area and re-enable them only on the
       hitzone, which is the part that's actually meant to be tapped. */
    pointer-events: none;
  }
  #bb-cat-hitzone { pointer-events: auto; }

  #bb-rive {
    width: 220px !important;
    height: 220px !important;
    background: transparent !important;
  }

  #bb-cat-hitzone { height: 30px; }

  #bb-meow-bubble-l { top: 148px; left: 2px; }
  #bb-meow-bubble-r { top: 148px; left: 158px; }

  /* The Rive art sits flush with the canvas bottom in both the peek and open
     poses, so a large push-down (the old 110px) hides it entirely below the
     viewport. But #bb-cat-stage's own fixed bottom:0 sits at the browser's
     visual viewport edge, which is above the browser's own bottom chrome
     (address bar / home-indicator strip on phones) — leaving a gap that
     reads as the cat floating disconnected from the true bottom of the
     screen. Nudge the resting peek down a bit to close that gap without
     going far enough to hide the head again. */
  #bb-cat-wrap                { transform: translateY(22px); }
  .bb-s-peep #bb-cat-wrap     { transform: translateY(22px); animation: _peep-bob-m 2.6s ease-in-out infinite; }
  .bb-s-spring #bb-cat-wrap   { animation: _spring-up-m 0.85s cubic-bezier(0.22,1,0.36,1) forwards; }
  .bb-s-idle #bb-cat-wrap     { transform: translateY(0); }
  .bb-s-sleep #bb-cat-wrap    { transform: translateY(0); }

  @keyframes _peep-bob-m  { 0%,100%{transform:translateY(22px)} 50%{transform:translateY(14px)} }
  @keyframes _spring-up-m {
    0%{transform:translateY(22px)} 52%{transform:translateY(-14px)}
    68%{transform:translateY(6px)}  82%{transform:translateY(-5px)}
    91%{transform:translateY(2px)}  100%{transform:translateY(0)}
  }

  #bb-chat {
    position: fixed !important;
    /* Clear the cat stage entirely. The stage is a 220px-tall fixed box anchored
       at bottom:0, so at the old 180px the chat's bottom 40px — the input row —
       sat underneath it and taps were being swallowed by the stage's invisible
       (but still tap-catching) box. 232px puts the chat above the stage's top
       edge with a little breathing room. */
    bottom: 232px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-height: 45vh !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(26,16,20,.18) !important;
  }
  #bb-chat.open {
    max-height: 50vh !important;
  }

  .bb-bubble { font-size: 12px !important; padding: 8px 12px !important; }
  .bb-name   { font-size: 14px !important; }
  .bb-status { font-size: 10px !important; }
  .bb-chip   { font-size: 10px !important; padding: 4px 10px !important; }
  #bb-input  { font-size: 12px !important; padding: 8px 12px !important; }
  #bb-send   { font-size: 12px !important; padding: 8px 12px !important; }
  #bb-msgs   { height: 250px !important; }
  #bb-input-row { padding: 8px 14px 20px !important; }
}