/* ═══════════════════════════════════════════════════════════════
   STREET BAR — جيزان
   البريف: فخامة هادئة، أبيض وأسود صارم، وحركة تفاعلية من أول لحظة.
   المقدمة: الصفحة تفتح على عتمة، ضوء يمشي فيكشف الاسم، ثم يكبر
   حتى تظهر الصفحة كاملة. بعدها الموقع هادئ ومباشر.
   الأسود أساس، والخشب الغامق خامة تُفرش في مواضع معدودة (لوح المحاصيل،
   إطارات البوسترات، قسم المتجر، الأزرار، شريط الإجراءات) عشان الصفحة
   تتنفس بدل سواد متصل. الشمبانيا أكسنت رفيع لا سطح.
   الخط الإنجليزي Bodoni Moda: ديدوني مطابق لووردماركهم الفعلي.
   موبايل فيرست: الأساس لشاشة الجوال والديسكتوب توسعة فوقه.
   نظام الاستدارة: صفر.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/bodoni-moda-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/bodoni-moda-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/bodoni-moda-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Amiri";src:url("/assets/fonts/amiri-arabic-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";src:url("/assets/fonts/amiri-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}

:root{
  --ink:#0A0A09;
  --ink-2:#111110;
  --white:#F4F2ED;
  --dim:#B4B2A9;              /* نص ثانوي: تباين 9.3:1 على الأسود */
  --mute:#9C9A93;             /* أصغر نص في الصفحة: تباين 7:1 */
  --line:rgba(244,242,237,.26);
  --line-2:rgba(244,242,237,.17);
  --touch:#8A7742;              /* ضوء الشمبانيا: أكسنت رفيع لا سطح */

  /* الخشب: ألواح جدرانهم وكاونترهم. سطح يُفرش لا لون يُرش */
  --wood:#17110C;
  --wood-2:#1E1710;
  --wood-3:#261C14;
  --wood-edge:#3A2A1C;

  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --head:"Amiri","Times New Roman",serif;
  --sans:"IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --soft:cubic-bezier(.16,1,.3,1);   /* منحنى الظهور: يهدأ طويلاً */
  --pad:clamp(22px,5.6vw,56px);
  --wrap:1180px;
  --headH:56px;
  --barH:66px;               /* 10 + 46 + 10: ارتفاع شريط الإجراءات الفعلي */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--headH) + 8px);
  /* قصّ الفائض الأفقي بـ clip لا hidden: hidden على الـbody يخلي سفاري iOS
     يعامله كصندوق تمرير، فتعلق العناصر المثبتة (شريط الإجراءات والزر
     العائم) أثناء التمرير بدل ما تلتصق بالشاشة */
  overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}
body{
  background:var(--ink);color:var(--white);
  font-family:var(--sans);font-weight:400;line-height:1.85;
  direction:rtl;text-align:right;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
main section[id]{scroll-margin-top:var(--headH)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--white);color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--touch);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.en{font-family:var(--serif);font-weight:500;direction:ltr;unicode-bidi:isolate;letter-spacing:.12em}
.meta{
  font-family:var(--serif);font-weight:500;direction:ltr;unicode-bidi:isolate;
  font-size:.62rem;letter-spacing:.32em;color:var(--mute);text-transform:uppercase;
}

/* ═══ المقدمة: العتمة تنفتح بالضوء ═══
   الغطاء أسود من أول رسمة للمتصفح، لا من أول رسمة للكانفس: قبل كذا كانت
   الصفحة تبين جزءاً من الثانية ثم تبدأ الحركة. أول ما يرسم الكانفس أول
   إطار تُشال خلفية الغطاء عشان الحفرة تكشف الصفحة تحته. */
#intro{position:fixed;inset:0;z-index:100;pointer-events:none}
#intro canvas{display:block;width:100%;height:100%}
#intro.done{display:none}
/* الغطاء يُلوَّن فقط لو الجافاسكربت شغّال (السكربت السطري يضيف .js على
   <html>)، وإلا ما فيه من يشيله. وحتى مع الجافاسكربت لا نعتمد على الكانفس
   وحده: أنيميشن خالص يشيل الغطاء عند الخامسة مهما صار، عشان ما تعلق
   الصفحة سوداء لو تعطّل requestAnimationFrame أو ما نزل ملف السكربت. */
.js #intro{background:var(--ink);animation:introSafety 5s steps(1,end) forwards}
@keyframes introSafety{0%,97%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

/* ═══ الماستهيد ═══ */
.site-head{
  position:fixed;top:0;inset-inline:0;z-index:60;
  background:linear-gradient(180deg,rgba(10,10,9,.94),rgba(10,10,9,0));
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.solid{background:var(--ink);border-bottom-color:var(--line-2)}
.site-head .wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--headH);gap:14px;
}
.brand{
  font-family:var(--serif);font-weight:700;font-size:.98rem;letter-spacing:.3em;
  text-decoration:none;direction:ltr;color:var(--white);flex-shrink:0;
}
.site-nav{display:none}
/* حالة الفتح تُحسب من ساعتهم الفعلية 4م إلى 2ف بتوقيت الرياض.
   في الأعلى يملكها الهيرو، والهيدر يستلمها بعد ما يصير مصمتاً. */
.site-head .status{transition:opacity .45s var(--soft)}
.site-head:not(.solid) .status{opacity:0;pointer-events:none}
.status{
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  font-size:.76rem;color:var(--dim);letter-spacing:.01em;
}
.status i{
  width:6px;height:6px;flex-shrink:0;
  background:var(--mute);border-radius:50%;
}
.status.open i{background:#7FA86A;box-shadow:0 0 0 3px rgba(127,168,106,.16)}
.status.shut i{background:var(--wood-edge)}

/* ═══ الهيرو ═══ */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-content:center;
  padding-block:calc(var(--headH) + 20px)
               calc(var(--barH) + env(safe-area-inset-bottom,0px) + 34px);
}
/* الهيرو شبكة، وعنصرها min-width:auto افتراضياً، فلا ينكمش تحت العرض
   الجوهري لكلمة STREET. بحساب 20.5vw مع حاشية 22px لا تتسع الصفحة إلا
   فوق 393px، فكل جوال أضيق من ذلك كان يتمدد أفقياً بضعة بكسلات.
   min-width:0 يمنع تمدد الصفحة نهائياً، والحاشية الأضيق هنا تعطي
   الووردمارك ما يكفيه بلا تصغيره: هو مقصود أن يملأ العرض أصلاً. */
.hero>.wrap{min-width:0;padding-inline:14px}
.mark{
  font-family:var(--serif);font-weight:700;direction:ltr;
  display:grid;justify-items:center;gap:.02em;line-height:1.02;
  font-size:clamp(3rem,20.5vw,10rem);letter-spacing:.02em;
  text-align:center;
}
.hero-copy{
  display:grid;justify-items:center;gap:15px;text-align:center;
  margin-top:clamp(26px,5vh,44px);
}
/* الخط فوق الساعة مو زخرفة: هو شريط دوام اليوم. يمتلئ بالشمبانيا بمقدار
   ما مضى من وقتهم (4 العصر إلى 2 الفجر)، فيقرأ مع الساعة تحته كوحدة
   واحدة: كم الساعة، وكم بقي من الليلة. فاضي تماماً وهم مسكّرين. */
.day{position:relative;width:clamp(104px,28vw,150px);height:1px;
  background:var(--line);display:block}
.day span{
  position:absolute;inset:0;background:var(--touch);
  transform-origin:100% 50%;transform:scaleX(0);
  transition:transform 1.6s var(--soft) .5s;
}
/* الساعة: توقيتهم هم لا توقيت جهاز الزائر. النقطتان تنبضان عشان
   يُقرأ الرقم كحالة حية لا كنص مطبوع. */
.clock{
  font-family:var(--serif);font-weight:500;direction:ltr;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-size:clamp(2.4rem,11vw,4rem);line-height:1;letter-spacing:.06em;
  color:var(--white);
}
.clock .cln{animation:blink 1.7s steps(1,end) infinite;padding-inline:.02em}
@keyframes blink{0%,52%{opacity:1}53%,100%{opacity:.24}}
.hero-copy .status{font-size:clamp(.86rem,2.6vw,.98rem);color:var(--dim)}
.hero-copy .status i{width:7px;height:7px}
/* شريحة الولاء في الهيرو: مو زراً ثالثاً مساوياً للاثنين، بل شريحة رفيعة
   مثل بطاقة العضوية نفسها. وصل رابط البرنامج على منصة Loyapro فصارت
   <a href> ولها هوفر وضغط. وهي تودّي لصفحة البطاقة نفسها لا لصورة
   الباركود: الزائر على جواله أصلاً، فصورة باركود تحتاج جوالاً ثانياً. */
.loyal-cta{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--dim);text-decoration:none;
  font-size:.84rem;min-height:40px;padding-inline:20px;
  transition:color .2s var(--ease),border-color .2s var(--ease),
             background-color .2s var(--ease),transform .12s var(--ease);
}
.loyal-cta:hover,.loyal-cta:focus-visible{
  color:var(--ink);background:var(--touch);border-color:var(--touch)
}
.loyal-cta:active{transform:scale(.97)}

/* أزرار الهيرو للديسكتوب فقط: الجوال له شريطه السفلي الثابت */
.hero-ctas{display:none;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
/* محتوى الهيرو يطلع **مع** اتساع الضوء لا بعده: كان ينتظر نهاية المقدمة
   فتجلس الصفحة لحظة فاضية ثم يظهر الكلام. صار `intro-open` يُضاف لحظة ما
   يبدأ الضوء يتسع على الصفحة كلها، فالحركتان تمشيان بالتوازي. */
body.intro-run .hero-copy>*{opacity:0}
body.intro-open .hero-copy>*,
body.intro-done .hero-copy>*{animation:rise 1s var(--soft) both}
body.intro-open .hero-copy>*:nth-child(2),
body.intro-done .hero-copy>*:nth-child(2){animation-delay:.09s}
body.intro-open .hero-copy>*:nth-child(3),
body.intro-done .hero-copy>*:nth-child(3){animation-delay:.18s}
body.intro-open .hero-copy>*:nth-child(4),
body.intro-done .hero-copy>*:nth-child(4){animation-delay:.27s}
body.intro-open .hero-copy>*:nth-child(5),
body.intro-done .hero-copy>*:nth-child(5){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* الزر: لوحة مقسومة، خانة للنص وخانة للسهم يفصلها خط، مثل لوحات
   التحكم والشواخص. السهم يزحف باتجاه القراءة وخانته تنقلب عند اللمس. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:stretch;
  min-height:52px;
  text-decoration:none;color:var(--white);
  background:linear-gradient(177deg,var(--wood-3),var(--wood));
  border:1px solid var(--wood-edge);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .38s var(--soft),transform .16s var(--ease);
}
.btn .lbl{
  display:flex;align-items:center;
  padding:0 clamp(20px,4.6vw,32px);
  font-weight:500;font-size:.95rem;letter-spacing:.02em;
}
.btn .go{
  display:grid;place-items:center;width:50px;flex-shrink:0;
  border-inline-start:1px solid var(--wood-edge);
  transition:background-color .36s var(--soft),border-color .36s var(--soft);
}
.btn .arw{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .42s var(--soft),stroke .3s var(--soft);
}
.btn:hover,.btn:focus-visible{border-color:var(--touch)}
.btn:hover .go,.btn:focus-visible .go{
  background:var(--touch);border-inline-start-color:var(--touch);
}
.btn:hover .arw,.btn:focus-visible .arw{transform:translateX(-4px);stroke:var(--ink)}
.btn:active{transform:scale(.985)}

/* الأساسي: ورق كريمي، وخانة السهم تنقلب خشباً */
.btn-solid{
  color:var(--ink);background:var(--white);border-color:var(--white);
}
.btn-solid .go{border-inline-start-color:rgba(10,10,9,.22)}
.btn-solid:hover,.btn-solid:focus-visible{border-color:var(--white)}
.btn-solid:hover .go,.btn-solid:focus-visible .go{
  background:var(--ink);border-inline-start-color:var(--ink);
}
.btn-solid:hover .arw,.btn-solid:focus-visible .arw{stroke:var(--white)}

/* ═══ شريط الإجراءات: جوال فقط ═══
   ينزلق من تحت الشاشة مع اتساع الضوء لا يظهر دفعة واحدة عند رفع الغطاء.
   في صفحة المنيو الكلاس موجود من أول رسمة فيستقر مكانه بلا حركة. */
.action-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
  background:linear-gradient(180deg,var(--wood-2),var(--wood));
  border-top:1px solid var(--wood-edge);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  transform:translate3d(0,100%,0);
}
body.intro-open .action-bar,body.intro-done .action-bar{
  transform:none;
  transition:transform .9s var(--soft) .25s;
}
.action-bar a{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 8px;
  text-decoration:none;font-weight:500;font-size:.92rem;
  border:1px solid rgba(244,242,237,.28);color:var(--white);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .3s var(--soft),color .3s var(--soft),
             background-color .3s var(--soft),transform .16s var(--ease);
}
.action-bar a:active{transform:scale(.985)}
.action-bar .primary{background:var(--white);color:var(--ink);border-color:var(--white)}
.action-bar a[aria-current="page"]{border-color:var(--touch);color:var(--touch);background:transparent}
.action-bar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0}
body.intro-run .action-bar{opacity:0}

/* ═══ عنوان قسم ═══ */
.sec{padding-block:clamp(64px,12vh,132px);border-top:1px solid var(--line-2)}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(26px,5vh,46px)}
.sec-head h2{font-family:var(--head);font-weight:700;line-height:1.45;flex-shrink:0;
  font-size:clamp(1.5rem,5.6vw,2.4rem)}
.sec-head .meta{flex-shrink:0;transform:translateY(-2px)}
.sec-head .count{flex-shrink:0;font-family:var(--serif);font-weight:500;
  font-size:.78rem;color:var(--mute);transform:translateY(-2px);direction:ltr}
.sec-head::after{content:"";flex:1;height:1px;background:var(--line);transform:translateY(-8px)}

/* ═══ الافتتاحية ═══ */
.statement{font-family:var(--head);font-weight:700;line-height:1.5;text-wrap:balance;
  font-size:clamp(1.85rem,7.4vw,3.2rem);max-width:17ch}
.intro-body{margin-top:clamp(22px,4vh,34px);color:var(--dim);display:grid;gap:13px;max-width:46ch}

/* ═══ قوائم الأسعار ═══ */
.list{border-top:1px solid var(--line)}
.two-col>*{min-width:0}
.row{display:flex;align-items:baseline;gap:12px;padding-block:clamp(13px,2.4vh,19px);
  border-bottom:1px solid var(--line-2)}
/* الاسم يأخذ الفراغ ويلتف عند الضيق، والإنجليزي هو أول من ينكمش */
/* صورة الصنف اختيارية ويرفعها المدير من اللوحة. مركزة رأسياً لأن
   بقية الصف على خط الأساس، وبلا استدارة كنظام أشكال الموقع كله. */
.row .thumb{width:42px;height:42px;flex:0 0 auto;object-fit:cover;
  align-self:center;border:1px solid var(--line-2)}
.row .name{font-weight:500;font-size:clamp(1.02rem,3.9vw,1.24rem);line-height:1.5;
  flex:1 1 auto;min-width:0}
.row .name em{font-style:normal;font-weight:400;font-size:.72rem;color:var(--mute);
  margin-inline-start:8px;letter-spacing:.01em}
/* الاسم الإنجليزي منقول بإملائهم، فما يُقص: هو اللي يثبت والاسم العربي
   هو اللي يلتف لو ضاق السطر. وتحت 360 يُخفى كلياً. */
.row .en{font-size:.62rem;color:var(--mute);letter-spacing:.09em;flex:0 0 auto;
  text-align:left;white-space:nowrap}
.row .price{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums;
  direction:ltr;display:flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:clamp(1.08rem,4.1vw,1.34rem)}
.sar{width:.6em;height:.7em;fill:currentColor;display:inline-block;flex-shrink:0}
.more{margin-top:clamp(22px,4vh,36px)}

/* ═══ المحاصيل: جدول أسعار، لا بطاقات ═══
   كانت كل بطاقة تعيد أسماء الطرق الثلاث، والأرقام ما تصطف مع أسمائها
   وتلزق بحواف اللوح. صار جدولاً حقيقياً: الأسماء مرة وحدة في رأسه،
   والأرقام في أعمدة مصطفّة، وللّوح حشوة جانبية. */
.crops{
  background:linear-gradient(177deg,var(--wood-2),var(--wood));
  border:1px solid var(--wood-edge);
  padding:clamp(14px,4vw,26px) clamp(16px,4.4vw,30px);
  overflow-x:auto;
}
.crops table{width:100%;border-collapse:collapse;table-layout:fixed}
.crops th,.crops td{text-align:start;vertical-align:middle}
.crops thead th{
  font-weight:400;font-size:.7rem;letter-spacing:.02em;color:var(--mute);
  padding-bottom:11px;border-bottom:1px solid var(--wood-edge);
}
.crops tbody th{
  font-family:var(--head);font-weight:700;
  font-size:clamp(1rem,4.2vw,1.3rem);line-height:1.45;
  padding-block:clamp(12px,2.6vw,17px);padding-inline-end:10px;
}
.crops tbody td{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1rem,4vw,1.28rem);
  font-variant-numeric:tabular-nums;direction:ltr;
  /* يمين فيزيائي لا منطقي: الخانة بداخلها LTR، والمطلوب أن تحاذي
     حافة العمود نفسها اللي يحاذيها عنوانه في العربي */
  text-align:right;white-space:nowrap;
}
.crops tbody tr+tr th,.crops tbody tr+tr td{border-top:1px solid var(--line-2)}
/* عمود الأسماء يأخذ الفراغ، والأعمدة الرقمية متساوية عشان تصطف */
.crops thead th:first-child,.crops tbody th{width:43%}
.crops thead th:not(:first-child),.crops tbody td{width:19%}
/* سكة الشمبانيا: خط رفيع عند بداية كل صف، يمتد بارتفاع الصف كله فيقرأ
   عموداً في الجدول لا نقطة زخرفية قبل السطر */
.crops tbody th{position:relative;padding-inline-start:13px}
.crops tbody th::before{
  content:"";position:absolute;inset-inline-start:0;
  top:7px;bottom:7px;width:1.5px;background:var(--touch);
}
/* محصول ما له نسخة في هذا العمود: شرطة باهتة تقول «لا يوجد»
   بلا ما تسحب النظر، ومعها نص مسموع يشرحها لقارئ الشاشة */
.crops tbody td.none{color:var(--line);font-family:var(--sans)}
.crops-note{margin-top:16px;color:var(--mute);font-size:.84rem}

/* ═══ المكان: إطارات بانتظار جلسة التصوير ═══ */
.frames{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-inline:var(--pad);scrollbar-width:none}
.frames::-webkit-scrollbar{display:none}
.frame{flex:0 0 62%;aspect-ratio:3/4;scroll-snap-align:start;position:relative;
  background:linear-gradient(170deg,var(--wood-2),var(--wood));
  border:1px solid var(--wood-edge);display:grid;place-items:center;overflow:hidden}
/* فتحة البوستر داخل الإطار الخشبي */
.frame::before{content:"";position:absolute;inset:11px;background:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(244,242,237,.05)}
.frame span{position:relative;font-family:var(--serif);font-weight:500;font-size:.58rem;
  letter-spacing:.34em;color:var(--mute)}
/* الصورة تنزل داخل فتحة البوستر نفسها، فتحتفظ بحافة الإطار الخشبية */
.frame img{position:absolute;inset:11px;width:calc(100% - 22px);
  height:calc(100% - 22px);object-fit:cover}

/* أرضية خشب لقسم واحد، عشان الصفحة تتنفس بدل سواد متصل */
.sec.on-wood{
  position:relative;
  background:linear-gradient(177deg,var(--wood) 0%,#1B140F 100%);
  border-top:1px solid var(--wood-edge);
}
.sec.on-wood>*{position:relative}
.sec.on-wood .row{border-bottom-color:rgba(244,242,237,.09)}
.sec.on-wood .list{border-top-color:rgba(244,242,237,.18)}
.sec.on-wood .sec-head::after{background:rgba(244,242,237,.18)}

/* ═══ وين مكاننا ═══ */
.visit-rows{border-top:1px solid var(--line)}
.visit-rows .r{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:clamp(13px,2.4vh,19px);border-bottom:1px solid var(--line-2)}
.visit-rows h3{font-size:.85rem;color:var(--mute);font-weight:400;flex-shrink:0}
.visit-rows p{font-weight:500;font-size:clamp(1rem,3.4vw,1.15rem);text-align:left}
/* الخريطة ورابطها وحدة واحدة: اللوح فوق وشريط الفتح ملتصق تحته يفصلهما
   خط، بدل زر عائم تحت الصفوف ما له علاقة بصرية بشي */
.map{margin-top:clamp(22px,4vh,34px);border:1px solid var(--line);background:var(--ink-2)}
/* شريط التقييم فوق الخريطة: مرآة لشريط الفتح تحتها، فيصير للّوح رأس وقاعدة */
.map-rate{
  display:flex;align-items:center;gap:11px;min-height:52px;
  padding-inline-start:clamp(14px,3.4vw,18px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(177deg,var(--wood-3),var(--wood));
}
.map-rate .stars{display:inline-flex;gap:3px;direction:ltr}
.map-rate .stars svg{width:14px;height:14px;fill:var(--touch)}
/* النجوم تنبض وحدة وحدة أول ما يظهر اللوح */
.map.in .stars svg{opacity:0;transform:scale(.6);animation:starPop .5s var(--soft) forwards}
.map.in .stars svg:nth-child(1){animation-delay:.15s}
.map.in .stars svg:nth-child(2){animation-delay:.27s}
.map.in .stars svg:nth-child(3){animation-delay:.39s}
.map.in .stars svg:nth-child(4){animation-delay:.51s}
.map.in .stars svg:nth-child(5){animation-delay:.63s}
@keyframes starPop{to{opacity:1;transform:none}}
.map-rate .num{font-family:var(--serif);font-weight:700;font-size:1.2rem;
  font-variant-numeric:tabular-nums;direction:ltr}
.map-rate .src{color:var(--mute);font-size:.76rem}
/* نجمة مطفأة: يفعّلها التحديث اليومي لو نزل التقييم تحت الخمسة */
.map-rate .stars svg.off{fill:var(--wood-edge)}
.map-rate a{
  margin-inline-start:auto;display:flex;align-items:center;align-self:stretch;
  padding:0 clamp(16px,3.6vw,22px);text-decoration:none;
  background:var(--white);color:var(--ink);font-size:.87rem;font-weight:700;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--soft);
}
.map-rate a:hover,.map-rate a:focus-visible{background:var(--touch)}
.map iframe{display:block;width:100%;aspect-ratio:4/5;border:0;
  /* الخريطة تُقلب لتصير داكنة: بلوك أبيض في صفحة سوداء يكسر الهوية */
  filter:invert(1) grayscale(1) contrast(.92) brightness(.96)}
.map-open{
  display:flex;align-items:center;gap:11px;
  min-height:52px;padding-inline:clamp(14px,3.4vw,20px);
  text-decoration:none;color:var(--white);
  border-top:1px solid var(--line);
  background:linear-gradient(177deg,var(--wood-3),var(--wood));
  font-size:.92rem;font-weight:500;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .34s var(--soft),color .3s var(--soft);
}
.map-open .pin{width:17px;height:17px;flex-shrink:0;fill:var(--touch);
  transition:fill .3s var(--soft)}
.map-open .txt{flex:1 1 auto}
.map-open .arw{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .42s var(--soft)}
.map-open:hover,.map-open:focus-visible{background:var(--touch);color:var(--ink)}
.map-open:hover .pin,.map-open:focus-visible .pin{fill:var(--ink)}
.map-open:hover .arw{transform:translateX(-4px)}

/* ═══ زر السوشل العائم ═══
   اختيار يوسف من أربعة نماذج: زر «تابعنا» أبيض ممتلئ على اليمين، فوق
   شريط الإجراءات مع حساب المنطقة الآمنة (شريط الآيفون السفلي).
   مربّعا الحسابين يطلعان فوقه بتتابع، والزائد يدور 45 درجة فيصير ×. */
.fab{
  position:fixed;z-index:70;
  inset-inline-start:var(--pad);
  bottom:calc(var(--barH) + env(safe-area-inset-bottom,0px) + 20px);
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:9px;
  opacity:0;transform:translate3d(0,12px,0);
  /* الحاوية صندوق شفاف بعرض أوسع أبنائها وارتفاع الزر مع الروابط،
     وهي تلتقط اللمس وإن لم تُرَ. اللمس يمر من خلالها، ويلتقطه الزر
     والروابط المفتوحة وحدهم. */
  pointer-events:none;
}
.fab-btn{pointer-events:auto}
body.intro-open .fab,body.intro-done .fab{
  opacity:1;transform:none;
  transition:opacity .8s var(--soft) .4s,transform .8s var(--soft) .4s;
}

/* الزر: «تابعنا» بأبيض ممتلئ مثل زر المنيو الرئيسي، بكلمة صريحة لا رمز
   يُفسَّر. الزائد يدور 45 درجة فيصير × عند الفتح: تحوّل واحد متصل. */
.fab-btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:50px;padding:0 22px;cursor:pointer;
  background:var(--white);color:var(--ink);border:1px solid var(--white);
  font-family:var(--sans);font-weight:700;font-size:.93rem;
  box-shadow:0 14px 36px rgba(0,0,0,.44);
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--ease),box-shadow .34s var(--soft);
}
.fab-btn:hover,.fab-btn:focus-visible,.fab[data-open] .fab-btn{
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.fab-btn:active{transform:scale(.96)}
.fab-btn .pl{width:16px;height:16px;fill:var(--ink);
  transition:transform .5s var(--soft)}
.fab[data-open] .fab-btn .pl{transform:rotate(45deg)}


/* الحاوية مغلقةً تبقى صندوقاً 105×48 فوق الزر: روابطها visibility:hidden
   لكنها هي نفسها تلتقط اللمس، فتحجب ما تحتها (رابط التذييل بالضبط) */
.fab-links{display:flex;gap:9px}
.fab[data-open] .fab-links{pointer-events:auto}
.fab-links a{
  display:grid;place-items:center;width:48px;height:48px;
  background:var(--white);color:var(--ink);text-decoration:none;
  box-shadow:0 14px 36px rgba(0,0,0,.44);
  -webkit-tap-highlight-color:transparent;
  opacity:0;visibility:hidden;
  transform:translate3d(0,10px,0) scale(.94);
  transition:opacity .24s var(--soft),transform .3s var(--soft),
             visibility 0s linear .3s,
             background-color .3s var(--soft),color .3s var(--soft);
}
.fab-links svg{width:18px;height:18px;fill:currentColor}
/* الفتح: الأقرب للزر أولاً، والإغلاق أسرع بتتابع معكوس */
.fab[data-open] .fab-links a{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .38s var(--soft),transform .52s var(--soft),
             visibility 0s,
             background-color .3s var(--soft),color .3s var(--soft);
}
.fab[data-open] .fab-links a:nth-child(1){transition-delay:.03s}
.fab[data-open] .fab-links a:nth-child(2){transition-delay:.1s}
.fab-links a:nth-child(2){transition-delay:0s}
.fab-links a:nth-child(1){transition-delay:.06s}
.fab-links a:hover,.fab-links a:focus-visible{background:var(--touch);color:var(--ink)}


/* ═══ الفوتر: بنية جازن (كتلة واحدة متمركزة) بهوية ستريت بار ═══ */
.site-foot{
  position:relative;overflow:hidden;
  padding-bottom:calc(var(--barH) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-2);
  background:linear-gradient(177deg,var(--wood-2),var(--wood));
}
.site-foot>*{position:relative}

.foot-in{
  display:grid;justify-items:center;text-align:center;
  gap:clamp(22px,4.2vh,34px);
  padding-block:clamp(46px,8vh,84px) clamp(24px,4vh,34px);
}
.foot-logo{display:grid;justify-items:center;gap:7px}
.foot-logo .en{font-size:clamp(1.35rem,5.6vw,1.95rem);font-weight:700;letter-spacing:.28em}
.foot-logo .sub{font-family:var(--head);font-size:.82rem;color:var(--dim)}

.foot-tag{font-family:var(--head);font-size:1.02rem;color:var(--white);opacity:.86}

.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(18px,5vw,34px)}
.foot-nav a{
  text-decoration:none;color:var(--dim);font-size:.95rem;
  transition:color .3s var(--soft);
}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--white)}

.foot-social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(20px,6vw,40px)}
.foot-social a{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--dim);font-size:.9rem;
  transition:color .3s var(--soft);
}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--white)}
.foot-social svg{width:17px;height:17px;flex-shrink:0;fill:currentColor}

.foot-by{
  width:100%;padding-top:clamp(20px,3.6vh,30px);
  border-top:1px solid var(--line-2);
  color:var(--dim);font-size:.86rem;direction:ltr;
}
.foot-by a{color:var(--white);text-decoration:none;font-weight:500}
.foot-by a:hover{color:var(--touch)}

/* الشريط السفلي أغمق درجة، مثل شريط جازن */
.foot-bar{
  background:rgba(0,0,0,.3);border-top:1px solid var(--line-2);
  text-align:center;padding-block:15px;
  color:var(--mute);font-size:.78rem;
}
.foot-bar .en{font-size:.78rem;letter-spacing:.1em}

/* ═══ شريط فئات المنيو: ثابت تحت الهيدر ═══ */
.cat-nav{
  position:sticky;top:var(--headH);z-index:50;
  background:var(--ink);border-bottom:1px solid var(--line-2);
  /* تلاشي عند الحافتين يوحي أن الشريط يُسحب */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
}
.cat-nav .track{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  padding-inline:var(--pad);scroll-behavior:smooth;
}
.cat-nav .track::-webkit-scrollbar{display:none}
.cat-nav a{
  flex:0 0 auto;text-decoration:none;white-space:nowrap;
  padding:14px 15px 12px;font-size:.9rem;color:var(--mute);
  border-bottom:2px solid transparent;
  transition:color .3s var(--soft),border-color .3s var(--soft);
}
.cat-nav a:first-child{padding-inline-start:0}
.cat-nav a[aria-current="true"]{color:var(--white);border-bottom-color:var(--touch)}
/* أخص من main section[id] وإلا غلبتها القاعدة العامة */
main section.menu-cat[id]{scroll-margin-top:calc(var(--headH) + 74px)}

/* ═══ صفحة المنيو ═══ */
.menu-top{padding-block:calc(var(--headH) + clamp(34px,7vh,74px)) clamp(12px,2vh,22px)}
.menu-top h1{font-family:var(--head);font-weight:700;line-height:1.35;
  font-size:clamp(2.2rem,9.6vw,3.6rem)}
.menu-top h1::after{content:"";display:block;width:40px;height:2px;background:var(--touch);margin-top:8px}
.menu-top .lede{color:var(--dim);margin-top:14px;max-width:44ch}
.menu-cat{padding-block:clamp(26px,4.6vh,50px)}
.menu-cat + .menu-cat{border-top:1px solid var(--line-2)}
.menu-end{padding-block:clamp(28px,5vh,54px)}

/* ═══ الظهور عند التمرير ═══ */
/* الظهور: يبدأ قبل ما يدخل النظر ويهدأ في آخره، فما يحس أحد بقفزة */
.reveal{opacity:0;transform:translate3d(0,14px,0);will-change:opacity,transform}
.reveal.in{
  opacity:1;transform:none;will-change:auto;
  transition:opacity 1.15s var(--soft),transform 1.15s var(--soft);
}

/* ═══ جوال صغير جداً: الاسم الإنجليزي الصغير يزاحم السعر ═══ */
@media (max-width:359px){
  .row .en{display:none}
}

/* الصف الذي فيه صورة يفقد 54px من عرضه، فيلتف اسمه العربي على سطرين
   ويصير أطول من جيرانه. الإنجليزي هو الأولى بالحذف هنا: الصورة تقول
   عن الصنف أكثر منه، والاسم العربي هو الذي يقرأه الزبون فعلاً. */
@media (max-width:560px){
  .row:has(.thumb) .en{display:none}
}

/* ═══ شاشة عريضة نسبياً (تابلت وجوال أفقي): عمودان قبل الديسكتوب ═══ */
@media (min-width:620px){
  .frames{overflow:visible;display:grid;grid-template-columns:repeat(2,1fr);
    gap:12px;max-width:820px;margin-inline:auto;padding-inline:var(--pad)}
  .visit-cols{display:grid;grid-template-columns:.9fr 1.1fr;
    gap:clamp(28px,4vw,60px);align-items:start}
  .map{margin-top:0}
  .map iframe{aspect-ratio:4/3}
  .cols{display:grid;grid-template-columns:1.05fr .95fr;
    gap:clamp(32px,4.6vw,70px);align-items:start}
  .intro-body{margin-top:6px}
}

/* قوائم الأسعار تنتظر عرضاً أوسع: أسماء الأصناف العربية طويلة
   وتلتف على سطرين لو ضاق العمود */
@media (min-width:770px){
  .two-col{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,4.4vw,60px)}
}

/* ═══ ارتفاع قصير (الجوال أفقياً): الهيرو ينكمش بدل ما يطلع برا الشاشة ═══ */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;
    padding-block:calc(var(--headH) + 16px) calc(var(--barH) + 30px)}
  .mark{font-size:min(14vh,11vw);gap:0}
  .hero-copy{margin-top:16px;gap:11px}
  .hero-copy p{font-size:.92rem}
  .btn{min-height:44px}
  .sec{padding-block:clamp(44px,10vh,80px)}
}

/* ═══ الديسكتوب ═══ */
@media (min-width:900px){
  .site-head .wrap{justify-content:space-between}
  .site-nav{display:flex;gap:clamp(18px,3vw,34px)}
  .site-nav a{text-decoration:none;font-size:.88rem;color:var(--dim);padding-block:6px;
    position:relative;transition:color .24s var(--ease)}
  .site-nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
    background:var(--touch);transform:scaleX(0);transform-origin:center;
    transition:transform .3s var(--ease)}
  .site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--white)}
  .site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
  .action-bar{display:none}
  .fab{bottom:26px}
  .hero-ctas{display:flex;gap:14px}
  .status{font-size:.8rem}
  /* الزوج يقرأ كوحدة واحدة لما يتساوى عرضه */
  .hero-ctas .btn{min-width:170px}
  .hero{padding-bottom:clamp(40px,8vh,90px)}
  .mark{font-size:clamp(4.6rem,12.4vw,11rem)}
  .intro-body{margin-top:6px}
  .frames{overflow:visible;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
    max-width:880px;margin-inline:auto;padding-inline:var(--pad)}
  .frame{flex:none}
  .map{margin-top:0}
  .map iframe{aspect-ratio:4/3}
  .cat-nav .track{max-width:var(--wrap);margin-inline:auto;overflow:visible;
    justify-content:flex-start;gap:clamp(8px,1.4vw,22px)}
  .site-foot{padding-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  body.intro-open .hero-copy>*,body.intro-done .hero-copy>*{animation:none}
  .btn,.action-bar a,.site-nav a::after{transition:none}
  .map.in .stars svg{animation:none;opacity:1;transform:none}
  .fab{opacity:1;transform:none}
  .action-bar{transform:none}
  .fab-links a,.fab-btn .pl{transition-duration:.01ms}
  .clock .cln{animation:none}
}