/* ═══════════════════════════════════════════════════════════
   EiGHT — ايـت · جيزان
   لبّ الهوية: «النظارة بطاقة الدخول»

   الفكرة المركزية مستخرجة من موادهم لا مخترعة: لوقوهم ليس حروفاً بل
   طاقم شخصيات يتغيّر فيه كل شيء إلا النظارة الحمراء، وهم يقولونها
   صراحة: «Put on heart-shaped sunglasses and come to Eight». فالنظارة
   شرط عضوية، وهذا بالضبط معنى EiGHT IS YOUR COFFEE MATE.

   ── الترتيب: الجوال أولاً ──
   كل قاعدة أساسية مكتوبة للجوال، والشاشات الأكبر تُضاف بـmin-width.
   الجمهور هنا يفتح من إنستقرام على جواله، فالجوال هو التصميم لا
   نسخته المصغَّرة.
   ═══════════════════════════════════════════════════════════ */

/* ─── الخطوط: مستضافة ذاتياً، بلا أي CDN ─── */
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-800-normal.woff2") format("woff2");font-weight:800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-900-normal.woff2") format("woff2");font-weight:900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-latin-900-normal.woff2") format("woff2");font-weight:900;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF}

:root{
  /* ═══ الاتجاه الثالث: أحمر أرضيةً ═══
     الدرجة الأصلية مأخوذة حرفياً من لقطة العميلة (#DA3848)، ثم غمّقتها
     العميلة على ثلاث دفعات، ثم طلبت الرجوع ثلاث درجات فرجعت لنفس درجة
     الدفعتين (٠٫٠٣٥ إنارة HSL لكل درجة، على الثلاثة توكنز معاً، فتبقى
     نسب التدرّج بين الأرضية وسطحها المرتفع وأعلى الهيرو كما كانت).
     الأبيض على الأرضية الحالية ٥٫٥٣:١، أعلى من الأصلية (٤٫٥٣:١) بفارق
     واضح لا أقل، لأن التغميق يزيد تباين الأبيض دائماً. فتبقى **كل نصّ
     هنا أبيض خالص بلا أي تخفيف**: أي درجة أفتح من الأرضية ودون الأبيض
     تسقط تحت المعيار. فالتراتب في هذي النسخة بالحجم والوزن لا باللون.

     وأكواب صورهم حمراء أيضاً، ونسبتها على هذي الأرضية ١٫١:١ أي أنها
     تذوب فيها. فلكل صورة صنف هالة داكنة دائرية بلا حدّ تحتها، تعطي
     الكوب أرضيةً يُقرأ عليها بلا أن تُرى مربّعاً أو إطاراً. */
  --k:#C92635;           /* الأرضية: أحمرهم مُغمّق دفعتين بطلب العميلة */
  --k-rgb:201,38,53;     /* نفسها أرقاماً، للتدرّجات الشفافة */
  --k-2:#AD2A36;         /* سطح مرتفع: بطاقة، مدخل */
  --k-3:#E11B2C;         /* أعلى الهيرو: الدرجة الأفتح، مُغمّقة بنفس النسبة.
                           الأبيض عليها ٤٫٧٨:١، فوق AA حتى للنصّ الصغير
                           الآن، وهي في الهيرو تحت عنوان كبير وأزرار
                           بيضاء فقط، ثم تنحدر إلى الأرضية قبل الفقرة. */
  --line:rgba(255,255,255,.24);
  --line-2:rgba(255,255,255,.40);

  --w:#FFFFFF;
  --w-2:#FFFFFF;        /* لا رمادي هنا: الأبيض وحده يجتاز على هذا الأحمر */

  --r:#FFFFFF;          /* الأكسنت على الأحمر أبيض، لا أحمر على أحمر */
  --r-btn:#FFFFFF;      /* تعبئة الزرّ الأول */
  --p:#F7AAB9;          /* الوردي: تعبئة مساحات لا نصوص صغيرة */
  --matcha:#B5CD6C;     /* لون منتج، للماتشا وحالة «مفتوح» وحدهما */

  /* نقطة الياء في الشعار: وردية بقرار العميلة، في الهيرو والتذييل
     معاً. وهي وردهم نفسه --p لا وردياً مجاوراً. */
  --dot:var(--p);

  --sans:"Tajawal",system-ui,sans-serif;
  --mono:"Plex",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* نظام الاستدارة واحد ومكتوب صراحةً:
     --edge حافة مربّعة تقريباً لكل ما يُضغط (أزرار، شرائح، حقول)،
     و--pill للدوائر الحقيقية وحدها (النقاط، الأيقونات المدوّرة).
     الكبسولة الكاملة في كل شيء تُقرأ تطبيقاً وديّاً، والحافة الحادّة
     تُقرأ تحريراً وفخامة، وهي المطلوبة هنا. */
  --edge:3px;
  --pill:999px;

  /* ── شخصية الموشن: «هادئة» ──
     الشخصية السابقة كانت «سنَب»: قصيرة بارتداد. والارتداد هو ما يجعل
     الواجهة تُقرأ مرحة، والمرح ضد المطلوب. فالمدد أطول والمنحنى ينتهي
     إلى سكون بلا تجاوز. وممنوع overshoot في أي حركة. */
  --t-tap:180ms;        /* ردّ فعل اللمس */
  --t-ui:320ms;         /* تغيّر حالة عنصر */
  --t-in:820ms;         /* دخول عنصر للمشهد */
  --ease:cubic-bezier(.33,.02,.13,1);     /* عام: بطيء البدء، ناعم النهاية */
  --out:cubic-bezier(.16,1,.3,1);         /* دخول: بلا تجاوز */
  --snap:var(--ease);                     /* اسم قديم، أُبقي لئلا ينكسر ما لم يُحدَّث بعد */

  --pad:20px;
  --hdr:60px;
  --gut:clamp(56px,11vw,132px);           /* الفراغ هو الزخرفة */
}

@media (min-width:700px){ :root{ --pad:34px; --hdr:62px } }
@media (min-width:1100px){ :root{ --pad:56px } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--k);color:var(--w);
  font-family:var(--sans);font-weight:500;line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ── قاعدة ثابتة: العربي لا يُكتب بخط لاتيني ولا تُباعَد حروفه ──
   Plex Mono بلا حرف عربي واحد، فأي عنصر عربي يحمله يسقط إلى خط النظام
   أحادي العرض فتنفكّ وصلات الكلمة وتصير حروفاً متجاورة لا كلمة.
   وletter-spacing يفكّها ولو كان الخط سليماً، لأن العربي خط متصل لا
   حروف منفصلة. فالمونو والتباعد يُقصران على ما هو معلَّم lang="en"
   أو dir="ltr" صراحةً، ولا يُكتبان على عنصر يحوي عربياً. */

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

:focus-visible{outline:3px solid var(--w);outline-offset:3px;border-radius:2px}
.on-k :focus-visible{outline-color:var(--p)}
::selection{background:var(--w);color:var(--k)}

main section[id]{scroll-margin-top:calc(var(--hdr) + 10px)}

.wrap{width:min(100% - var(--pad)*2,1180px);margin-inline:auto;min-width:0}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ═══ الووردمارك ═══
   SVG لا خط: اللوقو أصل ثابت يملكه العميل، ولا يجوز أن يعتمد ظهوره على
   تحميل ملف خط. مساراته مستخرَجة من ملف العميل الأصلي نفسه. */
.mark{display:block;width:100%;height:auto}
.mark svg{display:block;width:100%;height:auto}

/* ═══════════ الهيدر ═══════════ */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  height:var(--hdr);display:flex;align-items:center;
  background:color-mix(in srgb,var(--k) 76%,transparent);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease);
}
/* بعد التمرير يصير الهيدر معتماً تماماً لا شفافاً: على أرضية سوداء
   ينفذ الأبيض الساطع (شرائح الأقسام، حواف الصور) من خلف ٧٦٪ فيظهر
   شبحاً تحت روابط التنقل. */
.hdr[data-solid]{
  background:var(--k);border-bottom-color:var(--line);
  /* الهيدر معتم بعد التمرير، فالتمويه خلفه لا يُرى وهو أغلى ما في
     الصفحة رسماً: يُعاد ترشيح ما تحته في كل إطار تمرير، وعلى iOS يظهر
     أثر ذلك ارتعاشاً في الخطوط الرفيعة تحته. فيُطفأ حيث لا يُرى. */
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hdr .wrap{display:flex;align-items:center;gap:12px}
.hdr__mark{width:66px;flex:0 0 auto}
.nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav a{
  font-size:13px;font-weight:700;        /* عربي: تجوال بلا تباعد */
  padding:8px 10px;border-radius:var(--edge);
  transition:background var(--t-ui) var(--snap),color var(--t-ui) var(--snap);
}
.nav a{color:var(--w-2)}
@media (hover:hover){ .nav a:hover{color:var(--w)} }
.nav a:active{opacity:.6}
@media (min-width:700px){
  .hdr__mark{width:84px}
  .nav{gap:4px}
  .nav a{font-size:14px;padding:9px 13px}
}

/* ═══════════ الهيرو ═══════════
   الصورة تحمل المشهد، والتعتيم يُبنى بتدرّجين لا بطبقة واحدة: تدرّج من
   جهة النص ليُقرأ، وتدرّج من الأسفل ليذوب في الصفحة. الطبقة الواحدة
   تُطفئ الصورة كلها، وهذي تُبقي النيون والمخمل حيّين. */
.hero{
  position:relative;min-height:100svh;
  padding-block-start:var(--hdr);
  display:grid;grid-template-rows:1fr auto;
  overflow:clip;background:var(--k);
  isolation:isolate;
}

/* ── الأرضية ──
   كانت جداراً مضاءً بلافتة نيون، والمطلوب الآن فخامة هادئة لا ضوء
   ملوّن. فصارت ثلاث طبقات صامتة: ارتفاع خفيف في الأعلى يمنع السطح
   من أن يكون أسود ميتاً، وأثر أحمر واحد في زاوية البداية هو كل ظهور
   اللون، وحبيبات دقيقة تكسر نعومة التدرّج. */
.hero__wall{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 40% at 8% 88%, rgba(237,30,66,.10) 0%, transparent 72%),
    radial-gradient(130% 78% at 50% 0%, var(--k-3) 0%, var(--k) 60%);
}
.hero__wall::after{
  content:"";position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* آخر الهيرو يذوب في القسم التالي فلا يُقطع بخط */
.hero::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:34%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--k) 0%,rgba(var(--k-rgb),0) 100%);
}

/* النص محاذٍ للبداية لا في الوسط: التوسيط متناظر ومتوقّع، والمحاذاة
   تعطي المشهد اتجاهاً وتترك الفراغ يتنفّس في الجهة الأخرى. */
.hero__in{
  position:relative;display:grid;align-content:end;
  justify-items:center;text-align:center;
  padding-inline:clamp(24px,5vw,40px);
  padding-block:clamp(20px,6vh,60px) clamp(26px,5vh,54px);
}
/* عمودان أحمران على طرفَي الكتلة، يمتدّان الهيرو ويذوبان في أعلاه.
   كان عموداً واحداً عند جهة البداية، والكتلة تحاذيه. ولمّا طلبت
   العميلة التوسيط لم يعد العمود الواحد يصلح: خطٌّ في جهة وكتلةٌ في
   المنتصف يكسران التناظر المطلوب. فتضاعف متناظراً وصار إطاراً
   لا حافة، وبقي اللون بارزاً كما كان. */
.hero__in::before,
.hero__in::after{
  content:"";position:absolute;inset-block:0;width:2px;
  background:linear-gradient(to top,var(--r) 0%,rgba(237,30,66,.5) 46%,rgba(237,30,66,0) 92%);
  transform-origin:50% 100%;   /* ينموان من أسفلهما لأنهما يقومان من قاعدة الصفحة */
}
.hero__in::before{inset-inline-start:0}
.hero__in::after{inset-inline-end:0}

/* ── الاسم ──
   بلا وهج ولا هالة ولا خطّ فوقه. أبيض نظيف على أسود، والفخامة من
   الفراغ حوله لا من شيء يُضاف إليه. واللون يبقى في عمود الهيرو
   وفي خطوط عناوين الأقسام. */
.hero__mark{width:min(100%,clamp(196px,40vw,330px));overflow:hidden}
.hero__sub{
  display:block;font-family:var(--mono);font-size:clamp(9.5px,2.4vw,11px);
  font-weight:500;letter-spacing:.52em;color:var(--w-2);
  margin-block-start:clamp(12px,2vh,18px);
  padding-inline-start:2px;
}
.hero__line{
  font-size:clamp(15px,3.9vw,19px);font-weight:500;line-height:1.65;
  color:var(--w-2);max-width:26ch;margin-inline:auto;
  margin-block-start:clamp(22px,3.6vh,32px);
}

/* ═══════════ الأزرار ═══════════
   هنا يُقرأ «فخم» أو لا يُقرأ. القاعدة: شكل واحد، وحدّ شعرة، وحشو واسع،
   ولمعة تمرّ مرة عند اللمس أو المرور كأن ضوء النيون مسّ الحافة. */
/* ═══════════ الأزرار ═══════════
   بطل الصفحة صورةُ فرعهم واللافتة النيون فيها. فالزر الأساسي مصنوع
   على مثالها: أحمرٌ يضيء من داخله، حافة عليا لامعة كأنبوب النيون،
   وهالة تحته لا حول النص. والثانوي زجاج ضبابي فوق الصورة لا إطار
   مفرّغ، لأن الإطار المفرّغ فوق صورة داكنة يختفي.

   وعلى الجوال يتساوى عرضهما: زران متفاوتا العرض متجاوران يقرآن
   مصادفةً، وتساويهما يقرأ قراراً. */
.cta{
  display:flex;flex-direction:column;align-items:stretch;
  gap:11px;margin-block-start:clamp(26px,4.4vh,40px);
  width:max-content;max-width:100%;
}
@media (min-width:560px){ .cta{flex-direction:row;flex-wrap:wrap;align-items:center} }
/* في الهيرو وحده تُوسَّط الكتلة: أزرار الأقسام السفلى تبقى محاذية */
.hero .cta{margin-inline:auto;justify-content:center}

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;
  padding:17px 30px;border-radius:var(--edge);
  font-weight:700;font-size:14.5px;line-height:1;white-space:nowrap;
  border:1px solid transparent;
  transition:box-shadow 420ms var(--ease),background 420ms var(--ease),
             border-color 420ms var(--ease),color 420ms var(--ease);
}
/* شريحة ضوء خافتة تعبر الزر مرة عند اللمس، كأن حافة معدن مرّت تحت
   ضوء. لا تتكرر ولا تومض، وشفافيتها خفضت مع الاتجاه الجديد. */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.18) 50%,transparent 64%);
  translate:-130% 0;
}
.btn:hover::after,.btn:focus-visible::after{translate:130% 0;transition:translate 760ms var(--ease)}

/* الأساسي: أحمرهم مصمتاً بلا توهّج.
   والتعبئة ‎#DC1739‎ لا ‎#ED1E42‎: الأبيض على أحمرهم يعطي ٤٫٣ وهو دون
   حدّ AA للنص العادي، وهذه الدرجة تعطي ٥٫٠ وتُقرأ العينُ الأحمرَ
   نفسه. والأكسنت في بقية الصفحة يبقى ‎#ED1E42‎ لأنه خطوط ورموز لا نص. */
.btn--red{
  color:var(--k);background:var(--r-btn);border-color:var(--r-btn);
  box-shadow:none;
}
.btn--red:hover,.btn--red:focus-visible{
  background:var(--p);border-color:var(--p);color:var(--k);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55);
}
/* المربّع الصغير هو نقطة الياء في شعارهم، تُستعمل علامةً داخل الزر */
.btn__dot{width:7px;height:11px;flex:0 0 auto;background:var(--k)}
.btn__t{flex:1 1 auto}
/* الفاصل بين الاسمين أخفت منهما: هو علامة فصل لا كلمة ثالثة، ولو ساواهما
   قُرئ الزرّ ثلاث كلمات. والهامش على الجهتين المنطقيتين فيصلح في الاتجاهين. */
.btn__sep{opacity:.42;margin-inline:7px;font-weight:500}
.btn__go{width:15px;height:15px;flex:0 0 auto;transition:translate 420ms var(--ease)}
.btn--red:hover .btn__go{translate:-4px 0}

/* الثانوي: زجاج. فوق صورة داكنة يبقى مقروءاً بلا أن ينافس الأحمر. */
.btn--line{
  color:var(--w);
  background:color-mix(in srgb,var(--w) 7%,transparent);
  border-color:color-mix(in srgb,var(--w) 22%,transparent);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.btn--line:hover,.btn--line:focus-visible{
  background:var(--w);color:var(--k);border-color:var(--w);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
}
.btn:active{transform:scale(.985)}

/* ── بطاقة الولاء ──
   جسمٌ لا رابط: مستطيل بنسبة البطاقة البنكية ١٫٥٨٦، عليه شعارهم وحافة
   حمراء. يُعرف بطاقةً قبل قراءة كلمة، ويميل قليلاً عند اللمس كأنه
   يُسحب من محفظة.

   واستدارته ٦ بكسل لا ٣: نظام الحواف في الصفحة للأزرار والشرائح، وهذا
   ليس عنصر واجهة بل تمثيلٌ لشيء مادي، والبطاقات المادية أكثر استدارة
   من الأزرار. الاستثناء مقصود ومكتوب. */
.loycard{
  position:relative;overflow:hidden;margin-inline:auto;
  display:flex;flex-direction:column;justify-content:space-between;
  width:min(100%,clamp(206px,54vw,238px));aspect-ratio:1.586;
  margin-block-start:clamp(20px,3.2vh,30px);
  padding:clamp(13px,3.4vw,16px) clamp(15px,3.8vw,18px);
  background:linear-gradient(150deg,var(--k) 0%,var(--k-2) 62%);
  border:1px solid var(--line-2);border-radius:6px;
  transition:transform 520ms var(--out),border-color var(--t-ui) var(--ease);
}
/* الحافة الحمراء عند جهة البداية: هي شريط البطاقة لا خطّ زينة */
.loycard::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:5px;background:var(--r);
}
.loycard__wm{width:clamp(56px,15vw,66px)}
.loycard__f{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.loycard__t{font-size:clamp(12.5px,3.4vw,13.5px);font-weight:700;color:var(--w)}
.loycard__l{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--w-2);
  opacity:.7;
}
@media (hover:hover){
  .loycard:hover{transform:rotate(-1.6deg) translateY(-5px);border-color:var(--line-2)}
}
.loycard:active{transform:rotate(-1deg) translateY(-2px);transition-duration:var(--t-tap)}
.loycard:focus-visible{outline-color:var(--p);outline-offset:4px}

/* شاشة قصيرة (٦٤٠ بكسل وأقلّ): البطاقة تضيف مئةً وثلاثين بكسلاً إلى
   هيرو يجب أن يدخل الشاشة كاملاً. فتصغر هي وتضيق المسافات حولها،
   ويبقى شريط الحالة ظاهراً بلا تمرير. */
@media (max-height:720px){
  .loycard{width:min(100%,178px);margin-block-start:14px}
  .hero__line{margin-block-start:16px}
  .cta{margin-block-start:16px}
  .hero__sub{margin-block-start:10px}
}

/* على الشاشة العريضة كانت الكتلة مقاساً جوالياً في إطار كبير: الاسم
   ٣٣٠ بكسل في ١٤٤٠، أي اثنان وعشرون بالمئة من العرض. الفراغ فخامة
   ما دامت الكتلة نفسها بحجم الإطار، فإذا صغرت صار الفراغ خواءً. */
@media (min-width:1080px){
  .hero__in{padding-inline:clamp(40px,6vw,88px)}
  .hero__mark{width:min(100%,430px)}
  .hero__sub{font-size:12px;letter-spacing:.56em}
  .hero__line{font-size:21px;max-width:34ch}
  .loycard{width:268px}
  .btn{padding:19px 34px;font-size:15px}
}
/* لابتوب عريض قصير (١٢٨٠×٨٠٠ مثلاً): العرض يستدعي المقاس الكبير
   والارتفاع لا يتّسع له. فيُشترط الارتفاع مع العرض، وإلا خرج الهيرو
   عن الشاشة على أشيع مقاس لابتوب. */
@media (min-width:1080px) and (max-height:860px){
  .hero__mark{width:min(100%,364px)}
  .hero__line{font-size:19px}
  .loycard{width:238px}
  .btn{padding:17px 30px;font-size:14.5px}
}
/* وأقصر منه (١٣٦٦×٧٦٨ وما دونه): تُقلَّص المسافات أيضاً لا المقاسات
   وحدها، فخمسة بكسلات كانت تفصلنا عن حافة الشاشة. */
@media (min-width:1080px) and (max-height:790px){
  .hero__mark{width:min(100%,326px)}
  .hero__in{padding-block:clamp(16px,3.6vh,34px) clamp(20px,3.4vh,34px)}
  .hero__line{margin-block-start:18px}
  .cta{margin-block-start:18px}
  .loycard{margin-block-start:16px}
}

.hero__aside{
  margin-block-start:clamp(18px,3vh,26px);
  font-size:13px;color:var(--w-2);
  border-block-end:1px solid var(--line-2);padding-block-end:3px;
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.hero__aside:hover{color:var(--w);border-color:var(--w)}

/* شريط الحالة: مواعيدهم ليست «يومياً» — الجمعة تفتح ٤ عصراً والخميس
   يمتد إلى ٣ فجراً. */
.status{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:9px;flex-wrap:wrap;
  padding-block:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--w-2);
}
.status__dot{width:6px;height:6px;border-radius:var(--pill);background:var(--w-2);flex:0 0 auto}
.status__dot[data-open]{background:var(--matcha)}
.status b{font-weight:700;color:var(--w)}
.status .sep{opacity:.32}
.status__loc{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em}
@media (max-width:560px){ .status__loc{display:none} }

/* ═══════════ الأقسام ═══════════ */
/* خطّ شعرة يعلو كل قسم: الأقسام بلا فاصل تُقرأ تدفّقاً واحداً،
   وبالفاصل تُقرأ كتلاً منشورة. وهو أرخص أداة إيقاع في التحرير. */
.sec{padding-block:var(--gut);position:relative}
.sec + .sec{border-block-start:1px solid var(--line)}
/* الخطّ الأحمر القصير نفسه الذي فوق الاسم في الهيرو يعلو كل عنوان
   قسم: لمسة واحدة متكرّرة بانضباط تربط الصفحة، وهي كل ما يحتاجه
   اللون بعد أن ذهب النيون. */
/* العناوين تتبع محور الهيرو بعد توسيطه: صفحةٌ نصفها موسَّط ونصفها
   محاذٍ للجهة تُقرأ ترقيعاً. والنصوص الطويلة تبقى في أقسامها كما هي،
   فالتوسيط للعناوين القصيرة لا لفقرات تُقرأ سطراً بعد سطر. */
.sec__head{
  position:relative;max-width:34ch;margin-inline:auto;text-align:center;
  padding-block-start:clamp(16px,2.4vw,22px);
  margin-block-end:clamp(26px,5vw,44px);
}
.sec__head .lede{margin-inline:auto}
.h2{
  font-size:clamp(26px,6.6vw,52px);font-weight:900;line-height:1.18;
  text-wrap:balance;
}
.lede{
  font-size:clamp(14.5px,3.6vw,17px);line-height:1.7;color:var(--w-2);
  max-width:44ch;margin-block-start:14px;
}

/* align-items:start لا stretch: الشبكة تمطّ الأشكال لأطولها، والصورة
   بنسبة ثابتة تقصر عن صندوقها الممطوط فيظهر فراغ أسود تحتها. ومطّ
   الصورة نفسها يسدّ الفراغ لكنه يقصّ ثلث عرضها فيقطع الكتابة على
   قمصانهم ولافتاتهم، وهي كل قيمة هذي الصور. فالحل ألّا تُمطّ أصلاً:
   ارتفاعات متفاوتة، وهي أصلاً الفكرة في شكل غير متناظر. */
.pair{display:grid;align-items:start;gap:clamp(10px,1.6vw,18px);grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){ .pair{grid-template-columns:1.28fr 1fr 1fr} }
.shot{position:relative;overflow:hidden;background:var(--k-2)}
.shot img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:scale 900ms var(--ease);
}
@media (hover:hover){ .shot:hover img{scale:1.035} }
.shot--tall{grid-column:span 2}
/* لكل صورة كلمة تُقرأ: يُمال القصّ ناحيتها لا للمركز الأعمى. */
.shot--door img{object-position:46% 50%}
.shot--vibe img{object-position:22% 50%}
.shot--brew img{object-position:50% 42%}
/* 4/5.6 كان يقصّ 14% من عرض الصورة الطويلة فيقطع طرفَي الكتابة على
   الواجهة. 4/5.15 يبقي 92% ويحافظ على تفاوت الارتفاعات. */
@media (min-width:820px){ .shot--tall{grid-column:auto} .shot--tall img{aspect-ratio:4/5.15} }

/* ── الموقع ── */
.find__grid{display:grid;gap:clamp(26px,4vw,46px)}
@media (min-width:840px){ .find__grid{grid-template-columns:1fr 1.02fr;align-items:center} }
.live{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-block:clamp(20px,3vw,28px) 0;padding:11px 18px;
  border-radius:var(--edge);border:1px solid var(--line-2);background:var(--k-2);
  font-size:13.5px;color:var(--w-2);
}
.live b{font-weight:700;color:var(--w)}
.live__dot{width:7px;height:7px;border-radius:var(--pill);background:var(--w-2);flex:0 0 auto}
.live__dot[data-open]{background:var(--matcha)}
.find .cta{margin-block-start:clamp(20px,3vw,28px)}
.find__more{display:inline-block;margin-block-start:clamp(18px,2.6vw,24px)}
.map{
  display:block;width:100%;aspect-ratio:4/3.4;border:1px solid var(--line-2);
  background:var(--k-2);
  /* كان الإطار يُقلب ليصير داكناً لأن الصفحة كانت سوداء. والصفحة الآن
     حمراء فاتحة، والخريطة الداكنة تصير ثقباً أسود فيها. فبقيت بألوانها
     الفاتحة كالبطاقات والأزرار البيضاء، مع خفض تشبّع يسير فلا ينافس
     أخضرها وأزرقها أحمر الصفحة. */
  filter:saturate(.72) contrast(1.04) brightness(1.02);
}
@media (min-width:840px){ .map{aspect-ratio:1/1} }

/* ── قائمة الأصناف ──
   شبكةُ بطاقاتٍ لكل صنف تعني ستاً وعشرين صورةً بديلة متطابقة تتكرر
   على طول الصفحة، وهي بالضبط ما اعترضت عليه العميلة. فالمنيو هنا
   قائمة طباعية كما تُطبع منيوهات المطاعم الراقية: اسم، ثم خط رفيع
   يقود العين، ثم سعر. لا صندوق فارغ ينتظر صورة.

   والصورة حين تصل تدخل ثمبنيلاً صغيراً في أول السطر، فتزيد القائمة
   ولا تُعيد تشكيلها. أي أن التصميم لا يعتمد على مادة لم تصل بعد. */
.mlist{list-style:none}
/* عمودان بـcolumns لا بـgrid: الشبكة تملأ صفاً صفاً فيقرأ الزائر
   يميناً ثم يساراً ثم يعود، وهو ترتيب لا يشبه قراءة قائمة أسعار.
   وcolumns يملأ العمود الأول إلى آخره ثم الثاني، فتُقرأ كما تُقرأ
   المنيوهات المطبوعة، ويوازن الطولين وحده. */
@media (min-width:900px){
  .mlist{columns:2;column-gap:clamp(44px,5.5vw,84px)}
  .item{break-inside:avoid}
}
/* المقاسات هنا أعداد صحيحة لا clamp بوحدات vw: ارتفاع الصفّ الكسري
   يضع خطّه السفلي على نصف بكسل، فيرتعش عند التمرير على الشاشات عالية
   الكثافة، يظهر ويختفي مع تغيّر تقريب الموضع. */
.item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding-block:14px;
  border-block-end:1px solid var(--line);
}
/* مربّع الأكسنت لا يزيح النص: يسكن الهامش ويظهر عند التصويب فقط،
   فالسطر ساكن حتى تلمسه. */
.item::before{
  content:"";position:absolute;inset-inline-start:-16px;inset-block-start:50%;
  width:5px;height:12px;background:var(--acc,var(--r));
  margin-block-start:-6px;opacity:0;
  transition:opacity var(--t-ui) var(--ease);
}
/* ٩٢ إلى ١٢٠: الصورة هنا هي ما يقرّر الطلب لا الاسم، فتُعطى حجماً
   يُرى فيه الصنف لا حجماً يُلمَح فيه. والصفّ يعلو معها فيتنفّس المنيو
   بدل أن يُحشر. */
.item__t{
  width:100px;aspect-ratio:1/1;flex:0 0 auto;
  display:block;padding:0;background:none;border:0;
  transition:transform var(--t-tap) var(--snap);
}
@media (min-width:480px){ .item__t{width:112px} }
@media (min-width:900px){ .item__t{width:120px} }
/* الصور مفرَّغة الخلفية، فلا إطار ولا مربّع تحتها: يطفو الصنف على
   الأرضية مباشرة. وcontain لا cover لأن الحواف الشفافة جزء من الصورة،
   وقصّها يقصّ الصنف نفسه. */
.item__t img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:scale var(--t-ui) var(--ease);
}
@media (hover:hover){ .item__t:hover img{scale:1.05} }
.item__t:active{transform:scale(.96)}
.item__t:focus-visible{outline-color:var(--p);outline-offset:3px}
/* صفّ الصورة أوسع حشواً من صفّ النص: الصورة تحتاج هواءً حولها،
   وتساوي الحشوين يجعل الصور متلاصقة والأسماء سابحة. */
.item--img{padding-block:11px}
@media (min-width:900px){
  .item{padding-block:17px}
  .item--img{padding-block:13px}
}
.item__n{
  font-weight:700;font-size:clamp(15px,4vw,17px);line-height:1.35;
  min-width:0;flex:0 1 auto;
}
/* ── بادج الفرع ──
   بعض الأصناف في فرع واحد، فتُوسم عند الصنف نفسه. الأغلبية بلا بادج
   عمداً: لو وُسم كل صنف صار الوسم خلفيةً لا معلومة.

   ولا letter-spacing عليه لأن نصّه عربي، والتباعد يفكّ وصل الحروف.
   والمربّع الصغير هو نفس مربّع الأكسنت في بقية الموقع، لا شكل جديد. */
.item__b{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px 5px;
  font-size:clamp(9.5px,2.5vw,10.5px);font-weight:700;line-height:1;
  white-space:nowrap;
  color:var(--bdg,var(--r));
  border:1px solid color-mix(in srgb,var(--bdg,var(--r)) 40%,transparent);
  background:color-mix(in srgb,var(--bdg,var(--r)) 9%,transparent);
}
.item__b::before{
  content:"";flex:none;width:4px;height:4px;background:currentColor;
}
.item__b--samtah{--bdg:var(--p)}
/* على الشاشة الضيقة ينزل البادج سطراً تحته بدل أن يخنق الخط القائد
   أو يزحم السعر. وكسر السطر بعنصر وهمي بعرض كامل وارتفاع صفر، لا
   بـflex-basis على البادج نفسه، وإلا تمدّد إطاره على عرض الصفّ. */
@media (max-width:479px){
  .item--b{flex-wrap:wrap}
  .item--b::after{content:"";flex:0 0 100%;height:0;order:2}
  .item--b .item__b{order:3;margin-block-start:9px}
}

/* الخط القائد: يملأ ما بين الاسم والسعر مهما طال الاسم أو قصر،
   فتصطف الأسعار على عمود واحد بلا جدول. */
.item__l{
  flex:1 1 24px;min-width:18px;height:1px;
  background:repeating-linear-gradient(to left,
    color-mix(in srgb,var(--w) 17%,transparent) 0 2px, transparent 2px 7px);
  /* إزاحة بالموضع لا بـtranslate: التحويل على عنصر بارتفاع بكسل واحد
     يجعله طبقة مستقلة تُعاد رسمتها عند كل إطار تمرير، فترتعش نقاطه.
     والنقطة صارت بكسلين لا بكسلاً ونصفاً فلا يمحوها التقريب. */
  position:relative;inset-block-start:4px;
  transition:background var(--t-ui) var(--ease);
}
.item__p{
  flex:0 0 auto;display:flex;align-items:center;gap:3px;
  font-family:var(--mono);font-weight:600;font-size:clamp(14px,3.7vw,16px);
  color:var(--w);font-variant-numeric:tabular-nums;
}
.item__p .sar{opacity:.62}
@media (hover:hover){
  .item:hover::before{opacity:1}
  .item:hover .item__l{
    background:repeating-linear-gradient(to left,
      color-mix(in srgb,var(--acc,var(--r)) 78%,transparent) 0 2px, transparent 2px 7px);
  }
}
.sar{width:.72em;height:.86em;fill:currentColor;flex:0 0 auto}

/* ── نافذة أوقات الدوام ──
   سبعة صفوف مفتوحة تزاحم العنوان، والزائر يريد جواباً واحداً لا جدولاً.
   فالجدول خلف زر، ويبقى في الـDOM كاملاً لمحركات البحث وقارئ الشاشة. */
.hdlg{
  border:0;padding:0;background:none;color:var(--w);
  width:min(92vw,420px);max-width:none;margin:auto;
}
.hdlg::backdrop{background:rgba(var(--k-rgb),.86);backdrop-filter:blur(6px)}
.hdlg__in{background:var(--k-2);border:1px solid var(--line-2);border-radius:18px;padding:22px 22px 18px}
.hdlg__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:10px}
.hdlg__h h2{font-size:19px;font-weight:900}
.hdlg__b{font-size:13px;color:var(--w-2);margin-block-end:12px}
.hdlg__x{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:var(--edge);border:1px solid var(--line-2);color:var(--w-2);
  transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease);
}
.hdlg__x:hover{background:var(--w);color:var(--k)}
.hdlg__x svg{width:15px;height:15px}
.hdlg :focus-visible{outline-color:var(--r)}

.hours{width:100%;border-collapse:collapse;font-size:14px}
.hours th,.hours td{padding:12px 2px;text-align:start;border-bottom:1px solid var(--line)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours th{font-weight:600;width:46%;color:var(--w-2)}
.hours td{font-family:var(--mono);font-size:12px;color:var(--w-2)}
.hours tr[data-today] th{font-weight:900;color:var(--w)}
.hours tr[data-today] td{color:var(--r)}

/* ═══════════ التذييل ═══════════ */
/* صفحة المنيو على الأسود: نصوصها صغيرة وكثيرة، ومنيوهم المطبوع أسود */
body.on-k{background:var(--k)}

/* هامش سفلي أوسع على الجوال: الزر العائم يجلس عند تلك الزاوية،
   فلا يقف فوق سطر الحقوق. وعلى الشاشة العريضة السطر في الوسط
   بعيداً عن الزر، فيعود الهامش لطبيعته. */
.ftr{
  background:var(--k);color:var(--w);
  padding-block:clamp(44px,7vw,80px) 84px;
  border-block-start:1px solid var(--line);
}
@media (min-width:700px){ .ftr{padding-block-end:clamp(22px,3.4vw,32px)} }

/* النص كله في الوسط، والشعار وحده يبقى في مكانه عند بداية السطر.
   لا يلزم استثناؤه صراحةً: هو كتلة بعرض ثابت، وtext-align لا يزحزح
   الكتل. فيقرأ الزائر عموداً متوازناً معلَّماً بشعارهم من طرفه. */
.ftr__top{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(14px,2.6vw,20px);text-align:center;
}
@media (min-width:700px){
  .ftr__top{
    flex-direction:row;justify-content:space-between;align-items:center;
    gap:26px;text-align:start;
  }
}
.ftr__mark{width:clamp(132px,26vw,168px)}
.ftr__tag{
  margin-block-start:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;opacity:.65;
}
.ftr__soc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
@media (min-width:700px){ .ftr__soc{justify-content:flex-end} }
.ftr__soc a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1.5px solid color-mix(in srgb,var(--w) 30%,transparent);border-radius:var(--edge);
  font-family:var(--mono);font-size:12px;font-weight:600;
  transition:background var(--t-ui) var(--snap),color var(--t-ui) var(--snap),
             border-color var(--t-ui) var(--snap),transform var(--t-tap) var(--snap);
}
.ftr__soc a svg{width:16px;height:16px;flex:0 0 auto}
.ftr__soc a:hover{background:var(--w);color:var(--k);border-color:var(--w)}
.ftr__soc a:active{transform:scale(.96)}

.ftr__base{
  margin-block-start:clamp(20px,3.4vw,32px);padding-block-start:16px;
  border-top:1px solid color-mix(in srgb,var(--w) 16%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;font-size:12.5px;opacity:.65;
}
@media (min-width:700px){
  .ftr__base{flex-direction:row;gap:14px}
  .ftr__base span+span::before{content:"·";margin-inline-end:14px;opacity:.5}
}
.ftr__base a{text-decoration:underline;text-underline-offset:3px}
.ftr__base a:hover{color:var(--p)}

/* ═══════════ الزر العائم للحسابات ═══════════
   الجمهور هنا يصل من إنستقرام وسناب ويرجع إليهما، فالحسابات لا تُدفن
   في التذييل. والزر عند الحافة السفلى الأمامية: بعيد عن أزرار الهيرو
   وعن شريط أقسام المنيو الملتصق، وفي متناول الإبهام على الجوال. */
/* ── لسان الحسابات ──
   في الزاوية السفلى كان يقع فوق أول كلمة من شريط حالة الدوام في
   الهيرو، وهي أول ما تُقرأ. وهو هنا لسانٌ ملتصق بحافة الشاشة في
   منتصفها كما طُلب: لا يزاحم شيئاً، ويبقى في المدى مهما طال التمرير.
   والأيقونتان تخرجان منه إلى الداخل لا إلى الأعلى. */
.fab{
  position:fixed;z-index:70;
  /* ارتفاع الزر نفسه ٧٦، فنصفه ٣٨: بهذا يبقى مركز اللسان في منتصف
     الشاشة ولا يقفز حين تفتح الأيقونات تحته. */
  /* على اليسار بطلب يوسف. وinset-inline-end في صفحة RTL هي اليسار،
     فيبقى الوصف منطقياً لو صار للموقع نسخة LTR يوماً. */
  inset-inline-end:0;inset-block-start:calc(50% - 38px);
  width:34px;
}
.fab__btn{
  position:relative;width:34px;height:76px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--k-2);color:var(--w);
  border:1px solid var(--line-2);border-inline-end:0;
  border-start-start-radius:16px;border-end-start-radius:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  transition:transform var(--t-tap) var(--snap),background var(--t-ui) var(--snap),
             color var(--t-ui) var(--snap),width var(--t-ui) var(--snap);
}
.fab__btn:active{transform:scale(.94)}
.fab[data-open] .fab__btn{background:var(--w);border-color:var(--w);color:var(--k)}
.fab__ico{position:absolute;display:grid;place-items:center;width:22px;height:22px;
  transition:opacity var(--t-ui) var(--snap),transform var(--t-ui) var(--snap)}
.fab__ico svg{width:100%;height:auto}
/* «تابعنا» رأسيةً: writing-mode لا rotate، فالتدوير يترك مربّع العنصر
   أفقياً فيقصّ الكلمة أو يزيح مركزها. ولا letter-spacing لأن النصّ
   عربي والتباعد يفكّ وصل الحروف. */
.fab__ico--a{
  width:auto;height:auto;
  writing-mode:vertical-rl;white-space:nowrap;
  font:700 14px/1 var(--sans);
}
.fab__ico--b{opacity:0;transform:rotate(-90deg) scale(.7)}
.fab[data-open] .fab__ico--a{opacity:0;transform:rotate(90deg) scale(.7)}
.fab[data-open] .fab__ico--b{opacity:1;transform:none}

/* الأيقونات تنزل تحت اللسان لا إلى داخل الصفحة: الفتح إلى الداخل كان
   يمرّ فوق الشعار في الهيرو، وهو آخر ما يُغطّى. */
.fab__list{
  position:absolute;inset-block-start:calc(100% + 9px);inset-inline-end:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  opacity:0;visibility:hidden;   /* visibility تُخرجه من ترتيب التركيز أيضاً */
  translate:0 -12px;
  transition:opacity var(--t-ui) var(--snap),translate var(--t-ui) var(--snap),
             visibility 0s linear var(--t-ui);
}
.fab[data-open] .fab__list{
  opacity:1;visibility:visible;translate:0 0;
  transition:opacity var(--t-ui) var(--snap),translate var(--t-ui) var(--snap),
             visibility 0s;
}
/* أيقونات فقط بلا معرّفات مكتوبة، والمعرّف يبقى في نص مخفي لقارئ
   الشاشة: فما نقص عن العين لا ينقص عن الوصولية. */
.fab__item{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:var(--pill);margin-inline-end:6px;
  background:var(--k-2);color:var(--w);
  border:1px solid var(--line-2);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:transform var(--t-tap) var(--snap),background var(--t-ui) var(--snap),
             color var(--t-ui) var(--snap);
}
.fab__item svg{width:20px;height:20px;flex:0 0 auto}
@media (hover:hover){
  .fab__item:hover{background:var(--w);border-color:var(--w);color:var(--k)}
  .fab__btn:hover{width:40px}
}
.fab__item:active{transform:scale(.97)}
.fab :focus-visible{outline-color:var(--p);outline-offset:4px}

/* ── شريط الجو ──
   صورتان بتعريض طويل هما المادة الوحيدة عندهم فيها حركة، فتُستعملان
   جوّاً لا معلومة: عريضتان من حافة لحافة، بلا نص، وحوافهما تذوب في
   السواد فتُقرأ سكتةً بين قسمين لا قسماً ثالثاً. */
.drift{position:relative;overflow:hidden;background:var(--k-2);aspect-ratio:4/3}
@media (min-width:760px){ .drift{aspect-ratio:21/8} }
.drift img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.drift::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--k) 0%,rgba(var(--k-rgb),0) 22%,rgba(var(--k-rgb),0) 74%,var(--k) 100%);
}

/* رأس المنيو يقف على صورة التقطير: الـV60 أول صنف في منيوهم بـ16
   ريال، فالصورة إثبات لما تحتها لا زينة. والضبابية تضمن أنها لا
   تزاحم قائمة الأسعار. */
.mhead--pic{
  padding-block:calc(var(--hdr) + clamp(64px,17vw,148px)) clamp(30px,5vw,56px);
  overflow:hidden;
}
/* الصورة تملأ صندوق الرأس بالضبط لا أطول منه، وإلا غطّت أول عنوان
   قسم تحتها لأنها عنصر مموضع يُرسم فوق العادي. */
.mhead__fig{position:absolute;inset:0;margin:0;background:var(--k-2)}
.mhead--pic .wrap{z-index:1}
.mhead__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.mhead__fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(var(--k-rgb),.78) 0%,rgba(var(--k-rgb),.38) 40%,rgba(var(--k-rgb),.9) 86%,var(--k) 100%);
}

/* قسم المكان بلا عنوان بعد حذفه، فبداية حشوه تُقلَّل: فراغُ عنوانٍ
   غير موجود يُقرأ خطأً لا سعةً. */
.place{padding-block-start:calc(var(--gut) * .62)}

/* ── التقييم ──
   نجمة واحدة ورقم، لا خمس نجوم مملوءة جزئياً: خمس نجوم تحتاج قراءةً
   لتُفهم، والرقم يُفهم بلمحة. والمصدر مذكور لأنه ليس تقييمنا. */
.rate{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--w-2)}
.rate__s{display:grid;place-items:center;width:15px;height:15px;flex:0 0 auto;color:#F2C14E}
.rate__s svg{width:100%;height:auto}
.rate b{font-weight:800;color:var(--w);font-size:15px;font-family:var(--mono)}
.rate--na .rate__s{color:var(--line-2)}
.rate--na b{color:var(--w-2);font-size:13px;font-weight:600;font-family:inherit}

/* ── شبكة الفرعين في الرئيسية ── */
.bgrid{display:grid;gap:clamp(2px,1vw,10px)}
@media (min-width:820px){ .bgrid{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px)} }
.bgrid .branch{align-content:start}
@media (min-width:820px){
  .bgrid .branch{grid-template-columns:1fr;padding-block:0;border-block-start:0}
  /* الحدّ الفاصل بين البطاقتين رأسي لا أفقي حين تتجاوران */
  .bgrid .branch + .branch{border-inline-end:1px solid var(--line);padding-inline-end:clamp(28px,4vw,56px)}
}
.bgrid .branch__n{font-size:clamp(26px,7vw,40px)}
.branch__facts{display:grid;gap:10px;margin-block-start:clamp(14px,2.4vw,20px)}
.branch__facts .live{margin-block-start:0}

/* ── صورة الصنف بحجمها ──
   الخلفية معتمة ومطموسة فتبقى الصفحة حاضرة خلفها بلا أن تنافس. */
.zoom{
  border:0;padding:0;background:none;color:var(--w);
  width:min(92vw,560px);max-width:none;max-height:92vh;margin:auto;
}
.zoom::backdrop{background:rgba(var(--k-rgb),.9);backdrop-filter:blur(8px)}
.zoom__in{position:relative;background:var(--k-2);border:1px solid var(--line-2)}
.zoom__in img{
  display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;
  background:var(--k-2);
}
.zoom__c{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px 17px;border-block-start:1px solid var(--line);
}
.zoom__c b{font-size:16px;font-weight:700;min-width:0}
.zoom__p{
  display:flex;align-items:center;gap:4px;flex:0 0 auto;
  font-family:var(--mono);font-weight:600;font-size:15px;color:var(--p);
}
.zoom__x{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--pill);
  background:rgba(var(--k-rgb),.72);border:1px solid var(--line-2);color:var(--w);
  backdrop-filter:blur(8px);
  transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease);
}
.zoom__x:hover{background:var(--w);color:var(--k)}
.zoom__x svg{width:15px;height:15px}
.zoom :focus-visible{outline-color:var(--p)}

/* ═══════════ صفحة الفروع ═══════════ */
.bhead{padding-block:calc(var(--hdr) + clamp(30px,7vw,64px)) clamp(6px,1.6vw,14px)}
.bhead .wrap{position:relative;padding-block-start:clamp(16px,2.4vw,22px);text-align:center}
.bhead .lede{margin-block-start:12px;margin-inline:auto}
.bhead__near{margin-block-start:clamp(20px,3vw,28px);padding:14px 24px;font-size:13.5px}
.bhead__near svg{flex:0 0 auto}
.bhead__msg{
  min-height:1.3em;margin-block-start:12px;
  font-size:13.5px;color:var(--p);font-weight:700;
}

/* ── بطاقة الفرع ──
   نص وخريطة جنباً إلى جنب على الشاشة الكبيرة، وتتبادل البطاقتان
   الجهة: صفّان متطابقا الترتيب يُقرآن جدولاً، وتبادلهما يُبقي العين
   تتحرك. وعلى الجوال يعلو النص الخريطةَ دائماً، لأن الاسم والحالة
   هما الجواب والخريطة تفصيل. */
.branch{
  position:relative;
  padding-block:clamp(30px,5.5vw,58px);
  border-block-start:1px solid var(--line);
  display:grid;gap:clamp(20px,3.4vw,40px);
}
.branch:first-child{border-block-start:0}
@media (min-width:880px){
  .branch{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,5vw,72px)}
  .branch:nth-child(even) .branch__b{order:2}
}
.branch__tag{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;color:var(--w-2);
  margin-block-end:clamp(10px,1.6vw,14px);
}
.branch__mark{width:7px;height:12px;flex:0 0 auto;background:var(--r)}
.branch__n{font-size:clamp(30px,8vw,58px);font-weight:900;line-height:1.08}
.branch__a{font-size:clamp(14.5px,3.6vw,17px);color:var(--w-2);margin-block-start:10px}
.branch .live{margin-block-start:clamp(16px,2.6vw,22px)}
.branch .cta{margin-block-start:clamp(18px,2.8vw,26px)}
.branch__km{
  margin-block-start:12px;font-family:var(--mono);font-size:12px;
  color:var(--p);font-weight:600;
}
/* الفرع الأقرب: خطّ الهوية نفسه الذي يحاذي نص الهيرو، يُعلّم البطاقة
   من جهة البداية. علامة لا لونٌ يُبدَّل، فالبطاقتان تبقيان متساويتين. */
.branch[data-near]{padding-inline-start:18px}
.branch[data-near]::before{
  content:"";position:absolute;inset-inline-start:0;
  inset-block:clamp(30px,5.5vw,58px);
  width:2px;background:linear-gradient(to bottom,var(--r),rgba(237,30,66,0));
}
.branch__m .map{aspect-ratio:4/3}
@media (min-width:880px){ .branch__m .map{aspect-ratio:1/1} }
.live--na b{color:var(--w-2);font-weight:600}

/* ═══════════ صفحة المنيو ═══════════ */
.mhead{
  position:relative;
  padding-block:calc(var(--hdr) + clamp(30px,7vw,64px)) clamp(14px,2.6vw,24px);
}
.mhead .wrap{position:relative;padding-block-start:clamp(16px,2.4vw,22px);text-align:center}
.mhead .lede{margin-inline:auto}

/* ── شريط الأقسام الملتصق ──
   في منيو من ٢٦ صنفاً يفقد الزائر موضعه بعد شاشتين. فالشريط يلتصق تحت
   الهيدر، ويُضيء القسم الذي يقرأه فعلاً لا الذي ضغطه آخر مرة.
   والتمرير أفقي لا التفاف: الالتفاف يغيّر ارتفاع الشريط الملتصق فيقفز
   المحتوى تحته. */
.mbar{
  position:sticky;inset-block-start:var(--hdr);z-index:50;
  background:var(--k);
  border-block-end:1px solid color-mix(in srgb,var(--w) 14%,transparent);
}
.mnav{
  display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  padding-block:10px;
  padding-inline:max(var(--pad),calc((100vw - 1180px)/2));
  scrollbar-width:none;-ms-overflow-style:none;
}
.mnav::-webkit-scrollbar{display:none}
.mnav a{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 15px;border-radius:var(--edge);
  border:1.5px solid color-mix(in srgb,var(--w) 30%,transparent);
  font-weight:700;font-size:13.5px;white-space:nowrap;
  transition:background var(--t-ui) var(--snap),color var(--t-ui) var(--snap),
             border-color var(--t-ui) var(--snap),transform var(--t-tap) var(--snap);
}
/* المربّع الصغير هو نقطة الياء في شعارهم، تُستعمل هنا علامةَ قسم:
   نفس الشكل يربط الشريط بعنوان القسم فيُقرأ الاثنان شيئاً واحداً. */
.mnav a i{width:9px;height:9px;flex:0 0 auto;background:var(--acc,var(--w))}
.mnav a b{font-family:var(--mono);font-size:11px;font-weight:600;opacity:.55}
.mnav a[aria-current]{background:var(--w);color:var(--k);border-color:var(--w)}
.mnav a[aria-current] b{opacity:.6}
.mnav a[aria-current] i{background:var(--k)}
@media (hover:hover){ .mnav a:hover{border-color:var(--w)} }
.mnav a:active{transform:scale(.96)}

/* ── القسم ──
   لكل قسم لون من لوحتهم يتكرر في ثلاثة مواضع: مربّع الشريط، ومربّع
   العنوان، والخط تحته. فيُعرف القسم بلمحة بلا قراءة. */
.mcat{--acc:var(--w)}
.mcat[data-cat="cold"]{--acc:var(--p)}
.mcat[data-cat="hot"]{--acc:var(--r)}
.mnav a[data-cat="cold"]{--acc:var(--p)}
.mnav a[data-cat="hot"]{--acc:var(--r)}

.mcat{
  padding-block:clamp(26px,5.5vw,52px) 0;
  /* احتياط بلا جافاسكربت. والقيمة الدقيقة يكتبها السكربت على العنصر
     من ارتفاع الهيدر والشريط الملتصق معاً. */
  scroll-margin-top:calc(var(--hdr) + 72px);
}
.mcat__h{
  display:flex;align-items:center;gap:12px;
  padding-block-end:clamp(10px,2vw,14px);
  margin-block-end:clamp(14px,3vw,22px);
  border-block-end:3px solid var(--acc);
}
.mcat__mark{width:13px;height:21px;flex:0 0 auto;background:var(--acc)}
.mcat__h h2{
  font-size:clamp(22px,6.2vw,34px);font-weight:900;line-height:1.14;min-width:0;
}
.mcat__n{
  margin-inline-start:auto;flex:0 0 auto;
  font-size:12.5px;font-weight:700;
  padding:5px 12px;border-radius:var(--edge);
  border:1px solid color-mix(in srgb,var(--w) 24%,transparent);
  opacity:.75;
}
@media (min-width:700px){ .mcat__mark{width:15px;height:26px} }

.allergen{
  font-size:12.5px;opacity:.7;padding-block-start:18px;
  border-top:1px solid color-mix(in srgb,var(--w) 20%,transparent);
}

/* ═══════════════════════════════════════════════════════════
   الحركة
   لكل حركة سبب واحد يُقال في جملة، وما لا سبب له يُحذف.
   والكل يُلغى عند prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){

  /* ١) دخول الهيرو بتتابع: الاسم أولاً، ثم الوعد، ثم الشخص.
        هذا ترتيب التعريف بهم لا ترتيب عناصر في صفحة. */
  /* كلّها مشروطة بـ[data-hero]، وهي سمة يضعها ui.js حين يصير الشعار
     في الصفحة: بها تبدأ دقّات الهيرو كلها من لحظة واحدة.
     وscoped بـ.hero: أزرار الأقسام السفلى كانت تحرق حركتها عند التحميل
     وهي خارج الشاشة، ثم تُرى ساكنة حين يصل إليها الزائر. */
  :root[data-hero] .hero__sub,
  :root[data-hero] .hero__line,
  :root[data-hero] .hero .cta,
  :root[data-hero] .hero .hero__aside,
  :root[data-hero] .loycard{
    /* ٩٥٠ لا ٨٢٠: الهيرو أُبطئ بطلب يوسف بعد أن سُرِّع سهواً في جولة
       حذف الخطّ فوق الاسم. البقية على --t-in كما هي. */
    animation:rise 950ms var(--out) both;
  }
  /* التأخيرات تحمل البادئة نفسها: اختصار animation في القاعدة أعلاه
     يُصفّر animation-delay، وأولويتها أعلى بعد إضافة :root[data-hero].
     فلمّا كانت هذه بلا بادئة خسرت كلها ومضى التتابع دفعةً واحدة.
     هذا سبب ما وصفه يوسف بأن الحركة «صارت سريعة». */
  :root[data-hero] .hero__sub   {animation-delay:1.16s}
  :root[data-hero] .hero__line  {animation-delay:1.30s}
  :root[data-hero] .hero .cta   {animation-delay:1.44s}
  :root[data-hero] .hero .hero__aside{animation-delay:1.58s}
  :root[data-hero] .loycard     {animation-delay:1.58s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* العمود الأحمر أول ما يدخل: هو بنية الكتلة، والبنية تسبق ما تحملها.
     ينمو من أسفله لأنه يقوم من قاعدة الصفحة، وبالمقياس لا بالارتفاع
     فلا يعيد التخطيط في كل إطار. */
  :root[data-hero] .hero__in::before,
  :root[data-hero] .hero__in::after{animation:rise-line 1150ms .06s var(--out) both}
  @keyframes rise-line{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* دخول الهيرو: خمس دقّات لا واحدة.
     حروف الاسم تصعد واحداً واحداً من خلف قناعٍ عند حافة الصندوق،
     وآخر ما يصعد نقطة الياء الوردية: هي
     أصغر تفصيلة في هويتهم وأكثرها تمييزاً، فتُختم بها الجملة.
     ثم يلحق ما تحتها بالترتيب.

     والحروف بالـtranslate لا بالـtransform: وسم المسار يحمل مصفوفة
     قلبٍ في السمة، وtransform يلغيها فتنقلب الحروف، وtranslate
     يتركّب معها. والوحدة وحدة مستخدم داخل الـviewBox فتتناسب مع
     حجم الشعار مهما تغيّر. */
  :root[data-hero] .hero__mark svg path{animation:letter 1020ms var(--out) both}
  :root[data-hero] .hero__mark svg path:nth-child(1){animation-delay:.26s}   /* E */
  :root[data-hero] .hero__mark svg path:nth-child(2){animation-delay:.35s}   /* عمود الياء */
  :root[data-hero] .hero__mark svg path:nth-child(4){animation-delay:.44s}   /* G */
  :root[data-hero] .hero__mark svg path:nth-child(5){animation-delay:.53s}   /* H */
  :root[data-hero] .hero__mark svg path:nth-child(6){animation-delay:.62s}   /* T */
  :root[data-hero] .hero__mark svg path[fill*="--dot"]{animation-delay:.78s} /* النقطة آخراً */
  @keyframes letter{from{translate:0 56px}to{translate:0 0}}

  /* ٣) الكشف عند التمرير، مع تتابع داخل الشبكات.
        السبب: العين تلتقط عنصراً واحداً في كل مرة بدل جدار يظهر دفعة. */
  [data-rise]{opacity:0;transform:translateY(18px)}
  [data-rise][data-in]{
    opacity:1;transform:none;
    transition:opacity var(--t-in) var(--out),transform var(--t-in) var(--out);
  }

  /* والصور تُكشف مسحاً مقنَّعاً لا صعوداً بالشفافية: هي اللغة نفسها
     التي كُشف بها الاسم في الهيرو، فيُقرأ الموقع بيد واحدة. القناع
     clip-path، والصورة داخله تتحرك عكسه قليلاً فتُقرأ كأن ستاراً
     انكشف عنها لا كأنها انزلقت.

     والفتحة النهائية سالبة أربعين بالمئة لا صفراً: القصّ عند حدّ
     الصندوق بالضبط يقصّ ظلّ البولارويد معه فيبقى محذوفاً بعد انتهاء
     الحركة. والسالب يوسّع منطقة القصّ خارج الصندوق فيسلم الظلّ.

     والمُكشَّف داخل شبكة متتابعة لا يأخذ data-in بنفسه: المراقب
     يضعها على الحاوية، فيلزم انتقاؤه من خلالها. */
  .reveal{clip-path:inset(-40% -40% 100% -40%)}
  .reveal > img{transform:translateY(-6%) scale(1.04)}
  [data-stagger] > .reveal{opacity:1;transform:none}

  .reveal[data-in],
  [data-stagger][data-in] > .reveal{
    clip-path:inset(-40% -40% -40% -40%);
    transition:clip-path 1s var(--out);
  }
  .reveal[data-in] > img,
  [data-stagger][data-in] > .reveal > img{
    transform:none;
    transition:transform 1.1s var(--out);
  }

  [data-stagger] > *{opacity:0;transform:translateY(16px)}
  [data-stagger][data-in] > *{
    opacity:1;transform:none;
    transition:opacity 460ms var(--out),transform 460ms var(--out);
  }
  [data-stagger][data-in] > *:nth-child(1){transition-delay:0ms}
  [data-stagger][data-in] > *:nth-child(2){transition-delay:60ms}
  [data-stagger][data-in] > *:nth-child(3){transition-delay:120ms}
  [data-stagger][data-in] > *:nth-child(4){transition-delay:180ms}
  [data-stagger][data-in] > *:nth-child(5){transition-delay:240ms}
  [data-stagger][data-in] > *:nth-child(6){transition-delay:300ms}
  [data-stagger][data-in] > *:nth-child(7){transition-delay:340ms}
  [data-stagger][data-in] > *:nth-child(8){transition-delay:380ms}

  /* ٧) نافذة الدوام تدخل من تحت قليلاً: تُقرأ طبقة تُرفع فوق الصفحة. */
  .hdlg[open] .hdlg__in{animation:dlg-in 280ms var(--out) both}
  @keyframes dlg-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

  /* ٨) الزر العائم: الحسابان يطلعان من تحت الزر بتتابع قصير، والأيقونة
        تدور بين النظارة والإغلاق. الدوران يقول إن الزر نفسه تغيّر لا
        إن عنصراً جديداً ظهر. */
  .fab__list{transition:opacity 200ms var(--out),transform 240ms var(--out),visibility 240ms}
  .fab__item{transition:transform var(--t-tap) var(--snap),opacity 220ms var(--out),
             background var(--t-ui) var(--snap),color var(--t-ui) var(--snap)}
  .fab__list > *{opacity:0;transform:translateY(8px) scale(.96)}
  .fab[data-open] .fab__list > *{opacity:1;transform:none}
  .fab[data-open] .fab__list > :nth-child(1){transition-delay:.04s}
  .fab[data-open] .fab__list > :nth-child(2){transition-delay:.1s}
  .fab[data-open] .fab__list > :nth-child(3){transition-delay:.16s}
  .fab__ico{transition:opacity 180ms var(--out),transform 260ms var(--snap)}

  /* ٩) الصورتان الضبابيتان تنجرفان ببطء بدل الكشف السريع: الصورة
     أصلاً حركة مجمّدة، فاستمرارها عند التمرير يجعل الضبابية قراراً
     لا اهتزاز كاميرا. تسع ثوانٍ، لا يلحظها أحد ويحسّها الكل. */
  .drift[data-rise]{opacity:0;transform:none}
  .drift[data-rise][data-in]{opacity:1;transition:opacity 1100ms var(--out)}
  .drift img,.mhead__fig img{scale:1.09}
  .drift[data-in] img{scale:1;transition:scale 9s cubic-bezier(.22,.61,.2,1)}
  .mhead__fig img{animation:settle 9s cubic-bezier(.22,.61,.2,1) both}
  @keyframes settle{to{scale:1}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}