/* ============================================================
   #ScoopLV — stylesheet
   Sections:  1 Tokens  2 Reset  3 Layout  4 Header
              5 Carousel  6 Buttons  7 Modal  8 Responsive
   ============================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root {
  --blue:        #0f6fe8;
  --blue-deep:   #0a4fbf;
  --yellow:      #FFD400;
  --yellow-edge: #C9A200;
  --ink:         #111318;
  --white:       #ffffff;

  --uber-bg:     #0B0B0B;
  --dir-text:    #1D5BD6;

  --glow:        #8FF3FF;

  --font: 'Nunito', system-ui, -apple-system, sans-serif;

  --radius-btn:  clamp(8px, 1.6vh, 20px);
  --shadow-btn:  0 5px 16px rgba(0,0,0,.22);
  --shadow-btn-h:0 10px 24px rgba(0,0,0,.26);
}

/* ── 2. RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ── 3. LAYOUT ───────────────────────────────────────────── */
.stage-bg {
  position: absolute;
  inset: 0;
  background: var(--blue) url('../images/BG_Skyline.jpg') center center / cover no-repeat;
  z-index: 0;
}

html, body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  background: var(--blue);
  overflow-x: hidden;
  overflow-y: auto;
}

.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 2.5vh;
}

/* ── 4. HEADER ───────────────────────────────────────────── */
.masthead {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 clamp(16px, 3vw, 48px);
  gap: clamp(12px, 2vw, 32px);
}
.top-actions {
  /* Hidden for now — these three live in the product popup instead.
     Delete this one line to bring them back into the header. */
  display: none;

  align-items: center;
  gap: clamp(8px, 1.6vh, 20px);
  flex-wrap: wrap;
  justify-content: center;
}

.logo {
  width: clamp(90px, 16vh, 230px);
  /* stacked drop-shadows trace the logo's actual shape, so the glow hugs
     the letterforms like real neon tubing instead of boxing the image.
     Two cycles at odd lengths (4.5s / 7.3s) drift out of phase, so the
     flicker never lands in the same spot twice — reads as a real sign. */
  animation:
    logoNeon    4.5s ease-in-out infinite,
    logoFlicker 7.3s linear      infinite;
}

@keyframes logoFlicker {
  0%, 40%, 43%, 46%, 62%, 65%, 78%, 81%, 100% { opacity: 1; }
  /* subtle flutters only — no hard blink */
  41.5% { opacity: .88; }
  44.5% { opacity: .93; }
  63.5% { opacity: .86; }
  79.5% { opacity: .90; }
}

@keyframes logoNeon {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(150,235,255,.55))
      drop-shadow(0 0 12px rgba(90,215,255,.45))
      drop-shadow(0 0 26px rgba(60,190,255,.30))
      drop-shadow(0 6px 20px rgba(0,0,0,.40));
  }
  50% {
    filter:
      drop-shadow(0 0 6px  rgba(180,245,255,.95))
      drop-shadow(0 0 18px rgba(120,230,255,.85))
      drop-shadow(0 0 42px rgba(70,200,255,.60))
      drop-shadow(0 0 70px rgba(50,180,255,.35))
      drop-shadow(0 6px 20px rgba(0,0,0,.40));
  }
}

/* ── HAMBURGER MENU ──────────────────────────────────────── */
.menu-wrap { position: relative; }

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: clamp(42px, 6vh, 58px);
  height: clamp(42px, 6vh, 58px);
  padding: 0 clamp(9px, 1.4vh, 13px);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.hamburger span {
  display: block;
  height: 3px;
  border-radius: 999px;
  /* same glow language as the "Choose Your Treat" rules */
  background: #E8FEFF;
  transition: transform .28s cubic-bezier(.6,-.3,.3,1.3), opacity .2s ease;
  /* same neon tubing as the logo */
  animation:
    ruleNeon    4.5s ease-in-out infinite,
    logoFlicker 7.3s linear      infinite;
}
.hamburger:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* X state when open */
.hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) {
  /* animation must stop too — the neon keyframes animate opacity and
     would otherwise override this and flash the bar back through the X */
  animation: none;
  opacity: 0;
  transform: scaleX(.3);
}
.hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 14px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  min-width: 240px;
  padding: 16px;
  border-radius: 22px;
  /* same light frosted wash as the hamburger it opens from — a white
     tint over the background rather than a dark navy panel */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 48px rgba(0,0,0,.45),
    0 0 34px rgba(80,200,255,.22);
  animation:
    menuPop .26s cubic-bezier(.34,1.4,.64,1),
    panelBreathe 4.5s ease-in-out .26s infinite;
  transform-origin: right center;
}

/* thin specular highlight along the top edge, like light catching glass */
.menu-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.7) 35%,
    rgba(255,255,255,.7) 65%,
    transparent);
  pointer-events: none;
}

@keyframes panelBreathe {
  0%, 100% {
    box-shadow:
      0 22px 48px rgba(0,0,0,.35),
      0 0 8px  rgba(150,235,255,.35),
      0 0 20px rgba(90,215,255,.22);
    border-color: rgba(255,255,255,.18);
  }
  50% {
    box-shadow:
      0 22px 48px rgba(0,0,0,.35),
      0 0 14px rgba(180,245,255,.70),
      0 0 32px rgba(120,230,255,.45),
      0 0 56px rgba(70,200,255,.28);
    border-color: rgba(220,250,255,.55);
  }
}
.menu-panel[hidden] { display: none; }

@keyframes menuPop {
  from { opacity: 0; transform: scale(.88) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* address + tappable phone at the top of the menu panel */
.menu-info {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4px 4px 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.menu-hours-big {
  margin: 0 0 2px;
  color: var(--yellow);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.menu-hours-time {
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .06em;
}

/* Uber + Postmates share one row */
.menu-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
}
.menu-row .menu-link { flex: 1 1 0; min-width: 0; padding: 0 10px; }

.menu-address {
  margin: 0 0 10px;
  color: rgba(255,255,255,.9);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .02em;
}
.menu-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #E8FEFF;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
  text-shadow:
    0 0 6px  rgba(180,245,255,.75),
    0 0 18px rgba(120,230,255,.55);
  transition: transform .15s ease;
}
.menu-phone:hover { transform: translateY(-1px); }
.menu-phone-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(180,245,255,.75));
}

.menu-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.6);
  color: var(--blue);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.menu-link--uber { background: var(--uber-bg); border-color: rgba(255,255,255,.18); }
.menu-link img, .menu-link svg { pointer-events: none; }

/* socials sit in a row across the bottom of the panel */
.menu-panel .socials {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.2vh, 14px);
  margin-top: 10px;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.2vh, 26px);
}

.eyebrow span {
  /* min() of a height-based and a width-based size, so a tall-and-narrow
     window can never blow the line past the edge */
  font-size: clamp(1.1rem, min(3.4vh, 6.2vw), 2.52rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  white-space: nowrap;
  /* same neon treatment as the logo: breathing glow + offset flicker */
  animation:
    eyebrowBreathe 4.5s ease-in-out infinite,
    logoFlicker    7.3s linear      infinite;
}

@keyframes eyebrowBreathe {
  0%, 100% {
    text-shadow:
      0 0 4px  rgba(150,235,255,.55),
      0 0 12px rgba(90,215,255,.45),
      0 0 26px rgba(60,190,255,.30),
      0 3px 12px rgba(0,0,0,.35);
  }
  50% {
    text-shadow:
      0 0 6px  rgba(180,245,255,.95),
      0 0 18px rgba(120,230,255,.85),
      0 0 42px rgba(70,200,255,.60),
      0 0 70px rgba(50,180,255,.35),
      0 3px 12px rgba(0,0,0,.35);
  }
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: clamp(18px, 7vh, 84px);
  height: 5px;
  border-radius: 999px;
  background: #E8FEFF;
  /* same neon tubing as the logo — breathe + flicker, in sync */
  animation:
    ruleNeon    4.5s ease-in-out infinite,
    logoFlicker 7.3s linear      infinite;
}

@keyframes ruleNeon {
  0%, 100% {
    box-shadow:
      0 0 4px  rgba(150,235,255,.55),
      0 0 12px rgba(90,215,255,.45),
      0 0 26px rgba(60,190,255,.30);
  }
  50% {
    box-shadow:
      0 0 6px  rgba(180,245,255,.95),
      0 0 18px rgba(120,230,255,.85),
      0 0 42px rgba(70,200,255,.60),
      0 0 70px rgba(50,180,255,.35);
  }
}

/* ── 5. CAROUSEL ─────────────────────────────────────────
   The stage never uses overflow, so a scaled-up card can
   never be clipped. Movement is a translateX on .track,
   driven by script.js.                                     */
.carousel {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  display: flex;
  align-items: center;           /* row sits centred in the stage */
  justify-content: flex-start;   /* JS transform does the centring */
  overflow: visible;
}

.track {
  position: relative;             /* offset parent for the centring maths */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;            /* items centre vertically, not bottom-aligned */
  width: max-content;
  gap: clamp(60px, 8vw, 220px);
  will-change: transform;
  transition: transform .45s cubic-bezier(.25,.85,.3,1);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.card {
  --f: 0;                         /* 0 = far from centre, 1 = centred */
  flex: 0 0 auto;
  width: auto;
  max-width: min(clamp(140px, 28vh, 480px), 62vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  transform-origin: center center;
  transform:
    translateY(calc(-22px * var(--f)))
    scale(calc(.78 + (.56 * var(--f))));
  opacity: calc(.72 + (.28 * var(--f)));
  z-index: 1;
  transition:
    transform .3s cubic-bezier(.25,.85,.3,1),
    opacity   .3s ease,
    filter    .3s ease;
}
.card:hover .card-img { --lift: -14px; }
.card:active .card-img { --lift: -6px; }
.card.is-active { z-index: 5; }
.card.is-active .card-media { animation-duration: 3.2s; }
@keyframes cardFloatActive {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}
.card.is-active .card-media { animation-name: cardFloatActive; }
.card:focus { outline: none; }
.card:focus-visible { outline: 3px solid #8FF3FF; outline-offset: 6px; border-radius: 12px; }

.card-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  animation: cardFloat 3.6s ease-in-out infinite;
}

/* stagger so cards don't bob in unison — feels organic, not mechanical */
.track .card:nth-child(2) .card-media { animation-duration: 4.1s; animation-delay: -.6s; }
.track .card:nth-child(3) .card-media { animation-duration: 3.3s; animation-delay: -1.4s; }
.track .card:nth-child(4) .card-media { animation-duration: 4.4s; animation-delay: -2.1s; }
.track .card:nth-child(5) .card-media { animation-duration: 3.8s; animation-delay: -.3s; }
.track .card:nth-child(6) .card-media { animation-duration: 4.0s; animation-delay: -1.8s; }

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* pause the idle bob while actively dragging the row */
.track.is-dragging .card-media { animation-play-state: paused; }

/* glow pad beneath each product */
.card-media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 78%;
  height: clamp(18px, 2.4vh, 38px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(150,225,255,.85) 0%,
    rgba(120,210,255,.45) 45%,
    rgba(120,210,255,0)   72%);
  filter: blur(3px);
  opacity: .55;
  transition: opacity .3s ease;
  pointer-events: none;
}
.card.is-active .card-media::after { opacity: 1; }

.card-img {
  position: relative;
  z-index: 1;
  width: auto;
  /* width cap matters as much as height — on a tall narrow window a
     height-only size overflows sideways */
  height: min(41vh, 62vw, 600px);
  max-height: 600px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.30));
  -webkit-user-drag: none;
  /* hover lift + cursor-tilt + drag shelf-tilt all live here, as pure
     rotation (no skew/shear), so the label never moves or distorts. */
  transform: translateY(var(--lift, 0px)) rotate(calc(var(--tilt, 0deg) + var(--sway, 0deg)));
  transition: transform .18s ease-out, filter .3s ease;
}
.card--tall .card-img {
  height: min(47vh, 70vw, 680px);
  max-height: 680px;
}
.card.is-active .card-label { margin-top: calc(clamp(8px, 1.6vh, 20px) + 4px); }
.card.is-active .card-img {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.38));
}

.card-label {
  margin-top: clamp(8px, 1.6vh, 20px);
  width: 100%;
  max-width: clamp(140px, 40vh, 660px);
  padding: clamp(7px, 1.2vh, 16px) clamp(14px, 3vh, 44px);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: clamp(.85rem, 2.2vh, 2.1rem);
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .03em;
  box-shadow: 0 9px 0 var(--yellow-edge), 0 15px 27px rgba(0,0,0,.28);
}

/* ── 6. BUTTONS ──────────────────────────────────────────── */
.actions {
  position: relative;
  z-index: 10;   /* guarantees this sits above any floating/scaled carousel card */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vh, 20px);
  margin-top: clamp(8px, 4vh, 40px);
  padding: 0 16px;
}

.btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: clamp(90px, 20vh, 230px);
  min-height: clamp(34px, 5.5vh, 66px);
  padding: 0 clamp(10px, 2.5vh, 32px);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-btn);
  font-size: clamp(.8rem, 1.9vh, 1.15rem);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-h);
}

.btn--light {
  background: var(--white);
  color: var(--ink);
}
.btn--light[data-role="directions"] { color: var(--dir-text); }

.btn--uber {
  background: var(--uber-bg);
}

.btn-ico {
  width: clamp(15px, 2.2vh, 26px);
  height: clamp(15px, 2.2vh, 26px);
  flex: 0 0 auto;
  pointer-events: none;   /* clicks always land on the parent <a>, never get eaten by the icon */
}

.uber-logo {
  height: clamp(14px, 2.2vh, 25px);
  width: auto;
  pointer-events: none;
}

.postmates-logo {
  height: clamp(14px, 2.2vh, 25px);
  width: auto;
  aspect-ratio: 280 / 63.149;
  object-fit: contain;
  pointer-events: none;
}

/* socials */
.socials {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vh, 15px);
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 5.5vh, 62px);
  height: clamp(34px, 5.5vh, 62px);
  border-radius: 999px;
  color: var(--white);
  box-shadow: 0 5px 16px rgba(0,0,0,.24);
  transition: transform .16s ease;
}
.social:hover { transform: translateY(-2px); }
.social svg  { width: 55%; height: 55%; pointer-events: none; }
.yelp-logo {
  width: 55%;
  height: 55%;
  object-fit: contain;
  pointer-events: none;
  /* forces the logo to true white regardless of its source colors */
  filter: brightness(0) invert(1);
}

.social--ig {
  background: radial-gradient(circle at 30% 110%,
    #ffd600 0 20%, #ff7a00 30%, #ff0169 58%, #d300c5 78%, #7638fa 100%);
}
.social--fb   { background: #3B5BFB; }
.social--tt   { background: #0B0B0B; }
.social--yelp { background: #E11B1B; }

/* ── 7. MODAL ────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(4,20,44,.66);
  backdrop-filter: blur(2px);
}
.overlay[hidden] { display: none; }

/* .modal-frame owns the rounded shape and clips anything inside it —
   including the browser's native scrollbar — to that curve, so the
   scrollbar can never poke past the corners. */
/* Plain, unrounded wrapper carries the scale-in entrance animation.
   Animating "transform: scale()" on the SAME element that has
   border-radius + overflow:hidden is what caused the hairline seam
   at the top corner — browsers can rasterize the rounded clip mask
   slightly out of sync with a transform on that same layer. Splitting
   them into two elements avoids that entirely. */
.modal-pop {
  width: 100%;
  max-width: 900px;
  animation: pop .24s cubic-bezier(.34,1.56,.64,1);
}

.modal-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 94vh;
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  /* forces its own compositing layer so the rounded clip renders cleanly */
  transform: translateZ(0);
}

/* .modal is the actual scrolling box, unrounded — its scrollbar renders
   flush to its own edges, then gets clipped by the frame's curve above.
   flex:1 + min-height:0 gives it a well-defined height to scroll within,
   instead of the old height:100% (undefined against an auto-height
   parent — that's what left the gap at the top corner). */
.modal {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;   /* hard safeguard — nothing inside should ever create horizontal scroll */
  overflow-y: auto;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--blue) #eef2f7;
}

/* WebKit (Chrome, Safari, Edge) */
.modal::-webkit-scrollbar { width: 10px; }
.modal::-webkit-scrollbar-track {
  background: #eef2f7;
}
.modal::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border-radius: 999px;
  border: 2px solid #eef2f7;
}
.modal::-webkit-scrollbar-thumb:hover { background: var(--blue-deep); }
/* prev/next nav — sit beside the modal, only when there's room */
/* same frosted tile + neon glyph as the hamburger button */
.modal-nav {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 6vh, 58px);
  height: clamp(42px, 6vh, 58px);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #E8FEFF;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  /* neon tubing on the chevron itself */
  text-shadow:
    0 0 6px  rgba(180,245,255,.95),
    0 0 18px rgba(120,230,255,.85),
    0 0 42px rgba(70,200,255,.60);
  /* ...and the same breathing rim-glow the panel/hamburger tile have,
     so all three read as the same material */
  animation:
    tileNeon    4.5s ease-in-out infinite,
    logoFlicker 7.3s linear      infinite;
}

/* shared rim-glow for the frosted tiles (hamburger + nav arrows) */
@keyframes tileNeon {
  0%, 100% {
    box-shadow:
      0 0 8px  rgba(150,235,255,.35),
      0 0 20px rgba(90,215,255,.22);
    border-color: rgba(255,255,255,.18);
  }
  50% {
    box-shadow:
      0 0 14px rgba(180,245,255,.70),
      0 0 32px rgba(120,230,255,.45),
      0 0 56px rgba(70,200,255,.28);
    border-color: rgba(220,250,255,.55);
  }
}
.modal-nav:hover  { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.modal-nav:active { transform: scale(.96); }

@media (min-width: 900px) {
  .overlay:not([hidden]) { display: flex; }
  .modal-nav { display: flex; margin: 0 18px; }
}

@keyframes pop {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

@media (max-height: 650px) {
  .overlay { padding: 0; }
  /* short window: go full HEIGHT, but keep the width capped so an
     ultra-wide monitor doesn't stretch the popup across 2000px */
  .modal-pop { max-width: 900px; width: 100%; height: 100%; }
  .modal-frame { max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; }
  .modal-hero { height: 220px; }
  .modal-actions { padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); margin-top: 20px; }
  .modal-actions .btn { min-height: 46px; }
}

.modal-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 345px;
  border-radius: 8px 8px 0 0;
  background: var(--blue) url('../images/BG_Skyline.jpg') center / cover;
  /* no overflow:hidden here — the drop-shadow on the product image needs
     room to render fully. .modal-frame (the outer wrapper) still clips
     the overall rounded shape, so nothing escapes the popup itself. */
}
/* curved white transition arcing up into the hero — sized as width:100%
   so it can never exceed the hero's own box (that's what caused the
   horizontal-scroll bug: the old version used left/right:-8%, which
   pushed content past the modal's actual width). */
.hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 130px;
  z-index: 1;
  display: block;
}
.modal-hero img {
  position: relative;
  z-index: 2;
  height: 280px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.32));
}

/* zero-height sticky bar keeps the close button pinned to the top of the
   scrollable modal at all times, regardless of scroll position */
.modal-close-bar {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 20;
  overflow: visible;
}

.modal-close {
  position: absolute;
  top: 21px;
  right: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 63px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  color: var(--white);
  font-size: 1.575rem;
  font-weight: 900;
  transition: background .15s ease;
}
.modal-close:hover { background: rgba(0,0,0,.62); }

.modal-body { padding: 0px 45px 30px; }

.modal-body h2 {
  margin: 0 0 0px;
  font-size: 3rem;
  font-weight: 900;
  color: #0a9fd8;
  text-align: center;
}

.modal-desc {
  margin: 0 0 45px;
  color: #7a8290;
  font-size: 1.425rem;
  line-height: 1.45;
  text-align: center;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 45px 0 15px;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
/* fallback dot removed — section titles show as plain text now */
.section-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}
.section-icon--green {
  width: 26px;
  height: 26px;
  filter: invert(53%) sepia(41%) saturate(670%) hue-rotate(75deg) brightness(93%) contrast(89%);
}
.section-emoji {
  font-size: 1.15rem;
  line-height: 1;
  flex: 0 0 auto;
}

.flavor-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  line-height: 1;
  z-index: 2;
}
.flavor-badge-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: invert(53%) sepia(41%) saturate(670%) hue-rotate(75deg) brightness(93%) contrast(89%);
}

/* flavor grid — static, informational, not a selector */
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.flavor-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 620px) {
  .flavor-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

.flavor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 10px 16px;
  border: 2px solid #eef0f3;
  border-radius: 18px;
  background: var(--white);
  text-align: center;
}

.flavor-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}
.flavor-thumb img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 85%;
  height: 85%;
  object-fit: contain;
}
/* shown automatically if the real photo (images/flavors/…) isn't there yet */
.flavor-thumb--empty img { display: none; }
.flavor-thumb--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  background:
    radial-gradient(circle at center, var(--dot-color, #cfd6e0) 0 34%, transparent 35%),
    linear-gradient(#f6f7f9, #eef0f3);
}

.flavor-name {
  font-size: 1.14rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.25;
}

.flavor-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
}

/* Ice Cream Sandwich popup only — dots hidden underneath the flavor names */
#modal[data-menu="sandwiches"] .flavor-dot { display: none; }

/* named product list (shakes, halo-halo) */
.items { display: flex; flex-direction: column; gap: 15px; margin-top: 21px; }

/* Signature Shakes — icon badge on section title */
.section-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 1.05rem;
  flex: 0 0 auto;
}
.section-title:has(.section-badge)::before { content: none; }

/* shake card grid */
.shake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.shake-card {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ececec;
  border-radius: 22px;
  background: var(--white);
}

.shake-photo {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  align-self: stretch;
  min-height: 190px;
  border-radius: 16px;
  overflow: hidden;
  background: #f6f7f9;
}
.shake-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, never cover — the cup must never be cropped at any width */
  object-fit: contain;
  object-position: center;
}
.shake-photo--empty img { display: none; }
.shake-photo--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#f6f7f9, #eef0f3);
}
.shake-photo--purple  { background: #efeaff; }
.shake-photo--gray    { background: #f1f1f1; }
.shake-photo--pink    { background: #fdecef; }
.shake-photo--green   { background: #eef7e6; }
.shake-photo--orange  { background: #fff3e0; }
.shake-photo--neutral { background: #f6f7f9; }

.shake-info { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.shake-name { font-size: 1.32rem; font-weight: 900; color: #1a1a1a; line-height: 1.25; }
.shake-desc { font-size: 1.1rem; color: #8a8a8a; line-height: 1.4; }

.shake-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.shake-tag {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
}
.shake-tag--purple  { background: #efeaff; color: #6c47c9; }
.shake-tag--gray    { background: #eeeeee; color: #444; }
.shake-tag--pink    { background: #fde3e8; color: #c1436b; }
.shake-tag--green   { background: #e4f3d8; color: #4c7a2a; }
.shake-tag--orange  { background: #ffe9c2; color: #b06a12; }
.shake-tag--neutral { background: #eef0f3; color: #555; }

@media (max-width: 620px) {
  /* keep the photo-left / text-right layout, just stack the cards */
  .shake-grid { grid-template-columns: 1fr; }

  /* photo box is a fixed shape on every card — never stretched taller
     by a 3-line title, so all the images stay the same size */
  .shake-card  { align-items: flex-start; }
  .shake-photo {
    width: 118px;
    height: 190px;
    min-height: 0;
    align-self: flex-start;
    background: var(--white);
  }
  .shake-photo img { object-fit: contain; object-position: center; }
}

.item {
  padding: 21px 24px;
  border: 1px solid #ececec;
  border-radius: 24px;
}
.item-name  { font-size: 1.5rem;   font-weight: 900; color: #1a1a1a; margin-bottom: 5px; }
.item-price { font-size: 1.32rem;  font-weight: 800; color: #444;    margin-bottom: 8px; }
.item-desc  { font-size: 1.29rem;  color: #8a8a8a; line-height: 1.45; }

.modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 30px 0 0;
  padding: 14px 30px calc(14px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid #eef0f3;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 -10px 22px rgba(0,0,0,.10);
}
.modal-actions .btn { width: 100%; min-width: 0; min-height: 56px; font-size: 1rem; padding: 8px 14px; }
.modal-actions .btn--light { border: 2px solid #ececec; }
.modal-actions .uber-logo  { height: 20px; }
.modal-actions .postmates-logo { height: 20px; aspect-ratio: 280 / 63.149; }
.modal-actions .btn[data-role="directions"] { font-size: 1.05rem; }

/* ── 8. RESPONSIVE ───────────────────────────────────────── */
/* Intentionally no width-based shrinking here — narrow screens are
   handled by horizontal scroll/swipe in the carousel, not by making
   things smaller. Only viewport HEIGHT scales the UI down. */

@media (max-width: 620px) {
  .eyebrow::before,
  .eyebrow::after { width: 20px; }
  .actions { gap: 10px; }
  .btn { flex: 1 1 140px; }
  .socials { width: 100%; justify-content: center; }
  .modal-actions { grid-template-columns: 1fr; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
  .modal-body { padding: 10px 20px 24px; }
}

/* ── CREDIT LINE ──────────────────────────────────────────
   Small and muted on purpose — a nod, not a competing brand. */
.credit {
  --credit-a: .25;                /* one opacity drives both text and logo */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: clamp(4px, 2.2vh, 22px) auto 0;
  padding: clamp(0px, .5vh, 4px) 18px;
  font-size: clamp(11px, 1.7vh, 19px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  opacity: var(--credit-a);
  transition: opacity .18s ease;
}
.credit span { display: inline-flex; align-items: center; line-height: 1; }
.credit:hover { --credit-a: .85; }
.credit-bolt { font-size: clamp(11px, 1.7vh, 19px); line-height: 1; }
.credit-logo {
  display: block;
  height: clamp(10px, 1.6vh, 18px);
  width: auto;
  align-self: center;
  transform: translateY(-2px);
  filter: brightness(0) invert(1);
}

@media (max-width: 620px) {
  .credit { font-size: 13px; gap: 6px; padding: 9px 14px; letter-spacing: .06em; }
  .credit-bolt { font-size: 13px; }
  .credit-logo { height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .track, .card, .card-img, .btn, .social { transition: none; }
  .modal-pop { animation: none; }
  .card-media { animation: none; }
  .card:hover .card-img, .card:active .card-img { --lift: 0px; }
  .card-img { --tilt: 0deg !important; --sway: 0deg !important; }
}

/* ── LOADER ──────────────────────────────────────────────────
   Two layers of the SAME image (browser caches it, so this is
   still only one network request):
     1. glow layer  — fades in, filter:drop-shadow lives here with
        generous padding so the blur has room to fade to nothing
        before it reaches this element's own edge.
     2. fill layer  — clip-path reveal, bottom-to-top, NO filter
        on it (filter + clip-path together is what clipped the
        glow into a hard square before).
   Together: soft glow behind a logo that visibly fills upward.  */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-deep);
  transition: opacity .55s ease, visibility .55s ease;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  position: relative;
  width: clamp(220px, 32vw, 420px);
}
.loader-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* layer 1: glow — fade only, filter here has room to breathe */
.loader-glow-wrap {
  position: absolute;
  inset: 0;
  padding: 26%;
  margin: -26%;
  opacity: 0;
  filter:
    drop-shadow(0 0 4px  rgba(150,235,255,.5))
    drop-shadow(0 0 14px rgba(90,215,255,.35));
  animation: loaderGlowIn 1.15s ease-out forwards;
}
.loader-logo-glow { width: 100%; height: auto; }

@keyframes loaderGlowIn {
  to { opacity: .85; }
}

.loader.is-done .loader-glow-wrap {
  animation: loaderGlowBloom .5s ease-out forwards;
}
@keyframes loaderGlowBloom {
  0% {
    opacity: .85;
    filter:
      drop-shadow(0 0 4px  rgba(150,235,255,.5))
      drop-shadow(0 0 14px rgba(90,215,255,.35));
  }
  45% {
    opacity: 1;
    filter:
      drop-shadow(0 0 10px rgba(200,250,255,1))
      drop-shadow(0 0 30px rgba(120,230,255,.95))
      drop-shadow(0 0 70px rgba(70,200,255,.7));
  }
  100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 8px  rgba(200,250,255,.8))
      drop-shadow(0 0 24px rgba(120,230,255,.6));
  }
}

/* layer 2: fill — reveals bottom-to-top, no filter on this element */
.loader-logo-fill {
  position: relative;
  z-index: 1;
  clip-path: inset(100% 0 0 0);
  animation: loaderFill 1.15s cubic-bezier(.4,.1,.3,1) forwards;
}
@keyframes loaderFill {
  to { clip-path: inset(0 0 0 0); }
}
.loader.is-done .loader-logo-fill {
  clip-path: inset(0 0 0 0);
}

.stage {
  opacity: 0;
  transition: opacity .6s ease .15s;
}
.stage.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .loader-glow-wrap { animation: none; opacity: .85; }
  .loader.is-done .loader-glow-wrap { animation: none; }
  .loader-logo-fill { animation: none; clip-path: inset(0 0 0 0); }
  .stage { transition: none; }
}

/* Google Maps link nested right under the phone number */
.menu-info--noline { border-bottom: none; padding-bottom: 4px; }
.menu-link--maps {
  margin-top: 12px;
}

/* Uber Eats + Postmates now share the divider with socials below —
   the divider moves onto this wrapper instead of onto .socials alone */
.menu-row-social {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.28);
}
.menu-row-social .menu-link { flex: 1 1 0; min-width: 0; padding: 0 10px; }

/* ── "What's Inside" ingredient cards (Halo-Halo etc.) ── */
.inside-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.inside-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid #eef0f3;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.inside-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}
.inside-icon svg { width: 100%; height: 100%; }
.inside-label {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ── Cup Options (Tea & Slush popup) ── */
.cup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  max-width: 420px;
}
.cup-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid #eef0f3;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.cup-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.cup-label {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ── Halo-Halo: photo inside the small "What's Inside" cards ── */
.inside-card--photo { gap: 14px; }
.inside-photo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ── Modal footer buttons: popup-matched radius, thin stroke, no shadow ── */
.modal-actions .btn {
  border-radius: 8px;
  box-shadow: none;
  border: 2px solid #eef0f3;
}
.modal-actions .btn:hover {
  box-shadow: none;
  border-color: #dfe4ea;
}
.modal-actions .btn--uber { border-color: rgba(255,255,255,.14); }
.modal-actions .btn--uber:hover { border-color: rgba(255,255,255,.28); }

/* ── Popup hero: gentle float so it feels alive ── */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.modal-hero img {
  animation: heroFloat 3.6s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .modal-hero img { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  (≤620px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 620px) {

  /* ── Footer spacing (tuner-driven vars) ── */
  .page    { padding: 10px 0 var(--pad-bottom, 17px); }
  .actions { margin-top: var(--gap-eyebrow, 30px); }
  .credit  { margin: var(--gap-credit, 16px) auto 0; padding: 0 14px; }

  /* ── Carousel sits a touch lower ── */
  .carousel { padding-top: var(--carousel-drop, 5vh); }


  /* ── Menu panel: fullscreen sheet ── */
  .menu-panel {
    position: fixed;
    inset: 0;
    right: auto;
    top: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100dvh;
    justify-content: center;
    gap: 18px;
    padding: 72px 26px calc(32px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: rgba(10,40,90,.55);
    backdrop-filter: blur(26px);
    animation: none;
    overflow-y: auto;
  }
  .menu-panel::before { display: none; }

  /* hamburger/X stays clickable above the sheet */
  .hamburger { position: relative; z-index: 70; }

  .menu-info      { padding: 4px 4px 18px; }
  .menu-hours-big { font-size: 2rem; }
  .menu-hours-time{ font-size: 1.5rem; }
  .menu-address   { font-size: 1.15rem; }
  .menu-phone     { font-size: 1.25rem; }
  .menu-panel .socials { margin-top: 20px; gap: 18px; }
  .menu-panel .social { width: 58px; height: 58px; }
  .menu-panel .social svg { width: 55%; height: 55%; }
  .menu-panel .yelp-logo { width: 55%; height: 55%; }
  .menu-row-social .uber-logo {
    height: 26px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    align-self: center;
    flex: 0 0 auto;
  }
  .menu-row-social .postmates-logo {
    height: 22px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    align-self: center;
    flex: 0 0 auto;
  }
  .menu-row-social .menu-link { padding: 14px 16px; justify-content: center; }

  .modal-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 1.2rem; }
  .modal-body  { padding: 0 20px 20px; }
  .modal-body h2 { font-size: 2.2rem; }
  .modal-desc  { margin: 0 0 26px; font-size: 1.15rem; }

  /* ── Footer buttons stay in one row, just smaller ── */
  .modal-actions {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
  .modal-actions .btn {
    min-height: 46px;
    padding: 6px 6px;
    font-size: .78rem;
    letter-spacing: 0;
  }
  .modal-actions .btn[data-role="directions"] { font-size: .95rem; gap: 5px; }
  .modal-actions .btn-ico { width: 15px; height: 15px; }
  .modal-actions .uber-logo      { height: 15px; }
  .modal-actions .postmates-logo { height: 20px; }


  /* fullscreen means fullscreen — no rounded corners anywhere */
  .overlay,
  .modal-pop,
  .modal-frame,
  .modal,
  .modal-actions { border-radius: 0; }
}

/* ── Square corners ONLY when fullscreen (mobile). Desktop keeps rounding. ── */
@media (max-width: 620px) {
  .modal-frame,
  .modal,
  .modal-pop,
  .modal-hero,
  .modal-actions,
  .menu-panel { border-radius: 0; }
}

/* ── Kill mobile tap highlight / selection flash ── */
* { -webkit-tap-highlight-color: transparent; }

.card,
.card *,
.track,
.carousel,
.btn,
.social,
.menu-link,
.hamburger,
.modal-nav,
.modal-close,
.eyebrow,
.credit {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.card:focus,
.card:focus-visible,
.track:focus,
.carousel:focus { outline: none; }

/* ── Mobile fullscreen popup: no arrows — swipe changes treats ── */
@media (max-width: 620px) {
  .modal-nav { display: none; }
  .modal-hero { height: 260px; }
  .modal-hero img { height: 220px; max-width: 100%; object-fit: contain; }

  /* keep the arch the same proportion it has on desktop (130px over a
     900px modal) instead of a fixed height on a much narrower screen */
  .hero-curve { height: 14.4vw; }
}

/* ── First-open swipe hint: the popup nudges sideways once ── */
@keyframes swipeNudge {
  0%   { transform: translateX(0) scale(1); }
  22%  { transform: translateX(-30px) scale(.965); }
  46%  { transform: translateX(20px) scale(.975); }
  70%  { transform: translateX(-9px) scale(.99); }
  100% { transform: translateX(0) scale(1); }
}
@media (max-width: 899px) {
  .modal-frame.swipe-hint {
    animation: swipeNudge 1.15s cubic-bezier(.36,.07,.19,.97) .45s 1;
  }
  /* swipe uses inline transform — never let it animate per-property */
  .modal-frame { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-frame.swipe-hint { animation: none; }
}

/* ── While swiping, the popup shrinks into a visible card so you can
      actually see the whole thing travel across the screen ── */
/* the strip needs room to slide; nothing outside the frame shows */
.modal-pop { position: relative; overflow: hidden; }

/* neighbour cards parked just off-screen either side — needed at EVERY
   width, since the swipe gesture works on any touch device */
.modal-frame--ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.modal-frame--ghost .modal { overflow: hidden; }
.modal-frame--ghost .modal-close-bar { display: none; }

@media (max-width: 620px) {
  .modal-frame--ghost { height: 100dvh; }
}

/* ── One shared footer bar on mobile, pinned to the overlay ── */
@media (max-width: 620px) {
  .overlay > .modal-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    margin: 0;
    border-radius: 0;
  }
  /* cards never carry their own copy */
}

/* ghosts never show a footer, at any width */
.modal-frame--ghost .modal-actions { display: none; }

@media (max-width: 620px) {

  /* room so content can scroll clear of the fixed bar */
  .modal-body { padding-bottom: 92px; }
}

/* ── Swipe/drag works at every size ── */
.track { touch-action: none; }

/* ── Very narrow screens (Z Fold cover, small phones) ───────
   Nothing should touch the edges or clip. */
@media (max-width: 430px) {
  /* scales with the screen instead of a fixed size — grows on a 430px
     phone, still fits on a 344px fold cover */
  .eyebrow span { font-size: clamp(18px, min(6.4vw, 4vh), 30px); }
  .eyebrow { gap: clamp(6px, 2.5vw, 14px); padding: 0 10px; }
  .eyebrow::before,
  .eyebrow::after { width: clamp(10px, 4vw, 22px); }

  .card-label {
    font-size: clamp(16px, 5.2vw, 22px);
    padding: 11px 18px;
    max-width: 88vw;
  }
  .masthead { padding: 0 12px; }
  .logo { max-width: 46vw; }
}

/* ═══════════════════════════════════════════════════════════
   FULLSCREEN POPUP  (≤899px — phones, folds, small tablets)
   Anything narrower than the desktop arrow layout gets the
   edge-to-edge treatment with one shared footer bar.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .overlay   { padding: 0; }
  .modal-pop { max-width: 100%; width: 100%; height: 100dvh; }
  .modal-frame {
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .modal,
  .modal-hero,
  .modal-actions,
  .menu-panel { border-radius: 0; }

  .modal-frame--ghost { height: 100dvh; }

  /* "Google Maps" wraps to two lines in a narrow button — just "Google" */
  .hide-mobile { display: none; }

  /* one shared footer bar, pinned to the overlay */
  .overlay > .modal-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    margin: 0;
    border-radius: 0;
  }
  .modal-body { padding-bottom: 92px; }

  .modal-actions .btn[data-role="directions"] { font-size: .95rem; gap: 5px; }
  .modal-actions .uber-logo      { height: 17px; }
  .modal-actions .postmates-logo { height: 24px; }
}

/* ── Overflow safety net ────────────────────────────────────
   Whatever odd window the user drags to (very tall + narrow,
   very short + wide), nothing escapes horizontally. */
html, body { max-width: 100%; overflow-x: hidden; }

.page,
.masthead,
.carousel,
.actions { max-width: 100vw; }

.card-label {
  max-width: min(88vw, 420px);
  overflow-wrap: break-word;
}

.logo { max-width: min(52vw, 340px); height: auto; }

/* Short-and-wide windows: keep the row from swallowing the footer */
@media (max-height: 560px) {
  .card-img             { height: min(34vh, 62vw, 600px); }
  .card--tall .card-img { height: min(39vh, 70vw, 680px); }
  .carousel             { padding-top: 0; }
  .eyebrow span         { font-size: clamp(14px, min(4.4vh, 5vw), 22px); }

  /* footer stack gets tight so it doesn't float away from the bottom */
  .page    { padding: 8px 0 6px; }
  .actions { margin-top: 6px; }
  .credit  { margin-top: 4px; padding-top: 0; padding-bottom: 0; }
}



/* ── Shake cards: uniform, never cropped, at every width ── */
.shake-card  { align-items: flex-start; }
.shake-photo {
  align-self: flex-start;
  width: 120px;
  height: 200px;
  min-height: 0;
  background: var(--white);
}

/* two columns max — auto-fit was making six skinny columns on an
   ultra-wide window, which is what squeezed the photos */
@media (min-width: 900px) {
  .shake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Popup width is always capped — only genuinely narrow screens go
   edge-to-edge (handled in the ≤899px fullscreen block above). */
@media (min-width: 900px) {
  .modal-pop { max-width: 900px; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   MINIMUM SIZE FLOOR
   The layout scales down to ~442px tall and stops. Any shorter
   and the page keeps its floor height and the window scrolls,
   rather than crushing everything into an unreadable strip.
   ═══════════════════════════════════════════════════════════ */
:root { --floor-h: 442px; }

.stage,
.page {
  min-height: max(var(--floor-h), 100dvh);
}

/* below the floor the window scrolls instead of squashing */
@media (max-height: 441px) {
  html, body { overflow-y: auto; }
  .stage, .page { height: var(--floor-h); min-height: var(--floor-h); }

  /* sizes freeze at their floor values — vh units would keep shrinking */
  .card-img             { height: 150px; }
  .card--tall .card-img { height: 176px; }
  .eyebrow span         { font-size: 19px; }
  .card-label           { font-size: 13px; }
  .page                 { padding: 8px 0 8px; }
  .actions              { margin-top: 10px; }
  .credit               { margin-top: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   MENU PANEL — fixed size, never scales with viewport height
   It's a fixed-content panel, not a hero element, so it should
   look identical on a 1400px-tall window and a 450px one.
   Only WIDTH changes it (≤620px goes fullscreen).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 621px) {
  .menu-panel {
    width: 300px;
    min-width: 300px;
    gap: 10px;
    padding: 18px;
  }

  .menu-panel .menu-hours-big  { font-size: 1.5rem; }
  .menu-panel .menu-hours-time { font-size: 1.2rem; }
  .menu-panel .menu-address    { font-size: 1.02rem; }
  .menu-panel .menu-phone      { font-size: 1.05rem; }

  /* buttons inside the panel: fixed, not vh-scaled */
  .menu-panel .menu-link {
    min-width: 0;
    min-height: 46px;
    padding: 0 14px;
    font-size: 1rem;
    border-radius: 12px;
  }
  .menu-panel .menu-link--maps { min-height: 48px; }
  .menu-panel .btn-ico  { width: 19px; height: 19px; }

  .menu-row-social .uber-logo      { height: 20px; width: auto; }
  .menu-row-social .postmates-logo { height: 17px; width: auto; }

  .menu-panel .socials { gap: 12px; margin-top: 12px; }
  .menu-panel .social  { width: 44px; height: 44px; }
}

/* ── Screen-reader-only (SEO heading, not visible) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}