/* =========================================================================
   egeden.css -- the only stylesheet we own.

   Loaded LAST so it overrides the purchased "Gourmet" theme without editing
   any theme file. Everything here is prefixed .eg- except for a handful of
   deliberate, commented overrides of theme selectors.

   The theme's own look: Libre Baskerville 14px/#737373 body, Montserrat
   headings, neutral greys (#2e2e2e, #484848, #e2e2e2). This file adds the
   brand green sampled from the logo (#168742), a real type scale, a
   mobile-first action bar, and the menu UI.

   Sections: [tokens] [type] [buttons] [focus] [hero] [page-head] [menu]
             [featured] [form] [directions] [directions sheet] [action-bar]
             [overlays] [rtl]
   ========================================================================= */

/* ---------- [tokens] ---------------------------------------------------- */
:root {
  /* Brand green sampled from static/images/logo.webp.
     #168742 on white = 4.59:1 (AA for normal text, and for white-on-green
     buttons). #116a39 = 6.68:1, used wherever green sits on white as text. */
  --eg-green: #168742;
  --eg-green-dark: #116a39;

  --eg-ink: #2e2e2e;        /* 13.6:1 on white */
  --eg-body: #4a4a4a;       /* 9.0:1 -- the theme's #737373 is only 4.7:1 */
  --eg-muted: #6f6f6f;
  --eg-line: #e6e6e6;
  --eg-surface: #ffffff;
  --eg-surface-2: #f7f6f3;  /* warm stone */

  --eg-radius: 10px;
  --eg-radius-sm: 6px;
  --eg-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .07);
  --eg-shadow-lg: 0 10px 30px rgba(0, 0, 0, .13);

  --eg-s1: 4px;
  --eg-s2: 8px;
  --eg-s3: 12px;
  --eg-s4: 16px;
  --eg-s5: 24px;
  --eg-s6: 32px;
  --eg-s7: 48px;

  /* Overwritten at runtime by egeden.js: the theme's header is fixed and
     shrinks after 100px of scroll, so this cannot be a constant. */
  --eg-header-h: 74px;
  --eg-bar-h: 68px;

  /* --- type scale ------------------------------------------------------
     One scale for the whole site, phone size first, growing to the desktop
     size via clamp(). Every font-size below refers to a step in this list --
     nothing is sized ad hoc, which is what previously left the story text
     larger than the dish names it sat next to.

     Values are in PX, not REM, on purpose: bootstrap.css:322 sets
     `html { font-size: 10px }`, so 1rem is 10px on this site and every
     rem-based size silently renders at 62.5% of its intended value.

     Ordinary web typography: 16px body, 14px floor for fine print, headings
     on a ~1.25 ratio above it. The site previously rendered 10-11px text
     because bootstrap.css:322 sets `html { font-size: 10px }` and every rem
     silently became 62.5% of its intended value -- that was the real problem,
     not the scale, so this stays at standard sizes rather than compensating.

     14px is the floor for fine print; body sits just under the 16px default
     because the theme's body face (Libre Baskerville) has a large x-height
     and reads a size bigger than a sans at the same value.

     step        phone -> desktop   used for
     --------------------------------------------------------------------
     micro       12px               qualifier words inside a value chip only
     label       14px               action bar, fine print
     meta        14px               notes, category labels, allergen note
     body        15px               all body copy AND dish descriptions
     lead        16px               intros, testimonial quotes, prices
     h3          17 -> 18px         dish names, card headings
     h2          20 -> 24px         section and category headings
     h1          23 -> 29px         page headings
     hero        27 -> 38px         the homepage hero headline            */
  --fs-micro: 12px;
  --fs-label: 14px;
  --fs-meta: 14px;
  --fs-body: 15px;
  --fs-lead: 16px;
  --fs-h3: clamp(17px, 16.6px + 0.1vw, 18px);
  --fs-h2: clamp(20px, 18.1px + 0.5vw, 24px);
  --fs-h1: clamp(23px, 20.2px + 0.75vw, 29px);
  --fs-hero: clamp(27px, 21.8px + 1.4vw, 38px);
}

/* ---------- [type] ------------------------------------------------------
   Every size below comes from the scale in [tokens]. The theme shipped 14px
   body copy in a light grey (#737373, 4.7:1); this sets 16-17px in a darker
   grey (9:1). Nothing readable on this site is below 16px, and no element
   picks its own size outside the scale. */
body,
p,
.title-base p,
.advs-box p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--eg-body);
}

/* The theme's own components inherit a 14px/25px rhythm from skin.css. */
.eg-menu p,
.eg-featured p,
.eg-page-head p,
.eg-gf p,
.eg-faq p,
.eg-form label,
.eg-action-bar span {
  line-height: 1.55;
}

/* Respect the OS "reduce motion" setting -- the theme animates a lot. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.eg-menu h2,
.eg-featured h2,
.eg-testimonials h2,
.eg-gf h2,
.eg-faq h2,
.eg-page-head h1,
.eg-gf h1 {
  color: var(--eg-ink);
  letter-spacing: -0.01em;
}

.eg-page-head h1,
.eg-gf h1 {
  font-size: var(--fs-h1);
  line-height: 1.2;
  margin: 0 0 var(--eg-s3);
}

/* The theme uppercases every h2 in .title-base (skin.css:892) and every h3
   globally (skin.css:519). ALL-CAPS is measurably slower to read, and it hurts
   most on exactly this content: long Turkish names full of diacritics
   ("ODUN ATEŞİNDE VEJETARYEN PİDELER"). The Strapi copy is already title-cased,
   so we just stop shouting it. Other h3s on the site keep the theme's look. */
.eg-menu h2,
.eg-featured h2,
.eg-testimonials h2,
.eg-gf h2,
.eg-faq h2 {
  font-size: var(--fs-h2);
  line-height: 1.25;
  text-transform: none;
}

/* Dish names and descriptions are the text people actually read while
   choosing, often one-handed on a phone -- keep them comfortably large. */
.eg-dish h3 {
  font-size: var(--fs-h3);
  line-height: 1.35;
  margin: 0 0 var(--eg-s2);
  color: var(--eg-ink);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- [buttons] --------------------------------------------------- */
.eg-page-cta .btn,
.eg-empty .btn {
  background: var(--eg-green);
  border: 2px solid var(--eg-green);
  color: #fff;
  border-radius: 999px;
  /* 48px stays the minimum tap target; the button no longer shouts. */
  padding: 12px 24px;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .02em;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.eg-page-cta .btn:hover,
.eg-empty .btn:hover {
  background: var(--eg-green-dark);
  border-color: var(--eg-green-dark);
  color: #fff;
}

.eg-page-cta .btn-border {
  background: transparent;
  border-color: var(--eg-green);
  color: var(--eg-green-dark);
}

.eg-page-cta .btn-border:hover {
  background: var(--eg-green);
  color: #fff;
}

/* ---------- [focus] ----------------------------------------------------- */
/* The theme only restyles :focus to look like :hover -- there is no visible
   focus ring anywhere on the site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--eg-green);
  outline-offset: 2px;
  border-radius: var(--eg-radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- [hero] ------------------------------------------------------ */
/* Poster and video are stacked in .videobox (position:absolute, style.css:3095).
   The poster is the LCP element and is always present; the video fades in over
   it only once it can actually play, so a slow or blocked video never shows a
   black box or a frozen first frame. */
.eg-hero-poster,
.eg-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.eg-hero-video {
  opacity: 0;
  transition: opacity .8s ease;
  /* Chrome/Safari still paint controls for a moment on some platforms. */
  pointer-events: none;
}

.eg-hero-video.is-ready {
  opacity: 1;
}

.eg-hero-video::-webkit-media-controls,
.eg-hero-video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* The theme's .videobox is position:absolute, so this section only had height
   because the old overlay text sat inside it. With the text moved out, the
   hero needs its own height or it collapses to nothing. */
.eg-hero-media {
  position: relative;
  height: clamp(230px, 44vh, 430px);
  overflow: hidden;
}

.eg-hero-media .videobox {
  height: 100%;
}

/* --- the bar under the video ---
   Order button first, then one sentence. Kept shallow so the button lands high
   on a phone and the featured row starts right after it. */
.eg-herobar > .content {
  padding-top: var(--eg-s4) !important;
  padding-bottom: var(--eg-s4) !important;
}

.eg-herobar .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eg-s3);
  text-align: center;
}

/* Still the page <h1>; styled as body copy because that is what it reads as. */
.eg-herobar h1 {
  margin: 0;
  font-family: 'Libre Baskerville', serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eg-body);
  max-width: 60ch;
}

.eg-herobar-cta {
  display: flex;
  flex-shrink: 0;
  gap: var(--eg-s2);
}

/* Same pill as elsewhere, one size down -- 44px is still a comfortable tap. */
.eg-herobar-cta .btn {
  background: var(--eg-green);
  border: 2px solid var(--eg-green);
  color: #fff;
  border-radius: 999px;
  padding: 8px 26px;
  min-height: 44px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}

.eg-herobar-cta .btn:hover,
.eg-herobar-cta .btn:focus {
  background: var(--eg-green-dark);
  border-color: var(--eg-green-dark);
  color: #fff;
}

.eg-hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.12;
  margin: 0 0 var(--eg-s3);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

@media (min-width: 768px) {
}

/* ---------- [page-head] ------------------------------------------------- */
/* skin.css:508 puts 80px of padding on BOTH sides of every `.content` block.
   Stacking the page head above the menu therefore left ~160px of dead space
   between the CTAs and the search box. Collapse the facing edges only. */
.eg-page-head {
  text-align: center;
}

.eg-page-head > .content {
  padding-bottom: var(--eg-s4);
}

.eg-menu > .content,
.eg-featured > .content {
  padding-top: var(--eg-s4);
}

.eg-page-intro {
  max-width: 62ch;
  font-size: var(--fs-lead);
  margin: 0 auto var(--eg-s5);
}

.eg-page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eg-s3);
  justify-content: center;
  margin: 0;
}

/* ---------- [menu] ------------------------------------------------------
   Vertical scrolling moves through categories; each category is a horizontal
   row the customer swipes. Nothing auto-advances.
   .section-empty is overflow:hidden (style.css:5282), which silently disables
   position:sticky on every descendant -- scoped override below. */
.eg-menu,
.eg-featured {
  overflow: visible;
}

.eg-menu > .content,
.eg-featured > .content {
  padding-top: var(--eg-s4);
}

/* --- jump-to-category bar --- */
.eg-catnav {
  position: sticky;
  top: var(--eg-header-h);
  z-index: 20;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--eg-line);
  padding: var(--eg-s2) 0;
}

.eg-catnav ul {
  display: flex;
  gap: var(--eg-s2);
  list-style: none;
  margin: 0;
  padding: 0 15px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar hidden: the partially-visible next chip is the affordance here,
     and a track under the pills read as a stray line. The row of dishes below
     keeps its visible track -- that one has no such edge cue. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.eg-catnav ul::-webkit-scrollbar {
  display: none;
}

.eg-catnav li {
  flex: 0 0 auto;
}

.eg-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  /* 40px: comfortably above the 24px WCAG AA minimum for a pointer target,
     while letting more categories show at once. */
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  /* Brand green outline -- the chips are the menu's primary navigation, so
     they carry the brand colour rather than a neutral grey. */
  border: 1px solid var(--eg-green);
  background: #fff;
  color: var(--eg-green-dark);
  text-decoration: none;
}

.eg-chip:hover,
.eg-chip:focus {
  background: rgba(22, 135, 66, .08);
  border-color: var(--eg-green-dark);
  color: var(--eg-green-dark);
}

.eg-chip.is-active {
  background: var(--eg-green);
  border-color: var(--eg-green);
  color: #fff;
}

/* --- category --- */
.eg-cat {
  /* Anchor targets must clear the fixed header AND the sticky chip bar. */
  scroll-margin-top: calc(var(--eg-header-h) + 76px);
  padding: var(--eg-s6) 0 var(--eg-s5);
  border-bottom: 1px solid var(--eg-line);
}

.eg-cat:last-of-type {
  border-bottom: 0;
}

.eg-cat-head {
  padding-top: 0 !important;
  padding-bottom: var(--eg-s4) !important;
}

.eg-cat-head p {
  margin: var(--eg-s2) 0 0;
  font-size: var(--fs-body);
  color: var(--eg-muted);
}

/* --- the horizontal row --- */
.eg-row-wrap {
  position: relative;
}

.eg-row {
  display: flex;
  gap: var(--eg-s4);
  list-style: none;
  margin: 0;
  /* Cards line up with the container gutter and the last one can scroll fully
     into view. */
  padding: var(--eg-s1) 15px var(--eg-s4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* No scroll-snap on purpose: snapping fights a fast flick and refuses to
     stop mid-row, so reaching the middle or the far end of a long category
     takes several gestures. Free scrolling lets one flick go as far as the
     customer throws it. */
  scrollbar-color: var(--eg-green) var(--eg-line);
}

/* A visible track tells people there is more to the side -- important for
   anyone who does not already expect a swipeable row. */
.eg-row::-webkit-scrollbar {
  height: 10px;
}

.eg-row::-webkit-scrollbar-track {
  background: var(--eg-line);
  border-radius: 999px;
}

.eg-row::-webkit-scrollbar-thumb {
  background: var(--eg-green);
  border-radius: 999px;
}

.eg-row:focus-visible {
  outline: 3px solid var(--eg-green);
  outline-offset: 4px;
  border-radius: var(--eg-radius);
}

/* --- desktop arrows (a mouse cannot swipe) --- */
.eg-row-nav {
  position: absolute;
  top: 38%;
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--eg-line);
  background: #fff;
  color: var(--eg-ink);
  font-size: 30px;
  line-height: 1;
  padding: 0 0 5px;
  box-shadow: var(--eg-shadow-lg);
  cursor: pointer;
}

.eg-row-nav:hover {
  background: var(--eg-green);
  border-color: var(--eg-green);
  color: #fff;
}

.eg-row-prev {
  inset-inline-start: 4px;
}

.eg-row-next {
  inset-inline-end: 4px;
}

/* Touch devices swipe; the arrows would only cover a dish. */
@media (hover: none), (max-width: 767px) {
  .eg-row-nav {
    display: none;
  }
}

/* --- dish card --- */
.eg-dish {
  /* Just under a full phone width, so the next card peeks in and makes the
     row's swipeability obvious without any hint text. */
  flex: 0 0 clamp(230px, 70vw, 290px);
  display: flex;
  flex-direction: column;
  background: var(--eg-surface);
  border: 1px solid var(--eg-line);
  border-radius: var(--eg-radius);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}

.eg-dish:hover {
  box-shadow: var(--eg-shadow);
  transform: translateY(-2px);
}

.eg-dish-media {
  display: block;
  background: var(--eg-surface-2);
}

.eg-dish-media img {
  display: block;
  width: 100%;
  height: auto;
  /* width/height attributes are on the <img>, so the box is reserved before
     the image arrives -- this is what removes the layout shift. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.eg-dish-body {
  padding: var(--eg-s3) var(--eg-s4) var(--eg-s4);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.eg-dish-desc {
  /* One step below body: the card is a scan surface, and the dish name above
     it carries the hierarchy. 14px is the floor -- do not go under. */
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--eg-body);
  margin: 0 0 var(--eg-s3);
}

.eg-dish-note {
  font-size: var(--fs-meta);
  color: var(--eg-muted);
  font-style: italic;
  margin: 0 0 var(--eg-s2);
}

/* Replaces ~200 characters of duplicated inline style that used to sit on
   every price span of every dish. */
.eg-prices {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* prices sit on the trailing edge of the card */
  gap: 5px;
}

/* Tinted rather than filled. Solid green and solid charcoal pills read as
   buttons and shouted louder than the dish name they sit under; a soft wash
   with the colour carried by the text keeps them legible without competing.
   Contrast is still AA: #116a39 on the green tint is 5.9:1, #2e2e2e on the
   grey tint is ~12:1.
   Sized and padded so both pills fit one line inside a card on a ~360px
   phone -- wrapping made every card taller for no gain. */
.eg-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--fs-label);
  color: var(--eg-green-dark);
  background: rgba(22, 135, 66, .10);
  border: 1px solid rgba(22, 135, 66, .18);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.eg-price-alt {
  color: var(--eg-ink);
  background: rgba(46, 46, 46, .06);
  border-color: rgba(46, 46, 46, .14);
}

/* The qualifier, not the value -- so it is a step down in size and weight from
   the number it introduces. Sentence case, not caps: "Salon" is ~12% narrower
   than "SALON", which is most of what keeps both pills on one line on a 360px
   phone.

   Opacity is .9, not lower: at .72 the green label measured 3.35:1 against its
   own tint, i.e. below AA. .9 gives 4.77:1 (dine-in) and 8.98:1 (delivery),
   and the size/weight difference carries the hierarchy anyway. */
.eg-price-label {
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0;
  opacity: .9;
}

.eg-empty {
  text-align: center;
  padding: var(--eg-s7) var(--eg-s4);
  color: var(--eg-muted);
}

.eg-allergen {
  margin-top: var(--eg-s6);
  font-size: var(--fs-meta);
  color: var(--eg-muted);
  border-top: 1px solid var(--eg-line);
  padding-top: var(--eg-s4);
}

/* ---------- [featured] --------------------------------------------------
   The homepage teaser uses the same swipeable row as the menu, so the
   interaction only has to be learned once. It carries no prices -- it is a
   taste of the menu, not the menu. Its cards can be a little narrower since
   they hold two short lines rather than a description. */
.eg-featured {
  padding-top: var(--eg-s6);
}

/* Centred here, unlike the menu's category headings: this is a standalone
   section on the homepage rather than one of a stacked series. The !important
   undoes .eg-cat-head's own padding reset, which exists for the menu. */
.eg-featured .eg-cat-head {
  text-align: center;
  padding-top: 0 !important;
  padding-bottom: var(--eg-s5) !important;
}

.eg-featured .eg-cat-head h2 {
  margin: 0;
}

.eg-featured .eg-dish {
  flex-basis: clamp(200px, 58vw, 250px);
}

/* Long-form prose (the story and the founder biography) reads a step above
   ordinary body copy -- it is the only place on the site with real paragraphs. */
.eg-story p {
  font-size: var(--fs-lead);
  line-height: 1.7;
}

/* Category label above the dish name on the homepage cards. */
.eg-featured .eg-dish-cat {
  margin: 0 0 var(--eg-s2);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--eg-muted);
}

.eg-featured .eg-dish-body h3 a {
  color: var(--eg-ink);
}

.eg-featured .eg-dish-body h3 a:hover {
  color: var(--eg-green-dark);
}

.eg-featured .eg-page-cta {
  margin-top: var(--eg-s6);
}

/* skin.css:1609 sets the main navigation links to 13px, under the 14px floor.
   Matching its specificity (0,1,2) is enough; egeden.css loads last. */
header .nav > li > a {
  font-size: var(--fs-label);
}

/* Mobile logo size. Two theme rules decided this:
     style.css @max-992: .navbar-brand { height: auto !important; padding-left: 15px }
     skin.css  @max-992: .navbar-brand img { max-height: 30px }
   So the bar's height is content-driven -- 15px padding + 30px logo + 15px
   padding = 60px -- and the logo was capped at half the available space.
   Rebalancing to 6 + 48 + 6 keeps the bar at exactly 60px while making the
   mark 60% larger. Dropping the left padding also aligns it with the 15px
   container gutter the rest of the page uses.

   The cap must stay an explicit px value: `max-height: 100%` resolves against
   an auto-height parent and lets the logo render at its natural size, which
   pushes the bar to 180px. Breakpoint matches the theme's 992px exactly so
   there is no 1px gap where neither rule applies. Desktop is untouched. */
@media (max-width: 992px) {

  /* `header.scroll-css .navbar-brand` (0,2,1) is also listed: past 100px of
     scroll the theme swaps the padding to 10px/15px, which grew the bar from
     61px to 68px mid-scroll. Matching that specificity pins the bar to one
     height in both states. The 15px left padding is kept -- it is what lines
     the logo up with the container gutter every other block on the page uses;
     removing it pushed the logo 15px left of all other content. */
  .navbar-brand,
  header.scroll-css .navbar-brand {
    height: auto;
    padding: 6px 15px;
    margin-right: 10px;
  }

  .navbar-brand img,
  header.scroll-css .navbar-brand img {
    max-height: 48px;
  }
}

/* ---------- [notice] ----------------------------------------------------
   Slim single-location strip under the header. Deliberately quiet: it is
   reassurance, not a promotion, so it uses the brand green as a tint rather
   than a fill and never exceeds two lines on a phone. */
.eg-notice {
  background: rgba(22, 135, 66, .08);
  border-bottom: 1px solid rgba(22, 135, 66, .18);
  color: var(--eg-green-dark);
  font-family: 'Montserrat', sans-serif;
  /* One of the three deliberate exceptions to the 14px floor: a standing
     reassurance line rather than content needed to use the site.

     This was briefly a fluid 9-12px, back when the copy had to hold a single
     line on a 320px phone. Two lines are now allowed, so it is a flat 12px --
     more readable, and one less thing behaving differently per viewport. */
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.35;
  /* Kept on one line: the copy is short enough to fit a 360px phone at 14px,
     and a notice that wraps reads like a paragraph rather than a label. */
  padding: 9px 0;
  position: relative;
  z-index: 4;
}

.eg-notice .container {
  text-align: center;
  /* One line wherever it fits, wrapping only when the viewport is too narrow --
     so no max-width here: the container's own width is the only limit. When it
     does wrap, `balance` splits the lines evenly instead of orphaning a word;
     browsers without support just wrap normally. */
  text-wrap: balance;
}

/* Section title above the reviews widget, matching the featured row's. */
.eg-testimonials .eg-cat-head {
  text-align: center;
  padding: 0 0 var(--eg-s5) !important;
}

.eg-testimonials .eg-cat-head h2 {
  margin: 0;
}

/* ---------- [testimonials] ----------------------------------------------
   testimonials.html sets padding-top:0 inline (it used to sit directly under
   a button). With that button gone the quotes collided with the section above. */
.eg-testimonials > .content {
  padding-top: var(--eg-s7) !important;
}

.eg-testimonials .niche-box-testimonails-cloud p {
  font-size: var(--fs-body);
}

/* Both of these sit under the 14px floor in the theme:
     skin.css:2758  testimonial author name -> 13px
     style.css:1900 `.copy-row .copy-text`  -> 12px  (0,2,0, so a plain
                    `footer .copy-text` would lose; match its specificity) */
.eg-testimonials h5,
.eg-testimonials .subtxt,
.copy-row .copy-text,
.copy-row .copy-text a {
  font-size: var(--fs-label);
}

/* ---------- [form] ------------------------------------------------------ */
.eg-field {
  margin-bottom: var(--eg-s3);
}

.eg-field label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--eg-ink);
  margin-bottom: 6px;
}

.eg-form .form-control {
  font-size: 16px;             /* no iOS zoom-on-focus */
  min-height: 48px;
  border-radius: var(--eg-radius-sm);
  border: 1px solid var(--eg-line);
  background: var(--eg-surface-2);
  color: var(--eg-ink);
}

.eg-form .form-control:focus {
  border-color: var(--eg-green);
  background: #fff;
}

.eg-form button[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.eg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- [directions] ------------------------------------------------
   components/directions.html -- the label plus three map providers. It renders
   inside the .fa-ul contact list, under the address, on every page that
   includes contact-form.html. Nothing here sets an alignment: the row inherits
   whatever its parent block uses, so dropping the include into a centred block
   later needs no new rule.

   Sized to fit the narrowest phone without relying on wrap order. Measured at
   320px: the container gives ~260px (320 less the 30px grid gutter and the
   30px .fa-ul indent), and the three pills come to ~237px including gaps, so
   they hold one line. The label is what does not fit alongside them, so below
   480px it is forced onto its own line rather than being left to wrap
   wherever it lands. */
.eg-directions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* Sits directly under an address line, so it is spaced off it rather than
     floating between the two. */
  margin-top: var(--eg-s2);
}

@media (max-width: 479px) {

  /* Deterministic: label on its own line, the three pills together on the
     next. Left to natural wrapping the label keeps the first pill company and
     pushes the third one down alone, which reads as a mistake. */
  .eg-directions-label {
    flex: 0 0 100%;
  }
}

.eg-directions-label {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--eg-muted);
  /* The pills carry the brand colour; the label must not compete with them. */
  letter-spacing: .02em;
}

/* Same pill vocabulary as the menu's .eg-chip -- green outline, full radius --
   two steps smaller, because these are a secondary action sitting next to an
   address rather than the primary navigation of a page. The chip padding made
   them read as buttons competing with the contact details around them.

   The TEXT stays at --fs-label: 14px is the floor for anything a customer
   reads, and a brand name is read. What shrinks is the box around it -- 32px
   tall on 14px text instead of 36px, which is still above the 24px WCAG 2.2
   target-size minimum. The 6px gap remains wide enough not to mis-tap. */
.eg-dir {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--eg-green);
  background: #fff;
  color: var(--eg-green-dark);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}

.eg-dir:hover,
.eg-dir:focus {
  background: rgba(22, 135, 66, .08);
  border-color: var(--eg-green-dark);
  color: var(--eg-green-dark);
  text-decoration: none;
}

/* ---------- [directions sheet] ------------------------------------------
   The provider chooser behind the sticky bar's Directions item, in
   components/action-bar.html and driven by egeden.js:bindDirectionsSheet().

   Visibility is `visibility`, not `display` or the `hidden` attribute, and it
   is NOT transitioned. A transitioned/delayed visibility (the usual trick for
   fading a dialog out) breaks twice here: the global prefers-reduced-motion
   block above zeroes transition-DURATION but not transition-DELAY, so a
   delayed hide would leave an invisible sheet swallowing taps; and opacity
   alone would keep the closed panel's links in the tab order and the
   accessibility tree. So: fade in, close instantly. */
.eg-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Above the language switcher, which style.css:7426 fixes at 9999. Anything
     lower leaves it floating over the backdrop like a rendering fault. */
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease;
}

.eg-sheet.is-open {
  visibility: visible;
  opacity: 1;
}

.eg-sheet-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .45);
}

.eg-sheet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--eg-s4);
  background: #fff;
  border-radius: var(--eg-radius) var(--eg-radius) 0 0;
  box-shadow: var(--eg-shadow-lg);
  transform: translateY(100%);
  transition: transform .22s ease;
}

/* Separate declaration, not folded into the padding shorthand: if env() is
   unsupported the whole shorthand would be dropped and the panel would lose
   all its padding, not just the safe-area part. */
.eg-sheet-panel {
  padding-bottom: calc(var(--eg-s4) + env(safe-area-inset-bottom, 0px));
}

.eg-sheet.is-open .eg-sheet-panel {
  transform: translateY(0);
}

.eg-sheet-title {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--eg-ink);
  margin: 0 0 var(--eg-s3);
}

/* Full-width rows at 52px: this is the one control on the site that is only
   ever used one-handed, mid-journey, so the targets are generous. */
.eg-sheet-link,
.eg-sheet-cancel {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 12px var(--eg-s4);
  margin-bottom: var(--eg-s2);
  border-radius: var(--eg-radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-lead);
  font-weight: 600;
  text-decoration: none;
}

.eg-sheet-link {
  border: 1px solid var(--eg-green);
  background: #fff;
  color: var(--eg-green-dark);
}

.eg-sheet-link:hover,
.eg-sheet-link:focus {
  background: rgba(22, 135, 66, .08);
  border-color: var(--eg-green-dark);
  color: var(--eg-green-dark);
  text-decoration: none;
}

.eg-sheet-cancel {
  justify-content: center;
  margin-bottom: 0;
  border: 0;
  background: var(--eg-surface-2);
  color: var(--eg-ink);
}

/* The page must not scroll behind an open sheet. */
body.eg-sheet-open {
  overflow: hidden;
}

/* ---------- [action-bar] ------------------------------------------------ */
.eg-action-bar {
  display: none;
}

@media (max-width: 991px) {
  .eg-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below magnific-popup (.mfp-bg 1142 / .mfp-wrap 1143) so it can never
       cover an open lightbox. */
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-top: 1px solid var(--eg-line);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .10);
  }

  .eg-action-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--eg-bar-h);
    padding: 8px 4px;
    font-family: 'Montserrat', sans-serif;
    /* Below the 14px floor, like the notice: each label sits under an icon
       that already carries the meaning, so the word is a confirmation rather
       than the thing being read. Smaller labels also stop the four items
       crowding each other on a 320px phone. */
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--eg-ink);
    text-decoration: none;
  }

  .eg-action-bar a:active {
    background: var(--eg-surface-2);
  }

  .eg-action-bar svg {
    width: 26px;
    height: 26px;
    fill: var(--eg-green);
  }

  /* Nothing fixed to the bottom of the viewport may sit under the bar. */
  body {
    padding-bottom: var(--eg-bar-h);
  }

  /* [overlays] The language switcher is fixed bottom-left at z-index 9999
     (style.css:7426) and .scroll-top-mobile bottom-right (style.css:70);
     both would otherwise sit on top of the action bar. */
  .language-switcher-container,
  .scroll-top-mobile {
    bottom: calc(var(--eg-bar-h) + 12px) !important;
  }

  /* The WATI bubble duplicates the action bar's WhatsApp button on mobile and
     competes for the same corner. Its container id is set by the vendor script. */
  #whatsapp-chat-widget {
    display: none !important;
  }
}

/* The language switcher is position:fixed at every width, so it always floats
   over page content. Give it a surface so it reads as a deliberate control
   rather than a rendering fault. (Offsetting it above the action bar is
   mobile-only, above.) */
.language-switcher-container {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--eg-line);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--eg-shadow);
  display: flex;
  gap: 2px;
}

.language-switcher-container .btn {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: var(--fs-label);
  line-height: 1.2;
  min-height: 0;
}

/* The current language. Without this the control offers three identical
   buttons and never says which one you are on. !important matches
   skin.css:54, which forces every .btn:not(.btn-border) to grey #484848. */
.language-switcher-container .btn.is-active {
  background: var(--eg-green) !important;
  color: #fff !important;
}

/* ---------- [menu responsive] -------------------------------------------
   Deliberately short. The type scale in [tokens] is already fluid, so sizes
   do not need restating per breakpoint -- only layout does. */
@media (max-width: 767px) {
  .eg-cat {
    padding: var(--eg-s5) 0 var(--eg-s4);
  }

  .eg-cat-head {
    padding-bottom: var(--eg-s3) !important;
  }

  .eg-dish-body {
    padding: var(--eg-s3) var(--eg-s4);
  }
}

/* ---------- [gluten-free] ------------------------------------------------
   The /glutensiz landing page. No new colours, sizes or radii -- every value
   here is a token already used elsewhere, so the page reads as part of the
   site rather than as a campaign microsite bolted onto it. */
/* skin.css:508 gives every .container.content 80px top AND bottom. This page
   has two of them plus the FAQ's, so left alone they would stack up to 160px of
   dead space between sections. Collapsed here so the sections below own their
   own rhythm through the spacing tokens. */
.eg-gf > .content {
  padding-top: var(--eg-s6) !important;
  padding-bottom: 0 !important;
}

.eg-gf > .content:first-child {
  padding-top: var(--eg-s7) !important;
}

.eg-gf h1 {
  text-align: center;
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: var(--eg-s6);
}

.eg-gf h2 {
  margin: 0 0 var(--eg-s4);
}

/* --- the protocol block ---
   Same tint as .eg-notice. It reads as a statement the restaurant is standing
   behind rather than as body copy, which is the whole point of the page. */
.eg-gf-protocol {
  background: rgba(22, 135, 66, .07);
  border: 1px solid rgba(22, 135, 66, .18);
  border-radius: var(--eg-radius);
  padding: var(--eg-s5);
  margin-bottom: var(--eg-s6);
}

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

.eg-gf-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--eg-s3);
  padding: var(--eg-s2) 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--eg-ink);
}

.eg-gf-list svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: var(--eg-green);
}

/* The "tell us you have coeliac disease" line -- the single action the whole
   protocol depends on, so it is set apart rather than buried in the list. */
.eg-gf-note {
  margin: var(--eg-s4) 0 0;
  padding-top: var(--eg-s4);
  border-top: 1px solid rgba(22, 135, 66, .18);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--eg-green-dark);
}

/* --- the dishes ---
   A grid, not the .eg-row swipe used on /menu and the homepage. There, a
   category is one of sixteen and a sideways row keeps the page navigable; here
   the gluten-free dishes are the whole point, so all of them are on screen by
   scrolling. auto-fill rather than auto-fit so a short list (7 dishes on /en
   and /ar today) keeps card-sized columns instead of stretching two cards
   across the full desktop width. */
.eg-gf-grid {
  list-style: none;
  margin: var(--eg-s5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--eg-s4);
}

/* .eg-dish sets `flex: 0 0 clamp(230px, 70vw, 290px)` for the swipe row. On a
   grid item the flex shorthand is ignored outright, so the track sizing above
   wins and the card needs no other change -- but say so, because a future
   reader will reasonably expect a conflict here. */

/* --- the dish section --- */
.eg-gf-dishes h2 {
  margin-bottom: var(--eg-s2);
}

.eg-gf-dishes-note {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--eg-muted);
}

.eg-gf-menu-link {
  margin: var(--eg-s5) 0 0;
  text-align: center;
  font-size: var(--fs-body);
}

.eg-gf-menu-link a {
  color: var(--eg-green-dark);
  font-weight: 600;
}

/* --- how to order ---
   Its own .container.content, so the --eg-s6 collapse above already supplies
   the gap before the rule; only the space under it is set here. */
.eg-gf-cta {
  text-align: center;
  padding-top: var(--eg-s6);
  border-top: 1px solid var(--eg-line);
}

.eg-gf-cta p {
  font-size: var(--fs-lead);
}

.eg-gf-cta .eg-page-cta {
  margin: var(--eg-s5) 0 var(--eg-s4);
}

.eg-gf-address {
  font-size: var(--fs-meta) !important;
  color: var(--eg-muted);
  margin: 0;
}

.eg-gf-cta .eg-directions {
  justify-content: center;
}

/* ---------- [faq] --------------------------------------------------------
   <details>/<summary>, no JavaScript. The marker is drawn in CSS because the
   native one cannot be styled consistently and sits on the wrong side in RTL;
   `list-style: none` plus the webkit pseudo-element removes both defaults. */
/* Same 80px collapse as .eg-gf above. The FAQ is the last block on the page,
   so it keeps a real bottom padding to clear the mobile action bar. */
.eg-faq > .content {
  padding-top: var(--eg-s6) !important;
  padding-bottom: var(--eg-s7) !important;
}

.eg-faq h2 {
  text-align: center;
  margin-bottom: var(--eg-s5);
}

.eg-faq-list {
  max-width: 76ch;
  margin: 0 auto;
  border-top: 1px solid var(--eg-line);
}

.eg-faq-item {
  border-bottom: 1px solid var(--eg-line);
}

.eg-faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--eg-s4);
  padding: var(--eg-s4) 0;
  cursor: pointer;
  list-style: none;
  font-family: Montserrat, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  color: var(--eg-ink);
  text-align: start;
}

.eg-faq-item summary::-webkit-details-marker {
  display: none;
}

.eg-faq-item summary:hover {
  color: var(--eg-green-dark);
}

.eg-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--eg-green);
  transition: transform .18s ease;
}

.eg-faq-item[open] summary::after {
  content: "\2212";   /* proper minus, not a hyphen */
}

.eg-faq-item p {
  margin: 0;
  padding: 0 0 var(--eg-s4);
  font-size: var(--fs-body);
  color: var(--eg-body);
}

.eg-faq .eg-allergen {
  max-width: 76ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- the homepage band ---
   A signpost to /glutensiz, not a second copy of it. Same tint and radius as
   .eg-gf-protocol so the two read as the same promise, but centred and roughly
   a third of the height. */
.eg-gf-home > .content {
  padding-top: 0 !important;
  padding-bottom: var(--eg-s6) !important;
}

.eg-gf-home-card {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--eg-s5);
  text-align: center;
  background: rgba(22, 135, 66, .07);
  border: 1px solid rgba(22, 135, 66, .18);
  border-radius: var(--eg-radius);
}

.eg-gf-home-card h2 {
  margin: 0 0 var(--eg-s3);
  color: var(--eg-ink);
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;   /* skin.css:892 uppercases every .title-base h2 */
}

.eg-gf-home-card p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* Inline row on desktop, stacked on a phone -- three short phrases side by
   side are scannable; three wrapped ones are just a paragraph with bullets. */
.eg-gf-home-points {
  list-style: none;
  margin: var(--eg-s4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--eg-s2) var(--eg-s5);
}

.eg-gf-home-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--eg-s1);
  font-family: Montserrat, sans-serif;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--eg-green-dark);
}

.eg-gf-home-points svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: var(--eg-green);
}

.eg-gf-home-card .eg-page-cta {
  margin: var(--eg-s5) 0 0;
}

@media (max-width: 767px) {
  .eg-gf-protocol {
    padding: var(--eg-s4);
  }

  .eg-gf h1 {
    margin-bottom: var(--eg-s5);
  }

  .eg-gf-home-card {
    padding: var(--eg-s4);
  }
}

/* ---------- [rtl] -------------------------------------------------------
   base.html sets dir="rtl" for the `ar` locale; static/css/rtl.css is
   deliberately NOT linked (see CLAUDE.md). Deliberately minimal: flexbox
   already lays out in the inline direction, so `flex-direction: row-reverse`
   here would DOUBLE-reverse and push the primary CTA and the dine-in price
   badge to the wrong side. Logical properties (margin-inline-start,
   text-align: start) handle the rest. */
[dir="rtl"] .eg-dish-note {
  font-style: normal;   /* Arabic has no italic form; faux-italic just skews it */
}