/* =============================================================================
   Abu El Zulof Kahwa — digital menu
   Mobile-first. Logical properties (inline-start/end) throughout so the same
   rules serve English (LTR) and Arabic (RTL).

   One menu system, two brand voices: every component reads the tokens below.
   [data-brand] swaps colours and the few brand-level switches (leaders,
   image radius); :lang(ar) swaps the type. Widths step through five tiers:
     <360 compact phone · 360+ phone · 430+ large phone · 768+ tablet
     (720 column) · 1024+ small desktop · 1280+ desktop (side rail + 720)
   ============================================================================= */

/* ---- Tokens ----------------------------------------------------------------
   Palette taken from the main site (abuelzulof-www/src/styles/global.css),
   itself sampled from the brand artwork. */

:root {
  --bg: #faf8f4;          /* stone-50 */
  --surface: #ffffff;
  --ink: #231f1e;         /* logo near-black */
  --ink-muted: #5d5a55;
  --line: #e7e1d5;        /* stone-200 */
  --line-strong: #c8c5b7; /* beige — dotted leaders */
  --head-bg: #4d5e5a;     /* olive green */
  --head-ink: #faf8f4;
  --head-muted: #d9ab7a;  /* light gold */
  --accent: #c79a68;      /* gold — decoration only on light grounds (≈2.3:1) */
  --price: #2b3533;       /* dark olive */
  --chip-active-bg: #4d5e5a;
  --chip-active-ink: #ffffff;
  --sold-out-bg: #fbeaea;
  --sold-out-ink: #b0161c; /* ember-600 */

  /* The one Latin typeface (the brand's): all English text, the headings,
     the prices, and any Latin words inside the Arabic menu. Change it here. */
  --font-latin: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-latin);
  --font-display: var(--font-latin);
  /* Item names and prices: one font each, shared by the menu list and the
     item sheet, so changing either here changes both. */
  --font-item: var(--font-body);
  --font-price: var(--font-latin);

  --radius: 14px;         /* cards, sheet */
  --radius-img: 14px;     /* photo frames */
  --radius-thumb: 10px;
  --page-max: 720px;
  --gutter: 16px;
  --catnav-h: 56px;
  --rail-w: 240px;
  --rail-gap: 120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
  --dur-slow: 320ms;

  --leader: block;        /* dotted leader between name and price; none = off */
  --leader-lift: -0.32em;

  /* Type and media scale — stepped per tier below */
  --hero: 42px;
  --section: 28px;
  --item: 15px;
  --body: 13px;
  --price-size: 14px;
  --thumb: 64px;

  color-scheme: light;
}

/* LYT — the same menu system as every other branch, with its own identity:
   the logo's black and white and Montserrat (the brand font). */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

[data-brand='lyt'] {
  --bg: #ffffff;
  --ink: #0b0b0b;
  --ink-muted: #595959;
  --line: #e8e8e8;
  --line-strong: #c9c9c9;
  --head-bg: #0b0b0b;
  --head-ink: #ffffff;
  --head-muted: #c4c4c4;
  --accent: #8c8c8c;
  --price: #0b0b0b;
  --chip-active-bg: #0b0b0b;
  --font-latin: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* A branch with its own colours inside its brand (palettes in brands.php).
   Ard Diar keeps the pomegranate red and cream it has always had; the brass
   accent stays, so it still reads as Abu El Zulof.
   Contrast: price on bg ≈ 9.4:1 · head-muted on head-bg ≈ 7.5:1. */
[data-palette='ard-diar'] {
  --bg: #faf3eb;
  --line: #ecdcd0;
  --line-strong: #d9bfae;
  --head-bg: #9a201f;
  --head-ink: #faf3eb;
  --head-muted: #e8cfc4;
  --price: #861c1b;
  --chip-active-bg: #9a201f;
}

/* Arabic: Naskh for display and body, Lato for any Latin letters within. */
:root:lang(ar) {
  --font-body: 'Noto Naskh Arabic', var(--font-latin);
  --font-display: 'Noto Naskh Arabic', var(--font-latin);
  --leader-lift: -0.5em;
}

@media (min-width: 360px) {
  :root { --gutter: 20px; --catnav-h: 58px; --hero: 52px; --section: 32px; --item: 16px; --body: 14px; --price-size: 15px; --thumb: 76px; }
}
@media (min-width: 430px) {
  :root { --gutter: 24px; --hero: 58px; --section: 34px; --thumb: 88px; }
}
@media (min-width: 768px) {
  :root { --catnav-h: 60px; --hero: 76px; --section: 42px; --item: 17px; --body: 15px; --price-size: 16px; --thumb: 96px; }
}
@media (min-width: 1024px) {
  :root { --hero: 88px; --section: 44px; --thumb: 104px; }
}
@media (min-width: 1280px) {
  :root { --hero: 104px; --section: 46px; }
}

/* ---- Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--catnav-h) + 8px);
  /* What an iPhone's bounce past either end shows: the header's and the
     footer's colour, so no pale gap opens up. (Stopping the bounce with
     overscroll-behavior makes Safari's toolbar flicker in and out.) */
  background: var(--head-bg);
}

@media (min-width: 1280px) {
  html {
    scroll-padding-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html.is-locked {
  overflow: hidden;
}

/* Page frame: a column as tall as the screen, so the footer always ends the
   page — below all the content, and on a short page at the bottom of the
   screen rather than halfway up it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

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

button {
  font: inherit;
  color: inherit;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.icon-button svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.7;
}

.text-button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--price);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.field svg {
  position: absolute;
  inset-inline-start: 13px;
  width: 16px;
  height: 16px;
  stroke: var(--ink-muted);
  stroke-width: 1.8;
  pointer-events: none;
}

.field__input {
  width: 100%;
  height: 40px;
  padding-inline: 38px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming in on focus */
  appearance: none;
}

.field__input::placeholder {
  color: var(--ink-muted);
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---- Masthead -------------------------------------------------------------- */

.masthead {
  background: var(--head-bg);
  color: var(--head-ink);
  padding-top: env(safe-area-inset-top);
}

.masthead__inner {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 16px var(--gutter) 0;
}

.masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.masthead--wordmark .masthead__top {
  justify-content: flex-end;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.masthead__logo {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.masthead__monogram {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.masthead__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.masthead__wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.masthead__tagline {
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

:lang(ar) .masthead__wordmark {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

:lang(ar) .masthead__tagline {
  font-size: 11px;
  letter-spacing: 0;
}

.lang-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  color: var(--head-ink);
  font-size: 13px;
  text-decoration: none;
  transition: background-color var(--dur);
}

.lang-switch:lang(ar) {
  font-family: 'Noto Naskh Arabic', var(--font-latin);
}

.lang-switch:lang(en) {
  font-family: var(--font-latin);
  font-weight: 500;
}

.lang-switch:hover {
  background: rgb(255 255 255 / 0.08);
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 0 24px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hero__location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--head-muted);
  font-size: 14px;
}

.hero__location svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
}

:lang(ar) .hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0;
}

:lang(ar) .hero__title {
  font-size: calc(var(--hero) * 0.8);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.masthead__rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  opacity: 0.7;
}

.hero + .masthead__rule {
  padding-top: 0;
}

.masthead__rule::before,
.masthead__rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.16);
}

.masthead__rule span {
  width: 5px;
  height: 5px;
  rotate: 45deg;
  background: var(--accent);
}

/* The brand is the hero: a large, tracked, centred wordmark (LYT). */
.masthead--wordmark .hero {
  align-items: center;
  gap: 16px;
  padding: 36px 0 48px;
  text-align: center;
}

.masthead--wordmark .hero__title {
  order: -1;
  font-family: var(--font-latin);
  font-size: calc(var(--hero) * 1.45);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.32em;
  padding-inline-start: 0.32em; /* re-centre: tracking adds space after the last letter */
}

.masthead--wordmark .hero__eyebrow {
  color: var(--head-muted);
  font-weight: 500;
  letter-spacing: 0.3em;
}

.masthead--wordmark .hero__eyebrow::before,
.masthead--wordmark .hero__eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.masthead--wordmark:lang(ar) .hero__eyebrow {
  letter-spacing: 0;
}

.masthead--wordmark .masthead__rule {
  display: none;
}

@media (min-width: 768px) {
  .masthead__inner {
    padding-top: 22px;
  }

  .hero {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: 32px;
    padding: 64px 0 40px;
  }

  .hero__eyebrow {
    flex-basis: 100%;
  }

  .hero__location {
    padding-bottom: 8px;
    font-size: 15px;
  }

  .masthead--wordmark .hero {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

@media (min-width: 1280px) {
  .masthead__inner {
    max-width: calc(var(--rail-w) + var(--rail-gap) + var(--page-max));
    padding-inline: 0;
  }

  /* Hero aligns to the page grid: eyebrow over the rail, title over the menu. */
  .hero {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr auto;
    column-gap: var(--rail-gap);
    padding: 88px 0 52px;
  }

  .hero__eyebrow {
    padding-bottom: 14px;
  }

  .hero__location {
    justify-self: end;
  }

  .masthead--wordmark .hero {
    display: flex;
    padding: 60px 0 84px;
  }
}

/* The brand is the hero on a branch menu too: logo, wordmark and tagline
   centred like the shop sign, with the branch as a small chip under it. The
   class selectors outrank the .hero breakpoint rules above, so this stays a
   centred column at every width. */
.masthead--brand .masthead__top {
  justify-content: flex-end;
}

.hero--brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 0 24px;
  text-align: center;
}

.hero__mark {
  display: block;
  margin-bottom: 14px;
  border-radius: 50%;
}

.hero__mark img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Full logo (mark + name). Sized by width; the file is 440px wide, so it
   stays sharp at 2x up to the desktop size. */
.hero__lockup {
  display: block;
  width: clamp(140px, 40vw, 164px);
}

.hero__lockup img {
  display: block;
  width: 100%;
  height: auto;
}

/* A landscape lockup (Ard Diar's framed wordmark) needs more width to carry
   the same weight as the tall one. */
.hero__lockup--wide {
  width: clamp(220px, 62vw, 260px);
}

.hero__lockup + .visually-hidden + .hero__branch {
  margin-top: 16px;
}

.hero__mark .masthead__monogram {
  width: 72px;
  height: 72px;
  font-size: 18px;
}

.hero--brand .hero__title {
  font-family: var(--font-latin);
  font-size: min(calc(var(--hero) * 1.05), 92px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

:lang(ar) .hero--brand .hero__title {
  font-family: 'Noto Naskh Arabic', var(--font-latin);
  font-size: min(calc(var(--hero) * 0.78), 68px);
  font-weight: 700;
  line-height: 1.35;
}

.hero__tagline {
  margin-top: 8px;
  color: var(--head-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

:lang(ar) .hero__tagline {
  margin-top: 2px;
  font-size: 14px;
  letter-spacing: 0;
}

.hero__branch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin-top: 18px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.hero__branch span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hero__branch svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

@media (min-width: 768px) {
  .masthead--brand .hero {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 8px 0 36px;
  }

  .hero__mark img,
  .hero__mark .masthead__monogram {
    width: 88px;
    height: 88px;
  }

  .hero__lockup {
    width: 190px;
  }

  .hero__lockup--wide {
    width: 300px;
  }

  .hero__tagline {
    font-size: 13px;
  }

  :lang(ar) .hero__tagline {
    font-size: 15px;
  }

  .hero__branch {
    margin-top: 22px;
    padding: 7px 16px;
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  .masthead--brand .hero {
    display: flex;
    padding: 24px 0 48px;
  }

  .hero__mark img,
  .hero__mark .masthead__monogram {
    width: 104px;
    height: 104px;
  }

  .hero__lockup {
    width: 210px;
  }

  .hero__lockup--wide {
    width: 330px;
  }
}

/* ---- Category navigation ---------------------------------------------------
   One bar, two modes set by menu.js from the real labels: 'fit' (all labels
   visible, centred from tablet up) or 'scroll' (swipeable, with a fade on
   the side that has more). From 1280px the side rail replaces it. */

.catnav {
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --subnav-h: 48px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-slow), background-color var(--dur-slow);
}

/* Stuck: frosted glass over the menu scrolling underneath. */
.catnav.is-stuck {
  box-shadow: 0 10px 24px -18px rgb(35 31 30 / 0.5);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .catnav.is-stuck,
  .catnav.is-stuck .subnav {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
    backdrop-filter: saturate(1.6) blur(20px);
  }
}

/* How far the reader is through the current category. */
.catnav__progress {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: bottom var(--dur-slow) var(--ease);
  pointer-events: none;
}

[dir='rtl'] .catnav__progress {
  transform-origin: right;
}

.catnav.show-subs .catnav__progress {
  bottom: calc(-1px - var(--subnav-h));
}

/* Search results aren't read category by category, and the sub-category row
   the bar would sit under is hidden. */
.catnav.is-searching .catnav__progress {
  display: none;
}

.catnav__inner {
  display: flex;
  align-items: stretch;
  height: var(--catnav-h);
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
}

.catnav__tabs {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.catnav__viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.catnav__viewport::-webkit-scrollbar {
  display: none;
}

.catnav__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  height: 100%;
  padding-inline: var(--gutter);
}

/* Pill chips; the active one is a filled pill (.catnav__ink) that springs
   from chip to chip under the labels. */
.catnav__link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease), transform var(--dur) var(--ease);
}

.catnav__link:hover {
  color: var(--ink);
}

.catnav__link:active {
  transform: scale(0.94);
}

.catnav__link[aria-current='true'] {
  background: transparent;
  color: var(--chip-active-ink);
  font-weight: 600;
}

.catnav__ink {
  position: absolute;
  top: calc(50% - 19px);
  left: 0;
  width: 0;
  height: 38px;
  border-radius: 999px;
  background: var(--chip-active-bg);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--chip-active-bg) 80%, transparent);
  transition: transform 520ms var(--spring), width 520ms var(--spring);
  pointer-events: none;
}

/* Before the bar is measured the pill has nowhere to go: no fly-in from 0. */
.catnav:not(.is-ready) .catnav__ink,
.subnav:not(.is-ready) .subnav__ink {
  transition: none;
}

/* ---- Sub-categories: a second row dropped in under the bar while the reader
   is inside a category that has them. It overlays the menu rather than
   pushing it, so the page never jumps. */

.subnav {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  height: var(--subnav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 20px -18px rgb(35 31 30 / 0.5);
  animation: subnav-in 420ms var(--ease) both;
}

.subnav.is-leaving {
  animation: subnav-out 200ms ease-in both;
}

.subnav__viewport {
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}

.subnav__viewport::-webkit-scrollbar {
  display: none;
}

.subnav__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.subnav__link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), transform var(--dur) var(--ease);
}

.subnav.is-entering .subnav__link {
  animation: chip-in 460ms var(--spring) both;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}

.subnav__link:active {
  transform: scale(0.94);
}

.subnav__link[aria-current='true'] {
  border-color: transparent;
  color: var(--price);
  font-weight: 600;
}

.subnav__ink {
  position: absolute;
  top: calc(50% - 15px);
  left: 0;
  width: 0;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--chip-active-bg) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-active-bg) 12%, var(--surface));
  transition: transform 480ms var(--spring), width 480ms var(--spring);
  pointer-events: none;
}

.catnav.is-searching .subnav {
  display: none;
}

@keyframes subnav-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 -24px 0);
  }
}

@keyframes subnav-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.88);
  }
}

@media (min-width: 768px) {
  .subnav__link {
    font-size: 14px;
  }
}

.catnav__fade {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur);
}

.catnav__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--bg) 30%, transparent);
}

.catnav__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--bg) 30%, transparent);
}

.catnav.more-left .catnav__fade--left,
.catnav.more-right .catnav__fade--right {
  opacity: 1;
}

.catnav__search-toggle {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline: 6px 10px;
  border-inline-start: 1px solid var(--line);
}

.catnav__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: var(--gutter) 8px;
}

.catnav:not(.is-searching) .catnav__search,
.catnav.is-searching .catnav__tabs,
.catnav.is-searching .catnav__search-toggle {
  display: none;
}

/* Opening search: the field grows out of the search button as a pill —
   a circle at the end side that stretches to full width — then Cancel
   slides in. Closing plays it backwards (menu.js adds .is-closing and waits
   for it), and the tabs fade back in. Mirrored for RTL; instant under
   reduced motion (see Base). */
.catnav {
  --search-nudge: 10px;
}

[dir='rtl'] .catnav {
  --search-nudge: -10px;
}

/* backwards, not both: once grown, no clip-path is left to cut off the
   field's focus ring. */
.catnav.is-searching .field {
  animation: search-grow 420ms var(--ease) backwards;
}

[dir='rtl'] .catnav.is-searching .field {
  animation-name: search-grow-rtl;
}

.catnav.is-searching .field svg {
  animation: search-fade-in 240ms 160ms var(--ease) both;
}

.catnav.is-searching .text-button {
  animation: search-slide-in 320ms 120ms var(--ease) both;
}

.catnav.is-closing .field {
  animation: search-shrink 260ms var(--ease) both;
}

[dir='rtl'] .catnav.is-closing .field {
  animation-name: search-shrink-rtl;
}

.catnav.is-closing .field svg,
.catnav.is-closing .text-button {
  animation: search-slide-out 180ms ease-in both;
}

.catnav.is-returning .catnav__tabs,
.catnav.is-returning .catnav__search-toggle {
  animation: search-tabs-in 320ms var(--ease) both;
}

@keyframes search-grow {
  from { clip-path: inset(0 0 0 calc(100% - 40px) round 999px); }
  to { clip-path: inset(0 0 0 0 round 999px); }
}

@keyframes search-grow-rtl {
  from { clip-path: inset(0 calc(100% - 40px) 0 0 round 999px); }
  to { clip-path: inset(0 0 0 0 round 999px); }
}

@keyframes search-shrink {
  from { clip-path: inset(0 0 0 0 round 999px); opacity: 1; }
  to { clip-path: inset(0 0 0 calc(100% - 40px) round 999px); opacity: 0; }
}

@keyframes search-shrink-rtl {
  from { clip-path: inset(0 0 0 0 round 999px); opacity: 1; }
  to { clip-path: inset(0 calc(100% - 40px) 0 0 round 999px); opacity: 0; }
}

@keyframes search-fade-in {
  from { opacity: 0; }
}

@keyframes search-slide-in {
  from { opacity: 0; transform: translateX(var(--search-nudge)); }
}

@keyframes search-slide-out {
  to { opacity: 0; transform: translateX(var(--search-nudge)); }
}

@keyframes search-tabs-in {
  from { opacity: 0; transform: translateY(4px); }
}

:lang(ar) .catnav__link[aria-current='true'] {
  font-weight: 700;
}

@media (max-width: 359px) {
  .catnav__track {
    gap: 20px;
  }
  .catnav__link {
    font-size: 13px;
  }
}

@media (min-width: 768px) {
  .catnav__inner {
    padding-inline: var(--gutter);
  }
  .catnav__track {
    gap: 34px;
    padding-inline: 0;
  }
  .catnav[data-mode='fit'] .catnav__track {
    margin-inline: auto;
  }
  .catnav__link {
    font-size: 15px;
  }
  .catnav__search-toggle {
    padding-inline-end: 0;
  }
  .catnav__search {
    padding-inline-start: 0;
  }
}

@media (min-width: 1280px) {
  .catnav {
    display: none;
  }
}

/* ---- Page layout and side rail --------------------------------------------- */

.layout {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rail {
  display: none;
}

@media (min-width: 1280px) {
  .layout {
    display: grid;
    grid-template-columns: var(--rail-w) var(--page-max);
    column-gap: var(--rail-gap);
    max-width: calc(var(--rail-w) + var(--rail-gap) + var(--page-max));
    padding-inline: 0;
  }

  .rail {
    display: block;
  }
}

/* Secondary to the menu: small, muted, no boxes — the 720 column leads. */
.rail__inner {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 64px);
  padding-top: 64px;
  overflow-y: auto;
  scrollbar-width: none;
}

.rail__nav {
  display: flex;
  flex-direction: column;
}

.rail__link {
  position: relative;
  display: block;
  min-height: 40px;
  padding-block: 10px;
  padding-inline: 16px 8px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur);
}

.rail__link::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  transition: background-color var(--dur);
}

.rail__link:hover,
.rail__link[aria-current='true'] {
  color: var(--ink);
}

.rail__link[aria-current='true'] {
  font-weight: 600;
}

.rail__link[aria-current='true']::before {
  background: var(--accent);
}

/* The active category's sub-categories unfold under it. */
.rail__subs {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease);
}

.rail__subs.is-open {
  grid-template-rows: 1fr;
}

.rail__subs-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rail__sublink {
  position: relative;
  padding-block: 6px;
  padding-inline: 32px 8px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: color var(--dur), opacity 300ms var(--ease), transform 300ms var(--ease);
}

.rail__subs.is-open .rail__sublink {
  opacity: 1;
  transform: none;
  transition-delay: 0s, calc(var(--i, 0) * 40ms + 80ms), calc(var(--i, 0) * 40ms + 80ms);
}

.rail__sublink::before {
  content: '';
  position: absolute;
  inset-inline-start: 18px;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--dur), transform var(--dur-slow) var(--spring, var(--ease));
}

.rail__sublink:hover,
.rail__sublink[aria-current='true'] {
  color: var(--ink);
}

.rail__sublink[aria-current='true']::before {
  background: var(--accent);
  transform: scale(1.35);
}

.rail .field__input {
  font-size: 14px;
}

.rail__note {
  padding-inline-start: 16px;
  color: var(--ink-muted);
  font-size: 12px;
}

/* ---- Page ------------------------------------------------------------------ */

.page {
  min-width: 0;
  padding-bottom: 16px;
}

/* While searching the results never make the page too short to hold the bar
   at the top, so the screen stays put as they grow, shrink or run out. */
.is-searching-page .page {
  min-height: 100vh;
  min-height: 100lvh;
}

.page--narrow {
  max-width: calc(560px + 2 * var(--gutter));
  margin-inline: auto;
  padding: 36px var(--gutter) 32px;
}

.page__title {
  font-family: var(--font-display);
  font-size: var(--section);
  font-weight: 600;
  line-height: 1.1;
}

:lang(ar) .page__title {
  font-size: calc(var(--section) * 0.75);
  font-weight: 700;
  line-height: 1.5;
}

.page__lead {
  margin-top: 8px;
  color: var(--ink-muted);
}

.notice {
  padding: 32px 0;
  color: var(--ink-muted);
  text-align: center;
}

/* ---- Categories ------------------------------------------------------------ */

.category {
  padding-top: 36px;
}

.category__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}

.category__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--section);
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.category__count {
  flex: none;
  color: var(--ink-muted);
  font-size: 12px;
}

.category__description {
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: var(--body);
}

/* Lato first, so the digits match the English; the Arabic words fall
   through to Naskh. */
:lang(ar) .category__count {
  font-family: var(--font-latin), 'Noto Naskh Arabic';
}

:lang(ar) .category__title {
  font-size: calc(var(--section) * 0.75);
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .category {
    padding-top: 56px;
  }
}

@media (min-width: 1280px) {
  .category {
    padding-top: 64px;
  }
}

/* A sub-category (Food › Mashwa) sits one step below its category: the same
   display face, smaller and in pine, without the brass rule that marks a
   category. */
.subcategory {
  padding-top: 20px;
}

.subcategory__header {
  padding-bottom: 2px;
}

.subcategory__title {
  color: var(--price);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

:lang(ar) .subcategory__title {
  font-size: 17px;
  line-height: 1.6;
}

/* ---- Items ----------------------------------------------------------------- */

.items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur), transform 120ms;
}

.item:last-child {
  border-bottom: 0;
}

.item:active {
  transform: scale(0.985);
}

.item__body {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  container-type: inline-size;
}

/* Name ········· price, with the leader on the name's last line. */
.item__line {
  display: flex;
  align-items: last baseline;
  gap: 8px;
}

.item__name {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-item);
  font-size: var(--item);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* The whole row is the tap target; the button inside the heading stretches
   over it so the name stays a real heading for screen readers. */
.item__open {
  padding: 0;
  border: 0;
  background: none;
  font-weight: inherit;
  text-align: start;
  cursor: pointer;
}

.item__open::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.item__open:focus-visible {
  outline: none;
}

.item__open:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Focus handed back after the sheet was closed by touch or mouse (menu.js). */
.item__open.no-ring:focus-visible::after {
  outline: none;
}

.item__leader {
  display: var(--leader);
  flex: 1 0 20px;
  height: 0;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(var(--leader-lift));
}

.price {
  flex: none;
  margin-inline-start: auto;
  color: var(--price);
  font-family: var(--font-price);
  font-size: var(--price-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price__currency {
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* LYT: the currency in muted grey, so it reads apart from the amount. */
[data-brand='lyt'] .price__currency {
  color: var(--ink-muted);
}

/* Labelled prices ("Regular AED 35 | Giant AED 55") don't fit beside the
   name, so they get their own row under it, divided by hairlines. */
.prices {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.prices .price {
  margin-inline-start: 0;
}

.prices .price + .price {
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--line);
}

.price__label {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.86em;
  font-weight: 500;
}

:lang(ar) .price__currency {
  font-family: var(--font-body);
  font-size: 0.8em;
  letter-spacing: 0;
}


.item__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: var(--body);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:lang(ar) .item__name {
  line-height: 1.7;
}

:lang(ar) .item__description {
  line-height: 1.85;
}

/* A narrow text column (a 320px phone with a thumbnail) would squeeze the
   name to a few words per line: the leader and price move under it. */
@container (max-width: 229px) {
  .item__line {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .item__line .item__name {
    flex-basis: 100%;
  }
}

.item__photo {
  flex: none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: var(--radius-thumb);
  background: var(--line);
  object-fit: cover;
  transition: filter var(--dur);
}

/* Sold out: muted name, the status takes the price's place, and the photo is
   softened rather than greyed out. The item stays in place and opens. */
.status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  color: var(--sold-out-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

:lang(ar) .status {
  font-size: 12px;
  letter-spacing: 0;
}

.item.is-sold-out .item__name {
  color: var(--ink-muted);
}

.item.is-sold-out .item__leader {
  border-bottom-color: var(--line);
}

.item.is-sold-out .item__photo {
  filter: saturate(0.35);
  opacity: 0.8;
}

/* Dense sections (drinks, shisha): tighter rows, no rules between them. */
.category--dense .item {
  padding: 13px 0;
  border-bottom: 0;
}

/* Pairs: two photo items side by side as tiles — from tablet width, and at
   every width for LYT. */
@media (min-width: 768px) {
  .items:has(.is-paired),
  .category--columns .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items:has(.is-paired) {
    column-gap: 32px;
  }

  .items > .item {
    grid-column: 1 / -1;
  }

  .items > .item.is-paired {
    grid-column: auto;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 12px;
    padding: 28px 0;
  }

  .item.is-paired .item__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-img);
  }

  .item.is-paired:has(+ .is-paired:last-child) {
    border-bottom: 0;
  }

  /* Two-column dense sections read as a printed menu, not a table. */
  .category--columns .items {
    column-gap: 56px;
  }

  .category--columns .items > .item {
    grid-column: auto;
  }
}

/* Desktop (1024+): every section is two items per row, in menu order. A photo
   is shown large above its text; items without one keep the printed line.
   Phones and tablets keep the thumbnail rows. */
@media (min-width: 1024px) {.items,
.items:has(.is-paired) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }.items > .item {
    grid-column: auto;
  }.items > .item.has-photo {
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 28px 0;
  }

  .item.has-photo .item__photo {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-img);
  }

  /* The last row has no rule under it, whether it holds one item or two. */
  .items > .item:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }

  /* LYT: an item with no photo (a heading line such as "Classics") takes the
     whole row instead of sitting beside a tall photo with a gap under it. */
  [data-brand='lyt'] .items:has(.has-photo) > .item:not(.has-photo) {
    grid-column: 1 / -1;
  }
}

/* Desktop hover: a warm tint, a brass leader and a lift in the photo.
   Pointer devices only, and only on items that open. */
@media (hover: hover) and (min-width: 1024px) {
  .item:not(.is-static, .has-photo):hover {
    margin-inline: -16px;
    padding-inline: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
  }

  .item:not(.is-static):hover .item__leader {
    border-bottom-color: var(--accent);
  }

  .item.has-photo:hover .item__photo {
    filter: brightness(1.05) saturate(1.05);
  }
}

/* The whole item opens the sheet, photo included (menu.js). */
.item:not(.is-static) {
  cursor: pointer;
}

/* Nothing more to show: not a button, no press feedback. */
.item.is-static:active {
  transform: none;
}

/* ---- Back to top -----------------------------------------------------------
   A brand-coloured disc on the inline-start side (photos sit at the end), in
   after the first screen. Its ring fills with how far down the page is. */

.to-top {
  position: fixed;
  z-index: 9;
  inset-inline-start: var(--gutter);
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--chip-active-bg);
  color: var(--chip-active-ink);
  box-shadow:
    0 14px 28px -12px color-mix(in srgb, var(--chip-active-bg) 75%, transparent),
    0 2px 6px rgb(0 0 0 / 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.7);
  transition:
    opacity 240ms ease,
    transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 480ms;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.to-top:active {
  transform: scale(0.9);
  transition-duration: 120ms;
}

.to-top__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.to-top__ring circle {
  fill: none;
  stroke-width: 2;
}

.to-top__track {
  stroke: rgb(255 255 255 / 0.18);
}

.to-top__fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--read, 0) * 100);
}

.to-top__arrow {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
  transition: transform var(--dur-slow) var(--ease);
}

@media (hover: hover) {
  .to-top:hover .to-top__arrow {
    transform: translateY(-3px);
  }
}

@media (min-width: 768px) {
  .to-top {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

/* ---- Item sheet (native <dialog>) ------------------------------------------
   Phone: bottom sheet, photo capped at 30% of the screen, text scrolls under
   a pinned price. Tablet: centred 560px card. Desktop: split modal, photo
   full height on the start side. */

/* One type scale for the whole sheet, stepped per tier below. The footer
   pairs "Price" at body-text size with the number one clear step up, so the
   label reads as its caption rather than a footnote. */
.sheet {
  --sheet-eyebrow: 12px;
  --sheet-title: 24px;
  --sheet-body: 15px;
  --sheet-label: 16px;
  --sheet-price: 22px;
  width: 100%;
  max-width: 100%;
  max-height: 86vh;
  max-height: 86dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: sheet-up var(--dur-slow) var(--ease);
}

.sheet::backdrop {
  background: rgb(15 20 19 / 0.55);
}

.sheet[open]::backdrop {
  animation: fade-in 0.3s ease;
}

/* Fades with the sheet as it's pulled down (menu.js sets --drag-fade). */
.sheet::backdrop {
  opacity: var(--drag-fade, 1);
}

/* The photo keeps its own proportions, uncropped: full width, its natural
   height, up to 60% of the screen (a very tall one is letterboxed). */
.sheet__media {
  position: relative;
  flex: none;
  background: var(--line);
}

.sheet__photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  max-height: 60dvh;
  object-fit: contain;
}

/* Until the new photo has loaded it has no height: hold a slot for the shimmer. */
.sheet__media.is-loading {
  min-height: min(calc(100vw * 3 / 4), 40dvh);
}

.sheet.is-sold-out .sheet__photo {
  filter: saturate(0.35);
  opacity: 0.85;
}

/* Drag handle: white over the photo, the line colour on a plain sheet. */
.sheet__handle {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  translate: -50% 0;
}

.sheet.no-media .sheet__handle {
  background: var(--line-strong);
  box-shadow: none;
}

/* Phones: the sheet follows the finger (menu.js), so the page must not
   scroll or zoom under a drag on its photo or footer. */
@media (max-width: 767px) {
  .sheet__media,
  .sheet__footer {
    touch-action: none;
  }

  .sheet.is-dragging {
    user-select: none;
  }
}

.sheet__close {
  position: absolute;
  z-index: 3;
  top: 14px;
  inset-inline-end: 14px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.16);
}

.sheet__close svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.sheet__main {
  position: relative;
  /* Basis auto, not 0%: the sheet has no set height, so Safari sizes it from
     the children's bases, and a 0% basis collapses the text area. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet__body:focus {
  outline: none;
}

/* No photo: keep the text clear of the close button. */
.sheet.no-media .sheet__body {
  padding-top: 36px;
  padding-inline-end: 72px;
}

.sheet__category {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--price);
  font-size: var(--sheet-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sheet__category::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--accent);
}

.sheet__title {
  font-family: var(--font-item);
  font-size: var(--sheet-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.sheet__description {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--sheet-body);
  line-height: 1.65;
  white-space: pre-line;
}

.sheet__description:empty {
  display: none;
}

.sheet__footer {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-inline: 24px;
  padding: 18px 0 calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.sheet__label {
  color: var(--ink-muted);
  font-size: var(--sheet-label);
  font-weight: 500;
}

.sheet__price {
  color: var(--price);
  font-family: var(--font-price);
  font-size: var(--sheet-price);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sized off the number (em), so they keep their proportion at every tier. */
.sheet__price .price__currency {
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Labelled prices stack, each option on its own line. */
.sheet__price.has-options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: calc(var(--sheet-price) * 0.86);
}

.sheet__price .price__label {
  margin-inline-end: 10px;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 500;
}

.sheet .status {
  margin-inline-start: 0;
  font-size: calc(var(--sheet-label) - 1px);
}

.sheet:not(.is-sold-out) .status,
.sheet.is-sold-out .sheet__label,
.sheet.no-price .sheet__footer {
  display: none;
}

.sheet.is-sold-out .sheet__price {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: calc(var(--sheet-price) * 0.8);
  font-weight: 600;
}

/* Arabic: no capitals to track, and Naskh sits small for its size. */
:lang(ar) .sheet {
  --sheet-eyebrow: 13px;
  --sheet-label: 17px;
}

:lang(ar) .sheet__category,
:lang(ar) .sheet .status {
  letter-spacing: 0;
}

:lang(ar) .sheet__title {
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

:lang(ar) .sheet__description {
  line-height: 1.9;
}

@media (max-width: 359px), (max-height: 680px) {
  .sheet__photo {
    max-height: 50dvh;
  }
  .sheet__body {
    padding: 20px 18px 16px;
  }
  .sheet__footer {
    margin-inline: 18px;
  }
  .sheet {
    --sheet-title: 22px;
    --sheet-price: 20px;
  }
}

@media (min-width: 768px) {
  .sheet {
    width: 560px;
    max-height: min(760px, 86dvh);
    margin: auto;
    border-radius: 20px;
    box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.35);
  }

  .sheet[open] {
    animation-name: modal-up;
  }

  .sheet::backdrop {
    background: rgb(15 20 19 / 0.5);
    backdrop-filter: blur(3px);
  }

  .sheet__handle {
    display: none;
  }

  .sheet__body {
    padding: 32px 36px 20px;
  }

  .sheet__footer {
    margin-inline: 36px;
  }

  .sheet {
    --sheet-title: 28px;
    --sheet-body: 16px;
    --sheet-label: 17px;
    --sheet-price: 24px;
  }
}

@media (min-width: 1024px) {
  .sheet {
    width: min(920px, calc(100vw - 96px));
    height: min(560px, 80dvh);
    max-height: none;
  }

  .sheet[open] {
    flex-direction: row;
  }

  .sheet__media {
    width: 50%;
    display: flex;
    align-items: center;
  }

  .sheet__photo {
    height: 100%;
    max-height: none;
  }

  .sheet.no-media {
    width: 560px;
    height: auto;
    max-height: min(560px, 80dvh);
  }

  .sheet__close {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
  }

  .sheet__body {
    padding: 64px 48px 20px;
  }

  .sheet__footer {
    margin-inline: 48px;
    padding-bottom: 36px;
  }

  .sheet {
    --sheet-title: 32px;
    --sheet-price: 26px;
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

@keyframes modal-up {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ---- Branch list (home / 404) ---------------------------------------------- */

.branch-groups {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}

.branch-group__title {
  margin-bottom: 10px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

:lang(ar) .branch-group__title {
  font-size: 13px;
  letter-spacing: 0;
}

.branch-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.branch-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur), transform var(--dur) var(--ease);
}

.branch-link:hover {
  border-color: var(--accent);
}

.branch-link:active {
  transform: scale(0.99);
}

.branch-link__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

:lang(ar) .branch-link__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.branch-link__location {
  grid-row: 2;
  color: var(--ink-muted);
  font-size: 14px;
}

.branch-link__arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  stroke-width: 2;
}

[dir='rtl'] .branch-link__arrow {
  transform: scaleX(-1);
}

/* ---- Footer ---------------------------------------------------------------- */

/* The content between masthead and footer takes up any spare height. */
body > main,
body > .layout {
  flex: 1 0 auto;
  width: 100%;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
  padding: 36px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--head-bg);
  color: var(--head-muted);
  font-size: 12px;
  text-align: center;
}

.footer__mark {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.footer__lockup {
  width: 110px;
  height: auto;
}

/* Ard Diar's framed wordmark: about as tall as the 60px mark, since its
   frame reads lighter than a solid disc. */
.footer__lockup--wide {
  width: 96px;
}

/* No artwork (LYT): the brand name, spaced out like the masthead's wordmark. */
.footer__wordmark {
  color: var(--head-ink);
  font-family: var(--font-latin);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.32em;
  padding-inline-start: 0.32em;
}

.footer__branch {
  display: grid;
  gap: 2px;
}

.footer__name {
  color: var(--head-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

:lang(ar) .footer__name {
  font-size: 15px;
}

/* ---- Loading skeletons ------------------------------------------------------
   menu.js adds .js to <html>; without it nothing here shimmers. Photos shimmer
   in their own frame until they load; leaving for another page covers the old
   one with the shape of the next (menu or branch list). The sweep runs from
   the reading start, so it is mirrored in Arabic. */

@keyframes sk-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.sk,
.js .item__photo:not(.is-loaded),
.sheet__media.is-loading {
  --sk-base: var(--line);
  --sk-glow: color-mix(in srgb, var(--line) 35%, var(--bg));
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, transparent 35%, var(--sk-glow) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: sk-sweep 1.3s linear infinite;
}

[dir='rtl'] .sk,
[dir='rtl'] .item__photo,
[dir='rtl'] .sheet__media {
  animation-direction: reverse;
}

.sheet__media.is-loading .sheet__photo {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sk,
  .js .item__photo:not(.is-loaded),
  .sheet__media.is-loading {
    animation: none;
  }
}

.page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--bg);
  animation: sk-in var(--dur) ease-out;
}

@keyframes sk-in {
  from { opacity: 0; }
}

.sk {
  display: block;
  border-radius: 6px;
}

.sk-inner {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sk-inner--narrow {
  max-width: calc(560px + 2 * var(--gutter));
}

/* Header: the brand's dark band, with a lighter shimmer. */
.sk-head {
  padding: calc(16px + env(safe-area-inset-top)) 0 28px;
  background: var(--head-bg);
}

.sk-head .sk {
  --sk-base: rgb(255 255 255 / 0.08);
  --sk-glow: rgb(255 255 255 / 0.14);
}

.sk-head--bar {
  padding-bottom: 16px;
}

.sk-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.sk-head--bar .sk-top {
  justify-content: space-between;
}

.sk-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sk-pill { width: 88px; height: 44px; border-radius: 999px; }
.sk-mark { width: 40px; height: 40px; border-radius: 50%; }
.sk-name { width: 84px; height: 16px; }

.sk-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}

.sk-logo { width: 112px; height: 112px; border-radius: 50%; }
.sk-title { width: 150px; height: 40px; }
.sk-chip { width: 170px; height: 30px; border-radius: 999px; }

[data-brand='lyt'] .sk-logo { display: none; }
[data-brand='lyt'] .sk-title { width: min(240px, 70%); height: 64px; margin-top: 24px; }
[data-brand='lyt'] .sk-chip { width: 120px; height: 14px; margin-bottom: 20px; }

/* Category bar */
.sk-nav {
  border-bottom: 1px solid var(--line);
}

.sk-nav .sk-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--catnav-h);
  overflow: hidden;
}

.sk-tab { flex: none; width: 76px; height: 14px; }

/* Body */
.sk-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 32px;
}

.sk-heading { width: 180px; height: 30px; margin-bottom: 6px; }

.sk-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.sk-line { width: 85%; height: 12px; }
.sk-line--name { width: 45%; height: 16px; }
.sk-line--lead { width: 60%; height: 14px; margin-bottom: 8px; }
.sk-thumb { flex: none; width: var(--thumb); height: var(--thumb); border-radius: var(--radius-thumb); }
.sk-card { width: 100%; height: 72px; border-radius: var(--radius); }

@media (min-width: 768px) {
  .sk-head { padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: 36px; }
  .sk-logo { width: 136px; height: 136px; }
  .sk-title { width: 170px; }
}

@media (min-width: 1280px) {
  .sk-logo { width: 150px; height: 150px; }
}