:root {
  --green:#174b3e;
  --deep:#0a2922;
  --gold:#d9ad5d;
  --gold-soft:#f6ead2;
  --paper:#f7f3ec;
  --ink:#1a2521;
  --muted:#69736f;
  --line:#e7dfd3;
  --white:#fff;
  --shadow:0 14px 34px rgba(21,55,44,.12);
  --shadow-lg:0 22px 50px rgba(10,41,34,.18);
  --radius:18px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  padding-bottom:72px;
  background:var(--paper);
  color:var(--ink);
  font-family:Alexandria,Tahoma,sans-serif
}
a {
  color:inherit
}
button,input,textarea { font:inherit }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid rgba(217,173,93,.75);
  outline-offset:3px
}
.container {
  width:min(100% - 32px,1160px);
  margin-inline:auto
}
.skip-link {
  position:absolute;
  top:-100px;
  right:1rem;
  z-index:20;
  padding:.7rem 1rem;
  background:var(--gold);
  color:var(--deep);
  border-radius:0 0 .8rem .8rem
}
.skip-link:focus {
  top:0
}
.hero {
  min-height:492px;
  position:relative;
  overflow:hidden;
  color:var(--white);
  background:radial-gradient(circle at 16% 74%,rgba(217,173,93,.27),transparent 20%),radial-gradient(circle at 96% 6%,rgba(255,255,255,.09),transparent 22%),linear-gradient(145deg,var(--deep),var(--green))
}
.hero:after {
  content:"";
  position:absolute;
  inset:auto -25% -190px auto;
  width:410px;
  height:410px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%
}
.nav {
  height:78px;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand,.footer-brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none
}
.brand-mark {
  width:46px;
  height:46px;
  display:block;
  overflow:hidden;
  border-radius:50%;
  background:var(--deep)
}
.brand-mark img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.31)
}
.brand span,.footer-brand span {
  display:grid;
  gap:2px
}
.brand b {
  color:var(--gold);
  font-size:1rem
}
.brand small,.footer-brand small {
  font-size:.58rem;
  color:rgba(255,255,255,.7)
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:7px;
  direction:ltr
}
.icon-link {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  text-decoration:none;
  transition:transform .2s ease,background .2s ease
}
.icon-link:hover { transform:translateY(-2px); background:rgba(255,255,255,.22) }
.icon-link svg { width:19px; height:19px }
.instagram-link svg { fill:none; stroke:currentColor; stroke-width:1.8 }
.facebook-link svg,.whatsapp-link svg { fill:currentColor }
.whatsapp-link { color:#fff }
.whatsapp-link:hover { background:#25d366; color:#073d25 }
.call-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  width:38px;
  height:38px;
  overflow:hidden;
  border-radius:50%;
  background:var(--gold);
  color:var(--deep);
  text-decoration:none;
  transition:transform .2s ease,background .2s ease
}
.call-link:hover { transform:translateY(-2px) }
.call-link svg { width:18px; height:18px; fill:currentColor; flex:0 0 auto }
.contact-label { display:none; white-space:nowrap }
.hero-content {
  position:relative;
  z-index:1;
  min-height:414px;
  display:flex;
  align-items:flex-start;
  padding-top:54px
}
.hero-copy {
  position:relative;
  z-index:1;
  max-width:330px
}
.kicker {
  margin:0 0 .65rem;
  color:var(--gold);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.13em
}
.hero h1 {
  margin:0;
  font-size:clamp(2.15rem,10vw,3.45rem);
  line-height:1.23;
  letter-spacing:-.055em
}
.hero-copy>p:not(.kicker) {
  margin:1rem 0 0;
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  line-height:1.95
}
.hero-actions {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:.55rem;
  margin-top:1.55rem
}
.button {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.45rem;
  min-height:48px;
  border-radius:12px;
  padding:.7rem;
  text-decoration:none;
  font-size:.71rem;
  font-weight:800
}
.button-gold {
  background:var(--gold);
  color:var(--deep);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease
}
.button-ghost {
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  transition:transform .2s ease,background .2s ease,border-color .2s ease
}
.button:hover { transform:translateY(-2px) }
.button-ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7) }
.hero-art {
  position:absolute;
  left:-68px;
  bottom:10px;
  width:205px;
  height:205px;
  opacity:.46;
  transform:rotate(8deg)
}
.hero-art:before {
  content:"";
  position:absolute;
  inset:-12px;
  border:1px solid rgba(217,173,93,.75);
  border-radius:46% 54% 52% 48%
}
.hero-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  border:7px solid rgba(255,255,255,.12);
  border-radius:48% 52% 43% 57%;
  box-shadow:var(--shadow-lg)
}
.spark {
  position:absolute;
  width:9px;
  height:9px;
  background:var(--gold);
  transform:rotate(45deg)
}
.spark-one {
  top:-4px;
  right:10%
}
.spark-two {
  bottom:7%;
  left:-10px;
  width:6px;
  height:6px
}
.intro {
  position:relative;
  z-index:2;
  display:flex;
  overflow:auto;
  margin-top:-17px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 11px 25px rgba(23,75,62,.09);
  scrollbar-width:none
}
.intro::-webkit-scrollbar {
  display:none
}
.intro div {
  min-width:155px;
  padding:1rem 1.1rem;
  display:grid;
  gap:.3rem;
  border-left:1px solid var(--line)
}
.intro div:last-child {
  border:0
}
.intro strong {
  color:var(--green);
  font-size:.71rem
}
.intro span {
  color:var(--muted);
  font-size:.57rem;
  line-height:1.6
}
.menu-section {
  padding:3.2rem 0 3rem
}
.section-head {
  display:grid;
  gap:1.25rem;
  margin-bottom:1.3rem
}
.section-head h2 {
  margin:0;
  font-size:1.85rem;
  letter-spacing:-.05em
}
.section-description {
  margin:.6rem 0 0;
  color:var(--muted);
  font-size:.67rem;
  line-height:1.8
}
.search {
  height:50px;
  display:flex;
  width:100%;
  max-width:100%;
  align-items:center;
  gap:.65rem;
  padding:0 1rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 5px 14px rgba(45,50,45,.04);
  color:var(--green);
  transform:none;
  transition:border-color .16s ease,box-shadow .16s ease
}
.search:focus-within {
  transform:none;
  border-color:var(--green);
  box-shadow:0 5px 14px rgba(45,50,45,.04)
}
.search span {
  font-size:1.35rem
}
.search input {
  flex:1 1 0;
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.75rem;
  transform:none;
  transition:none;
  appearance:none;
  -webkit-appearance:none
}
.categories {
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  margin:0 -16px 1.4rem;
  padding:0 16px .3rem;
  scrollbar-width:none
}
.categories::-webkit-scrollbar {
  display:none
}
.category {
  flex:0 0 auto;
  min-height:39px;
  padding:.55rem .9rem;
  border:1px solid #d8d5cc;
  border-radius:999px;
  background:#fff;
  color:var(--green);
  font:700 .64rem Alexandria,Tahoma,sans-serif
}
.category.active {
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  box-shadow:0 6px 13px rgba(23,75,62,.18)
}
.menu-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem
}
.menu-category-title,.menu-family-title {
  grid-column:1 / -1;
  font-weight:800
}
.menu-category-title {
  margin-top:.65rem;
  padding:.75rem .9rem;
  border-radius:12px;
  background:var(--green);
  color:#fff;
  font-size:.82rem;
  box-shadow:0 7px 16px rgba(23,75,62,.13)
}
.menu-family-title {
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:.35rem;
  color:var(--green);
  font-size:.72rem
}
.menu-family-title::after {
  content:"";
  height:1px;
  flex:1;
  background:var(--line)
}
.item {
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 5px 14px rgba(34,43,38,.05)
}
.item-photo {
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:linear-gradient(135deg,#f5ecde,#dcc293)
}
.item-photo:after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:30%;
  background:linear-gradient(transparent,rgba(0,0,0,.18))
}
.item-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease
}
.item:hover .item-photo img { transform:scale(1.04) }
.item-photo.has-image-fallback { background:radial-gradient(circle at 50% 42%,#fff 0 18%,transparent 19%),linear-gradient(135deg,#f7efdf,#d8b46d) }
.item-photo img.is-logo-fallback { object-fit:cover; padding:0; transform:none; filter:none }
.item-photo img.is-loaded { animation:photo-in .35s ease-out }
.item { content-visibility:auto; contain-intrinsic-size:auto 430px }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important }
}
@keyframes photo-in { from { opacity:.55; transform:scale(1.025) } to { opacity:1; transform:scale(1) } }
.item-body {
  padding:.9rem;
  text-align:center
}
.item-category {
  display:inline-block;
  padding:.3rem .65rem;
  border-radius:999px;
  background:var(--gold-soft);
  color:#886227;
  font-size:.56rem;
  font-weight:800
}
.item h3 {
  min-height:2.8em;
  margin:.55rem 0 .35rem;
  color:var(--deep);
  font-size:.82rem;
  line-height:1.6
}
.item p {
  display:none
}
.item-order {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:42px;
  margin-top:.7rem;
  border:0;
  border-radius:11px;
  background:var(--green);
  color:#fff;
  box-shadow:0 6px 13px rgba(23,75,62,.18);
  font-size:.68rem;
  font-weight:800;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease
}
.item-price {
  display:block!important;
  min-height:0!important;
  margin:.4rem 0 .65rem!important;
  color:var(--muted)!important;
  font-size:.62rem!important
}
.item-price strong { color:var(--green) }
.item-price .price-on-request { color:#9a6c24 }
.item-help { display:block!important; min-height:0!important; margin:.65rem 0!important; color:var(--muted)!important; font-size:.56rem!important; line-height:1.7!important }
.item-order-icon { font-size:.9rem; line-height:1 }
.image-placeholder {
  display:grid;
  align-content:center;
  justify-items:center;
  gap:.4rem;
  width:100%;height:100%;
  background:linear-gradient(135deg,#eee5d8,#d7b77c);
  color:var(--green);font-size:.68rem;font-weight:700;
  text-align:center
}
.image-placeholder::before { content:"✦"; color:#9a6c24; font-size:1.25rem }
.pack-control,.quantity-control {
  display:grid;justify-items:center;gap:.35rem;
  margin:.65rem 0;color:var(--muted);font-size:.58rem
}
.control-label { color:var(--muted); font-weight:700 }
.control-buttons { display:flex;align-items:center;justify-content:center;gap:.55rem }
.unit-label { color:var(--muted); font-size:.55rem }
.pack-control button,.quantity-control button,.cart-line-actions button {
  display:grid;place-items:center;width:32px;height:32px;border:1px solid #cfb783;
  border-radius:9px;background:#fff;color:var(--green);font:700 1.25rem Arial;cursor:pointer
}
.pack-control output,.quantity-control output { min-width:58px;text-align:center;color:var(--deep);font-size:.75rem;font-weight:800 }
.item-order { width:100%;cursor:pointer;font-family:inherit }
.item-order:hover { background:#103c31;transform:translateY(-2px);box-shadow:0 9px 18px rgba(23,75,62,.23) }
.cart-toggle {
  position:fixed;z-index:10;right:auto;left:18px;bottom:84px;display:flex;align-items:center;gap:.5rem;
  border:0;border-radius:999px;padding:.85rem 1.05rem;background:var(--gold);color:var(--deep);
  box-shadow:0 10px 25px rgba(0,0,0,.22);font:800 .7rem Alexandria,Tahoma,sans-serif;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease
}
.cart-toggle:hover { transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.25) }
.cart-toggle span { display:grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:var(--deep);color:#fff;font-size:.6rem }
.cart-toast {
  position:fixed;z-index:21;right:auto;left:18px;bottom:138px;margin:0;padding:.7rem .9rem;
  border-radius:9px;background:var(--deep);color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.18);
  font-size:.62rem;font-weight:700
}
.cart-backdrop { position:fixed;inset:0;z-index:19;background:rgba(5,26,20,.52) }
.cart-open { overflow:hidden }
.cart-panel {
  position:fixed;z-index:20;top:0;bottom:0;right:auto;left:0;width:min(calc(100% - 16px),440px);padding:1rem;
  overflow:auto;background:var(--paper);box-shadow:12px 0 40px rgba(0,0,0,.22);transform:translateX(-110%);transition:transform .28s cubic-bezier(.2,.75,.2,1)
}
.cart-panel.open { transform:translateX(0) }
.cart-head { position:sticky;top:-1rem;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--line);background:var(--paper) }
.cart-head h2,.checkout-form h3 { margin:0;color:var(--green);font-size:1rem }
.close-button { display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--green);font-size:1.5rem;line-height:1;cursor:pointer }
.cart-items { display:grid;gap:.65rem;max-height:38vh;margin:1rem 0;overflow:auto;overscroll-behavior:contain;padding-left:.2rem }
.cart-line { display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.85rem;background:#fff;border:1px solid var(--line);border-radius:13px;font-size:.68rem;box-shadow:0 3px 10px rgba(34,43,38,.04) }
.cart-line strong { color:var(--green) }.cart-line small { display:block;margin-top:.28rem;color:var(--muted);font-size:.56rem;line-height:1.65 }
.cart-line-actions { display:flex;align-items:center;gap:.4rem;flex:0 0 auto }.cart-line-actions b{min-width:20px;text-align:center;color:var(--green)}
.cart-empty { text-align:center;color:var(--muted);font-size:.72rem;padding:1.3rem 0 }
.cart-total { display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;padding:1rem;background:var(--deep);border-radius:13px;color:#fff;font-size:.73rem }.cart-total strong{color:var(--gold);font-size:.9rem}
.cart-note { margin:.65rem 0 1rem;color:var(--muted);font-size:.58rem;line-height:1.7 }
.checkout-form { display:grid;gap:.75rem;margin-top:.3rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 4px 12px rgba(34,43,38,.04) }
.delivery-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;font-size:.67rem;color:var(--ink) }
.delivery-options label { position:relative;display:grid;place-items:center;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer }
.delivery-options label input { position:absolute;right:.7rem;width:17px;height:17px;margin:0;z-index:1 }
.delivery-options label span { width:100%;text-align:center;pointer-events:none }
.delivery-options label:has(input:checked) { border-color:var(--green);background:#edf5f1;color:var(--green);box-shadow:0 4px 10px rgba(23,75,62,.09) }
.checkout-form>label { display:grid;gap:.35rem;color:var(--green);font-size:.62rem;font-weight:700 }
.field-help { color:var(--muted);font-size:.54rem;font-weight:500 }
.checkout-form input:not([type="radio"]),.checkout-form textarea { width:100%;border:1px solid var(--line);border-radius:8px;padding:.65rem;background:#fff;color:var(--ink);font:inherit;font-size:16px }
.checkout-form textarea { min-height:84px;resize:vertical;line-height:1.65 }
.optional { color:var(--muted);font-weight:500 }
.checkout-form h3 { text-align:center;font-size:1.05rem }
.checkout-button { border:0;border-radius:10px;padding:.95rem;background:var(--green);color:#fff;font:800 .72rem Alexandria,Tahoma,sans-serif;cursor:pointer;box-shadow:0 7px 14px rgba(23,75,62,.18);transition:transform .2s ease,background .2s ease }
.checkout-button:hover:not(:disabled) { transform:translateY(-1px);background:#103c31 }
.checkout-button:disabled { cursor:not-allowed; opacity:.48 }
input[type="radio"] { accent-color:var(--green) }
@media (max-width:649px) {
  .cart-panel { width:100%;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));box-shadow:none }
  .cart-head { top:-1rem }
  .cart-items { max-height:34vh }
  .cart-line { align-items:flex-start }
  .cart-line-actions { padding-top:.15rem }
  .cart-toast { right:12px;left:12px;bottom:82px;text-align:center }
}
.load-more {
  display:block;
  margin:1.5rem auto 0;
  min-width:190px;
  padding:.78rem 1.15rem;
  border:1px solid var(--green);
  border-radius:999px;
  background:transparent;
  color:var(--green);
  font-size:.72rem;
  font-weight:800;
  cursor:pointer
}
.load-more:hover { background:var(--green); color:#fff }
.empty {
  padding:2rem;
  text-align:center;
  color:var(--muted);
  font-size:.8rem
}
footer {
  padding:1.6rem 0 1.9rem;
  background:var(--deep);
  color:#fff
}
.footer-inner {
  display:grid;
  gap:1.2rem
}
.footer-brand .brand-mark {
  width:43px;
  height:43px;
}
.footer-brand b {
  font-size:.72rem
}
.footer-links {
  display:flex;
  justify-content:space-between;
  color:var(--gold);
  font-size:.63rem
}
.footer-links a {
  text-decoration:none
}
.footer-phone { display:inline-flex; align-items:center; gap:.35rem }
.footer-phone svg { width:15px; height:15px; fill:currentColor }
.mobile-dock {
  position:fixed;
  z-index:9;
  right:12px;
  bottom:12px;
  left:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:6px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:17px;
  background:rgba(12,48,40,.94);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  /* الخلفية شبه المعتمة أخف من blur المستمر، خصوصًا على الهواتف. */
}
.mobile-dock a {
  display:grid;
  place-items:center;
  gap:3px;
  min-height:48px;
  color:#fff;
  text-decoration:none;
  font-size:.57rem;
  font-weight:700
}
.mobile-dock a+a {
  border-right:1px solid rgba(255,255,255,.14)
}
.mobile-dock span {
  color:var(--gold);
  font:bold 1rem Arial
}
.mobile-dock svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.mobile-dock a:first-child svg,.mobile-dock a:last-child svg { fill:var(--gold); stroke:none }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important }
}
@media(min-width:650px) {
  body {
    padding-bottom:0
  }
  .container {
    width:min(100% - 56px,1160px)
  }
  .hero {
    min-height:570px
  }
  .nav {
    height:95px
  }
  .brand-mark {
    width:58px;
    height:58px
  }
  .brand b {
    font-size:1.2rem
  }
  .call-link {
    width:auto;
    height:auto;
    padding:11px 15px;
    border:1px solid rgba(255,255,255,.28);
    background:transparent;
    color:#fff;
    font-size:.75rem
  }
  .contact-label { display:inline; font-size:inherit }
  .hero-content {
    min-height:475px;
    align-items:center;
    padding-top:0
  }
  .hero-copy {
    max-width:620px
  }
  .hero h1 {
    font-size:clamp(2.6rem,5.5vw,4.6rem)
  }
  .hero-copy>p:not(.kicker) {
    font-size:.92rem
  }
  .hero-actions {
    display:flex
  }
  .button {
    min-height:auto;
    padding:.9rem 1.3rem;
    border-radius:999px
  }
  .hero-art {
    left:5%;
    bottom:80px;
    width:300px;
    height:300px;
    opacity:1
  }
  .intro {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:-42px
  }
  .intro div {
    padding:1.25rem 1.8rem
  }
  .section-head {
    display:flex;
    justify-content:space-between;
    align-items:end
  }
  .search {
    width:310px
  }
  .categories {
    margin-inline:0;
    padding-inline:0;
    overflow:visible
  }
  .menu-grid {
    grid-template-columns:repeat(3,1fr);
    gap:1.1rem
  }
  .item {
    transition:transform .2s,box-shadow .2s
  }
  .item:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow)
  }
  .item h3 {
    font-size:.95rem
  }
  .item p {
    display:block;
    min-height:3.5em;
    margin:0;
    color:var(--muted);
    font-size:.63rem;
    line-height:1.75
  }
  .item-order {
    font-size:.72rem
  }
  .mobile-dock {
    display:none
  }
  .cart-toggle { bottom:18px }
  .cart-toast { bottom:72px }
  .footer-inner {
    display:flex;
    justify-content:space-between;
    align-items:center
  }
}
@media(min-width:1000px) {
  .menu-grid {
    grid-template-columns:repeat(4,1fr)
  }
}