/* ═══════════════════════════════════════════════════════════════
   ليبر كافيه. ستايل الموقع كاملاً، الجوال هو الأساس.

   mobile-first: القواعد الأساسية للجوال بلا media query، والشاشات
   الأكبر تُضاف فوقها بـ min-width (620px ثم 900px).

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

   قاعدة الاستدارة الموثقة:
     الصور والأسطح والمصغّرات = 14px · الأزرار = حبة كاملة. لا أقواس ولا أشكال مقصوصة.

   شخصية الحركة: «الاقتراب». كل شيء يدخل من مقاس أكبر أو من أسفل ويستقر بهدوء.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:      #404041;   /* ملف الهوية */
  --camel:    #C49A6C;   /* ملف الهوية، الأكسنت الوحيد */
  --camel-lit:#D2AE85;   /* الكاملي نفسه أفتح درجة: نص صغير على الفحمي (5:1) */
  --cup:      #E4DED8;   /* مقيس من كوبهم */
  --plaster:  #D8D2C6;   /* مقيس من جصّهم */
  --cream:    #F7F3EE;   /* مشتق: سطح الصفحة */
  --white:    #FFFFFF;
  --ink-2:    #595856;   /* AA على كل أسطح الأقسام */
  --ink-dark: #2E2E2F;
  --camel-ink:  #6E4F2C;
  --line: rgba(64, 64, 65, .12);
  --err:  #9B2C2C;   /* أخطاء النموذج: أحمر مطفأ لا يزاحم الكاملي (7.6:1 على الأبيض) */
  --line-field: rgba(64, 64, 65, .32);
  /* أسطح المقدمة والهيرو، مشتقة من الكريمي وجصّهم */
  --wash:      #F0E7DB;
  --hero-base: #F3ECE2;
  --card-back: #DED0BC;
  /* أسطح الأقسام: ألوان ثابتة لا تدرّجات، يعلوها ملمس ورقي خفيف */
  --band-bg:   #E8DDCD;
  --place-bg:  #EEE8DD;
  --rate-bg:   #F3ECE1;
  --visit-bg:  #E9DECD;
  --map-bg:    #E0C8A8;
  --rate-ink:  #9C7446;
  --quote-ink: #61594E;
  --quote-line: rgba(110, 79, 44, .20);
  --paper: url("../img/paper-grain.svg");
  --shade:     rgba(101, 69, 38, .40);
  --shade-soft:rgba(99, 75, 55, .65);
  --line-camel:      rgba(196, 154, 108, .33);
  --line-camel-faint:rgba(110, 79, 44, .13);
  --line-cream:      rgba(247, 243, 238, .38);
  --line-photo:      rgba(255, 255, 255, .62);   /* إطار ورق الصور داخل صور المحاصيل */

  --r-card: 14px;
  --r-pill: 999px;

  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --gutter: 20px;
  --headH: 60px;
  --fl-mask: url("../img/flourish.svg");

  --f-head: "Amiri", serif;
  --f-body: "Amiri", serif;
  --f-latin: "Cormorant Garamond", Georgia, serif;
}

/* ── أساس ── */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] حالة لا اقتراح: .nav a { display: block } كان سيُظهر رابط المحاصيل المخفي */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--headH); -webkit-text-size-adjust: 100%; background: var(--cream); }
html.nav-open { overflow: hidden; }
body {
  margin: 0; font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.7;
  color: var(--ink); background: var(--cream); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* اللمس يستجيب فوراً: بلا وميض المتصفح الأزرق وبلا تأخير انتظار النقرة المزدوجة */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3, p, figure, blockquote, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--camel); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--camel); color: var(--white); }
main { overflow: clip; }
main section[id] { scroll-margin-top: var(--headH); }
/* كل قسم سياق تراصّ مستقل، فالزخرفة خلف نصّه لا خلف أرضيته */
main > section { position: relative; isolation: isolate; }

.wrap { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.bleed { margin-inline: calc(-1 * var(--gutter)); }

/* ── مقدمة التفاصيل: ثلاث لقطات، ثم الصبّة تصل إلى مكانها في الهيرو ── */
.preloader { display: none; position: fixed; inset: 0; z-index: 200; overflow: hidden; }
html.pre-wait .preloader { display: block; animation: intro-escape .2s 2.6s forwards; }
.pre__wash { position: absolute; inset: 0; background: var(--wash); transition: opacity .65s var(--ease-soft); }
/* المشهد كله بوحدة واحدة --u تتبع أصغر بُعد في الشاشة، فيتقلّص معاً ولا يخرج عن
   حدودها في جوال قصير أو ضيق. والتكوين موسَّط عمودياً: من أعلى الصور المائلة
   (−273u) إلى أسفل الشعار (+297u)، والجملة تحت الصور المائلة لا فوقها. */
.preloader { --u: min(1px, calc(100vw / 480), calc(100svh / 700)); }
.pre__scene { position: absolute; inset: 0; }
.pre__detail { position: absolute; top: calc(50% - 232 * var(--u)); left: calc(50% - 108 * var(--u)); width: calc(216 * var(--u)); aspect-ratio: 4 / 5; border-radius: var(--r-card); box-shadow: 0 22px 60px -24px var(--shade); overflow: hidden; background: var(--cup); }
.pre__detail img { width: 100%; height: 100%; object-fit: cover; }
.pre__detail--place { transform: translate(calc(-100 * var(--u)), calc(-24 * var(--u))) rotate(-9deg); animation: detail-place .85s var(--ease-out) both; }
.pre__detail--sweet { transform: translate(calc(98 * var(--u)), calc(24 * var(--u))) rotate(9deg); animation: detail-sweet .85s var(--ease-out) .12s both; }
.pre__detail--sweet img { object-position: 58% center; }
.pre__detail--pour { animation: detail-pour .85s var(--ease-out) .24s both; }
.pre__detail--pour img { animation: detail-focus 1.6s var(--ease-soft) both; }
.pre__caption { position: absolute; inset-inline: 20px; top: calc(50% + 94 * var(--u)); text-align: center; color: var(--camel-ink); }
.pre__caption span { display: block; font-size: .88rem; animation: detail-word .65s var(--ease-out) .4s both; }
/* الشعار يُبنى: «ليبر» تنكشف بمسح مائل، والشختة تلاحق حافته وتهبط، وحروف CAFE تتباعد.
   الوسط بلا transform (هوامش تلقائية) لأن الطيران للهيرو يكتب transform عليه. */
.pre__lock { position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(50% + 124 * var(--u)); width: calc(232 * var(--u)); aspect-ratio: 365.71 / 272.24; will-change: transform; }
.pre__lock svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pre__wm { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); animation: lock-wipe .8s var(--ease-soft) .5s both; }
.pre__fl { transform-origin: 50% 34%; animation: lock-chase .65s cubic-bezier(.34, 1.45, .64, 1) .68s both; }
.pre__cf { animation: lock-spread .45s var(--ease-out) 1.06s both; }
.pre__cf--0 { --sx: 9%; } .pre__cf--1 { --sx: 3%; } .pre__cf--2 { --sx: -3%; } .pre__cf--3 { --sx: -9%; }
@keyframes lock-wipe { to { clip-path: polygon(-14% 0, 100% 0, 100% 100%, -32% 100%); } }
@keyframes lock-chase { from { opacity: 0; transform: translate(72%, -8%) rotate(9deg) scale(.7); } 18% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes lock-spread { from { opacity: 0; transform: translateX(var(--sx, 0)); } to { opacity: 1; transform: none; } }
.preloader.is-leaving .pre__wash { opacity: 0; }
.preloader.is-leaving .pre__caption { opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .5s var(--ease-out); }
.preloader.is-leaving .pre__detail--place,
.preloader.is-leaving .pre__detail--sweet { animation: none; opacity: 0; transition: opacity .35s; }
@keyframes intro-escape { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes detail-place { from { transform: translate(-16px, 30px) rotate(-2deg) scale(.96); opacity: 0; } to { transform: translate(calc(-100 * var(--u)), calc(-24 * var(--u))) rotate(-9deg); opacity: 1; } }
@keyframes detail-sweet { from { transform: translate(16px, 36px) rotate(2deg) scale(.96); opacity: 0; } to { transform: translate(calc(98 * var(--u)), calc(24 * var(--u))) rotate(9deg); opacity: 1; } }
@keyframes detail-pour { from { transform: translateY(48px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes detail-focus { from { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes detail-word { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── الهيدر ── */
.head { position: fixed; inset-inline: 0; top: 0; z-index: 40; height: var(--headH); display: flex; align-items: center; padding-inline: var(--gutter); }
/* التمويه على عنصر زائف لا على الهيدر نفسه: backdrop-filter يجعل الهيدر containing block
   لقائمة الجوال المثبتة فتنحصر في ارتفاعه */
.head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .3s var(--ease-soft);
}
.head[data-solid]::before { opacity: 1; }
.head__in { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: baseline; gap: 8px; position: relative; z-index: 31; }
.brand__wm { height: 22px; width: auto; }
.brand__cafe { height: 9px; width: auto; }
.head .head__status, .head .head__cta { display: none; }
.head__end { display: flex; align-items: center; gap: 18px; }

.navtoggle { position: relative; z-index: 31; width: 44px; height: 44px; margin-inline-end: -10px; display: grid; place-items: center; border-radius: 50%; transition: transform .14s var(--ease-out); }
.navtoggle:active { transform: scale(.92); }
.navtoggle svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.navtoggle .x { display: none; }
.navtoggle[aria-expanded="true"] .bars { display: none; }
.navtoggle[aria-expanded="true"] .x { display: block; }

.nav {
  position: fixed; inset: 0; z-index: 30; background: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--headH) + 24px) var(--gutter) 48px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility 0s .28s;
}
.nav { overscroll-behavior: contain; }
.nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); }
.nav a { display: block; padding: 14px 0; font-family: var(--f-head); font-weight: 600; font-size: 1.9rem; line-height: 1.2; border-bottom: 1px solid var(--line); }
.nav a[aria-current] { color: var(--camel-ink); }
.nav__foot { margin-top: 28px; }

/* ── الأزرار ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  font-family: var(--f-head); font-weight: 600; font-size: 1rem; line-height: 1;
  transition: transform .14s var(--ease-out), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn--solid { background: var(--ink); color: var(--cream); }
@media (hover: hover) {
  .btn--solid:hover { background: var(--ink-dark); transform: translateY(-1px); box-shadow: 0 10px 20px -12px var(--shade); }
}
.btn--ghost { color: var(--ink); border: 1.5px solid rgba(64,64,65,.28); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { min-height: 40px; padding-inline: 16px; font-size: .95rem; }

/* ── حالة الدوام ── */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-2); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--camel); animation: pulse 2.2s var(--ease-soft) infinite; }
.status[data-open="0"]::before { background: var(--plaster); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(196,154,108,.55); } 70% { box-shadow: 0 0 0 9px rgba(196,154,108,0); } 100% { box-shadow: 0 0 0 0 rgba(196,154,108,0); } }

/* ── هيرو الاقتراب: الشعار الأصلي في المركز، ولقطتان غير متماثلتين ── */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--headH) + 18px) 0 24px; background: var(--hero-base); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 760px; height: 260px; left: -230px; bottom: 14%; background: var(--camel); opacity: .08; transform: rotate(-18deg); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; pointer-events: none; }
.hero__composition { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px 18px; align-items: center; }
.hero__copy { grid-column: 1 / -1; text-align: center; }
.hero__logo { width: 148px; height: auto; margin: 0 auto 12px; }
.hero__title { font-family: var(--f-head); font-weight: 700; font-size: clamp(2.7rem, 11vw, 3.8rem); line-height: 1.2; }
.hero__title span { color: var(--camel-ink); }
/* ثلاثة أزرار: المنيو عريض وحده فوق، وتحته زرّان متساويان بنفس عرضه */
.hero__cta { margin: 20px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 340px); }
.hero__cta .btn--solid { grid-column: 1 / -1; }
.hero__cta .btn { padding-inline: 14px; }
.hero__cta .btn { min-height: 48px; }
.hero__cta .btn--solid svg { transition: transform .2s var(--ease-out); }
.hero__cta .btn--solid:hover svg { transform: translateX(-4px); }
.hero__visual { position: relative; min-width: 0; }
.hero__visual--pour { grid-column: 2; grid-row: 2; }
.hero__visual--sweet { grid-column: 1; grid-row: 2; align-self: center; padding-top: 12px; }
.hero__photo { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--cup); box-shadow: 0 22px 42px -30px var(--shade-soft); transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .3s var(--ease-out); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo--pour { aspect-ratio: 4 / 5; }
.hero__photo--sweet { aspect-ratio: 4 / 5; }
.hero__photo--sweet img { object-position: 58% center; }
.hero__visual--pour::before { content: ""; position: absolute; inset: 6% -7% -5% 10%; z-index: -1; border-radius: var(--r-card); background: var(--card-back); transform: rotate(5deg); }
.hero__visual--sweet::before { content: ""; position: absolute; inset: -4% 10% 14% -8%; z-index: -1; border: 1px solid var(--line-camel); border-radius: var(--r-card); transform: rotate(-7deg); }
.hero__flourish { width: 58px; height: 28px; object-fit: contain; margin: 12px auto 0; opacity: .65; }
.hero__foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line-camel-faint); }
.hero__foot .status { font-size: .85rem; }
html.pre-wait:not(.intro-landing) .hero__copy,
html.pre-wait:not(.intro-landing) .hero__visual,
html.pre-wait:not(.intro-landing) .hero__foot { opacity: 0; }
html.intro-landing .hero__photo--pour { opacity: 0; }
/* أسبقية أعلى من `.hero.is-live .hero__logo` عمداً: الحركة تتغلب على opacity العادي،
   ولولا هذا لظهر شعاران معاً لحظة هبوط الطائر */
html.intro-landing .hero.is-live .hero__logo { opacity: 0; animation: none; }
/* بعد الهبوط: الشعار والصورة وصلا بالطيران، فلا حركة دخول لهما بعده. وصورة الصبّة
   في الهيرو لا تبدأ تقريبها تحت الصورة الطائرة، وإلا ظهرت أكبر لحظة الاستلام وقفزت */
html.intro-landed .hero.is-live .hero__logo { animation: none; opacity: 1; }
html.intro-landing .hero.is-live .hero__photo--pour img,
html.intro-landed .hero.is-live .hero__photo--pour img { animation: none; }
.hero.is-live .hero__logo { animation: hero-settle .85s var(--ease-out) both; }
.hero.is-live .hero__title { animation: hero-settle .85s var(--ease-out) .08s both; }
.hero.is-live .hero__cta { animation: hero-settle .8s var(--ease-out) .24s both; }
.hero.is-live .hero__visual--sweet { animation: photo-settle 1.15s var(--ease-out) .15s both; }
.hero.is-live .hero__photo--pour img { animation: detail-focus 2.4s var(--ease-soft) both; }
@keyframes hero-settle { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes photo-settle { from { opacity: 0; transform: translateY(30px) rotate(3deg); } to { opacity: 1; transform: none; } }

/* ── شريط المنيو: لون ثابت من عائلة الكريمي، يقود لصفحة المنيو ── */
.band { background-color: var(--band-bg); background-image: var(--paper); background-size: 180px 180px; padding: 56px 0; overflow: hidden; }
.duo { position: relative; aspect-ratio: 5 / 4; }
.duo figure { position: absolute; border-radius: var(--r-card); overflow: hidden; background: var(--plaster); box-shadow: 0 24px 50px -26px rgba(64,64,65,.45); }
.duo figure img { width: 100%; height: 100%; object-fit: cover; }
.duo figure:nth-child(1) { inset-inline-start: 0; top: 0; width: 64%; aspect-ratio: 4 / 5; }
.duo figure:nth-child(2) { inset-inline-end: 0; bottom: 0; width: 52%; aspect-ratio: 1; z-index: 2; }
.band__copy { position: relative; margin-top: 36px; }
/* شختتهم باهتة خلف العنوان: توقيعهم لا زخرفة عامة */
.band__copy::before { content: ""; position: absolute; inset-inline-end: 0; top: -30px; z-index: -1; width: 200px; height: 100px; opacity: .1; background: var(--camel); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; }
.band__h { font-family: var(--f-head); font-weight: 700; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1.05; }
.band__p { margin-top: 10px; color: var(--ink-2); max-width: 34ch; }
.band__cta { margin-top: 24px; }

/* ── «قرب أكثر» ── */
.closer { padding: 56px 0; }
.closer__fig { overflow: hidden; background: var(--cup); aspect-ratio: 3 / 2; border-radius: var(--r-card); }
.closer__fig img { width: 100%; height: 100%; object-fit: cover; }
.closer__copy { padding-top: 30px; }
.closer__q { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.4; max-width: 22ch; }
.closer__q em { font-style: normal; color: var(--camel-ink); }
.closer__copy .rule { width: 150px; height: 48px; }

/* ── الأقسام العامة ── */
.sec { padding: 56px 0; }
.h2 { font-family: var(--f-head); font-weight: 700; font-size: 2.05rem; line-height: 1.1; }
.lead { color: var(--ink-2); max-width: 44ch; }
.h2 + .lead { margin-top: 12px; }
.eyebrow { font-family: var(--f-latin); font-size: .9rem; letter-spacing: .26em; color: var(--camel-ink); }
.rule { width: 84px; height: 30px; margin-top: 14px; background: var(--camel); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; }

/* ── المكان: ثلاث صور بتكوين غير متماثل متداخل، بلا تسميات ── */
#place { background-color: var(--place-bg); background-image: var(--paper); background-size: 180px 180px; }
#place > .wrap:first-child { display: grid; gap: 16px; }
#place .h2 { font-size: clamp(3.2rem, 6vw, 6rem); }
#place .lead { margin: 0; align-self: end; }
.place__figs { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 28px 0 0; }
.place__figs figure { position: relative; min-width: 0; box-shadow: 0 18px 35px -28px var(--shade); }
/* تتابع: الصور تدخل واحدة بعد الأخرى لا دفعة واحدة */
.place__figs figure:nth-child(2) { transition-delay: .09s; }
/* صورتان من تصويرهم: الجلسة عريضة، والطاولة طولية تنزل عنها درجة. بلا تراكب،
   فقسم الحلا فوقه هو الذي يتراكب، ولا يتكرر التكوين مرتين متتاليتين */
.place__figs figure:first-child { aspect-ratio: 3 / 2; }
.place__figs figure:nth-child(2) { width: 62%; justify-self: end; }
.frame { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--cup); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
/* الجوال: الصورتان صفّ واحد بارتفاع واحد، بلا فراغ جانبي ولا صورة معلّقة */
@media (max-width: 619px) {
  .place__figs { grid-template-columns: 1.7fr 1fr; gap: 10px; }
  .place__figs figure, .place__figs figure:first-child { aspect-ratio: auto; height: clamp(220px, 64vw, 300px); }
  .place__figs figure:nth-child(2) { width: auto; justify-self: stretch; }
}

.facts { margin-top: 24px; border-top: 1px solid var(--line); }
.fact { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.fact__k { font-family: var(--f-latin); font-size: .7rem; letter-spacing: .2em; color: var(--camel-ink); }
.fact__v { font-family: var(--f-head); font-weight: 600; font-size: 1.12rem; }

/* ── التقييم: الرقم ضخم، والاقتباسات سطور تحريرية لا بطاقات ── */
#rating { background-color: var(--rate-bg); background-image: var(--paper); background-size: 180px 180px; }
.rate { position: relative; text-align: start; }
.rate > .reveal { position: relative; padding-bottom: 12px; }
.rate__num { font-family: var(--f-latin); font-weight: 500; font-size: clamp(10rem, 32vw, 25rem); line-height: 1; padding-bottom: .12em; color: var(--rate-ink); letter-spacing: -.07em; }
.rate__of { margin-top: 12px; color: var(--ink); font-size: .95rem; }
.rate .rule { margin-inline: 0; width: 110px; }
.quotes { margin-top: 20px; display: grid; gap: 0; text-align: start; }
.quote { padding: 24px 0; background: none; border: 0; border-top: 1px solid var(--quote-line); border-radius: 0; }
.quotes .quote:nth-child(2) { transition-delay: .1s; }
.quote p { font-family: var(--f-head); font-size: clamp(1.25rem, 2.3vw, 2rem); line-height: 1.7; }
.quote footer { margin-top: 12px; font-size: .88rem; color: var(--quote-ink); }

/* ── زورونا: الخريطة رسم من شوارع الحيّ الحقيقية بألوان الهوية، كلها رابط واحد ── */
#visit { background-color: var(--visit-bg); background-image: var(--paper); background-size: 180px 180px; }
.visit .h2 { font-size: clamp(3.4rem, 6vw, 6rem); }
.visit__rows { margin-top: 24px; border-top: 1px solid var(--line); }
.visit__row { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: start; }
.visit__row svg { width: 22px; height: 22px; stroke: var(--camel-ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.visit__k { font-family: var(--f-latin); font-size: .82rem; letter-spacing: .2em; color: var(--camel-ink); }
.visit__v { font-family: var(--f-head); font-weight: 600; font-size: 1.1rem; line-height: 1.45; }
.visit__v small { display: block; font-family: var(--f-body); font-weight: 400; font-size: .92rem; color: var(--ink-2); margin-top: 2px; }
.visit__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.map { position: relative; display: block; margin-top: 32px; aspect-ratio: 1000 / 720; overflow: hidden; border-radius: var(--r-card); border: 8px solid var(--cream); background: var(--map-bg); box-shadow: 0 18px 36px -25px var(--shade); }
/* الضرب يدمج الرسم بأرضية الإطار الكريمية بدل أن يطفو فوقها */
.map__plan { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .8s var(--ease-out); }
@media (hover: hover) { .map:hover .map__plan { transform: scale(1.04); } }
.map:active .map__plan { transform: scale(1.02); }
/* في مركز الرسم تماماً: الرسم مُسقَط حول إحداثيات المقهى */
.map__mark { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); width: clamp(52px, 12vw, 68px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(64,64,65,.12); }
.map__mark::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--camel); animation: ring 2.4s var(--ease-soft) infinite; }
@keyframes ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.map__logo { width: 58%; height: 40%; background: var(--cream); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; }
.map__cta { position: absolute; bottom: 14px; inset-inline-start: 14px; background: var(--ink); color: var(--cream); font-family: var(--f-head); font-weight: 600; font-size: .9rem; padding: 9px 16px; border-radius: var(--r-pill); }

/* ── التذييل: فحمي ── */
.foot { background: var(--ink); color: var(--cup); padding: 44px 0 32px; }
.foot__top { display: grid; gap: 22px; }
.foot__logo { width: 150px; }
.foot__tag { margin-top: 10px; font-family: var(--f-latin); font-size: 1rem; letter-spacing: .18em; color: var(--camel-lit); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--f-head); font-weight: 600; }
.foot__soc { display: flex; gap: 10px; }
.foot__soc a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(228,222,216,.2); display: grid; place-items: center; transition: transform .14s var(--ease-out), border-color .2s; }
@media (hover: hover) { .foot__soc a:hover { border-color: var(--camel); } }
.foot__soc a:active { transform: scale(.94); }
.foot__soc svg { width: 20px; height: 20px; stroke: var(--cup); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foot__bot { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(228,222,216,.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: .88rem; color: rgba(228,222,216,.62); }
.foot__bot a { color: var(--cup); border-bottom: 1px solid rgba(228,222,216,.3); }
.foot__bot a:hover { color: var(--camel); border-color: var(--camel); }

/* ── صفحة المنيو: قائمة تحريرية خالصة. لا صور أقسام، والصنف بلا صورة يقف
      على نفس حافة النص بلا مربع فارغ بجانبه، فالأسماء كلها مصطفّة. ── */
.mp { padding: calc(var(--headH) + 28px) 0 64px; }
/* كل محتوى صفحة المنيو على مقاس قراءة واحد، فالعنوان والتنقّل والقوائم على محور واحد */
.mp .wrap { width: min(100% - 2 * var(--gutter), 780px); }
.mp__title { font-family: var(--f-head); font-weight: 700; font-size: 3rem; line-height: 1.05; }
.mp__nav { position: sticky; top: var(--headH); z-index: 20; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 12px 0; margin-top: 22px; background: color-mix(in srgb, var(--cream) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.mp__nav::-webkit-scrollbar { display: none; }
.mp__nav a { position: relative; flex: none; padding: 4px 0 10px; font-family: var(--f-head); font-weight: 600; font-size: 1.02rem; }
.mp__nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 12px; background: var(--camel); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; opacity: 0; transform: scaleX(.6); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.mp__nav a:hover::after, .mp__nav a[aria-current]::after { opacity: 1; transform: none; }
.mcat { padding-top: 52px; }
.mcat__h { font-family: var(--f-head); font-weight: 700; font-size: 1.9rem; line-height: 1.1; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); display: flex; align-items: baseline; gap: 14px; }
.mcat__h::after { content: ""; flex: none; width: 46px; height: 17px; background: var(--camel); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; }
.mis { display: grid; }
.mi { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mi__txt { min-width: 0; }
.mi__img { flex: none; width: 76px; height: 76px; border-radius: var(--r-card); object-fit: cover; background: var(--cup); display: block; transition: transform .5s var(--ease-out); }
@media (hover: hover) { .mi:hover .mi__img { transform: scale(1.05); } }
.mi__name { font-family: var(--f-head); font-weight: 700; font-size: 1.28rem; line-height: 1.25; transition: color .2s; }
@media (hover: hover) { .mi:hover .mi__name { color: var(--camel-ink); } }
.mi__desc { font-size: .92rem; color: var(--ink-2); margin-top: 3px; }
.mp__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

/* السعر يظهر متى عبّأه صاحب المقهى من اللوحة، وصفره يعني «لم يصل» فلا يُعرض */
.mi__price { margin-top: 4px; font-family: var(--f-latin); font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--camel-ink); }
.mi__price span { font-family: var(--f-body); font-weight: 500; font-size: .78rem; }
.band__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── الحلا في الرئيسية: الشختة فوق «ليبر» كما في شعارهم، وختم «يُحضَّر هنا» يُطبع على
      الصورة. القسم أبيض بين قسمين كريميين، فهو اللمسة البيضاء في الصفحة. ── */
.sweets { position: relative; overflow: hidden; padding: 64px 0 76px; background-color: var(--white); background-image: var(--paper); background-size: 180px 180px; }
/* رسمي: عنوان في الوسط، ثم صورة واحدة مستقيمة وبطاقة منيو مطبوعة متقابلتين،
   بلا ميلان ولا تراكب صور */
.sweets__head { text-align: center; }
.sweets__in { display: grid; gap: 40px; margin-top: 40px; }
.sweets__h { font-family: var(--f-head); font-weight: 700; font-size: clamp(3rem, 12vw, 5.2rem); line-height: 1.35; }
.sweets__h span { position: relative; display: inline-block; color: var(--camel-ink); }
.sweets__fl { position: absolute; width: 70%; aspect-ratio: 1.7; top: .02em; inset-inline-end: -2%; background: var(--camel); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; transition: clip-path .95s var(--ease-soft) .3s; }
html.motion-ready .sweets__head:not(.is-in) .sweets__fl { clip-path: inset(0 0 0 100%); }
.sweets__lead { margin: 6px auto 0; max-width: 34ch; font-family: var(--f-head); font-size: 1.3rem; color: var(--ink-2); }

.sweets__figs { position: relative; margin-top: 34px; }
.sweets__main { aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--cup); box-shadow: 0 26px 50px -32px var(--shade); }
.sweets__main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }

/* البطاقة: إطار كاملي رفيع وحدّ داخلي ثانٍ، كورقة منيو مطبوعة */
.sweets__card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 26px 30px; border: 1px solid var(--line-camel); border-radius: var(--r-card); background: var(--cream); }
.sweets__card::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line-camel); border-radius: calc(var(--r-card) - 5px); pointer-events: none; }
.sweets__card-h { font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; color: var(--camel-ink); }
.sweets__card-h::after { content: ""; display: block; width: 58px; height: 22px; margin: 8px auto 0; background: var(--camel); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; }
.sweets__list { width: 100%; margin: 18px 0 26px; padding: 0; }
.sweets__list li { display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sweets__list li:last-child { border-bottom: 0; }
/* السعر إن وُجد: خط منقّط يصل الاسم بالسعر كما في المنيو المطبوع */
.sweets__list li[data-price] { justify-content: space-between; }
.sweets__list li[data-price]::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--line-camel); transform: translateY(-5px); }
.sweets__list li[data-price] .sweets__price { order: 2; }
.sweets__name { font-family: var(--f-head); font-weight: 700; font-size: 1.45rem; line-height: 1.5; }
.sweets__price { font-family: var(--f-latin); font-weight: 600; font-size: 1.2rem; color: var(--camel-ink); white-space: nowrap; }
.sweets__price span { font-family: var(--f-body); font-weight: 500; font-size: .78rem; }


/* ── المحاصيل: قسم أبيض بين المنيو و«قرب أكثر»، لكل طريقة صفحتها: صورة من بارهم
      بإطار داخلي رفيع كورق الصور، وقائمة كورقة تذوّق: خط حبري فوق، وشعيرات كاملية
      بين المحاصيل، والاسم على حافة والإيحاءات على المقابلة. والطريقة الثانية معكوسة ── */
.crops { padding: 64px 0 76px; background-color: var(--white); background-image: var(--paper); background-size: 180px 180px; }
.crops__head { text-align: center; }
.crops__h { font-family: var(--f-head); font-weight: 700; font-size: clamp(3rem, 12vw, 5.2rem); line-height: 1.35; }
.crops__head .rule { margin: 6px auto 0; }
.crops__grid { display: grid; gap: 64px; margin-top: 40px; }
.crops__col { display: grid; gap: 26px; }
.crops__fig { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--cup); box-shadow: 0 26px 50px -32px var(--shade); }
.crops__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-crops-col="crops-espresso"] .crops__fig img { object-position: 50% 62%; }
[data-crops-col="crops-v60"] .crops__fig img { object-position: 50% 38%; }
.crops__fig::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line-photo); border-radius: calc(var(--r-card) - 6px); pointer-events: none; }
.crops__method { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-family: var(--f-head); font-weight: 700; font-size: clamp(2.5rem, 9vw, 3.4rem); line-height: 1.25; }
.crops__method span { font-family: var(--f-latin); font-weight: 500; font-size: .82rem; letter-spacing: .32em; color: var(--camel-ink); }
.crops__list { margin: 18px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.crop { display: grid; gap: 2px; padding: 16px 0 15px; border-bottom: 1px solid var(--line-camel); }
.crop__name { font-family: var(--f-head); font-weight: 700; font-size: 1.45rem; line-height: 1.45; }
.crop__notes { font-size: 1.06rem; line-height: 1.6; color: var(--camel-ink); }

/* ── طلب توريد: ورقة طلب مطبوعة. بطاقة بيضاء بإطار كاملي مزدوج كبطاقة الحلا، والحقول
      سطور كتابة لا صناديق، والاختيارات حبّات تنقلب فحمية عند التحديد ── */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sup .wrap { width: min(100% - 2 * var(--gutter), 760px); }
.sup__head { text-align: center; }
.sup__head .rule { margin: 8px auto 0; }
.sup__lead { margin: 16px auto 0; max-width: 52ch; color: var(--ink-2); font-size: 1.12rem; line-height: 1.8; }
.sup__card { position: relative; margin-top: 34px; padding: 30px 22px 28px; border: 1px solid var(--line-camel); border-radius: var(--r-card); background: var(--white); box-shadow: 0 26px 50px -38px var(--shade); }
.sup__card::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line-camel); border-radius: calc(var(--r-card) - 5px); pointer-events: none; }
.sup__note { font-size: .95rem; color: var(--ink-2); }
.sup__req { color: var(--camel-ink); font-family: var(--f-latin); font-weight: 600; }
.sup__row { display: grid; gap: 0 28px; }
.sf { position: relative; margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.sf__label { display: block; padding: 0; font-family: var(--f-head); font-weight: 700; font-size: 1.12rem; line-height: 1.5; }
.sf__input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 2px 9px; border: 0; border-bottom: 1.5px solid var(--line-field); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 1.1rem; line-height: 1.6; transition: border-color .2s var(--ease-out);
}
.sf__input::placeholder { color: var(--ink-2); opacity: .55; }
.sf__input:focus { outline: none; border-bottom-color: var(--camel-ink); }
.sf__input:focus-visible { outline: none; box-shadow: 0 2px 0 0 var(--camel); }
.sf__area { resize: vertical; min-height: 92px; }
.sf.is-bad .sf__input { border-bottom-color: var(--err); }
.sf__err { margin-top: 6px; color: var(--err); font-size: .98rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line-field); border-radius: var(--r-pill);
  font-size: 1.05rem; transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out), transform .12s var(--ease-out);
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--camel); outline-offset: 3px; }
.chip input:active + span { transform: scale(.97); }
@media (hover: hover) { .chip input:not(:checked):hover + span { border-color: var(--ink); } }
.sf.is-bad .chip span { border-color: var(--err); }
.sf__other { margin-top: 6px; }
.sup__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sup__alert { margin-top: 22px; padding: 12px 16px; border-radius: var(--r-card); background: var(--cream); color: var(--err); }
.sup__send { margin-top: 26px; width: 100%; }
.sup__send[disabled] { opacity: .6; pointer-events: none; }
.sup__done { text-align: center; padding-block: 44px 40px; }
.sup__done:focus { outline: none; }
.sup__mark { width: 84px; height: auto; margin: 0 auto; }
.sup__done-h { margin-top: 8px; font-family: var(--f-head); font-weight: 700; font-size: 2.2rem; line-height: 1.3; }
.sup__done p { margin: 8px auto 22px; max-width: 34ch; color: var(--ink-2); }

/* ── لسان «تابعنا»: على الحافة اليسرى في منتصف الشاشة، يفتح حسابي ليبر تحته ── */
.fab { position: fixed; z-index: 29; inset-inline-end: 0; top: calc(50% - 40px); width: 36px; }
.fab__btn {
  position: relative; width: 36px; height: 80px; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); border: 1px solid var(--line-camel); border-inline-end: 0;
  border-start-start-radius: 16px; border-end-start-radius: 16px; box-shadow: 0 12px 30px -12px var(--shade);
  transition: transform .14s var(--ease-out), background-color .22s var(--ease-out), color .22s var(--ease-out);
}
.fab__btn:active { transform: scale(.94); }
.fab[data-open] .fab__btn { background: var(--cream); color: var(--ink); }
.fab__ico { position: absolute; display: grid; place-items: center; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.fab__ico--a { writing-mode: vertical-rl; white-space: nowrap; font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 1; }
.fab__ico--b { width: 20px; height: 20px; opacity: 0; transform: rotate(-90deg) scale(.7); }
.fab__ico--b svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.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; top: calc(100% + 9px); inset-inline-end: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s; }
.fab[data-open] .fab__list { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s; }
.fab__item { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-end: 6px; border-radius: 50%; background: var(--ink); color: var(--cream); border: 1px solid var(--line-camel); box-shadow: 0 10px 24px -12px var(--shade); transition: transform .14s var(--ease-out), background-color .2s, color .2s; }
.fab__item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fab__item:active { transform: scale(.94); }
.fab[data-open] .fab__item:nth-child(2) { transition-delay: .05s; }
@media (hover: hover) {
  .fab__btn:hover { transform: translateX(-3px); }
  .fab__item:hover { background: var(--camel-ink); }
}
html.nav-open .fab { visibility: hidden; }

/* ═══ الحركة ═══ */
.reveal { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.zoom img { transform: scale(1.06); transition: transform 1.1s var(--ease-out); }
.zoom.is-in img, .is-in .zoom img { transform: none; }

.duo figure { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.duo figure:nth-child(2) { transition-delay: .15s; }
.duo.is-in figure { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preloader { display: none; }
  .reveal, .zoom img, .duo figure, .map__plan, .mi__img,
  .nav, .btn, .navtoggle { transition: none !important; animation: none !important; }
  .reveal, .duo figure { opacity: 1; transform: none; }
  .zoom img { transform: none; }
  .status::before, .map__mark::before { animation: none; }
}

/* ═══ تابلت ═══ */
@media (min-width: 620px) {
  :root { --gutter: 32px; }
  .hero__composition { grid-template-columns: 1fr 1.5fr; max-width: 580px; gap: 28px; }
  .hero__visual--pour { width: 88%; }
  .hero__logo { width: 180px; }
  .hero__foot { max-width: 580px; }
  /* أكبر درجة على الشاشات العريضة، والارتفاع يبقى الحَكَم */
  .preloader { --u: min(1.185px, calc(100svh / 640)); }
  .band__in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .band__copy { margin-top: 0; }
  #place > .wrap:first-child { grid-template-columns: 1fr 1fr; gap: 36px; }
  /* التداخل يبدأ هنا: الصورة الثالثة تخرج عن عمودها وتزحف على جارتها */
  .place__figs { grid-template-columns: 1.6fr 1fr; align-items: start; gap: 20px; }
  .place__figs figure:nth-child(2) { width: 100%; margin-top: 56px; }
  .rate { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 30px; }
  .quotes { margin: 0; }
  .foot__top { grid-template-columns: 1fr auto; align-items: start; }
  .closer { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
  .closer__copy { padding-top: 0; }
  .sweets__card { padding: 40px 44px 36px; }
  .sup__row { grid-template-columns: 1fr 1fr; }
  .sup__card { padding: 40px 46px 38px; }
  .sup__send { width: auto; min-width: 220px; }
  /* المحاصيل: الصورة والقائمة متقابلتان، والطريقة الثانية معكوسة */
  .crops__grid { gap: 72px; }
  .crops__col { grid-template-columns: 5fr 6fr; gap: 36px; align-items: center; }
  .crops__fig { aspect-ratio: 1 / 1; }
  .crops__grid[data-cols="2"] [data-crops-col="crops-v60"] { grid-template-columns: 6fr 5fr; }
  .crops__grid[data-cols="2"] [data-crops-col="crops-v60"] .crops__fig { order: 2; }
}

/* ═══ ديسكتوب ═══ */
@media (min-width: 900px) {
  :root { --gutter: 48px; --headH: 72px; }
  .navtoggle { display: none; }
  .head .head__status, .head .head__cta { display: inline-flex; }
  .brand__wm { height: 26px; } .brand__cafe { height: 10px; }
  .nav { position: static; inset: auto; background: none; padding: 0; flex-direction: row; gap: 28px; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav a { position: relative; padding: 6px 0; border: 0; font-size: 1rem; font-weight: 600; }
  .nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: -8px; height: 12px; background: var(--camel); -webkit-mask: var(--fl-mask) center / contain no-repeat; mask: var(--fl-mask) center / contain no-repeat; opacity: 0; transform: scaleX(.6); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
  .nav a:hover::after, .nav a[aria-current]::after { opacity: 1; transform: none; }
  .nav a[aria-current] { color: var(--ink); }
  .nav__foot { display: none; }
  .bleed { margin-inline: 0; }

  .hero { padding: calc(var(--headH) + 60px) 0 24px; min-height: min(100svh, 940px); display: flex; flex-direction: column; justify-content: center; }
  .hero__composition { max-width: 1280px; grid-template-columns: 1fr 1.65fr 1.25fr; gap: clamp(24px, 3vw, 48px); align-items: center; flex: 1; }
  .hero__copy { grid-column: 2; grid-row: 1; padding-bottom: 30px; }
  .hero__logo { width: clamp(180px, 18vw, 248px); margin-bottom: 24px; }
  .hero__title { font-size: clamp(3.2rem, 4.5vw, 4.7rem); }
  .hero__cta { margin-top: 28px; }
  .hero__visual--pour { grid-column: 3; grid-row: 1; width: 100%; margin-bottom: 90px; }
  .hero__visual--sweet { grid-column: 1; grid-row: 1; margin-top: 140px; padding: 0; }
  .hero__flourish { width: 86px; height: 40px; margin-top: 24px; }
  .hero__foot { max-width: 1280px; margin-top: 42px; }
  .hero__foot .status { font-size: .9rem; }
  .hero::after { width: 1300px; height: 400px; left: -340px; bottom: 3%; }

  .band { padding: 68px 0; }
  .band__in { grid-template-columns: 1fr 1fr; gap: 90px; }
  .duo { aspect-ratio: 1.4; }
  .duo figure:nth-child(1) { width: 58%; }
  .duo figure:nth-child(2) { width: 52%; }

  .closer { padding: 70px 0; grid-template-columns: 1.3fr 1fr; gap: 64px; }
  .sec { padding: 64px 0; }
  .h2 { font-size: 2.8rem; }

  #place { padding: 64px 0 76px; }
  #place > .wrap { width: min(100% - 96px, 1280px); }
  #place .lead { max-width: 42ch; padding-bottom: 8px; }
  .place__figs { grid-template-columns: 1.75fr 1fr; gap: 28px; margin-top: 34px; }
  .place__figs figure:nth-child(2) { width: 88%; justify-self: end; margin-top: 110px; }


  #rating { padding: 70px 0; }
  .rate { gap: 70px; }
  .rate__num { font-size: clamp(16rem, 25vw, 25rem); }
  .quote { padding: 30px 0; }

  #visit { padding: 72px 0; }
  .visit { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 56px; }
  .map { margin-top: 0; aspect-ratio: 1.05; transform: rotate(-2deg); }
  .foot__top { grid-template-columns: 1fr auto auto; gap: 48px; }

  .mp__title { font-size: 4rem; }
  .mcat { padding-top: 76px; }
  .mcat__h { font-size: 2.5rem; }
  .mcat__h::after { width: 64px; height: 22px; }
  .mi { padding: 20px 0; gap: 28px; }
  .mi__img { width: 88px; height: 88px; }
  .mi__name { font-size: 1.5rem; }
  .mi__desc { font-size: 1rem; }
  .sweets { padding: 96px 0 110px; }
  .sweets__in { grid-template-columns: 1.1fr 1fr; align-items: stretch; gap: 56px; margin-top: 56px; }
  .sweets__figs { margin-top: 0; }
  .sweets__main { aspect-ratio: auto; height: 100%; min-height: 440px; }
  /* اثنا عشر صنفاً: عمودان داخل البطاقة، فلا تطول البطاقة وتمطّ الصورة بجانبها */
  .sweets__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .sweets__list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .sweets__card { justify-content: center; }
  .crops { padding: 100px 0 116px; }
  .crops__grid { gap: 88px; margin-top: 60px; max-width: 1080px; margin-inline: auto; }
  .crops__col { gap: 72px; }
  /* ورقة التذوّق: الاسم على حافة والإيحاءات على المقابلة، على سطر واحد */
  .crop { grid-template-columns: auto 1fr; align-items: baseline; gap: 28px; }
  .crop__notes { text-align: end; }
}

/* بلا جافاسكربت يبقى المحتوى ظاهراً: الإخفاء يُفعَّل فقط بعد أن يضيف السكربت هذا الصنف */
html.motion-ready .reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }
html.motion-ready .duo:not(.is-in) figure { opacity: 0; transform: translateY(30px); }
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  .hero *, .hero *::before, .hero *::after { animation: none !important; transition: none !important; }
  html.pre-wait .hero__copy, html.pre-wait .hero__visual, html.pre-wait .hero__foot,
  html.intro-landing .hero__photo--pour, html.intro-landing .hero__logo { opacity: 1; }
  .hero__photo { transform: none; }
  .fab__btn, .fab__ico, .fab__list, .fab__item { transition: none !important; }
  .sweets__fl { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}