/* ============================================================================
   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); }
.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; }


/* ---------------------------------------------- Text-only cards (drinks)
   The drinks carry no photograph, so their cards are set as a typographic
   list instead: name centred, a short rule, then the price. The price is
   pushed to the bottom of the card so every price in a row lines up.        */

.card--text { min-height: 106px; }

.card--text .card__body {
  align-items: center;
  justify-content: flex-start;
  padding: 18px 12px 16px;
  gap: 0;
  text-align: center;
}

/* Nothing sits under the name on these, so centre it instead of leaving it
   floating above the space a price would have taken. */
.card--noprice .card__body { justify-content: center; padding-block: 18px; }

.card--text .card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.008em;
  /* guarantees air under a two-line name, which the auto margin below cannot */
  margin-block-end: 13px;
}
.card--noprice .card__name { margin-block-end: 0; }

.card--text .card__meta {
  flex-direction: column;
  align-items: center;
  gap: 11px;
  /* the short rule replaces the full-width one the photo cards use */
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: auto;
}
/* A flex item, not a positioned pseudo-element, so it stays centred in RTL */
.card--text .card__meta::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: var(--hairline);
}

.card--text .card__price { font-size: 15px; }

/* A drinks list runs long, so the compact cards step up a column earlier
   than the photo cards do. */
@media (min-width: 620px) { .grid--text { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .grid--text { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 760px) {
  .card--text { min-height: 132px; }
  .card--text .card__body { padding: 24px 16px 21px; }
  .card--noprice .card__body { padding-block: 24px; }
  .card--text .card__name { font-size: 17px; }
  .card--text .card__price { font-size: 16px; }
  .card--text .card__meta { gap: 13px; }
}

.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; }
}

.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);
  }
}