/* Heritage edition — drawn from the supplied printed menu: parchment, emerald,
   restrained brass, fine frames, serif titles and complete food photography. */
:root {
  --green: #073b2d;
  --deep: #03291f;
  --cream: #f3e9d5;
  --paper: #fffcf3;
  --ink: #153d30;
  --muted: #657064;
  --line: #d8cbb0;
  --lime: #ddc28c;
  --gold: #a78348;
  --gold-light: #dec28a;
}

body {
  background:
    radial-gradient(circle at 12% 6%, #fff9e8 0, transparent 28%),
    linear-gradient(180deg, #f7eedc 0, var(--cream) 52%, #efe3cb 100%);
  color: var(--ink);
}

.site-header {
  background: var(--deep);
  color: #fff9eb;
  border-bottom: 1px solid #b993545c;
  box-shadow: 0 9px 30px #0122191c;
}
.header-inner { max-width: 1540px; padding: 11px 5%; }
.brand-logo-frame { width: 145px; }
.header-nav { gap: 34px; font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .35px; }
.header-nav a:first-child { border-color: var(--gold-light); }
.header-nav .text-button { color: #f8eedc; }
.language-button { color: #f8eedc; }
.cart-button {
  background: var(--cream);
  color: var(--deep);
  border: 1px solid var(--gold-light);
  box-shadow: 0 5px 18px #001a1329;
}
.cart-count { background: var(--green); color: #fff8e9; }

.hero {
  max-width: none;
  min-height: 690px;
  grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
  gap: clamp(36px, 5vw, 86px);
  padding: clamp(68px, 6vw, 96px) 7% 104px;
  background:
    url("brand/palm-frond.svg") no-repeat -80px 15% / 390px auto,
    linear-gradient(115deg, #f9f0dd 0%, #f2e5cb 60%, #ead9b8 100%);
  color: var(--ink);
  border-bottom: 1px solid #a7834847;
}
.hero::before {
  inset: 18px 2.4% 25px;
  z-index: 0;
  background: url("brand/heritage-frame.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  inset-inline-end: -215px;
  bottom: -260px;
  border: 1px solid #a7834824;
  transform: rotate(45deg);
}
.hero-copy { align-self: center; padding: 12px 0 34px; }
.hero-copy > .eyebrow {
  color: #80602d;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 3.1px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--gold);
  box-shadow: none;
  transform: rotate(45deg);
}
.hero h1 {
  max-width: 650px;
  margin: 22px 0 25px;
  color: var(--green);
  font-family: var(--serif);
  font-size: clamp(76px, 7.4vw, 122px);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -3px;
}
.hero h1 em {
  color: var(--green);
  font-family: var(--serif);
  font-size: .9em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
}
.hero-description {
  max-width: 470px;
  color: #405b4b;
  font-size: 13px;
  line-height: 2;
}
.hero-action-row { margin-top: 30px; }
.hero-cta {
  background: var(--green);
  color: #fff9eb;
  border: 1px solid var(--green);
  border-radius: 3px;
  box-shadow: 0 8px 24px #073b2d24;
}
.hero-cta:hover { background: #0d4b39; color: #fff9eb; }
.hero-menu-button { color: var(--green); font-family: var(--serif); font-size: 12px; }
.menu-book-icon { color: var(--gold); }
.hero-footnote { color: #6b715e; font-family: var(--serif); font-size: 11px; letter-spacing: .5px; }
.hero-footnote > span:first-child { color: var(--gold); }
.hero-visual {
  height: 515px;
  margin: 0;
  padding: 24px;
  background: transparent;
  isolation: isolate;
}
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 5% 18px;
  border: 1px solid var(--gold);
  border-radius: 48% 48% 8px 8px;
  background: linear-gradient(155deg, #0b4a38, var(--deep));
  box-shadow: 0 28px 54px #604a2424;
}
.hero-image {
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 9px;
  border: 1px solid #dec28a99;
  border-radius: 46% 46% 5px 5px;
  background: #123e31;
  object-fit: contain;
  transform: none;
  filter: none;
  box-shadow: none;
}
.hero-visual:hover .hero-image { transform: translateY(-3px); }
.hero-orbit {
  z-index: 2;
  inset: 11px 3% 5px;
  width: auto;
  aspect-ratio: auto;
  border: 1px solid #dec28a5c;
  border-radius: 48% 48% 7px 7px;
  transform: none;
  pointer-events: none;
}
.hero-orbit::after { display: none; }
.hero-stamp { display: none; }
.hero-image-caption {
  inset-inline-start: 3px;
  bottom: 35px;
  border: 1px solid #dec28a87;
  border-radius: 0;
  background: var(--cream);
  color: var(--green);
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 1.8px;
  transform: none;
}
.caption-dot { width: 7px; height: 7px; border-radius: 0; background: var(--gold); transform: rotate(45deg); }
.hero-photo-index { color: #755b32; font-family: var(--serif); letter-spacing: 2.2px; }
.hero-scroll { color: #76694f; border-color: #a7834845; font-family: var(--serif); font-size: 9px; }
.hero-scroll > span:last-child { color: var(--gold); }
.hero-background-word {
  bottom: -20px;
  color: transparent;
  font-family: var(--serif);
  font-size: clamp(88px, 12vw, 185px);
  font-weight: 600;
  letter-spacing: .03em;
  -webkit-text-stroke: 1px #80602d13;
}

.brand-strip {
  padding: 15px 4%;
  background: var(--deep);
  color: #f6ead4;
  border-block: 1px solid #a783486b;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 2.7px;
}
.brand-strip b { color: var(--gold-light); font-size: 0; }
.brand-strip b::before { content: "◆"; font-size: 8px; }
.brand-strip > span:nth-of-type(even) { color: var(--gold-light); }

.signature-section { padding: 72px 5% 52px; }
.signature-heading { margin-bottom: 29px; }
.signature-heading .eyebrow,
.menu-heading .eyebrow,
.gather-banner .eyebrow { color: #80602d; font-family: var(--serif); letter-spacing: 2.4px; }
.signature-heading h2,
.menu-heading h2,
.gather-banner h2 {
  color: var(--green);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.5px;
}
.signature-heading h2 { font-size: 45px; }
.round-link { border-color: var(--gold); color: var(--green); }
.signature-rail { gap: 25px; }
.signature-card {
  min-height: 330px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: var(--deep);
  box-shadow: 0 18px 40px #273f2a17;
}
.signature-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 9px;
  border: 1px solid #dec28a66;
  pointer-events: none;
}
.signature-card::before { background: linear-gradient(0deg, #021f18f2, #02261f2e 76%); }
.signature-card-copy { min-height: 330px; padding: 33px; }
.signature-card-copy > small { color: var(--gold-light); font-family: var(--serif); letter-spacing: 2px; }
.signature-card-copy > strong { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.signature-card-arrow { background: var(--cream); color: var(--green); border: 1px solid var(--gold); }

.menu-section { max-width: 1540px; padding-top: 48px; }
.menu-heading { padding-top: 32px; border-color: #a7834869; }
.menu-heading h2 { font-size: 50px; }
.branch-picker {
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: #f8eedb;
  box-shadow: inset 0 0 0 4px #f8eedb, inset 0 0 0 5px #a7834838;
}
.branch-picker small { color: #80602d; letter-spacing: 1.7px; }
.preview-notice { border: 1px solid #b5925269; background: #efe2c8; color: #5e533d; }
.menu-toolbar {
  top: 90px;
  border-color: #a7834847;
  background: #f3e9d5f2;
  backdrop-filter: blur(16px);
}
.category-chip {
  border: 1px solid #baa478;
  border-radius: 2px;
  background: transparent;
  color: #526657;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .2px;
}
.category-chip:hover { background: #eee1c7; }
.category-chip.active,
.category-chip.active:hover { border-color: var(--green); background: var(--green); color: #fff9e9; }
.search-box { border-color: #baa478; border-radius: 2px; background: #faf2e2; }
.search-box kbd { border-color: #bba87f; color: #806c49; }
.category-title { color: var(--green); font-family: var(--serif); font-size: 23px; font-weight: 600; }
.vat-note,.result-count { color: #756a55; }
.menu-grid { gap: 28px 24px; }
.food-card {
  overflow: hidden;
  border: 1px solid #cdbb96;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 0 13px 32px #593f1710;
}
.food-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #a783482e;
  pointer-events: none;
}
.food-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px #593f171a; }
.food-photo-button {
  margin: 8px 8px 0;
  width: calc(100% - 16px);
  border: 0;
  border-bottom: 1px solid #cdbb96;
  border-radius: 0;
  background: #eee2ca;
}
.food-photo { background: #eee2ca; object-fit: contain; }
.food-card-badge {
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--cream);
  color: var(--green);
  font-family: var(--serif);
  font-size: 8px;
  letter-spacing: 1.5px;
}
.food-card-body { padding: 21px 21px 20px; }
.food-card h3 { color: var(--green); font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: 0; }
.food-card .food-arabic { color: #526558; font-size: 11px; }
.food-description { color: #727465; font-size: 10px; }
.food-card-bottom { margin-top: 17px; padding-top: 15px; border-top: 1px solid #a7834838; }
.food-price { color: var(--green); font-family: var(--serif); font-size: 23px; letter-spacing: 0; }
.add-button {
  min-width: 94px;
  border-color: var(--green);
  border-radius: 2px;
  background: var(--green);
  color: #fff9eb;
  font-family: var(--serif);
  font-size: 12px;
}
.add-button:hover { border-color: #0d503d; background: #0d503d; color: #fff9eb; }
.food-card.is-text-only {
  min-height: 210px;
  padding: 27px;
  border-color: #cdbb96;
  border-radius: 2px;
  background: #f9f0df;
}
.food-card.is-text-only::before { content: "◆"; color: var(--gold); font-size: 10px; }
.is-text-only .food-card-body { padding: 0; }
.no-photo { background: #eee2ca; color: #877657; }
.menu-bottom { border-bottom: 1px solid #a7834852; }
.menu-bottom > span { color: var(--gold); font-size: 0; }
.menu-bottom > span::before { content: "◆"; font-size: 12px; }
.menu-bottom p { color: var(--green); font-family: var(--serif); font-size: 18px; font-weight: 600; }

.gather-banner {
  max-width: 1390px;
  padding: 55px 52px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background:
    linear-gradient(90deg, #03291ff2, #073b2de8),
    url("brand/heritage-lattice.svg") center / 240px 240px;
  box-shadow: inset 0 0 0 9px var(--deep), inset 0 0 0 10px #dec28a54;
}
.gather-art { color: var(--gold-light); font-family: var(--serif); font-size: 58px; font-weight: 600; letter-spacing: .02em; }
.gather-banner h2 { color: #fff8e9; font-size: 37px; }
.gather-banner p { color: #d8ccb5; }
.gather-banner .eyebrow { color: var(--gold-light); }
.cream-button { border: 1px solid var(--gold-light); border-radius: 2px; background: var(--cream); color: var(--green); }

footer {
  margin-top: 62px;
  padding-block: 30px;
  border-top: 1px solid #a7834861;
  background: var(--deep);
  color: #d8ccb5;
}
footer .text-link { color: var(--gold-light); }

dialog:not(.welcome-dialog):not(.st-menu-viewer) { border: 1px solid var(--gold); border-radius: 2px; background: var(--cream); }
dialog:not(.welcome-dialog):not(.st-menu-viewer)::backdrop { background: #011c16d6; }
.dialog-heading h2,.detail-body h2 { color: var(--green); font-family: var(--serif); font-weight: 600; }
.icon-button { border: 1px solid #baa478; background: #f7ecd8; }
.branch-option,.variant-option { border-color: #cdbb96; border-radius: 2px; background: var(--paper); }
.branch-option.selected,.variant-option:has(input:checked) { border-color: var(--green); background: #e9e1ca; }
.primary-button:not(.hero-cta),.checkout-button,.whatsapp-ready { border-radius: 2px; }
.checkout-button { background: var(--green); color: #fff9eb; }
.mobile-bag { border: 1px solid var(--gold-light); border-radius: 2px; background: var(--deep); box-shadow: 0 10px 30px #001d1670; }
.mobile-bag-count { background: var(--cream); color: var(--green); }
.toast { border: 1px solid var(--gold); border-radius: 2px; }

html[dir="rtl"] .hero h1 {
  max-width: 600px;
  margin-block: 15px 18px;
  font-family: 'Noto Sans Arabic', sans-serif;
  font-size: clamp(51px, 5.1vw, 79px);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -1.5px;
}
html[dir="rtl"] .hero h1 em { font-family: 'Noto Sans Arabic', sans-serif; font-size: .94em; font-weight: 700; letter-spacing: -1px; }
html[dir="rtl"] .signature-heading h2,
html[dir="rtl"] .menu-heading h2,
html[dir="rtl"] .gather-banner h2,
html[dir="rtl"] .food-card h3 { font-family: 'Noto Sans Arabic', sans-serif; }
html[dir="rtl"] .signature-heading h2 { font-size: 34px; }
html[dir="rtl"] .menu-heading h2 { font-size: 38px; }
html[dir="rtl"] .hero-image { transform: none; }

@media (min-width: 1600px) {
  .gather-banner { margin-inline: auto; }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: .92fr 1.08fr; gap: 30px; padding-inline: 5%; }
  .hero h1 { font-size: 79px; }
  .hero-visual { height: 450px; }
  .header-nav { gap: 18px; }
  .signature-card-copy > strong { font-size: 27px; }
  .menu-heading h2 { font-size: 43px; }
}

@media (max-width: 760px) {
  .header-inner { padding-block: 8px; }
  .brand-logo-frame { width: 112px; }
  .cart-button { border-radius: 2px; }
  .hero {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 50px 7% 74px;
    background-position: -145px 10%, center;
    background-size: 330px auto, auto;
  }
  .hero::before { inset: 9px 2.5% 14px; background-size: auto 100%; }
  .hero-copy { padding: 5px 9px 15px; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: 2.1px; }
  .hero h1 { margin: 20px 0 18px; font-size: clamp(63px, 19vw, 88px); line-height: .9; letter-spacing: -2px; }
  .hero h1 em { font-size: .82em; letter-spacing: .03em; }
  .hero-description { max-width: 335px; color: #405b4b; }
  .hero-action-row { margin-top: 23px; }
  .hero-cta { min-height: 48px; border-radius: 2px; }
  .hero-menu-button { min-height: 48px; }
  .hero-visual { height: 380px; margin-top: 20px; padding: 22px 15px; }
  .hero-visual::before { inset-inline: 0; }
  .hero-image { width: 100%; height: 100%; border-radius: 44% 44% 3px 3px; }
  .hero-orbit { inset-inline: 2px; }
  .hero-image-caption { inset-inline-start: 0; bottom: 30px; }
  .hero-background-word { bottom: 28px; font-size: 62px; }
  .hero-scroll { bottom: 21px; }
  .brand-strip { font-size: 9px; gap: 22px; }
  .signature-section { padding-top: 46px; }
  .signature-heading h2 { font-size: 32px; }
  .signature-card { min-height: 275px; }
  .signature-card-copy { min-height: 275px; padding: 27px; }
  .signature-card-copy > strong { font-size: 27px; }
  .menu-section { padding-top: 26px; }
  .menu-heading { padding-top: 27px; }
  .menu-heading h2 { font-size: 38px; }
  .branch-picker { background: #f8eedb; }
  .menu-toolbar { top: 76px; }
  .category-chip { font-size: 11px; }
  .menu-grid { gap: 24px; }
  .food-card { border-radius: 2px; }
  .food-card-body { padding: 19px 19px 18px; }
  .food-card h3 { font-size: 23px; }
  .food-photo-button { aspect-ratio: 1.18; }
  .gather-banner { padding: 42px 31px; }
  .gather-art { position: static; margin-bottom: 22px; font-size: 44px; opacity: 1; transform: none; }
  .gather-banner h2 { font-size: 35px; }
  .cream-button { border-radius: 2px; }
  html[dir="rtl"] .hero h1 { font-size: clamp(44px, 12.5vw, 60px); line-height: 1.55; }
  html[dir="rtl"] .signature-heading h2 { font-size: 28px; }
  html[dir="rtl"] .menu-heading h2 { font-size: 31px; }
}

@media (max-width: 370px) {
  .hero { padding-inline: 6%; }
  .hero h1 { font-size: 59px; }
  .hero-action-row { gap: 12px; }
  .hero-cta { padding-inline: 16px; gap: 17px; }
  .hero-menu-button { font-size: 9px; }
  .hero-visual { height: 330px; }
  .food-card h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: no-preference) {
  .food-card,.hero-image { transition: transform .35s ease, box-shadow .35s ease; }
}