/* =====================================================================
   Souvlaki Shop layer (non-hero). Hero styles live in hero.css.
   System: paper #f4f0e6 page, one accent (shop blue), ink text.
   Light source: upper-left; shadows fall lower-right, tinted with ink.
   ===================================================================== */
:root {
  --red: #0419a8;
  --blue: #101a43;
  --grey: #f4f0e6;
  --dark-grey: #ddd8ca;
  --shop-blue: #0419a8;
  --shop-ink: #101a43;
  --shop-line: rgba(4, 25, 168, .25);
  --paper: #f4f0e6;
  --paper-2: #ebe5d6;
  --paper-3: #fbf9f4;
  --line-soft: rgba(4, 25, 168, .16);
  --on-blue-line: rgba(244, 240, 230, .28);
  --shadow-1: 3px 6px 14px -6px rgba(16, 26, 67, .24);
  --shadow-2: 8px 16px 32px -14px rgba(16, 26, 67, .32);
  --shadow-3: 16px 30px 60px -24px rgba(16, 26, 67, .42);
  --shadow-on-blue: 12px 22px 40px -16px rgba(2, 8, 48, .55);
  --photo-radius: clamp(14px, 1.6vw, 24px);         /* one frame for every food photo: rounded rectangle, no outline */
  --photo-edge: inset 0 0 0 1px rgba(255, 255, 255, .14);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: 16px;
  --section-y: clamp(80px, 9vw, 136px);
  /* Focus ring: shop-blue on paper/cream (≥3:1); flipped to paper on the blue-background
     containers below so it keeps ≥3:1 there too. Forced-colors swaps it to the system Highlight. */
  --focus-ring: var(--shop-blue);
  /* z-index scale (this layer only; the theme's header/hamburger/nav overlay sit at 10 in theme.min.css).
     Every value below is unchanged from before this scale existed — see file comments at each use site.
       -1  --z-behind        tucked behind its own section (favourites' round photo)
        0  --z-base          shop-accents layer, under its section's content
        1  --z-raised        content lifted above a local decorative backdrop
        2  --z-lift          the active member of a local group (active slide/tag/toy layer/fan card)
        3  --z-front         topmost chrome inside one component (close buttons, letterbox bars)
        6  --z-hero-tags     hero food-tag leader lines + tickets
        9  --z-fab           the "the menu" badge — stays under the theme header/hamburger/nav (10)
       10  --z-grain         paper grain; cinematic film grain sits one above at --z-grain + 1
       20  --z-mosaic-hover  feast tile lifted on hover/focus
       30  --z-mosaic-active feast tile picked up (aria-pressed)
    10001  --z-skip          skip link, always topmost */
  --z-behind: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-lift: 2;
  --z-front: 3;
  --z-hero-tags: 6;
  --z-fab: 9;
  --z-grain: 10;
  --z-mosaic-hover: 20;
  --z-mosaic-active: 30;
  --z-skip: 10001;
}
@media (min-width: 768px) {
  :root {
    --gutter: 6vw;
  }
}

/* ---------- Base ---------- */
html {
  scroll-padding-top: 35px;
  scroll-behavior: auto; /* Lenis owns smooth scrolling; theme.min.css sets smooth, which double-eases hash/focus/back-forward jumps */
}
/* Lenis adds `lenis-stopped` (theme.min.css: overflow: clip) while a sheet, viewer or nav is open. Switching
   `html` overflow moves the scrolling element and unpins the sticky scroll reel and food show, and Safari keeps
   them unpinned after close. Lenis already swallows wheel and touch while stopped, so keep the original value. */
html.lenis.lenis-stopped {
  overflow: visible;
}
body {
  background-color: var(--paper);
  background-image: none;
}
/* Paper grain: one fixed, composited layer; never repaints on scroll.
   Switched off while html.cinematic is active (cinematic.css draws its own grain) so only
   one full-viewport grain layer composites at a time. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: url("../assets/paper-grain.webp") repeat 0 0 / 135px 107px;
  opacity: .16;
}
html.cinematic body::after {
  display: none;
}
main {
  overflow-x: clip; /* skewed marquee + parallax accents never widen the page */
}
button {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
/* Blue-background sections: flip the ring to paper so it keeps ≥3:1 against shop-blue. */
:is(.o-products--red, .o-brand, .m-header__menu-mobile, .o-footer, .m-news-card) {
  --focus-ring: var(--paper);
}
@media (forced-colors: active) {
  :root {
    --focus-ring: Highlight;
  }
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 10px;
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--shop-blue);
  color: var(--paper);
  transform: translateY(-200%);
  --focus-ring: var(--paper); /* it's a blue-filled pill itself: keep the ring readable against its own fill */
}
.skip-link:focus {
  transform: translateY(0);
}
.shop-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
:is(h2, h3, .a-heading) {
  text-wrap: balance;
}
:is(p, .a-text, address) {
  text-wrap: pretty;
}
:is(.o-about, .o-products, .o-news-slider, .o-brand, .shop-section) .e-reveal--heading {
  column-gap: .3em;
}
.shop-wordmark {
  font-family: var(--veneer);
  font-size: 36px;
  line-height: .8;
  letter-spacing: -.02em;
  display: block;
  color: var(--shop-blue);
  text-align: center;
}

/* ---------- Buttons: one press language everywhere ---------- */
.a-btn {
  min-height: 48px;
  transition:
    clip-path .85s var(--ease-out),
    color .2s ease,
    background-color .2s ease,
    box-shadow .25s ease,
    transform .2s var(--ease-out);
}
@media (hover: hover) {
  .a-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
}
.a-btn:active,
.shop-section .button:active,
.m-header__menu-mobile .a-icon--close:active,
.a-icon--menu.a-icon--menu-fixed:active,
.swiper-button-next:active,
.swiper-button-prev:active {
  transform: scale(.98);
  transition-duration: .1s;
}
.shop-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform .2s var(--ease-out);
}

/* ---------- Header + fixed menu button ---------- */
.o-header .a-logo {
  min-width: 140px;
}
/* Veneer's cap tops sit above the .8 line box. The theme fades this logo in with
   opacity + scale + blur (gsap headerEffect), which rasterises it on its own layer
   clipped to its border box, so Safari cut the letter tops off and flickered.
   Give the box room for the overflow (padding, cancelled by margin so nothing moves)
   and keep it on one stable layer instead of promoting and dropping it mid-animation. */
.o-header .a-logo,
.nf-header .a-logo {
  padding-block: 16px;
  margin-block: -16px;
}
.o-header .a-logo {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
.o-header .a-icon-menubar {
  color: var(--shop-blue);
}
.o-header button.a-language {
  background: transparent;
  border: 0;
  color: var(--shop-blue);
  min-width: 55px;
  min-height: 55px;
}
.o-header .a-language::before {
  border-color: var(--shop-blue);
}
.o-header .a-language:active {
  transform: scale(.96);
}
.a-icon--menu,
.a-icon--close {
  border: 0;
  min-height: 44px;
  min-width: 44px;
}
.o-header .a-icon--menu {
  background: transparent;
}
.a-icon--menu.a-icon--menu-fixed {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background-color: var(--shop-blue);
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  transition: opacity .3s ease, scale .35s var(--ease-out), transform .15s var(--ease-out);
}
/* Fixed over every section colour as the page scrolls: a single outline colour can't promise 3:1
   against both paper and blue backgrounds, so the focus ring is a paper/blue sandwich instead —
   one of the two rings always contrasts with whatever is behind it. */
.a-icon--menu.a-icon--menu-fixed:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--shop-blue), var(--shadow-2);
}
@media (forced-colors: active) {
  .a-icon--menu.a-icon--menu-fixed {
    border-color: ButtonText;
  }
  .a-icon--menu.a-icon--menu-fixed:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}

/* ---------- Navigation overlay ---------- */
.m-header__menu-mobile {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  background-color: var(--shop-blue);
  background-image: none;
  transition: transform .5s var(--ease-drawer), visibility 0s linear 0s;
}
.m-header__menu-mobile[inert] {
  visibility: hidden;
  transition: transform .4s var(--ease-drawer), visibility 0s linear .4s;
}
.m-header__menu-mobile::before {
  display: none;
}
.m-header__menu-mobile .a-icon--close {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--paper);
  color: var(--shop-blue);
  box-shadow: var(--shadow-on-blue);
  transition: transform .15s var(--ease-out);
}
.m-header__menu-list li > a,
.m-header__menu-list .h-whitesmoke {
  color: var(--paper);
  transition: color .2s ease, transform .3s var(--ease-out);
}
.m-header__menu-list li {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .25s ease, transform .25s var(--ease-out);
}
.m-header__menu-mobile.active .m-header__menu-list li {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .6s var(--ease-out);
}
.m-header__menu-mobile.active .m-header__menu-list li:nth-child(1) { transition-delay: .12s; }
.m-header__menu-mobile.active .m-header__menu-list li:nth-child(2) { transition-delay: .17s; }
.m-header__menu-mobile.active .m-header__menu-list li:nth-child(3) { transition-delay: .22s; }
.m-header__menu-mobile.active .m-header__menu-list li:nth-child(4) { transition-delay: .27s; }
.m-header__menu-mobile.active .m-header__menu-list li:nth-child(5) { transition-delay: .32s; }
@media (hover: hover) {
  .m-header__menu-list:hover > li:not(:hover) > a {
    color: var(--paper);
  }
  .m-header__menu-list:has(> li > a:hover) > li > a:not(:hover) {
    color: rgba(244, 240, 230, .42);
  }
  .m-header__menu-list li:hover > a {
    transform: translateX(10px);
  }
}
.shop-nav-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  margin: 0 var(--gutter);
  padding: 24px 0 32px;
  border-top: 1px solid var(--on-blue-line);
  color: var(--paper);
  text-align: left;
}
.shop-nav-note {
  font-size: 15px;
  opacity: .8;
}
.shop-nav-shops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.shop-nav-shops li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-nav-shops span {
  opacity: .8;
}
.shop-nav-shops a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.shop-nav-shops a:hover {
  text-decoration-color: currentColor;
}

/* ---------- About: "Pull up a chair" ---------- */
.o-about .a-text {
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
}
.o-about .a-text + .a-text {
  margin-top: 1em;
}
.o-about .a-btn {
  margin-top: 12px;
}
.o-about .m-products--rotated {
  aspect-ratio: 1/1.1;
}
.o-about .m-products--rotated .a-img {
  width: 61%;
  height: 75%;
  object-fit: cover;
  border-radius: var(--photo-radius);
  border: 0;
  box-shadow: var(--shadow-3);
}
.o-about .m-products--rotated .a-img:nth-child(2),
.o-about .m-products--rotated .a-img:nth-child(3) {
  height: 68%;
  bottom: 0;
}

/* ---------- Favourites slider (blue) ---------- */
.o-products--red {
  padding-bottom: clamp(160px, 15vw, 240px);
}
.o-products--red .m-products {
  width: 100%;
  height: clamp(380px, 35vw, 620px);
  isolation: isolate;
}
.o-products--red .m-products > .a-img:first-child {
  height: 90%;
  width: 48%;
  max-width: 48%;
  object-fit: cover;
  border-radius: var(--photo-radius);
  border: 0;
  box-shadow: var(--shadow-on-blue);
}
.o-products--red .m-products > .a-img:nth-child(2) {
  width: 40%;
  max-width: 40%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  left: 56%;
  border-radius: var(--photo-radius);
  border: 0;
  box-shadow: var(--shadow-on-blue);
  z-index: var(--z-behind);
}
.o-products--red .swiper-slide .m-content .a-tag {
  font-size: clamp(26px, 2.2vw, 34px);
  text-wrap: balance;
}
.o-products--red .swiper-slide-active {
  z-index: var(--z-lift); /* active dish copy always sits above the neighbouring slides' photos */
}
.o-products--red .swiper-pagination {
  flex: none;
  white-space: nowrap;
}
.shop-product-arrow {
  font-size: 56px;
  line-height: 1;
}
.swiper-button-next,
.swiper-button-prev {
  border: 0;
  background: transparent;
  min-width: 52px;
  min-height: 52px;
  transition: transform .2s var(--ease-out), opacity .2s ease;
}
@media (hover: hover) {
  .swiper-button-prev:hover {
    transform: translateX(-4px);
  }
  .swiper-button-next:hover {
    transform: translateX(4px);
  }
}
.o-products--red .h-wave path {
  fill: var(--shop-blue);
}
.o-products--red .svg-circle circle:not(:last-child) {
  stroke: #3047c6;
}
.o-products--red .svg-circle circle:last-child {
  display: none;                                      /* the theme's cream stage disc: photos now stand on their own */
}

/* ---------- Marquee ---------- */
.shop-marquee {
  padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 56px);
  color: var(--shop-blue);
  overflow: hidden;
  transform-origin: 50% 50%;
  /* sections.js skews the strip while scrolling and clears it when scrolling stops. Keep it on one stable
     GPU layer with its paint contained to its own box: promoting and dropping the layer on every scroll
     left stale fragments of the letters on screen. */
  will-change: transform;
  contain: paint;
  backface-visibility: hidden;
}
.shop-marquee .m-marquee__inner {
  will-change: translate, transform;
}
.shop-marquee .m-marquee__inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  flex-shrink: 0;
  padding-right: clamp(24px, 3vw, 48px);
  white-space: nowrap;
  font-family: var(--veneer);
  font-size: clamp(56px, 7vw, 112px);
  line-height: 1;
}
.shop-key {
  flex: none;
  width: .42em;
  height: .42em;
  color: var(--shop-blue);
}
/* Veneer has no Greek glyphs: set the Greek word as a deliberate serif italic accent. */
.shop-marquee-greek {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: .74em;
  letter-spacing: 0;
}

/* ---------- Feast: editorial copy + photo mosaic ---------- */
.shop-section.shop-feast {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(90px, 10vw, 160px);
}
.feast-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.feast-copy .a-heading {
  max-width: 9ch;
  line-height: .92;
  color: var(--shop-blue);
}
.feast-text {
  max-width: 32ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--shop-ink);
}
.feast-copy .a-btn {
  margin-top: 8px;
}
.feast-mosaic {
  /* the table: six photos laid askew at their natural shape; positions are inline --l/--t/--w,
     --r = resting angle, --d = depth (pointer parallax + scroll drift), --fx/--fy = where it is dealt from */
  --ease-deal: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  aspect-ratio: 1.2;
  perspective: 1400px;
}
.feast-tile {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  z-index: calc(var(--z-raised) + var(--i));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  rotate: var(--r);
  -webkit-tap-highlight-color: transparent;
  transition: translate 900ms var(--ease-deal) calc(var(--i) * 70ms),
              scale 900ms var(--ease-deal) calc(var(--i) * 70ms),
              opacity 400ms ease calc(var(--i) * 70ms),
              rotate 450ms var(--ease-out);
}
/* dealt in from a pile when the section arrives: hidden only once JS is known to run (html.js),
   sections.js adds .is-dealt; without JS or with reduced motion the table is simply laid out */
.js .feast-mosaic:not(.is-dealt) .feast-tile {
  translate: var(--fx) var(--fy);
  scale: .82;
  opacity: 0;
}
.feast-photo {
  display: block;
  overflow: hidden;
  border-radius: var(--photo-radius);
  box-shadow: var(--shadow-3), var(--photo-edge);
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out), opacity 300ms ease, filter 300ms ease;
}
.feast-photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale 600ms var(--ease-out);
}
.feast-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px 4px;
  background: var(--paper);
  color: var(--shop-blue);
  font-family: var(--monday), cursive;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.1;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out), translate 300ms var(--ease-out);
}
/* hover (fine pointers) and keyboard focus: the photo lifts and straightens, its label slides up */
@media (hover: hover) and (pointer: fine) {
  .feast-tile:hover .feast-photo {
    transform: translate3d(0, -8px, 0) rotate(calc(var(--r) * -1)) scale(1.04);
    box-shadow: 22px 40px 70px -26px rgba(16, 26, 67, .5), var(--photo-edge);
  }
  .feast-tile:hover .feast-photo img {
    scale: 1.05;
  }
  .feast-tile:hover .feast-caption {
    opacity: 1;
    translate: 0 0;
  }
  .feast-tile:hover {
    z-index: var(--z-mosaic-hover);
  }
}
.feast-tile:focus-visible {
  outline: none;
  /* the mosaic overlaps every tile askew; without this a neighbouring tile can sit over part
     of the ring below and hide it, so a focused tile is lifted the same as a hovered one */
  z-index: var(--z-mosaic-hover);
}
.feast-tile:focus-visible .feast-photo {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
.feast-tile:focus-visible .feast-caption {
  opacity: 1;
  translate: 0 0;
}
.feast-tile:active .feast-photo {
  transform: translate3d(0, -2px, 0) scale(.985);
  transition-duration: 120ms;
}
/* picked up: clicked or tapped tile comes forward, straightens; the rest of the table dims */
.feast-tile[aria-pressed="true"] {
  z-index: var(--z-mosaic-active);
  rotate: 0deg;
}
.feast-tile[aria-pressed="true"] .feast-photo {
  transform: translate3d(0, -10px, 0) scale(1.12);
  box-shadow: 26px 48px 90px -30px rgba(16, 26, 67, .55), var(--photo-edge);
}
.feast-tile[aria-pressed="true"] .feast-caption {
  opacity: 1;
  translate: 0 0;
}
.feast-mosaic.has-lifted .feast-tile[aria-pressed="false"] .feast-photo {
  opacity: .45;
  filter: saturate(.6);
}

/* ---------- "At our table" cards ---------- */
.o-news-slider {
  overflow-x: clip;
}
.o-news-slider .swiper {
  width: min(74vw, 420px);
  margin-inline: auto;
  overflow-x: visible !important;
}
@media (min-width: 1025px) {
  .o-news-slider .swiper {
    width: min(34vw, 420px);
  }
}
.o-news-slider .swiper-slide {
  top: 0;
  transition-property: transform, opacity;
}
.o-news-slider .m-news-card {
  box-shadow: var(--shadow-3);
}
.o-news-slider .m-news-card .m-img .a-img {
  aspect-ratio: 1.25;
  object-fit: cover;
}
.o-news-slider .m-tag {
  justify-content: center;
  padding: 8px 14px 6px;
  background: var(--paper);
  color: var(--shop-blue);
  backdrop-filter: none;
  box-shadow: var(--shadow-1);
}
.o-news-slider .m-tag .a-tag {
  color: var(--shop-blue);
}
.o-news-slider .m-news-card .a-text {
  max-width: 30em;
  margin-inline: auto;
}
/* Close the section tightly: the theme reserves 120px (margin 90 + a -35px shift) for a 30px arrow row.
   A blue wave (the next section's own edge shape, flipped) leads straight into "Find your favourite",
   so the blue is already there instead of wiping in over an empty paper band. */
#our-table {
  --table-wave: clamp(40px, 5.7vw, 110px);
  position: relative;
  padding-bottom: calc(clamp(40px, 4vw, 64px) + var(--table-wave));
}
.o-news-slider .m-navigation {
  margin-top: 28px;
  transform: none;
}
#our-table::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--table-wave);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1938 110' preserveAspectRatio='none'%3E%3Cpath d='M0 103V-668H1938V42C1937.03 41.7882 1936.05 41.6346 1935.06 41.54C1914.42 40.76 1893.78 39.74 1873.13 39.29C1774.42 37.15 1675.95 39.86 1577.99 53.61C1526.99 60.76 1476.55 70.05 1426.99 83.83C1366.88 100.51 1306.26 103.49 1245.2 89.74C1222.34 84.6 1199.78 78.12 1176.93 72.93C1125 61.0666 1072.34 52.6714 1019.29 47.8C983.97 44.58 948.58 41.18 913.17 40.28C861.22 39 809.2 39 757.24 40C716.63 40.78 676.01 43.16 635.49 46.23C597.49 49.11 559.55 53.13 521.75 57.95C482.65 62.95 443.66 68.95 404.75 75.54C361.75 82.83 319.14 91.88 276.17 99.05C238.688 105.208 200.801 108.577 162.82 109.13C158.2 109.21 153.58 109.69 148.96 109.99H83.96C83.0331 109.682 82.0786 109.465 81.11 109.34C64.22 108.48 47.32 107.94 30.46 106.73C20.29 106 10.16 104.28 0 103Z' fill='%230419a8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}
.o-brand.e-reveal--section {
  clip-path: none;
}

/* ---------- Cravings: 3D category tiles ---------- */
.o-brand .m-content .a-heading,
.o-brand .m-content .a-tag {
  color: var(--paper);
}
.o-brand .shop-cravings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px clamp(14px, 2vw, 30px);
  align-items: stretch;
}
.o-brand .shop-cravings-grid .shop-category {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--outfit);
  text-align: left;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
@media (scripting: enabled) {
  .o-brand .shop-category.e-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .6s ease, transform .8s var(--ease-out);
  }
  .o-brand .shop-category.e-reveal.visible {
    opacity: 1;
    transform: none;
  }
  .shop-category:nth-child(4n+2) { transition-delay: 70ms; }
  .shop-category:nth-child(4n+3) { transition-delay: 140ms; }
  .shop-category:nth-child(4n+4) { transition-delay: 210ms; }
}
.shop-category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 330px;
  padding: 26px 14px 30px;
  border-top: 1px solid var(--on-blue-line);
  transform-style: preserve-3d;
  transition: scale .15s var(--ease-out), background-color .25s ease;
}
.shop-category-photo {
  display: block;
  position: relative;
  width: 76%;
  aspect-ratio: 1;
  align-self: center;
  margin: 0 0 16px;
  transform: translateZ(36px) rotate(-6deg);
  transition: transform .55s var(--ease-spring);
}
.shop-category:nth-child(2n) .shop-category-photo {
  transform: translateZ(36px) rotate(6deg);
}
.shop-category-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--photo-radius);
  border: 0;
  box-shadow: var(--shadow-on-blue);
  transition: box-shadow .45s var(--ease-out);
}
.shop-category-number {
  position: absolute;
  left: 14px;
  top: 26px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .7;
  transform: translateZ(12px);
}
.o-brand .shop-category-label {
  position: relative;
  font-family: var(--veneer);
  font-size: clamp(37px, 4.15vw, 66px);
  line-height: 1;
  letter-spacing: -.02em;
  transform: translateZ(24px);
}
.shop-category-description {
  max-width: 82%;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--paper);
  opacity: .85;
  transform: translateZ(14px);
}
.shop-category-arrow {
  position: absolute;
  right: 12px;
  bottom: 30px;
  width: 28px;
  height: 28px;
  transform: translateZ(28px);
  transition: transform .3s var(--ease-out);
}
.shop-category-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover: hover) {
  .shop-category:hover .shop-category-card {
    background-color: rgba(255, 255, 255, .04);
  }
  .shop-category:hover .shop-category-sheen {
    opacity: 1;
  }
}
.shop-category:is(:hover, :focus-visible) .shop-category-photo {
  transform: translateZ(80px) rotate(0deg) scale(1.04);
}
.shop-category:is(:hover, :focus-visible) .shop-category-photo img {
  box-shadow: 22px 34px 48px -18px rgba(2, 8, 48, .6);
}
.shop-category:is(:hover, :focus-visible) .shop-category-arrow {
  transform: translateZ(28px) translate(4px, -4px);
}
.shop-category:active .shop-category-card {
  scale: .98;
}

/* ---------- Shared shop sections (menu, locations) ---------- */
.shop-section {
  position: relative;
  padding: var(--section-y) var(--gutter);
  color: var(--shop-blue);
  text-align: left;
}
.shop-section > :not(.shop-accents) {
  position: relative;
  z-index: var(--z-raised);
}
.shop-section h2,
.shop-section h3,
.shop-section .phone {
  font-family: var(--veneer);
  font-weight: 400;
  line-height: 1;
}
.shop-section h2 {
  font-size: clamp(64px, 8vw, 128px);
  line-height: .92;
}
.shop-section .section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.shop-section .eyebrow {
  justify-content: flex-start;
  column-gap: .45em;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}
.shop-section .section-aside {
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--shop-ink);
}

/* Floating ingredient accents (decorative, parallax driven by sections.js) */
.shop-accents {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  overflow: hidden;
  pointer-events: none;
}
.shop-accent {
  position: absolute;
  height: auto;
  filter: drop-shadow(10px 16px 14px rgba(16, 26, 67, .26));
  /* no permanent will-change: sections.js writes a transform on these every tick only while their
     section is in the scroll-progress range (or a toy is being played with); the compositor promotes
     them for that window on its own, so a standing layer isn't needed the rest of the time */
}

/* ---------- Menu ---------- */
.shop-accent--skewer {
  top: clamp(70px, 7vw, 120px);
  left: 44%;
  width: clamp(240px, 24vw, 380px);
  rotate: -14deg;
}
/* Menu food cluster: positions come from inline --l/--t/--w/--r (phone: --mr/--ml, --mt, --mw).
   Toys take the pointer (sections.js: repel, hover lift, click pop); the layer itself stays click-through. */
.shop-accent--pos {
  left: var(--l);
  top: var(--t);
  width: var(--w);
  rotate: var(--r);
}
.shop-accent--toy {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.shop-accents--menu {
  z-index: var(--z-lift);                             /* above the content wrappers so toys get the pointer */
}
.shop-accents--menu .shop-accent--skewer {
  z-index: var(--z-raised);
}
.shop-section .menu-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(32px, 5vw, 72px);
  padding-top: 36px;
  border-top: 2px solid var(--shop-blue);
}
.shop-section .menu-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.shop-section .menu-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--shop-blue);
  font-family: var(--outfit);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition: background-color .2s ease, color .2s ease, transform .15s var(--ease-out);
}
.menu-tab-count {
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(4, 25, 168, .08);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s ease;
}
@media (hover: hover) {
  .shop-section .menu-tabs button:hover:not([aria-selected=true]) {
    background: rgba(4, 25, 168, .07);
  }
}
.shop-section .menu-tabs button:active {
  transform: scale(.98);
}
.shop-section .menu-tabs button[aria-selected=true] {
  background: var(--shop-blue);
  color: var(--paper);
  box-shadow: var(--shadow-1);
}
.shop-section .menu-tabs button[aria-selected=true] .menu-tab-count {
  background: rgba(244, 240, 230, .18);
}
.shop-section .menu-panel {
  min-height: 460px;
}
.shop-section .menu-panel h3 {
  font-size: clamp(40px, 4vw, 56px);
}
.shop-section .menu-note {
  margin: 10px 0 24px;
  max-width: 50ch;
  font-size: 16px;
  color: var(--shop-ink);
}
.shop-section .menu-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-section .menu-items li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 68px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.shop-section .menu-item-name {
  display: block;
  font-size: 17px;
  font-weight: 500;
}
.shop-section .menu-item-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--shop-ink);
  opacity: .8;
}
.shop-section .menu-items li.has-photo {
  padding: 0;
}
.shop-section .menu-item-button {                    /* the whole row opens the photo viewer */
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 68px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.shop-section .menu-item-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 16px;
}
.shop-section .menu-item-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-soft);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.shop-section .menu-item-photo {                     /* Uber Eats product shots are on white; the tile keeps that white off the paper */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease-out);
}
.shop-section .menu-item-zoom {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--shop-blue);
  color: var(--paper);
}
@media (hover: hover) {
  .shop-section .menu-item-button:hover .menu-item-thumb {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--shop-line), var(--shadow-1);
  }
  .shop-section .menu-item-button:hover .menu-item-photo {
    transform: scale(1.08);
  }
}
.shop-section .menu-item-button:active .menu-item-thumb {
  transform: scale(.96);
}

/* Prices: one on the name line, sizes and variants as a row under the note (both menus) */
.menu-item-text {
  flex: 1;
  min-width: 0;
}
.menu-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.menu-item-price {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-item-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 8px;
}
.menu-item-option {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 14px;
}
.menu-item-option-label {
  opacity: .78;
}
.menu-item-grid {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: 4px 22px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
}
.menu-item-grid-row {
  display: contents;
}
.menu-item-grid-col {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
  opacity: .72;
}
.menu-item-grid-label {
  font-size: 14px;
  white-space: nowrap;
  opacity: .85;
}
.menu-item-grid .menu-item-price {
  font-size: 14px;
  text-align: right;
}
.shop-section .menu-item-grid {
  background: rgba(4, 25, 168, .07);
}
.shop-section .menu-item-price {
  color: var(--shop-blue);
  font-size: 16px;
}
.shop-section .menu-item-option {
  background: rgba(4, 25, 168, .07);
}
.shop-section .menu-item-option .menu-item-price {
  font-size: 14px;
}

/* Order block closing the menu: delivery apps per shop, how to pay, where prices come from */
.menu-order {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 2px solid var(--shop-blue);
}
.menu-order-title {
  margin: 0 0 14px;
  font-size: clamp(28px, 2.6vw, 36px);
  color: var(--shop-blue);
}
.menu-order-shop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 0;
}
.menu-order-shop + .menu-order-shop {
  border-top: 1px solid var(--line-soft);
}
.menu-order-shop-name {
  min-width: 150px;
  font-size: 16px;
  font-weight: 600;
  color: var(--shop-blue);
}
.menu-order-apps,
.menu-order-pay-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-order-app {
  display: block;
  border-radius: 14px;
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.menu-order-app-logo {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
@media (hover: hover) {
  .menu-order-app:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-1);
  }
}
.menu-order-app:active {
  transform: scale(.95);
}
.menu-order-pay-logo {
  display: block;
  width: auto;
  height: 36px;
  border-radius: 6px;
}
.menu-order-fine {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--shop-ink);
  opacity: .75;
}

/* ---------- Menu photo viewer ---------- */
.menu-photo-viewer {                                 /* full-viewport so a click outside the frame lands on the dialog and closes it */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--shop-ink);
  text-align: left;                                  /* the theme centres body text on phones */
  overflow: auto;
  overscroll-behavior: contain;
}
.menu-photo-viewer[open] {
  display: grid;
  place-items: center;
}
.menu-photo-viewer::backdrop {
  background: rgba(16, 26, 67, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.menu-photo-viewer.is-closing::backdrop {
  transition: opacity .16s ease-in;
  opacity: 0;
}
.menu-photo-frame {
  position: relative;
  width: min(520px, 100%);
  margin: 0;
  border-radius: var(--photo-radius);
  background: var(--paper);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.menu-photo-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: #fff;
  object-fit: cover;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.menu-photo-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--shop-blue);
  color: var(--paper);
  box-shadow: var(--shadow-1);
  transition: transform .15s var(--ease-out);
}
.menu-photo-close svg {
  width: 20px;
  height: 20px;
}
.menu-photo-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 20px;
  border-top: 2px solid var(--shop-blue);
}
.menu-photo-name {
  display: block;
  color: var(--shop-blue);
  font-size: 19px;
  font-weight: 600;
}
.menu-photo-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  opacity: .8;
}
.menu-photo-note:empty {
  display: none;
}
.menu-photo-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
.menu-photo-nav[hidden] {
  display: none;
}
.menu-photo-count {
  min-width: 40px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--shop-blue);
}
.menu-photo-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(4, 25, 168, .08);
  color: var(--shop-blue);
  transition: background-color .2s ease, transform .15s var(--ease-out);
}
.menu-photo-step svg {                               /* the sprite arrow points up-right */
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}
.menu-photo-step--prev svg {
  transform: rotate(-135deg);
}
@media (hover: hover) {
  .menu-photo-step:hover {
    background: rgba(4, 25, 168, .16);
  }
}
.menu-photo-close:active,
.menu-photo-step:active {
  transform: scale(.92);
}
.menu-photo-viewer :is(button):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.menu-photo-close {
  --focus-ring: var(--paper); /* it's a blue-filled circle: keep the ring readable against its own fill */
}
.menu-panel.is-entering > * {
  animation: menu-in .38s var(--ease-out) both;
}
.menu-panel.is-entering .menu-items li {
  animation: menu-in .38s var(--ease-out) both;
  animation-delay: calc(60ms + var(--i, 0) * 25ms);
}
.menu-panel.is-entering .menu-items {
  animation: none;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- Locations ---------- */
.shop-section.locations {
  background: var(--paper-2);
}
.shop-section.locations h2 {
  font-size: clamp(60px, 7.2vw, 108px);
}
.shop-section .location-star {
  flex: none;
  align-self: center;
  width: clamp(64px, 6vw, 92px);
  height: clamp(64px, 6vw, 92px);
  color: var(--shop-blue);
}
/* "AAA Souvlaki" stamp from the shop's flyer; the artwork is a mask so it inks in the brand blue */
.shop-section .location-stamp {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
  align-self: center;
}
.location-stamp-mark {
  display: block;
  width: clamp(128px, 12vw, 176px);
  aspect-ratio: 1;
  background: var(--shop-blue);
  -webkit-mask: url("../assets/brand/aaa-stamp.webp") center / contain no-repeat;
  mask: url("../assets/brand/aaa-stamp.webp") center / contain no-repeat;
  rotate: -10deg;
}
.location-stamp figcaption {
  max-width: 18ch;
  color: var(--shop-blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}
/* Pressed onto the paper once, when the section scrolls in (script.js adds .is-stamped) */
.location-stamp.is-ready .location-stamp-mark {
  opacity: 0;
  scale: 1.5;
}
.location-stamp.is-stamped .location-stamp-mark {
  animation: location-stamp-press .42s cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes location-stamp-press {
  from {
    opacity: 0;
    scale: 1.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
.shop-section .location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.shop-section .location-card {
  position: relative;
  padding: clamp(24px, 3vw, 44px);
  background: var(--paper-3);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2);
}
/* Pointer spotlight on the card border (position fed by sections.js). */
.location-spot {
  position: absolute;
  inset: -1px;
  padding: 2px;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--shop-blue), rgba(4, 25, 168, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover: hover) {
  .location-card:hover .location-spot {
    opacity: 1;
  }
}
.shop-section .location-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}
.shop-section .location-card h3 {
  margin-bottom: 16px;
  font-size: clamp(40px, 4.2vw, 62px);
}
.shop-section .location-card address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: var(--shop-ink);
}
.shop-section .phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 16px 0 24px;
  font-size: clamp(34px, 3vw, 44px);
  transition: color .2s ease;
}
.shop-section .phone:hover {
  color: var(--shop-ink);
}
.shop-section .location-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.shop-section .button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 22px;
  background: var(--shop-blue);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s var(--ease-out);
}
.shop-section .text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1.5px no-repeat;
  transition: background-size .25s var(--ease-out), color .2s ease;
}
@media (hover: hover) {
  .shop-section .button:hover {
    background: var(--shop-ink);
    box-shadow: var(--shadow-2);
  }
  .shop-section .text-link:hover {
    color: var(--shop-ink);
  }
  :is(.shop-section .button, .shop-section .text-link):hover .shop-arrow {
    transform: translate(3px, -3px);
  }
}
.shop-accent--olive {
  left: -30px;
  bottom: 8%;
  width: clamp(90px, 9vw, 150px);
  rotate: -18deg;
}
.shop-accent--lemon {
  right: 3%;
  top: 34%;
  width: clamp(110px, 10vw, 170px);
  rotate: 14deg;
}
.shop-accent--herb {
  right: 14%;
  top: 40px;
  width: clamp(56px, 5vw, 90px);
  height: auto;
  /* index.html carries stale width/height attrs (169x368) copy-pasted from a different accent, which
     the UA reads as the intrinsic ratio before this overrides it; herb.webp is actually 360x328. */
  aspect-ratio: 360 / 328;
  object-fit: contain;
  rotate: 22deg;
}

/* ---------- Footer ---------- */
.o-footer {
  position: relative;
  padding: clamp(96px, 10vw, 150px) 0 32px;
  background: var(--shop-blue);
  color: var(--paper);
  text-align: left;
}
.o-footer .h-color,
.o-footer a {
  color: var(--paper);
}
.o-footer .m-footer-top .flex {
  align-items: flex-start;
}
.o-footer .shop-wordmark {
  font-size: clamp(48px, 5vw, 72px);
  color: var(--paper);
  text-align: left;
}
.o-footer .m-menu--footer .a-heading {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.1;
}
.o-footer .m-menu--footer .a-heading a {
  transition: color .2s ease, transform .3s var(--ease-out);
}
@media (hover: hover) {
  .o-footer .m-menu--footer .a-heading a:hover {
    transform: translateX(8px);
  }
  .o-footer .m-menu--footer ul:hover li:not(:hover) a {
    color: rgba(244, 240, 230, .5);
  }
}
.o-footer .m-newsletter > .a-heading {
  font-size: clamp(48px, 5vw, 80px);
  margin-bottom: 24px;
}
.shop-footer-shops {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-footer-shops li {
  display: grid;
  gap: 2px;
}
.shop-footer-name {
  font-family: var(--veneer);
  font-size: 28px;
  line-height: 1;
}
.shop-footer-address {
  font-size: 15px;
  line-height: 1.5;
  opacity: .8;
}
.shop-footer-shops a {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(244, 240, 230, .35);
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
.shop-footer-shops a:hover {
  text-decoration-color: currentColor;
}
.o-footer .m-footer-bottom {
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--on-blue-line);
}
.o-footer .m-footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.o-footer .shop-footer-wave {
  width: 100%;
  transform: translateY(-99%) scaleY(-1);
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .o-about .m-products--rotated {
    max-width: 80%;
    margin-left: 8%;
  }
  .shop-section .menu-layout {
    grid-template-columns: 210px 1fr;
    gap: 32px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .o-brand .shop-cravings-grid .shop-category-card {
    min-height: 280px;
    padding-inline: 8px;
  }
  .shop-category-description {
    font-size: 13px;
  }
  .shop-category-number {
    left: 8px;
  }
  .shop-category-arrow {
    right: 8px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .shop-wordmark {
    font-size: 28px;
  }
  .o-header .a-logo {
    min-width: 110px;
  }
  .o-header .a-logo,
  .nf-header .a-logo {
    padding-block: 13px;
    margin-block: -13px;
  }
  .a-icon--menu.a-icon--menu-fixed {
    width: 48px;
    height: 48px;
    min-width: 48px;
    top: 12px;
    left: 12px;
  }
  .shop-nav-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-nav-shops {
    flex-direction: column;
    gap: 0;
  }
  .o-about .a-text {
    font-size: 17px;
    margin-inline: auto;
  }
  .o-about .m-products--rotated {
    height: 430px;
    width: 75%;
    margin: 0 auto -45px;
    max-width: none;
  }
  .o-about .m-products--rotated .a-img {
    width: 70%;
    height: 326.8px; /* was 76%: the container is a fixed 430px box here, so a % height re-resolved every
                         layout pass and was the CLS source during scroll; a fixed px is the same size but stable */
  }
  .o-about .m-products--rotated .a-img:nth-child(2),
  .o-about .m-products--rotated .a-img:nth-child(3) {
    height: 296.7px; /* was 69%, same reason */
  }
  .o-products--red .m-products {
    height: 385px;
  }
  .o-products--red .m-products > .a-img:first-child {
    width: 57%;
    max-width: 57%;
    height: 85%;
  }
  .o-products--red .m-products > .a-img:nth-child(2) {
    width: 38%;
    max-width: 38%;
    left: 59%;
  }
  .shop-product-arrow {
    font-size: 40px;
  }
  .shop-section.shop-feast {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feast-mosaic {
    aspect-ratio: .92;
  }
  .feast-tile--desk {
    display: none;
  }
  .feast-tile--a { --l: 0% !important; --t: 2% !important; --w: 74% !important; }
  .feast-tile--b { --l: 52% !important; --t: 30% !important; --w: 46% !important; }
  .feast-tile--c { --l: 2% !important; --t: 48% !important; --w: 44% !important; }
  .feast-tile--d { --l: 50% !important; --t: 68% !important; --w: 40% !important; }
  .feast-tile--e { --l: 18% !important; --t: 78% !important; --w: 30% !important; }
  .feast-caption {
    font-size: 15px;
    left: 8px;
    bottom: 8px;
  }
  .feast-copy .a-heading {
    font-size: 64px;
    max-width: 10ch;
  }
  .o-brand .shop-cravings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
  }
  .shop-category:nth-child(4n+3) { transition-delay: 0ms; }
  .shop-category:nth-child(2n) { transition-delay: 70ms; }
  .shop-category-card {
    min-height: 270px;
    padding: 22px 4px 26px;
  }
  .shop-category-photo {
    width: 84%;
    margin-bottom: 12px;
  }

  .shop-category-number {
    left: 4px;
    top: 20px;
    font-size: 10px;
  }
  .o-brand .shop-category-label {
    font-size: 40px;
  }
  .shop-category-description {
    max-width: 84%;
    font-size: 13px;
  }
  .shop-category-arrow {
    right: 2px;
    bottom: 26px;
    width: 24px;
    height: 24px;
  }
  .shop-section .section-heading {
    display: block;
  }
  .shop-section h2 {
    font-size: 64px;
  }
  .shop-section .eyebrow {
    font-size: 11px;
    margin-bottom: 14px;
  }
  .shop-section .section-aside {
    margin-top: 16px;
    font-size: 15px;
  }
  .shop-accent--skewer {
    top: 28px;
    left: auto;
    right: -90px;
    width: 250px;
  }
  .shop-accent--desk {
    display: none;
  }
  .shop-accent--m-right {
    left: auto;
    right: var(--mr);
    top: var(--mt);
    width: var(--mw);
  }
  .shop-section .menu-layout {
    display: block;
    padding-top: 20px;
  }
  .shop-section .menu-tabs {
    flex-direction: row;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .shop-section .menu-tabs::-webkit-scrollbar {
    display: none;
  }
  .shop-section .menu-tabs button {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 14px;
    scroll-snap-align: start;
    box-shadow: inset 0 0 0 1px var(--shop-line);
  }
  .shop-section .menu-tabs button[aria-selected=true] {
    box-shadow: none;
  }
  .menu-tab-count {
    display: none;
  }
  .shop-section .menu-panel {
    min-height: 440px;
    padding-top: 16px;
  }
  .shop-section .menu-panel h3 {
    font-size: 40px;
  }
  .shop-section .menu-note {
    font-size: 15px;
  }
  .shop-section .menu-items {
    grid-template-columns: 1fr;
  }
  .shop-section .menu-items li {
    min-height: 56px;
    padding: 14px 0;
  }
  .shop-section .menu-item-name {
    font-size: 16px;
  }
  .shop-section .menu-item-note {
    font-size: 13px;
  }
  .menu-order {
    grid-template-columns: 1fr;
  }
  .menu-order-shop-name {
    min-width: 0;
    flex-basis: 100%;
  }
  .shop-section .menu-item-button {
    gap: 14px;
    min-height: 56px;
    padding: 10px 0;
  }
  .shop-section .menu-item-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }
  .shop-section .menu-item-zoom {
    right: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
  }
  .menu-photo-caption {
    padding: 14px 16px 16px;
  }
  .menu-photo-name {
    font-size: 17px;
  }
  .shop-section.locations h2 {
    font-size: 54px;
  }
  .shop-section .location-star {
    display: none;
  }
  .shop-section .location-stamp {
    justify-items: start;
    align-self: flex-start;
  }
  .location-stamp-mark {
    width: 112px;
  }
  .location-stamp figcaption {
    text-align: left;
  }
  .shop-section .location-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .shop-section .location-card h3 {
    font-size: 44px;
  }
  .shop-section .location-top {
    font-size: 11px;
    margin-bottom: 18px;
  }
  .shop-section .location-card address {
    font-size: 15px;
  }
  .shop-section .location-actions {
    gap: 8px 20px;
  }
  .shop-accent--olive {
    left: -24px;
    bottom: 2%;
    width: 80px;
  }
  .shop-accent--lemon {
    right: -26px;
    top: 90px;
    width: 96px;
  }
  .shop-accent--herb {
    display: none;
  }
  .o-footer .m-footer-bottom {
    flex-wrap: wrap;
    justify-content: space-between;
    /* the floating "the menu" badge sits fixed bottom-right; keep this row's content out of its
       footprint instead of relying only on the JS visibility timing (menu-sheet.js hides it near
       the footer, but a few px of this row can still show through the badge's height first) */
    padding-right: calc(104px + env(safe-area-inset-right));
  }
}

/* ---------- Reduced motion: static, fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .m-marquee__inner {
    transform: none !important;
  }
  .m-header__menu-mobile,
  .m-header__menu-mobile[inert] {
    transition: none;
  }
  .m-header__menu-list li,
  .m-header__menu-mobile.active .m-header__menu-list li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .o-brand .shop-category.e-reveal {
    transform: none;
    transition: opacity .3s ease;
  }
  .shop-category-photo,
  .shop-category-arrow,
  .shop-arrow,
  .a-btn,
  .swiper-button-next,
  .swiper-button-prev {
    transition: none;
  }
  .shop-category:is(:hover, :focus-visible) .shop-category-photo {
    transform: translateZ(36px) rotate(-6deg);
  }
  .feast-tile,
  .feast-photo,
  .feast-photo img,
  .feast-caption {
    transition: none;
  }
  .js .feast-mosaic:not(.is-dealt) .feast-tile {
    translate: 0 0;
    scale: 1;
    opacity: 1;
  }
  /* theme forces every reveal visible here; keep neighbouring dishes' round photo hidden as in the animated path */
  .o-products--red .swiper-slide:not(.swiper-slide-active) .m-products > .a-img:nth-child(2) {
    opacity: 0 !important;
  }
  .menu-panel.is-entering > *,
  .menu-panel.is-entering .menu-items li {
    animation: none;
  }
  .shop-section .menu-item-thumb,
  .shop-section .menu-item-photo {
    transition: none;
  }
  .shop-category-card,
  .shop-category-sheen,
  .menu-tab-count,
  .shop-section .menu-tabs button,
  .menu-order-app,
  .location-card,
  .location-spot,
  .shop-section .phone {
    transition: none;
  }
  .location-stamp.is-stamped .location-stamp-mark {
    animation: none;
    opacity: 1;
    scale: 1;
  }
}

/* ---------- Fallback when a photo fails to load ----------
   The frame stays in the brand paper colour instead of showing a broken-image icon.
   script.js/sections.js/reels.js add .is-img-error to the photo's frame/container: .menu-item-thumb,
   .feast-tile, .reel-media (reels.css) and .menu-photo-frame. */
.is-img-error img,
.is-img-error video {
  visibility: hidden;
}
:is(.menu-item-thumb, .menu-photo-frame).is-img-error {
  background: var(--paper-3);
}
/* .feast-tile carries no visible box itself (padding/border/background: none); the frame is its
   .feast-photo child, so that's what needs the fallback fill. */
.feast-tile.is-img-error .feast-photo {
  background: var(--paper-3);
}

/* ---------- Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .a-btn,
  .shop-section .button,
  .menu-tab-count,
  .menu-photo-close,
  .menu-photo-step,
  .menu-order-app-logo {
    border: 1px solid ButtonText;
  }
  :is(.menu-item-thumb, .menu-photo-frame, .reel-media).is-img-error,
  .feast-tile.is-img-error .feast-photo {
    border: 1px dashed ButtonText;
  }
  .shop-category-card {
    border: 1px solid ButtonText;
  }
}

/* ---------- A touch more contrast, cheaply ---------- */
@media (prefers-contrast: more) {
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline-width: 4px;
  }
  .shop-section .location-card,
  .shop-section .menu-items li {
    border-color: var(--shop-blue);
  }
}

/* Sections switched off in js/boot.js: "Good food. Good company." (SITE.feastSection) and
   "At our table" (SITE.ourTableSection) */
html.no-feast #feast,
html.no-our-table #our-table {
  display: none;
}

/* A section reveal's sweep is finished: drop its clip (js/sections.js explains why) */
.e-reveal--section.visible.is-revealed {
  clip-path: none;
}