body.hb-menu{
  --ink:#08190F; --green-900:#0B2417; --green-800:#123A26; --green-700:#1B5E3F;
  --sand:#E8C9A0; --cream:#F7EAD7; --gold:#C9A24B; --gold-soft:#E3C583;
  --champagne:#DCC79B; --ember:#C7362B; --line:rgba(201,162,75,.28); --navH:57px;
  --display:'Amiri','Times New Roman',serif; --body:'Inter',system-ui,sans-serif;
  --util:'Cairo','Inter',sans-serif;
}
body.hb-menu, body.hb-menu *{box-sizing:border-box}
body.hb-menu{margin:0; background:var(--ink); color:#fff; font-family:var(--body); font-weight:300;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; scroll-behavior:smooth}
body.hb-menu[dir="rtl"]{font-family:var(--util)}
body.hb-menu[dir="rtl"] .dish-name, body.hb-menu[dir="rtl"] h1, body.hb-menu[dir="rtl"] h2{font-family:var(--display)}
body.hb-menu h1, body.hb-menu h2, body.hb-menu h3{font-family:var(--display); font-weight:400; margin:0; line-height:1.1}
body.hb-menu p{margin:0}
body.hb-menu a{color:inherit; text-decoration:none}
body.hb-menu button, body.hb-menu input{font:inherit; color:inherit}
body.hb-menu .shell{width:min(1180px,92vw); margin:0 auto}
body.hb-menu .prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:95;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold),#A9812F); transition:width .1s linear}
body.hb-menu .cur-dot, body.hb-menu .cur-ring{position:fixed; top:0; left:0; z-index:300; pointer-events:none; will-change:transform; opacity:0; transition:opacity .3s}
body.hb-menu .cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold)}
body.hb-menu .cur-ring{width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:1px solid rgba(201,162,75,.5);
  display:grid; place-items:center; transition:opacity .3s,width .35s cubic-bezier(.2,.8,.3,1),height .35s cubic-bezier(.2,.8,.3,1),border-color .35s,background .35s,margin .35s cubic-bezier(.2,.8,.3,1)}
body.hb-menu .cur-ring svg{width:15px; height:15px; opacity:0; transform:scale(.5); transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.3,1)}
body.hb-menu .cur-ring svg path{fill:var(--ember)}
body.hb-menu.cur-on .cur-dot, body.hb-menu.cur-on .cur-ring{opacity:1}
body.hb-menu.cur-hot .cur-dot{opacity:0}
body.hb-menu.cur-hot .cur-ring{width:54px; height:54px; margin:-27px 0 0 -27px; border-color:rgba(201,162,75,.9); background:rgba(201,162,75,.12)}
body.hb-menu.cur-hot .cur-ring svg{opacity:1; transform:scale(1)}
@media(hover:hover) and (pointer:fine){
body.hb-menu.cur-on, body.hb-menu.cur-on a, body.hb-menu.cur-on button{cursor:none}
body.hb-menu.cur-on input{cursor:text}
}
body.hb-menu .nav{position:fixed; top:0; inset-inline:0; z-index:80; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 4vw; background:rgba(8,25,15,.94); backdrop-filter:blur(14px); border-bottom:1px solid rgba(201,162,75,.14)}
body.admin-bar.hb-menu .nav{top:32px}
@media(max-width:782px){body.admin-bar.hb-menu .nav{top:46px}}
body.hb-menu .lang{display:flex; align-items:center; gap:.15rem; border:1px solid var(--line); border-radius:999px; padding:.2rem; position:relative}
body.hb-menu .lang-pill{position:absolute; top:.2rem; bottom:.2rem; border-radius:999px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)); transition:transform .45s cubic-bezier(.2,.8,.3,1),width .45s cubic-bezier(.2,.8,.3,1)}
body.hb-menu .lang button{position:relative; z-index:2; border:0; background:none; padding:.42em .95em; border-radius:999px;
  font-family:var(--util); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255, 0.78); cursor:pointer; transition:color .35s}
body.hb-menu .lang button.on{color:var(--green-900)}
body.hb-menu .nav-phone{font-family:var(--util); font-size:.68rem; font-weight:600; letter-spacing:.12em; color:var(--gold);
  border:1px solid var(--line); border-radius:999px; padding:.55em 1.15em; transition:background .3s,color .3s}
body.hb-menu .nav-phone:hover{background:var(--gold); color:var(--green-900)}
@media(max-width:720px){
body.hb-menu .nav-phone{display:none}
body.hb-menu .nav{padding:.8rem 5vw}
}
body.hb-menu .page-head{position:relative; padding:8.5rem 0 3rem; text-align:center; overflow:hidden;
  background:radial-gradient(100% 90% at 50% 0%, rgba(27,94,63,.45), transparent 70%), var(--ink)}
body.hb-menu .calligraphy{position:absolute; inset:0; overflow:hidden; pointer-events:none; font-family:var(--display); color:var(--gold); opacity:.055; user-select:none}
body.hb-menu .calligraphy span{position:absolute; font-size:clamp(9rem,24vw,20rem); line-height:1; white-space:nowrap; animation:drift 50s ease-in-out infinite alternate}
body.hb-menu .calligraphy span:nth-child(1){top:-14%; left:-10%}
body.hb-menu .calligraphy span:nth-child(2){bottom:-24%; right:-14%; animation-delay:-20s; animation-duration:64s}
body.hb-menu .calligraphy .lat{font-style:italic; opacity:.7; font-size:clamp(4rem,10vw,8rem)}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(-2deg)}to{transform:translate3d(4%,3%,0) rotate(2deg)}}
body.hb-menu .page-head .shell{position:relative; z-index:3}
body.hb-menu .eyebrow{font-family:var(--util); font-weight:600; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold)}
body.hb-menu .page-head h1{font-size:clamp(2.6rem,7vw,4.8rem); color:var(--sand); margin:.7rem 0 .8rem}
body.hb-menu .page-head p{color:rgba(255,255,255, 0.86); max-width:56ch; margin:0 auto; font-size:1rem}
body.hb-menu .fade-swap{animation:fadeSwap .5s ease both}
@keyframes fadeSwap{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
body.hb-menu .rail{position:sticky; top:var(--navH); z-index:70; background:rgba(8,25,15,.96); backdrop-filter:blur(14px);
  border-top:1px solid rgba(201,162,75,.14); border-bottom:1px solid rgba(201,162,75,.14)}
body.admin-bar.hb-menu .rail{top:calc(var(--navH) + 32px)}
body.hb-menu .rail-in{display:flex; align-items:center; gap:1.2rem; padding:.7rem 0}
body.hb-menu .chips{display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; flex:1}
body.hb-menu .chips::-webkit-scrollbar{display:none}
body.hb-menu .chip{display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; font-family:var(--util); font-size:.64rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255, 0.73);
  border:1px solid transparent; border-radius:999px; padding:.55em 1em; background:none; cursor:pointer;
  transition:color .3s,border-color .3s,background .3s,transform .3s}
body.hb-menu .chip svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.75}
body.hb-menu .chip:hover{color:#fff; transform:translateY(-1px)}
body.hb-menu .chip.on{color:var(--green-900); background:linear-gradient(135deg,var(--gold-soft),var(--gold)); border-color:var(--gold)}
body.hb-menu .search{position:relative; flex:0 0 auto}
body.hb-menu .search input{width:190px; background:transparent; border:0; border-bottom:1px solid rgba(201,162,75,.3);
  padding:.5rem .2rem .5rem 1.5rem; font-size:.9rem; font-weight:300; transition:border-color .3s,width .35s}
body.hb-menu[dir="rtl"] .search input{padding:.5rem 1.5rem .5rem .2rem}
body.hb-menu .search input::placeholder{color:rgba(255,255,255, 0.53)}
body.hb-menu .search input:focus{outline:none; border-bottom-color:var(--gold); width:230px}
body.hb-menu .search svg{position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%); width:13px; height:13px; stroke:rgba(201,162,75,.6); fill:none; stroke-width:2}
@media(max-width:760px){
body.hb-menu .rail-in{flex-direction:column-reverse; align-items:stretch; gap:.5rem}
body.hb-menu .search input, body.hb-menu .search input:focus{width:100%}
}
body.hb-menu .cat-sec{padding:clamp(3rem,6vw,4.5rem) 0; border-bottom:1px solid rgba(201,162,75,.1); scroll-margin-top:7rem}
body.hb-menu .cat-sec:nth-child(even){background:var(--green-900)}
body.hb-menu .cat-head{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.2rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line)}
body.hb-menu .cat-ic{width:38px; height:38px; flex:0 0 auto; padding:7px; border:1px solid var(--line); border-radius:50%;
  transition:transform .6s cubic-bezier(.2,.8,.3,1), border-color .6s, background .6s}
body.hb-menu .cat-ic svg{width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:120; stroke-dashoffset:120}
body.hb-menu .in .cat-ic svg{animation:draw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
body.hb-menu .cat-sec:hover .cat-ic{transform:rotate(-6deg) scale(1.06); border-color:var(--gold); background:rgba(201,162,75,.08)}
body.hb-menu .cat-head h2{font-size:clamp(1.9rem,4.5vw,2.9rem); color:var(--sand)}
body.hb-menu .cat-head .en{font-family:var(--display); font-style:italic; color:rgba(255,255,255, 0.6); font-size:1rem}
body.hb-menu .cat-head .n{margin-inline-start:auto; font-family:var(--util); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne)}
body.hb-menu .cat-head>*{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1)}
body.hb-menu .in .cat-head>*{opacity:1; transform:none}
body.hb-menu .in .cat-head>*:nth-child(2){transition-delay:.06s}
body.hb-menu .in .cat-head>*:nth-child(3){transition-delay:.12s}
body.hb-menu .in .cat-head>*:nth-child(4){transition-delay:.18s}
body.hb-menu .dishes{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,5vw,4rem)}
@media(max-width:800px){
body.hb-menu .dishes{grid-template-columns:1fr}
}
body.hb-menu .dish{position:relative; display:grid; grid-template-columns:1fr auto; gap:.3rem 1.4rem; padding:1.05rem .8rem;
  border-bottom:1px solid rgba(201,162,75,.1); border-radius:4px;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1), background .35s}
body.hb-menu .in .dish{opacity:1; transform:none}
body.hb-menu .dish::before{content:''; position:absolute; inset-inline-start:0; top:12%; bottom:12%; width:2px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); transform:scaleY(0); transform-origin:top;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
body.hb-menu .dish:hover{background:rgba(201,162,75,.05)}
body.hb-menu .dish:hover::before{transform:scaleY(1)}
body.hb-menu .dish:hover .dish-price{transform:scale(1.07)}
body.hb-menu .dish-name{font-family:var(--display); font-size:1.22rem; color:#fff}
body.hb-menu .dish-gram{font-family:var(--util); font-size:.6rem; font-weight:400; letter-spacing:.18em; color:var(--champagne); margin-inline-start:.65em; white-space:nowrap}
body.hb-menu .dish-price{font-family:var(--util); font-weight:600; font-size:.98rem; white-space:nowrap; letter-spacing:.02em;
  background:linear-gradient(135deg,#F3DFAE 0%,var(--gold) 48%,#A9812F 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
  transition:transform .35s cubic-bezier(.2,.8,.3,1); transform-origin:right center}
body.hb-menu[dir="rtl"] .dish-price{transform-origin:left center}
body.hb-menu .dish-ro{grid-column:1/2; font-size:.86rem; color:rgba(255,255,255, 0.92)}
body.hb-menu .dish-en{grid-column:1/2; font-family:var(--display); font-style:italic; font-size:.83rem; color:rgba(255,255,255, 0.6); margin-top:.15rem}
body.hb-menu .badge{display:inline-flex; align-items:center; gap:.35em; margin-inline-start:.6em; vertical-align:middle;
  font-family:var(--util); font-size:.5rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,162,75,.4); border-radius:999px; padding:.32em .7em}
body.hb-menu .badge svg{width:9px; height:9px; fill:var(--gold)}
body.hb-menu .empty{padding:4rem 0; text-align:center; color:rgba(255,255,255, 0.78)}
body.hb-menu .empty b{display:block; font-family:var(--display); font-weight:400; font-size:1.8rem; color:var(--sand); margin-bottom:.5rem}
body.hb-menu mark{background:rgba(201,162,75,.25); color:var(--gold-soft); border-radius:2px}
body.hb-menu .note{padding:2.5rem 0; text-align:center; font-size:.86rem; color:rgba(255,255,255, 0.9)}
body.hb-menu .footer{background:var(--ink); padding:4rem 0 2.2rem; position:relative; overflow:hidden}
body.hb-menu .footer .shell{position:relative; z-index:3}
body.hb-menu .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media(max-width:800px){
body.hb-menu .foot-grid{grid-template-columns:1fr}
}
body.hb-menu .foot-mark{font-family:var(--display); font-size:2.8rem; color:var(--sand)}
body.hb-menu .foot-mark em{font-style:normal; color:var(--gold)}
body.hb-menu .foot-tag{font-family:var(--display); font-style:italic; color:var(--gold-soft); margin-top:.3rem}
body.hb-menu .foot-col h4{font-family:var(--util); font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem}
body.hb-menu .foot-col p, body.hb-menu .foot-col a{display:block; font-size:.9rem; color:rgba(255,255,255, 0.88); margin-bottom:.45rem; transition:color .3s}
body.hb-menu .foot-col a:hover{color:var(--gold)}
body.hb-menu .foot-bottom{margin-top:2.8rem; padding-top:1.5rem; border-top:1px solid rgba(201,162,75,.14); display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-family:var(--util); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255, 0.58)}
body.hb-menu .top{position:fixed; inset-inline-end:2vw; bottom:2vw; z-index:75; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:rgba(8,25,15,.9); color:var(--gold); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .35s,background .3s,transform .3s}
body.hb-menu .top.show{opacity:1; pointer-events:auto}
body.hb-menu .top:hover{background:var(--gold); color:var(--green-900); transform:translateY(-3px)}
body.hb-menu :focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media print{
body.hb-menu{background:#fff; color:#111}
body.hb-menu .nav, body.hb-menu .rail, body.hb-menu .top, body.hb-menu .prog, body.hb-menu .cur-dot, body.hb-menu .cur-ring, body.hb-menu .calligraphy, body.hb-menu .footer{display:none !important}
body.hb-menu .cat-sec, body.hb-menu .cat-sec:nth-child(even){background:#fff; page-break-inside:avoid}
body.hb-menu .dish, body.hb-menu .cat-head>*{opacity:1 !important; transform:none !important}
body.hb-menu .dish-name, body.hb-menu .dish-ro, body.hb-menu .note, body.hb-menu .page-head p{color:#111}
body.hb-menu .cat-head h2, body.hb-menu .page-head h1{color:#1B5E3F}
body.hb-menu .dish-price{-webkit-text-fill-color:#A9812F; color:#A9812F}
}
@media(prefers-reduced-motion:reduce){
body.hb-menu, body.hb-menu *{animation-duration:.001s !important; transition-duration:.001s !important}
body.hb-menu .dish, body.hb-menu .cat-head>*{opacity:1 !important; transform:none !important}
body.hb-menu .cat-ic svg{stroke-dashoffset:0 !important}
}

/* ---- header logo ---- */
body.hb-menu .nav-mark{display:inline-flex; align-items:center; line-height:0}
body.hb-menu .nav-mark img{
  height:clamp(32px,3.6vw,44px); width:auto; display:block;
  filter:drop-shadow(0 2px 9px rgba(0,0,0,.35));
  transition:transform .45s cubic-bezier(.2,.8,.3,1), filter .45s;
}
body.hb-menu .nav-mark:hover img{transform:translateY(-1px) scale(1.02); filter:drop-shadow(0 4px 15px rgba(201,162,75,.32))}

/* ============================================================
   Phone layout. Header keeps the mark and the language switch;
   the number sits in the footer. Footer packs to two columns.
   ============================================================ */
@media(max-width:640px){
  body.hb-menu{--navH:48px}
  body.hb-menu .nav{padding:.65rem 4.5vw}
  body.hb-menu .nav-phone{display:none}
  body.hb-menu .nav-mark img{height:30px}
  body.hb-menu .lang{padding:.18rem}
  body.hb-menu .lang button{font-size:.53rem; letter-spacing:.14em; padding:.52em .85em}

  body.hb-menu .footer{padding:2.5rem 0 1.4rem}
  body.hb-menu .foot-grid{grid-template-columns:1fr 1fr; gap:1.4rem 1.1rem}
  body.hb-menu .foot-grid > div:first-child{grid-column:1 / -1; text-align:center}
  body.hb-menu .foot-mark{font-size:2.1rem}
  body.hb-menu .foot-tag{font-size:.86rem; margin-top:.15rem}
  body.hb-menu .foot-col h4{font-size:.54rem; letter-spacing:.2em; margin-bottom:.55rem}
  body.hb-menu .foot-col p, body.hb-menu .foot-col a{font-size:.79rem; margin-bottom:.32rem; line-height:1.45}
  body.hb-menu .foot-bottom{margin-top:1.6rem; padding-top:.95rem; justify-content:center;
    text-align:center; font-size:.52rem; gap:.35rem}
}

/* the phone number is hidden on handhelds - it lives in the footer,
   where there is room to read and tap it */
@media(max-width:820px){
  body.hb-menu .nav .nav-phone,
  body.hb-menu a.nav-phone{display:none !important}
}

/* the logo is a link - give it a real tap target and visible feedback.
   The negative margin cancels the padding so nothing shifts visually. */
body.hb-menu .nav-mark{
  padding:.4rem .55rem; margin:-.4rem -.55rem; border-radius:8px;
  cursor:pointer; -webkit-tap-highlight-color:rgba(201,162,75,.2);
  transition:background .3s;
}
body.hb-menu .nav-mark:hover{background:rgba(201,162,75,.07)}
body.hb-menu .nav-mark:active img{transform:scale(.96)}
body.hb-menu .nav-mark:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media(max-width:820px){
  body.hb-menu .nav-mark{min-height:44px; min-width:44px; justify-content:flex-start}
}