/* ==========================================================================
   Maw Poke | Components
   Announcement ticker, nav, hero, product grid, menu, locations, footer,
   cookie banner. Every raised surface is the same liquid glass material:
   blurred backdrop, translucent tint, specular rim, soft cast shadow.

   Rule of thumb used throughout: never put backdrop-filter on an element
   that has a position:fixed descendant. A filtered element becomes the
   containing block for fixed children, which pins them to the box instead
   of the viewport. Where that clashes, the filter goes on a pseudo element.
   ========================================================================== */

/* ---------------------------------------------------------------- nav -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding 0.4s var(--ease-glass);
}

/* The glass lives on a pseudo element so the fixed mobile drawer keeps the
   viewport as its containing block. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(241, 245, 248, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.4s var(--ease-glass), border-color 0.4s var(--ease-glass);
  pointer-events: none;
}
.site-header.is-stuck::before {
  opacity: 1;
  border-bottom-color: rgba(43, 49, 47, 0.08);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-16);
  min-height: var(--nav-h);
}

/* Desktop links sit in their own glass capsule that floats over the page. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px var(--sp-16);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  transition: color 0.24s var(--ease), background-color 0.3s var(--ease-glass);
}
.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.3s var(--ease-glass), transform 0.4s var(--ease-spring);
  pointer-events: none;
}
.nav-link:hover::before,
.nav-link:focus-visible::before,
.nav-link[aria-current="page"]::before { opacity: 1; transform: scale(1); }
.nav-link[aria-current="page"] { color: var(--green); }

.nav-brand { justify-self: center; display: block; }
.nav-brand img {
  width: clamp(122px, 20vw, 168px);
  transition: transform 0.5s var(--ease-spring);
}
.nav-brand:hover img { transform: scale(1.04); }

.nav-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lang-switch a {
  border-radius: var(--radius-pill);
  opacity: 0.5;
  transition: opacity 0.2s var(--ease), background-color 0.28s var(--ease-glass);
}
.lang-switch a:hover { opacity: 1; }
.lang-switch [aria-current] {
  opacity: 1;
  background: var(--ink);
  color: var(--cream);
}
.lang-sep { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-xs);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition: background-color 0.28s var(--ease-glass), transform 0.4s var(--ease-spring);
}
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle-bars { display: block; width: 20px; height: 12px; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-spring), opacity 0.2s var(--ease);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer lives inside the header so the logo stays visible above it. */
.nav-drawer { display: contents; }
.nav-drawer .drawer-foot { display: none; }

@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-brand { justify-self: start; }
  .nav-toggle { display: inline-flex; justify-self: end; grid-area: 1 / 3; }
  .nav-end { grid-area: 1 / 3; justify-self: end; margin-right: 54px; }
  .nav-end .btn { display: none; }

  .nav-drawer {
    display: block;
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: rgba(241, 245, 248, 0.94);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    padding: var(--sp-32) var(--gutter) var(--sp-50);
    transform: translate3d(0, -14px, 0);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity 0.34s var(--ease-glass), transform 0.44s var(--ease-glass), visibility 0.34s;
    z-index: 95;
  }
  .nav-drawer.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-10);
  }
  .nav-links .nav-link {
    justify-content: space-between;
    padding: var(--sp-19) var(--sp-28);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-sm), var(--glass-rim);
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    font-weight: var(--w-bold);
    letter-spacing: var(--track-heading);
  }
  .nav-links .nav-link::before { display: none; }
  .nav-drawer .drawer-foot {
    margin-top: var(--sp-32);
    padding-top: var(--sp-28);
    border-top: 1px solid rgba(43, 49, 47, 0.1);
    display: grid;
    gap: var(--sp-15);
  }
}

body.is-locked { overflow: hidden; position: fixed; width: 100%; }

/* The lock offsets the body by -scrollY, which drags a sticky header off the
   top of the screen: opening the drawer from mid page hid the close button.
   While locked the header anchors to the viewport instead. */
body.is-locked .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* --------------------------------------------------------------- hero -- */

/* The hero is a tiled wall with the wordmark hung in the middle of it and the
   bowls set out on either side, the way the shop itself reads. The majolica
   runs the full width of the frame, so the wordmark and the buttons sit on
   glass rather than straight on the pattern. */
.hero {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(28px, 5vw, 64px);
}

.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: clamp(380px, 52vh, 600px);
  max-height: 76vh;
  background: var(--sand);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* A 3 by 5 grid of hand painted tiles, repeated. It is the whole picture of
   the wall, so it runs at full colour under only a light cream veil. */
.hero-tiles {
  position: absolute;
  inset: 0;
  background-color: var(--cream);
  background-image: url("/assets/img/tiles/patch-736.webp");
  background-size: clamp(300px, 33vw, 520px) auto;
  background-repeat: repeat;
  background-position: center;
}
@media (min-resolution: 1.5dppx) {
  .hero-tiles { background-image: url("/assets/img/tiles/patch-1200.webp"); }
}
/* The veil is what keeps the majolica behind the bowls instead of beside
   them, and it gives the green wordmark a quiet middle to sit in. */
.hero-tiles::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 58% at 50% 46%, rgba(242, 240, 235, 0.9), rgba(242, 240, 235, 0.24) 72%),
    rgba(242, 240, 235, 0.2);
}

/* One bowl per corner, oversized and running off the frame. */
.hero-corners {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Offsets are fractions of the bowl, not of the frame, so the same slice of
   each bowl stays outside the corner at every viewport width. */
.hero-bowl {
  --bowl: clamp(300px, 38vw, 620px);
  position: absolute;
  width: var(--bowl);
  height: auto;
  filter: drop-shadow(0 22px 38px rgba(43, 49, 47, 0.3));
}
.hero-bowl-tl { left: calc(var(--bowl) * -0.24); top: calc(var(--bowl) * -0.4); transform: rotate(-8deg); }
.hero-bowl-tr { right: calc(var(--bowl) * -0.24); top: calc(var(--bowl) * -0.42); transform: rotate(7deg); }
.hero-bowl-bl { left: calc(var(--bowl) * -0.26); bottom: calc(var(--bowl) * -0.42); transform: rotate(6deg); }
.hero-bowl-br { right: calc(var(--bowl) * -0.22); bottom: calc(var(--bowl) * -0.4); transform: rotate(-7deg); }

/* No plaque under the wordmark. Once the tiles are faded the green reads on
   its own, and a box around the logo is one object too many. The wordmark and
   its two calls to action are one centred stack, not a sign and a floating
   pair at the bottom of the frame. */
.hero-plaque {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
}

.hero-logo {
  display: block;
  width: min(52vw, 700px);
  height: auto;
  object-fit: contain;
}
@media (max-width: 700px) {
  .hero-logo { width: 82vw; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-15);
  justify-content: center;
  max-width: calc(100vw - var(--gutter) * 2);
}

/* Two calls to action of equal weight read as a pair only if they are the
   same size; "Ordina ora" and "Menu" are nowhere near the same length. */
.hero-actions .btn { min-width: clamp(160px, 20vw, 220px); }

/* Sitting on photography, the secondary pill needs its own weight: a solid
   cream fill rather than the page glass, which would vanish over the sand. */
.btn-hero-ghost {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md), var(--glass-rim);
}
.btn-hero-ghost:hover, .btn-hero-ghost:focus-visible {
  background: var(--white);
  color: var(--green);
}

/* ------------------------------------------------------ intro / marks -- */

.mark {
  width: 62px; height: 62px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--green);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-md), var(--glass-rim);
}
.mark svg { width: 30px; height: 30px; display: block; }

.intro-copy > * + * { margin-top: var(--sp-20); }

/* The about copy sits on its own sheet: three centred paragraphs floating on
   bare cream had nothing holding them together. */
.intro-panel {
  position: relative;
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(32px, 4.5vw, 56px) clamp(24px, 4vw, 64px);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--shadow-md), var(--glass-rim);
  isolation: isolate;
}
.intro-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.6), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-glass);
  pointer-events: none;
}
.intro-panel:hover::before { opacity: 1; }
.intro-panel > * + * { margin-top: var(--sp-20); }
.intro-panel .mark { margin-top: calc(clamp(32px, 4.5vw, 56px) * -1 - 31px); }
.intro-panel .eyebrow { margin-top: var(--sp-19); }

/* ------------------------------------------------- dark reveal section -- */

/* The band now wears the brand tan with the same soft blobs as the hero
   artwork, so the cut out bowls land on the ground they were shot on. */
/* The blue majolica in place of the tan blobs. The unit is the source frame
   plus its own mirror, sized to the band height and repeated sideways, so the
   only seam that could show is the one the mirror removes. */
.section-tan {
  position: relative;
  isolation: isolate;
  background-color: var(--cream);
  background-image: url("/assets/img/tiles/blu-780.webp");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center;
  color: var(--ink);
}
@media (min-resolution: 1.5dppx) {
  .section-tan { background-image: url("/assets/img/tiles/blu-1280.webp"); }
}
/* Same veil as the hero: the pattern stays a wall and the green title keeps a
   quiet middle to sit in. It goes on ::after because .reveal-band already
   owns ::before for its halftone and would win at equal specificity. */
/* Behind everything but the tiles: at z-index 0 the veil would also wash out
   the basil layer, which sits below the content. */
.section-tan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 62% at 50% 46%, rgba(242, 240, 235, 0.88), rgba(242, 240, 235, 0.22) 74%),
    rgba(242, 240, 235, 0.24);
}

.reveal-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 7.5vw, 108px);
  border-radius: var(--radius-2xl);
  margin-inline: clamp(0px, 2vw, 28px);
}
@media (max-width: 700px) { .reveal-band { border-radius: var(--radius-xl); margin-inline: 12px; } }

.reveal-band-title {
  color: var(--green);
  font-size: clamp(4rem, 20vw, 18rem);
  font-weight: var(--w-bold);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Halftone dot wash borrowed from the risograph print feel. */
.reveal-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(43, 49, 47, 0.5) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.07;
  pointer-events: none;
}

.reveal-stack {
  position: relative;
  z-index: 3;
  margin-top: clamp(-84px, -7vw, -28px);
  display: flex;
  justify-content: center;
  perspective: 1300px;
}

.reveal-stack-item {
  width: clamp(160px, 25vw, 360px);
  margin-inline: clamp(-48px, -3.4vw, -18px);
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 20px 26px rgba(43, 49, 47, 0.26));
}

.reveal-foot {
  position: relative;
  z-index: 3;
  margin-top: clamp(36px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-28);
  text-align: center;
}

/* --------------------------------------------------------- bowl rail -- */

/* An inert, endlessly scrolling row of bowls. Deliberately not a control:
   aria-hidden, no link, no hover state, no pointer cursor. It shows the range
   and nothing more, so there is nothing for a visitor to try and click.

   The track holds the set twice and travels exactly half its width, which is
   what makes the loop seamless. */
.bowl-rail {
  position: relative;
  overflow: hidden;
  padding-block: clamp(8px, 1.5vw, 18px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bowl-rail-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(20px, 3vw, 48px);
  animation: rail-run 46s linear infinite;
}

.rail-item {
  flex: none;
  display: block;
  width: clamp(150px, 19vw, 268px);
  aspect-ratio: 1;
}
.rail-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(43, 49, 47, 0.18));
}

@keyframes rail-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - clamp(10px, 1.5vw, 24px)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bowl-rail-track { animation: none; }
}

/* --------------------------------------------------------- split rows -- */

.split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-narrow { grid-template-columns: 5fr 6fr; }
  .split-reverse > :first-child { order: 2; }
}

.split-media {
  position: relative;
  max-height: 440px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-lg), var(--glass-rim);
  transform: translate3d(0, 0, 0);
}
.split-media img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; }

/* Cropping this portrait from the centre cut the bowl off the bottom, which
   is the one thing the picture is there to show. */
.split-media-low img { object-position: center 82%; }
.section-ink .split-media { border-color: rgba(255, 255, 255, 0.16); }

/* ------------------------------------------------------------ locales -- */

.locale-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.locale-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-15);
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--shadow-sm), var(--glass-rim);
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-glass);
}
.locale-card:hover { transform: translate3d(0, -5px, 0); box-shadow: var(--shadow-lg), var(--glass-rim); }

.section-ink .locale-card {
  background: var(--glass-fill-dark);
  border-color: var(--glass-stroke-dark);
  box-shadow: var(--glass-rim-dark);
}
.section-ink .locale-card:hover { background: var(--glass-fill-dark-strong); }

.locale-name {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
}

.locale-meta {
  font-size: var(--text-body-sm);
  letter-spacing: var(--track-body-sm);
  line-height: 1.75;
  color: var(--ink-55);
}
.section-ink .locale-meta { color: rgba(242, 240, 235, 0.72); }
.locale-meta a { color: var(--ink); font-weight: var(--w-medium); }
.section-ink .locale-meta a { color: var(--cream); }

.locale-actions {
  margin-top: auto;
  padding-top: var(--sp-15);
  display: grid;
  gap: var(--sp-10);
}

/* Consent gated map: nothing loads until the visitor says yes. */
.map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-lg), var(--glass-rim);
  background: rgba(255, 255, 255, 0.6);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.map-gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-19);
  text-align: center;
  padding: var(--sp-28);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.map-gate p {
  font-size: var(--text-body-sm);
  letter-spacing: var(--track-body-sm);
  line-height: 1.65;
  max-width: 40ch;
  color: var(--ink-55);
}

/* --------------------------------------------------------------- menu -- */

/* The category jump bar sticks under the header as one glass rail. */
.menu-nav {
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 7px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-md), var(--glass-rim);
}
.menu-nav a {
  border-radius: var(--radius-pill);
  padding: 9px var(--sp-16);
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-55);
  transition: background-color 0.28s var(--ease-glass), color 0.28s var(--ease-glass);
}
.menu-nav a:hover { background: var(--ink); color: var(--white); }

.menu-section + .menu-section { margin-top: clamp(48px, 7vw, 88px); }

.menu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10) var(--sp-20);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid rgba(43, 49, 47, 0.1);
}

.menu-note {
  font-size: var(--text-body-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--green);
}

.menu-items {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  align-items: start;
  margin-top: var(--sp-28);
}

/* Each dish gets its own glass tile so the list scans like a card deck. */
.menu-item {
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(158%);
  backdrop-filter: blur(18px) saturate(158%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--shadow-xs), var(--glass-rim);
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-glass);
}
.menu-item:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-md), var(--glass-rim); }

.menu-item-name {
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  line-height: 1.34;
}
.menu-item-name .up {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(66, 90, 50, 0.11);
  color: var(--green);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  vertical-align: middle;
}

.menu-item-desc {
  margin-top: var(--sp-10);
  font-size: var(--text-body-sm);
  letter-spacing: var(--track-body-sm);
  line-height: 1.7;
  color: var(--ink-55);
}

.menu-groups {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  align-items: start;
  margin-top: var(--sp-28);
}

.menu-group {
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(158%);
  backdrop-filter: blur(18px) saturate(158%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--shadow-xs), var(--glass-rim);
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-glass);
}
.menu-group:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-md), var(--glass-rim); }

.menu-group-title {
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
}
.menu-group-rule {
  display: inline-block;
  margin-top: var(--sp-10);
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  background: rgba(66, 90, 50, 0.1);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: var(--w-semibold);
  line-height: 1.5;
}
.menu-group-list {
  margin-top: var(--sp-16);
  display: grid;
  gap: 7px;
  font-size: var(--text-body-sm);
  letter-spacing: var(--track-body-sm);
  line-height: 1.6;
  color: var(--ink-55);
}

.menu-priced {
  margin-top: var(--sp-28);
  display: grid;
  gap: 2px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(158%);
  backdrop-filter: blur(18px) saturate(158%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--shadow-xs), var(--glass-rim);
}
.menu-priced li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-10);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  letter-spacing: var(--track-body-sm);
  transition: background-color 0.24s var(--ease);
}
.menu-priced li:hover { background: rgba(255, 255, 255, 0.7); }
.menu-priced .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(43, 49, 47, 0.22);
  transform: translateY(-4px);
}
.menu-priced .price {
  font-weight: var(--w-semibold);
  white-space: nowrap;
  color: var(--green);
}

/* --------------------------------------------------------- newsletter -- */

.newsletter-form {
  display: grid;
  gap: var(--sp-16);
  max-width: 540px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-md), var(--glass-rim);
}
@media (min-width: 620px) {
  .newsletter-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); }
}

/* ------------------------------------------------------------- footer -- */

.footer-band {
  position: relative;
  background: var(--surface-accent);
  color: var(--cream);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
  margin-top: clamp(20px, 3vw, 40px);
}
.footer-band ::selection { background: var(--cream); color: var(--green); }

/* The same majolica as the hero, sunk under the green so the wall carries
   through to the bottom of the page without ever fighting the cream text. */
.footer-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/tiles/tile-420.webp");
  background-size: clamp(150px, 15vw, 240px);
  background-repeat: repeat;
  opacity: 0.16;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}
@media (min-resolution: 1.5dppx) {
  .footer-band::after { background-image: url("/assets/img/tiles/tile-840.webp"); }
}

.footer-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 260px;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.footer-band > .wrap-wide { position: relative; z-index: 2; }

.footer-top {
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 60px);
  padding-block: clamp(52px, 7vw, 88px);
}
@media (min-width: 860px) {
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* The asset is a square lockup on a light ground, so a full disc reads as a
   deliberate badge rather than a photo with its corners filed off. */
.footer-logo img {
  width: 150px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(20, 26, 20, 0.18);
}
.footer-title {
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: var(--sp-19);
}

.footer-list { display: grid; gap: 2px; }
.footer-list a {
  display: block;
  padding: 7px 11px;
  margin-left: -11px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  letter-spacing: var(--track-body-sm);
  line-height: 1.55;
  transition: background-color 0.26s var(--ease-glass);
}
.footer-list a:hover { background: rgba(255, 255, 255, 0.1); }
.footer-sub { opacity: 0.62; font-size: var(--text-caption); }

.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(242, 240, 235, 0.22);
  padding-block: var(--sp-20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10) var(--sp-20);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}
.footer-bottom a {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  transition: background-color 0.26s var(--ease-glass);
}
.footer-bottom a:hover { background: rgba(255, 255, 255, 0.12); }

/* On a phone the three stacked blocks make the footer as tall as a page. The
   logo keeps its own centred row and the two lists share the one below. */
@media (max-width: 859px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: clamp(26px, 6vw, 40px) var(--sp-20);
  }
  .footer-top > :first-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--sp-10);
    /* The fixed cookie pill lives bottom left and would sit on top of the
       centred legal lines now that they run the full width. */
    padding-bottom: calc(var(--sp-20) + 44px);
  }
}

/* ------------------------------------------------------ cookie banner -- */

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2vw, 22px);
  width: min(1180px, calc(100vw - clamp(16px, 4vw, 44px)));
  z-index: 150;
  border-radius: var(--radius-xl);
  background: rgba(43, 49, 47, 0.88);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-float), var(--glass-rim-dark);
  transform: translate3d(-50%, calc(100% + 30px), 0);
  transition: transform 0.55s var(--ease-glass);
  max-height: min(80vh, 720px);
  overflow-y: auto;
}
.cookie-banner.is-visible { transform: translate3d(-50%, 0, 0); }
.cookie-banner[hidden] { display: none; }
.cookie-banner .wrap-wide { padding-inline: clamp(20px, 3vw, 34px); }

.cookie-inner {
  display: grid;
  gap: var(--sp-20);
  padding-block: clamp(22px, 3vw, 28px);
}
@media (min-width: 940px) {
  .cookie-inner { grid-template-columns: 1fr auto; align-items: center; }
}

.cookie-text {
  font-size: var(--text-body-sm);
  letter-spacing: var(--track-body-sm);
  line-height: 1.65;
  max-width: 74ch;
  color: rgba(242, 240, 235, 0.86);
}
.cookie-text a { border-bottom: 1px solid rgba(242, 240, 235, 0.5); color: var(--cream); }

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
}
.cookie-actions .btn { flex: 1 1 auto; min-width: 148px; }

.cookie-prefs { display: grid; gap: var(--sp-10); margin-top: var(--sp-20); }
.cookie-prefs[hidden] { display: none; }
.cookie-pref {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  padding: var(--sp-16) var(--sp-19);
  display: grid;
  gap: 6px;
}
.cookie-pref-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-15);
  font-size: var(--text-body-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.cookie-pref p {
  font-size: var(--text-caption);
  letter-spacing: var(--track-caption);
  line-height: 1.6;
  opacity: 0.72;
}

.cookie-reopen {
  position: fixed;
  left: var(--sp-16);
  bottom: var(--sp-16);
  z-index: 140;
  background: rgba(43, 49, 47, 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  padding: 10px var(--sp-19);
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease-spring);
}
.cookie-reopen:hover { transform: translate3d(0, -2px, 0); }
.cookie-reopen[hidden] { display: none; }

/* ---------------------------------------------------------- long form -- */

.prose { max-width: 74ch; }
.prose h2 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  margin-top: var(--sp-50);
  margin-bottom: var(--sp-15);
}
.prose h3 {
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  margin-top: var(--sp-30);
  margin-bottom: var(--sp-10);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { font-size: var(--text-body-sm); line-height: 1.8; letter-spacing: var(--track-body-sm); color: var(--ink-55); }
.prose p + p { margin-top: var(--sp-15); }
.prose ul { margin-top: var(--sp-10); display: grid; gap: 6px; }
.prose li { padding-left: var(--sp-19); position: relative; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.prose a { color: var(--ink); border-bottom: 1px solid var(--ink-12); transition: border-color 0.18s var(--ease); }
.prose a:hover { border-bottom-color: var(--green); }

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--sp-15);
  font-size: var(--text-caption);
  letter-spacing: var(--track-caption);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(43, 49, 47, 0.1);
}
.prose th, .prose td {
  border-bottom: 1px solid rgba(43, 49, 47, 0.09);
  padding: var(--sp-10) var(--sp-15);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.prose tr:last-child td { border-bottom: 0; }
.prose th { text-transform: uppercase; font-weight: var(--w-semibold); background: rgba(255, 255, 255, 0.55); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }

/* A glass sheet under legal copy so a wall of text still reads as a page. */
.prose-panel {
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-md), var(--glass-rim);
}

/* ------------------------------------------------------------ 404 etc -- */

.error-page {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* ------------------------------------------------------ order dropdown -- */

.order-pop { position: relative; }
.order-pop > summary {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.order-pop > summary::-webkit-details-marker { display: none; }

.order-pop-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 110;
  min-width: 244px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-lg), var(--glass-rim);
  padding: var(--sp-10);
  display: grid;
  gap: 2px;
  transform-origin: top right;
  animation: pop-in 0.32s var(--ease-spring);
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.94) translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

.order-pop-title {
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  padding: var(--sp-8) var(--sp-10);
}

.order-pop-link {
  display: block;
  padding: var(--sp-10) var(--sp-15);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease-glass), color 0.2s var(--ease-glass);
}
.order-pop-link:hover { background: var(--ink); color: var(--white); }

@media (max-width: 900px) {
  .nav-end .order-pop { display: none; }
}

/* ---------------------------------------------------------- basil layer -- */

/* Cut out basil scattered through the page. Purely decorative: the layer is
   inert to the pointer and hidden from assistive tech. */
.has-basil { position: relative; overflow: clip; }

.basil-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
  perspective: 1000px;
}
.has-basil > *:not(.basil-layer) { position: relative; z-index: 1; }

.basil {
  position: absolute;
  width: var(--basil-w, 130px);
  opacity: 0.92;
  will-change: transform;
  filter: drop-shadow(0 14px 18px rgba(43, 49, 47, 0.16));
}

.section-ink .basil { opacity: 0.85; }
.footer-band .basil { opacity: 0.34; }

@media (max-width: 760px) {
  .basil { width: calc(var(--basil-w, 130px) * 0.6); }
  .basil-hide-sm { display: none; }
}

/* ------------------------------------------------- touch target sizing -- */

/* WCAG 2.2 target size: standalone links need room for a thumb. Inline links
   inside a sentence are exempt, but the ones that read as controls are not. */
.nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 30px;
}

.footer-list a {
  display: inline-block;
  padding: 5px 9px;
  margin-left: -9px;
}

.locale-meta a,
.menu-nav a,
.link-underline {
  display: inline-block;
  padding-block: 4px;
}

.field-check input { width: 24px; height: 24px; margin-top: 0; }

.cookie-text a,
.prose a { padding-block: 3px; }

@media (max-width: 900px) {
  .nav-toggle { width: 46px; height: 46px; }
  .lang-switch a { min-height: 38px; min-width: 36px; }
}

/* ----------------------------------------------------------------- faq -- */

.faq-grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}
@media (min-width: 860px) {
  .faq-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.faq-item {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(158%);
  backdrop-filter: blur(18px) saturate(158%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--shadow-xs), var(--glass-rim);
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-glass);
}
.faq-item:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-md), var(--glass-rim); }

.faq-q {
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  line-height: 1.4;
}

.faq-a {
  margin-top: var(--sp-10);
  font-size: var(--text-body-sm);
  line-height: 1.75;
  letter-spacing: var(--track-body-sm);
  color: var(--ink-55);
}

/* Breadcrumb link inside an eyebrow still needs a thumb sized target. */
.eyebrow a {
  display: inline-block;
  padding: 5px 11px;
  margin-left: -11px;
  border-radius: var(--radius-pill);
  transition: background-color 0.26s var(--ease-glass);
}
.eyebrow a:hover { background: rgba(66, 90, 50, 0.12); }

/* --------------------------------------------------- section headings -- */

/* A hairline pill above a heading, used as a quiet section marker. */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 7px var(--sp-16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-xs), var(--glass-rim);
  color: var(--green);
}
.section-ink .section-badge,
.footer-band .section-badge {
  background: var(--glass-fill-dark);
  border-color: var(--glass-stroke-dark);
  box-shadow: var(--glass-rim-dark);
  color: var(--cream);
}

/* ------------------------------------------------ glass on white bands -- */

/* A white tile on a white section reads only by its shadow. On those bands
   the same material tints to cream so the card edge is legible. */
.section-white .faq-item,
.section-white .menu-item,
.section-white .menu-group,
.section-white .menu-priced,
.section-white .locale-card,
.section-white .newsletter-form,
.section-white .prose-panel,
.section-white .bowl-card { background: rgba(227, 202, 171, 0.36); }
.section-white .bowl-card-media { background: rgba(255, 255, 255, 0.8); }

/* -------------------------------------------------------- slogan band -- */

/* The claim closes the page. Full bleed brand green, the line broken in two
   so the Hawaiian half and the Italian half each get their own weight. */
.slogan-band {
  position: relative;
  background-color: var(--green);
  /* Soft, off centre pools of light in the brand greens and sand. The old
     dot grid plus a centred ellipse read as a chart, not as a backdrop. */
  background-image:
    radial-gradient(58% 74% at 14% 8%, rgba(98, 112, 35, 0.85), transparent 64%),
    radial-gradient(46% 62% at 88% 26%, rgba(227, 202, 171, 0.22), transparent 66%),
    radial-gradient(64% 80% at 74% 104%, rgba(31, 43, 28, 0.75), transparent 68%),
    radial-gradient(40% 56% at 34% 96%, rgba(98, 112, 35, 0.5), transparent 70%);
  color: var(--cream);
  padding-block: clamp(76px, 12vw, 156px);
  text-align: center;
  overflow: hidden;
}
.slogan-band > * { position: relative; z-index: 1; }

.slogan-text {
  font-size: clamp(2rem, 1rem + 4.4vw, 5rem);
  font-weight: var(--w-bold);
  line-height: 1.02;
  letter-spacing: var(--track-heading-lg);
  text-transform: uppercase;
}
.slogan-line { display: block; }
.slogan-line-alt { font-style: italic; color: var(--sand); }




/* A four word heading has no reason to wrap. */
.rail-title { max-width: none; text-wrap: balance; white-space: nowrap; }
@media (max-width: 560px) { .rail-title { white-space: normal; } }

/* ------------------------------------------------------- menu photos -- */

/* The shoot is cut out on the brand tan, so a photo sits in a tan tile and
   the two grounds meet without an edge. */
.menu-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-item.has-photo {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--sp-19);
  align-items: center;
}
.menu-item-media {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--sand);
  box-shadow: inset 0 0 0 1px rgba(43, 49, 47, 0.05);
}

/* A row of tiles that each carry a photo needs more width for its text. */
.menu-items:has(.has-photo) { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.drink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  align-items: stretch;
  margin-top: var(--sp-28);
  perspective: 1400px;
}

.drink-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-16) var(--sp-16) var(--sp-20);
  border-radius: var(--radius-lg);
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--shadow-xs), var(--glass-rim);
  transform-style: preserve-3d;
  transition: box-shadow 0.5s var(--ease-glass);
  isolation: isolate;
}
.drink-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.75), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-glass);
  pointer-events: none;
}
.drink-card:hover { box-shadow: var(--shadow-lg), var(--glass-rim); }
.drink-card:hover::before { opacity: 1; }

.drink-card-media {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--sand);
  box-shadow: inset 0 0 0 1px rgba(43, 49, 47, 0.05);
}
.drink-card-media .menu-photo { transition: transform 0.6s var(--ease-spring); }
.drink-card:hover .menu-photo { transform: translate3d(0, -5px, 30px) scale(1.05); }

.drink-card-name {
  font-size: var(--text-body-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  line-height: 1.35;
}

/* The line under the name: a price on a drink, the ingredients on a bowl. */
.drink-card-sub {
  font-size: var(--text-body-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-body-sm);
  line-height: 1.5;
  color: var(--green);
}

/* One card per row put the drinks section alone at nearly 4000px of scroll on
   a phone. Two up keeps every card the same size as its neighbours and cuts
   the menu page to a third of its height. */
@media (max-width: 620px) {
  .drink-grid { grid-template-columns: repeat(2, 1fr); }
  .drink-card { padding: var(--sp-10) var(--sp-10) var(--sp-16); }
  .drink-card-name { font-size: var(--text-caption); letter-spacing: 0.04em; }
  .drink-card-sub { font-size: var(--text-caption); }
}

/* The house bowls read their ingredients rather than a price, so the line
   under the name is body copy, not an accent. Same card, same track. */
.drink-grid-wide .drink-card-sub {
  font-weight: var(--w-regular);
  color: var(--ink-55);
}

/* ---------------------------------------------------------- allergens -- */

/* auto-fill keeps the track width fixed and grid-auto-rows: 1fr makes every
   row as tall as the tallest box in it, so the two line entry does not leave
   its neighbours short. */
.allergen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-10);
}

.allergen {
  display: flex;
  align-items: center;
  gap: var(--sp-15);
  padding: var(--sp-15) var(--sp-19);
  border-radius: var(--radius-lg);
  background: rgba(227, 202, 171, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 49, 47, 0.05), var(--glass-rim);
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-body-sm);
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-glass);
}
.allergen:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-md), var(--glass-rim); }

.allergen-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--cream);
  font-size: var(--text-caption);
  font-weight: var(--w-bold);
}

@media (max-width: 480px) {
  .menu-item.has-photo { grid-template-columns: 82px 1fr; gap: var(--sp-15); }
}

/* ------------------------------------------------ allergen tags in menu -- */

.menu-legend {
  margin-top: var(--sp-16);
  font-size: var(--text-caption);
  letter-spacing: var(--track-caption);
  line-height: 1.6;
  color: var(--ink-55);
  max-width: 78ch;
}
/* A 52x16 link is not a thumb target. WCAG 2.2 wants 24px of height. */
.menu-legend a {
  display: inline-block;
  padding: 5px 2px;
  color: var(--green);
  border-bottom: 1px solid currentColor;
}

/* Badges run inline after the name. Right aligning them into a column looked
   tidier on one line names, but the moment a name wrapped the badge dropped
   to its own row and left a ragged hole down the list. */
.menu-group-list li { display: block; }
.opt-name { min-width: 0; }

.tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: -3px;
}

/* A choice with a photo keeps the thumbnail, name and badges on one row. */
.menu-group-list li:has(.opt-shot) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sp-15);
  padding-block: 3px;
}
.menu-group-list li:has(.opt-shot) .opt-name { flex: 1 1 auto; }
.menu-group-list li:has(.opt-shot) .tags { margin-left: auto; }

.opt-shot {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--sand);
  box-shadow: inset 0 0 0 1px rgba(43, 49, 47, 0.06);
}

.tag {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--cream);
  font-size: 0.6875rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  line-height: 1;
}

.tag-note {
  background: rgba(98, 112, 35, 0.13);
  color: var(--olive);
  font-size: 0.625rem;
  font-weight: var(--w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  height: auto;
  padding: 3px 9px;
  text-align: center;
  line-height: 1.3;
}