/* مجوهرات الخميس — نظام التصميم v6 «الأونيكس والذهب» (2026-08-02)
 *
 * v5 كان ورقاً أبيض ناصعاً. نظيف، لكنه يقرأ «متجر إلكتروني عادي» لا «دار
 * مجوهرات» — وهي شكوى مصطفى الحرفية. v6 يقلب الأساس إلى أونيكس ويبني
 * الفخامة على خمسة مبادئ، لا على قلب الألوان وحده:
 *
 *   أ. **نظام أسطح لا سطح واحد.** الأونيكس (--paper) للصفحة، وأغمق منه
 *      (--black) للشريط العلوي والفوتر والهيرو، وأفتح قليلاً (--paper-2)
 *      للخاتمة. الأسود الواحد المسطّح يقرأ رخيصاً.
 *   ب. **الفاترينة.** بلاطة المنتج تبقى عاجية فاتحة على الأونيكس — ليست
 *      خطأً بل النظام: صور الدار خلفياتها وظلالها مخبوزة على فاتح، وقلبها
 *      يترك هالة رمادية. فتُقرأ كصندوق عرض مضاء بإطار ذهبي وهالة تحته.
 *   ج. **الذهب خيط لا مساحة.** خيوط تتلاشى، وإطارات شعرية، وحروف تسميات.
 *      المساحة الذهبية تقرأ صفراء رخيصة على الشاشة مهما ضُبطت.
 *   د. **التباعد العربي.** التسميات كانت على .2em–.3em وهو مقياس لاتيني؛
 *      العربية متّصلة الحروف فيمطّها ويجعلها تبدو واجهة مترجمة. نُزّلت إلى
 *      .06em–.14em، وارتفع سطر العناوين من 1.06 إلى 1.2+ (الرقعة لها نزول
 *      طويل يُقصّ عند 1.06).
 *   هـ. **الحجم.** الشعار والعناوين وأسماء القطع كبرت درجة كاملة. الصِّغر
 *      يقرأ خجلاً، والدار لا تخجل من اسمها.
 *
 * ملاحظات v4 الأصلية التي ما زالت سارية:
 *
 * v3 كان قالباً: هيرو ملء الشاشة، بطاقات شمبانيا ممتلئة، تناوب منتظم
 * رملي/أسود، وكل عنوان بخط العرض. قرأ كموقع جاهز لا كدار مجوهرات.
 * v4 يعيد البناء على مبدأ واحد: **القطعة هي الحدث، لا البطاقة.**
 *
 *   ١. لا مساحات ممتلئة. الشمبانيا انتهت كخلفية؛ بقيت خيوطاً شعرية
 *      وتفاصيل دقيقة. الذهب تفصيل لا مسطّح — هذا وحده أزال طابع البانر.
 *   ٢. الصور تُوحَّد قبل CSS (tools/import-catalogue-images.py): كل قطعة
 *      على --paper-3 بنسبة 1:1 كالمصدر. الشبكة صارت تقرأ كنظام.
 *   ٣. سلّم طباعي صارم: Aref Ruqaa للعرض الكبير فقط (وللعناوين الكبرى
 *      وحدها)، وTajawal لكل ما عداه بأحجام محدودة ومتباعدة الحروف.
 *   ٤. الفراغ هو الفخامة: المسافة بين الأقسام clamp(6rem,12vw,11rem).
 *   ٥. إيقاع تحريري لا تناوب منتظم: الأسود إطار محدود (الهيرو والخاتمة)
 *      لا شريطاً يتكرر.
 *   ٦. الشبكة موحّدة لا «قطعة بطلة»: جُرّب أن تأخذ الأولى عمودين فأنتج
 *      صفاً أخيراً مبتوراً — عدد القطع متغيّر ولا يضمن امتلاء الصف.
 *   ٧. لا تُقصّ صورة قطعة أبداً: النسبة 1:1 كالمصدر، والحجم بالعرض وحده.
 *      (كانت 4:5 حتى 2026-07-30، فكانت تضيف هوامش تحت المنتج وتقصّ جوانب
 *      صور الموديل. صور الدار كلها مربّعة، فالمربّع هو الصفر قصّاً.)
 */

:root{
  /* v7 — الصفحة بيضاء ناصعة (قرار مصطفى 2026-08-03، بدل أونيكس v6).
     v5 كانت بيضاء ورُفضت لأنها «تقرأ متجراً عادياً»، فلا نعيدها كما كانت:
     الأبيض هنا **فراغ** لا لوح فارغ — جُزر داكنة محدودة (الشريط العلوي،
     الهيرو، الخاتمة، الفوتر) تؤطّر الصفحة، وكل ما بينها بياض وخيوط.

     ⚠️ آلية القلب: التوكنات هنا هي **سياق الفاتح**، والجُزر الداكنة تعيد
     تعريف نفس الأسماء داخلها (انظر كتلة «الجُزر الداكنة» تحت). لا تكتب
     لوناً صريحاً داخل جزيرة داكنة — اترك التوكن يرثه، فتبقى الصفحة
     قابلة للقلب مرة أخرى بتغيير كتلتين لا بمطاردة مئة مُحدِّد.

     --paper-3 سطح بلاطة المنتج ويطابق تماماً خلفية صور الكتالوج المخبوزة.
     نُقلت الصور المسطّحة الأربع إلى #ffffff بـ tools/retint-catalogue.py،
     فصارت البلاطة والصفحة لوناً واحداً بلا مربّع رمادي تحت القطعة.
     ⚠️ صورتا الإسورتين (cluster/flower-tennis) مقصوصتان من صورة أجواء
     بخلفية بيج، فبلاطتاهما تبقيان صورتين لا سطحاً — بانتظار تصوير منتج.

     --ivory حبر/سطح فاتح دائماً، يُستعمل **داخل الجُزر الداكنة** وحدها.

     ═══ v8 — ألوان الهوية 2026 (concepts/rebrand-2026) ═══════════════
     الورق صار ورق دليل الهوية `#F7F4ED` لا أبيض ناصعاً، والأونيكس
     `#0B0B0C` هو الجُزر الداكنة، والعاجي `#EDE7DC` هو السطح المرتفع.
     ⚠️ `--paper-3` وحده بقي `#ffffff` — القاعدة الثابتة أنه يطابق خلفية
     صور المنتج المخبوزة، والصور لا تُمسّ (قرار مصطفى 2026-08-06). الفرق
     بينه وبين الورق ثلاث درجات، فبلاطة القطعة تُقرأ **فاترينة مضاءة**
     داخل إطار شعري لا مربّعاً أبيض شارداً — وهذا مبدأ «الفاترينة» نفسه
     الذي بُني عليه v6.
     ═══════════════════════════════════════════════════════════════ */
  --paper:#F7F4ED;         /* الورق — خلفية الصفحة (ورق دليل الهوية) */
  --paper-2:#EDE7DC;       /* العاجي — سطح مرتفع: الدرج، خانة التواصل، البحث */
  --paper-3:#ffffff;       /* الفاترينة — يطابق خلفية صور المنتج تماماً */
  --ivory:#EDE7DC;         /* العاجي — حبر/سطح فاتح دائماً (داخل الداكن) */

  /* الحبر — حبر الهوية، ورأس القلم أونيكس. */
  --ink:#141416;
  --ink-2:#57534B;         /* الرمادي الدافئ من الدليل (Soft) */
  --ink-head:#0B0B0C;      /* أونيكس للعناوين — يُقلب داخل الجُزر الداكنة */
  --black:#0B0B0C;         /* الأونيكس — أرضية الجُزر الداكنة */

  /* ═══ الذهب: لون واحد مسطّح، ودرجتان لقراءته ═══════════════════════
     `--gold-brand` هو ذهب الهوية `#C9A227` بلا تدرّج — لون **العلامة**
     نفسها لا لون النص. تباينه على الورق 2.2:1 فلا يحمل حرفاً واحداً،
     وعلى الأونيكس 8.1:1 فيظهر هناك بكامل قوّته كما يُطبع رقائق ذهب.
     `--gold` نسخته المُظلمة بنفس الدرجة اللونية (45°) لنصوص الورق
     (5.2:1 على الورق و4.6:1 على العاجي)، و`--gold-lt` للتحويم.
     `--gold-hair` هو الذهب الفاتح `#E3C86A` وهو **للخيوط الشعرية فقط**
     بنصّ الدليل، ولا يُكتب به نصّ على أي أرضية. */
  --gold-brand:#C9A227;
  --gold:#7E6311;
  --gold-lt:#8C6F14;
  --gold-hair:#E3C86A;
  --gold-on-dark:#C9A227;
  --gold-lt-on-dark:#D8B441;
  --gold-dim:rgba(201,162,39,.34);

  --sand:#EDE7DC;
  /* الحجر `#8A857D` لون الدليل للحدود والنص الثانوي. على الورق يعطي
     3.3:1 وهو دون الحدّ للنص الصغير، فنسخة النص أُظلمت بنفس الدرجة
     (4.8:1) وبقي الحجر نفسه للحدود و`--muted-on-dark` (5.4:1). */
  --muted:#6F6B64;
  --muted-on-dark:#8A857D;
  --stone:#8A857D;
  --line:#DED8CC;          /* خط الدليل — كان مستعملاً بلا تعريف */
  --burgundy:#6B2231;      /* الداخل فقط (بطانة العلبة) — لا سطح ولا واجهة */

  /* الخيوط الشعرية على الورق: حبر شفاف لا أبيض شفاف. */
  --hair:rgba(11,11,12,.14);
  --hair-2:rgba(11,11,12,.08);
  --hair-on-dark:rgba(237,231,220,.18);

  --wa:#25D366;

  /* ═══ الخطوط (هوية 2026) ═══════════════════════════════════════════
     الدليل يفصل بين ثلاثة أدوار، وكان الخلط بينها أول خطأ في التطبيق:
       · **الاسم** بخط كوفي حديث مفتوح العيون → Reem Kufi، وهو للشعار
         وحده لا للعناوين. (استُشير Codex 2026-08-06 وصحّح هذا تحديداً.)
       · **العناوين** باتجاه Al Bayan في جدول الدليل — نسخ حديث لا كوفي.
         Al Bayan خطّ نظام أبل لا يُنشر على الويب، والبديل المرخّص الأقرب
         بنيةً وروحاً هو **Scheherazade New** (SIL OFL): نسخ بتباين
         واضح ونهايات ممتدة، وهو التباين نفسه الذي يحمله Didot في
         الجانب اللاتيني — فيقرأ الطرفان أسرة واحدة.
         ⚠️ جُرّب **Amiri** أولاً ورُفض بالمعاينة: يرفع تنوين الضمّ في
         «بريقٌ» بعيداً فوق السطر حتى تُقرأ الحركة شاردة، وبمقاس الهيرو
         (86px) صار العيب أول ما تراه العين. وNoto Naskh سليم الحركات
         لكنه منخفض التباين ويقرأ خطّ واجهة نظام — وهي الشكوى التي
         أسقطت v5. Scheherazade يجمع الاثنين.
       · **المتن** Tajawal كما هو، و**اللاتيني** توقيعاً فقط.
     ⚠️ Aref Ruqaa (رقعة) خرج هنا. قرار docs/roadmap.md كان يحميه، وهذا
     الاستبدال بقرار مصطفى 2026-08-06 «طبّق الهوية على الموقع». */
  --f-head:'Scheherazade New',serif;
  --f-body:'Tajawal',system-ui,sans-serif;
  --f-mark:'Reem Kufi','Tajawal',sans-serif;
  --f-latin:'Bodoni Moda',Didot,'Didot LT STD',serif;

  --pad:clamp(20px,5vw,72px);
  --gap:clamp(6rem,12vw,11rem);   /* الفراغ بين الأقسام */
}

/* ------------------------------------------------------------------ *
 * الجُزر الداكنة (v7، ألوانها v8)
 *
 * الصفحة ورقية، وأربعة مواضع تبقى أونيكس لتؤطّرها: الشريط العلوي،
 * الهيرو، الخاتمة، الفوتر. كلٌّ منها **يعيد تعريف التوكنات نفسها** بدل أن
 * يكتب ألواناً صريحة، فكل قاعدة داخلها ترثها بلا تكرار: العنوان يصير
 * عاجياً، والذهب يصير ذهب الهوية المسطّح، والخيط يصير عاجياً شفافاً.
 * إضافة جزيرة جديدة = إضافة مُحدِّدها هنا فقط.
 *
 * ⚠️ الذهب الفاتح `--gold-hair` لا يدخل هنا: نصّ الدليل «لا تضع الذهب
 * الفاتح على أرضية داكنة». الأونيكس يأخذ `#C9A227` نفسه (8.1:1).
 * ------------------------------------------------------------------ */
.top,.hero,.cta,.footer{
  --ink:#EDE7DC;
  --ink-2:#C4BBAB;
  --ink-head:var(--ivory);
  --muted:var(--muted-on-dark);
  --gold:var(--gold-on-dark);
  --gold-lt:var(--gold-lt-on-dark);
  --gold-dim:rgba(201,162,39,.34);
  --line:rgba(237,231,220,.2);
  --hair:rgba(237,231,220,.16);
  --hair-2:rgba(237,231,220,.085);
}

*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
/* Lenis يقود التمرير بنفسه إطاراً بإطار عبر scrollTo. لو بقي
   scroll-behavior:smooth مفعّلاً صار كل إطار منه تمريراً ناعماً أصلياً فوق
   الآخر: بداية كسولة ثم ذيل يزحف طويلاً — وهذا ما لاحظه مصطفى 2026-08-02
   وهو الفرق عن furnobly.com (لا scroll-behavior عندها أصلاً). */
html.lenis{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
html.lenis-stopped{overflow:hidden}
[data-lenis-prevent]{overscroll-behavior:contain}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.85;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* الأونيكس المسطّح يقرأ رخيصاً. هالة دافئة واحدة في أعلى الصفحة تعطي
   عمقاً كأن الضوء يأتي من فوق الفاترينة — ثابتة ولا تتحرك مع التمرير. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(201,162,39,.035), transparent 62%),
    radial-gradient(90% 50% at 50% 108%, rgba(201,162,39,.022), transparent 60%);
}
body>*{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.15;letter-spacing:0}
.wrap{width:min(1320px,100% - var(--pad)*2);margin-inline:auto}

/* السلّم الطباعي — العرض الكبير وحده بخط الرقعة */
/* التباعد العربي: كانت التسميات على .2em–.3em، وهو تباعد لاتيني — العربية
   متّصلة الحروف فيمطّها التباعد الكبير ويجعلها تقرأ كواجهة مترجمة لا كدار
   عربية (استُشير Codex، 2026-08-02). نُزّلت كلها إلى .08em–.14em. */
/* النسخ يرفع الحركات فوق سطر الحرف وله نزول طويل تحته. عند 1.12 كانت
   الحركة تلامس السطر الذي فوقها والنزول يُقصّ، فارتفع سلّم العناوين
   كله إلى 1.35+ ليتنفّس. */
.display{font-family:var(--f-head);font-weight:700;line-height:1.35}
.label{
  font-family:var(--f-body);font-size:.72rem;font-weight:400;
  letter-spacing:.12em;color:var(--muted);
}
.num{font-size:.72rem;letter-spacing:.1em;color:var(--gold);font-weight:400}
.ast{color:var(--gold);font-size:.62em;vertical-align:.28em;padding-inline:.5em}

/* ---------- الشريط العلوي ---------- */
.top{
  background:var(--black);color:var(--gold);text-align:center;
  font-size:.7rem;letter-spacing:.12em;padding:12px 14px;font-weight:300;
  border-bottom:1px solid var(--gold-dim);
}

/* ---------- الهيدر ---------- */
/* هيدر متجر بصفّين: البحث والشعار وزر الواتساب فوق، والتنقّل تحته.
   أبيض دائماً وملتصق بأعلى الشاشة عند التمرير (sticky) — لم يعد يطفو
   فوق الهيرو، فلا يحتاج حجاباً تحته ولا نسخة كريمية من الشعار. */
/* الفخامة هنا فراغ وحجم: الصفّ أعلى والشعار أكبر (26px كان يقرأ كأيقونة
   تطبيق لا كاسم دار). الخلفية أونيكس نصف شفافة مع blur فيبقى الشعار
   مقروءاً وهو يمرّ فوق الصور عند التمرير. */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,244,237,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-2);
}
.head-main{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:clamp(18px,2vw,26px) var(--pad);
}
.logo{justify-self:center}
.wa-top{justify-self:end}

/* ---------- التوقيع (الشعار) ---------- *
 * علامة الخاء ثم خيط شعري ثم الاسم العربي وتحته اللاتيني. الترتيب في
 * RTL يضع العلامة يميناً تلقائياً — العربية تتصدّر، وهي قاعدة الدليل.
 *
 * العلامة SVG داخل الصفحة ترث `currentColor`: أونيكس على الورق، وذهب
 * الهوية داخل الجُزر الداكنة (السطر تحت). لا نسختان من ملف.
 *
 * ⚠️ الاسم هنا مضبوط بخط Reem Kufi من الويب. الدليل يشترط أن يُرسم
 * الاسم مرة واحدة بيد خطّاط ثم يُحوَّل إلى مسارات قبل الطباعة والمعدن.
 * على الشاشة النصّ الحيّ أصحّ (يُقرأ، يُفهرس، يكبر مع تكبير الخط)، لكن
 * **لا تُصدَّر هذه النسخة إلى مطبعة ولا إلى لوحة معرض**.
 * ------------------------------------------------------------------ */
.lock{
  display:inline-flex;align-items:center;gap:.6em;line-height:1;
  color:var(--ink-head);font-size:clamp(33px,3.5vw,43px);
}
.lock .kha{flex:none;width:1.06em;height:1.06em;display:block}
.lock-t{
  display:flex;flex-direction:column;gap:.19em;min-width:0;
  border-inline-start:1px solid var(--hair);padding-inline-start:.6em;
}
.lock-t b{
  font-family:var(--f-mark);font-weight:500;font-size:.52em;
  line-height:1.25;letter-spacing:0;white-space:nowrap;
}
.lock-t i{
  font-family:var(--f-latin);font-style:normal;font-weight:400;
  font-size:.203em;letter-spacing:.34em;text-indent:.34em;
  color:var(--stone);white-space:nowrap;
}
/* داخل الجُزر الداكنة: العلامة ذهب الهوية المسطّح والاسم عاجي. */
.footer .lock{color:var(--ivory)}
.footer .lock .kha{color:var(--gold)}
.footer .lock-t i{color:var(--muted)}
.lock--foot{font-size:44px;margin-block-end:22px}
.lock--side{font-size:30px}

/* البحث — حقل بيضاوي خفيف، ونتائجه تنسدل تحته مباشرة */
.search{position:relative;display:flex;align-items:center;gap:10px;
  justify-self:start;width:min(340px,100%);
  border:1px solid var(--hair);border-radius:999px;padding:9px 18px;color:var(--muted)}
.search:focus-within{border-color:var(--gold)}
.search input{
  border:0;outline:0;background:transparent;width:100%;
  font-family:var(--f-body);font-size:.82rem;font-weight:300;color:var(--ink);
}
.search input::placeholder{color:var(--muted);letter-spacing:.06em}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-out{
  position:absolute;top:calc(100% + 10px);inset-inline:0;z-index:70;
  background:var(--paper-2);border:1px solid var(--hair);
  box-shadow:0 24px 60px rgba(11,11,12,.14);max-height:min(60vh,420px);overflow:auto;
}
.search-out a{display:flex;flex-direction:column;gap:3px;padding:12px 18px;
  border-block-end:1px solid var(--hair-2);color:var(--ink);transition:background .2s}
.search-out a:last-child{border-block-end:0}
.search-out a:hover{background:var(--paper-3)}
.search-out span{font-size:.86rem}
.search-out small{color:var(--muted);font-size:.68rem;letter-spacing:.08em}
.search-none{margin:0;padding:14px 18px;color:var(--muted);font-size:.78rem}
.search-none a{display:inline;padding:0;border:0;color:var(--gold)}

/* صفّ التنقّل — تحت الشعار، بعرض الصفحة وفي الوسط */
.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(28px,3.4vw,46px);
  padding:0 var(--pad) 18px;font-size:.8rem;letter-spacing:.1em;font-weight:300}
.nav a{color:var(--ink);opacity:.68;position:relative;padding:6px 0;transition:opacity .3s,color .3s}
.nav a::after{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:inline-end;transition:transform .4s}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:inline-start}
.nav a.on{color:var(--gold);opacity:1}
/* يقابل حقل البحث في الطرف الآخر من الصفّ، فيأخذ شكله نفسه: نفس الحدّ الشعري
   ونفس الاستدارة الكاملة. كان مستطيلاً حادّ الزوايا بكلمة وحيدة، فقرأ كصندوق
   سائب أعلى الصفحة (مصطفى، 2026-07-30). */
.wa-top{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--hair);border-radius:999px;color:var(--ink);
  font-size:.74rem;letter-spacing:.08em;padding:10px 20px;
  white-space:nowrap;transition:.3s;font-weight:300;
}
.wa-top svg{flex:none;color:#25D366;transition:color .3s}
.wa-top:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wa-top:hover svg{color:var(--paper)}
.burger{display:none;gap:4px;background:none;border:0;cursor:pointer;padding:8px 6px;
  place-content:center;width:38px;height:38px}
.burger span{display:block;width:20px;height:1.4px;background:var(--ink);
  transition:transform .28s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}


/* ---------- الهيرو ---------- */
/* الصورة خلفية والنص فوقها. النص يبدأ من اليمين (RTL) فالحجاب يثقل من
   اليمين ويتلاشى إلى اليسار حيث القطعة.
   v6: الحجاب أونيكس لا حليبي. الحليبي كان منطقياً على موقع أبيض؛ على
   الأونيكس يُنتج ضباباً أبيض يطفئ الصورة. الأسود هنا لا يطفئ بل يعمّق —
   الصورة نفسها فاتحة ودافئة، والألماس يبرز على التعتيم لا يختفي فيه. */
.hero{
  position:relative;background:var(--black);overflow:hidden;
  min-height:clamp(600px,88svh,820px);display:flex;align-items:center;
  padding:clamp(3rem,6vw,5rem) 0;
}
/* السلايدات الأربع فوق بعضها، والظاهرة وحدها opacity:1 — تلاشٍ متقاطع
   بالـCSS بلا إعادة تخطيط. الرابط يغطي المساحة كلها فالسلايد نفسه يقود
   إلى فئته، والنص فوقه بـz-index أعلى. */
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.15s ease;
  z-index:0;pointer-events:none}
.hero-slide.on{opacity:1;pointer-events:auto}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:32% 28%}
.hero-slide.on .hero-bg{animation:kenburns 30s ease-out both}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
/* حجابان: أفقي يحمل النص من جهته، ورأسي خفيف من الأسفل يربط الهيرو
   بالأونيكس تحته فلا يُقرأ كصورة ملصوقة.
   الحجاب الأفقي له اتجاهان — واحد لكل جهة نص — لأن التدرّجات لا تُنتقل
   بالـtransition. فالاثنان مرسومان دائماً ويتبادلان الشفافية مع السلايد،
   فينتقل الظل مع النص بتلاشٍ لا بقفزة. */
.hero::before,.hero::after{content:'';position:absolute;inset:0;z-index:1;
  pointer-events:none;transition:opacity .9s ease}
.hero::after{opacity:1;
  background:
    linear-gradient(to left,
      rgba(11,11,12,.94) 0%,rgba(11,11,12,.86) 28%,
      rgba(11,11,12,.52) 48%,rgba(11,11,12,.14) 68%,rgba(11,11,12,.06) 100%),
    linear-gradient(to top, rgba(11,11,12,.52) 0%, transparent 26%)}
.hero::before{opacity:0;
  background:
    linear-gradient(to right,
      rgba(11,11,12,.94) 0%,rgba(11,11,12,.86) 28%,
      rgba(11,11,12,.52) 48%,rgba(11,11,12,.14) 68%,rgba(11,11,12,.06) 100%),
    linear-gradient(to top, rgba(11,11,12,.52) 0%, transparent 26%)}
.hero[data-text="left"]::after{opacity:0}
.hero[data-text="left"]::before{opacity:1}
/* النقاط: خرزة Perlee صغيرة لكل سلايد، واسم الفئة يظهر عند المرور —
   فالزائر يعرف إلى أين تقوده لا يخمّن. */
.hero-dots{position:absolute;z-index:3;inset-inline-end:var(--pad);bottom:clamp(22px,4vw,42px);
  display:flex;gap:14px;align-items:center}
.hero-dots button{background:none;border:0;cursor:pointer;padding:6px 2px;
  display:flex;align-items:center;gap:8px;color:var(--muted);
  font:inherit;font-size:.7rem;letter-spacing:.1em}
.hero-dots button::before{content:'';width:7px;height:7px;border-radius:50%;
  border:1px solid var(--gold-dim);background:transparent;
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.hero-dots button.on::before{background:var(--gold);border-color:var(--gold);transform:scale(1.15)}
.hero-dots button span{opacity:0;transition:opacity .25s ease;white-space:nowrap}
.hero-dots button.on span,.hero-dots button:hover span{opacity:1}
.hero-dots button:hover::before{border-color:var(--gold)}

.hero-in{position:relative;z-index:2;width:min(1320px,100% - var(--pad)*2);margin-inline:auto;
  display:flex}
/* جهة النص تتبع تكوين البانر: القطعة في جهة والنص في الجهة الفارغة
   (قرار مصطفى 2026-08-05، والقيمة في `HERO.slides[].text`). الموقع RTL
   فبداية السطر يمين، و`margin-inline-start:auto` تدفع النص يساراً. */
.hero-copy{max-width:min(620px,100%)}
.hero[data-text="left"] .hero-copy{margin-inline-start:auto}
/* النص لا ينزلق بين الجهتين — يتلاشى ويعود في مكانه الجديد. */
.hero-copy--in{animation:heroCopyIn .75s ease both}
@keyframes heroCopyIn{from{opacity:0}to{opacity:1}}
.hero-eyebrow{display:block;color:var(--gold);letter-spacing:.14em;font-size:.74rem;
  font-weight:300;margin-block-end:clamp(20px,2.8vw,30px)}
.hero h1{
  font-family:var(--f-head);font-weight:700;color:var(--ink-head);
  font-size:clamp(2.6rem,6vw,5.4rem);line-height:1.42;
  max-width:14ch;margin-block-end:clamp(22px,2.8vw,32px);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero h1 em{font-style:normal;color:var(--gold-lt)}
/* الخيط ذهب مسطّح صمّاء بلا تدرّج: الدليل يمنع التدرّج نصّاً — التدرّج
   محاولة تقليد لمعة المعدن على سطح مستوٍ ولا تُقنع، والمسطّح هو ما
   يُطبع رقائق ذهب فعلاً. */
.hero-rule{display:block;width:88px;height:1px;
  background:var(--gold);
  margin-block-end:clamp(22px,2.8vw,32px)}
.hero-row{display:block}
.hero p{color:var(--ink-2);font-size:1.05rem;max-width:36ch;line-height:1.9;
  margin:0 0 clamp(26px,3.6vw,38px);font-weight:300}
.hero-acts{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.scroll-cue{
  position:absolute;z-index:2;inset-block-end:clamp(20px,3vw,32px);
  inset-inline-start:max(var(--pad),calc(50% - 660px));
  display:flex;align-items:center;gap:12px;
  color:var(--muted);font-size:.68rem;letter-spacing:.1em;
}
.scroll-cue i{display:block;width:34px;height:1px;background:var(--hair);position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;inset:0;background:var(--gold);
  transform:translateX(100%);animation:cue 2.6s infinite}
@keyframes cue{0%{transform:translateX(100%)}55%,100%{transform:translateX(-100%)}}

/* ---------- الأزرار ---------- */
/* لا تعبئة ذهبية مسطّحة. الأساسي عاجي صلب على الأونيكس، والثانوي خط ذهبي
   شعري. الذهب لون خطّ وحرف لا لون مساحة — المساحة الذهبية تقرأ صفراء
   رخيصة على الشاشة مهما ضُبطت.
   الخاتمة (.cta) داكنة أصلاً، فأزرارها لا تُقلب: كانت تشتقّ الفاتح من
   --paper، فأول ما صار الورق أونيكس صارت داكنة على داكن. صارت تقرأ من
   --ivory الثابت. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 38px;font-family:var(--f-body);font-weight:400;font-size:.78rem;
  letter-spacing:.1em;border:1px solid transparent;cursor:pointer;transition:.35s;
}
/* v7: الزرّ الأساسي أونيكس صلب على الورق. كان عاجياً (--ivory) لأن
   الصفحة كانت داكنة، فصار أبيض على أبيض أول ما ابيضّت. داخل الجزيرتين
   الداكنتين (الهيرو والخاتمة) ينقلب فيبقى عاجياً على داكن. */
.btn-gold,.btn-wa{background:var(--black);color:var(--ivory);border-color:var(--black)}
.btn-gold:hover,.btn-wa:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost{border-color:var(--gold-dim);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--gold-lt);color:var(--gold-lt)}
.btn-block{display:flex;width:100%}
.hero .btn-gold,.hero .btn-wa,
.cta .btn-gold,.cta .btn-wa{background:var(--ivory);color:var(--black);border-color:var(--ivory)}
.hero .btn-gold:hover,.hero .btn-wa:hover,
.cta .btn-gold:hover,.cta .btn-wa:hover{background:transparent;color:var(--gold-lt);border-color:var(--gold-lt)}
.cta .btn-ghost{border-color:var(--gold-dim);color:var(--sand)}
.cta .btn-ghost:hover{border-color:var(--gold-lt);color:var(--gold-lt)}

/* ---------- الأقسام ---------- */
/* لا تناوب منتظم: الورق هو الأساس، والأسود يظهر مرتين فقط في الصفحة. */
.section{padding:var(--gap) 0;position:relative}
.on-light,.band{background:transparent}
.section+.section{padding-block-start:0}

/* ترويسة القسم — تسمية ذهبية، ثم عنوان كبير. الفراغ تحتها واسع.
   التسمية تسبقها شرطة ذهبية قصيرة بدل النجمة ✳ المنثورة: الشرطة تُقرأ
   كعلامة نظام، والنجمة كزخرفة. */
.sec-head{margin-block-end:clamp(3rem,5.4vw,5rem);max-width:none}
.sec-eyebrow{display:flex;align-items:center;gap:14px;font-size:.76rem;
  letter-spacing:.14em;color:var(--gold);margin-block-end:22px;font-weight:400}
.sec-eyebrow::before{content:"";flex:none;width:34px;height:1px;
  background:var(--gold)}
.sec-head h2{font-family:var(--f-head);font-weight:700;color:var(--ink-head);
  font-size:clamp(2.1rem,4.8vw,3.6rem);max-width:18ch;line-height:1.38}
.sec-head p{color:var(--ink-2);margin:22px 0 0;max-width:46ch;font-size:1.02rem;
  line-height:1.85;font-weight:300}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.more{color:var(--gold);font-size:.8rem;letter-spacing:.08em;white-space:nowrap;
  padding-block-end:6px;border-bottom:1px solid var(--gold-dim);transition:border-color .3s,color .3s}
.more:hover{border-bottom-color:var(--gold-lt);color:var(--gold-lt)}

/* رأس الصفحات الداخلية */
.page-head{padding:clamp(3.4rem,7.4vw,6.5rem) 0 clamp(2.4rem,5vw,4rem)}
.page-head h1{font-family:var(--f-head);font-weight:700;color:var(--ink-head);
  font-size:clamp(2.4rem,6.4vw,4.8rem);line-height:1.36;margin-block-end:20px}
.page-head p{color:var(--ink-2);max-width:56ch;margin:0;font-size:1rem;font-weight:300}
.crumb{font-size:.72rem;letter-spacing:.1em;color:var(--muted);margin-block-end:22px}
.crumb a:hover{color:var(--gold)}

/* ---------- شريط متحرك ---------- */
/* كان يقرأ كشريط عروض في محل مخفّضات: نصّ رمادي متباعد يجري بلا هوية.
   صار شريطاً أونيكس أغمق من الصفحة بحروف ذهبية وفواصل ماسية، ويتلاشى
   طرفاه في الخلفية فلا يُقطع النص قطعاً حادّاً عند الحافة. */
.marquee{
  border-block:1px solid var(--gold-dim);overflow:hidden;background:transparent;
  padding:22px 0;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to left,transparent,#000 12%,#000 88%,transparent);
}
.marquee-in{display:flex;gap:56px;width:max-content;animation:slide 52s linear infinite}
.marquee span{color:var(--gold);font-size:.74rem;letter-spacing:.1em;white-space:nowrap;font-weight:300}
.marquee span[aria-hidden]{color:var(--gold-dim)}
@keyframes slide{to{transform:translateX(50%)}}

/* ---------- شريط الثقة ---------- */
/* كان أربع بطاقات شمبانيا ممتلئة تقرأ كبانر. صار سطراً من خيوط شعرية،
   والفاصل بينها يتلاشى من أعلى وأسفل بدل خطّ صمّاء بارتفاع الخانة. */
.trust{border-block-end:1px solid var(--hair-2)}
.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  width:min(1320px,100% - var(--pad)*2);margin-inline:auto}
.trust-row>div{position:relative;padding:clamp(2.6rem,4.4vw,4rem) 26px;text-align:center}
.trust-row>div::before{content:'';position:absolute;inset-block:22%;inset-inline-start:0;
  width:1px;background:linear-gradient(to bottom,transparent,var(--hair),transparent)}
.trust-row>div:first-child::before{display:none}
.trust-row strong{display:block;font-family:var(--f-head);color:var(--ink-head);
  font-size:1.18rem;font-weight:700;line-height:1.5;margin-block-end:8px}
.trust-row span{color:var(--muted);font-size:.74rem;letter-spacing:.08em;font-weight:300}

/* ---------- الفئات ---------- */
/* شريط بلاطات كبيرة بعرض الشاشة، اسم الفئة عليها بخط الرقعة وبحجم يُقرأ
   من بعيد. النسخة السابقة (صورة كبيرة + صفّ نحيل لكل فئة) لم تكن تُقرأ
   كأقسام أصلاً — كانت تبدو قائمة روابط جانبية. */
.cat-band{
  /* عدد الأعمدة = عدد الفئات الفعلي (يمرّره المولّد في --n): أربعة أعمدة
     ثابتة مع ثلاث فئات تترك فجوة تُقرأ كخلل. */
  display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:2px;
  margin-block-start:clamp(2rem,4vw,3.2rem);
}
@media (max-width:900px){.cat-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat-tile{position:relative;display:block;overflow:hidden;background:var(--paper-2)}
.cat-tile-img{display:block;aspect-ratio:4/5;overflow:hidden}
.cat-tile img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.cat-tile:hover img{transform:scale(1.04)}
/* حجاب متدرّج من الأسفل: الصور خلفياتها متباينة (أحمر، بيج، أخضر)
   والاسم أبيض عليها كلها، فلا يقرأ إلا بحجاب. */
.cat-tile-in{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:clamp(20px,2.4vw,30px);color:var(--ivory);
  /* أرضية داكنة (صورة + حجاب): تأخذ ذهب الأونيكس لا ذهب الورق. */
  --gold:var(--gold-on-dark);--gold-lt:var(--gold-lt-on-dark);
  background:linear-gradient(to top,rgba(11,11,12,.72),rgba(11,11,12,.34) 46%,transparent);
}
.cat-tile-in h3{font-family:var(--f-head);font-weight:700;color:var(--ivory);
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.3}
.cat-tile-in em{display:block;font-style:normal;margin-block-start:9px;
  font-size:.74rem;letter-spacing:.08em;color:var(--gold-lt);font-weight:300}
/* خيط ذهبي يمتد بعرض البلاطة عند المرور — إشارة «هذا رابط». */
.cat-tile::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;z-index:3;
  height:2px;background:var(--gold-on-dark);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.cat-tile:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .cat-tile img,.cat-tile::after{transition:none}
}

/* ---------- شبكة القطع ---------- */
/* لا صناديق ولا حدود: القطعة تطفو على الورق، ويفصلها الفراغ وحده.
   جُرّبت «قطعة بطلة» بعرض عمودين، فأنتجت صفاً أخيراً مبتوراً وفراغاً
   يقرأ كخلل — عدد القطع متغيّر ولا يضمن امتلاء الصف. الشبكة الموحّدة
   أقوى هنا لأن الصور نفسها وُحّدت، فالانتظام يصير مقصوداً لا رتيباً. */
/* خمس قطع في الصف على سطح المكتب (قرار مصطفى 2026-07-29)، وتنزل
   إلى أربع ثم ثلاث ثم اثنتين مع ضيق الشاشة. */
/* شبكة المنتجات — أربعة في الصف بفواصل رفيعة، على غرار متاجر المجوهرات
   الكبرى. الخمسة السابقة كانت تُصغّر البلاطة إلى ~240px فتضيع القطعة في
   فراغ الصفحة، وهي الشكوى (مصطفى 2026-07-30).

   الشبكة أعرض من عمود النص: تخرج من .wrap بسحب هامشي محسوب، فتقترب من
   حافّتي الشاشة كما في متاجر المجوهرات، بينما يبقى النص على عرضه المريح.
   لا نستعمل 100vw لأنه يشمل شريط التمرير فيُنتج تمريراً أفقياً.

   من 4 أعمدة إلى عمودين مباشرة بلا محطة ثلاثة: ثلاثة أعمدة مع أربع قطع
   تترك قطعة يتيمة في صف وحدها. */
.grid{
  --grid-pad:clamp(12px,1.4vw,24px);
  --grid-max:1860px;
  --grid-w:min(var(--grid-max), calc(100vw - var(--grid-pad)*2));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:2px;row-gap:clamp(36px,4vw,56px);border:0;
  width:var(--grid-w);margin-inline:calc((var(--grid-w) - 100%) / -2);
}
@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2px;row-gap:32px}
}

.card{display:block;min-width:0;border:0;padding:0;transition:none}
.card:hover{background:transparent}
/* بلاطة مربّعة: صور الدار كلها 1:1 — المنتج والموديل — فلا قصّ ولا هوامش
   مضافة، والقطعة تصل كما صوّرتها الدار (قرار 2026-07-30).

   v6 «الفاترينة»: البلاطة تبقى عاجية فاتحة على صفحة الأونيكس لأن خلفيات
   صور المنتج وظلالها مخبوزة على فاتح (انظر --paper-3 أعلاه). فبدل أن
   نخفي ذلك، نجعله النظام: البلاطة صندوق عرض مضاء، يحيطه خيط شعري يتذهّب
   عند المرور، وتحته هالة تعمّق جلوسه على الأونيكس. */
.card-img{
  display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-3);
  position:relative;box-shadow:0 14px 34px rgba(11,11,12,.07);
  /* v8: خيط الفاترينة ذهبي شفاف. الذهب الصمّاء بعرض كامل جعل الصفّ
     الرباعي يقرأ أربعة مربّعات صفراء متلاصقة، فالخيط ذهب الهوية عند 30%
     — يُرى ولا يُلاحَظ — ويشتدّ إلى الذهب المسطّح كاملاً عند المرور. */
  outline:1px solid rgba(201,162,39,.3);outline-offset:0;
  transition:box-shadow .5s ease,outline-color .45s ease;
}
.card-img img{width:100%;height:100%;object-fit:cover}
/* الإطار طبقة فوق الصورة لا حدّ على العنصر: الحدّ يزيح المقاس ويُرجّح الشبكة. */
.card-img::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid transparent;transition:border-color .45s ease;
}
.card:hover .card-img{outline-color:var(--gold-brand);box-shadow:0 22px 48px rgba(11,11,12,.12)}

/* صورة الموديل تحت المؤشر: صورة المنتج تختفي وتظهر القطعة ملبوسة.
   البطاقة ثابتة الحجم فلا تتزحزح الشبكة، ولا ترتفع البطاقة — الارتفاع
   يجعل صفّاً نظيفاً يترنّح.
   الطبقتان تتحركان مستقلتين: صورة المنتج تكبر ببطء، وصورة الموديل تهبط
   من تكبير طفيف إلى مقاسها وهي تظهر، فتبدو وكأنها استقرّت مكانها. */
.card-img.has-hover{position:relative}
.card-img .card-hover{position:absolute;inset:0;opacity:0}
@media (hover:hover) and (pointer:fine){
  .card-img img{transform:scale(1);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
  .card:hover .card-img>img:first-child{transform:scale(1.025)}
  .card-img .card-hover{transform:scale(1.015);
    transition:opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1)}
  .card:hover .card-img .card-hover,
  .card:focus-visible .card-img .card-hover{opacity:1;transform:scale(1)}
}
/* على الجوال لا يوجد مرور بالمؤشر، فالصورة الثانية لا تُحمّل ولا تُعرض. */
@media (hover:none){.card-img .card-hover{display:none}}

/* الاسم والسعر في سطر واحد. في RTL يبدأ الصفّ من اليمين تلقائياً، فلا
   يُعكس الاتجاه — عكسه يقلب الترتيب الدلالي مرتين.
   الاسم بخط النص لا خط الرقعة: الرقعة تجعل كل اسم منتج يُقرأ كعنوان. */
/* الاسم والمعدن والسعر مرصوصة تحت بعضها لا مفرودة على طرفي البلاطة.
   المفرودة كانت تترك فجوة بعرض البلاطة بين اسم قصير وسعر قصير، فتُقرأ
   كصفّ جدول لا كبطاقة كتالوج. الترتيب: اسم، معدن، سعر ذهبي.
   `display:contents` على .card-top يجعل الاسم والسعر عنصرين مباشرين في
   شبكة .card-body فيمكن ترتيبهما، بلا تغيير في بنية HTML المولَّدة. */
.card-body{display:grid;gap:0;padding:20px clamp(2px,.6vw,10px) 0;position:relative}
.card-top{display:contents}
.card-name{order:1;font-size:1.06rem;font-weight:400;min-width:0;letter-spacing:.01em;
  color:var(--ink-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{order:2;display:block;color:var(--muted);font-size:.72rem;
  letter-spacing:.06em;margin-block-start:7px;font-weight:300}
.card-price{order:3;color:var(--gold);font-size:.78rem;letter-spacing:.06em;
  white-space:nowrap;font-weight:300;margin-block-start:10px}
/* خيط ذهبي قصير يُرسم تحت النص عند المرور — أثر واحد صغير بدل حركة كبيرة. */
.card-body::after{content:"";position:absolute;inset-block-end:-10px;inset-inline-start:2px;
  width:38px;height:1px;background:var(--gold-lt);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .38s ease}
.card:hover .card-body::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .card-img img,.card-img .card-hover,.card-body::after{transition:none}
}

.empty{color:var(--muted);grid-column:1/-1;padding:48px 4px}

/* «قطع مشابهة» بثلاث قطع أو أقل تترك أعمدة فارغة تقرأ كخلل. تُقيَّد الأعمدة
   بعرض أقصى وتُرصّ من البداية فتبدو مقصودة. مقصورة على هذه الشبكة وحدها:
   لو بقيت عامة، أي فلترة تُرجع ثلاث قطع تنتقل فجأة إلى نظام بصري آخر. */
.grid-related:has(>.card:first-child:nth-last-child(-n+3)){
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),320px));
  justify-content:start;width:100%;margin-inline:0;
}

/* الفلاتر — نص متباعد تحته خيط، لا أزرار ممتلئة */
.chips{display:flex;flex-wrap:wrap;gap:28px;border:0;width:auto;max-width:100%;
  margin-block-end:clamp(2.4rem,4vw,3.6rem);padding-block-end:18px;border-block-end:1px solid var(--hair-2)}
.chip{padding:0 0 8px;font-size:.82rem;letter-spacing:.08em;border:0;
  border-block-end:1px solid transparent;color:var(--muted);transition:.3s;font-weight:300}
.chip:hover{color:var(--ink)}
.chip.on{background:transparent;color:var(--gold-lt);font-weight:400;border-block-end-color:var(--gold-lt)}
.metal-note{color:var(--muted);font-size:.78rem;letter-spacing:.06em;margin:26px 0 0;font-weight:300}

/* ---------- صفحة القطعة ---------- */
.piece{padding-block-start:72px}
.piece-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5.5rem);border:0;align-items:start}
/* لا تُقصّ صورة قطعة أبداً. جُرّب إطار مربّع فقُصّ الألماس من أعلى.
   النسبة تبقى 4:5 كالمصدر، ويُضبط الحجم بالعرض وحده. */
/* نفس منطق «الفاترينة» في الشبكة: السطح عاجي والإطار ذهبي شعري وتحته هالة. */
.piece-media{position:relative;overflow:hidden;background:var(--paper-3);
  aspect-ratio:4/5;max-width:500px;margin-inline-start:auto;width:100%;
  box-shadow:0 22px 54px rgba(11,11,12,.09);outline:1px solid rgba(201,162,39,.3);outline-offset:0}
.piece-media img{object-fit:contain}
.piece-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.piece-media .card-hover{opacity:0;transition:opacity .55s ease}
.piece-media.has-hover:hover .card-hover{opacity:1}
@media (hover:none){.piece-media .card-hover{display:none}}
.piece-info{padding:clamp(1rem,2vw,2rem) 0 0}
.piece-info h1{font-family:var(--f-head);font-weight:700;color:var(--ink-head);
  font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.38;margin-block-end:16px}
.piece-ref{color:var(--muted);font-size:.72rem;letter-spacing:.1em}
.piece-ref b{color:var(--gold);font-weight:400}
.piece-price{color:var(--gold-lt);font-family:var(--f-head);font-weight:700;font-size:1.6rem;margin:28px 0 10px}
.piece-note{color:var(--ink-2);margin:0 0 30px;font-weight:300;font-size:1rem;line-height:1.9}
.piece-hint{color:var(--muted);font-size:.8rem;margin:16px 0 30px;line-height:1.85;font-weight:300}
.specs{margin:0 0 30px;border-block-start:1px solid var(--hair-2)}
.specs>div{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-block-end:1px solid var(--hair-2)}
.specs dt{color:var(--muted);font-size:.76rem;letter-spacing:.06em;margin:0;font-weight:300}
.specs dd{margin:0;font-size:.9rem;color:var(--ink);text-align:end;font-weight:400}
.piece-visit{color:var(--gold);font-size:.78rem;letter-spacing:.06em;border-bottom:1px solid var(--gold-dim);padding-block-end:5px}

/* ---------- المناسبات ---------- */
/* صور أجواء بنسبة طويلة، والاسم على خيط أسفلها لا داخل تدرّج ثقيل. */
.occ-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.2rem,2.4vw,2rem);border:0}
.occ{position:relative;display:block;border:0}
.occ img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.7,.3,1)}
.occ:hover img{transform:scale(1.04)}
.occ span{position:static;display:block;padding:20px 2px 0;background:none;
  font-family:var(--f-head);font-weight:700;line-height:1.5;
  font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--ink-head);transition:color .3s}
.occ:hover span{color:var(--gold-lt)}
.occ-cards{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border:0}
.occ-card{border:0;display:flex;flex-direction:column;background:transparent}
.occ-card img{aspect-ratio:4/5;object-fit:cover;width:100%}
.occ-card>div{padding:22px 2px 0}
.occ-card h3{font-family:var(--f-head);font-weight:700;font-size:1.4rem;line-height:1.45;margin-block-end:14px;color:var(--ink-head)}
.occ-card p{color:var(--ink-2);font-size:.92rem;margin:0 0 20px;font-weight:300}
.occ-card span{color:var(--gold);font-size:.78rem;letter-spacing:.06em;border-bottom:1px solid var(--gold-dim);padding-block-end:5px}
.guide{border-inline-start:1px solid var(--gold);padding:4px 22px;background:transparent;
  margin-block-end:34px;font-size:.95rem;color:var(--ink-2);font-weight:300}

/* ---------- الخدمات ---------- */
/* أربع بطاقات ممتلئة صارت أعمدة مفصولة بخيط شعري. */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-block-start:1px solid var(--hair-2);border-inline-start:0}
.svc{border:0;border-inline-start:1px solid var(--hair-2);background:transparent;
  padding:clamp(2rem,3vw,2.8rem) clamp(1.4rem,2vw,2.2rem);transition:none}
.svc:first-child{border-inline-start:0}
.svc:hover{filter:none}
.svc-ic{color:var(--gold);font-size:1.5rem;display:block;margin-block-end:24px}
.svc h3{font-family:var(--f-head);font-weight:700;font-size:1.34rem;line-height:1.45;margin-block-end:16px;color:var(--ink-head)}
.svc p{color:var(--ink-2);font-size:.9rem;margin:0 0 22px;font-weight:300}
.svc a{color:var(--gold);font-size:.78rem;letter-spacing:.06em;border-bottom:1px solid var(--gold-dim);padding-block-end:5px}

/* ---------- عن الدار ---------- */
.about-grid{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr 1fr;border:0;align-items:center}
.about-copy{padding:0;display:flex;flex-direction:column;justify-content:center}
.about-copy p{color:var(--ink-2);margin:0 0 22px;font-size:1.02rem;line-height:1.95;font-weight:300;max-width:46ch}
.about-media{position:relative;min-height:clamp(340px,48vw,620px);overflow:hidden;
  outline:1px solid var(--hair-2);box-shadow:0 22px 54px rgba(11,11,12,.09)}
.about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- الأسئلة ---------- */
.faq-list{max-width:920px;border-block-start:1px solid var(--hair-2)}
.faq-list details{border-block-end:1px solid var(--hair-2)}
.faq-list summary{cursor:pointer;padding:28px 0;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.08rem,2vw,1.34rem);line-height:1.5;color:var(--ink-head);
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;transition:color .3s}
.faq-list summary:hover{color:var(--gold)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';color:var(--gold);font-family:var(--f-body);font-size:1.1rem;line-height:1;font-weight:300}
.faq-list details[open] summary::after{content:'−'}
.faq-list p{color:var(--ink-2);margin:0 0 28px;max-width:70ch;font-weight:300;font-size:.96rem}

/* ---------- تواصل ---------- */
.contact-grid{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr 1fr;border:0}
.contact-card{padding:0}
.c-row{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-block-end:1px solid var(--hair-2)}
.c-row span{color:var(--gold);font-size:.74rem;letter-spacing:.1em}
.c-row b{font-weight:300;font-size:1rem;color:var(--ink);line-height:1.9}
.contact-media{position:relative;min-height:360px;overflow:hidden;
  outline:1px solid var(--hair-2);box-shadow:0 22px 54px rgba(11,11,12,.09)}
.contact-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- الخاتمة ---------- */
/* كانت خاتمة هادئة على أسود صافٍ تفصلها عن صفحة بيضاء. الصفحة صارت
   أونيكس، فالأسود الصافي يذوب فيها ويختفي الشريط كلياً. يُعاد فصله
   بثلاثة أشياء لا بلون واحد: صورة أظهر (0.22 → 0.34)، وخيط ذهبي على
   الحافّتين، وحجاب أفتح قليلاً من الصفحة لا أغمق. */
.cta{position:relative;overflow:hidden;padding:clamp(7rem,13vw,11rem) 0;text-align:center;
  background:var(--black);border-block:1px solid var(--gold-dim)}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;opacity:.34}
.cta::after{content:'';position:absolute;inset:0;
  background:radial-gradient(80% 70% at 50% 50%, rgba(11,11,12,.6), rgba(11,11,12,.9))}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-family:var(--f-head);font-weight:700;color:var(--ink-head);
  font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.38;
  margin-block-end:22px;max-width:20ch;margin-inline:auto}
.cta p{color:var(--ink-2);margin:0 auto 38px;max-width:46ch;font-weight:300;font-size:.98rem}
.cta-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.prose{max-width:760px}
.prose p{color:var(--ink-2);margin:0 0 22px;font-weight:300;font-size:1rem;line-height:1.95}
.prose-note{color:var(--muted);font-size:.9rem}
.prose-note a{color:var(--gold)}

/* ---------- الفوتر ---------- */
.footer{background:var(--black);border-block-start:1px solid var(--gold-dim);
  padding:clamp(4rem,7.6vw,6.5rem) 0 0}
.foot-grid{width:min(1320px,100% - var(--pad)*2);margin-inline:auto;display:grid;gap:48px;
  grid-template-columns:1.6fr repeat(3,1fr);padding-block-end:56px}
.foot-grid p{color:var(--muted);font-size:.86rem;margin:0;font-weight:300}
.foot-grid h4{font-family:var(--f-body);font-size:.74rem;letter-spacing:.12em;color:var(--gold);
  margin-block-end:20px;font-weight:400}
.foot-grid a{display:block;color:var(--ink-2);font-size:.88rem;padding:7px 0;transition:color .3s;font-weight:300}
.foot-grid a:hover{color:var(--gold-lt)}
.foot-bar{border-block-start:1px solid var(--hair-2);padding:26px 0;
  width:min(1320px,100% - var(--pad)*2);margin-inline:auto;display:flex;justify-content:space-between;
  gap:14px;color:var(--muted);font-size:.76rem;letter-spacing:.04em;flex-wrap:wrap;font-weight:300}
.foot-bar a{color:var(--gold)}

/* ---------- واتساب عائم ---------- */
.wa-fab{position:fixed;inset-inline-end:22px;bottom:22px;z-index:70;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:#fff;box-shadow:0 10px 26px rgba(11,11,12,.22);transition:transform .3s}
.wa-fab:hover{transform:scale(1.06)}

/* ---------- ظهور عند التمرير ---------- */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
/* البلاطات تظهر متتابعة لا دفعة واحدة — الصفّ يُقرأ كحركة واحدة. */
.grid>.card:nth-child(4n+2){transition-delay:.06s}
.grid>.card:nth-child(4n+3){transition-delay:.12s}
.grid>.card:nth-child(4n+4){transition-delay:.18s}
@media (max-width:820px){
  .grid>.card:nth-child(4n+2),.grid>.card:nth-child(4n+4){transition-delay:.05s}
  .grid>.card:nth-child(4n+3){transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  /* كانت `.hero-img` — صنف غير موجود، فحركة كِن-بيرنز كانت تعمل رغم طلب
     تقليل الحركة (كشفه Codex 2026-08-02). الصنف الصحيح `.hero-bg`. */
  .hero-bg{animation:none}
  .hero-slide{transition:none}
  .hero-copy--in{animation:none}
  .hero::before,.hero::after{transition:none}
  .marquee-in{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- الجوال ---------- */
@media (max-width:960px){
  /* الجوال: صفّ فيه زرّ القائمة والشعار وواتساب، والبحث بعرض الصفحة تحته.
     زرّ القائمة صار يفتح الدرج الجانبي على كل المقاسات (بريف 2026-08-02)،
     فشريط التنقّل يختفي هنا ولا تبقى قائمة منسدلة لا يفتحها شيء. */
  .header{position:relative}
  .head-main{grid-template-columns:auto 1fr auto;gap:12px;
    grid-template-areas:"burger logo wa" "search search search"}
  .burger{display:grid;grid-area:burger;justify-self:start}
  .logo{grid-area:logo}
  .wa-top{grid-area:wa}
  .search{grid-area:search;width:100%;justify-self:stretch}
  .nav{display:none}
  .hero-dots button span{display:none}
  .piece-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .about-media{min-height:340px}
  .svc{border-inline-start:0;border-block-start:1px solid var(--hair-2)}
  .svc:first-child{border-block-start:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* خانة التواصل: عمودان على 390px يضغطان الرقم والعنوان على سطرين مكسورين */
  .fc-grid{grid-template-columns:1fr}
  .hero-dots{inset-inline-end:auto;inset-inline-start:var(--pad);gap:10px}
}
@media (max-width:600px){
  /* الشاشة الضيقة لا تتّسع لنصّ بجانب الموديل: الحجاب يصير رأسياً من أسفل
     والنص يجلس عليه. */
  .hero{align-items:flex-end;min-height:clamp(520px,80svh,680px)}
  /* الحجاب رأسي هنا فلا جهة له، وتبديل جهة النص لا معنى له والنص بعرض
     الشاشة — فيثبت الحجاب الواحد ويُلغى الثاني ودفع النص. */
  .hero::after,.hero[data-text="left"]::after{opacity:1;
    background:linear-gradient(to top,
      rgba(11,11,12,.97) 0%,rgba(11,11,12,.93) 32%,
      rgba(11,11,12,.5) 50%,rgba(11,11,12,.1) 70%)}
  .hero::before,.hero[data-text="left"]::before{opacity:0}
  .hero[data-text="left"] .hero-copy{margin-inline-start:0}
  /* البانرات عريضة (‏1920×820) والشاشة طولية، فالقصّ هنا شرس: أكثر من نصف
     العرض يُرمى. يُقصّ نحو جهة القطعة نفسها — وهي الجهة المقابلة للنص —
     وإلّا ظهر الفراغ وحده وضاعت المجوهرة. */
  .hero-bg{object-position:38% 22%}
  .hero-slide[data-text="left"] .hero-bg{object-position:80% 26%}
  .hero-slide[data-text="right"] .hero-bg{object-position:26% 26%}
  /* القصّ هنا أفقي فقط: الصورة عريضة فتُقاس على الارتفاع وتملؤه، والنسبة
     الرأسية بلا أثر على هذا المقاس. الإسورة وحدها تحتاج 76% لتدخل
     الأحجار الحادة في الكادر بدل ذهب خارج التركيز. */
  .hero-slide[data-cat="bracelets"] .hero-bg{object-position:76% 50%}
  .hero-copy{max-width:none}
  .wa-top{display:none}
  /* مؤشّر التمرير يزاحم زر الواتساب العائم على الشاشات الصغيرة. */
  .scroll-cue{display:none}
  .top{font-size:.66rem;letter-spacing:.06em;padding:10px 12px}
  .grid{grid-template-columns:1fr 1fr;gap:2rem 1.2rem}
  /* في عمودين لا يتّسع سطر «الاسم — السعر»، فينكمش الاسم حتى يختفي. */
  .card-name{font-size:.9rem;white-space:normal}
  .card-price{font-size:.74rem}
  .cat-row{grid-template-columns:52px 1fr auto;gap:16px;padding:16px 2px}
  .occ-row{grid-template-columns:1fr 1fr}
  .chips{gap:20px}
  .foot-grid{grid-template-columns:1fr}
  .specs>div{flex-direction:column;gap:4px}
  .specs dd{text-align:start}
  /* الفاصل يصير أفقياً بين الخانات المرصوصة رأسياً. */
  .trust-row>div::before{inset-block:auto;inset-block-start:0;inset-inline:22% auto;
    width:56%;height:1px;
    background:linear-gradient(to left,transparent,var(--hair),transparent)}
  .trust-row>div:first-child::before{display:none}
}


/* ================================================================== *
 * القائمة الجانبية (الدرج) — بريف العميل 2026-08-02
 *
 * تُفتح من زرّ الهيدر على كل المقاسات لا الجوال وحده، لأن الشريط العلوي
 * يسع ستة روابط بينما الموقع أكبر: فئات وأطقم ومناسبات وسياسات.
 * تنزلق من جهة البداية (يمين في RTL) عبر inset-inline-start فلا تحتاج
 * حساب اتجاه في JS.
 * ================================================================== */
/* ⚠️ `display:flex/block` هنا يتغلّب على قاعدة المتصفح [hidden]{display:none}،
   فالدرج كان يُفتح مع الصفحة (ظهر في لقطة 2026-08-02). الإخفاء يُعاد
   تثبيته صراحةً — الحالة المغلقة هي حالة الصفحة الافتراضية. */
.side[hidden],.side-veil[hidden]{display:none}
.side-veil{position:fixed;inset:0;z-index:90;background:rgba(11,11,12,.62);
  backdrop-filter:blur(3px);animation:veil-in .3s ease both}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
.side{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:95;
  width:min(380px,86vw);background:var(--paper-2);
  border-inline-end:1px solid var(--gold-dim);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  animation:side-in .34s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes side-in{from{transform:translateX(var(--side-from,100%))}to{transform:translateX(0)}}
[dir="rtl"] .side{--side-from:100%}
[dir="ltr"] .side{--side-from:-100%}
.side-head{display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad) 18px;border-bottom:1px solid var(--hair-2)}

.side-x{background:none;border:0;color:var(--ink-2);font-size:1.05rem;cursor:pointer;
  padding:8px;line-height:1;transition:color .25s ease}
.side-x:hover{color:var(--gold)}
.side-nav{flex:1;padding:8px var(--pad) 24px}
.side-nav section{padding:22px 0;border-bottom:1px solid var(--hair-2)}
.side-nav section:last-child{border-bottom:0}
.side-nav h3{font-size:.68rem;letter-spacing:.14em;color:var(--gold);
  margin-bottom:12px;font-weight:400}
.side-nav a{display:block;padding:9px 0;color:var(--ink);opacity:.8;
  font-size:.98rem;transition:opacity .25s ease,padding-inline-start .25s ease}
.side-nav a:hover{opacity:1;color:var(--gold-lt);padding-inline-start:8px}
.side-wa{display:block;margin:0 var(--pad) 26px;text-align:center;
  border:1px solid var(--gold-dim);color:var(--gold-lt);
  padding:14px;font-size:.86rem;letter-spacing:.06em;transition:background .25s ease}
.side-wa:hover{background:rgba(201,162,39,.1)}
body.side-on{overflow:hidden}

/* ================================================================== *
 * خانة «تواصل معنا» في آخر الموقع — بريف العميل 2026-08-02
 * ================================================================== */
.foot-contact{background:var(--paper-2);border-top:1px solid var(--hair-2);
  padding-block:clamp(3.5rem,7vw,6rem)}
.fc-head{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.fc-head h2{font-family:var(--f-head);font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.3;margin-top:10px}
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
/* البطاقة ورق على عاجي: الفرق بينهما 1.12:1 فلا يُقرأ ارتفاعاً بلونه
   وحده، والحدّ الشعري هو ما يجعله يُقرأ (ملاحظة Codex 2026-08-06). */
.fc-card{border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--paper)}
.fc-card h3{font-size:.7rem;letter-spacing:.14em;color:var(--gold);margin-bottom:16px}
.fc-num{display:block;font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--ink);
  letter-spacing:.04em;margin-bottom:14px;transition:color .25s ease}
.fc-num:hover{color:var(--gold-lt)}
.fc-wa{display:inline-flex;align-items:center;gap:9px;color:var(--wa);
  font-size:.85rem;transition:opacity .25s ease}
.fc-wa:hover{opacity:.78}
.fc-hours{color:var(--muted);font-size:.86rem;margin:16px 0 0}
.fc-social{display:flex;gap:18px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--hair-2)}
.fc-social a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);
  font-size:.84rem;transition:color .25s ease}
.fc-social a svg{opacity:.72;transition:opacity .25s ease}
.fc-social a:hover{color:var(--gold-lt)}
.fc-social a:hover svg{opacity:1}
.fc-addr{color:var(--ink);font-size:1.02rem;line-height:1.9;margin:0 0 18px}
.fc-map{color:var(--gold);font-size:.84rem;letter-spacing:.06em}
.fc-map:hover{color:var(--gold-lt)}

/* ================================================================== *
 * تفاصيل Perlee — الخرز الذهبي (قرار مصطفى 2026-08-02: نبقى على الأونيكس
 * ونستعير من Van Cleef & Arpels «Perlee» تفاصيلها لا ألوانها)
 *
 * الخرزة نقطة مرسومة بـradial-gradient مكرّرة على حدّ العنصر: تبقى حادّة
 * على الريتينا (لا صورة تُمطّ)، ولا تضيف عقدة DOM واحدة، ولا تُحرّك أبداً
 * فلا تكلّف شيئاً أثناء التمرير (توصية Codex 2026-08-02).
 * تُستعمل على الأقسام والفواصل لا على كل بطاقة — الخرز على كل شيء يقرأ
 * زخرفة رخيصة لا تفصيلاً.
 * ================================================================== */
.beaded{position:relative}
.beaded::before,.beaded::after{
  content:'';position:absolute;inset-inline:0;height:3px;pointer-events:none;
  background:radial-gradient(circle at 1.5px 1.5px, var(--gold) 1.5px, transparent 1.6px);
  background-size:11px 3px;background-repeat:repeat-x;opacity:.5;
}
.beaded::before{top:0}
.beaded::after{bottom:0}
.fc-head::after{
  content:'';display:block;width:120px;height:3px;margin:18px auto 0;
  background:radial-gradient(circle at 1.5px 1.5px, var(--gold) 1.5px, transparent 1.6px);
  background-size:11px 3px;background-repeat:repeat-x;opacity:.6;
}

/* ================================================================== *
 * اسم الدار ووصفه التقني على البطاقة وصفحة القطعة
 * ================================================================== */
.card-sub{display:block;color:var(--muted);font-size:.78rem;
  letter-spacing:.04em;margin-top:2px}
.piece-sub{color:var(--muted);font-size:.95rem;margin:6px 0 0;
  letter-spacing:.04em}
.search-out i{font-style:normal;color:var(--muted);font-size:.86em}

/* بندا «الاستبدال والاسترجاع» و«الشحن والتغليف» داخل قسم الخدمات — نصّ
   طويل يُقرأ، لا بطاقة أيقونة. عمودان على الشاشة الواسعة وعمود على الجوال. */
.svc-terms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--hair-2)}
.term h3{font-family:var(--f-head);font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--gold-lt);margin-bottom:16px;line-height:1.5}
.term p{color:var(--ink-2);font-size:.98rem;line-height:1.95;margin:0 0 14px;max-width:52ch}
.term a{color:var(--gold);font-size:.82rem;letter-spacing:.06em}
.term a:hover{color:var(--gold-lt)}
.on-light .term h3{color:var(--gold)}
@media (max-width:860px){ .svc-terms{grid-template-columns:1fr} }

/* ================================================================
   ⭐ آراء جوجل — حلّت محل شريط «المناسبات» على الرئيسية (2026-08-03)
   بطاقات هادئة على الورق: النجوم ذهبية، الاقتباس بحبر العناوين، والاسم
   والتاريخ في الحبر الخافت. لا تُطبع أصلاً ما لم تكن هناك مراجعات حقيقية.
   ================================================================ */
.g-carousel{display:flex;align-items:center;gap:12px}
.g-track{flex:1;min-width:0;display:flex;gap:22px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-block-end:4px}
.g-track::-webkit-scrollbar{display:none}
/* ثلاث بطاقات ظاهرة بالضبط: الثلث ناقص نصيب البطاقة من الفجوتين (22px×2). */
.g-track>.g-review{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start}
.g-nav{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper-3);color:var(--ink-head);font-size:1.4rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.g-nav:hover:not(:disabled){background:var(--ink-head);color:var(--paper);border-color:var(--ink-head)}
.g-nav:disabled{opacity:.32;cursor:default}
@media (max-width:900px){.g-track>.g-review{flex-basis:calc((100% - 22px)/2)}}
@media (max-width:620px){.g-track>.g-review{flex-basis:100%}.g-nav{width:36px;height:36px}}
.g-review{margin:0;padding:clamp(22px,2.4vw,30px);background:var(--paper);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.g-review blockquote{margin:0;color:var(--ink-head);font-size:1rem;line-height:1.9}
.g-review figcaption{display:flex;flex-direction:column;gap:3px;margin-block-start:auto}
.g-who{font-weight:700;color:var(--ink-head);font-size:.94rem}
.g-when{color:var(--ink-2);font-size:.8rem}
.g-stars{display:inline-flex;gap:2px;letter-spacing:.04em}
.g-star{color:var(--line);font-size:.95rem}
.g-star.on{color:var(--gold)}
.g-score{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g-score b{font-size:1.3rem;color:var(--ink-head)}
.g-more{margin-block-start:clamp(22px,2.4vw,30px)}
@media (max-width:900px){.g-reviews{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.g-reviews{grid-template-columns:1fr}}
.g-count{color:var(--ink-2);font-size:.9rem}
.g-count::before{content:"·";margin-inline-end:8px;color:var(--line)}

/* ---------- التوقيع على الجوال ---------- *
 * سطر التوقيع اللاتيني تحت العشرين بكسل يقرأ خيطاً رمادياً لا كلمات،
 * والدليل يحدّ التوقيع الكامل بمقاس أدنى. فعلى الجوال يبقى العلامة
 * والاسم العربي وحدهما، وهو ما يجيزه الدليل نفسه دون المقاس الأدنى.
 * ------------------------------------------------------------------ */
@media (max-width:620px){
  .lock{font-size:30px;gap:.5em}
  .lock-t{border-inline-start:0;padding-inline-start:0}
  .lock-t i{display:none}
  .lock--foot{font-size:36px}
}

/* ---------- التغليف (الرئيسية) ---------- *
 * ثلاث لقطات مربّعة بنفس إيقاع شبكة القطع، ونصّ تحتها لا فوقها: اللقطات
 * أرضياتها متباينة (عاجي، أسود، جصّ) فالنصّ عليها يحتاج حجاباً، والحجاب
 * يخفي التغليف نفسه — وهو موضوع القسم.
 * البلاطة هنا **بلا خيط ذهبي**: خيط الفاترينة يخصّ بلاطة المنتج البيضاء
 * ويميّزها. لقطة الأجواء صورة كاملة الحافة، فلا إطار لها.
 * ------------------------------------------------------------------ */
.pack-row{display:grid;gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pack{margin:0;display:flex;flex-direction:column;min-width:0}
.pack img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  box-shadow:0 14px 34px rgba(11,11,12,.07)}
.pack figcaption{padding:22px 2px 0}
.pack h3{font-family:var(--f-head);font-weight:700;color:var(--ink-head);
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.35;margin-block-end:10px}
.pack p{color:var(--ink-2);font-size:.92rem;margin:0;font-weight:300;max-width:34ch}

/* ---------- واجهة الدار (صفحة التواصل) ---------- *
 * بعرض الصفحة كاملاً بلا `wrap`: الواجهة لقطة معمار، وحصرها في عمود
 * النصّ يجعلها بطاقة. خيط ذهبي شعري فوقها وتحتها يربطها بلغة الصفحة.
 * ------------------------------------------------------------------ */
.storefront{position:relative;overflow:hidden;
  border-block:1px solid rgba(201,162,39,.3);
  margin-block-start:clamp(1rem,2.4vw,2rem)}
.storefront img{width:100%;display:block;object-fit:cover;object-position:50% 46%;
  height:clamp(280px,42vw,560px)}
@media (max-width:700px){
  .storefront img{height:clamp(230px,58vw,340px);object-position:58% 46%}
}