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


/* ==========================================================
   HABIBI PHOTO MENU — card redesign
   Images are optional: add `img` to a dish in habibi-menu.js.
   ========================================================== */
body.hb-menu .dishes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  align-items:stretch;
}
body.hb-menu .dish{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:0;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(201,162,75,.22);
  border-radius:12px;
  background:#10251a;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  transition:opacity .6s,transform .6s,background .35s,border-color .35s,box-shadow .35s;
}
body.hb-menu .dish::before{display:none}
body.hb-menu .dish:hover{
  background:#142e20;
  border-color:rgba(201,162,75,.55);
  box-shadow:0 16px 36px rgba(0,0,0,.25);
}
body.hb-menu .dish-media{
  position:relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:linear-gradient(145deg,#204b32 0%,#0b2015 70%);
}
body.hb-menu .dish-photo{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .55s ease;
}
body.hb-menu .dish-photo[hidden]{display:none}
body.hb-menu .dish:hover .dish-photo{transform:scale(1.045)}
body.hb-menu .dish-media-fallback{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  flex-direction:column;gap:.55rem;
  color:rgba(227,197,131,.8);font-family:var(--util);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,75,.13),transparent 60%);
}
body.hb-menu .dish-media.no-photo .dish-media-fallback{display:flex}
body.hb-menu .dish-media-mark{
  display:grid;place-items:center;width:74px;height:74px;
  border:1px solid rgba(201,162,75,.38);border-radius:50%;
  font-family:var(--display);font-size:3rem;color:var(--gold-soft);
}
body.hb-menu .dish-content{
  display:flex;flex-direction:column;gap:.55rem;flex:1;
  padding:1.15rem 1.2rem 1.35rem;
}
body.hb-menu .dish-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
body.hb-menu .dish-name{font-size:1.3rem;line-height:1.25;overflow-wrap:anywhere}
body.hb-menu .dish-price{font-size:1rem;flex:0 0 auto;transform:none !important}
body.hb-menu .dish-gram{margin:0;font-size:.64rem;letter-spacing:.1em}
body.hb-menu .dish-ro,body.hb-menu .dish-en{grid-column:auto;line-height:1.55}
body.hb-menu .dish-ro{color:rgba(255,255,255,.82)}
body.hb-menu .dish-en{color:rgba(255,255,255,.54)}
body.hb-menu .dish-badge{margin:.15rem 0}
body.hb-menu .dish-badge .badge{margin:0}
@media(max-width:1020px){body.hb-menu .dishes{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}}
@media(max-width:620px){
  body.hb-menu .dishes{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  body.hb-menu .dish-content{padding:1rem 1.05rem 1.2rem}
  body.hb-menu .dish-media{aspect-ratio: 16 / 10}
}
@media print{
  body.hb-menu .dishes{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hb-menu .dish{border:1px solid #ddd;background:#fff;break-inside:avoid}
  body.hb-menu .dish-media{display:none}
  body.hb-menu .dish-name,body.hb-menu .dish-ro{color:#111}
}

/* Habibi footer contact icons */

body.hb-menu .habibi-contact .habibi-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: color .25s ease;
}

body.hb-menu .habibi-contact .habibi-contact-link svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  color: #C9A24B;
  transition: transform .25s ease;
}

body.hb-menu .habibi-contact .habibi-contact-link span {
  overflow-wrap: anywhere;
}

body.hb-menu .habibi-contact .habibi-contact-link:hover {
  color: #E3C583;
}

body.hb-menu .habibi-contact .habibi-contact-link:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  body.hb-menu .habibi-contact .habibi-contact-link {
    gap: 9px;
    font-size: .78rem;
    margin-bottom: 12px;
  }

  body.hb-menu .habibi-contact .habibi-contact-link svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }
}

/* HABIBI — MOBILE FOOTER FIX */

@media (max-width: 640px) {

  /* Arrange footer sections vertically */
  body.hb-menu .foot-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  /* Center Habibi branding */
  body.hb-menu .foot-grid > div:first-child {
    text-align: center;
    width: 100%;
  }

  /* Address and contact sections */
  body.hb-menu .foot-col {
    width: 100%;
    text-align: left;
  }

  /* Contact links */
  body.hb-menu .habibi-contact .habibi-contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 16px;
    font-size: 14px;
  }

  body.hb-menu .habibi-contact .habibi-contact-link span {
    overflow-wrap: anywhere;
    word-break: normal;
    min-width: 0;
  }

  /* Copyright and YAZFORGE at the bottom */
  body.hb-menu .foot-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 32px !important;
    padding-top: 20px !important;
    text-align: center !important;
    width: 100%;
  }

  body.hb-menu .foot-bottom span {
    display: block;
    width: 100%;
  }
}

/* HABIBI — BIGGER FOOTER TITLES */

body.hb-event .foot-col h4,
body.hb-book .foot-col h4,
body.hb-menu .foot-col h4 {
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}

/* HABIBI — LOCATION AND HOURS ICONS */

body.hb-menu .habibi-location .habibi-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.6;
}

body.hb-menu .habibi-location .habibi-info-row svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #C9A24B;
}

body.hb-menu .habibi-location .habibi-info-row > span {
  min-width: 0;
}

/* HABIBI MENU — HIDE BACK TO TOP BUTTONS */

/* Astra theme */
body.hb-menu #ast-scroll-top,
body.hb-menu .ast-scroll-top-icon,
body.hb-menu .ast-scroll-to-top {
  display: none !important;
}

/* Common WordPress scroll-to-top buttons */
body.hb-menu #scroll-to-top,
body.hb-menu .scroll-to-top,
body.hb-menu .back-to-top,
body.hb-menu #back-to-top {
  display: none !important;
}

/* HABIBI — GOLD BACK TO TOP BUTTON */

body.hb-menu #topBtn {
  position: fixed !important;
  right: 20px !important;
  bottom: 24px !important;

  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid #C9A24B !important;
  border-radius: 50% !important;
  background: #C9A24B !important;
  color: #08190F !important;

  box-sizing: border-box !important;
  line-height: 1 !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

body.hb-menu #topBtn svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Preserve the existing show/hide behavior */
body.hb-menu #topBtn:not(.show) {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.hb-menu #topBtn.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}