/* ============================================================================
   GREENS & CO. — DIGITAL MENU
   Mobile-first. Written with CSS logical properties so the Kurdish (RTL)
   layout mirrors automatically without a second stylesheet.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Brand palette — from the Greens & Co. brand guideline */
  --forest:       #022507;
  --light-green:  #CDECB0;
  --accent:       #9C3A38;
  --cream:        #F7F5EC;
  --text:         #022507;

  /* Derived tones */
  --forest-90:    #0a3010;
  --forest-70:    rgba(2, 37, 7, .70);
  --forest-55:    rgba(2, 37, 7, .55);
  --forest-38:    rgba(2, 37, 7, .38);
  --forest-14:    rgba(2, 37, 7, .14);
  --forest-08:    rgba(2, 37, 7, .08);
  --hairline:     rgba(2, 37, 7, .13);
  --hairline-on-dark: rgba(205, 236, 176, .20);
  --cream-soft:   #FBFAF4;
  --light-green-12: rgba(205, 236, 176, .12);

  /* Type */
  --font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Metrics */
  --shell: 1180px;
  --gutter: 22px;
  --header-h: 58px;
  --catbar-h: 58px;
  --radius: 14px;
  --radius-sm: 10px;
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(.22, .68, .2, 1);
  --dur: .42s;
}

/* Kurdish switches the UI face to one with proper Arabic-script support.
   The Latin brand wordmark keeps Poppins in both languages. */
html[data-lang="ku"] {
  --font: 'Noto Sans Arabic', 'Poppins', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
}

@media (min-width: 900px) {
  :root { --header-h: 70px; --gutter: 40px; }
}


/* ------------------------------------------------------------- 2. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* No bottom padding here — the floating dock's clearance is built into the
     footer instead, so the page ends on the footer colour with no dead strip. */
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

input { font: inherit; color: inherit; }

/* Focus — visible, on-brand, and never on mouse clicks */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.lang-screen :focus-visible,
.site-header :focus-visible,
.dock :focus-visible,
.hero :focus-visible {
  outline-color: var(--light-green);
}


/* --------------------------------------------------------- 3. UTILITIES */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 16px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--light-green);
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  font-weight: 500;
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

.anchor { display: block; }

/* The Latin brand mark stays Latin & LTR even inside the Kurdish layout */
.wordmark {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
}

.noscript {
  padding: 40px var(--gutter);
  text-align: center;
  background: var(--forest);
  color: var(--light-green);
}


/* -------------------------------------------------------------- 4. LOGO */

/* Official artwork — English / Kurdish wordmarks plus the square icon.
   Every slot sizes by height so the two wordmark widths stay in rhythm. */
.logo-img { display: block; width: auto; max-width: 100%; }

.site-header__mark  .logo-img { height: 30px; }
.site-header__name  .logo-img { height: 19px; }

.lang-screen__icon     .logo-img { height: 76px; margin-inline: auto; }
.lang-screen__wordmark .logo-img { height: 42px; margin-inline: auto; }

.site-footer__mark .logo-img { height: 54px; margin-inline: auto; }
.site-footer__name .logo-img { height: 28px; margin-inline: auto; }

@media (min-width: 900px) {
  .site-header__mark  .logo-img { height: 34px; }
  .site-header__name  .logo-img { height: 21px; }
  .lang-screen__icon     .logo-img { height: 88px; }
  .lang-screen__wordmark .logo-img { height: 52px; }
  .site-footer__name .logo-img { height: 32px; }
}


/* ---------------------------------------------- 5. LANGUAGE SELECT SCREEN */

.lang-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 32px 26px calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--forest);
  color: var(--light-green);
  overflow: hidden;
}

html.lang-chosen .lang-screen { display: none; }
html:not(.lang-chosen) body { overflow: hidden; }

/* Page scroll lock while a full-screen overlay or sheet is open */
html.is-locked body { overflow: hidden; }

/* Leaving animation */
.lang-screen.is-leaving {
  animation: langOut .5s var(--ease) both;
  pointer-events: none;
}
@keyframes langOut {
  to { opacity: 0; transform: scale(1.03); }
}

/* ---- WebGL hero surface (js/hero-gl.js) --------------------------------
   The canvas sits on top of the photograph and does its own green duotone,
   so when it is running the <img> underneath is faded out. If WebGL is
   unavailable, the class is never added and the photograph simply stays. */
.hero-gl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* never blocks taps, buttons or scrolling */
}
.lang-screen__photo.is-gl img,
.hero__photo.is-gl img {
  opacity: 0;
  animation: none;        /* the shader takes over the zoom */
}

/* Salad-bar photograph, rendered as a green duotone so it reads as brand
   colour rather than a stock photo, then veiled for text contrast. */
.lang-screen__photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lang-screen__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  mix-blend-mode: luminosity;
  transform: scale(1.04);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

.lang-screen__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 75% at 50% 34%, rgba(2, 37, 7, .40) 0%, rgba(2, 37, 7, .84) 66%, rgba(2, 37, 7, .94) 100%),
    linear-gradient(to bottom, rgba(2, 37, 7, .52) 0%, rgba(2, 37, 7, .20) 40%, rgba(2, 37, 7, .78) 100%);
}

.lang-screen__botanicals {
  position: absolute;
  inset: 0;
  color: var(--light-green);
  opacity: .13;
  pointer-events: none;
}
.lang-screen__botanicals svg { width: 100%; height: 100%; }

.drift { animation: drift 14s ease-in-out infinite alternate; transform-origin: center; }
.drift--b { animation-duration: 18s; animation-delay: -3s; }
.drift--c { animation-duration: 16s; animation-delay: -7s; }
.drift--d { animation-duration: 20s; animation-delay: -5s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -14px, 0) rotate(2.5deg); }
}

.lang-screen__inner {
  position: relative;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

/* Staggered entrance */
.lang-screen__icon,
.lang-screen__title,
.lang-screen__tagline,
.lang-screen__rule,
.lang-screen__prompt,
.lang-screen__actions > * {
  animation: riseIn .85s var(--ease) both;
}
.lang-screen__icon     { animation-delay: .05s; }
.lang-screen__title    { animation-delay: .16s; }
.lang-screen__tagline  { animation-delay: .26s; }
.lang-screen__rule     { animation-delay: .34s; }
.lang-screen__prompt   { animation-delay: .42s; }
.lang-screen__actions > *:nth-child(1) { animation-delay: .52s; }
.lang-screen__actions > *:nth-child(2) { animation-delay: .60s; }

@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

.lang-screen__icon {
  display: flex;
  justify-content: center;
  margin-block-end: 30px;
}

.lang-screen__title {
  margin-block-end: 20px;
}
.lang-screen__wordmark { display: block; }

.lang-screen__tagline {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: rgba(205, 236, 176, .90);
}

.lang-screen__rule {
  display: flex;
  justify-content: center;
  margin-block: 34px 26px;
}
.lang-screen__rule span {
  display: block;
  width: 46px;
  height: 1px;
  background: rgba(205, 236, 176, .38);
}

.lang-screen__prompt {
  font-size: 13px;
  font-weight: 400;
  color: rgba(205, 236, 176, .88);
  margin-block-end: 22px;
}
.lang-screen__prompt .sep { margin-inline: 10px; opacity: .5; }

.lang-screen__actions {
  display: grid;
  gap: 12px;
}

.lang-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  padding-inline: 26px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: transform .22s var(--ease), background-color .22s var(--ease),
              color .22s var(--ease), border-color .22s var(--ease);
}
.lang-btn__arrow { width: 19px; height: 19px; opacity: .55; transition: transform .3s var(--ease), opacity .22s; }
.lang-btn__arrow svg { width: 100%; height: 100%; }

.lang-btn--primary {
  background: var(--light-green);
  color: var(--forest);
  border: 1px solid var(--light-green);
}
.lang-btn--secondary {
  background: transparent;
  color: var(--light-green);
  border: 1px solid rgba(205, 236, 176, .34);
}
.lang-btn--secondary .lang-btn__label { font-size: 20px; }

@media (hover: hover) {
  .lang-btn:hover .lang-btn__arrow { transform: translateX(4px); opacity: .9; }
  .lang-btn--secondary:hover { border-color: var(--light-green); background: rgba(205, 236, 176, .07); }
}
html[dir="rtl"] .lang-btn:hover .lang-btn__arrow { transform: translateX(-4px); }
.lang-btn:active { transform: scale(.985); }


/* ------------------------------------------------------------ 6. HEADER */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  height: var(--header-h);
  background: var(--forest);
  color: var(--light-green);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--tap);
}
.site-header__mark { display: flex; flex: none; }
.site-header__name { display: flex; min-width: 0; }

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--light-green);
  transition: background-color .2s var(--ease);
}
.icon-btn svg { width: 21px; height: 21px; }
@media (hover: hover) { .icon-btn:hover { background: rgba(205, 236, 176, .10); } }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--tap);
  padding-inline: 13px;
  border: 1px solid rgba(205, 236, 176, .26);
  border-radius: 40px;
  color: var(--light-green);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.lang-toggle svg { width: 17px; height: 17px; opacity: .8; }
.lang-toggle__code {
  font-family: var(--font-brand);
  direction: ltr;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
}
@media (hover: hover) {
  .lang-toggle:hover { border-color: rgba(205, 236, 176, .55); background: rgba(205, 236, 176, .07); }
}


/* -------------------------------------------------------------- 7. HERO */

.hero {
  position: relative;
  background: var(--forest);
  color: var(--light-green);
  padding-block: 48px 62px;
  overflow: hidden;
}
@media (min-width: 900px) { .hero { padding-block: 86px 100px; } }

/* Background photograph with a slow, continuous zoom in and out.
   Same green duotone treatment as the opening screen so it stays on-brand. */
.hero__photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .70;
  mix-blend-mode: luminosity;
  transform-origin: 50% 45%;
  will-change: transform;
  animation: heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.16); }
}

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(2, 37, 7, .82) 0%, rgba(2, 37, 7, .58) 45%, rgba(2, 37, 7, .90) 100%),
    linear-gradient(to right, rgba(2, 37, 7, .88) 0%, rgba(2, 37, 7, .42) 62%, rgba(2, 37, 7, .30) 100%);
}
html[dir="rtl"] .hero__veil {
  background:
    linear-gradient(to bottom, rgba(2, 37, 7, .82) 0%, rgba(2, 37, 7, .58) 45%, rgba(2, 37, 7, .90) 100%),
    linear-gradient(to left, rgba(2, 37, 7, .88) 0%, rgba(2, 37, 7, .42) 62%, rgba(2, 37, 7, .30) 100%);
}

.hero__inner { position: relative; }

.hero__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(205, 236, 176, .86);
  margin-block-end: 20px;
}

.hero__title { margin-block-end: 26px; }
.hero__title .logo-img { height: clamp(38px, 10.5vw, 78px); }

.hero__claim {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 300;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--light-green);
}
html[dir="rtl"] .hero__claim { direction: rtl; letter-spacing: 0; text-transform: none; font-size: clamp(14px, 4vw, 18px); }


/* ------------------------------------------------- 7b. SEASONAL SALAD */

/* The band sits directly under the hero. The photograph is a cut-out baked
   onto exactly this background colour, so it reads as the dish floating on
   the page with no frame, no crop and no visible edge. */
.seasonal {
  position: relative;
  background: rgb(251, 250, 245);
  border-block-end: 1px solid var(--hairline);
  padding-block: 0 26px;          /* tight to the hero above */
  overflow: hidden;               /* no horizontal overflow from the drift */
}
.seasonal[hidden] { display: none; }
@media (min-width: 900px) { .seasonal { padding-block: 8px 44px; } }

.seasonal__inner {
  display: grid;
  gap: 6px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
@media (min-width: 760px) {
  .seasonal__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    justify-items: stretch;
    text-align: start;
  }
  html[dir="rtl"] .seasonal__inner { text-align: start; }
}

/* The dish. Nothing crops it: the whole square is shown and the drift stays
   well inside the band's padding. */
/* The figure reserves a fixed band of space above and below the dish. The dish
   drifts 8% of its own height inside that reserve, so it can never be clipped
   — the whole product stays visible at every width. Percentages are avoided
   here because padding-% resolves against the grid column, not the dish.
   The reserve is kept just big enough for the drift, so the dish sits close
   under the hero rather than floating in empty space. */
.seasonal__figure {
  margin: 0;
  width: 100%;
  max-width: 560px;
  padding-block: clamp(34px, 5.5vw, 62px);
}
/* On a phone the dish breaks out of the page gutter and runs edge to edge, so
   it reads as large as possible. The band clips its own overflow, so this can
   never create a horizontal scrollbar. */
@media (max-width: 759px) {
  .seasonal__figure {
    max-width: none;
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
  }
}
@media (min-width: 1080px) { .seasonal__figure { max-width: 620px; } }

.seasonal__photo { display: block; will-change: transform; }
.seasonal__photo img {
  display: block;
  width: 100%;
  height: auto;                   /* whole product, never clipped */
}

.seasonal__body { will-change: transform; }

.seasonal__eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 10px;
}
html[data-lang="ku"] .seasonal__eyebrow { letter-spacing: .04em; text-transform: none; font-size: 13px; }

.seasonal__title {
  font-size: clamp(26px, 7vw, 42px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.08;
  margin-block-end: 12px;
}

.seasonal__price {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-block-end: 20px;
}
html[data-lang="ku"] .seasonal__price { font-family: var(--font); direction: rtl; }
.seasonal__price[hidden] { display: none; }

.seasonal__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding-inline: 22px;
  border-radius: 40px;
  background: var(--forest);
  color: var(--light-green);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .24s var(--ease), transform .2s var(--ease);
}
.seasonal__cta svg { width: 17px; height: 17px; }
html[dir="rtl"] .seasonal__cta svg { transform: scaleX(-1); }
@media (hover: hover) { .seasonal__cta:hover { background: var(--forest-90); } }
.seasonal__cta:active { transform: scale(.98); }


/* ------------------------------------------- 8. STICKY CATEGORY NAV BAR */

.catbar {
  position: sticky;
  inset-block-start: calc(var(--header-h) - 1px);
  z-index: 80;
  display: flex;
  align-items: center;
  min-height: var(--catbar-h);
  background: rgba(247, 245, 236, .93);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-block-end: 1px solid var(--hairline);
  overflow: hidden; /* keeps the fade-out gradient inside the bar */
}

.catbar__scroller {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-inline: var(--gutter);
  padding-block: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.catbar__scroller::-webkit-scrollbar { display: none; }

.catpill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 17px;
  border: 1px solid var(--forest-14);
  border-radius: 40px;
  background: transparent;
  color: var(--forest-70);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color .26s var(--ease), color .26s var(--ease),
              border-color .26s var(--ease), transform .18s var(--ease);
}
.catpill:active { transform: scale(.96); }

.catpill.is-active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--light-green);
}

.catpill--outline { border-style: dashed; border-color: var(--forest-14); }
.catpill--outline.is-active { border-style: solid; }

.catbar__divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--hairline);
  margin-inline: 4px;
}

.catbar__filter {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-inline-end: calc(var(--gutter) - 10px);
  border-radius: 50%;
  color: var(--forest);
  transition: background-color .2s var(--ease);
}
.catbar__filter::before {
  /* fade so pills disappear neatly under the filter button */
  content: "";
  position: absolute;
  inset-block: -30px;
  inset-inline-start: -34px;
  width: 34px;
  background: linear-gradient(to right, rgba(247,245,236,0), rgba(247,245,236,.95));
  pointer-events: none;
}
html[dir="rtl"] .catbar__filter::before {
  background: linear-gradient(to left, rgba(247,245,236,0), rgba(247,245,236,.95));
}
.catbar__filter svg { width: 20px; height: 20px; }
@media (hover: hover) { .catbar__filter:hover { background: var(--forest-08); } }

.catbar__filter-dot {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--cream);
}

/* Active filter notice */
.active-filter {
  background: var(--forest);
  color: var(--light-green);
}
.active-filter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  font-size: 13px;
}
.active-filter__text strong { font-weight: 600; }
.active-filter__clear {
  min-height: 34px;
  padding-inline: 14px;
  border: 1px solid rgba(205, 236, 176, .34);
  border-radius: 40px;
  color: var(--light-green);
  font-size: 12.5px;
  font-weight: 500;
}


/* ------------------------------------------------ 9. SECTIONS & HEADINGS */

.menu-section {
  padding-block: 54px 12px;
  scroll-margin-block-start: calc(var(--header-h) + var(--catbar-h) + 6px);
}
.menu-section:first-child { padding-block-start: 44px; }
@media (min-width: 900px) { .menu-section { padding-block-start: 78px; } }

.sec-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 14px;
  margin-block-end: 8px;
}

.sec-head__index {
  font-family: var(--font-brand);
  direction: ltr;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent);
}

.sec-head__title {
  font-size: clamp(27px, 7.6vw, 46px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.sec-head__rule {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--hairline);
  margin-block-start: 16px;
}

.sec-head__count {
  font-size: 12px;
  font-weight: 400;
  color: var(--forest-38);
  letter-spacing: .04em;
}

.sec-note {
  font-size: 14px;
  font-weight: 300;
  color: var(--forest-55);
  margin-block: 16px 0;
}


/* --------------------------------------------------------- 10. MENU CARDS */

/* One card per row on a phone, so each dish gets the full width of the screen
   and its photograph is as large as it can be. Two from tablet, three from
   desktop. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-block-start: 26px;
}
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-block-start: 34px; }
}
@media (min-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: start;
  /* The card is transparent, so the page's cream shows through under the name
     and price. Only .card__media below stays white, matching the photographs'
     own white ground. */
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  contain: layout style;
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
  /* reveal on scroll */
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
.card.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s var(--ease); }

/* Section heading and standfirst rise with the cards under them. Kept small -
   6px and 10px - so scrolling feels alive without turning into a slideshow. */
.sec-head,
.sec-note {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
.sec-head.is-in,
.sec-note.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

/* The rule inside the heading draws itself in behind the title. */
.sec-head__rule { transform-origin: left center; transform: scaleX(0); }
html[dir="rtl"] .sec-head__rule { transform-origin: right center; }
.sec-head.is-in .sec-head__rule {
  transform: scaleX(1);
  transition: transform .7s var(--ease) .12s;
}

@media (prefers-reduced-motion: reduce) {
  .sec-head, .sec-note { opacity: 1; transform: none; }
  .sec-head__rule { transform: none; }
}
.card:active { transform: scale(.99); }

@media (hover: hover) {
  .card:hover { border-color: var(--forest-38); box-shadow: 0 8px 26px rgba(2, 37, 7, .09); }
  .card:hover .card__media img { transform: scale(1.05); }
}

/* Media — the photograph leads the card at every screen size.
   The 4:3 shape matches the photographs exactly, so object-fit: cover fills
   the whole area without ever cropping a dish, phone or desktop. */
.card__media {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}

/* Shown only for the dishes that have no photograph yet. White like every other
   card, with the leaf just dark enough to show the slot is waiting for a photo. */
.card__media.is-empty {
  background: #fff;
}
.card__media.is-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022507' stroke-width='1.1'%3E%3Cpath d='M2 22C2 10 10 2 22 2C22 14 14 22 2 22Z'/%3E%3Cpath d='M4.5 19.5C10 15.5 15.5 10 19.5 4.5' stroke-width='.8'/%3E%3C/svg%3E") center / 20% no-repeat;
  opacity: .13;
}

/* Body */
.card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 17px;
}

.card__name {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
}

.card__desc {
  font-size: 12.8px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--forest-55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price and calories sit on the card itself — no tap needed to see them */
.card__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: auto;
  padding-block-start: 11px;
  border-block-start: 1px solid var(--hairline);
}
.card__meta:empty { display: none; }

.card__price {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--forest);
}
html[data-lang="ku"] .card__price { font-family: var(--font); direction: rtl; }

.card__cal {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .09em;
  color: var(--forest-38);
}
html[data-lang="ku"] .card__cal { font-family: var(--font); direction: rtl; letter-spacing: 0; }


/* ------------------------------------------------------- Icon key
   The legend under the category bar. Quiet by design - it is a reference,
   not a feature, so it sits a step below the section headings.            */

.legend {
  padding-block: 18px 4px;
}
.legend__title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest-38);
  margin-block-end: 12px;
}
html[data-lang="ku"] .legend__title { letter-spacing: 0; text-transform: none; font-size: 12px; }

.legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legend__icon {
  display: inline-flex;
  align-items: center;
  color: var(--forest-55);
}
.legend__icon svg { width: 17px; height: 17px; flex: none; }
.legend__icon--heat { color: var(--accent); }
.legend__icon--heat svg { width: 16px; height: 16px; }
.legend__icon--heat svg + svg { margin-inline-start: -4px; }

.legend__label {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--forest-70);
}

@media (min-width: 760px) {
  .legend { padding-block: 24px 6px; }
  .legend__list { gap: 12px 26px; }
  .legend__icon svg { width: 18px; height: 18px; }
  .legend__label { font-size: 13.5px; }
}

/* ------------------------------------------------- Dish marks (icons)
   The small icons that sit opposite the price: what the dish is made of,
   and how hot it is. Each one also carries its name as a tooltip and for
   screen readers, so the icon is never the only way to read it.           */

.card__marks {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-inline-start: auto;   /* flips to the correct edge in Kurdish */
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--forest-55);
}
.mark svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Heat is the one thing on a card worth a colour of its own */
.mark--heat { color: var(--accent); }
.mark--heat svg { width: 16px; height: 16px; }
.mark--heat svg + svg { margin-inline-start: -4px; }

@media (min-width: 760px) {
  .card__marks { gap: 10px; }
  .mark svg { width: 19px; height: 19px; }
  .mark--heat svg { width: 17px; height: 17px; }
}

/* The same icons inside the popup's chips */
.tag svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-inline-end: 5px;
}
.tag--heat {
  color: var(--accent);
  border-color: rgba(156, 58, 56, .32);
}
.tag--heat svg + svg { margin-inline-start: -5px; }


/* ---------------------------------------------- Text-only cards (drinks)
   No photograph, so these are set as typography instead: two to a row on a
   phone, the name centred over a fine rule, the price beneath it. The price
   is pushed to the bottom of the card so every price in a row lines up.

   Deliberately quieter than the food cards - lighter weight on the name, a
   thinner hairline, a muted price - so a long drinks list reads as a calm
   column rather than forty competing boxes.                                 */

/* Two per row on a phone. Compact enough to gain a column earlier than the
   photo cards, which keeps a 19-item list short enough to take in. */
.grid--text { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 620px)  { .grid--text { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1080px) { .grid--text { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.card--text {
  min-height: 124px;
  border-color: rgba(2, 37, 7, .08);   /* finer than the standard hairline */
  border-radius: 16px;
}

/* The name, rule and price sit as one centred stack. Pinning the price to the
   bottom lines prices up across a row, but it also strands a one-line name at
   the top of a card sized for a two-line one, which looks like a mistake. */
.card--text .card__body {
  align-items: center;
  justify-content: center;
  padding: 18px 11px;
  gap: 0;
  text-align: center;
}

.card--text .card__name {
  font-size: 13.6px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .004em;
  color: var(--forest);
  /* guarantees air under a two-line name, which the auto margin cannot */
  margin-block-end: 12px;
}
/* nothing under the name, so no gap to reserve beneath it */
.card--noprice .card__name { margin-block-end: 0; }

.card--text .card__meta {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: 0;
}
/* A flex item, not a positioned pseudo-element, so it stays centred in RTL */
.card--text .card__meta::before {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: rgba(2, 37, 7, .18);
}

.card--text .card__price {
  font-size: 12.8px;
  font-weight: 600;
  letter-spacing: .012em;
  color: var(--forest-70);             /* quieter than a food price */
}
html[data-lang="ku"] .card--text .card__price { letter-spacing: 0; font-size: 13.4px; }

/* Kurdish sets slightly wider, so it gets a touch more room */
html[data-lang="ku"] .card--text .card__name { font-size: 14px; letter-spacing: 0; }

@media (min-width: 620px) {
  .card--text { min-height: 136px; }
  .card--text .card__body { padding: 22px 14px; }
  .card--text .card__name { font-size: 15px; margin-block-end: 14px; }
  .card--text .card__price { font-size: 14px; }
  .card--text .card__meta { gap: 12px; }
  .card--text .card__meta::before { width: 18px; }
}

@media (min-width: 1080px) {
  .card--text { min-height: 148px; }
  .card--text .card__name { font-size: 16px; }
  .card--text .card__price { font-size: 15px; }
}

.card__badge {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  padding: 4px 9px;
  border-radius: 40px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1;
}
html[data-lang="ku"] .card__badge { letter-spacing: 0; text-transform: none; font-size: 10.5px; }

@media (min-width: 760px) {
  .card__body { padding: 20px 20px 22px; gap: 7px; }
  .card__name { font-size: 18px; }
  .card__desc { font-size: 13.2px; }
  .card__meta { padding-block-start: 13px; }
  .card__price { font-size: 16px; }
  .card__badge { inset-block-start: 12px; inset-inline-end: 12px; }
}

.no-results {
  padding: 60px var(--gutter) 80px;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  color: var(--forest-55);
}


/* ---------------------------------------------------------- 11. DRESSINGS */

.dressings {
  padding-block: 64px 72px;
  margin-block-start: 54px;
  background: var(--cream-soft);
  border-block: 1px solid var(--hairline);
  scroll-margin-block-start: calc(var(--header-h) + var(--catbar-h) + 6px);
}
@media (min-width: 900px) { .dressings { padding-block: 92px 100px; } }

.dressings__note {
  font-size: 14px;
  font-weight: 300;
  color: var(--forest-55);
  margin-block: 16px 0;
  max-width: 46ch;
}

.dressings__list {
  display: grid;
  gap: 0;
  margin-block-start: 26px;
}
@media (min-width: 620px) { .dressings__list { grid-template-columns: repeat(2, 1fr); column-gap: 44px; } }
@media (min-width: 1000px) { .dressings__list { grid-template-columns: repeat(3, 1fr); } }

.dressing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 13px;
  border-block-end: 1px solid var(--hairline);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--forest-70);
}
.dressing__name { flex: 1 1 auto; min-width: 0; }

.dressing__price {
  flex: none;
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  letter-spacing: -.005em;
}
html[data-lang="ku"] .dressing__price { font-family: var(--font); direction: rtl; }

.dressing__drop {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent);
  opacity: .85;
}
.dressing__drop svg { width: 100%; height: 100%; }


/* ------------------------------------------------------------ 13. FOOTER */

/* Light green band — deliberately the opposite tone to Make Your Own above it,
   so the page closes on a bright note instead of two dark blocks in a row. */
.site-footer {
  padding-block: 60px 70px;
  background: var(--light-green);
  color: var(--forest);
}
/* Below 900px the floating dock overlaps the page, so the footer carries its
   clearance itself. The green then runs all the way to the bottom edge. */
@media (max-width: 899px) {
  /* dock is 65px tall and floats 14px off the bottom, plus a little air */
  .site-footer { padding-block-end: calc(65px + 14px + 24px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) { .site-footer { padding-block: 84px 90px; } }

.site-footer__inner { text-align: center; }

.site-footer__brand { display: flex; flex-direction: column; align-items: center; }
.site-footer__mark { margin-block-end: 22px; }
.site-footer__name { margin-block-end: 12px; }

.site-footer__claim {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(2, 37, 7, .62);
}
html[data-lang="ku"] .site-footer__claim {
  font-family: var(--font); direction: rtl; letter-spacing: 0; text-transform: none; font-size: 13px;
}

/* ---- contact block ---- */

.site-footer__contact { margin-block-start: 40px; }

.site-footer__heading {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 18px;
}
html[data-lang="ku"] .site-footer__heading { letter-spacing: .04em; text-transform: none; font-size: 13px; }

.site-footer__facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-block-end: 20px;
}
.site-footer__facts[hidden] { display: none; }

.footer-fact {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(2, 37, 7, .78);
}
.footer-fact svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

.site-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.site-footer__links[hidden] { display: none; }

.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--tap);
  padding-inline: 20px;
  border: 1px solid rgba(2, 37, 7, .22);
  border-radius: 40px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--forest);
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease);
}
.footer-link svg { width: 17px; height: 17px; flex: none; }
@media (hover: hover) {
  .footer-link:hover { background: var(--forest); border-color: var(--forest); color: var(--light-green); }
}
.footer-link:active { transform: scale(.98); }

.site-footer__rule {
  width: 40px;
  height: 1px;
  margin: 40px auto 30px;
  background: rgba(2, 37, 7, .28);
}

.site-footer__note {
  font-size: 13px;
  font-weight: 400;
  color: rgba(2, 37, 7, .70);
}

.site-footer__legal {
  margin-block-start: 14px;
  font-size: 11.5px;
  font-weight: 300;
  color: rgba(2, 37, 7, .48);
}


/* -------------------------------------------- 14. FLOATING BOTTOM DOCK */

.dock {
  position: fixed;
  inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
  inset-inline: 14px;
  z-index: 85;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 380px;
  margin-inline: auto;
  padding: 6px;
  background: rgba(2, 37, 7, .93);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(205, 236, 176, .14);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2, 37, 7, .22);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.dock.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }

@media (min-width: 900px) { .dock { display: none; } }

.dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  border-radius: 13px;
  color: rgba(205, 236, 176, .62);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.dock__item svg { width: 20px; height: 20px; }
.dock__item span { line-height: 1.15; }
.dock__item.is-active { color: var(--light-green); background: rgba(205, 236, 176, .10); }
.dock__item:active { transform: scale(.96); }


/* ------------------------------------------------------------ 15. SEARCH */

.search {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  animation: searchIn .3s var(--ease) both;
}
.search[hidden] { display: none; }
@keyframes searchIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.search__bar {
  flex: none;
  background: var(--forest);
  color: var(--light-green);
  padding-block-start: env(safe-area-inset-top, 0px);
}

.search__bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
}

.search__icon { flex: none; width: 20px; height: 20px; opacity: .7; }
.search__icon svg { width: 100%; height: 100%; }

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--light-green);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.005em;
}
.search__input::placeholder { color: rgba(205, 236, 176, .45); }
.search__input:focus-visible { outline: none; }
/* remove the native clear button so the design stays clean */
.search__input::-webkit-search-decoration,
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--light-green);
}
.search__close svg { width: 20px; height: 20px; }

.search__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-block: 26px 60px;
}

.search__hint,
.search__count {
  font-size: 13px;
  font-weight: 300;
  color: var(--forest-55);
  margin-block-end: 4px;
}
.search__count { font-weight: 500; color: var(--forest-70); }

.search__body .grid { margin-block-start: 20px; }
.search__body .card { opacity: 1; transform: none; }

.search-empty { padding-block: 46px; }
.search-empty__title { font-size: 17px; font-weight: 500; margin-block-end: 6px; }
.search-empty__hint { font-size: 13.5px; font-weight: 300; color: var(--forest-55); }


/* ----------------------------------------- 16. SHEETS (item / filter / lang) */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet[hidden] { display: none; }

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 37, 7, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .3s var(--ease) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet__panel {
  position: relative;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(2, 37, 7, .20);
  animation: sheetUp .42s var(--ease) both;
  overflow: hidden;
}
@keyframes sheetUp {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: none; }
}

/* While a finger is on it the panel follows the drag, so the entry animation
   has to get out of the way - a filled animation outranks an inline transform. */
.sheet__panel.is-dragging {
  animation: none !important;
  transition: none;
  will-change: transform;
}
.sheet__panel:not(.is-dragging) { transition: transform .28s var(--ease); }

/* the grip owns the vertical gesture; without this the browser scrolls instead */
.sheet__grip { touch-action: none; }

.sheet.is-closing .sheet__panel { animation: sheetDown .28s var(--ease) both; }
.sheet.is-closing .sheet__backdrop { animation: fadeOut .28s var(--ease) both; }
@keyframes sheetDown { to { transform: translate3d(0, 100%, 0); } }
@keyframes fadeOut { to { opacity: 0; } }

.sheet__grip {
  flex: none;
  display: block;
  width: 100%;
  height: 26px;
  position: relative;
}
.sheet__grip::before {
  content: "";
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--forest-14);
}

.sheet__x {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  z-index: 3;
  display: none;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: rgba(247, 245, 236, .92);
  color: var(--forest);
  box-shadow: 0 2px 10px rgba(2, 37, 7, .12);
}
.sheet__x svg { width: 20px; height: 20px; }

.sheet__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px var(--gutter) calc(30px + env(safe-area-inset-bottom, 0px));
}

.sheet__heading {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-block: 6px 20px;
}

.sheet__fineprint {
  margin-block-start: 22px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--forest-55);
}

/* Desktop: centered modal */
@media (min-width: 760px) {
  .sheet { align-items: center; padding: 30px; }
  .sheet__panel {
    max-width: 620px;
    max-height: 86vh;
    border-radius: 18px;
    animation: modalIn .34s var(--ease) both;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  .sheet.is-closing .sheet__panel { animation: modalOut .24s var(--ease) both; }
  @keyframes modalOut { to { opacity: 0; transform: scale(.985); } }
  .sheet__grip { height: 0; pointer-events: none; }
  .sheet__grip::before { display: none; }
  .sheet__x { display: grid; }
  .sheet--compact .sheet__scroll { padding-block-start: 26px; }
  .sheet--compact .sheet__panel { max-width: 460px; }
}

/* ---- Item detail contents ---- */

.detail__media {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  margin-block-end: 24px;
  aspect-ratio: 4 / 3;      /* same shape as the photographs — nothing cropped */
  overflow: hidden;
  background: #fff;
}
@media (min-width: 760px) {
  .detail__media { margin-block-start: 0; }
}
.detail__media img { width: 100%; height: 100%; object-fit: cover; }

.detail__media.is-empty {
  display: grid;
  place-items: center;
  background: #fff;
}
.detail__media.is-empty .detail__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--forest);
  opacity: .26;
}
.detail__media.is-empty svg { width: 40px; height: 40px; }
.detail__placeholder span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
html[data-lang="ku"] .detail__placeholder span { letter-spacing: 0; text-transform: none; font-size: 12px; }

.detail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 12px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--forest-14);
  border-radius: 40px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest-70);
}
html[data-lang="ku"] .tag { letter-spacing: 0; text-transform: none; font-size: 12px; }
.tag--accent { background: var(--accent); border-color: var(--accent); color: #fff; }

.detail__name {
  font-size: clamp(24px, 6.5vw, 32px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.14;
  margin-block-end: 16px;
}

/* The written line under the name — the desserts use it for "Home made" and
   the like. Sits closer to the title than the price does. */
.detail__standfirst {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--forest-55);
  margin-block: -8px 16px;
}

.detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-block: 16px;
  border-block: 1px solid var(--hairline);
  margin-block-end: 24px;
}
.detail__meta:empty { display: none; }

.detail__price {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
html[data-lang="ku"] .detail__price { font-family: var(--font); direction: rtl; }

.detail__cal {
  font-family: var(--font-brand);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .09em;
  color: var(--forest-38);
}
html[data-lang="ku"] .detail__cal { font-family: var(--font); direction: rtl; letter-spacing: 0; }

.detail__block { margin-block-end: 22px; }

.detail__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 10px;
}
html[data-lang="ku"] .detail__label { letter-spacing: .02em; text-transform: none; font-size: 12.5px; }

.detail__ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.detail__ingredients li {
  padding: 7px 13px;
  background: var(--forest-08);
  border-radius: 40px;
  font-size: 13px;
  font-weight: 400;
  color: var(--forest-70);
}

.detail__dressing {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--forest-14);
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
}
.detail__dressing svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.detail__note {
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--forest-38);
  padding-block-start: 18px;
  border-block-start: 1px solid var(--hairline);
}
/* A drink has no ingredients and no dressing, so the note lands straight under
   the price. The price row already draws a rule — a second one right below it
   left an empty band between two hairlines. */
.detail__meta + .detail__note {
  padding-block-start: 0;
  border-block-start: 0;
}

/* ---- Filter chips ---- */

.chipset { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 18px;
  border: 1px solid var(--forest-14);
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--forest-70);
  transition: background-color .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.chip[aria-pressed="true"] {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--light-green);
}

/* ---- Language list ---- */

.langlist { display: grid; gap: 8px; }

.langlist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding-inline: 20px;
  border: 1px solid var(--forest-14);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.langlist__item[aria-current="true"] {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--light-green);
}
.langlist__check { width: 20px; height: 20px; opacity: 0; flex: none; }
.langlist__check svg { width: 100%; height: 100%; }
.langlist__item[aria-current="true"] .langlist__check { opacity: 1; }


/* ------------------------------------------------ 17. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card { opacity: 1; transform: none; }
  .catbar__scroller { scroll-behavior: auto; }
}


/* ------------------------------------------------ 18. HIGH-CONTRAST HELP */

@media (prefers-contrast: more) {
  :root {
    --forest-70: rgba(2, 37, 7, .88);
    --forest-55: rgba(2, 37, 7, .78);
    --forest-38: rgba(2, 37, 7, .62);
    --hairline:  rgba(2, 37, 7, .34);
  }
}