:root { --space-5: 20px; --space-10: 40px; } /* مقاسات ناقصة بالديزاين سيستم (2 3 4 6 8 12 16 24) */
/*
  الحاكورة — تنسيق الموقع.
  كل لون وخط ومسافة من css/ds/tokens.css (الديزاين سيستم). ما في hex جديد هون.
  الأقسام بتختار الوضع بـ data-theme، والمتغيرات --bg --fg --primary ... بتمشي معها.
*/

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-padding-block-start: 88px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: color-mix(in srgb, var(--color-gold-400) 55%, transparent) var(--color-green-950);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-ar);
  font-size: var(--size-base);
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  caret-color: var(--primary);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

::selection { background: var(--color-gold-400); color: var(--color-green-950); }

img { display: block; max-inline-size: 100%; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-underline-offset: .3em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
bdi { unicode-bidi: isolate; }

[data-theme] { background: var(--bg); color: var(--fg); }

.container {
  inline-size: 100%;
  max-inline-size: 1280px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}

.section { padding-block: clamp(var(--space-16), 10vw, 144px); }

.display {
  font-weight: var(--weight-bold);
  font-size: clamp(42px, 8vw, 96px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--space-4) var(--space-12);
  margin-block-end: clamp(var(--space-8), 5vw, var(--space-16));
}
.section-title {
  font-size: clamp(36px, 5.6vw, 61px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  text-wrap: balance;
}
.section-lead { max-inline-size: 34ch; color: var(--fg-muted); font-size: var(--size-lg); line-height: 1.6; }

.latin { font-family: var(--font-en); letter-spacing: .04em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-2);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-block-end: 1.5px solid currentColor;
}
.link-arrow i { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.link-arrow:hover i { transform: translateX(-6px); }

.skip-link {
  position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 200;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-gold-400); color: var(--color-green-950);
  font-weight: var(--weight-semibold); text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icon-btn {
  display: inline-grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--fg);
  font-size: 22px; cursor: pointer;
  transition: background-color .2s ease;
}
.icon-btn:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }

/* مكان الصورة: لون الهوية + ورقة المونستيرا */
.media-placeholder {
  position: absolute; inset: 0;
  background: var(--color-green-800);
  overflow: hidden;
}
.media-placeholder::after {
  content: ""; position: absolute;
  inset-block-end: -18%; inset-inline-start: -12%;
  inline-size: 95%; aspect-ratio: 1;
  background-color: var(--color-cream-50); opacity: .16;
  -webkit-mask: var(--motif-leaf-corner) center / contain no-repeat;
  mask: var(--motif-leaf-corner) center / contain no-repeat;
}
.media-placeholder--outdoor { background: var(--color-green-700); }
.media-placeholder--gift { background: var(--color-mauve-600); }
.media-placeholder--gift::after { opacity: .22; }

/* ---------- 0 · شاشة التحميل ---------- */
.preloader { display: none; }
.is-loading body { overflow: hidden; }
.is-loading .preloader {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: var(--color-green-900);
  animation: preloader-out .8s cubic-bezier(.76, 0, .24, 1) 1.15s forwards;
}
.preloader__mark {
  inline-size: clamp(120px, 18vw, 180px);
  clip-path: inset(100% 0 0 0);
  animation: mark-rise 1s cubic-bezier(.16, 1, .3, 1) .1s forwards;
}
@keyframes mark-rise { to { clip-path: inset(0 0 0 0); } }
@keyframes preloader-out { to { transform: translateY(-100%); } }

/* ---------- 1 · الهيدر ---------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  color: var(--fg);
  transition: background-color .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1), border-color .35s ease;
  border-block-end: 1px solid transparent;
}
.site-header.is-scrolled { background: var(--color-green-900); border-block-end-color: var(--border); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-inline-size: 1280px; margin-inline: auto;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-12));
}
.site-header__logo img { block-size: 36px; inline-size: auto; }
.site-header__logo .site-header__logo-alt { display: none; }
.menu-open .site-header__logo img { display: none; }
.menu-open .site-header__logo .site-header__logo-alt { display: block; }
.menu-open .site-header, .menu-open .site-header.is-scrolled { background: transparent; border-block-end-color: transparent; }
.menu-open .menu-toggle { background: var(--color-green-900); color: var(--color-cream-50); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }

.count-pill {
  display: inline-grid; place-items: center;
  min-inline-size: 22px; block-size: 22px; padding-inline: 6px;
  border-radius: var(--radius-full);
  background: var(--primary); color: var(--primary-fg);
  font-size: var(--size-xs); font-weight: var(--weight-bold); line-height: 1;
}
.count-pill[hidden] { display: none; }
.count-pill.is-bumped { animation: bump .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes bump { 40% { transform: scale(1.35); } }

.menu-toggle {
  position: relative; z-index: 2;
  inline-size: 48px; block-size: 48px;
  border: 0; border-radius: var(--radius-full);
  background: var(--color-cream-50); color: var(--color-green-900);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.menu-toggle:hover { transform: scale(1.06); }
.menu-toggle__bars, .menu-toggle__bars::before {
  position: absolute; inset-inline: 15px; block-size: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), inset .4s cubic-bezier(.16, 1, .3, 1);
}
.menu-toggle__bars { inset-block-start: 20px; }
.menu-toggle__bars::before { content: ""; inset-inline: 0; inset-block-start: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { inset-block-start: 23px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { inset-block-start: 0; transform: rotate(-90deg); }

@media (max-width: 560px) {
  .header-cart__label, .header-order span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .header-order, .header-cart { padding-inline: var(--space-3); }
  .site-header__logo img { block-size: 30px; }
}

/* ---------- 1b · القائمة ---------- */
.menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center;
  padding-block: 112px var(--space-12);
  overflow-y: auto; overflow-x: hidden;
  clip-path: circle(0 at var(--menu-x, 48px) var(--menu-y, 40px));
  transition: clip-path .8s cubic-bezier(.76, 0, .24, 1);
}
.menu[hidden] { display: none; }
.menu.is-open { clip-path: circle(150% at var(--menu-x, 48px) var(--menu-y, 40px)); }
.menu::before {
  content: ""; position: fixed; inset-block-end: -8%; inset-inline-start: -6%;
  inline-size: min(70vw, 720px); aspect-ratio: 1;
  background-color: var(--fg); opacity: .05;
  -webkit-mask: var(--motif-leaf-corner) center / contain no-repeat;
  mask: var(--motif-leaf-corner) center / contain no-repeat;
  pointer-events: none;
}
/* شكل القائمة المفتوحة = «القائمة» بموقع Baunfire (بألوان الحاكورة ومعكوسة للعربي):
   - خلفية فاتحة (كريمي) ونص أخضر غامق، فتحة دائرية من زر القائمة، وعنوان عمودي «القائمة» جنب الروابط
   - المؤشر على رابط: الروابط التانية بتنمسح لرمادي فاتح كتير (مسحة من آخر الكلمة لأولها)، وبترجع بمسحة من أولها
     لما يطلع المؤشر؛ ورقم الرابط (01...) بيطلع جنبه والكلمة بتزيح لتعطيه مكان
   - كل رابط فيه طبقتين (بيعملهم initMenu بالـ JS، والـ HTML بيضل نص بس للوحة التحكم): الكلمة باللون الفاتح،
     وفوقها نسخة غامقة (::after) بنقصّها بـ clip-path
   - عمود التواصل بالطرف التاني، منزّل لتحت */
.menu { --menu-ease: cubic-bezier(.475, .425, 0, .995); --menu-dim: color-mix(in srgb, var(--fg) 9%, var(--bg)); }
.menu__inner { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: clamp(var(--space-6), 3vw, var(--space-12)); }
.menu__label {
  align-self: start; margin-block-start: .9em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--fg);
}
.menu__nav { display: grid; gap: 0; }
.menu__nav a {
  position: relative; display: block; inline-size: fit-content;
  font-size: clamp(34px, 4.6vw, 64px); font-weight: var(--weight-bold); line-height: 1.55;
  text-decoration: none; color: var(--fg);
}
.menu__word { position: relative; display: inline-block; white-space: nowrap; color: var(--menu-dim); transition: transform .6s var(--menu-ease); }
.menu__word::after {
  content: attr(data-text); position: absolute; inset: 0; white-space: nowrap;
  color: var(--fg); clip-path: inset(0);
  transition: clip-path .6s var(--menu-ease);
}
.menu__num {
  position: absolute; inset-inline-start: 0; inset-block-start: .5em;
  font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .08em; font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--fg); opacity: 0; transform: translateX(10px);
  transition: opacity .45s var(--menu-ease), transform .6s var(--menu-ease);
}
/* الرابط اللي المؤشر عليه (أو الكيبورد): رقمه بيطلع والكلمة بتزيح للشمال لتعطيه مكان */
.menu__nav a:is(:hover, :focus-visible) .menu__num { opacity: 1; transform: none; }
.menu__nav a:is(:hover, :focus-visible) .menu__word { transform: translateX(-40px); }
.menu__nav a:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; border-radius: 4px; }
/* الباقي: النسخة الغامقة بتنقص من آخر الكلمة لأولها، فبتبيّن الكلمة رمادي فاتح (للمؤشر بس) */
@media (hover: hover) {
  /* :has(a:hover) مش :hover على القائمة كلها: المؤشر بالفراغ جنب كلمة قصيرة ما لازم يعتّم الكل */
  .menu.is-open .menu__nav:has(a:hover) a:not(:hover) .menu__word::after { clip-path: inset(0 0 0 100%); }
}
.menu__aside { display: grid; gap: var(--space-5); justify-items: start; min-inline-size: 260px; align-self: end; padding-block-end: .9em; }
.menu__line { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--fg-muted); text-decoration: none; transition: color .25s ease; }
a.menu__line:hover, a.menu__line:focus-visible { color: var(--fg); }
a.menu__line:focus-visible { text-decoration: underline; text-underline-offset: .3em; }
.menu__line i { font-size: 22px; color: var(--success); }
/* نطّة الحروف: كل حرف بيطلع وبينزل، ورا اللي قبله بـ 22ms (الـ JS بيقطّع النص لحروف ويعطي كل واحد --c) */
.menu__ch { display: inline-block; white-space: pre; }
@keyframes menu-hop { 40% { transform: translateY(-.3em); } }
.js-motion a.menu__line:is(:hover, :focus-visible) .menu__ch { animation: menu-hop .5s cubic-bezier(.3, .7, .4, 1) calc(var(--c, 0) * 22ms); }
/* دائرة رمادية بتلحق المؤشر بتأخير ناعم، ونقطة خضرا مكانه بالزبط بدل سهم الماوس (للماوس بس) */
a.menu__line { position: relative; isolation: isolate; }
.menu__blob, .menu__dot { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 50%; pointer-events: none; translate: var(--mx, 0) var(--my, 0); scale: 0; }
.menu__blob { inline-size: 64px; block-size: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--fg) 7%, transparent); transition: translate .4s var(--menu-ease), scale .4s var(--menu-ease); }
.menu__dot { z-index: 1; inline-size: 7px; block-size: 7px; margin: -3.5px 0 0 -3.5px; background: var(--success); transition: scale .25s ease; }
@media (hover: hover) {
  a.menu__line:has(.menu__dot) { cursor: none; }
  a.menu__line:hover :is(.menu__blob, .menu__dot) { scale: 1; }
}
/* الدخول: كل رابط ينزلق من الطرف ويظهر، واحد ورا واحد؛ بعدين العنوان وعمود التواصل. animation مش transition عشان التفاعل يضل فوري */
@keyframes menu-item-in { from { opacity: 0; transform: translateX(56px); } }
@keyframes menu-fade-in { from { opacity: 0; transform: translateY(16px); } }
.js-motion .menu.is-open .menu__nav a { animation: menu-item-in .9s var(--menu-ease) backwards; animation-delay: calc(.3s + var(--i, 0) * 70ms); }
.js-motion .menu.is-open .menu__label { animation: menu-fade-in .9s var(--menu-ease) .25s backwards; }
.js-motion .menu.is-open .menu__aside { animation: menu-fade-in .9s var(--menu-ease) .75s backwards; }
@media (max-width: 760px) {
  .menu { align-items: start; }
  .menu__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .menu__label { display: none; }
  .menu__nav a { font-size: clamp(34px, 10.5vw, 50px); }
  .menu__aside { align-self: start; padding-block-end: 0; }
}

/* ---------- 2 · الهيرو ---------- */
.hero {
  position: relative; overflow: hidden;
  min-block-size: 100svh;
  display: grid; align-content: end;
  padding-block: 140px clamp(var(--space-8), 6vw, var(--space-16));
}
.hero__art { position: absolute; inset: 0; pointer-events: none; }
.hero__mark {
  position: absolute; inset-block-start: 50%; inset-inline-end: -14%;
  inline-size: min(82vw, 1000px);
  opacity: .13;
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
  will-change: transform;
}
.hero__spark {
  position: absolute; inset-inline-end: var(--x); inset-block-start: var(--y);
  inline-size: 7px; block-size: 7px;
  background: var(--color-gold-400);
  transform: rotate(45deg);
  opacity: .7;
}
.hero__spark--sm { inline-size: 4px; block-size: 4px; opacity: .5; }
.js-motion .hero__spark { animation: twinkle 4.5s ease-in-out infinite; animation-delay: calc(var(--x) * 0.08s); }
@keyframes twinkle { 50% { opacity: .15; } }

.hero__content { position: relative; display: grid; gap: clamp(var(--space-8), 4vw, var(--space-12)); }
/* ثلاث جمل، كل وحدة بسطر لحالها: ما بنحدد عرض، والخط أصغر شوي من .display عشان الهيرو يضل بالشاشة */
.hero__title { font-size: clamp(34px, 6.2vw, 84px); }
@media (min-width: 700px) { .hero__title .line > span { white-space: nowrap; } }
/* الصندوق بيقص النص وهو طالع من تحت؛ بنوسّعه فوق وتحت (والمارجن السالب بيرجّع المسافات) عشان ما ينقص الهمزة فوق الألف ولا النقاط تحت */
.hero__title .line { display: block; overflow: hidden; padding-block: .32em .16em; margin-block: -.32em -.16em; }
.hero__title .line > span { display: inline-block; }
.js-motion .hero__title .line > span { transform: translateY(110%); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.js-motion .hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.js-motion .hero__title .line:nth-child(3) > span { transition-delay: .24s; }
.js-motion.is-ready .hero__title .line > span { transform: none; }
.js-motion .hero__foot, .js-motion .hero__meta { opacity: 0; transition: opacity 1s ease .45s; }
.js-motion.is-ready .hero__foot, .js-motion.is-ready .hero__meta { opacity: 1; }

.hero__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6) var(--space-12); }
.hero__lead { max-inline-size: 40ch; font-size: var(--size-lg); line-height: 1.7; color: var(--fg-muted); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--size-sm); color: var(--fg-muted);
}

.scroll-cue {
  position: absolute; inset-inline-end: clamp(var(--space-4), 2vw, var(--space-8)); inset-block-start: 44%;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  font-size: var(--size-xs); letter-spacing: .2em; color: var(--fg-muted); text-decoration: none;
}
.scroll-cue span { writing-mode: vertical-rl; }
.scroll-cue i { position: relative; inline-size: 1px; block-size: 64px; background: var(--border); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 40%; background: var(--color-gold-400); }
.js-motion .scroll-cue i::after { animation: cue 2.2s cubic-bezier(.76, 0, .24, 1) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
@media (max-width: 760px) { .scroll-cue { display: none; } .hero__mark { inline-size: 120vw; inset-inline-end: -40%; inset-block-start: 34%; } }

/* ---------- بطاقة المنتج (فوق card--product من الديزاين سيستم) ---------- */
.card--product { display: block; cursor: pointer; isolation: isolate; }
.card--product .card__media { transition: transform 4s cubic-bezier(.19, 1, .22, 1); }
/* ميلان البطاقة لما المؤشر بيجي عليها — نفس تأثير الموقع المرجعي (Baunfire): بطاقة بتصغّر لـ 95% وبتميل 9° حول المحور
   العمودي (بعمق 1000px) بانتقال 1.25 ثانية، والصورة جواها بتكبر لـ 110%. الغلاف .card-tilt ثابت وعليه :hover،
   والبطاقة جواه هي اللي بتميل؛ لو الميلان على البطاقة نفسها، لما تصغّر بتطلع من تحت المؤشر وبترجع (وميض) عند الأطراف */
.card-tilt { display: block; }
.card-tilt > .card--product { transition: transform 1.25s cubic-bezier(.475, .425, 0, .995); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-tilt:hover > .card--product { transform: perspective(1000px) scale(.95) rotateY(-9deg); }
  .card-tilt:hover > .card--product .card__media { transform: scale(1.1); }
}
.card--product:focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 4px; }
/* الإطار برّا البطاقة، فلونه لازم يبين على خلفية القسم الفاتح */
.featured .card--product:focus-visible { outline-color: var(--color-green-900); }
/* حالة التوفر (نفذت الكمية / سيتوفر قريباً): الصورة بتخفت والبطاقة بتضل ظاهرة، والشارة بتاخد مكان شارة المنتج */
.card--unavailable .card__media { filter: grayscale(.65) brightness(.8); }
.card--product .badge--status { color: var(--color-clay-600); border-color: currentColor; font-weight: var(--weight-bold); }
.card--product .badge--soon { color: var(--info); }
.product-dialog__status { justify-self: start; margin: 0; padding: 0 var(--space-4); border: 1.5px solid currentColor; border-radius: var(--radius-full); font-size: var(--size-sm); font-weight: var(--weight-bold); line-height: 1.9; color: var(--danger); }
.product-dialog__status--soon { color: var(--info); }
.product-dialog__status[hidden] { display: none; }
.card--product .badge { position: absolute; inset-block-start: var(--space-4); inset-inline-start: var(--space-4); z-index: 2; }
.card--product .card__price bdi { display: inline-block; }
.card--product .card__row .btn { position: relative; z-index: 2; }
.js-motion .card--product.will-reveal { clip-path: inset(14% 0 0 0 round var(--radius-md)); opacity: 0; }
.js-motion .card--product.will-reveal.is-in {
  clip-path: inset(0 0 0 0 round var(--radius-md)); opacity: 1;
  /* الميلان (transform) لازم يضل بالقائمة بدون تأخير الظهور، وإلا بتخسر انتقالها لما البطاقة تنكشف */
  transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, transform 1.25s cubic-bezier(.475, .425, 0, .995);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}

/* ---------- 3 · مختاراتنا ---------- */
.featured__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 5vw, 96px); align-items: start; }
.featured__col { display: grid; gap: clamp(var(--space-6), 5vw, 96px); }
.featured__col--offset { padding-block-start: clamp(var(--space-16), 14vw, 200px); transform: translate3d(0, var(--shift, 0px), 0); will-change: transform; }
.featured .card--product { aspect-ratio: 4 / 5; }
.featured .card__title { font-size: var(--size-2xl); }
.featured .card--product .card__body { padding: var(--space-6); }
.featured .link-arrow { margin-block-start: clamp(var(--space-8), 5vw, var(--space-16)); }
@media (max-width: 760px) {
  .featured__grid, .featured__col { gap: var(--space-4); }
  .featured__col--offset { padding-block-start: var(--space-12); }
  .featured .card__title { font-size: var(--size-base); }
  .featured .card--product .card__body { padding: var(--space-3); }
  .featured .card__price { font-size: var(--size-lg); }
}

/* ---------- 4 · الشريط الذهبي ---------- */
.band {
  --fg: var(--color-green-950);
  background: var(--color-gold-400); color: var(--color-green-950);
  padding-block: clamp(96px, 14vw, 200px);
}
.band__inner { display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; }
.band__leaf {
  inline-size: clamp(40px, 5vw, 64px); aspect-ratio: 1; margin-block-start: .4em;
  background-color: var(--color-green-900);
  -webkit-mask: var(--motif-leaf) center / contain no-repeat;
  mask: var(--motif-leaf) center / contain no-repeat;
}
.band__text {
  max-inline-size: 22ch;
  font-size: clamp(28px, 4.8vw, 61px); font-weight: var(--weight-semibold); line-height: 1.4;
  text-wrap: balance;
}
.band__text .w { transition: opacity .35s ease; }
.js-motion .band__text .w { opacity: .18; }
.js-motion .band__text .w.is-on { opacity: 1; }
@media (max-width: 560px) { .band__inner { grid-template-columns: 1fr; } }

/* ---------- 5 · شو عنّا (مثبّت) ----------
   نفس عرض «What we do» بموقع Baunfire (معكوس للعربي): القسم بيتثبّت والحالات بتتبدّل مع التمرير.
   - كلمة ضخمة باهتة بعرض القسم، كلها ورا الصورة. بدل ما نقص حرف، الكلمة بتنمدّ بالكشيدة (ـ) من نقطة وصل تحت
     الصورة، والمد بيزيد مع التمرير لحد ما آخر الكلمة يطلع من الطرف التاني للصورة (app.js: initWhat)
   - الصورة بإطار طولي مائل 30°، والصورة جوّاه معدولة؛ بتنكشف من طرف لطرف مع التمرير (--reveal من 0 لـ 1،
     نفس رقم المد) وبتصغر من 110% لـ 100%
   - النص والكلمة: الطالعة بتختفي فوراً، والجاية بتستنى 0.4 ثانية. الصورة الطالعة بتختفي بشفافية
   - نقاط عمودية على الطرف، ومؤشر «مرّر» */
.what { --what-ease: cubic-bezier(.475, .425, 0, .995); position: relative; block-size: 400svh; }
.what__stage {
  position: sticky; inset-block-start: 0;
  block-size: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  padding-block: 104px var(--space-8);
}
.what__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); position: relative; z-index: 4; }
.what__head .section-title { font-size: clamp(17px, 1.5vw, 21px); font-weight: var(--weight-bold); line-height: 1.4; }
/* النقاط: عمودية على طرف القسم (الشمال بالعربي) */
.what__dots {
  position: absolute; inset-inline-end: clamp(16px, 2.6vw, 40px); inset-block-start: 50%; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  margin: 0; padding: 0; list-style: none; transform: translateY(-50%);
}
.what__dots li { inline-size: 5px; block-size: 5px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 25%, transparent); transition: transform .5s var(--what-ease), background-color .3s ease; }
.what__dots li.is-active { background: var(--fg); transform: scale(1.8); }
.what__scroll {
  position: absolute; inset-inline-end: clamp(14px, 2.4vw, 38px); inset-block-end: var(--space-8); z-index: 4;
  display: grid; justify-items: center; gap: var(--space-3); margin: 0;
  font-size: var(--size-xs); font-weight: var(--weight-semibold); color: var(--fg);
}
.what__scroll::before { content: ""; inline-size: 1.5px; block-size: 64px; background: currentColor; }
.what__scroll span { writing-mode: vertical-rl; }

.what__steps { position: relative; }
/* الحالات المخفية شفافة بس (مش visibility: hidden) عشان روابطها تضل توصلها الكيبورد وقارئ الشاشة */
.what__step { position: absolute; inset: 0; pointer-events: none; }
.what__step.is-active { pointer-events: auto; }
.what__word {
  position: absolute; inset-inline: 0; inset-block-start: 50%; z-index: 0;
  padding-inline: clamp(24px, 6vw, 96px);
  font-size: clamp(110px, 17vw, 260px); font-weight: var(--weight-bold); line-height: 1.25;
  color: color-mix(in srgb, var(--fg) 6%, var(--bg));
  transform: translateY(-50%);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.what__body { position: relative; block-size: 100%; }
.what__frame {
  --fw: min(clamp(190px, 19vw, 280px), 33svh);
  position: absolute; inset-inline-start: 50%; inset-block-start: 50%; z-index: 1;
  inline-size: var(--fw); aspect-ratio: 32 / 65; overflow: hidden;
  background: var(--color-white);
  transform: translate(50%, -50%) rotate(-30deg);
  /* بينكشف من اليمين للشمال مع التمرير */
  clip-path: inset(0 0 0 calc((1 - var(--reveal, 0)) * 100%));
}
/* الصورة جوّا الإطار معدولة وأكبر منه بشوي (196%×118% بتغطي الإطار المايل) */
.what__frame > img, .what__frame > .media-placeholder {
  position: absolute; inset: auto; left: 50%; top: 50%;
  inline-size: 196%; block-size: 118%; max-inline-size: none;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(30deg) scale(calc(1.1 - var(--reveal, 0) * .1));
}
.what__copy {
  position: absolute; z-index: 3; inset-block-start: 55%;
  right: calc(50% + var(--fw, 240px) * .72); /* شمال الصورة بالعربي (يمينها بالمرجع) */
  --fw: min(clamp(190px, 19vw, 280px), 33svh);
  display: grid; gap: var(--space-3); justify-items: start;
  inline-size: min(340px, 30vw);
}
.what__copy h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: var(--weight-bold); line-height: 1.4; }
.what__copy p { color: var(--fg-muted); font-size: var(--size-lg); line-height: 1.8; }
.what__copy .soon-pill { justify-self: start; }

/* الانتقال: الطالعة بتختفي فوراً، والجاية بتستنى (نفس توقيت المرجع ومنحناه) */
.what__word, .what__copy { transition: opacity .95s var(--what-ease), transform .95s var(--what-ease); }
/* الكشف والمد مع التمرير (بدون تأخير)؛ انتقال قصير بس بينعّم قفزات عجلة الماوس */
.what__frame { transition: opacity .6s var(--what-ease), clip-path .25s linear; }
.what__frame > img, .what__frame > .media-placeholder { transition: transform .25s linear; }
.what__step:not(.is-active) .what__word, .what__step:not(.is-active) .what__copy, .what__step:not(.is-active) .what__frame { opacity: 0; }
.what__step:not(.is-active) .what__copy { transform: translateY(20px); }
.what__step.is-active .what__word, .what__step.is-active .what__copy { transition-delay: .4s; }

/* بدون تثبيت: موبايل، تقليل الحركة، أو بدون JS — قائمة عادية، والصورة مائلة بس بدون حركة */
.what--static { block-size: auto; }
.what--static .what__stage { position: static; block-size: auto; overflow: visible; padding-block: clamp(var(--space-16), 10vw, 144px); grid-template-rows: auto; gap: var(--space-8); }
.what--static .what__dots, .what--static .what__word, .what--static .what__scroll { display: none; }
.what--static .what__head .section-title { font-size: clamp(31px, 4vw, 49px); }
.what--static .what__steps { display: grid; gap: var(--space-8); }
.what--static .what__step { position: static; pointer-events: auto; }
.what--static .what__body { display: grid; justify-items: center; gap: var(--space-6); block-size: auto; }
.what--static .what__step .what__frame { --fw: 150px; position: relative; inset: auto; margin-block: 56px; transform: rotate(-30deg); clip-path: none; opacity: 1; transition: none; }
.what--static .what__step .what__frame > img, .what--static .what__step .what__frame > .media-placeholder { transform: translate(-50%, -50%) rotate(30deg); transition: none; }
.what--static .what__step .what__copy { position: static; inline-size: auto; max-inline-size: 30rem; justify-self: stretch; opacity: 1; transform: none; transition: none; }
/* موبايل: بدل ما الحالات التلاتة تنكدّس تحت بعض (3 شاشات تمرير)، بطاقات بتنسحب بالعرض: وحدة بالشاشة وطرف
   الجاية باين، والنقاط جنب العنوان بتبيّن وين انت. الصورة المايلة أصغر عشان البطاقة كلها تنشاف مرة وحدة */
@media (max-width: 760px) {
  .what--static .what__stage { padding-block: var(--space-16); gap: var(--space-6); }
  .what--static .what__dots { position: static; display: flex; flex-direction: row; gap: var(--space-3); transform: none; }
  .what--static .what__steps {
    display: flex; gap: var(--space-3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); scroll-padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
  }
  .what--static .what__steps::-webkit-scrollbar { display: none; }
  .what--static .what__step { flex: 0 0 84%; scroll-snap-align: start; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg) 4%, transparent); }
  .what--static .what__body { padding: var(--space-5); gap: var(--space-4); }
  .what--static .what__step .what__frame { --fw: 92px; margin-block: 12px; }
  .what--static .what__copy { gap: var(--space-2); }
  .what--static .what__copy h3 { font-size: var(--size-lg); }
  .what--static .what__copy p { font-size: var(--size-base); line-height: 1.7; }
}

/* ---------- 6 · الكتالوج ---------- */
.tabs {
  display: flex; gap: var(--space-2);
  margin-block-end: clamp(var(--space-8), 4vw, var(--space-12));
  overflow-x: auto; scrollbar-width: none;
  padding-block: 4px; margin-inline: -4px; padding-inline: 4px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  min-block-size: 44px; padding: var(--space-2) var(--space-6);
  border: 1.5px solid var(--border); border-radius: var(--radius-full);
  background: transparent; color: var(--fg);
  font-weight: var(--weight-semibold); cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tab:hover { border-color: var(--fg); }
.tab[aria-selected="true"] { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

.catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(var(--space-4), 2.4vw, var(--space-8)); }
.catalog .card__meta { color: var(--color-cream-50); }
@media (max-width: 600px) {
  .catalog__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .catalog .card--product .card__body { padding: var(--space-3); }
  .catalog .card__title { font-size: var(--size-sm); }
  .catalog .card__meta { display: none; }
  .catalog .card__price { font-size: var(--size-base); }
  .catalog .card--product .card__row { margin-block-start: var(--space-1); }
  .catalog .card--product .badge { inset-block-start: var(--space-2); inset-inline-start: var(--space-2); }
}
/* زر «أضف» بأيقونة بس على الشاشات الصغيرة */
@media (max-width: 600px) {
  .card__add span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .card__add { padding-inline: var(--space-3); }
}

.catalog__empty { grid-column: 1 / -1; display: grid; justify-items: start; gap: var(--space-4); padding-block: var(--space-12); color: var(--fg-muted); font-size: var(--size-lg); }
.catalog__empty p { margin: 0; }
/* زر «اعرض الكل» (موبايل): تحت أول 8 بطاقات، بعرض الشبكة كلها */
.catalog__more { grid-column: 1 / -1; display: flex; justify-content: center; padding-block-start: var(--space-4); }
.catalog__more .btn { inline-size: 100%; max-inline-size: 22rem; }
/* «قريباً» — فوق عنوان النباتات الخارجية بـ«شو عنّا» (لسا ما في صور) */
.soon-pill {
  display: inline-flex; align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  font-size: var(--size-xs); font-weight: var(--weight-semibold); line-height: 1.8;
}
/* النبتة الطبيعية: نفس بطاقة الصناعي (صورة كاملة + تدرّج غامق + نص كريمي)، بس صورتها بخلفية بيضاء.
   - الصورة (c##.jpg) فيها النبتة بالجزء الفوقاني، ونفس الـ multiply بيحوّل أبيضها لكريمي دافي (متل ألوان صور الصناعي)
   - التدرّج أقصر من تدرّج الديزاين سيستم (اللي بيوصل لـ 62% من ارتفاع البطاقة وكان رح يغمّق القوار) */
.card--natural { background: linear-gradient(to bottom, var(--color-cream-50), var(--color-peach-200)); }
.card--natural .card__media { mix-blend-mode: multiply; }
.card--natural::after {
  /* النبتة بتخلّص عند 60% من فوق (= 40% من تحت)، فالتدرّج لازم يصير شفاف قبلها؛ والعنوان لازم يضل على أخضر كفاية للقراءة */
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-green-950) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-green-950) 90%, transparent) 24%,
    color-mix(in srgb, var(--color-green-950) 72%, transparent) 29%,
    color-mix(in srgb, var(--color-green-950) 36%, transparent) 34%,
    color-mix(in srgb, var(--color-green-950) 8%, transparent) 38%,
    transparent 41%);
}
@media (max-width: 600px) {
  /* بطاقات ضيقة (عمودين): العناوين الطويلة بتاخد سطرين وبتطلع فوق القوار. فالبطاقة أطول شوي، والصورة أصغر شوي،
     والتدرّج بالبكسل (مش بالنسبة المئوية) عشان يغطي النص بالضبط وينتهي تحت القوار */
  .card--natural { aspect-ratio: 3 / 4.6; }
  .card--product.card--natural .card__media {
    inset: 0 5% auto 5%; inline-size: 90%; block-size: auto; aspect-ratio: 3 / 4;
    /* حواف الصورة الجانبية بتذوب بخلفية البطاقة (بعض الصور فيها تدرّج رمادي خفيف عند الحافة) */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
  .card--natural::after {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--color-green-950) 94%, transparent) 0,
      color-mix(in srgb, var(--color-green-950) 90%, transparent) 78px,
      color-mix(in srgb, var(--color-green-950) 72%, transparent) 100px,
      color-mix(in srgb, var(--color-green-950) 36%, transparent) 116px,
      color-mix(in srgb, var(--color-green-950) 8%, transparent) 128px,
      transparent 135px);
  }
}
/* منتج بدون سعر (لسا ما انحط): «اسأل عن السعر» مكان الرقم */
.price-ask { font-size: .72em; font-weight: var(--weight-semibold); opacity: .85; }
.product-dialog__price .price-ask { font-size: var(--size-lg); }
.product-dialog__buy .qty[hidden] { display: none; }

/* ---------- 6b · نافذة المنتج ---------- */
.product-dialog {
  inline-size: min(920px, calc(100vw - 32px));
  max-block-size: calc(100svh - 32px);
  padding: 0; border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: auto;
}
/* grid-auto-rows: max-content — بدونها، لما المحتوى (مع «أشجار مشابهة») بيصير أطول من الشاشة، صف الصورة بينضغط وبيطلع العنوان فوقها */
.product-dialog[open] { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; animation: dialog-in .5s cubic-bezier(.16, 1, .3, 1); }
.product-dialog::backdrop { background: rgb(0 33 30 / .72); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.product-dialog__media { position: relative; min-block-size: 420px; background: var(--color-green-950); }
.product-dialog__img { position: absolute; inset: 0; }
/* contain: الزبون لازم يشوف المنتج كامل. صور الأشجار طولية (9:16) فبـ cover كانت بتنقص ثلث لنص الشجرة */
.product-dialog__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }

/* التالي والسابق: أسهم دائرية على الصورة (السابق عالجهة اللي بتبدأ منها القراءة)، وعدّاد تحت */
.pd-nav {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 2;
  display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--color-cream-50) 90%, transparent); color: var(--color-green-900);
  box-shadow: var(--shadow-sm); font-size: 22px;
  transition: background-color .2s ease, transform .2s ease;
}
.pd-nav--prev { inset-inline-start: var(--space-3); }
.pd-nav--next { inset-inline-end: var(--space-3); }
.pd-nav:hover { background: var(--color-cream-50); transform: scale(1.06); }
.pd-nav:focus-visible { outline: 2px solid var(--color-green-900); outline-offset: 2px; }
.pd-nav[hidden], .pd-count[hidden] { display: none; }
.pd-count {
  position: absolute; inset-block-end: var(--space-3); inset-inline: 0; z-index: 2;
  margin: 0 auto; inline-size: fit-content; padding: 2px var(--space-4);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-green-950) 80%, transparent); color: var(--color-cream-50);
  font-size: var(--size-sm); font-variant-numeric: tabular-nums;
}
/* أشجار مشابهة: آخر النافذة بعرضها كله */
.pd-similar {
  grid-column: 1 / -1;
  padding: var(--space-6) clamp(var(--space-6), 4vw, var(--space-12)) clamp(var(--space-6), 4vw, var(--space-12));
  border-block-start: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
}
.pd-similar[hidden] { display: none; }
.pd-similar h3 { margin: 0 0 var(--space-4); font-size: var(--size-xl); font-weight: var(--weight-bold); line-height: 1.3; }
.pd-similar__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (max-width: 680px) { .pd-similar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sim {
  display: grid; gap: var(--space-1); align-content: start;
  inline-size: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.sim__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); margin-block-end: var(--space-1); background: var(--color-green-950); }
.sim__img--natural { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--border); }
.sim__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.sim:hover .sim__img img { transform: scale(1.05); }
.sim:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: var(--radius-md); }
.sim__name { font-size: var(--size-sm); font-weight: var(--weight-semibold); line-height: 1.35; }
.sim__meta { font-size: var(--size-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .product-dialog.is-swapping .product-dialog__img,
  .product-dialog.is-swapping .product-dialog__body > :not(.product-dialog__close) { animation: pd-swap .32s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes pd-swap { from { opacity: 0; transform: translateX(var(--swap-x, 18px)); } }
.product-dialog__body { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: clamp(var(--space-6), 4vw, var(--space-12)); }
/* الإغلاق: دائرة خضرا بحلقة كريمية (بتبيّن فوق الصورة الغامقة والبيضا) بزاوية النافذة، وبتضل ظاهرة (sticky)
   مهما نزل الزبون. بتغطي كل صفوف النافذة (span 3) عشان الـ sticky يضل شغّال لآخرها، فالصورة والنص بصفوف محددة */
.product-dialog__close {
  position: sticky; inset-block-start: var(--space-3); z-index: 5;
  grid-column: 1 / -1; grid-row: 1 / span 3; align-self: start; justify-self: end;
  margin: var(--space-3);
  display: grid; place-items: center; inline-size: 48px; block-size: 48px;
  border: 2px solid var(--color-cream-50); border-radius: 50%;
  background: var(--color-green-900); color: var(--color-cream-50);
  font-size: 24px; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 33 30 / .35);
  transition: transform .45s cubic-bezier(.475, .425, 0, .995), background-color .2s ease;
}
.product-dialog__close i { -webkit-text-stroke: .6px currentColor; } /* الأيقونة الرفيعة أتقل شوي */
.product-dialog__close:hover { transform: rotate(90deg); background: var(--color-green-950); }
.product-dialog__close:focus-visible { outline: 2px solid var(--color-green-900); outline-offset: 3px; }
.product-dialog__media { grid-row: 1; grid-column: 1; }
.product-dialog__body { grid-row: 1; grid-column: 2; }
.product-dialog .pd-similar { grid-row: 2; }
.product-dialog__cat { font-size: var(--size-sm); color: var(--fg-muted); }
.product-dialog__title { font-size: clamp(25px, 3vw, 39px); font-weight: var(--weight-bold); line-height: 1.25; padding-inline-end: var(--space-16); }
.product-dialog__size { color: var(--fg-muted); }
.product-dialog__price { font-size: var(--size-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.product-dialog__desc { max-inline-size: 60ch; line-height: 1.8; }
.product-dialog__specs { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.product-dialog__specs li { display: flex; align-items: start; gap: var(--space-2); line-height: 1.6; }
.product-dialog__specs i { flex: none; margin-block-start: .25em; color: var(--success); font-size: 18px; }
.product-dialog__specs[hidden], .product-dialog__desc[hidden] { display: none; }
.product-dialog.is-natural .product-dialog__media { background: var(--color-white); }
.link-copy {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: 44px; padding: 0; border: 0; background: none;
  color: var(--fg-muted); font-size: var(--size-sm); cursor: pointer;
  text-decoration: underline; text-underline-offset: .3em;
}
.link-copy:hover { color: var(--fg); }
.link-copy i { font-size: 18px; }

.product-dialog__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-start: var(--space-4); }
@media (max-width: 680px) {
  .product-dialog[open] { grid-template-columns: 1fr; }
  .product-dialog__body { grid-row: 2; grid-column: 1; }
  .product-dialog .pd-similar { grid-row: 3; }
  /* ارتفاع مناسب لصورة طولية: ما بياخد كل الشاشة (الاسم والسعر وزر الإضافة لازم يبيّنوا تحتها) */
  .product-dialog__media { min-block-size: 0; aspect-ratio: auto; block-size: min(66svh, 135vw); }
}

.qty { display: inline-flex; align-items: center; gap: var(--space-1); border: 1.5px solid var(--border); border-radius: var(--radius-full); padding: 2px; }
.qty output, .qty .qty__n { min-inline-size: 2ch; text-align: center; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.qty--sm .icon-btn { inline-size: 36px; block-size: 36px; font-size: 18px; }

/* ---------- 6c · السلة ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgb(0 33 30 / .6);
  opacity: 0; transition: opacity .4s ease;
}
.drawer-backdrop.is-open { opacity: 1; }
.drawer-backdrop[hidden], .cart-drawer[hidden] { display: none; }
.cart-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 61;
  inline-size: min(440px, 100vw);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-md);
  transform: translateX(-100%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.cart-drawer.is-open { transform: none; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-block-end: 1px solid var(--border); }
.cart-drawer__head h2 { font-size: var(--size-xl); font-weight: var(--weight-bold); }
.cart-drawer__scroll { flex: 1; overflow-y: auto; padding: var(--space-6); display: grid; align-content: start; gap: var(--space-6); }
.cart-lines { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-3); align-items: center; }
.cart-line__thumb { position: relative; overflow: hidden; inline-size: 64px; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-green-950); }
.cart-line__thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cart-line__name { font-weight: var(--weight-semibold); line-height: 1.4; }
.cart-line__price { font-size: var(--size-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.cart-line__ctrl { display: grid; justify-items: end; gap: 2px; }
.cart-line__remove { font-size: var(--size-xs); color: var(--fg-muted); background: none; border: 0; padding: var(--space-1); cursor: pointer; text-decoration: underline; }
.cart-line__remove:hover { color: var(--danger); }
.cart-empty { display: grid; justify-items: start; gap: var(--space-4); color: var(--fg-muted); }
.cart-empty[hidden], .cart-form[hidden] { display: none; }
.cart-form { display: grid; gap: var(--space-4); padding-block-start: var(--space-6); border-block-start: 1px solid var(--border); }
.cart-form textarea { resize: vertical; min-block-size: 72px; }
.optional { font-weight: var(--weight-regular); color: var(--fg-muted); }
.cart-drawer__foot { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-6); border-block-start: 1px solid var(--border); background: var(--surface); }
/* منطقة التوصيل: ثلاث خيارات (راديو) بالسعر جنب كل واحد */
.zones { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--space-2); }
.zones .field__label { padding: 0; margin-block-end: var(--space-1); }
.required { font-weight: var(--weight-regular); color: var(--fg-muted); }
.zones__list { display: grid; gap: var(--space-2); }
.zone { position: relative; display: block; cursor: pointer; }
.zone__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.zone__body {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-block-size: 48px; padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color .2s ease, background-color .2s ease;
}
.zone__body strong { font-weight: var(--weight-semibold); }
.zone__fee { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zone:hover .zone__body { border-color: var(--fg-muted); }
.zone__input:checked + .zone__body { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--fg); }
.zone__input:focus-visible + .zone__body { outline: 2px solid var(--fg); outline-offset: 2px; }
#zone-error.is-shown { display: block; }
.cart-sum { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--size-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--size-lg); }
.cart-total strong { font-size: var(--size-2xl); font-variant-numeric: tabular-nums; }
.cart-send { inline-size: 100%; }
.cart-send[aria-disabled="true"] { pointer-events: none; }
.cart-note { font-size: var(--size-xs); color: var(--fg-muted); line-height: 1.6; }

/* ---------- التنبيهات ---------- */
.toast-region {
  position: fixed; inset-block-end: var(--space-6); left: 50%; z-index: 80;
  display: grid; gap: var(--space-2); justify-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast-region .toast { animation: toast-in .5s cubic-bezier(.16, 1, .3, 1); }
.toast-region .toast.is-leaving { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- 7 · كيف تطلب ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-6), 4vw, var(--space-16)); margin: 0; padding: 0; list-style: none; }
.step { display: grid; gap: var(--space-3); align-content: start; padding-block-start: var(--space-6); border-block-start: 1.5px solid var(--fg); }
.step__num { font-size: var(--size-4xl); font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--size-xl); font-weight: var(--weight-bold); }
.step p { color: var(--fg-muted); max-inline-size: 32ch; }
.care-title { margin-block: clamp(var(--space-16), 9vw, 128px) var(--space-6); font-size: var(--size-2xl); font-weight: var(--weight-bold); }
.care { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.care .card--info p { line-height: 1.75; }
@media (max-width: 860px) { .steps, .care { grid-template-columns: 1fr; } }

/* ---------- 8 · الفوتر ---------- */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--color-green-950);
  padding-block: clamp(96px, 12vw, 176px) var(--space-8);
}
.site-footer::before {
  content: ""; position: absolute; inset-block-start: -10%; inset-inline-end: -10%;
  inline-size: min(60vw, 640px); aspect-ratio: 1;
  background-color: var(--color-gold-400); opacity: .06;
  -webkit-mask: var(--motif-leaf-corner) center / contain no-repeat;
  mask: var(--motif-leaf-corner) center / contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
.site-footer .container { position: relative; }
.site-footer__statement { font-size: clamp(52px, 10.5vw, 136px); line-height: 1.08; }
.site-footer__connect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); margin-block: var(--space-8) clamp(var(--space-16), 9vw, 128px); }
.site-footer__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* بطاقة الحسابات — نفس بطاقة Uiverse (vinodjangid07/bitter-eagle-34) بنفس توقيتها، بس بألوان الحاكورة ومعكوسة للعربي:
   القطع بتطلع من الزاوية اليمين التحتانية (بالأصل الشمال)، و«تابعونا» بتطلع للزاوية الشمال الفوقانية */
.socials {
  --sc: 220px;
  position: relative; flex: none;
  inline-size: var(--sc); block-size: var(--sc);
  border: 2px solid color-mix(in srgb, var(--color-cream-50) 70%, transparent);
  border-radius: 30px; overflow: hidden;
  box-shadow: rgba(0, 0, 0, .28) 0 7px 29px 0;
  transition: transform 1s ease-in-out;
}
.socials__bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-green-900) 0%, var(--color-green-600) 50%, var(--color-gold-400) 100%); }
.socials__label {
  position: absolute; left: 50%; bottom: 50%; z-index: 1;
  transform: translate(-50%, 50%);
  font-size: 1.35em; font-weight: var(--weight-bold); color: var(--color-cream-50); white-space: nowrap;
  transition: transform .6s ease-in-out;
}
.socials__box {
  position: absolute; z-index: 2;
  display: block; padding: 10px; text-align: left; text-decoration: none;
  background: color-mix(in srgb, var(--color-cream-50) 30%, transparent);
  border-block-start: 2px solid var(--color-cream-50);
  border-inline-end: 1px solid var(--color-cream-50); /* بالعربي = الحد الشمال (بالأصل اليمين) */
  border-radius: 13% 10% 0% 42% / 12% 10% 0% 75%;
  box-shadow: rgba(0, 0, 0, .3) 7px 7px 29px 0;
  transform-origin: bottom right;
  color: color-mix(in srgb, var(--color-cream-50) 80%, transparent);
  transition: right 1s ease-in-out, bottom 1s ease-in-out, color .5s ease-in-out;
}
.socials__box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .5s ease-in-out; }
.socials__box i { position: relative; display: block; font-size: 22px; line-height: 1; transition: filter .5s ease-in-out; }
.socials__box:hover, .socials__box:focus-visible { color: #fff; }
.socials__box:hover::before, .socials__box:focus-visible::before { opacity: 1; }
.socials__box:hover i, .socials__box:focus-visible i { filter: drop-shadow(0 0 5px #fff); }
.socials__box:focus-visible { outline: 2px solid var(--color-cream-50); outline-offset: -4px; }
/* 4 حسابات (بالأصل 3 + قطعة فاضية): الصغيرة كبّرناها لـ 20% عشان تنكبس */
.socials__box--ig { inline-size: 76%; block-size: 76%; right: -76%; bottom: -76%; }
.socials__box--tt { inline-size: 56%; block-size: 56%; right: -56%; bottom: -56%; transition-delay: .2s; }
.socials__box--fb { inline-size: 36%; block-size: 36%; right: -36%; bottom: -36%; transition-delay: .4s; }
.socials__box--wa { inline-size: 20%; block-size: 20%; right: -20%; bottom: -20%; padding: 8px; transition-delay: .6s; }
.socials__box--wa i { font-size: 19px; }
.socials__box--ig::before { background: radial-gradient(circle at 70% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.socials__box--tt::before { background: radial-gradient(circle at 70% 107%, #25F4EE 0%, #111 55%, #FE2C55 100%); }
.socials__box--fb::before { background: radial-gradient(circle at 70% 107%, #6fa8ff 0%, #1877F2 90%); }
.socials__box--wa::before { background: radial-gradient(circle at 70% 107%, #9cf5b9 0%, #25D366 90%); }
/* الفتح: المؤشر، أو التركيز بالكيبورد */
.socials:hover { transform: scale(1.1); }
.socials:hover .socials__box, .socials:focus-within .socials__box { right: -1px; bottom: -1px; }
.socials:hover .socials__label, .socials:focus-within .socials__label { transform: translate(calc(-50% - 56px), calc(50% - 74px)); }
/* اللمس (ما في مؤشر) وتقليل الحركة: مفتوحة من الأول */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .socials .socials__box { right: -1px; bottom: -1px; }
  .socials .socials__label { transform: translate(calc(-50% - 56px), calc(50% - 74px)); }
  .socials:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .socials, .socials__box, .socials__label { transition: none; } }
.site-footer__grid {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-8) var(--space-12); align-items: end;
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border);
}
.site-footer__logo { block-size: 110px; inline-size: auto; }
.site-footer__info { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: 0; padding: 0; list-style: none; color: var(--fg-muted); }
.site-footer__info li { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__info i { color: var(--color-gold-400); font-size: 20px; }
.site-footer__info a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; color: inherit; text-decoration: none; transition: color .2s ease; }
.site-footer__info a:hover { color: var(--fg); text-decoration: underline; }
.site-footer__copy { font-size: var(--size-sm); color: var(--fg-muted); }
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr; align-items: start; }
  .site-footer__info { flex-direction: column; }
}

/* ---------- اللمس: كل زر 44px أو أكبر على الموبايل ---------- */
@media (pointer: coarse) {
  .btn--sm { min-block-size: 44px; }
  .qty--sm .icon-btn { inline-size: 44px; block-size: 44px; }
  .cart-line__remove { min-block-size: 44px; }
}

/* ---------- الظهور مع التمرير ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
.js-motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

/* ---------- حركة الأزرار ----------
   فكرتها من Uiverse (adeladel522: زر بلمعة)، بأسلوب الحاكورة: لما يجي المؤشر (أو التركيز بالكيبورد) الزر بيكبر 4%،
   ولمعة كريمية بتعدّي عليه من اليمين للشمال (اتجاه القراءة بالعربي) وبتعيد كل 1.6 ثانية، والأيقونة بتتقدّم 4px لقدّام
   (للشمال)، وظل أخضر خفيف تحته. الزر الشفاف (secondary) لمعته بلون نصّه. على اللمس وتقليل الحركة: بدون حركة.
   ::after مش ::before، لأن ::before بالديزاين سيستم للدوّارة وقت التحميل (aria-busy). */
.btn { position: relative; transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .15s ease, box-shadow .45s cubic-bezier(.16, 1, .3, 1), background-color .2s ease; }
.btn i { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.btn::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(240deg, transparent 30%, color-mix(in srgb, var(--color-cream-50) 85%, transparent), transparent 70%) no-repeat;
  background-size: 90px 100%;
  background-position: calc(100% + 90px) 0; /* برّا الزر من اليمين */
  opacity: .55;
}
.btn--secondary::after { background-image: linear-gradient(240deg, transparent 30%, color-mix(in srgb, currentColor 30%, transparent), transparent 70%); opacity: 1; }
@keyframes btn-shine {
  from { background-position: calc(100% + 90px) 0; }
  60%, to { background-position: -90px 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    transform: scale(1.04);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-green-950) 28%, transparent);
  }
  .btn:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible)::after { animation: btn-shine 1.6s ease-out infinite; }
  .btn:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) i { transform: translateX(-4px); }
  .btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.98); transition-duration: .12s; }
}

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