/* ‖ mm-scale begin ‖ (scale_css.py, 2026-09-29) from 1200px wide up the page is the 1920 design scaled to the screen:
   every px length in this file is calc(N*var(--mmu)); --mmu = 100vw/1920 there, 1px elsewhere. --mm-sticky and
   --mm-head are registered lengths so JavaScript reads them in px. */
@property --mmu{syntax:'<length>';inherits:true;initial-value:1px}
@property --mm-sticky{syntax:'<length>';inherits:true;initial-value:135px}
@property --mm-head{syntax:'<length>';inherits:true;initial-value:144px}
:root{--mmu:1px}
@media(min-width:1200px){:root{--mmu:calc(100vw / 1920)}}
html{font-size:calc(var(--mmu)*16)}
/* ‖ mm-scale end ‖ */
/* ── العربية بخطّ Noto Kufi Arabic (جولة 30، 2026-09-24) — طلب المالك خطّاً عربياً أكثر احترافاً: حديثاً حادّاً
   نظيفاً فاخراً مقروءاً، متوازناً مع الإنجليزية. قورن سبعة خطوطٍ في سياق الموقع نفسه (الشريط، العناوين، بطاقة
   المنتج، الفقرات، الأزرار — flowtest/r30_ar_fonts*.py): Readex Pro وAlexandria أثقل وأكثر استدارة، Almarai وCairo
   وZain أخفّ وأكثر شيوعاً، وIBM Plex Sans Arabic (السابق، ما زال في media/fonts) مؤسّسيّ الطابع وأصغر في السطر.
   الكوفي الهندسيّ يوافق Red Hat Display في بنائه (خطٌّ أحاديّ السُّمك وزوايا واضحة) ويبقى مقروءاً من 12px في
   الواجهة إلى فقرات المقالات. ملفٌّ واحد متغيّر الوزن 100–900 (124KB لكل الأوزان بدل ~45KB لكلّ وزنٍ من Plex)
   من خادم Google Fonts الذي يخدم Red Hat أصلاً؛ boot.js يطلبه مسبقاً للزائر العربي (الرابط نفسه حرفياً).
   جسم الحروف (م) 49 عند 100px وارتفاع x في Red Hat 51: الحجم الطبيعيّ متوازنٌ بلا تكبير. ── */
/* mm-arabic-faces:start */
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:100 124;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 127;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:125 174;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 162;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:175 224;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 198;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:225 274;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 234;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:275 324;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 269;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:325 374;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 304;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:375 424;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 340;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:425 474;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 376;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:475 524;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 411;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:525 574;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 446;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:575 624;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 482;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:625 674;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 518;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:675 724;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 553;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:725 774;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 588;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:775 824;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 624;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:825 874;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 660;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'MM Arabic';font-style:normal;font-weight:875 900;font-display:swap;size-adjust:100%;font-variation-settings:'wght' 695;src:url(https://fonts.gstatic.com/s/notokufiarabic/v27/CSRk4ydQnPyaDxEXLFF6LZVLKrodrOYFFlKp.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* mm-arabic-faces:end */
/* ═══════════════════════════════════════════════════════════════════
   نظام تصميم مصل مانيا — «الحديد والطباشير»
   اللوحة مشتقّة من أرضية الصالة: حديد بارد مائل للأزرق، طباشير،
   وأزرق العلامة الأم لوناً وحيداً للفعل. الأسود يُستخدم أشرطةً تفصل
   البياض، لا أرضيةً للموقع كلّه.
   ═══════════════════════════════════════════════════════════════════ */
/* ── مكدّس الخطوط: كل نظام كتابة على خطّه في السطر المختلط — اللاتيني والأرقام بـRed Hat، والعربية بـ'MM Arabic'
   (أعلى الملفّ، متغيّر الوزن فيأخذ كلُّ وزنٍ في الموقع — 550 للشريط و500 للبحث — وجهاً حقيقياً). كان بعده Noto Sans
   Arabic بنسختين (ثابتة ومتغيّرة) احتياطاً: بينما يُحمَّل الخطّ الأساسي كان المتصفّح يطلبهما أيضاً فتُنزَّل ثلاثة خطوطٍ
   عربية. الاحتياط الآن خطّ النظام وحده، ورابط Google Fonts لم يعد يطلب Noto (round30/font_link.py). */
:root{--ui-font:'Red Hat Display','MM Arabic',system-ui,sans-serif;--ui-w:470}
html[lang=ar]{--ui-w:390}
:root{
  /* ── اللوحة: كحليّ داكن وأبيض مخفوت ──
     الجانب الداكن كلّه انتقل من الرماديّ المائل للأزرق إلى كحليٍّ
     عميق. الكحليّ مع العاجيّ المخفوت اقتران كلاسيكيّ في التصميم
     الفاخر: كلاهما منخفض الإشباع، والتباين بينهما عميق بلا صخب. */
  /* ── لوحة العلامة (ملفّ الهوية، الخيار ١) ──
     سماويّ ‎#0d9cf8‎ هو لون الفعل الوحيد، والكحليّ ‎#1f296e‎ أرضية
     الأشرطة الداكنة والتذييل، والملكيّ ‎#0958a9‎ عمقٌ للتحويم والروابط
     على الفاتح. الأرضية بيضاء باردة لا كريميّة: الهوية باردة كلّها. */
  --iron:#1f296e;      /* كحليّ العلامة — الأشرطة الداكنة والتذييل */
  --iron-2:#283382;    /* طبقة أعلى داخل الكحليّ */
  --iron-3:#3b4799;    /* حدود داخل الكحليّ */
  --slate:#1f296e;     /* لون الشعار على الفاتح */
  --slate-2:#4d5675;   /* رماديّ مائل للكحليّ — 6.2 على الأبيض */
  --royal:#0958a9;     /* الأزرق الملكيّ — روابط على الفاتح وتحويم الفعل */
  --chalk:#f3f6fa;     /* أبيض بارد — أرضية الصفحة */
  --surface:#fff;      /* الأسطح التي ترتفع فوق الأرضية: البطاقات واللوحات */
  --volt:#0d9cf8;      /* سماويّ العلامة — لون الفعل الوحيد */
  --volt-deep:#0958a9;
  --volt-soft:#e6f4fe;
  --teal:#00c3a6;      /* لمسة من نقش العلامة — التوفّر والنجاح وحدهما */
  --ember:#e5484d;     /* الندرة والتحذير وحدهما */

  /* ── أسماء قديمة تبقى عاملةً في كل الصفحات ──
     البلاطة ‎--bg-2‎ رماديّ بارد فاتح: أرضية صور المنتجات كما في
     المتاجر النظيفة — المنتج على بلاطة، لا داخل إطار. */
  --ink:#111633; --ink-2:#363d5c; --muted:#5b6380; --line:#dfe5ee; --line-2:#c3ccdb;
  --bg:#f3f6fa; --bg-2:#e9eef5; --bg-3:#eef2f7; --bg-4:#dde4ee;
  --blue:#0d9cf8; --red:#e5484d;
  --r:var(--sharp); --wrap:82.5rem;

  /* ── الخطوط: Red Hat Display للواجهة، Red Hat Text للفقرات ──
     طلب المالك خطّاً أنحف من Urbanist. قيس الحبر لكل بكسل بوزن 700 على
     عشرين خطّاً مجانياً؛ Red Hat Display من الأنحف (‎10.4‎ مقابل ‎11.2‎
     لـUrbanist) ويبقى واضحاً بأحجام الواجهة الصغيرة، وله أخٌ مصمَّم
     للفقرات (Red Hat Text). ومعه نزلت كلّ الأوزان درجةً واحدة
     (900→700، 800→650، 700→600، 600→500) — الوزن هو معظم «السُمك».
     تَجوال يبقى للعربية — خطّا Red Hat بلا حروف عربية — وترتيب المكدّس
     يضع كلّ نظام كتابة على خطّه في السطر المختلط. تَجوال بلا 600/650
     فيأخذ أقرب وزنٍ أعلى (700). في الإنجليزية ‎html[lang=en]‎ يصير
     Red Hat Display أوّلاً (أسفل). */
  /* الحروف العربية: 'MM Arabic' = Noto Kufi Arabic (أعلى الملفّ). اللاتيني والأرقام بـRed Hat في اللغتين. */
  --f:'Red Hat Display','MM Arabic',system-ui,sans-serif;   /* المتن والواجهة */
  --fd:'Red Hat Display','MM Arabic',system-ui,sans-serif;  /* العناوين */
  --fn:'Red Hat Display','MM Arabic',system-ui,sans-serif;  /* الأرقام والأسعار */
  --fr:'Red Hat Text','MM Arabic',system-ui,sans-serif;    /* فقرات القراءة */

  /* ── سلّم الطباعة: لكل حجم تتبُّعه الخاص ──
     التتبّع يضيق كلّما كبر الحجم؛ قيمة واحدة لكل المقاسات تكون خاطئة
     في أحد طرفَي السلّم حتماً. */
  /* السقف مقيَّد بأطول سطر في الهيرو: «No middleman.» يلزمه 663px عند
     88px، وعمود النصّ أضيق من ذلك. عند 82px يتّسع بهامش مريح. */
  --t-display:clamp(2.375rem,6.1vw,5.125rem);
  --t-h1:clamp(1.8125rem,4.2vw,3.25rem);
  --t-h2:clamp(1.4375rem,3vw,2.3125rem);
  --t-h3:clamp(1.125rem,1.5vw,1.375rem);
  /* تتبّعٌ سالبٌ خفيف للعناوين — الخطّ الحالي لا يحتاج أكثر كي لا تتلاصق الحروف */
  --tr-display:-.022em; --tr-h1:-.018em; --tr-h2:-.012em; --tr-h3:-.006em;
  /* العربية تحتاج تقدّماً سطرياً أوسع من اللاتينية عند الحجم نفسه:
     نزلات ي/ج/ص تحت خطّ الأساس تلتهم ما توفّره قيمة لاتينية ضيّقة. */
  --ld-display:1.16; --ld-h1:1.2; --ld-h2:1.26; --ld-h3:1.4;

  /* ── المسافات ── */
  --s1:0.25rem; --s2:0.5rem; --s3:0.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  /* الفخامة سعةٌ قبل أن تكون زخرفة: الأقسام تتنفّس أكثر */
  --sec-y:clamp(4.25rem,8.5vw,8.5rem);
  --tr-ar:-.012em;    /* العربية لا تتحمّل تضييقاً بقدر اللاتينية */

  /* ── الحركة ──
     المنحنى الافتراضي يستقرّ بلا تجاوز. التجاوز الخفيف محجوز للحظات
     التي سبقها فعلٌ من المستخدم (إضافة، فتح، تثبيت) وحدها. */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.3,.64,1);
  /* أبطأ قليلاً: الحركة المتأنّية تُقرأ رصانةً، والمتعجّلة تُقرأ رخصاً */
  --d-fast:190ms; --d:330ms; --d-slow:500ms; --d-reveal:720ms;

  /* ── الظلال: خافتة وواسعة الانتشار. الظلّ الغامق الضيّق يُثقل،
     والواسع الشفّاف يرفع السطح بلا أن يُعلن عن نفسه. ── */
  --sh-1:0 1px 0.125rem rgba(12,74,140,.05),0 0.1875rem 0.625rem rgba(12,74,140,.04);
  --sh-2:0 0.1875rem 0.625rem rgba(12,74,140,.06),0 0.875rem 2.375rem rgba(12,74,140,.07);
  --sh-3:0 0.375rem 1.125rem rgba(12,74,140,.08),0 2.125rem 4.75rem rgba(12,74,140,.11);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* التمرير إلى المراسي ينساب بدل أن يقفز. الرأس لاصق، فنحجز ارتفاعه
   حتى لا يختفي العنوان المقصود تحته. (كتلة تقليل الحركة تُعيدها auto) */
/* ارتفاع الرأس اللاصق يُحسب له عند القفز إلى مرساة (#…) — على العنصر المقصود وحده.
   كان ‎scroll-padding-top‎ على ‎html‎ فيشمل كل تمرير «أظهر العنصر» الذي يفعله المتصفّح
   نفسه: الكتابة في حقل البحث (يُظهر مؤشّر الكتابة) أو التركيز على زرّ اللغة — وكلاهما
   داخل الرأس اللاصق، فكان المتصفّح يحاول إنزالهما ١٢٨px فتصعد الصفحة مع كل حرف
   (بلاغ المالك). المرساة تأخذ الفراغ من ‎scroll-margin‎ الخاصّ بها. */
html{scroll-behavior:smooth;--mm-head:9rem}
:target{scroll-margin-top:var(--mm-head)}
/* أرضية الموقع بيضاء (طلب المالك). ‎--bg‎ الرماديّ الفاتح يبقى رمزاً
   للأسطح الداخلية (سطور السلّة، صندوق التوصيل المجاني) التي تحتاج أن
   تتميّز عن لوحةٍ بيضاء — فلا يُغيَّر الرمز نفسه. */
html{background:#fff}
/* الإنجليزية: Red Hat Display للواجهة والأسماء والأزرار، وRed Hat Text لفقرات القراءة —
   تقسيم متجر BiotechUSA نفسه. في العربية ‎--fr‎ يبدأ بتَجوال فلا يتغيّر شيء. */
/* الخطّ واحدٌ في اللغتين (طلب المالك): لا تبديل للحزمة مع اللغة */
p{font-family:var(--fr)}
body{font-family:var(--f);color:var(--ink);background:#fff;font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
/* رابط «تخطَّ إلى المحتوى»: مخفيّ فوق الشاشة ولا يظهر إلا حين يصله التركيز بلوحة المفاتيح
   (أوّل Tab في الصفحة) — ينقل مستخدم لوحة المفاتيح وقارئ الشاشة فوق الرأس والقائمة */
.skip{position:absolute;top:-5rem;inset-inline-start:0.75rem;z-index:400;background:var(--iron);color:#fff;
  padding:0.625rem 1.125rem;border-radius:var(--sharp);font-weight:600;text-decoration:none;transition:top .15s}
.skip:focus{top:0.75rem}
#main:focus{outline:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.button{font-family:var(--f);font-size:0.9375rem;line-height:1.5rem;font-weight:600;border-radius:var(--sharp);
  background:#000;color:#fff;border:0;cursor:pointer;padding:0 1.875rem;height:3.125rem;display:inline-flex;
  align-items:center;justify-content:center;transition:.18s;white-space:nowrap}
.button:hover{background:var(--slate)}
.button.ghost{background:transparent;color:#000;border:0.09375rem solid var(--line-2)}
.button.ghost:hover{background:#000;color:#fff;border-color:#000}
.sec{padding:4rem 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;margin-bottom:1.75rem}
.sec-head h2{font-size:clamp(1.375rem,3vw,2.125rem)}
.sec-head p{margin:0.375rem 0 0;color:var(--muted);font-size:0.875rem}
.sec-head a{font-size:0.875rem;font-weight:600;border-bottom:0.125rem solid #000;padding-bottom:0.125rem}

/* ── الشريط العلوي والرأس ── */
.utility{background:var(--slate);color:#fff;font-size:0.78125rem}
.util-in{display:flex;justify-content:space-between;align-items:center;height:2.25rem}
.flag-inline{width:1rem;height:0.75rem;margin-inline-start:0.375rem;border-radius:var(--sharp);
  box-shadow:0 0 0 1px rgba(255,255,255,.4);vertical-align:middle;flex:none}
.util-links a{margin-inline-start:1.125rem;opacity:.85}
.util-links a:hover{opacity:1}
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.25rem;height:4.75rem}
.burger{display:none;flex-direction:column;gap:0.25rem;background:0;border:0;cursor:pointer;padding:0.375rem}
.burger span{width:1.375rem;height:0.125rem;background:#000;display:block}
.logo{display:flex;align-items:center;gap:0.625rem;flex:0 1 auto;min-width:0;max-width:100%}
/* الشعار المكدَّس (MUSCLE ممتلئ فوق MANIA مفرَّغ) قناعاً: لونه من CSS،
   فيكون كحليّاً على الفاتح وأبيض على الكحليّ من الملفّ نفسه. */
.logo-img{height:2.75rem;width:calc(2.75rem * 1417 / 425);max-width:100%;min-width:0;display:block;background-color:var(--slate);
  -webkit-mask-image:url(../media/brand/mm-stacked-mask.png);mask-image:url(../media/brand/mm-stacked-mask.png);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.logo-mark{width:2.75rem;height:2.75rem;border-radius:50%;background:#000;color:#fff;display:grid;
  place-items:center;font-weight:700;font-family:var(--fn);letter-spacing:-1px;font-size:1.0625rem}
.logo-txt{font-weight:700;font-size:1.1875rem;line-height:1.1}
.logo-txt em{display:block;font-style:normal;font-size:0.65625rem;font-weight:500;color:var(--muted);
  letter-spacing:.16em;font-family:var(--fn)}
.search{flex:1;position:relative;max-width:40rem}
.search input{width:100%;height:3.25rem;border:0.09375rem solid var(--line);border-radius:var(--sharp);
  padding-inline:3rem 1.125rem;font-family:var(--f);font-size:0.9375rem;background:var(--bg-2)}
.search input:focus{outline:0;border-color:#000;background:#fff}
.search button{position:absolute;inset-inline-start:1rem;top:50%;transform:translateY(-50%);
  background:0;border:0;cursor:pointer;color:var(--ink-2);display:grid}
.hdr-actions{display:flex;gap:0.375rem;margin-inline-start:auto}
.icon-btn{width:2.625rem;height:2.625rem;display:grid;place-items:center;border-radius:50%;position:relative}
.icon-btn:hover{background:var(--bg-2)}
/* ── اختيار اللغة ──
   طلب المالك: قائمةٌ منسدلة بدل مفتاح الانزلاق — كبسولة بيضاء فيها عَلَم
   اللغة الحالية واسمها وسهم، تفتح قائمةً زجاجية فيها الإنجليزية والعربية
   فقط. كلّ لغةٍ مكتوبة بلغتها. تُبنى في app.js (القسم «اللغة»). */
.lt-wrap{position:relative;display:inline-flex;align-items:center;flex:none}
.icon-btn.lang-toggle{width:auto;height:2.875rem;padding:0 0.9375rem 0 0.6875rem;border:0;border-radius:var(--sharp);
  display:inline-flex;align-items:center;gap:0.625rem;cursor:pointer;flex:none;position:relative;
  background:#fff;color:var(--ink);font:600 1rem/1 var(--f);white-space:nowrap;
  box-shadow:0 0 0 1px var(--line),0 1px 0.125rem rgba(12,74,140,.07);
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s ease,transform .2s cubic-bezier(.32,.72,0,1)}
.icon-btn.lang-toggle:hover{background:#fff;box-shadow:0 0 0 1px var(--line-2),0 0.1875rem 0.625rem -0.25rem rgba(12,74,140,.22)}
.icon-btn.lang-toggle:active{transform:scale(.96)}
.lang-toggle:focus-visible{outline:0;box-shadow:0 0 0 1px var(--volt),0 0 0 0.25rem rgba(13,156,248,.28)}
.lt-wrap.open .lang-toggle{box-shadow:0 0 0 1px var(--volt),0 0.1875rem 0.625rem -0.25rem rgba(13,156,248,.35)}
/* الأعلام أكبر وأوضح (طلب المالك): ‎32×22‎ بزوايا ناعمة، حافّةٌ رفيعة وظلٌّ
   صغير يفصلانها عن الزجاج، ولمعةٌ علوية خفيفة من مادّة الكبسولة نفسها */
.lt-flag{flex:none;display:block;position:relative;width:2rem;height:1.375rem;border-radius:var(--sharp);overflow:hidden;
  box-shadow:0 0 0 .5px rgba(0,0,0,.22),0 1px 0.1875rem rgba(12,40,80,.22)}
.lt-flag svg{width:100%;height:100%;display:block}
.lt-flag::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35)}
.lt-name{line-height:1.2}
.lt-chev{flex:none;width:1.125rem;height:1.125rem;color:var(--ink-2);transition:transform .35s cubic-bezier(.32,.72,0,1)}
.lt-wrap.open .lt-chev{transform:rotate(180deg)}

/* القائمة: تنبثق من الكبسولة نفسها (أعلى جهة النهاية) وتعود إليها */
.lt-menu{position:absolute;top:calc(100% + 0.5rem);inset-inline-end:0;z-index:120;min-width:14rem;padding:0.375rem;
  border-radius:var(--sharp);display:flex;flex-direction:column;gap:0.125rem;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(238,247,254,.82));
  -webkit-backdrop-filter:blur(1.5rem) saturate(190%);backdrop-filter:blur(1.5rem) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 .5px rgba(12,74,140,.16),
    0 1.375rem 3rem -1.125rem rgba(12,74,140,.42),0 0.25rem 0.75rem -0.375rem rgba(12,74,140,.14);
  transform-origin:top right;visibility:hidden;opacity:0;transform:translateY(-0.375rem) scale(.95);
  transition:opacity .16s ease,transform .26s cubic-bezier(.32,.72,0,1),visibility 0s linear .26s}
html[dir=rtl] .lt-menu{transform-origin:top left}
.lt-wrap.open .lt-menu{visibility:visible;opacity:1;transform:none;
  transition:opacity .16s ease,transform .42s cubic-bezier(.32,.72,0,1),visibility 0s}
.lt-opt{display:flex;align-items:center;gap:0.875rem;width:100%;height:3.375rem;padding:0 0.875rem;border:0;border-radius:var(--sharp);
  background:none;color:var(--ink);font:500 1.03125rem/1.2 var(--f);text-align:start;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color .18s ease,box-shadow .22s ease}
.lt-opt:hover,.lt-opt:focus-visible{background:rgba(13,156,248,.09);outline:0}
.lt-opt[aria-checked="true"]{background:#fff;font-weight:600;
  box-shadow:inset 0 1px 1px #fff,0 0 0 .5px rgba(12,74,140,.12),0 0.375rem 0.875rem -0.5rem rgba(12,74,140,.36)}
.lt-opt[aria-checked="true"]:focus-visible{box-shadow:0 0 0 0.125rem var(--volt)}
.lt-opt-name{flex:1}
.lt-tick{flex:none;width:1.25rem;height:1.25rem;color:var(--sky,#0d9cf8);opacity:0}
.lt-opt[aria-checked="true"] .lt-tick{opacity:1}
/* على الهاتف الرأس ضيّق: العَلَم والسهم يكفيان في الكبسولة، والأسماء في القائمة */
@media(max-width:560px){
  .icon-btn.lang-toggle{height:2.625rem;padding:0 0.5625rem 0 0.625rem;gap:0.375rem}
  .lang-toggle .lt-flag{width:1.875rem;height:1.3125rem}
  .lang-toggle .lt-chev{width:1rem;height:1rem}
  .lang-toggle .lt-name{display:none}
}
@media(prefers-reduced-motion:reduce){
  .lt-menu,.lt-wrap.open .lt-menu{transform:none;transition:opacity .16s ease,visibility 0s linear .16s}
  .lt-wrap.open .lt-menu{transition:opacity .16s ease,visibility 0s}
  .lt-chev{transition:none}
}
@media(prefers-reduced-transparency:reduce){
  .lt-menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.cart .badge{position:absolute;top:0.25rem;inset-inline-start:0.25rem;background:var(--red);color:#fff;
  font-size:0.625rem;font-weight:600;min-width:1.0625rem;height:1.0625rem;border-radius:var(--sharp);display:grid;
  place-items:center;font-family:var(--fn)}
.mainnav{border-top:1px solid var(--line)}
.mainnav ul{display:flex;gap:0.375rem}
.mainnav a{display:block;padding:0.8125rem 1.125rem;font-weight:600;font-size:0.90625rem}
.mainnav li:hover>a{color:var(--blue)}
.mega{display:none;position:absolute;inset-inline:0;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.09);padding:1.875rem 0 2.25rem;z-index:60}
.mega.open{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.75rem}
.mega-col h4{font-size:0.75rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:0.75rem}
.mega-col li a{display:block;padding:0.3125rem 0;font-size:0.875rem;font-weight:500}
.mega-col li a:hover{color:var(--blue);font-weight:600}
/* عدّاد المنتجات في القائمة: الرقم لاتيني في سياق عربي فيُعزَل */
.mcnt{margin-inline-start:0.375rem;font-size:0.6875rem;color:var(--muted);
  font-family:var(--fn);direction:ltr;unicode-bidi:isolate}
/* الأقسام الشقيقة على صفحة التصنيف — روابط لا مرشِّحات */
.sib{display:flex;justify-content:space-between;align-items:center;
  padding:0.375rem 0;font-size:0.84375rem;color:var(--ink-2)}
.sib:hover{color:var(--blue)}
.sib.on{font-weight:650;color:var(--blue)}
.sib span{font-size:0.6875rem;color:var(--muted);font-family:var(--fn);
  direction:ltr;unicode-bidi:isolate}

/* ── الهيرو ── */
.hero{background:var(--slate);color:#fff;position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;min-height:28.75rem;padding:3.5rem 1.25rem}
.hero h1{font-size:clamp(2.125rem,5.4vw,3.875rem);line-height:1.05;letter-spacing:-.02em}
.hero .kicker{font-size:0.8125rem;letter-spacing:.22em;color:var(--blue);font-weight:600;margin-bottom:0.875rem}
.hero p{font-size:1.0625rem;color:#dfe7ea;max-width:52ch;margin:1.125rem 0 1.75rem}
.hero-cta{display:flex;gap:0.75rem;flex-wrap:wrap}
.hero .button.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .button.ghost:hover{background:#fff;color:#000}
.hero-art{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem}
.hero-art img{border-radius:var(--sharp);background:#fff;padding:0.875rem;aspect-ratio:1;object-fit:contain}

/* ── بطاقات المنتجات ── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.625rem}
.card{border:1px solid var(--line);border-radius:var(--sharp);background:#fff;position:relative;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{border-color:var(--line-2);box-shadow:0 0.625rem 1.75rem rgba(0,0,0,.07);transform:translateY(-0.125rem)}
.card-badge{position:absolute;top:0.875rem;inset-inline-start:0.875rem;background:var(--red);color:#fff;
  font-size:0.78125rem;font-weight:600;padding:0.25rem 0.75rem;border-radius:var(--sharp);z-index:2}
.card-img{display:block;padding:1.625rem;background:#fff;border-radius:var(--sharp) var(--sharp) 0 0}
.card-img img{aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.card-body{padding:0 1.25rem 1.25rem;display:flex;flex-direction:column;gap:0.625rem;flex:1}
.card-cat{font-size:0.78125rem;color:var(--muted);letter-spacing:.06em;font-weight:500}
.card-name{font-size:1.0625rem;font-weight:600;line-height:1.4;min-height:2.8em}
.card-name a:hover{color:var(--blue)}
.card-brand{font-size:0.84375rem;color:var(--slate-2);font-family:var(--fn);font-weight:500}
.card-blurb{margin:0;font-size:0.875rem;color:var(--slate-2);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-variant{width:100%;height:2.875rem;border:1px solid var(--line);border-radius:var(--sharp);padding:0 0.75rem;
  font-family:var(--f);font-size:0.90625rem;background:var(--bg-2)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;
  margin-top:auto;padding-top:0.625rem}
.card-price{font-size:1.5rem;font-weight:700;font-family:var(--fn);line-height:1.2}
.card-price small{font-size:0.8125rem;font-weight:500;font-family:var(--f);color:var(--muted)}
.in-stock{font-size:0.78125rem;color:#2e7d32;font-weight:600}
.out-stock{font-size:0.78125rem;color:var(--muted);font-weight:600}
/* زر الإضافة: علامة + دائرية زرقاء كما في الموقع الأم */
.card-add{width:3.25rem;height:3.25rem;flex:none;border:0;border-radius:50%;background:var(--blue);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s;
  box-shadow:0 0.125rem 0.625rem rgba(12,156,235,.35)}
.card-add:hover{background:#0b86ca;transform:scale(1.06)}
.card-add:active{transform:scale(.96)}
.card-add:disabled{background:var(--muted);box-shadow:none;cursor:not-allowed}
.card-add:disabled:hover{background:var(--muted);transform:none}

/* ── بلاطات الأهداف: صورة بحواف نظيفة واسم القسم بالأبيض فوقها ── */
.goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem}
.goal{position:relative;border-radius:var(--sharp);overflow:hidden;aspect-ratio:3/4;display:block;
  isolation:isolate;background:var(--slate)}
.goal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .5s ease}
.goal:hover img{transform:scale(1.06)}
.goal::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,16,19,.88) 0%,rgba(10,16,19,.45) 38%,rgba(10,16,19,.05) 72%)}
.goal-in{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:1.625rem 1.5rem}
.goal h3{font-size:1.4375rem;line-height:1.3;color:#fff;text-shadow:0 1px 0.75rem rgba(0,0,0,.5)}
.goal p{margin:0.4375rem 0 0;font-size:0.875rem;color:rgba(255,255,255,.86);line-height:1.55}
.goal-n{display:inline-block;margin-top:0.875rem;font-size:0.8125rem;font-weight:600;color:#fff;
  border:0.09375rem solid rgba(255,255,255,.55);border-radius:var(--sharp);padding:0.375rem 1.125rem;transition:.18s}
.goal:hover .goal-n{background:#fff;color:#111;border-color:#fff}

/* ── شريط الوعود ── */
.usp{background:var(--bg-3);border-block:1px solid var(--line)}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;padding:2.75rem 0}
.usp-item{display:flex;gap:1rem;align-items:flex-start}
.usp-item svg{flex:none;color:var(--slate)}
.usp-item h4{font-size:1rem;margin-bottom:0.25rem}
.usp-item p{margin:0;font-size:0.84375rem;color:var(--slate-2)}

/* ── القصة والأرقام ── */
.story{background:var(--slate);color:#fff}
.story-in{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:4.375rem 1.25rem}
.story h2{font-size:clamp(1.5rem,3.4vw,2.375rem);margin-bottom:0.875rem}
.story .lead{font-size:1.125rem;color:var(--blue);font-weight:600;margin:0 0 0.75rem}
.story p{color:#d7e0e4;margin:0 0 0.625rem}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0.125rem;background:rgba(255,255,255,.16);
  border-radius:var(--sharp);overflow:hidden}
.stat{background:var(--slate);padding:1.625rem 1.25rem;text-align:center}
.stat b{display:block;font-size:1.875rem;font-weight:700;font-family:var(--fn)}
.stat span{font-size:0.8125rem;color:#c3d0d6}

/* ── الرياضيون والمقالات ── */
.ath-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.125rem}
.ath{border-radius:var(--sharp);background:var(--bg-2);padding:1.75rem 1.25rem;text-align:center}
.ath .av{width:4.625rem;height:4.625rem;border-radius:50%;background:var(--slate);color:#fff;margin:0 auto 0.75rem;
  display:grid;place-items:center;font-weight:700;font-size:1.5rem;font-family:var(--fn)}
.ath .av-img{width:4.625rem;height:4.625rem;border-radius:50%;object-fit:cover;object-position:top center;
  margin:0 auto 0.75rem;display:block}
.ath h4{font-size:1rem}
.ath p{margin:0.125rem 0 0;font-size:0.8125rem;color:var(--slate-2)}
.ath span{font-size:0.75rem;color:var(--muted);font-family:var(--fn)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.art{border:1px solid var(--line);border-radius:var(--sharp);overflow:hidden;transition:.18s}
.art:hover{box-shadow:0 0.625rem 1.75rem rgba(0,0,0,.07)}
.art-top{height:9.375rem;background:linear-gradient(135deg,var(--bg-4),var(--bg-2))}
.art-body{padding:1.25rem}
.art .tag{font-size:0.6875rem;letter-spacing:.1em;color:var(--blue);font-weight:600}
.art h3{font-size:1.125rem;margin:0.5rem 0}
.art p{margin:0;font-size:0.875rem;color:var(--slate-2)}

/* ── النشرة ── */
.news{background:var(--bg-2);text-align:center}
.news-in{padding:4rem 1.25rem;max-width:40rem;margin:0 auto}
.news h2{font-size:clamp(1.375rem,3vw,2rem);margin-bottom:0.5rem}
.news p{color:var(--slate-2);margin:0 0 1.375rem}
.news-form{display:flex;gap:0.625rem}
/* الحقل كان بلا ‎font-size‎ فورث افتراضي المتصفّح للنماذج (‎13.3px‎):
   أصغر من متن الموقع، وتحت ‎16px‎ — وأيُّ حقلٍ دون ‎16px‎ يجعل iOS
   يكبّر الصفحة كلّها عند اللمس ولا يعيدها. */
.news-form input{flex:1;height:3rem;border:0.09375rem solid var(--line-2);border-radius:var(--sharp);
  padding:0 1.25rem;font-family:var(--f);font-size:1rem}
.news-form input:focus{outline:0;border-color:#000}

/* ── التذييل ── */
.ftr{background:#161c1f;color:#c9d3d8;padding-top:3.5rem}
.ftr-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:2rem;padding-bottom:2.75rem}
.ftr h4{color:#fff;font-size:0.875rem;margin-bottom:0.875rem;letter-spacing:.04em}
.ftr li a{display:block;padding:0.3125rem 0;font-size:0.84375rem}
.ftr li a:hover{color:#fff}
.f-news p{font-size:0.84375rem;margin:0 0 0.875rem}
.f-news .news-form input{height:2.75rem;background:#222a2e;border-color:#333d42;color:#fff}
.f-news .button{background:var(--blue)}
.socials{display:flex;gap:0.625rem;margin-top:1.125rem}
.socials a{width:2.375rem;height:2.375rem;border-radius:50%;background:#222a2e;display:grid;place-items:center}
.socials a:hover{background:var(--blue);color:#fff}
.ftr-bar{border-top:1px solid #2a3337;font-size:0.78125rem}
.ftr-bar-in{display:flex;justify-content:space-between;gap:1rem;padding:1.125rem 1.25rem;flex-wrap:wrap}
.ftr-legal a{margin-inline-start:1rem}

/* ── صفحة التصنيف ── */
.crumbs{font-size:0.8125rem;color:var(--muted);padding:1.125rem 0}
.crumbs a:hover{color:#000}
.col-layout{display:grid;grid-template-columns:16.5rem 1fr;gap:2.125rem;padding-bottom:4.375rem}
.filters{position:sticky;top:11.25rem;align-self:start}
.fgroup{border-bottom:1px solid var(--line);padding:1rem 0}
.fgroup h4{font-size:0.875rem;margin-bottom:0.625rem;display:flex;justify-content:space-between;cursor:pointer}
.fgroup label{display:flex;align-items:center;gap:0.5625rem;padding:0.25rem 0;font-size:0.84375rem;cursor:pointer}
.fgroup input{accent-color:#000;width:0.9375rem;height:0.9375rem}
.fgroup .cnt{color:var(--muted);font-size:0.75rem;margin-inline-start:auto;font-family:var(--fn)}
.col-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.col-head .count{color:var(--muted);font-size:0.875rem}
.sortbar select{height:2.625rem;border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:0 1rem;
  font-family:var(--f);font-size:0.875rem;background:#fff}
.cat-intro{background:var(--bg-3);border-radius:var(--sharp);padding:1.375rem 1.5rem;margin-bottom:1.5rem;
  font-size:0.90625rem;color:var(--slate)}
.pager{display:flex;gap:0.5rem;justify-content:center;padding:2.125rem 0}
.pager a{width:2.625rem;height:2.625rem;border:1px solid var(--line);border-radius:50%;display:grid;
  place-items:center;font-weight:600;font-size:0.875rem}
.pager a.on{background:#000;color:#fff;border-color:#000}

/* ── صفحة المنتج ── */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:3.25rem;padding:1.625rem 0 4rem}
.pdp-media .main{border:1px solid var(--line);border-radius:var(--sharp);padding:2.125rem;background:#fff}
.pdp-media .main img{aspect-ratio:1;object-fit:contain}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:0.625rem;margin-top:0.75rem}
.thumbs div{border:1px solid var(--line);border-radius:var(--sharp);aspect-ratio:1;background:var(--bg-2)}
.pdp h1{font-size:clamp(1.5rem,3.2vw,2.25rem);margin-bottom:0.625rem}
.rating{display:flex;align-items:center;gap:0.5rem;font-size:0.84375rem;color:var(--slate-2);margin-bottom:1rem}
.stars{color:#f5a623;letter-spacing:0.125rem}
.price-row{display:flex;align-items:baseline;gap:0.75rem;margin:1.125rem 0}
.price-now{font-size:2.125rem;font-weight:700;font-family:var(--fn)}
.price-unit{font-size:0.8125rem;color:var(--muted)}
.opt-group{margin:1.125rem 0}
.opt-group h4{font-size:0.8125rem;letter-spacing:.08em;color:var(--muted);margin-bottom:0.5625rem;text-transform:uppercase}
/* (‎.chips/.chip/.qty‎ حُذفت: لا صفحة ولا قالب يحملها — خيارات المنتج ‎.opt-chips‎ والكمية ‎.qty-box‎) */
.buy-row{display:flex;gap:0.75rem;margin:1.375rem 0}
.buy-row .button{flex:1;height:3rem}
.badges{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:1.25rem}
.pbadge{display:flex;align-items:center;gap:0.4375rem;background:var(--bg-3);border-radius:var(--sharp);
  padding:0.4375rem 0.875rem;font-size:0.78125rem;font-weight:600;color:var(--slate)}
.trust{border-top:1px solid var(--line);margin-top:1.375rem;padding-top:1.125rem;display:grid;gap:0.5625rem;
  font-size:0.84375rem;color:var(--slate-2)}
.trust div{display:flex;gap:0.5625rem;align-items:center}

.pblock{padding:3.5rem 0;border-top:1px solid var(--line)}
.pblock h2{font-size:clamp(1.375rem,3vw,2rem);margin-bottom:1rem}
.pblock .lead{font-size:1.0625rem;color:var(--slate);max-width:70ch}
.feat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1.625rem}
.feat{background:var(--bg-3);border-radius:var(--sharp);padding:1.25rem}
.feat h4{font-size:0.9375rem;margin-bottom:0.375rem}
.feat p{margin:0;font-size:0.84375rem;color:var(--slate-2)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem;margin-top:1.625rem}
.num{text-align:center;background:var(--slate);color:#fff;border-radius:var(--sharp);padding:1.75rem 1.125rem}
.num b{display:block;font-size:2rem;font-weight:700;font-family:var(--fn)}
.num span{font-size:0.8125rem;color:#c3d0d6}
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.5rem}
.proc div{border-inline-start:0.1875rem solid var(--blue);padding-inline-start:1rem}
.proc h4{font-size:1rem;margin-bottom:0.375rem}
.proc p{margin:0;font-size:0.875rem;color:var(--slate-2)}
.ntable{width:100%;border-collapse:collapse;margin-top:1.125rem;font-size:0.875rem}
.ntable th{background:var(--slate);color:#fff;text-align:start;padding:0.75rem 0.875rem;font-size:0.8125rem}
.ntable td{border-bottom:1px solid var(--line);padding:0.6875rem 0.875rem;font-family:var(--fn)}
.ntable td:first-child{font-family:var(--f);font-weight:500}
.ntable tr:nth-child(even) td{background:var(--bg-2)}
.acc{border-top:1px solid var(--line)}
/* (‎.acc-item/.acc-q/.acc-a‎ حُذفت مع معالجها: لا صفحة تحملها) */
.rev{display:grid;grid-template-columns:17.5rem 1fr;gap:2.5rem;align-items:start}
.rev-score{text-align:center;background:var(--bg-3);border-radius:var(--sharp);padding:1.75rem}
.rev-score b{font-size:3.25rem;font-weight:700;font-family:var(--fn);display:block;line-height:1}
.rev-bar{display:flex;align-items:center;gap:0.625rem;font-size:0.8125rem;margin-bottom:0.4375rem}
.rev-bar .track{flex:1;height:0.5rem;background:var(--bg-2);border-radius:var(--sharp);overflow:hidden}
.rev-bar .fill{height:100%;background:#f5a623}
.rev-sum{background:var(--bg-4);border-radius:var(--sharp);padding:1.25rem 1.375rem;margin-top:1rem;font-size:0.90625rem}

/* ── المدوّنة: بطاقات بتركيب الشركة الأم (صورة 16:9 ← الفئة ← العنوان) ── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.625rem}
.bcard{border-radius:var(--sharp);overflow:hidden;background:#fff;transition:.2s}
.bcard:hover{transform:translateY(-0.1875rem)}
.bc-img{position:relative;aspect-ratio:450/253;overflow:hidden;border-radius:var(--sharp);
  background:var(--bg-2)}
.bc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bcard:hover .bc-img img{transform:scale(1.05)}
.bc-img .ph{width:100%;height:100%;background:linear-gradient(135deg,var(--bg-4),var(--bg-2))}
.bc-text{padding:1rem 0.125rem 0}
.bc-cat{margin:0 0 0.375rem;font-size:0.75rem;font-weight:600;color:var(--blue);letter-spacing:.02em}
.bc-title{font-size:1.0625rem;line-height:1.45;font-weight:600}
.bcard:hover .bc-title{color:var(--blue)}
.bc-ex{margin:0.5rem 0 0;font-size:0.875rem;color:var(--slate-2);line-height:1.65}
.bcard.big{grid-column:span 3;display:block}
.bcard.big a{display:grid;grid-template-columns:1.25fr 1fr;gap:1.875rem;align-items:center}
.bcard.big .bc-img{aspect-ratio:16/8}
.bcard.big .bc-title{font-size:clamp(1.375rem,2.6vw,2rem);line-height:1.28}
.bcard.big .bc-text{padding:0}
.blog-hero{background:var(--bg-3);border-bottom:1px solid var(--line);padding:2.75rem 0 2.5rem}
.blog-hero h1{font-size:clamp(1.75rem,4vw,2.75rem)}
.blog-hero p{color:var(--slate-2);margin:0.625rem 0 0;max-width:70ch}
.blog-nav{display:flex;gap:0.5rem;flex-wrap:wrap;padding:1.5rem 0 1.875rem}
.blog-nav a{font-size:0.84375rem;font-weight:600;border:0.09375rem solid var(--line-2);
  border-radius:var(--sharp);padding:0.5rem 1.125rem;transition:.15s;background:#fff}
.blog-nav a:hover{border-color:#000}
.blog-nav a.on{background:#000;color:#fff;border-color:#000}
.blog-nav a .n{color:var(--muted);font-family:var(--fn);font-size:0.75rem;margin-inline-start:0.3125rem}
.blog-nav a.on .n{color:rgba(255,255,255,.7)}

/* ── صفحة المقال ── */
.apage{max-width:51.25rem;margin:0 auto;padding:1.875rem 1.25rem 4.375rem}
.apage .bc-cat{font-size:0.8125rem}
.apage h1{font-size:clamp(1.625rem,4vw,2.625rem);line-height:1.25;margin:0.5rem 0 0.875rem}
.ameta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:0.8125rem;
  border-bottom:1px solid var(--line);padding-bottom:1.125rem;margin-bottom:1.625rem}
.ahero{border-radius:var(--sharp);overflow:hidden;margin-bottom:1.75rem;aspect-ratio:16/8;background:var(--bg-2)}
.ahero img{width:100%;height:100%;object-fit:cover}
.abody p{font-size:1.0625rem;line-height:1.95;color:var(--ink-2);margin:0 0 1.125rem}
.abody h2{font-size:1.625rem;margin:2.125rem 0 0.875rem}
.abody h3{font-size:1.25rem;margin:1.625rem 0 0.625rem;color:var(--slate)}
.abody strong{font-weight:650;color:var(--ink)}
.asrc{background:var(--bg-3);border-radius:var(--sharp);padding:1.125rem 1.375rem;margin-top:2.125rem;
  font-size:0.84375rem;color:var(--slate-2)}
.asrc a{color:var(--blue);font-weight:600}
.apending{background:#fff8e6;border:1px solid #f0d999;border-radius:var(--sharp);padding:1.375rem 1.5rem;
  margin:1.5rem 0}
.apending h3{margin:0 0 0.5rem;font-size:1.0625rem}
.apending p{margin:0;font-size:0.90625rem;color:var(--ink-2)}
/* شارة المقال غير المكتمل الترجمة */
.bc-soon{position:absolute;top:0.625rem;inset-inline-start:0.625rem;z-index:2;background:rgba(0,0,0,.72);
  color:#fff;font-size:0.6875rem;font-weight:600;padding:0.25rem 0.6875rem;border-radius:var(--sharp)}
.bcard{position:relative}
/* التنقّل بين المقالات */
.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.125rem;
  border-top:1px solid var(--line);padding-top:1.5rem}
.pagenav a{display:block;border:1px solid var(--line);border-radius:var(--sharp);padding:1rem 1.125rem;
  transition:.18s}
.pagenav a:hover{border-color:var(--blue);background:var(--bg-3)}
.pagenav span{display:block;font-size:0.75rem;color:var(--muted);font-weight:600;margin-bottom:0.3125rem}
.pagenav b{font-size:0.9375rem;line-height:1.45;font-weight:600}
.pagenav .pn-next{text-align:start}
.pagenav .pn-prev{text-align:end}

/* ── البرامج الرياضية ── */
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.prog{border:1px solid var(--line);border-radius:var(--sharp);padding:1.625rem 1.5rem;background:#fff;
  display:flex;flex-direction:column;gap:0.625rem;transition:.18s}
.prog:hover{border-color:var(--blue);box-shadow:0 0.75rem 1.875rem rgba(0,0,0,.07);transform:translateY(-0.125rem)}
.prog-meta{display:flex;gap:0.5rem;flex-wrap:wrap}
.prog-meta span{font-size:0.71875rem;font-weight:600;background:var(--bg-4);color:var(--slate);
  border-radius:var(--sharp);padding:0.25rem 0.75rem}
.prog h3{font-size:1.1875rem;line-height:1.35}
.prog p{margin:0;font-size:0.875rem;color:var(--slate-2);flex:1}
.prog a{font-size:0.84375rem;font-weight:600;color:var(--blue)}
.prog a:hover{text-decoration:underline}
.cat-chips{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.375rem}
.cat-chips a{font-size:0.8125rem;font-weight:600;border:0.09375rem solid var(--line-2);border-radius:var(--sharp);
  padding:0.4375rem 1rem;transition:.15s}
.cat-chips a:hover,.cat-chips a.on{background:#000;color:#fff;border-color:#000}
.art .tag{font-size:0.6875rem;letter-spacing:.1em;color:var(--blue);font-weight:600}
.art-src{font-size:0.71875rem;color:var(--muted);margin-top:0.625rem;display:block}

/* ── الطباعة وتصدير PDF ── */
@media print{
  @page{size:A4;margin:12mm 10mm}
  html,body{font-size:10pt}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* عناصر تصفّح لا معنى لها على الورق */
  .utility,.mainnav,.mega,.search,.hdr-actions,.burger,.news,.socials,
  .card-add,.buy-row,.pagenav,.cat-chips,.blog-nav,.sortbar,
  .filters,.pager,.thumbs,.f-news .news-form{display:none!important}
  .hdr{position:static;border-bottom:0.125rem solid #242424}
  .hdr-in{height:auto;padding:0.625rem 0}
  .wrap{max-width:none;padding:0}
  /* منع القطع في منتصف كتلة */
  .pblock,.card,.bcard,.prog,.goal,.usp-item,.feat,.num,
  .rev,.proc>div{page-break-inside:avoid;break-inside:avoid}
  h2,h3{page-break-after:avoid;break-after:avoid}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
  .pblock{padding:1.125rem 0}
  .pdp{grid-template-columns:1fr 1fr;gap:1.5rem;padding:0.75rem 0 1.5rem}
  .pdp-media .main{padding:0.75rem}
  .grid{grid-template-columns:repeat(3,1fr);gap:0.75rem}
  .ftr{background:#fff;color:#242424;padding-top:1rem;
       border-top:1px solid #c7c7c7}
  .ftr h4,.ftr li a{color:#242424}
  .ftr-grid{grid-template-columns:repeat(4,1fr);padding-bottom:0.75rem}
  a[href]::after{content:''}
}

@media(max-width:1080px){
  .grid,.ath-grid{grid-template-columns:repeat(3,1fr)}
  .bcard.big a{grid-template-columns:1fr}
  .mega-grid{grid-template-columns:repeat(3,1fr)}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
  .goals{grid-template-columns:repeat(3,1fr)}
  .pdp,.story-in{grid-template-columns:1fr;gap:1.75rem}
  .ftr-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .search,.mainnav{display:none}
  .burger{display:flex}
  .col-layout{grid-template-columns:1fr}
  .filters{position:static}
  .grid,.art-grid,.usp-grid,.ath-grid,.prog-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .goals{grid-template-columns:repeat(3,1fr)}
  .bcard.big{grid-column:span 2}
  .rev{grid-template-columns:1fr}
  .proc,.nums{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid,.art-grid,.usp-grid,.ath-grid,.feat-grid,.ftr-grid,.prog-grid,
  .blog-grid{grid-template-columns:1fr}
  .goals{grid-template-columns:repeat(2,1fr)}
  .bcard.big{grid-column:span 1}
}

/* ── المستشار الرياضي ── */
.adv-hero{background:var(--bg-4);padding:3.25rem 0 2.75rem;border-bottom:1px solid var(--line)}
.adv-hero h1{font-size:clamp(1.625rem,4vw,2.5rem);margin-bottom:0.75rem}
.adv-hero p{max-width:47.5rem;color:var(--ink-2);font-size:0.96875rem;margin:0}
.adv-hero .adv-tags{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1.25rem}
.adv-tags span{background:#fff;border:1px solid var(--line);border-radius:var(--sharp);
  padding:0.375rem 0.9375rem;font-size:0.78125rem;font-weight:600;color:var(--slate)}

.adv-wrap{max-width:62.5rem;margin:0 auto;padding:0 1.25rem}
.adv-shell{padding:2.75rem 0 4.5rem}

.steps{display:flex;gap:0.25rem;margin-bottom:0.5rem}
.steps i{flex:1;height:0.3125rem;border-radius:var(--sharp);background:var(--line);transition:.3s}
.steps i.on{background:var(--blue)}
.steps i.done{background:var(--slate)}
.step-meta{display:flex;justify-content:space-between;align-items:baseline;
  font-size:0.8125rem;color:var(--muted);margin-bottom:1.625rem;font-weight:500}

.card-form{background:#fff;border:1px solid var(--line);border-radius:var(--sharp);padding:2rem}
.step{display:none}
.step.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(0.375rem)}to{opacity:1;transform:none}}
.step h2{font-size:1.375rem;margin-bottom:0.375rem}
.step .lead{color:var(--muted);font-size:0.875rem;margin:0 0 1.625rem}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.125rem,1fr));gap:1.125rem}
.fld label{display:block;font-weight:600;font-size:0.84375rem;margin-bottom:0.4375rem}
.fld label em{font-style:normal;color:var(--muted);font-weight:500;font-size:0.75rem}
.fld input,.fld select{width:100%;height:2.875rem;border:0.09375rem solid var(--line);border-radius:var(--sharp);
  padding:0 0.875rem;font-family:var(--f);font-size:0.9375rem;background:var(--bg-2);color:var(--ink)}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--blue);background:#fff}
.fld input.bad{border-color:var(--red);background:#fff6f5}
.fld .hint{font-size:0.71875rem;color:var(--muted);margin-top:0.3125rem;line-height:1.5}
/* examples read as examples: faint, and fading further once the field has focus */
.fld input::placeholder{color:var(--ink);opacity:.3;font-weight:400;transition:opacity .2s ease}
.fld input:focus::placeholder{opacity:.14}
.fld label em.opt{display:inline-block;margin-inline-start:0.375rem;padding:1px 0.5rem;border-radius:var(--sharp);
  background:var(--bg-2);color:var(--muted);font-size:0.6875rem;font-weight:500;line-height:1.6;vertical-align:1px}
/* label / input / hint rows line up across each row even when a label wraps.
   Labels hang from the top of their row: bottom-aligned, a one-line label (Waist, with no
   "Optional" pill) sat a whole line lower than its wrapped neighbours (owner report). */
@supports (grid-template-rows:subgrid){
  .fields{row-gap:0}
  .fields>.fld{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;margin-bottom:1.125rem}
  .fields>.fld>label{align-self:start}
  .fields>.fld>.hint{align-self:start}
}
.adv-restored{display:flex;align-items:center;justify-content:space-between;gap:0.625rem 1rem;flex-wrap:wrap;
  font-size:0.8125rem;color:#0a5f8f;background:#eaf6fe;border-radius:var(--sharp);padding:0.625rem 0.625rem 0.625rem 0.875rem;margin:0 0 1.25rem}
html[dir=rtl] .adv-restored{padding:0.625rem 0.875rem 0.625rem 0.625rem}
.adv-restored[hidden]{display:none}
.adv-restore{border:0;border-radius:var(--sharp);background:#fff;color:var(--royal);font:600 0.8125rem/1 var(--f);
  padding:0.5625rem 0.875rem;cursor:pointer;box-shadow:0 1px 0 rgba(9,88,169,.12)}
.adv-restore:hover{background:var(--royal);color:#fff}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr));gap:0.75rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:block;border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:1rem 1.125rem;
  cursor:pointer;transition:.16s;background:var(--bg-2);height:100%}
.opt span b{display:block;font-size:0.9375rem;margin-bottom:0.25rem}
.opt span i{font-style:normal;font-size:0.78125rem;color:var(--muted);line-height:1.5;display:block}
.opt input:checked+span{border-color:var(--blue);background:#eaf6fe;box-shadow:0 0 0 0.1875rem #0c9ceb22}
.opt span:hover{border-color:var(--line-2)}

.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.375rem,1fr));gap:0.625rem}
.chk{display:flex;gap:0.625rem;align-items:flex-start;border:0.09375rem solid var(--line);border-radius:var(--sharp);
  padding:0.8125rem 0.9375rem;cursor:pointer;background:var(--bg-2);font-size:0.875rem;transition:.16s}
.chk:hover{border-color:var(--line-2)}
.chk input{margin:0.125rem 0 0;width:1.0625rem;height:1.0625rem;accent-color:var(--blue);flex:none}
.chk.hot{border-color:#f0c5c0;background:#fff8f7}
.chk:has(input:checked){border-color:var(--blue);background:#eaf6fe}

.grp{margin-bottom:1.625rem}
.grp>h3{font-size:0.875rem;font-weight:650;color:var(--slate);margin-bottom:0.75rem;
  padding-bottom:0.5rem;border-bottom:1px solid var(--line)}

.nav-row{display:flex;justify-content:space-between;gap:0.75rem;margin-top:1.875rem;
  padding-top:1.375rem;border-top:1px solid var(--line)}
.err{background:#fff1ef;border:1px solid #f5c6bf;color:#b32d1b;border-radius:var(--sharp);
  padding:0.75rem 1rem;font-size:0.84375rem;font-weight:500;margin-bottom:1.125rem;display:none}
.err.on{display:block}

/* ── النتائج ── */
#res{display:none}
#res.on{display:block}
.r-sec{background:#fff;border:1px solid var(--line);border-radius:var(--sharp);padding:1.75rem;margin-bottom:1.25rem}
.r-sec>h2{font-size:1.25rem;margin-bottom:0.25rem}
.r-sec>.sub{color:var(--muted);font-size:0.8125rem;margin:0 0 1.375rem}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:0.875rem}
.kpi{background:var(--bg-3);border-radius:var(--sharp);padding:1.125rem;text-align:center}
.kpi b{display:block;font-size:1.6875rem;font-weight:700;line-height:1.15;color:var(--slate);
  font-family:var(--fn)}
.kpi b small{font-size:0.8125rem;font-weight:600;color:var(--muted)}
.kpi span{display:block;font-size:0.78125rem;color:var(--ink-2);margin-top:0.375rem;font-weight:500}
.kpi.hi{background:#eaf6fe}
.kpi.hi b{color:var(--blue)}

.macros{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));gap:0.875rem;margin-top:0.5rem}
.macro{border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:1rem;text-align:center}
.macro u{display:block;text-decoration:none;font-size:0.75rem;font-weight:600;color:var(--muted)}
.macro b{display:block;font-size:1.5625rem;font-weight:700;margin:0.3125rem 0;font-family:var(--fn)}
.macro i{font-style:normal;font-size:0.71875rem;color:var(--muted)}
.macro.p{border-color:#0c9ceb}.macro.p b{color:#0c9ceb}
.macro.c{border-color:#f0a202}.macro.c b{color:#c07f00}
.macro.f{border-color:#7a5cc7}.macro.f b{color:#7a5cc7}

table.rt{width:100%;border-collapse:collapse;font-size:0.84375rem}
table.rt th{background:var(--slate);color:#fff;font-weight:600;padding:0.6875rem 0.75rem;text-align:right;
  font-size:0.78125rem}
table.rt td{padding:0.625rem 0.75rem;border-bottom:1px solid var(--line)}
table.rt tr:nth-child(even) td{background:var(--bg-2)}
table.rt td.n{font-family:var(--fn);font-weight:600;white-space:nowrap}
/* ── الخطّ الزمني ──
   عزل الاتّجاه لازم: بلا ltr تُعرَض «−2.6 إلى −5.2 كغ» مقلوبةً
   في سياق الصفحة العربي. */
table.tl td:first-child{width:4rem;text-align:center;font-size:1.0625rem;
  color:var(--blue)}
.rng{display:inline-block;direction:ltr;unicode-bidi:isolate}
table.tl td.n em{display:block;font-style:normal;font-size:0.6875rem;
  font-weight:400;color:var(--muted);direction:ltr;unicode-bidi:isolate;
  margin-top:0.125rem}
table.tl td:last-child{font-size:0.8125rem;line-height:1.8;color:var(--ink-2)}
/* الأسبوع الرابع مُبرَز لأنّه لحظة الانسحاب لا لأنّه رقم مهمّ */
table.tl tr.tl-hot td{background:#fdf8ee!important;
  border-top:1px solid #d9c9a8;border-bottom:1px solid #d9c9a8}
table.tl tr.tl-hot td:first-child{color:#7a6410}
.tl-note{margin-top:1rem;background:var(--bg-4);border-radius:var(--sharp);
  padding:0.9375rem 1.0625rem;font-size:0.8125rem;line-height:1.9;color:var(--ink-2)}
.tl-note b{color:var(--ink)}
.tl-note a{color:var(--blue);font-weight:600;display:inline-block;
  margin-top:0.25rem}
.tl-cap{display:inline-block;margin-top:0.3125rem;font-size:0.75rem;color:#7a6410}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.band{display:inline-block;padding:0.1875rem 0.6875rem;border-radius:var(--sharp);font-size:0.71875rem;font-weight:650}
.band.ok{background:#e6f4ea;color:#1e7b3c}
.band.mid{background:#fff4d9;color:#8a6100}
.band.bad{background:#fdeceb;color:#b32d1b}

.meal{border:1px solid var(--line);border-radius:var(--sharp);margin-bottom:0.75rem;overflow:hidden}
.meal-h{background:var(--bg-3);padding:0.75rem 1rem;display:flex;justify-content:space-between;
  align-items:center;gap:0.75rem;flex-wrap:wrap}
.meal-h b{font-size:0.90625rem}
.meal-h span{font-size:0.75rem;color:var(--ink-2);font-weight:600;font-family:var(--fn)}
.meal ul{padding:0.625rem 1rem 0.875rem}
.meal li{display:flex;justify-content:space-between;gap:0.75rem;padding:0.375rem 0;font-size:0.84375rem;
  border-bottom:1px dashed var(--line)}
.meal li:last-child{border:0}
.meal li em{font-style:normal;color:var(--muted);font-family:var(--fn);font-weight:600;
  white-space:nowrap}

.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr));gap:1rem}
.rec{border:1px solid var(--line);border-radius:var(--sharp);overflow:hidden;display:flex;flex-direction:column}
.rec img{height:9.375rem;object-fit:contain;background:var(--bg-2);padding:0.75rem;width:100%}
.rec-b{padding:0.875rem;display:flex;flex-direction:column;gap:0.4375rem;flex:1}
.rec-b h4{font-size:0.875rem;line-height:1.4}
.rec-why{background:#eaf6fe;border-radius:var(--sharp);padding:0.5rem 0.6875rem;font-size:0.75rem;color:#0a5f8f;
  font-weight:500;line-height:1.55}
.rec-f{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:0.5rem;
  padding-top:0.5rem}
.rec-f b{font-size:1.0625rem;font-weight:700;font-family:var(--fn)}
.rec-f .card-add{width:2.5rem;height:2.5rem;flex:none}
/* advisor supplement plan: the day, then store cards with the reason beside each */
.sp-h{font-size:1.0625rem;margin:1.625rem 0 0.25rem;color:var(--iron)}
.sp-sec>.sub+.sp-h{margin-top:0.375rem}
.sp-hsub{margin:0 0 0.875rem;font-size:0.8125rem;color:var(--muted)}
.sp-day{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:0.75rem;margin-top:0.75rem}
.sp-slot{background:var(--bg-2);border-radius:var(--sharp);padding:0.875rem 0.875rem 0.625rem}
.sp-slot h4{font-size:0.8125rem;font-weight:600;color:var(--royal);margin:0 0 0.5rem}
.sp-slot ul{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.sp-slot li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:0.625rem;align-items:center}
.sp-slot img{width:2.5rem;height:3.125rem;object-fit:contain;border-radius:var(--sharp);background:#fff;mix-blend-mode:multiply}
.sp-slot li span{display:flex;flex-direction:column;font-size:0.78125rem;line-height:1.4;color:var(--ink-2)}
.sp-slot li b{font-size:0.875rem;font-weight:600;color:var(--ink)}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,26.25rem),1fr));gap:1.125rem 1.375rem}
.sp-item{display:grid;grid-template-columns:minmax(9.375rem,11.875rem) minmax(0,1fr);gap:1.125rem;align-items:start}
.sp-why{padding-top:0.25rem}
.sp-why p{margin:0 0 0.625rem;font-size:0.875rem;line-height:1.7;color:var(--ink-2)}
.sp-why .sp-dose{margin:0;font-size:0.8125rem;background:#eaf6fe;color:#0a5f8f;border-radius:var(--sharp);padding:0.5625rem 0.75rem}
.sp-why .sp-dose b{font-weight:600}
@media (max-width:560px){
  .sp-item{grid-template-columns:8rem minmax(0,1fr);gap:0.75rem}
  .sp-why p{font-size:0.8125rem}
}

.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr));gap:1rem}
.pg{border:1px solid var(--line);border-radius:var(--sharp);padding:1.125rem;background:var(--bg-2)}
.pg h4{font-size:0.9375rem;margin-bottom:0.4375rem}
.pg p{font-size:0.8125rem;color:var(--ink-2);margin:0 0 0.75rem;line-height:1.6}
.pg .pg-m{display:flex;gap:0.375rem;flex-wrap:wrap;margin-bottom:0.75rem}
.pg .pg-m span{background:#fff;border:1px solid var(--line);border-radius:var(--sharp);
  padding:0.1875rem 0.6875rem;font-size:0.71875rem;font-weight:600}

.note{background:var(--bg-3);border-inline-start:0.25rem solid var(--slate-2);border-radius:0 var(--sharp) var(--sharp) 0;
  padding:1rem 1.125rem;font-size:0.8125rem;line-height:1.75;color:var(--ink-2)}
.note b{color:var(--ink)}
.warn-box{background:#fff8f7;border:0.09375rem solid #f0c5c0;border-radius:var(--sharp);padding:1.375rem 1.5rem}
.warn-box h3{color:#b32d1b;font-size:1.0625rem;margin-bottom:0.625rem}
.warn-box p{font-size:0.875rem;line-height:1.8;margin:0 0 0.625rem;color:var(--ink-2)}
.warn-box ul{list-style:disc;padding-inline-start:1.375rem;font-size:0.84375rem;line-height:1.9;color:var(--ink-2)}

/* رقائق الحجم الأسبوعي على بطاقة البرنامج المرشَّح */
.vol{margin:0.75rem 0 0.875rem;padding-top:0.75rem;border-top:1px solid var(--line)}
.vol small{display:block;color:var(--muted);font-size:0.6875rem;margin-bottom:0.4375rem}
.vchips{display:flex;flex-wrap:wrap;gap:0.3125rem}
.vchip{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.6875rem;
  padding:0.125rem 0.4375rem;border-radius:var(--sharp);background:#f1f2f4;color:#5a5f66;
  white-space:nowrap;line-height:1.7}
.vchip b{font-variant-numeric:tabular-nums;font-weight:600}
.vchip.ok{background:#e6f3ec;color:#1d6b45}
.vchip.mid{background:#f8f2dd;color:#7a6410}
.vchip.lo{background:#fbeee2;color:#8a4a10}
.vchip.bad{background:#fbe9e9;color:#8e2727}
.r-actions{display:flex;gap:0.625rem;flex-wrap:wrap;margin-bottom:1.5rem}
.disc{font-size:0.75rem;color:var(--muted);line-height:1.8;border-top:1px solid var(--line);
  padding-top:1.125rem;margin-top:0.5rem}

@media(max-width:640px){
  .card-form{padding:1.375rem 1.125rem}
  .r-sec{padding:1.25rem 1.125rem}
  .kpi b{font-size:1.4375rem}
}
@media print{
  .utility,.hdr,.ftr,.adv-hero,.r-actions,#formCard,.card-add{display:none!important}
  .r-sec{break-inside:avoid;border-color:#ccc}
  body{font-size:0.75rem}
}

/* ── مكتبة التمارين ── */
.ex-hero{background:var(--bg-4);padding:2.875rem 0 2.375rem;border-bottom:1px solid var(--line)}
.ex-hero h1{font-size:clamp(1.5625rem,4vw,2.375rem);margin-bottom:0.625rem}
.ex-hero p{max-width:48.75rem;color:var(--ink-2);font-size:0.9375rem;margin:0}
.ex-stats{display:flex;gap:1.625rem;flex-wrap:wrap;margin-top:1.375rem}
.ex-stats div{background:#fff;border:1px solid var(--line);border-radius:var(--sharp);
  padding:0.75rem 1.25rem;min-width:6.875rem}
.ex-stats b{display:block;font-size:1.4375rem;font-weight:700;font-family:var(--fn);
  color:var(--slate);line-height:1.2}
.ex-stats span{font-size:0.75rem;color:var(--muted);font-weight:500}

.ex-layout{display:grid;grid-template-columns:15.625rem 1fr;gap:2.125rem;align-items:start;
  padding:2.375rem 0 4.375rem}
.ex-filters{position:sticky;top:6rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--sharp);padding:1.25rem;max-height:calc(100vh - 7.5rem);overflow-y:auto}
.ex-filters h3{font-size:0.8125rem;font-weight:650;color:var(--slate);margin:1.25rem 0 0.625rem;
  padding-bottom:0.4375rem;border-bottom:1px solid var(--line)}
.ex-filters h3:first-of-type{margin-top:0}
.fchip{display:flex;align-items:center;gap:0.5rem;padding:0.375rem 0.125rem;font-size:0.84375rem;cursor:pointer}
.fchip input{width:1rem;height:1rem;accent-color:var(--blue);flex:none;margin:0}
.fchip span{flex:1}
.fchip em{font-style:normal;color:var(--muted);font-size:0.71875rem;font-family:var(--fn)}
.fchip:hover span{color:var(--blue)}
.ex-search{width:100%;height:2.75rem;border:0.09375rem solid var(--line);border-radius:var(--sharp);
  padding:0 0.875rem;font-family:var(--f);font-size:0.90625rem;background:var(--bg-2);margin-bottom:0.375rem}
.ex-search:focus{outline:0;border-color:var(--blue);background:#fff}
.f-reset{width:100%;margin-top:1.125rem}

.ex-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.25rem}
.ex-count{font-size:0.875rem;color:var(--ink-2);font-weight:600}
.ex-count b{color:var(--blue);font-family:var(--fn)}
.ex-sort{height:2.5rem;border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:0 1rem;
  font-family:var(--f);font-size:0.84375rem;background:#fff}

.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.125rem,1fr));gap:1.125rem}
.ex-card{border:1px solid var(--line);border-radius:var(--sharp);overflow:hidden;background:#fff;
  transition:.18s;display:flex;flex-direction:column}
.ex-card:hover{border-color:var(--line-2);box-shadow:0 0.375rem 1.25rem #0000000f;transform:translateY(-0.125rem)}
.ex-card .ex-img{position:relative;background:var(--bg-2);aspect-ratio:4/3;overflow:hidden}
.ex-card .ex-img img{width:100%;height:100%;object-fit:cover}
.ex-lvl{position:absolute;top:0.5625rem;inset-inline-start:0.5625rem;background:#fff;border-radius:var(--sharp);
  padding:0.1875rem 0.6875rem;font-size:0.6875rem;font-weight:650;box-shadow:0 1px 0.25rem #0000001a}
.ex-lvl.b{color:#1e7b3c}.ex-lvl.i{color:#8a6100}.ex-lvl.e{color:#b32d1b}
.ex-body{padding:0.8125rem 0.875rem 0.9375rem;display:flex;flex-direction:column;gap:0.3125rem;flex:1}
.ex-body h3{font-size:0.90625rem;line-height:1.45}
.ex-en{font-size:0.71875rem;color:var(--muted);font-family:var(--fn);line-height:1.4}
.ex-tags{display:flex;gap:0.3125rem;flex-wrap:wrap;margin-top:auto;padding-top:0.5rem}
.ex-tags span{background:var(--bg-3);border-radius:var(--sharp);padding:0.125rem 0.5625rem;font-size:0.6875rem;
  font-weight:600;color:var(--slate-2)}
.ex-empty{text-align:center;padding:4.375rem 1.25rem;color:var(--muted)}
.ex-empty b{display:block;font-size:1.0625rem;color:var(--ink);margin-bottom:0.5rem}
.ex-more{display:flex;justify-content:center;margin-top:2rem}

/* ── صفحة التمرين ── */
.exd{display:grid;grid-template-columns:1fr 1fr;gap:2.375rem;padding:2.125rem 0 3.75rem;align-items:start}
/* التمارين بلا صور: عمود واحد بعرض قراءة مريح، لا عمودان أحدهما فارغ */
.exd-solo{grid-template-columns:minmax(0,45rem);justify-content:center}
.exd-solo h1{font-size:clamp(1.5rem,3.6vw,2.25rem)}
.exd-solo .exd-meta{grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr))}
.exd-solo .exd-steps li{font-size:0.9375rem}
/* ملاحظة المحرّر — تحمل ما تعجز عنه الصورة: بوّابة الدخول والتحذير */
.exd-tip{border-right:0.1875rem solid var(--blue);background:var(--bg-4);
  border-radius:0 var(--sharp) var(--sharp) 0;padding:0.75rem 1rem;margin:0 0 1.375rem;
  font-size:0.84375rem;line-height:1.85;color:var(--ink-2)}
.exd-steps{counter-reset:st}
.exd-steps li{margin-bottom:0.75rem;line-height:1.95}
.exd-imgs{display:flex;flex-direction:column;gap:0.75rem;position:sticky;top:6rem}
.exd-imgs img{width:100%;border:1px solid var(--line);border-radius:var(--sharp);background:var(--bg-2)}
/* عارض الإطارين: صورتان متراكبتان تتبادلان الظهور */
.exd-anim{position:relative;border:1px solid var(--line);border-radius:var(--sharp);
  background:var(--bg-2);overflow:hidden;cursor:pointer;aspect-ratio:4/3}
.exd-anim img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;border-radius:0;opacity:0;transition:opacity .35s}
.exd-anim img.on{opacity:1}
.anim-tag{position:absolute;top:0.625rem;right:0.625rem;background:#000a;
  color:#fff;font-size:0.6875rem;font-weight:600;padding:0.1875rem 0.625rem;
  border-radius:var(--sharp);pointer-events:none}
.anim-btn{position:absolute;bottom:0.625rem;left:0.625rem;width:1.875rem;height:1.875rem;
  border-radius:50%;border:0;background:#000a;cursor:pointer;padding:0;
  display:grid;place-items:center}
.anim-btn span{display:block;width:0.5625rem;height:0.6875rem;background:#fff;
  clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,
    65% 100%)}
.exd-anim[data-play="0"] .anim-btn span{clip-path:polygon(0 0,100% 50%,0 100%)}
.anim-hint{font-size:0.71875rem;color:var(--muted);text-align:center;
  margin-top:-0.25rem}
.noimg{border:1px dashed var(--line-2);border-radius:var(--sharp);padding:1.75rem 1.25rem;
  text-align:center;font-size:0.8125rem;color:var(--muted);line-height:1.8}
.exd h1{font-size:clamp(1.375rem,3.2vw,2rem);margin-bottom:0.375rem}
.exd .exd-en{font-size:0.875rem;color:var(--muted);font-family:var(--fn);margin:0 0 1.25rem}
.exd-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.4375rem,1fr));gap:0.75rem;
  margin-bottom:1.625rem}
.exd-meta div{background:var(--bg-3);border-radius:var(--sharp);padding:0.8125rem 0.9375rem}
.exd-meta u{display:block;text-decoration:none;font-size:0.71875rem;color:var(--muted);font-weight:600}
.exd-meta b{display:block;font-size:0.90625rem;margin-top:0.25rem}
.exd h2{font-size:1.0625rem;margin:1.625rem 0 0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--line)}
.exd ol{padding-inline-start:1.375rem;margin:0}
.exd ol li{margin-bottom:0.6875rem;line-height:1.85;font-size:0.90625rem}
.exd .mus{display:flex;gap:0.4375rem;flex-wrap:wrap}
.exd .mus span{border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:0.3125rem 0.875rem;
  font-size:0.78125rem;font-weight:600}
.exd .mus span.p{border-color:var(--blue);background:#eaf6fe;color:#0a5f8f}
/* علامة العضلة المضافة بتسوية التصنيف — شفافية تجاه القارئ */
.exd .mus span i{font-style:normal;font-weight:650;opacity:.45;margin-right:0.25rem;
  font-size:0.6875rem}
.exd-src{font-size:0.71875rem;color:var(--muted);line-height:1.8;border-top:1px solid var(--line);
  padding-top:1rem;margin-top:1.75rem}
.exd-nav{display:flex;justify-content:space-between;gap:0.75rem;margin-top:1.875rem;flex-wrap:wrap}

@media(max-width:900px){
  .ex-layout{grid-template-columns:1fr}
  .ex-filters{position:static;max-height:none}
  .exd{grid-template-columns:1fr}
  .exd-imgs{position:static}
}

/* ── البرامج التدريبية ── */
.pr-hero{background:var(--bg-4);padding:2.875rem 0 2.375rem;border-bottom:1px solid var(--line)}
.pr-hero h1{font-size:clamp(1.5625rem,4vw,2.375rem);margin-bottom:0.625rem}
.pr-hero p{max-width:50rem;color:var(--ink-2);font-size:0.9375rem;margin:0}

.pr-layout{display:grid;grid-template-columns:15.625rem 1fr;gap:2.125rem;align-items:start;
  padding:2.375rem 0 4.375rem}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.25rem}
.pr-card{border:1px solid var(--line);border-radius:var(--sharp);background:#fff;padding:1.375rem;
  display:flex;flex-direction:column;gap:0.625rem;transition:.18s}
.pr-card:hover{border-color:var(--line-2);box-shadow:0 0.375rem 1.25rem #0000000f;transform:translateY(-0.125rem)}
.pr-card .pr-goal{font-size:0.71875rem;font-weight:650;color:var(--blue);letter-spacing:.02em}
.pr-card h3{font-size:1.0625rem;line-height:1.4}
.pr-card p{font-size:0.8125rem;color:var(--ink-2);margin:0;line-height:1.65;flex:1}
.pr-meta{display:flex;gap:0.375rem;flex-wrap:wrap}
.pr-meta span{background:var(--bg-3);border-radius:var(--sharp);padding:0.1875rem 0.6875rem;font-size:0.71875rem;
  font-weight:600;color:var(--slate)}
.pr-card .button{height:2.5rem;font-size:0.8125rem;margin-top:0.25rem}

/* ── شريط الأسابيع ── */
.wkbar{border:1px solid var(--line);border-radius:var(--sharp);background:#fff;
  margin-bottom:1.375rem;overflow:hidden}
.wk-h{display:flex;align-items:flex-start;justify-content:space-between;gap:0.875rem;
  padding:1rem 1.25rem 0.8125rem;flex-wrap:wrap}
.wk-h b{font-size:0.9375rem;display:block}
.wk-h span{font-size:0.75rem;color:var(--muted);display:block;margin-top:0.125rem}
.wk-now{background:var(--slate);color:#fff;border-radius:var(--sharp);padding:0.25rem 0.8125rem;
  font-size:0.75rem;font-weight:650;white-space:nowrap;flex:none}
.wk-scroll{display:flex;gap:0.4375rem;overflow-x:auto;padding:0 1.25rem 0.9375rem}
.wk{flex:none;border:1px solid var(--line);border-radius:var(--sharp);background:var(--bg-2);
  padding:0.5rem 0.75rem;min-width:4.625rem;cursor:pointer;font:inherit;text-align:center;
  transition:.15s;position:relative}
.wk:hover{border-color:var(--line-2)}
/* الرقم لاتيني داخل سياق عربي — عزل الاتجاه يمنع قلبه مع ما يليه */
.wk b{display:block;font-family:var(--fn);font-size:1.0625rem;font-weight:700;
  line-height:1.2;direction:ltr;unicode-bidi:isolate}
.wk span{display:block;font-size:0.65625rem;font-weight:600;color:var(--muted);
  margin-top:0.125rem;white-space:nowrap}
/* لون الأسبوع يحمل معناه: تدرّج صاعد للأسابيع العاملة، ولون
   مختلف تماماً لأسبوع التخفيف كي لا يُخلَط بالصعود */
.wk-a{box-shadow:inset 0 -0.1875rem 0 #cbd5e1}
.wk-b{box-shadow:inset 0 -0.1875rem 0 #7dd3fc}
.wk-c{box-shadow:inset 0 -0.1875rem 0 var(--blue)}
.wk-de{box-shadow:inset 0 -0.1875rem 0 #f59e0b;background:#fffbeb;border-color:#fde68a}
.wk.is-on{background:var(--slate);border-color:var(--slate);color:#fff}
.wk.is-on span{color:#ffffffb8}
.wk-panel{border-top:1px solid var(--line);background:var(--bg-3);padding:1rem 1.25rem}
.wk-p-h{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin-bottom:0.5rem}
.wk-p-h b{font-size:0.9375rem}
.wk-rir{background:#fff;border:1px solid var(--line);border-radius:var(--sharp);
  padding:0.125rem 0.6875rem;font-size:0.71875rem;font-weight:600;color:var(--slate)}
.wk-load{font-size:0.84375rem;font-weight:600;color:var(--ink);margin:0 0 0.375rem;
  line-height:1.7}
.wk-note{font-size:0.78125rem;color:var(--ink-2);margin:0;line-height:1.8}
.wk-rule{margin-top:0.6875rem;background:#fff;border:1px solid var(--line);
  border-inline-start:0.1875rem solid var(--blue);border-radius:var(--sharp);padding:0.625rem 0.8125rem;
  font-size:0.78125rem;line-height:1.8;color:var(--ink-2)}
.wk-foot{margin-top:0.6875rem;font-size:0.75rem;color:var(--muted)}
.wk-foot a{font-weight:600;color:var(--blue)}
/* تنبيه العودة بعد غياب — ترحيب لا عتاب */
.wk-back{margin-top:0.75rem;background:#eef7f2;border:1px solid #bfe0cd;
  border-radius:var(--sharp);padding:0.75rem 0.875rem;font-size:0.78125rem;line-height:1.9;
  color:var(--ink-2)}
.wk-back b{color:#1d6b45}
.wk-back button{display:block;margin-top:0.5rem;background:#fff;
  border:1px solid #bfe0cd;border-radius:var(--sharp);padding:0.3125rem 0.8125rem;
  font:inherit;font-size:0.75rem;font-weight:600;color:#1d6b45;cursor:pointer}
.wk-back button:hover{background:#1d6b45;color:#fff;border-color:#1d6b45}

/* صفحة البرنامج */
.pd-hero{background:var(--slate);color:#fff;padding:2.75rem 0 2.375rem}
.pd-hero .pr-goal{color:#8fd3ff}
.pd-hero h1{font-size:clamp(1.5rem,3.6vw,2.25rem);margin:0.5rem 0 0.75rem}
.pd-hero p{max-width:51.25rem;font-size:0.9375rem;line-height:1.8;opacity:.92;margin:0}
.pd-stats{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1.5rem}
.pd-stats div{background:#ffffff1a;border:1px solid #ffffff30;border-radius:var(--sharp);
  padding:0.6875rem 1.125rem;min-width:6rem}
.pd-stats b{display:block;font-size:1.25rem;font-weight:700;font-family:var(--fn)}
.pd-stats span{font-size:0.71875rem;opacity:.8}

.pd-body{padding:2.25rem 0 4.375rem}
.sess{border:1px solid var(--line);border-radius:var(--sharp);margin-bottom:1.375rem;overflow:hidden}
.sess-h{background:var(--bg-3);padding:0.9375rem 1.25rem;border-bottom:1px solid var(--line)}
.sess-h b{font-size:1rem;display:block}
.sess-h span{font-size:0.78125rem;color:var(--muted);font-weight:500}
.sess table{width:100%;border-collapse:collapse}
.sess th{background:var(--bg-2);font-size:0.71875rem;font-weight:650;color:var(--slate);
  padding:0.5625rem 0.875rem;text-align:right;border-bottom:1px solid var(--line)}
.sess td{padding:0.625rem 0.875rem;border-bottom:1px solid var(--line);font-size:0.84375rem;
  vertical-align:middle}
.sess tr:last-child td{border-bottom:0}
/* عزل الاتجاه لازم هنا: بلا direction:ltr تُعرَض «6–8» مقلوبةً «8–6»
   و«2–3 د» تصير «د 3–2» داخل سياق الصفحة العربي */
.sess td.n{font-family:var(--fn);font-weight:600;white-space:nowrap;text-align:center;
  direction:ltr;unicode-bidi:isolate}
.ex-cell{display:flex;align-items:center;gap:0.6875rem}
.ex-cell img{width:3.25rem;height:2.5rem;object-fit:cover;border-radius:var(--sharp);background:var(--bg-2);
  flex:none}
.ex-cell a{font-weight:600;line-height:1.4}
.ex-cell a:hover{color:var(--blue)}
.ex-cell em{display:block;font-style:normal;font-size:0.6875rem;color:var(--muted);
  font-family:var(--fn)}
.blk-note{font-size:0.71875rem;color:var(--muted);margin-top:0.1875rem;line-height:1.5}

.pd-side{position:sticky;top:6rem}
.pd-box{border:1px solid var(--line);border-radius:var(--sharp);padding:1.25rem;margin-bottom:1.125rem}
.pd-box h3{font-size:0.9375rem;margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--line)}
.pd-box ul{font-size:0.8125rem;line-height:1.9;color:var(--ink-2)}
.pd-box ul li{padding-inline-start:1rem;position:relative;margin-bottom:0.375rem}
.pd-box ul li:before{content:'';position:absolute;inset-inline-start:0;top:0.5625rem;width:0.375rem;
  height:0.375rem;border-radius:50%;background:var(--blue)}
.pd-cols{display:grid;grid-template-columns:1fr 18.75rem;gap:2rem;align-items:start}

@media(max-width:900px){
  .pr-layout,.pd-cols{grid-template-columns:1fr}
  .pd-side{position:static}
  .sess td,.sess th{padding:0.5rem 0.625rem;font-size:0.78125rem}
  .ex-cell img{display:none}
}
@media print{
  .utility,.hdr,.ftr,.pd-side,.pr-hero,.wk-scroll,.gear-pick{display:none!important}
  .sess,.wkbar{break-inside:avoid}
}

.tr-hero{background:var(--bg-4);padding:2.875rem 0 2.375rem;border-bottom:1px solid var(--line)}
.tr-hero h1{font-size:clamp(1.5625rem,4vw,2.375rem);margin-bottom:0.625rem}
.tr-hero p{max-width:51.25rem;color:var(--ink-2);font-size:0.9375rem;margin:0;line-height:1.8}
.tr-body{padding:2.375rem 0 4.375rem}
.tr-cols{display:grid;grid-template-columns:1fr 20rem;gap:2.125rem;align-items:start}
@media(max-width:960px){.tr-cols{grid-template-columns:1fr}}
.tr-sec{border:1px solid var(--line);border-radius:var(--sharp);background:#fff;
  padding:1.625rem 1.75rem;margin-bottom:1.375rem}
.tr-sec h2{font-size:1.1875rem;margin:0 0 0.375rem}
.tr-sec .sub{font-size:0.8125rem;color:var(--muted);margin:0 0 1.125rem;line-height:1.8}
.tr-tbl{width:100%;border-collapse:collapse;font-size:0.8125rem}
.tr-tbl th,.tr-tbl td{border-bottom:1px solid var(--line);padding:0.625rem 0.5rem;
  text-align:right;vertical-align:top}
.tr-tbl th{font-size:0.75rem;color:var(--muted);font-weight:600}
.tr-tbl td b{display:block;margin-bottom:0.1875rem}
.tr-tbl td small{color:var(--muted);line-height:1.7;display:block}
.tr-tbl .n{white-space:nowrap;font-weight:600;color:var(--blue);
  direction:ltr;unicode-bidi:isolate;text-align:center}
.tier{display:flex;gap:0.75rem;align-items:flex-start;border-right:0.1875rem solid var(--line);
  padding:0 0.875rem 0 0;margin-bottom:1rem}
.tier.ok{border-right-color:#1d6b45}
.tier.mid{border-right-color:#7a6410}
.tier.lo{border-right-color:#8a4a10}
.tier b{display:block;font-size:0.90625rem;margin-bottom:0.125rem}
.tier .how{font-size:0.6875rem;color:var(--muted);font-weight:600}
.tier p{font-size:0.78125rem;color:var(--ink-2);line-height:1.75;margin:0.25rem 0 0}
.rulelist{list-style:none;margin:0;padding:0}
.rulelist li{border:1px solid var(--line);border-radius:var(--sharp);padding:0.75rem 0.875rem;
  margin-bottom:0.5625rem}
.rulelist b{font-size:0.84375rem;display:block;margin-bottom:0.1875rem}
.rulelist p{font-size:0.78125rem;color:var(--ink-2);line-height:1.75;margin:0}
.tr-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.75rem,1fr));
  gap:0.75rem;margin-bottom:1rem}
.tr-form .fld label{display:block;font-size:0.75rem;font-weight:600;
  color:var(--slate);margin-bottom:0.3125rem}
.tr-form .fld input{width:100%;height:2.625rem;border:0.09375rem solid var(--line);
  border-radius:var(--sharp);padding:0 0.75rem;font:inherit;font-size:0.875rem}
.tr-form .fld input:focus{border-color:var(--blue);outline:none}
.tr-out{margin-top:1.125rem}
.flagbox{border:1px solid #f0c5c0;background:#fdf3f2;border-radius:var(--sharp);
  padding:0.8125rem 0.9375rem;margin-bottom:0.625rem}
.flagbox b{color:#b32d1b;font-size:0.8125rem;display:block;margin-bottom:0.1875rem}
.flagbox p{font-size:0.78125rem;line-height:1.75;margin:0;color:var(--ink-2)}
.okbox{border:1px solid #bfe0cd;background:#eef7f2;border-radius:var(--sharp);
  padding:0.8125rem 0.9375rem}
.okbox b{color:#1d6b45;font-size:0.8125rem}
.hist{width:100%;border-collapse:collapse;font-size:0.78125rem;margin-top:0.875rem}
.hist th,.hist td{border-bottom:1px solid var(--line);padding:0.4375rem 0.375rem;
  text-align:center;direction:ltr;unicode-bidi:isolate}
.hist th{font-size:0.6875rem;color:var(--muted);font-weight:600}
.hist td.d{direction:rtl;text-align:right;font-weight:600}
.streak{display:flex;gap:0.625rem;flex-wrap:wrap;margin-bottom:1rem}
.streak div{flex:1 1 5.625rem;border:1px solid var(--line);border-radius:var(--sharp);
  padding:0.875rem 0.625rem;text-align:center;background:var(--bg-3)}
.streak b{display:block;font-size:1.375rem;color:var(--blue);line-height:1.2;
  direction:ltr;unicode-bidi:isolate}
.streak span{font-size:0.6875rem;color:var(--muted);display:block;margin-top:0.1875rem}
/* بطاقة العودة — نبرتها ترحيب لا لوم، فالعائد أقرب إلى الانسحاب
   من المنقطع، وأي لغة عتاب هنا تدفعه إليه. */
.resume{border:1px solid #bfe0cd;background:#eef7f2;border-radius:var(--sharp);
  padding:1rem 1.125rem;margin-bottom:1rem}
.resume>b{font-size:1rem;color:#1d6b45;display:block;margin-bottom:0.375rem}
.resume p{font-size:0.8125rem;line-height:1.9;color:var(--ink-2);margin:0 0 0.4375rem}
.resume p:last-child{margin-bottom:0}
.rs-step{background:#fff;border-radius:var(--sharp);padding:0.625rem 0.8125rem;
  border-inline-start:0.1875rem solid #1d6b45}
.rs-do{font-weight:600;color:#1d6b45!important}
.tokbox{border:1px dashed var(--line-2);border-radius:var(--sharp);padding:1rem;
  text-align:center;background:var(--bg-3);margin-top:0.875rem}
.tokbox .tok{font-size:1.625rem;font-weight:650;color:var(--blue);letter-spacing:0.125rem;
  direction:ltr;unicode-bidi:isolate;margin:0.375rem 0}
.tokbox p{font-size:0.75rem;color:var(--muted);line-height:1.75;margin:0}
.pgrp{margin-bottom:1rem}
.pgrp b{display:block;font-size:0.84375rem;margin-bottom:0.375rem;color:var(--slate)}
.pgrp ul{margin:0;padding-right:1.125rem}
.pgrp li{font-size:0.78125rem;color:var(--ink-2);line-height:1.8;margin-bottom:0.25rem}
.cons{display:flex;gap:0.625rem;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--sharp);padding:0.75rem 0.875rem;margin-bottom:0.5rem;cursor:pointer;
  transition:.15s}
.cons:hover{border-color:var(--line-2)}
.cons:has(input:checked){border-color:var(--blue);background:var(--bg-4)}
.cons input{width:1.0625rem;height:1.0625rem;accent-color:var(--blue);cursor:pointer;
  margin-top:0.125rem;flex:none}
.cons b{display:block;font-size:0.84375rem;margin-bottom:0.125rem}
.cons span{font-size:0.78125rem;color:var(--ink-2);line-height:1.75}
.phbox{border:1px dashed var(--line-2);border-radius:var(--sharp);padding:1rem;
  margin-bottom:1rem;background:var(--bg-3)}
.phlab b{display:block;font-size:0.84375rem;margin-bottom:0.1875rem}
.phlab span{display:block;font-size:0.75rem;color:var(--muted);
  line-height:1.75;margin-bottom:0.625rem}
.phbox input[type=file]{font:inherit;font-size:0.78125rem;width:100%}
.phprev{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.75rem}
.phprev img{width:4.625rem;height:6rem;object-fit:cover;border-radius:var(--sharp);
  border:1px solid var(--line)}
#cmp h3{font-size:0.9375rem;margin:1.25rem 0 0.625rem}
.cmpgrid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.cmpgrid figure{margin:0}
.cmpgrid img{width:100%;border-radius:var(--sharp);border:1px solid var(--line);
  display:block}
.cmpgrid figcaption{font-size:0.71875rem;color:var(--muted);text-align:center;
  margin-top:0.375rem;direction:ltr;unicode-bidi:isolate}
.freebox{border:1px solid #bfe0cd;background:#eef7f2;border-radius:var(--sharp);
  padding:1rem 1.125rem;margin-bottom:1.375rem}
.freebox b{color:#1d6b45;font-size:0.875rem;display:block;margin-bottom:0.25rem}
.freebox p{font-size:0.78125rem;color:var(--ink-2);line-height:1.8;margin:0}

/* ── الإيقاعان ── */
.rhy{border:1px solid var(--line);border-radius:var(--sharp);padding:1.25rem 1.375rem;
  margin-bottom:0.875rem;position:relative;overflow:hidden}
.rhy::before{content:'';position:absolute;inset:0 auto 0 0;width:0.25rem}
.rhy-weekly::before{background:var(--blue)}
.rhy-monthly::before{background:#8a4a10}
.rhy-weekly{background:linear-gradient(180deg,var(--bg-4),#fff 60%)}
.rhy-monthly{background:linear-gradient(180deg,#fdf6f0,#fff 60%)}
.rhy-h{display:flex;align-items:baseline;gap:0.625rem;flex-wrap:wrap;
  margin-bottom:0.5625rem}
.rhy-h h3{font-size:1.25rem;margin:0;order:-1}
.rhy-badge{font-size:0.71875rem;font-weight:650;padding:0.1875rem 0.6875rem;
  border-radius:var(--sharp);background:#fff;border:1px solid var(--line-2);
  color:var(--slate)}
.rhy-weekly .rhy-badge{color:var(--blue);border-color:var(--blue)}
.rhy-monthly .rhy-badge{color:#8a4a10;border-color:#d9b48f}
.rhy-h em{font-size:0.75rem;color:var(--muted);font-style:normal;
  flex-basis:100%}
.rhy-why{font-size:0.78125rem;color:var(--ink-2);line-height:1.85;
  margin:0 0 0.875rem}
.rhy-items{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.rhy-items li{background:#fff;border:1px solid var(--line);
  border-radius:var(--sharp);padding:0.625rem 0.8125rem}
.rhy-items b{display:block;font-size:0.8125rem;margin-bottom:0.125rem}
.rhy-items span{font-size:0.75rem;color:var(--muted);line-height:1.75}

/* ── الهدف ونسبة الإنجاز ── */
.goalbox{border:1px solid var(--line);border-radius:var(--sharp);padding:1rem 1.125rem;
  margin-bottom:1.125rem;background:var(--bg-3)}
.goalbox label b{display:block;font-size:0.84375rem;margin-bottom:0.125rem}
.goalbox label span{display:block;font-size:0.75rem;color:var(--muted);
  margin-bottom:0.625rem}
.pbar{height:0.75rem;border-radius:var(--sharp);background:var(--line);
  overflow:hidden;margin-top:1rem}
.pbar i{display:block;height:100%;border-radius:var(--sharp);
  background:linear-gradient(90deg,var(--blue),#2e9d6b);transition:.5s}
.pmeta{display:flex;align-items:baseline;gap:0.5625rem;margin-top:0.5rem}
.pmeta b{font-size:1.375rem;color:var(--blue);direction:ltr;
  unicode-bidi:isolate}
.pmeta span{font-size:0.75rem;color:var(--muted)}
.tipbox{border:1px solid #d9c9a8;background:#fdf8ee;border-radius:var(--sharp);
  padding:0.8125rem 0.9375rem;margin-bottom:0.625rem}
.tipbox b{color:#7a6410;font-size:0.8125rem;display:block;margin-bottom:0.1875rem}
.tipbox p{font-size:0.78125rem;line-height:1.8;margin:0;color:var(--ink-2)}

/* ── التقرير المصوَّر ── */
.duebox{border:1px solid #a9d4ef;background:#eef7fd;border-radius:var(--sharp);
  padding:0.8125rem 0.9375rem;margin-bottom:0.875rem;font-size:0.78125rem;
  color:var(--ink-2);line-height:1.8}
.duebox b{color:#0a5f8f}
.rep{border:1px solid var(--line);border-radius:var(--sharp);padding:1.5rem;
  margin-top:1.125rem;background:#fff}
.rep-h{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:0.125rem solid var(--blue);padding-bottom:0.75rem;margin-bottom:1.125rem}
.rep-h h3{font-size:1.25rem;margin:0}
.rep-h span{font-size:0.75rem;color:var(--muted);direction:ltr;
  unicode-bidi:isolate;display:block;margin-top:0.1875rem}
.rep-logo{font-size:0.75rem;font-weight:650;color:var(--blue)}
.rep-kpi{display:flex;gap:0.625rem;flex-wrap:wrap;margin-bottom:1.125rem}
.rep-kpi div{flex:1 1 6.25rem;border:1px solid var(--line);border-radius:var(--sharp);
  padding:0.875rem 0.625rem;text-align:center;background:var(--bg-3)}
.rep-kpi b{display:block;font-size:1.25rem;color:var(--blue);line-height:1.25;
  direction:ltr;unicode-bidi:isolate}
.rep-kpi span{font-size:0.6875rem;color:var(--muted);display:block;margin-top:0.1875rem}
.rep-goal{margin-bottom:1.25rem}
/* صدر التقرير — ما تغيّر فعلاً في هذه المرحلة */
.rep-lead{border:1px solid #bfe0cd;background:#eef7f2;border-radius:var(--sharp);
  padding:1.125rem 1.25rem;margin-bottom:1.125rem}
.rep-ph{display:inline-block;background:#1d6b45;color:#fff;border-radius:var(--sharp);
  padding:0.1875rem 0.75rem;font-size:0.6875rem;font-weight:650;margin-bottom:0.5625rem}
.rep-lead h4{font-size:0.84375rem;margin:0 0 0.375rem;color:#1d6b45}
.rep-lead>b{display:block;font-size:1.6875rem;font-weight:700;color:#145234;
  line-height:1.25;direction:ltr;unicode-bidi:isolate;margin-bottom:0.5rem;
  font-family:var(--fn)}
.rep-lead>b i{font-style:normal;font-size:0.875rem;font-weight:600;
  color:#1d6b45}
.rep-lead p{font-size:0.8125rem;line-height:1.9;margin:0;color:var(--ink-2)}
.rep-ph-say{margin-top:0.5625rem!important;padding-top:0.5625rem;
  border-top:1px dashed #bfe0cd;font-size:0.78125rem!important;
  color:var(--muted)!important}
/* جدول القوّة */
.rep-st{margin-top:1.125rem}
.rep-st h4{font-size:0.875rem;margin:0 0 0.25rem}
.rep-st td.up{color:#1d6b45;font-weight:650}
.rep-st td.dn{color:#b32d1b;font-weight:650}
.rep-st tr.sum td{font-weight:650;background:var(--bg-3)}
.repnote{font-size:0.6875rem;color:var(--muted);line-height:1.7;margin:0.5rem 0 0}
/* نموذج الرفعات */
.lifts{margin-top:0.375rem;border-top:1px solid var(--line);padding-top:0.75rem}
.lifts .acc-t{font-size:0.9375rem}
.liftgrid{display:block!important}
.liftrow{display:grid;grid-template-columns:7.5rem 1fr 1fr;gap:0.625rem;
  align-items:end;margin-bottom:0.625rem}
.liftrow>b{font-size:0.8125rem;padding-bottom:0.6875rem}
@media(max-width:560px){
  .liftrow{grid-template-columns:1fr 1fr}
  .liftrow>b{grid-column:1/-1;padding-bottom:0}
}
.rep-ch h4,.rep-say h4{font-size:0.875rem;margin:0 0 0.5rem}
.rep-ch canvas{width:100%;height:13.75rem;display:block}
.rep-say{border-radius:var(--sharp);padding:0.9375rem 1.0625rem;margin-top:1.125rem;
  border:1px solid var(--line)}
.rep-say p{font-size:0.8125rem;line-height:1.9;margin:0;color:var(--ink-2)}
.rep-in{background:#eef7f2;border-color:#bfe0cd}
.rep-in h4{color:#1d6b45}
.rep-hold{background:var(--bg-3)}
.rep-high{background:#fdf8ee;border-color:#d9c9a8}
.rep-high h4{color:#7a6410}
.rep-fast{background:#fdf3f2;border-color:#f0c5c0}
.rep-fast h4{color:#b32d1b}
.rep-eta{margin-top:0.875rem;padding:0.8125rem 1rem;border-radius:var(--sharp);
  background:var(--bg-4);font-size:0.84375rem;color:var(--ink-2);
  line-height:1.8;text-align:center}
.rep-eta b{font-size:1.1875rem;color:var(--blue);direction:ltr;
  unicode-bidi:isolate}
.rep-f{margin-top:1.125rem;padding-top:0.75rem;border-top:1px solid var(--line);
  font-size:0.6875rem;color:var(--muted);text-align:center;line-height:1.7}

/* ── الأكورديون ── */
.acc{border:0}
.acc summary{display:flex;align-items:center;gap:0.625rem;cursor:pointer;
  list-style:none;padding:0.125rem 0}
.acc summary::-webkit-details-marker{display:none}
.acc-t{font-size:1.1875rem;font-weight:650}
.acc-s{font-size:0.75rem;color:var(--muted);flex:1}
.acc-s b{color:#8a4a10}
.acc-i{width:0.6875rem;height:0.6875rem;border-right:0.125rem solid var(--slate);
  border-bottom:0.125rem solid var(--slate);transform:rotate(45deg);
  transition:.2s;flex:none;margin-bottom:0.25rem}
.acc[open] .acc-i{transform:rotate(-135deg);margin:0.25rem 0 0}
.acc summary:hover .acc-t{color:var(--blue)}

/* ── التذكير ── */
.duewrap{display:flex;align-items:baseline;gap:0.625rem;border:1px solid
  var(--line);border-radius:var(--sharp);padding:0.875rem 1rem;background:var(--bg-3)}
.duewrap b{font-size:1.1875rem;color:var(--blue);direction:ltr;
  unicode-bidi:isolate}
.duewrap span{font-size:0.78125rem;color:var(--muted)}
.chanbox{border-top:1px solid var(--line);margin-top:1.125rem;padding-top:1rem}
.chanbox label b{display:block;font-size:0.84375rem;margin-bottom:0.125rem}
.chanbox label span{display:block;font-size:0.75rem;color:var(--muted);
  margin-bottom:0.625rem}

@media print{
  .tr-hero,.freebox,.gear-pick,#photos,#entry,#remind,.rulelist,aside,
  .tr-sec>.sub,#mkReport,#printReport,.duebox,.tr-form,.phbox,.lifts,
  .goalbox,.streak,#resume,#flags,#hist,#avgnote,.hdr,.ftr,.mainnav,
  .utility,.tr-sec h2,.tr-sec>div>button{display:none!important}
  .tr-cols{grid-template-columns:1fr!important}
  .tr-sec{border:none!important;padding:0!important;margin:0!important}
  .rep{border:none;padding:0}
  body{background:#fff}
}

.tm-wrap{max-width:51.25rem;margin:0 auto}
.tm-sec{border:1px solid var(--line);border-radius:var(--sharp);background:#fff;
  padding:1.375rem 1.625rem;margin-bottom:1rem}
.tm-sec h2{font-size:1.03125rem;margin:0 0 0.625rem;color:var(--slate)}
.tm-sec ul{margin:0;padding-right:1.125rem}
.tm-sec li{font-size:0.84375rem;color:var(--ink-2);line-height:1.9;
  margin-bottom:0.4375rem}
.tm-foot{border:1px solid var(--line-2);border-radius:var(--sharp);
  background:var(--bg-4);padding:1.375rem 1.625rem;text-align:center}
.tm-foot p{font-size:0.8125rem;color:var(--ink-2);line-height:1.9;margin:0}

/* ── الصفحات الثابتة ── */
.pg-hero{background:var(--bg-4);padding:3rem 0 2.5rem;border-bottom:1px solid var(--line)}
.pg-hero h1{font-size:clamp(1.625rem,4vw,2.5rem);margin-bottom:0.75rem}
.pg-hero p{max-width:74ch;color:var(--ink-2);font-size:1rem;line-height:1.85;margin:0}
.pg-hero .crumb{font-size:0.8125rem;color:var(--muted);font-weight:600;margin-bottom:0.875rem;display:block}

.doc{max-width:51.25rem;margin:0 auto;padding:2.75rem 1.25rem 4.375rem}
.doc.wide{max-width:68.75rem}
.doc h2{font-size:1.375rem;margin:2.375rem 0 0.875rem;padding-bottom:0.625rem;border-bottom:1px solid var(--line)}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.0625rem;margin:1.625rem 0 0.625rem}
.doc p{margin:0 0 0.875rem;line-height:1.95;color:var(--ink-2);font-size:0.96875rem}
.doc ul.bul{margin:0 0 1.125rem;padding:0}
.doc ul.bul li{position:relative;padding-inline-start:1.25rem;margin-bottom:0.5625rem;line-height:1.85;
  color:var(--ink-2);font-size:0.96875rem}
.doc ul.bul li:before{content:'';position:absolute;inset-inline-start:0;top:0.6875rem;width:0.375rem;
  height:0.375rem;border-radius:50%;background:var(--blue)}
/* ol.num shares its class with the navy .num stat tile — undo the tile look */
.doc ol.num{margin:0 0 1.125rem;padding:0;padding-inline-start:1.375rem;background:none;color:var(--ink-2);
  border-radius:0;text-align:start}
.doc ol.num li{margin-bottom:0.625rem;line-height:1.85;color:var(--ink-2);font-size:0.96875rem}
.doc ol.num li::marker{color:var(--royal);font-weight:600;font-family:var(--fn)}
.doc ol.num a{color:var(--royal)!important}   /* links carry an inline sky colour: too faint on white */
.doc .lead{font-size:1.0625rem;color:var(--ink);line-height:1.9}

mark.todo{
  background:#fff3cd;color:#7a5c00;border:1px dashed #d4a72c;border-radius:var(--sharp);
  padding:0.125rem 0.5625rem;font-size:0.8125rem;font-weight:600;white-space:nowrap;
}
.biz{font-weight:600;color:var(--ink)}

.callout{background:var(--bg-3);border-inline-start:0.25rem solid var(--blue);
  border-radius:0 var(--sharp) var(--sharp) 0;padding:1.125rem 1.375rem;margin:1.375rem 0;font-size:0.90625rem;
  line-height:1.85;color:var(--ink-2)}
.callout b{color:var(--ink)}
.callout.warn{border-color:var(--red);background:#fff6f5}

.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.375rem,1fr));gap:1rem;
  margin:1.5rem 0}
.mini{border:1px solid var(--line);border-radius:var(--sharp);padding:1.25rem}
.mini h4{font-size:0.96875rem;margin-bottom:0.5rem}
.mini p{font-size:0.84375rem;margin:0;line-height:1.75}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr));gap:1rem;
  margin:1.625rem 0}
.cbox{border:1px solid var(--line);border-radius:var(--sharp);padding:1.375rem;background:#fff}
.cbox .ico{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--bg-4);display:grid;
  place-items:center;margin-bottom:0.875rem;color:var(--slate)}
.cbox h4{font-size:0.9375rem;margin-bottom:0.375rem}
.cbox p{font-size:0.875rem;margin:0;line-height:1.8;color:var(--ink-2)}

.faq-item{border:1px solid var(--line);border-radius:var(--sharp);margin-bottom:0.625rem;overflow:hidden}
.faq-item summary{padding:1rem 1.25rem;cursor:pointer;font-weight:600;font-size:0.96875rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:0.875rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:'+';font-size:1.375rem;font-weight:400;color:var(--muted);
  flex:none;line-height:1}
.faq-item[open] summary:after{content:'−'}
.faq-item[open] summary{border-bottom:1px solid var(--line);background:var(--bg-2)}
.faq-item .ans{padding:1rem 1.25rem;font-size:0.9375rem;line-height:1.9;color:var(--ink-2)}
.faq-item .ans p{margin:0 0 0.75rem}
.faq-item .ans p:last-child{margin:0}
.faq-cat{font-size:0.8125rem;font-weight:650;color:var(--slate);letter-spacing:.02em;
  margin:1.875rem 0 0.75rem}

.brands{display:flex;flex-wrap:wrap;gap:0.5625rem;margin:1.125rem 0 1.5rem}
.brands span{border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:0.4375rem 1rem;
  font-size:0.84375rem;font-weight:600;font-family:var(--fn)}

.wh-hero{background:var(--slate);color:#fff;padding:3.25rem 0 2.875rem}
.wh-hero h1{font-size:clamp(1.625rem,4vw,2.5rem);margin-bottom:0.875rem}
.wh-hero p{max-width:70ch;font-size:1.03125rem;line-height:1.9;opacity:.93;margin:0}
.wh-stats{display:flex;gap:0.875rem;flex-wrap:wrap;margin-top:1.625rem}
.wh-stats div{background:#ffffff1a;border:1px solid #ffffff2e;border-radius:var(--sharp);
  padding:0.8125rem 1.25rem}
.wh-stats b{display:block;font-size:1.3125rem;font-weight:700;font-family:var(--fn)}
.wh-stats span{font-size:0.75rem;opacity:.85}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld-p label{display:block;font-weight:600;font-size:0.84375rem;margin-bottom:0.4375rem}
.fld-p input,.fld-p textarea,.fld-p select{width:100%;border:0.09375rem solid var(--line);
  border-radius:var(--sharp);padding:0.75rem 0.875rem;font-family:var(--f);font-size:0.9375rem;
  background:var(--bg-2);color:var(--ink)}
.fld-p input:focus,.fld-p textarea:focus,.fld-p select:focus{outline:0;border-color:var(--blue);
  background:#fff}
.fld-p textarea{min-height:7.5rem;resize:vertical}
.fld-p.full{grid-column:1/-1}

table.doc-t{width:100%;border-collapse:collapse;font-size:0.90625rem;margin:1.125rem 0 1.5rem}
table.doc-t th{background:var(--slate);color:#fff;padding:0.75rem 1rem;text-align:right;
  font-size:0.8125rem;font-weight:600}
table.doc-t td{padding:0.75rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
table.doc-t tr:nth-child(even) td{background:var(--bg-2)}

.updated{font-size:0.8125rem;color:var(--muted);border-top:1px solid var(--line);
  padding-top:1.125rem;margin-top:2.25rem}

@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ── صفحة المنتج ── */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:2.75rem;padding:2.125rem 0 1.25rem;
  align-items:start}
.pdp-media{position:sticky;top:6rem}
.pdp-media img{width:100%;border:1px solid var(--line);border-radius:var(--sharp);
  background:var(--bg-2)}
.pdp-thumbs{display:flex;gap:0.625rem;margin-top:0.75rem}
.pdp-thumbs img{width:4.75rem;height:3.75rem;object-fit:cover;border-radius:var(--sharp);cursor:pointer;
  border:0.09375rem solid var(--line)}
.pdp-thumbs img.on{border-color:var(--blue)}
.pdp .bc{font-size:0.8125rem;color:var(--muted);margin-bottom:0.75rem}
.pdp .bc a{font-weight:600}
.pdp .bc a:hover{color:var(--blue)}
.pdp h1{font-size:clamp(1.4375rem,3.2vw,2rem);margin-bottom:0.5rem}
.pdp .en{font-size:0.875rem;color:var(--muted);font-family:var(--fn);margin:0 0 1.125rem}
.pdp .brand-row{display:flex;align-items:center;gap:0.625rem;margin-bottom:1.125rem}
.pdp .brand-row a{font-size:0.8125rem;font-weight:600;color:var(--slate);
  border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:0.3125rem 0.875rem}
.pdp .price{display:flex;align-items:baseline;gap:0.625rem;margin:1.125rem 0}
.pdp .price b{font-size:2.125rem;font-weight:700;font-family:var(--fn);
  letter-spacing:-.02em}
.pdp .price small{font-size:0.9375rem;color:var(--muted);font-weight:600}
.pdp .vat{font-size:0.78125rem;color:var(--muted);margin:-0.5rem 0 1.25rem}
.pdp .stk{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.84375rem;
  font-weight:600;margin-bottom:1.25rem}
.pdp .stk i{width:0.5rem;height:0.5rem;border-radius:50%;font-style:normal}
.stk.in i{background:#1e7b3c} .stk.in{color:#1e7b3c}
.stk.low i{background:#b8541a} .stk.low{color:#b8541a}
.stk.out i{background:var(--red)} .stk.out{color:var(--red)}

.opt-row{margin-bottom:1.25rem}
.opt-row h4{font-size:0.84375rem;margin-bottom:0.625rem}
.opt-chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.opt-chips button{border:0.09375rem solid var(--line);background:#fff;border-radius:var(--sharp);
  padding:0.5625rem 1rem;font-family:var(--f);font-size:0.84375rem;font-weight:600;cursor:pointer;
  color:var(--ink);transition:.15s}
.opt-chips button:hover{border-color:var(--line-2)}
.opt-chips button.on{border-color:var(--blue);background:#eaf6fe;color:#0a5f8f}
.opt-chips button[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}

.buy{display:flex;gap:0.75rem;align-items:stretch;margin:1.5rem 0}
.qty-box{display:flex;align-items:center;border:0.09375rem solid var(--line);border-radius:var(--sharp);
  overflow:hidden}
.qty-box button{width:2.75rem;height:3.25rem;border:0;background:#fff;font-size:1.25rem;cursor:pointer;
  color:var(--ink-2);font-family:var(--f)}
.qty-box button:hover{background:var(--bg-2)}
.qty-box input{width:3.25rem;height:3.25rem;border:0;text-align:center;font-size:1rem;
  font-weight:600;font-family:var(--fn);background:#fff;color:var(--ink)}
.buy .button{flex:1;height:3.25rem;font-size:0.96875rem}
.buy .button[disabled]{opacity:.45;cursor:not-allowed}

.pdp-meta{border-top:1px solid var(--line);padding-top:1.25rem;margin-top:0.5rem}
.pdp-meta dl{display:grid;grid-template-columns:auto 1fr;gap:0.625rem 1.125rem;font-size:0.875rem;margin:0}
.pdp-meta dt{color:var(--muted);font-weight:600}
.pdp-meta dd{margin:0;color:var(--ink-2)}
.pdp-usp{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:1.375rem}
.pdp-usp div{background:var(--bg-3);border-radius:var(--sharp);padding:0.875rem 1rem;font-size:0.8125rem;
  line-height:1.6;color:var(--ink-2)}
.pdp-usp b{display:block;color:var(--ink);font-size:0.84375rem;margin-bottom:0.1875rem}

.pdp-desc{max-width:51.25rem;padding:0.875rem 0 3.125rem}
.pdp-desc h2{font-size:1.25rem;margin:1.875rem 0 0.75rem;padding-bottom:0.5625rem;
  border-bottom:1px solid var(--line)}
.pdp-desc h3{font-size:1rem;margin:1.375rem 0 0.5625rem;color:var(--slate)}
.pdp-desc p{line-height:1.95;color:var(--ink-2);font-size:0.96875rem;margin:0 0 0.8125rem}
.pdp-desc li{line-height:1.9;color:var(--ink-2);font-size:0.96875rem;margin-bottom:0.4375rem;
  padding-inline-start:1.125rem;position:relative}
.pdp-desc li:before{content:'';position:absolute;inset-inline-start:0;top:0.6875rem;width:0.375rem;
  height:0.375rem;border-radius:50%;background:var(--blue)}
.pdp-note{background:var(--bg-3);border-inline-start:0.25rem solid var(--slate-2);
  border-radius:0 var(--sharp) var(--sharp) 0;padding:0.9375rem 1.125rem;font-size:0.84375rem;line-height:1.8;
  color:var(--ink-2);margin:1.25rem 0}

/* ── درج السلّة ── */
.cart-ov{position:fixed;inset:0;background:#0006;opacity:0;pointer-events:none;
  transition:.25s;z-index:90}
.cart-ov.on{opacity:1;pointer-events:auto}
/* الموقع عربي بالكامل، فالدرج على الحافة اليمنى ويختفي بالانزلاق يميناً.
   تُستخدم خصائص فيزيائية عمداً: الخلط بينها وبين المنطقية في RTL يفتح
   الدرج عند تحميل الصفحة. */
.cart-dr{position:fixed;top:0;bottom:0;right:0;width:min(26.25rem,100%);
  background:var(--bg);z-index:91;transform:translateX(100%);transition:.28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-0.25rem 0 2rem #0000002e}
.cart-dr.on{transform:translateX(0)}
.cart-hd{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.375rem;
  border-bottom:1px solid var(--line)}
.cart-hd h3{font-size:1.0625rem}
.cart-hd button{background:0;border:0;font-size:1.625rem;cursor:pointer;color:var(--muted);
  line-height:1;padding:0 0.25rem}
.cart-body{flex:1;overflow-y:auto;padding:0.5rem 1.375rem}
.cart-ft{border-top:1px solid var(--line);padding:1.125rem 1.375rem 1.375rem;background:var(--bg-2)}
.cart-line{display:flex;justify-content:space-between;font-size:0.875rem;margin-bottom:0.5625rem;
  color:var(--ink-2)}
.cart-line.tot{font-size:1.0625rem;font-weight:650;color:var(--ink);padding-top:0.6875rem;
  border-top:1px solid var(--line);margin-top:0.25rem}
.cart-line.tot b{font-family:var(--fn)}
.cart-ft .button{width:100%;margin-top:0.875rem}
.cart-ft .lnk{display:block;text-align:center;margin-top:0.625rem;font-size:0.84375rem;
  color:var(--muted);font-weight:600}

.ci{display:flex;gap:0.8125rem;padding:0.9375rem 0;border-bottom:1px solid var(--line)}
.ci img{width:4rem;height:4rem;object-fit:contain;background:var(--bg-2);border-radius:var(--sharp);
  flex:none}
.ci-b{flex:1;min-width:0}
.ci-b h4{font-size:0.875rem;line-height:1.45;margin-bottom:0.1875rem}
.ci-b h4 a:hover{color:var(--blue)}
.ci-var{font-size:0.75rem;color:var(--muted);margin-bottom:0.4375rem}
.ci-row{display:flex;align-items:center;justify-content:space-between;gap:0.625rem}
.ci-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--sharp)}
.ci-qty button{width:1.75rem;height:1.75rem;border:0;background:0;cursor:pointer;font-size:0.9375rem;
  color:var(--ink-2);font-family:var(--f)}
.ci-qty span{min-width:1.625rem;text-align:center;font-size:0.8125rem;font-weight:600;
  font-family:var(--fn)}
.ci-price{font-weight:650;font-size:0.90625rem;font-family:var(--fn);white-space:nowrap}
.ci-del{background:0;border:0;color:var(--muted);font-size:0.75rem;cursor:pointer;
  font-family:var(--f);padding:0;text-decoration:underline}
.ci-del:hover{color:var(--red)}
.cart-empty{text-align:center;padding:3.5rem 1.25rem;color:var(--muted)}
.cart-empty b{display:block;font-size:1rem;color:var(--ink);margin-bottom:0.5rem}

.badge.zero{display:none}
/* left فيزيائيّ لا inset-inline-start: في العربية كان يصير right:50% ثم يسحبه
   translateX(-50%) نصف عرضه إضافيّاً — فيخرج الإشعار عن المنتصف وعن الشاشة على الهاتف */
.toast{position:fixed;inset-block-end:1.5rem;left:50%;
  transform:translateX(-50%) translateY(120%);background:var(--slate);color:#fff;
  padding:0.8125rem 1.5rem;border-radius:var(--sharp);font-size:0.90625rem;font-weight:600;z-index:95;
  transition:.3s;box-shadow:0 0.5rem 1.75rem #0000003d}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ── صفحة السلّة وإتمام الطلب ── */
.cart-pg{display:grid;grid-template-columns:1fr 22.5rem;gap:2rem;padding:2.125rem 0 4.375rem;
  align-items:start}
.cart-tbl{border:1px solid var(--line);border-radius:var(--sharp);overflow:hidden;background:#fff}
.cart-tbl .ci{padding:1.125rem 1.375rem;margin:0}
.cart-tbl .ci:last-child{border-bottom:0}
.sum{border:1px solid var(--line);border-radius:var(--sharp);padding:1.5rem;position:sticky;top:6rem;
  background:#fff}
.sum h3{font-size:1.0625rem;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--line)}
.sum .button{width:100%;margin-top:1rem;height:3.125rem}
.ship-note{font-size:0.78125rem;color:var(--muted);line-height:1.7;margin-top:0.75rem}

.co-grid{display:grid;grid-template-columns:1fr 22.5rem;gap:2rem;padding:2.125rem 0 4.375rem;
  align-items:start}
.co-sec{border:1px solid var(--line);border-radius:var(--sharp);padding:1.5rem;margin-bottom:1.125rem;
  background:#fff}
.co-sec h3{font-size:1rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.625rem}
.co-sec h3 i{width:1.625rem;height:1.625rem;border-radius:50%;background:var(--slate);color:#fff;
  display:grid;place-items:center;font-size:0.8125rem;font-style:normal;font-weight:600;
  font-family:var(--fn);flex:none}
.pay-opts{display:grid;gap:0.625rem}
.pay-opt{position:relative}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-opt span{display:block;border:0.09375rem solid var(--line);border-radius:var(--sharp);padding:0.9375rem 1.125rem;
  cursor:pointer;background:var(--bg-2);transition:.16s}
.pay-opt span b{display:block;font-size:0.90625rem;margin-bottom:0.1875rem}
.pay-opt span i{font-style:normal;font-size:0.78125rem;color:var(--muted);line-height:1.6;
  display:block}
.pay-opt input:checked+span{border-color:var(--blue);background:#eaf6fe}
.pay-opt input:disabled+span{opacity:.5;cursor:not-allowed}

@media(max-width:900px){
  .pdp,.cart-pg,.co-grid{grid-template-columns:1fr}
  .pdp-media{position:static}
  .sum{position:static}
}
@media print{.cart-dr,.cart-ov,.toast{display:none!important}}

/* ── شريط العلامات التجارية ── */
.brand-strip{border-bottom:1px solid var(--line);background:#fff}
.brand-strip .wrap{padding-block:1.625rem}
.brand-strip h2{font-size:0.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:center;margin-bottom:1.375rem;font-weight:650}
.brand-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2.25rem 3.5rem}
.brand-row a{display:flex;align-items:center;justify-content:center;height:2.5rem;opacity:.85;
  transition:.18s}
.brand-row a:hover{opacity:1;transform:translateY(-0.125rem)}
/* ارتفاع 100% مع max-width يتنازعان: حين يقيّد العرضُ الشعارَ العريض
   يظلّ ارتفاعه مشدوداً إلى 100%، فتنكسر نسبته ويُسحق أفقياً. جوريلا وير
   ‏(8.39:1) كان يُعرض 4.33:1 — وكذلك بايوتك وجاسب. تحديد البُعدين
   بـ auto وحدَّين أقصيَين يترك المتصفّح يحفظ النسبة. */
/* ارتفاع محدَّد وعرض تلقائي بحدٍّ أقصى، مع object-fit:contain.
   الارتفاع المحدَّد ضروري: ملفّا جاسب وسايتك بلا width/height أصليّين،
   وبأبعادٍ تلقائية بالكامل ينهار مقاسهما إلى صفر داخل حاوية مرنة.
   والعرض التلقائي يجعل كل شعار يأخذ عرضه هو لا عرضاً موحّداً، فلا
   يبتلع الشعارُ المربّعُ فراغاً حوله. */
.brand-row a img,.brand-row a svg{height:2.75rem;width:auto;max-width:12.5rem;
  object-fit:contain;display:block}
.brand-row .b-txt{white-space:nowrap;font-size:1.4375rem}
.brand-row{gap:2.125rem 3.25rem}
.brand-row a{height:auto}
.brand-row .b-txt{font-family:var(--fn);font-weight:700;font-size:1.25rem;font-style:italic;
  letter-spacing:-.02em}
.brand-row a[href*="Nebbia"] .b-txt{color:#C6007E}
.brand-row a[href*="Better"] .b-txt{color:#1B2A4A}
/* الشعارات تصغر مع الشاشة بدل أن تلتفّ سطوراً: صفٌّ واحد يُقرأ
   شريطَ علاماتٍ، وثلاثة سطور تُقرأ قائمة. */
@media(max-width:1199px){
  .brand-row{gap:1.875rem 2.75rem}
  .brand-row a img,.brand-row a svg{height:2.25rem;max-width:10.3125rem}
  .brand-row .b-txt{font-size:1.25rem}
}
@media(max-width:900px){
  .brand-row{gap:1.625rem 2.25rem}
  .brand-row a img,.brand-row a svg{height:1.875rem;max-width:8.125rem}
  .brand-row .b-txt{font-size:1.125rem}
}
@media(max-width:640px){
  .brand-row{gap:1.375rem 1.75rem}
  .brand-row a img,.brand-row a svg{height:1.625rem;max-width:6.75rem}
  .brand-row .b-txt{font-size:0.96875rem}
}

/* ── زر واتساب العائم — شريط بشكل الفقاعة نفسه فوق شات أودو ── */
.contact-fab.cf-btn{position:fixed;right:1.5625rem;bottom:4.625rem;z-index:79;
  min-width:14.375rem;height:3.25rem;border-radius:var(--sharp);display:flex;align-items:center;gap:0.625rem;
  padding-inline:1rem;cursor:pointer;border:0;box-shadow:0 0.375rem 1.25rem rgba(0,0,0,.25);
  transition:.18s;color:#fff;font-family:var(--f);font-size:0.84375rem;font-weight:600;
  white-space:nowrap}
.contact-fab.cf-btn:hover{transform:translateY(-0.125rem)}
/* أخضر واتساب أغمق: الفاتح ‎#25d366‎ يقفز عن اللوحة المخفوتة، وتباين
   الأبيض عليه 2.4 فقط. والنصّ هنا 13.5px دون عتبة «النصّ الكبير»،
   فيلزمه 4.5.
   ── نقش شعار مصل مانيا (طلب المالك) ──
   علامة M من هوية مصل مانيا مكرّرة بالأبيض الشفّاف (‎12%‎) في صفوفٍ
   متداخلة كالطوب، والنقش مائلٌ قليلاً فيُقرأ ملمساً لا شبكة. البلاطة
   ‎mm-mark-pattern.png‎ (‎48×35‎ — كثيفة، طلب المالك) تحمل علامتين بمسافاتٍ حولهما — قناعٌ
   مكرَّر من العلامة وحدها يلصقها ببعض بلا فراغ. النقش يفتّح الأخضر
   تحت النصّ، فالأرضية أغمق درجةً (‎#0f7535‎): تباين الأبيض ‎5.8‎ على
   الأرضية و‎4.6‎ فوق النقش — فوق ‎4.5‎ في الحالتين. */
.cf-wa{background:#0f7535;overflow:hidden;isolation:isolate}
.cf-wa:hover{background:#0c632c}
.cf-wa::before{content:'';position:absolute;z-index:-1;inset:-60% -20%;
  background:rgba(255,255,255,.12);transform:rotate(-12deg);pointer-events:none;
  -webkit-mask-image:url(../media/brand/mm-mark-pattern.png);mask-image:url(../media/brand/mm-mark-pattern.png);
  -webkit-mask-size:3rem 2.1875rem;mask-size:3rem 2.1875rem;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  transition:transform 900ms var(--ease)}
.cf-wa:hover::before{transform:rotate(-12deg) translateX(-0.5rem)}
.cf-wa svg,.cf-wa span{position:relative}
.cf-wa svg{flex:none}
@media(prefers-reduced-motion:reduce){.cf-wa::before{transition:none}}
@media(max-width:480px){.contact-fab.cf-btn{right:0.875rem;bottom:4.375rem;min-width:0}
  .contact-fab.cf-btn span{display:none}}

/* ── زر شات أودو الحقيقي يبقى بحجمه الطبيعي (تكبيره يكسر توسيط الحاوية
   الداخلية له بالـ shadow DOM ويخرجه عن الشاشة) — والنص يطفو بجانبه بدل ما يتغيّر
   حجم الزر نفسه، فلا يوجد أي تعارض مع تخطيط أودو الداخلي ── */
.o-livechat-root::part(openChatButton){position:relative!important}
html[dir="rtl"] .o-livechat-root::part(openChatButton)::after{content:"هل لديك أي أسئلة؟";
  position:absolute!important;top:50%!important;right:calc(100% + 0.875rem)!important;
  transform:translateY(-50%)!important;background:var(--slate);color:#fff;
  font-family:var(--f);font-size:0.8125rem;font-weight:600;white-space:nowrap;
  padding:0.5625rem 1rem;border-radius:var(--sharp);box-shadow:0 0.25rem 0.875rem rgba(0,0,0,.22)}
html:not([dir="rtl"]) .o-livechat-root::part(openChatButton)::after{content:"Have a question?";
  position:absolute!important;top:50%!important;right:calc(100% + 0.875rem)!important;
  transform:translateY(-50%)!important;background:var(--slate);color:#fff;
  font-family:var(--fn),sans-serif;font-size:0.8125rem;font-weight:600;white-space:nowrap;
  padding:0.5625rem 1rem;border-radius:var(--sharp);box-shadow:0 0.25rem 0.875rem rgba(0,0,0,.22)}
@media(max-width:560px){.o-livechat-root::part(openChatButton)::after{display:none!important}}


/* ═══════════════════════════════════════════════════════════════════
   ‖  طبقة التصميم الجديدة  ‖
   ما تحت هذا السطر يعيد بناء الطبقة البصرية والحركية فوق البنية
   القائمة. لا يُعاد تسمية أي صنف تعتمد عليه الصفحات الـ1107.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ١. الطباعة ───────────────────────────────────────────────────
   التتبّع يضيق كلّما كبر الحجم، والتقدّم السطري يعاكسه. لا قيمة
   واحدة تصلح للسلّم كلّه. */
body{font-size:1.03125rem;line-height:1.72;letter-spacing:0;
  text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5{font-family:var(--fd);font-weight:650;margin:0}
h1{font-size:var(--t-h1);letter-spacing:var(--tr-h1);line-height:var(--ld-h1)}
h2{font-size:var(--t-h2);letter-spacing:var(--tr-h2);line-height:var(--ld-h2)}
h3{font-size:var(--t-h3);letter-spacing:var(--tr-h3);line-height:var(--ld-h3)}
h4{letter-spacing:-.008em}
/* التتبّع السالب مصمَّم للاتينية؛ على العربية يلصق الحروف المتّصلة
   ببعضها فتُقرأ بصعوبة. تُخفَّف القيمة في السياق العربي وحده. */
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] h4,
html[dir=rtl] .sec-head h2,html[dir=rtl] .mm-cta h2{letter-spacing:var(--tr-ar)}
html[dir=rtl] .mm-hero h1{letter-spacing:-.018em}
p{max-width:74ch}
/* الأرقام مرساة التصميم: وزن ثقيل وتتبّع سالب وأرقام بعرض ثابت
   حتى لا يرقص السعر عند تغيّره. */
.card-price,.price-now,.pdp .price b,.stat b,.num b,.rev-score b,.mm-count{
  font-family:var(--fn);font-weight:700;letter-spacing:-.018em;
  font-variant-numeric:tabular-nums lining-nums}

/* ── ٢. الأزرار ──────────────────────────────────────────────────
   الارتداد على الضغط لا على الإفلات: التغذية الراجعة تبدأ لحظة
   ملامسة الإصبع، وإلّا بدا الزر ميّتاً. */
.button{font-family:var(--f);font-size:0.9375rem;font-weight:600;letter-spacing:-.006em;
  height:3.25rem;padding:0 1.875rem;border-radius:var(--sharp);background:var(--iron);color:#fff;
  border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:0.5625rem;white-space:nowrap;
  transition:background var(--d-fast) var(--ease),transform var(--d-fast) var(--ease),
             box-shadow var(--d) var(--ease),color var(--d-fast) var(--ease)}
/* طبقة تُملأ من الحافة السفلى عند التحويم — حركة واحدة تقول «قابل للضغط» */
.button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--volt);
  transform:translateY(101%);transition:transform var(--d) var(--ease)}
.button:hover{background:var(--iron);color:#fff;box-shadow:0 0.375rem 1.25rem rgba(12,156,235,.28)}
.button:hover::before{transform:translateY(0)}
.button:active{transform:scale(.975);transition-duration:90ms}
.button:focus-visible{outline:0.15625rem solid var(--volt);outline-offset:0.1875rem}
.button.ghost{background:transparent;color:var(--iron);border:0.09375rem solid var(--line-2)}
.button.ghost::before{background:var(--iron)}
.button.ghost:hover{color:#fff;border-color:var(--iron);box-shadow:none}
/* على الأرضيات الحديدية ينقلب الزرّ الشبحي: حبره أبيض وامتلاؤه أبيض.
   بلا هذه القاعدة يصير حبر الزرّ أسودَ على أسود فيختفي نصّه. */
.story .button.ghost,.mm-band .button.ghost,.mm-hero .button.ghost,
.ftr .button.ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.story .button.ghost::before,.mm-band .button.ghost::before,
.mm-hero .button.ghost::before,.ftr .button.ghost::before{background:#fff}
.story .button.ghost:hover,.mm-band .button.ghost:hover,
.mm-hero .button.ghost:hover,.ftr .button.ghost:hover{color:var(--iron);border-color:#fff}
.button.volt{background:var(--volt)}
.button.volt::before{background:var(--iron)}
.button.sm{height:2.75rem;padding:0 1.375rem;font-size:0.875rem}
.button[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.button[disabled]::before{display:none}

/* ── ٣. إيقاع الأقسام ────────────────────────────────────────────
   الترويسة تحمل معلومة، لا زخرفة: كلمة دالّة بلون الفعل ثم العنوان.
   لا «إيبرو» بحروف كبيرة متباعدة فوق كل عنوان. */
.sec{padding:var(--sec-y) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);margin-bottom:var(--s6);flex-wrap:wrap}
.sec-head h2{font-size:var(--t-h2);letter-spacing:var(--tr-h2);line-height:var(--ld-h2)}
.sec-head p{margin:0.625rem 0 0;color:var(--slate-2);font-size:0.96875rem;max-width:58ch}
.sec-head>a{font-size:0.90625rem;font-weight:600;border-bottom:0;padding-bottom:0;
  display:inline-flex;align-items:center;gap:0.5rem;color:var(--iron);position:relative;
  padding-block:0.375rem;flex:none}
.sec-head>a::after{content:'';position:absolute;inset-inline:0;bottom:0;height:0.125rem;
  background:var(--iron);transform-origin:var(--mm-origin,left);
  transition:transform var(--d) var(--ease)}
html[dir=rtl] .sec-head>a::after{transform-origin:right}
.sec-head>a:hover{color:var(--volt)}
.sec-head>a:hover::after{background:var(--volt);transform:scaleX(.35)}
/* كلمة دالّة صغيرة قبل العنوان — وزن ولون، لا حروف كبيرة متباعدة */
.eyebrow{display:flex;align-items:center;gap:0.5625rem;font-size:0.84375rem;font-weight:650;
  color:var(--volt);margin-bottom:0.75rem}
.eyebrow::before{content:'';width:1.375rem;height:0.125rem;background:currentColor;flex:none;border-radius:var(--sharp)}

/* ── ٤. الكشف عند التمرير ────────────────────────────────────────
   حركة واحدة قصيرة، مرّة واحدة، بالإزاحة والشفافية فقط. */
/* كل حالة إخفاء مبدئية مشروطة بـ html.mm-js — يضعه motion.js عند
   إقلاعه. بلا جافاسكربت يبقى كل شيء ظاهراً كما هو. */
.mm-js .rv{opacity:0;transform:translate3d(0,1.375rem,0);
  transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease)}
.mm-js .rv.in{opacity:1;transform:none}
.mm-js .rv-l{transform:translate3d(-1.625rem,0,0)}
html[dir=rtl].mm-js .rv-l{transform:translate3d(1.625rem,0,0)}
.mm-js .rv-r{transform:translate3d(1.625rem,0,0)}
html[dir=rtl].mm-js .rv-r{transform:translate3d(-1.625rem,0,0)}
.mm-js .rv-s{transform:scale(.965)}
.mm-js .rv-l.in,.mm-js .rv-r.in,.mm-js .rv-s.in{transform:none}
/* قاعدتا RTL أعلاه أخصّ من إعادة الضبط (‎html[dir=rtl]‎ عنصرٌ وسمة زائدان)، فكان
   العنصر في العربية يبقى مُزاحاً 26px إلى الأبد — عمود معلومات المنتج في 416 صفحة،
   ويوسّع الصفحة على الهاتف. الحالة النهائية نفسها في اللغتين. */
html[dir=rtl].mm-js .rv-l.in,html[dir=rtl].mm-js .rv-r.in{transform:none}
/* كشفٌ بالشفافية وحدها — للعناصر التي لا تحتمل transform، كاللوحة
   اللاصقة في صفحة المنتج: التحويل عليها يخاطر بإزاحةٍ عالقة. */
.mm-js .rv-fade{transform:none}
.mm-js .rv-fade.in{transform:none}
/* الأبناء يتتابعون بفارق صغير — التتابع يقرأ كترتيب لا كعرض */
.mm-js .rv-stagger>*{opacity:0;transform:translate3d(0,1.25rem,0);
  transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease);
  transition-delay:calc(var(--i,0) * 65ms)}
.mm-js .rv-stagger.in>*{opacity:1;transform:none}

/* عنوان يظهر سطراً سطراً من تحت قناع — الحركة الوحيدة المسموح بها
   بلا فعل من المستخدم، ومرّة واحدة عند التحميل. */
.reveal-type{display:block}
/* القناع على السطر نفسه لا على الكتلة كلّها، وإلّا ظهر السطر الصاعد
   فوق السطر الذي تحته. الحشوة السفلى تمنع قصّ نزلات العربية. */
.reveal-type>i{display:block;font-style:inherit;overflow:hidden;
  padding-bottom:.1em;margin-bottom:-.1em}
.mm-js .reveal-type>i>span{display:block;transform:translate3d(0,112%,0);
  transition:transform 900ms var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.mm-js .reveal-type.in>i>span{transform:none}

/* ── ٥. احترام تقليل الحركة ──────────────────────────────────────
   «تقليل» لا «إلغاء»: تبقى التغذية الراجعة، ويسقط الانزلاق والتباطؤ. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.rv-stagger>*,.reveal-type>i{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .hdr.stuck{backdrop-filter:none!important;background:#fff!important}
}

/* التحويلات فيزيائية لا منطقية: هذا المعامل يقلب اتجاه الإزاحة
   وحده حين تقلب الصفحة اتجاهها. */
:root{--mm-dir:1}
html[dir=rtl]{--mm-dir:-1}

/* ── ٦. الرأس ────────────────────────────────────────────────────
   شريط طافٍ يمرّ المحتوى تحته، ويتقلّص عند النزول ليُعيد الارتفاع
   للصفحة. الانتقال على الارتفاع والشفافية فقط. */
.utility{background:var(--iron);font-size:0.78125rem;position:relative;z-index:52}
.util-in{height:2.375rem}
.util-links a{opacity:.72;transition:opacity var(--d-fast) var(--ease)}
.util-links a:hover{opacity:1}

.hdr{position:sticky;top:0;z-index:50;background:transparent;border-bottom:0}
/* الزجاج الأبيض خلف صفّ الشعار والبحث وحده، في طبقةٍ مستقلّة (‎::before‎):
   لو بقي ‎backdrop-filter‎ على ‎.hdr‎ نفسه لصار «جذر خلفية» لما بداخله،
   ولما رأى شريط التنقّل الزجاجي تحته إلا الرأسَ الفارغ بدل الصفحة. */
.hdr::before{content:'';position:absolute;inset:0 0 auto 0;height:6rem;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(1.125rem) saturate(180%);-webkit-backdrop-filter:blur(1.125rem) saturate(180%);
  border-bottom:1px solid transparent;
  transition:height var(--d) var(--ease),box-shadow var(--d) var(--ease),border-color var(--d) var(--ease)}
@supports not (backdrop-filter:blur(1px)){.hdr::before{background:#fff}}
@media(max-width:820px){.hdr::before{height:auto;bottom:0}}
.hdr-in{height:6rem;gap:var(--s5);transition:height var(--d) var(--ease)}
.hdr.stuck::before{height:4.5rem;border-bottom-color:var(--line);box-shadow:0 1px 1.25rem rgba(12,74,140,.07)}
.hdr.stuck .hdr-in{height:4.5rem}
/* الشعار في الرأس بحجمٍ يُقرأ: خطّ MANIA المفرَّغ سُمكه ‎1.5%‎ من ارتفاع
   الشعار، فعلى ‎44px‎ كان أقلّ من ‎0.7px‎ ويبهت. على ‎66px‎ يقارب ‎1px‎
   كاملاً فيُرسم واضحاً. النسبة ‎1417/425‎ ثابتة فلا يتشوّه. */
/* 66 → 82.5px (+25%، طلب المالك) ثم 74px: على 82.5 كان يتجاوز شريط الرأس المثبَّت
   (72px) ويكاد يلمس «المكمّلات» تحته (بلاغ المالك: «الشعار لا يتّسع») */
.hdr .logo-img{height:4.625rem;width:calc(4.625rem * 1417 / 425);background-color:var(--iron)}
/* الشعار يتقلّص مع الشريط، والمقياس أرخص من تغيير الارتفاع */
.logo-img{transition:transform var(--d) var(--ease);transform-origin:var(--mm-lo,left center)}
html[dir=rtl] .logo-img{--mm-lo:right center}
/* 74 × .76 ≈ 56px داخل شريطٍ من 72px: هامشٌ متساوٍ فوقه وتحته */
.hdr.stuck .logo-img{transform:scale(.76)}
@media(min-width:821px){.hdr-in>.logo{align-self:center}}

/* حقل البحث في منتصف الرأس تماماً، على محور القائمة التي تحته.
   الأعمدة الجانبية متساوية ‎1fr‎ فيتوسّط الحقل مهما اختلف عرض الشعار
   عن عرض الأيقونات، ولا تنزل عن عرض محتواها فلا يتراكب شيء على
   الشاشات الأضيق — هناك يأخذ الحقل ما تبقّى فقط. */
@media(min-width:821px){
  .hdr-in{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,37.5rem) minmax(max-content,1fr);
    column-gap:var(--s6)}
  .hdr-in>.logo{justify-self:start}
  .hdr-in>.search{width:100%;max-width:none}
  .hdr-in>.hdr-actions{justify-self:end;margin-inline-start:0}
  /* اختيار اللغة في منتصف المسافة تماماً بين حقل البحث وأيقونتي الحساب والسلّة (طلب المالك):
     الحاوية تمتدّ من نهاية حقل البحث (تستعيد فجوة العمود بهامشٍ سالب) إلى طرف الرأس،
     والكبسولة بهامشين تلقائيّين، والأيقونتان في الطرف. الفجوة بين الكبسولة والأيقونة
     صفر كي لا تميل الكبسولة عن المنتصف، والمسافة بين الأيقونتين هامشٌ على السلّة. */
  .hdr-in>.hdr-actions{justify-self:stretch;display:flex;align-items:center;gap:0}
  .hdr-in>.hdr-actions>.lt-wrap{margin-inline:auto}
  /* فجوة العمود نفسها قبل الكبسولة تُعاد بعدها: المسافتان متساويتان، ولا تقلّان عنها */
  .hdr-in>.hdr-actions>a[href="track.html"]{margin-inline-start:var(--s6)}
  .hdr-in>.hdr-actions>.cart{margin-inline-start:0.375rem}
}

.search{position:relative}
.search input{height:3.125rem;border-radius:var(--sharp);border:0.09375rem solid transparent;
  background:var(--bg-2);transition:background var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease)}
.search input:focus{background:#fff;border-color:var(--slate);
  box-shadow:0 0 0 0.25rem rgba(27,44,77,.09)}
/* ── علامات المنتجات في طرف حقل البحث ──
   نفس فكرة علامات شريط التمرير: عبوات صغيرة مقصوصة من صور المنتجات
   الحقيقية، بارتفاعات وتباعد غير منتظمة عمداً فتُقرأ صفّاً عفوياً لا
   نقشاً مكرّراً. تقع في الطرف المقابل لأيقونة البحث حيث الحقل فارغ،
   وتنسحب فور أن يلمس المستخدم الحقل فلا تزاحم ما يكتبه. */
.search-marks{position:absolute;inset-inline-end:1.25rem;top:0;bottom:0;
  display:flex;align-items:center;gap:0.5625rem;pointer-events:none;z-index:1;
  opacity:.5;transition:opacity var(--d) var(--ease),transform var(--d) var(--ease)}
.search-marks img{width:auto;display:block;filter:saturate(.85)}
.search-marks img:nth-child(1){height:1.375rem}
.search-marks img:nth-child(2){height:1.625rem;margin-bottom:0.1875rem}
.search-marks img:nth-child(3){height:1.1875rem;margin-top:0.125rem}
.search-marks img:nth-child(4){height:1.5rem}
.search:focus-within .search-marks{opacity:0;
  transform:translateX(calc(var(--mm-dir) * 0.625rem))}
@media(max-width:1180px){.search-marks{display:none}}
.search button{transition:transform var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.search:hover button{color:var(--iron)}
.search button:active{transform:translateY(-50%) scale(.9)}

.icon-btn{transition:background var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.icon-btn:hover{background:var(--bg-2)}
.icon-btn:active{transform:scale(.92)}
.lang-toggle{border-color:var(--line-2);transition:all var(--d-fast) var(--ease)}

/* عدّاد السلّة ينبض حين يزيد — الحركة هنا جواب على فعل، لا زينة */
.cart .badge{transition:transform var(--d) var(--ease-spring)}
.cart.mm-bump .badge{transform:scale(1.55)}
.cart.mm-bump svg{animation:mm-cart-nudge 460ms var(--ease)}
@keyframes mm-cart-nudge{0%,100%{transform:translateY(0)}35%{transform:translateY(-0.25rem)}}

/* ── شريط التنقّل الزجاجي (طلب المالك: على نهج Liquid Glass من Apple) ──
   كبسولةٌ عائمة في وسط الرأس: مادّةٌ شفّافة تُغبِّش ما يمرّ تحتها من الصفحة،
   حافّةٌ لامعة من أعلى، وإطارٌ رفيع يكسر الضوء. البند المختار (أو الذي
   تحته المؤشّر) تحمله «عدسة» زجاجية أنصع تنزلق بين البنود بمنحنى نابضي
   وتنتفخ قليلاً عند الضغط. أيقونة خطّية قبل كل كلمة. */
@media(min-width:821px){
  .mainnav{border-top:0;padding:0.125rem 0 0.75rem;pointer-events:none;transition:padding var(--d) var(--ease)}
  .mainnav .wrap{display:flex;justify-content:center}
  .mainnav ul{pointer-events:auto;position:relative;isolation:isolate;display:flex;flex-wrap:nowrap;gap:0.125rem;
    padding:0.3125rem;border-radius:var(--sharp);
    background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(238,242,249,.6));
    backdrop-filter:blur(1.375rem) saturate(190%);-webkit-backdrop-filter:blur(1.375rem) saturate(190%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(12,74,140,.05),
      0 0 0 .5px rgba(12,74,140,.13),0 0.875rem 2.125rem -1rem rgba(12,74,140,.38),0 0.1875rem 0.5rem -0.25rem rgba(12,74,140,.12)}
  /* إطار الانكسار: خيطٌ متدرّج بعرض بكسل حول الكبسولة */
  .mainnav ul::before,.nav-lens::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 34%,rgba(13,156,248,.24) 62%,rgba(255,255,255,.8));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .mainnav li{position:static;align-self:auto;margin:0}
  .mainnav a.nav-a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:0.5rem;height:2.625rem;
    margin:0;padding:0 1rem;border-radius:var(--sharp);background:none;box-shadow:none;
    font-size:1.1875rem;font-weight:var(--ui-w);letter-spacing:-.008em;color:#141414;white-space:nowrap;
    font-family:var(--ui-font);
    -webkit-tap-highlight-color:transparent;transition:color .3s var(--ease),height var(--d) var(--ease)}
  .mainnav a.nav-a::after{display:none}
  .mainnav .nav-ico{display:grid;place-items:center;width:1.25rem;height:1.25rem;flex:none;color:#141414;
    transition:color .3s var(--ease)}
  .mainnav .nav-ico svg{width:1.25rem;height:1.25rem;stroke-width:1.8;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
  .mainnav li:hover>a.nav-a,.mainnav li>a.nav-a:focus-visible{color:var(--ink)}
  .mainnav li:hover .nav-ico{color:var(--iron)}
  .mainnav li:hover .nav-ico svg{transform:translateY(-1px) scale(1.1)}
  .mainnav li.nav-on>a.nav-a{color:var(--royal)}
  .mainnav li.nav-on .nav-ico,.mainnav li.nav-adv .nav-ico{color:var(--volt)}
  .mainnav li.nav-adv:hover .nav-ico svg{transform:rotate(18deg) scale(1.12)}
  .mainnav a.nav-a:focus-visible{outline:0.125rem solid var(--volt);outline-offset:-0.125rem}
  .hdr.stuck .mainnav{padding-bottom:0.5rem}
  .hdr.stuck .mainnav a.nav-a{height:2.375rem}

  /* العدسة */
  .nav-lens{position:absolute;z-index:0;top:0.3125rem;bottom:0.3125rem;left:0;width:0;border-radius:var(--sharp);pointer-events:none;
    opacity:0;transform:translateX(var(--lx,0px)) scale(var(--ls,1));
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.8));
    box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px rgba(12,74,140,.07),0 0 0 .5px rgba(12,74,140,.1),
      0 0.4375rem 1.125rem -0.4375rem rgba(12,74,140,.34),0 1px 0.1875rem rgba(12,74,140,.09);
    transition:transform .58s cubic-bezier(.32,.72,0,1),width .58s cubic-bezier(.32,.72,0,1),opacity .28s ease}
  .nav-lens.on{opacity:1}
  .nav-lens.snap{transition:opacity .28s ease}
  .nav-lens.press{--ls:1.07;transition-duration:.22s,.58s,.28s}
  @media(prefers-reduced-motion:reduce){.nav-lens{transition:opacity .2s ease}}
  @media(prefers-reduced-transparency:reduce){
    .mainnav ul{background:#eef2f8;backdrop-filter:none;-webkit-backdrop-filter:none}
  }
}
/* ثمانية بنود (بعد حذف الرعاية) بخطٍّ أكبر بطلب المالك: تضيق قبل أن تلتفّ، ثم تتخلّى
   عن الأيقونات على الشاشات الأضيق */
@media(min-width:821px) and (max-width:1199px){
  .mainnav a.nav-a{padding:0 0.75rem;gap:0.4375rem;font-size:1.125rem}
}
@media(min-width:821px) and (max-width:1160px){
  .mainnav a.nav-a{padding:0 0.625rem;font-size:1.0625rem}
  .mainnav .nav-ico{display:none}
}
@media(min-width:821px) and (max-width:1000px){
  .mainnav a.nav-a{font-size:1rem;padding:0 0.5625rem}
}
/* الحجم والسُّمك متطابقان بصرياً بين اللغتين (طلب المالك: «حجم العربية ونحافة الإنجليزية،
   متطابقان تماماً، وأعرض قليلاً»). قيس سُمك الجذع بالرسم: Red Hat Display بوزن 450 جذعه
   8% من المقاس، وNoto Sans Arabic بالوزن نفسه 9% — فكانت العربية أثقل. الآن: العربية
   20px والإنجليزية 19px (جسم الحرف العربي أقصر، فتحتاج مقاساً أكبر)، والوزن محسوبٌ
   لكلٍّ منهما كي يكون الجذع ≈1.57px في الاثنتين — أعرض بـ12% من الإنجليزية السابقة:
   ‎--ui-w‎ = 470 للاتيني و390 للعربي. المتغيّران نفسهما لزرّ الترشيح والشريط الجانبي. */
@media(min-width:821px){
  html[lang=ar] .mainnav a.nav-a{font-size:1.25rem}
  html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:1.1875rem}
}
@media(min-width:821px) and (max-width:1199px){
  html[lang=ar] .mainnav a.nav-a{font-size:1.1875rem}
  html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:1.125rem}
}
@media(min-width:821px) and (max-width:1160px){
  html[lang=ar] .mainnav a.nav-a{font-size:1.125rem}
  html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:1.0625rem}
}
@media(min-width:821px) and (max-width:1000px){
  html[lang=ar] .mainnav a.nav-a{font-size:1.03125rem;padding:0 0.5rem}
  html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:1rem;padding:0 0.625rem}
}
/* قائمة الجوّال: الأيقونة نفسها قبل كل بند */
.mm-nav-t{display:inline-flex;align-items:center;gap:0.75rem;min-width:0}
.mm-nav-t .nav-ico{display:grid;place-items:center;width:1.375rem;height:1.375rem;flex:none;color:var(--iron)}
.mm-nav-t .nav-ico svg{width:1.25rem;height:1.25rem;transform:none!important;color:inherit!important}
.mm-nav-adv .mm-nav-t .nav-ico{color:var(--volt)}
/* ── القائمة الكبرى ──
   كانت لوحاً أبيض فارغاً ينفصل عن الموقع. صارت بأرضية الموقع نفسها
   يعلوها شريط أزرق رفيع، والأصناف صفوفٌ تُضيء عند التحويم. لا لوحات
   عرضٍ ترويجية في طرفها (أزالها المالك) — الأقسام تملأ العرض كلّه. */
.mega{background:#fff;box-shadow:var(--sh-3);border-top:0.125rem solid var(--volt);
  padding:2.125rem 0 2.375rem}
/* صفّ مرن لا شبكة ثابتة: عدد الأعمدة يختلف بين القوائم، والعمود الطويل
   يأخذ ضعف العرض (‎.mm-2c‎ أدناه). */
.mega-grid{display:flex;flex-wrap:wrap;gap:2.125rem;align-items:stretch}
.mega-col{flex:1 1 0;min-width:10.5rem}

/* ── أقسام القائمة الكبرى (طلب المالك: خطٌّ أكبر، مساحةٌ مملوءة، شكلٌ أجمل) ──
   - العمود ذو أكثر من خمسة أقسام يأخذ ضعف العرض ويُقسَم عمودين
     (‎.mm-2c‎ من motion.js) — فلا تبقى قائمة طويلة رفيعة بجوار فراغ.
   - القسم الذي له منتجات يحمل صورة أكثر منتجاته توفّراً على بلاطة
     البطاقة نفسها، والاسم ‎16px‎ فوق «14 منتجاً» (‎.mm-mt‎).
   - أقسام البرامج والتمارين بلا صور: اسمٌ ‎16px‎ وعددٌ في حبّة.
   - التحويم يملأ الصفّ بأرضيةٍ فاتحة ويكبّر الصورة داخل بلاطتها. */
.mega-grid{gap:2.5rem}
.mega-col{min-width:12.5rem}
.mega-col.mm-2c{flex:2 1 0}
.mega-col.mm-2c ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0.875rem}
.mega-col h4{font-size:0.9375rem;letter-spacing:0;text-transform:none;color:var(--iron);
  font-weight:600;margin-bottom:0.875rem;padding-bottom:0.75rem;position:relative;
  border-bottom:1px solid var(--line)}
/* قلمٌ أزرق قصير تحت العنوان — علامة قسمٍ لا خطّ فاصل فقط */
.mega-col h4::after{content:'';position:absolute;bottom:-1px;inset-inline-start:0;
  width:2rem;height:0.125rem;background:var(--volt);border-radius:var(--sharp)}
.mega-col li a{display:flex;align-items:center;gap:0.75rem;
  padding:0.625rem 0.75rem;margin-inline:-0.75rem;border-radius:var(--sharp);font-size:1rem;font-weight:500;
  color:var(--ink);line-height:1.3;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.mega-col li a>.i18n{flex:1;min-width:0}
.mega-col li a:hover{background:var(--bg);color:var(--royal)}
.mega-col li a .mcnt{flex:none;margin-inline-start:auto;background:var(--bg);color:var(--ink-2);
  border-radius:var(--sharp);padding:0.1875rem 0.625rem;font-size:0.78125rem;font-weight:500;white-space:nowrap;
  font-family:var(--fn);
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.mega-col li a .mcnt b{font-weight:600}
.mega-col li a:hover .mcnt{background:var(--volt);color:#fff}
.mega-col li a:focus-visible{outline:0.125rem solid var(--volt);outline-offset:1px}

.mega-col li a.mm-mt{display:grid;grid-template-columns:3.75rem minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:0.875rem;row-gap:1px;padding:0.5rem 0.75rem}
/* مصغّرات مربّعة مخصّصة (media/thumbs): المنتج كاملاً داخل المربّع —
   صور البطاقات الطويلة كانت تُقصّ من أعلى وأسفل في هذا الصندوق. */
.mm-mt .mthumb{grid-row:1 / 3;width:3.75rem;height:3.75rem;border-radius:var(--sharp);overflow:hidden;
  background:#e5ebf3;display:block;isolation:isolate}
.mm-mt .mthumb img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;
  mix-blend-mode:multiply;transition:transform 480ms var(--ease)}
.mm-mt:hover .mthumb img{transform:scale(1.08)}
.mega-col li a.mm-mt>.i18n{align-self:end;font-weight:600}
.mega-col li a.mm-mt .mcnt{align-self:start;justify-self:start;margin:0;padding:0;background:none;
  font-size:0.8125rem;font-weight:500;color:var(--muted)}
.mega-col li a.mm-mt .mcnt b{font-weight:500}
.mega-col li a.mm-mt:hover .mcnt{background:none;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.mm-mt .mthumb img{transition:none}}
/* قائمة الجوّال تنسخ روابط القائمة الكبرى؛ الصور للوحة سطح المكتب وحدها */
.mm-nav-sub .mthumb{display:none}



/* ── ٧. قائمة الجوّال ────────────────────────────────────────────
   الزرّ كان موجوداً في كل صفحة بلا سلوك؛ هذه هي القائمة التي ينقصها. */
.burger{width:2.625rem;height:2.625rem;border-radius:50%;justify-content:center;gap:0.3125rem;
  transition:background var(--d-fast) var(--ease)}
.burger:hover{background:var(--bg-2)}
.burger span{width:1.25rem;height:0.125rem;border-radius:var(--sharp);background:var(--iron);
  transition:transform var(--d) var(--ease),opacity var(--d-fast) var(--ease)}
body.mm-nav-open .burger span:nth-child(1){transform:translateY(0.4375rem) rotate(45deg)}
body.mm-nav-open .burger span:nth-child(2){opacity:0;transform:scaleX(.2)}
body.mm-nav-open .burger span:nth-child(3){transform:translateY(-0.4375rem) rotate(-45deg)}

.mm-nav-ov{position:fixed;inset:0;background:rgba(20,24,27,.44);z-index:88;
  opacity:0;pointer-events:none;transition:opacity var(--d) var(--ease)}
.mm-nav-ov.on{opacity:1;pointer-events:auto}
.mm-nav{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(23.125rem,86vw);
  background:#fff;z-index:89;display:flex;flex-direction:column;
  transform:translateX(calc(var(--mm-dir) * -102%));
  transition:transform var(--d-slow) var(--ease);box-shadow:var(--sh-3);
  overscroll-behavior:contain}
.mm-nav.on{transform:translateX(0)}
.mm-nav-hd{display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.375rem;border-bottom:1px solid var(--line);flex:none}
/* الشعار قناعٌ بعرضٍ محسوب من ارتفاعه، فتحديد الارتفاع وحده يتركه
   بعرض 250px يزاحم زرّ الإغلاق. يُقاس البعدان معاً. */
.mm-nav-hd .logo-img{width:7.3125rem;height:2.1875rem}
.mm-nav-x{background:0;border:0;font-size:1.6875rem;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 0.375rem;transition:color var(--d-fast) var(--ease)}
.mm-nav-x:hover{color:var(--iron)}
.mm-nav-body{flex:1;overflow-y:auto;padding:0.625rem 0 1.5rem;-webkit-overflow-scrolling:touch}
.mm-nav-body>a,.mm-nav-grp>button{display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:0.75rem;padding:0.9375rem 1.5rem;font-family:var(--f);font-size:1.03125rem;font-weight:600;
  color:var(--iron);background:0;border:0;cursor:pointer;text-align:start;
  transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.mm-nav-body>a:active,.mm-nav-grp>button:active{background:var(--bg-2)}
/* المستشار في قائمة الجوّال: رقاقة كما في القائمة المكتبية */
.mm-nav-body>a.mm-nav-adv{margin:0.375rem 1rem 0.625rem;padding:0.8125rem 1.125rem;border-radius:var(--sharp);
  background:var(--volt-soft);color:var(--royal);width:auto}
.mm-nav-body>a.mm-nav-adv::after{content:'';width:0.5rem;height:0.5rem;border-radius:50%;background:var(--volt);flex:none}
.mm-nav-grp>button svg{flex:none;transition:transform var(--d) var(--ease);color:var(--muted)}
.mm-nav-grp.open>button{color:var(--volt)}
.mm-nav-grp.open>button svg{transform:rotate(180deg)}
/* الطيّ بارتفاع محسوب في جافاسكربت — الانتقال إلى auto لا يتحرّك */
.mm-nav-sub{overflow:hidden;height:0;transition:height var(--d-slow) var(--ease)}
.mm-nav-sub a{display:flex;justify-content:space-between;gap:0.625rem;
  padding:0.6875rem 1.5rem 0.6875rem 2.5rem;font-size:0.90625rem;color:var(--ink-2);font-weight:500}
html[dir=rtl] .mm-nav-sub a{padding:0.6875rem 2.5rem 0.6875rem 1.5rem}
.mm-nav-sub a:active{background:var(--bg-2)}
.mm-nav-sub .mcnt{color:var(--muted)}
.mm-nav-ft{flex:none;padding:1.125rem 1.5rem 1.5rem;border-top:1px solid var(--line);
  background:var(--bg-2);display:grid;gap:0.625rem}
.mm-nav-ft .button{width:100%}
/* شريط البحث داخل القائمة — على الجوّال يختفي بحث الرأس */
.mm-nav-search{padding:0.875rem 1.375rem;border-bottom:1px solid var(--line);flex:none}
.mm-nav-search form{position:relative}
.mm-nav-search input{width:100%;height:3rem;border-radius:var(--sharp);border:0.09375rem solid var(--line);
  background:var(--bg-2);padding-inline:2.75rem 1rem;font-family:var(--f);font-size:0.9375rem}
.mm-nav-search input:focus{outline:0;border-color:var(--iron);background:#fff}
.mm-nav-search button{position:absolute;inset-inline-start:0.875rem;top:50%;
  transform:translateY(-50%);background:0;border:0;cursor:pointer;color:var(--ink-2);display:grid}
body.mm-nav-open{overflow:hidden}

/* ── ٨. الهيرو ──────────────────────────────────────────────────
   انتقل إلى القسم ٢١ (هوية العلامة): الهيرو الجديد ‎.hero-b‎ بلوحة المستشار. */

/* ── ٩. رفّ الأهداف ──────────────────────────────────────────────
   خمسة ألواح تتقاسم العرض؛ اللوح المُحوَّم عليه يأخذ حصّة أكبر
   والبقيّة تنكمش. التحوّل على grid-template-columns وحده. */
/* الأعمدة مكتوبةٌ صراحةً لا بـ repeat(): المتصفّح لا يُحرّك بين repeat() وقائمةٍ صريحة،
   فكان اللوح يقفز مفتوحاً عند دخول المؤشّر ومغلقاً عند خروجه (بلاغ المالك: «يفتح فوراً
   بلا حركة»). والمنحنى هادئ الطرفين بدل ‎--ease‎ الذي يقطع معظم المسافة في أوّل الإطارات. */
.mm-rail{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:0.625rem;
  transition:grid-template-columns 720ms cubic-bezier(.45,.05,.2,1)}
.mm-rail .goal{aspect-ratio:auto;height:clamp(21.25rem,44vw,32.5rem);border-radius:var(--sharp);
  transition:box-shadow var(--d-slow) var(--ease)}
.mm-rail .goal img{transition:transform 900ms var(--ease),filter var(--d-slow) var(--ease);
  filter:saturate(.72) brightness(.82)}
.mm-rail .goal::after{background:linear-gradient(to top,rgba(20,24,27,.93) 4%,
  rgba(20,24,27,.5) 40%,rgba(20,24,27,.06) 78%);
  transition:opacity var(--d-slow) var(--ease)}
.mm-rail .goal:hover img,.mm-rail .goal:focus-visible img{
  transform:scale(1.07);filter:saturate(1) brightness(1)}
.mm-rail .goal:hover{box-shadow:var(--sh-3)}
.mm-rail .goal-in{padding:var(--s5) var(--s5) 1.625rem}
.mm-rail .goal h3{font-size:clamp(1.125rem,1.5vw,1.4375rem);letter-spacing:-.015em}
/* الوصف والعدّاد يصعدان عند التحويم — المعلومة تُكشَف بالقصد لا بالصدفة */
.mm-rail .goal p{opacity:0;transform:translate3d(0,0.625rem,0);max-height:0;
  transition:opacity var(--d) var(--ease),transform var(--d) var(--ease),
    max-height var(--d-slow) var(--ease),margin var(--d-slow) var(--ease);margin-top:0}
.mm-rail .goal:hover p,.mm-rail .goal:focus-visible p{opacity:1;transform:none;
  max-height:6em;margin-top:0.5rem}
/* جهازٌ لمسيّ أعرض من ‎960px‎ (لوحيّ أفقيّاً) لا يحوم فلا يرى الوصف أبداً —
   يُعرض دائماً كما في شاشات اللمس الأضيق */
@media(hover:none){.mm-rail .goal p{opacity:1;transform:none;max-height:6em;margin-top:0.5rem}}
.mm-rail .goal-n{margin-top:0.875rem;font-family:var(--fn);font-weight:600;
  border-color:rgba(255,255,255,.4);backdrop-filter:blur(0.375rem);
  transition:background var(--d) var(--ease),color var(--d) var(--ease),
    border-color var(--d) var(--ease)}
@media(hover:hover) and (min-width:961px){
  .mm-rail:hover{grid-template-columns:var(--mm-rail-cols,1fr 1fr 1fr 1fr 1fr)}
}

/* ── ١٠. الأشرطة الحديدية ───────────────────────────────────────
   الأسود يفصل البياض ويحمل قصّة العلامة. إيقاع لا أرضية. */
.mm-band{background:var(--iron);color:#fff;position:relative;overflow:hidden;
  padding-block:var(--sec-y)}
.mm-band h2{color:#fff}
.mm-band p{color:#aebcc4}
.mm-band .eyebrow{color:var(--volt)}
.mm-band-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.75rem,5vw,4.5rem);align-items:center}
/* الأرقام: سطر واحد يعدّ إلى قيمته عند ظهوره، مرّة واحدة */
.mm-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--iron-3);border-radius:var(--sharp);overflow:hidden}
.mm-fig{background:var(--iron-2);padding:clamp(1.375rem,2.6vw,2.125rem) var(--s5)}
.mm-fig b{display:block;font-family:var(--fn);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.875rem,3.4vw,2.875rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums lining-nums}
.mm-fig span{display:block;margin-top:0.5625rem;font-size:0.84375rem;color:#93a3ab;line-height:1.5}
/* خطوات موثّقة — الترقيم هنا مبرَّر لأنّ المحتوى تسلسل فعلاً */
.mm-steps{display:grid;gap:0.125rem;background:var(--iron-3);border-radius:var(--sharp);overflow:hidden}
.mm-step{background:var(--iron-2);padding:var(--s5) clamp(1.25rem,2.4vw,1.75rem);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  transition:background var(--d) var(--ease)}
.mm-step:hover{background:#242c32}
.mm-step i{font-style:normal;font-family:var(--fn);font-weight:700;font-size:0.875rem;
  color:var(--volt);width:1.875rem;height:1.875rem;border-radius:50%;display:grid;place-items:center;
  border:0.09375rem solid rgba(12,156,235,.42);flex:none;letter-spacing:0}
.mm-step h4{font-size:1rem;color:#fff;margin-bottom:0.3125rem}
.mm-step p{margin:0;font-size:0.875rem;color:#93a3ab;line-height:1.62}

/* النداء الأخير — التوسيط هنا مبرَّر: كتلة واحدة قصيرة بقرار واحد */
.mm-cta{text-align:center}
.mm-cta-in{max-width:66ch;margin:0 auto}
.mm-cta .eyebrow{justify-content:center}
.mm-cta h2{font-size:var(--t-h1);letter-spacing:var(--tr-h1);line-height:var(--ld-h1);
  margin-bottom:var(--s4);text-wrap:balance}
.mm-cta p{margin:0 auto var(--s6);font-size:1.03125rem}
.mm-cta .button.ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.mm-cta .button.ghost::before{background:#fff}
.mm-cta .button.ghost:hover{color:var(--iron);border-color:#fff}


/* ── ١١. بطاقة المنتج ───────────────────────────────────────────
   البطاقة سطح واحد يرتفع، لا مستطيل بحدّ. الصورة تكبر داخل إطارها،
   والصورة الثانية — إن وُجدت فعلاً على القرص — تحلّ محلّها بتلاشٍ. */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(0.875rem,1.6vw,1.5rem)}
/* سُلّم الأعمدة يُكتب هنا لا في قسم الاستجابة العام: هذه القاعدة أُضيفت
   بعد كتل ‎@media‎ القديمة وتخصيصها مساوٍ لها، فكانت تفوز عليها جميعاً
   وتُبقي أربعة أعمدة على كل مقاس — على شاشة ٣٧٥px صار العمود ‎73px‎،
   أي بطاقةٌ أضيق من صورتها: الاسم والسعر وزرّ الإضافة بعرض صفر.
   بقاء السلّم ملاصقاً لقاعدته يمنع تكرار العطل. */
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
/* عمودان يبقيان على الهاتف: بطاقتان متجاورتان تُقارَنان بنظرة واحدة،
   والعمود الواحد يعرض منتجاً واحداً في كل طيّة فيطول التصفّح بلا داعٍ.
   مقاسات البطاقة الداخلية تُضبَط في قسم ١٨ لتتّسع لعمودٍ بعرض ‎161px‎. */
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}}
/* ── بطاقة المنتج: الصورة أولاً ──
   على نهج متجر BiotechUSA: لا إطار ولا خلفيّة ولا ظلّ حول البطاقة.
   الشكل الوحيد بلاطةٌ رماديّة باردة، والمنتج داخلها بحجمٍ ثابت — صور
   ‎media/cards‎ مقصوصة الهوامش مسبقاً فلا يبدو منتجٌ صغيراً بجوار آخر.
   زرّ الإضافة دائرةٌ في زاوية البلاطة السفلى. تحتها: شعار العلامة ·
   الفئة، ثم الاسم في سطرين، ثم السعر.
   البطاقة «حاوية» (container-type) فيُحسب موضع الزرّ من عرضها:
   ارتفاع البلاطة = العرض × 25/16 (16:25). التحويم لا يحرّك البطاقة ولا يغيّر
   مقاسها — الصورة وحدها تكبر داخل بلاطتها. */
.card{--tile:#e5ebf3;--tile-h:calc(100cqw * 25 / 16);--add:2.875rem;--add-in:0.75rem;
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;
  position:relative;display:flex;flex-direction:column;container-type:inline-size}
.card:hover{transform:none;box-shadow:none;border-color:transparent}
.grid,.mm-ed{row-gap:clamp(1.625rem,2.6vw,2.5rem)}
/* غير المتاح في أودو لا يُعرض في أيّ قائمة — الوسم ساكن في الصفحة
   (data-stock) فلا يعتمد الإخفاء على تشغيل الجافاسكربت ولا يومض. */
.card[data-stock="out"],.card[hidden]{display:none!important}
/* الشارة بلون الحديد لا بالأحمر الصارخ. الأحمر يبقى للندرة والنفاد
   وحدهما، فيحتفظ بمعناه حين يظهر. */
.card-badge{top:0.875rem;inset-inline-start:0.875rem;background:var(--iron);font-size:0.6875rem;
  font-weight:600;letter-spacing:.01em;padding:0.375rem 0.8125rem;border-radius:var(--sharp);
  box-shadow:0 0.1875rem 0.75rem rgba(20,24,27,.24);z-index:3}

.card-img{position:relative;display:block;padding:0;background:var(--tile);
  border-radius:var(--sharp);overflow:hidden;aspect-ratio:16/25;isolation:isolate}
.card-img:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.1875rem}
.card-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;
  mix-blend-mode:multiply;padding:0;
  transition:transform 700ms var(--ease),opacity var(--d) var(--ease)}
/* الصورة الأصلية تبقى عند التحويم — لا تبديل إلى صورة ثانية:
   الزبون يتعرّف المنتج بصورته الأولى، وتبديلها يربكه أكثر مما يفيده. */
@media(hover:hover){.card:hover .card-img img{transform:scale(1.04)}}

/* النصوص تحت الصورة بتباينٍ كامل (طلب المالك: «أوضح»): الفئة بلون
   الحبر الثاني لا الباهت، والعلامة والاسم بالكحليّ الداكن. */
.card-body{padding:0.875rem 0.125rem 0;display:flex;flex-direction:column;gap:0.4375rem;flex:1}
/* العلامة ثم الفئة في سطر واحد — لا نقطة وسطى بينهما بل فاصل مرسوم */
.card-cat{font-size:0.875rem;color:var(--ink-2);letter-spacing:.005em;font-weight:500;line-height:1.3;
  display:flex;align-items:center;gap:0.5625rem;flex-wrap:wrap;min-height:1.5rem}
.card-cat .card-brand{color:var(--iron);font-weight:650;font-family:var(--fn);font-size:0.875rem;
  transition:color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease)}
.card-cat .card-brand:hover{color:var(--volt)}
.card-cat .card-brand+*::before{content:'';display:inline-block;width:0.25rem;height:0.25rem;
  border-radius:50%;background:#9aa3bb;margin-inline-end:0.5625rem;vertical-align:middle}
/* ── شعارات العلامات ──
   الشعار بألوانه الأصلية (طلب المالك، 2026-09-16 — كان قناعاً كحليّاً).
   المقاسات متوازنة بصرياً لا بارتفاعٍ واحد — الشعار العريض أقصر
   والمتراصّ أطول — وكلٌّ بنسبة ملفّه تماماً فلا يتشوّه. نصّ الرابط
   يبقى (بحجم صفر) فيقرؤه قارئ الشاشة. العلامات بلا ملفّ شعار تبقى
   نصّاً بالخطّ واللون نفسيهما. */
/* ‎--logo-w/-h‎ بنسبة الرسم الفعليّ داخل الملفّ. ملفّ Scitec فيه هامش
   ‎16%‎ أعلى وأسفل، فيُقصّ بـ ‎--logo-fit: 100% auto‎ (عرضٌ كامل والزائد
   رأسياً خارج الصندوق). */
.card[data-brand="BiotechUSA"]{--logo:url(../media/brands/biotechusa.svg);--logo-w:5.25rem;--logo-h:0.798125rem}
.card[data-brand="Scitec Nutrition"]{--logo:url(../media/brands/scitec.svg);--logo-w:3.75rem;--logo-h:1.020625rem;--logo-fit:100% auto}
.card[data-brand="GASP" i]{--logo:url(../media/brands/gasp.svg);--logo-w:4.5rem;--logo-h:0.870625rem}
.card[data-brand="Gorilla Wear"]{--logo:url(../media/brands/gorillawear.png);--logo-w:3.4375rem;--logo-h:1.264375rem}
.card:is([data-brand="BiotechUSA"],[data-brand="Scitec Nutrition"],[data-brand="GASP" i],[data-brand="Gorilla Wear"]) .card-brand{
  display:block;width:var(--logo-w);height:var(--logo-h);
  font-size:0;line-height:0;color:transparent;
  /* الشعار بألوانه الأصلية (طلب المالك) — صورة لا قناع */
  background:var(--logo) center/var(--logo-fit,contain) no-repeat;
  transition:opacity var(--d-fast) var(--ease)}
/* سطرٌ واحد دائماً: العلامة لا تنكمش، والفئة تُختصر بنقاط إن ضاق
   العرض — التفافها كان يُنزل الاسم في بطاقةٍ دون جارتها. */
.card-cat{flex-wrap:nowrap}
.card-cat .card-brand{flex:none;white-space:nowrap}
.card-cat .card-brand+*,.card-cat>.card-catlink:only-child,.card-cat>span:only-child{min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.card:is([data-brand="BiotechUSA"],[data-brand="Scitec Nutrition"],[data-brand="GASP" i],[data-brand="Gorilla Wear"]) .card-brand:hover{
  opacity:.72}
.card-brand:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.1875rem;border-radius:var(--sharp)}
/* الفئة رابطٌ إلى قسمها: باللون نفسه، ويُظهر نفسه عند التحويم */
.card-catlink{color:inherit;text-decoration:none;text-underline-offset:0.1875rem;transition:color var(--d-fast) var(--ease)}
.card-catlink:hover{color:var(--volt);text-decoration:underline}
.card-catlink:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.125rem;border-radius:var(--sharp)}
.card-name{font-size:1.125rem;font-weight:600;line-height:1.38;letter-spacing:-.004em;color:var(--ink);
  min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.card-name a{background-image:linear-gradient(var(--volt),var(--volt));
  background-repeat:no-repeat;background-size:0 0.09375rem;background-position:var(--mm-bg-pos,0 100%);
  transition:background-size var(--d) var(--ease),color var(--d-fast) var(--ease)}
html[dir=rtl] .card-name a{--mm-bg-pos:100% 100%}
.card-name a:hover{color:var(--volt);background-size:100% 0.09375rem}
/* الوصف يكرّر العنوان والفئة حرفياً — إخفاؤه يُرجع البطاقة إلى معلومتها */
.card-blurb{display:none}
.card-variant{height:2.375rem;border-radius:var(--sharp);font-size:0.875rem;padding:0 0.625rem;margin-top:0.125rem;color:var(--ink);
  border-color:var(--line);background:#fff;cursor:pointer;
  transition:border-color var(--d-fast) var(--ease)}
.card-variant:hover{border-color:var(--line-2)}
.card-variant:focus{outline:0;border-color:var(--iron);background:#fff}
/* لا قائمة نكهة على البطاقة (طلب المالك). تبقى في الوسم مصدراً احتياطياً
   لو لم تُحمَّل لقطة المخزون؛ الاختيار نفسه في صفحة المنتج — زرّ + في
   بطاقةٍ بعدّة خيارات يفتحها (app.js ‏markPick). */
.card .card-variant{display:none}
/* السعر في آخر البطاقة دائماً فتصطفّ الأسعار أفقياً في الصفّ، مع نكهة
   أو بدونها */
.card-foot{padding-top:0.25rem;margin-top:auto;border-top:0}
.card-price{font-size:1.4375rem;letter-spacing:-.018em;color:var(--ink)}
.card-price small{font-size:0.84375rem;font-weight:600;color:var(--ink-2);
  font-family:var(--f);letter-spacing:0}
/* كل ما يظهر في القائمة متوفّر (غير المتوفّر مخفيّ)، فالكلمة لا تضيف
   معلومة. تبقى في الوسم لأنّ العرض السريع يقرؤها. */
.card .in-stock{display:none}
.in-stock,.out-stock{font-size:0.75rem;font-weight:600;display:inline-flex;align-items:center;gap:0.3125rem}
.in-stock{color:#0a8f7a}
.in-stock::before{content:'';width:0.375rem;height:0.375rem;border-radius:50%;background:currentColor}
/* زرّ الإضافة أيقونة ثابتة الحجم: لا كلمة تظهر ولا عرض يتغيّر عند
   التحويم — الغرض مكتوب في aria-label والتلميح، والشكل لا يقفز. */
.card-add{width:3rem;height:3rem;border-radius:var(--sharp);background:var(--iron);
  box-shadow:none;overflow:hidden;gap:0;display:inline-flex;align-items:center;
  justify-content:center;padding:0;flex:none;
  transition:background var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.card-add svg{flex:none;transition:transform var(--d) var(--ease-spring)}
.card-add:hover:not(:disabled){background:var(--volt);transform:none}
.card-add:active:not(:disabled){transform:scale(.93);transition-duration:90ms}
.card-add:disabled{background:var(--line-2);color:#fff}
/* ارتداد قصير يؤكّد وصول الصنف إلى السلّة */
.card-add.mm-done{background:#0a8f7a!important}
.card-add.mm-done svg{transform:rotate(90deg) scale(1.1)}
/* داخل البطاقة: دائرةٌ في زاوية البلاطة السفلى (نهاية السطر — يمين في
   الإنجليزية، يسار في العربية). ‎::after‎ يوسّع مساحة اللمس بلا تكبير
   الدائرة نفسها. */
.card .card-add{position:absolute;z-index:5;
  top:calc(var(--tile-h) - var(--add) - var(--add-in));inset-inline-end:var(--add-in);
  width:var(--add);height:var(--add);border-radius:50%;overflow:visible;
  background:var(--volt);color:#fff;box-shadow:0 0.375rem 1rem -0.375rem rgba(13,156,248,.6)}
.card .card-add::after{content:'';position:absolute;inset:-0.375rem;border-radius:50%}
.card .card-add svg{width:1.375rem;height:1.375rem}
/* الزرّ بالأزرق الفاتح (لون الفعل في الموقع — طلب المالك)؛ التحويم
   ينزل درجةً إلى الأزرق الملكيّ فيبقى الأثر مرئياً. */
.card .card-add:hover:not(:disabled){background:var(--royal);box-shadow:0 0.5rem 1.125rem -0.375rem rgba(9,88,169,.55)}

/* ── ١٢. شبكة تحريرية ───────────────────────────────────────────
   بطاقة واحدة تقود والبقيّة تتبع — أفضل من أربع بطاقات متطابقة. */
.mm-ed{display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,auto);gap:clamp(0.875rem,1.6vw,1.5rem)}
.mm-ed>.card:first-child{grid-column:span 2;grid-row:span 2}
.mm-ed>.card:first-child .card-img{aspect-ratio:auto;flex:1 1 auto;height:auto;min-height:18.125rem}
.mm-ed>.card:first-child .card-name{font-size:clamp(1.125rem,1.5vw,1.375rem);min-height:0}
.mm-ed>.card:first-child .card-price{font-size:1.625rem}
.mm-ed>.card:first-child .card-body{padding:1rem 0.125rem 0;flex:none}
/* بلاطة البطاقة المميّزة لا تتبع نسبة 4/5، فزرّها يجلس في سطر السعر */
.mm-ed>.card:first-child .card-add{--add:3.25rem;position:relative;top:auto;inset-inline-end:auto}

}

/* ── ١٤. صفحة المنتج ────────────────────────────────────────────
   لوحة الشراء تثبت بينما تمرّ الصور — القرار يبقى في المتناول
   طوال التصفّح. */
.pdp{gap:clamp(1.75rem,4vw,3.75rem);padding:var(--s6) 0 var(--s7);align-items:start}
/* ── لوحة صور المنتج ──
   صور المنتجات كلّها ملتقطة على أبيض. الضرب (multiply) يُذيب الأبيض
   في ما تحته — الأبيض × أي لون = اللون نفسه — فتقف العبوة وحدها.

   لكنّ الضرب يمزج العنصر بـ«ما تحته داخل سياق التكديس نفسه»، و
   .pdp-media لاصقة (position:sticky) فهي تُنشئ سياقاً مستقلاً. وكانت
   بلا خلفية، فلم يجد الضربُ ما يمزج فيه وبقي الأبيض أبيض. الحلّ أن
   تحمل الحاويةُ اللوحةَ (اللون والإطار والحشوة) لا الصورةُ: عندها
   تصير خلفية الحاوية هي ما يُضرب فيه الأبيض فيختفي. */
.pdp-media{position:sticky;top:6.5rem;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--sharp);padding:clamp(1rem,2.2vw,1.75rem)}
.pdp-media>img{width:100%;border:0;border-radius:var(--sharp);background:transparent;padding:0;
  aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;
  transition:opacity var(--d) var(--ease)}
.pdp-media img.mm-swap{opacity:0}
.pdp-thumbs{gap:0.625rem;margin-top:0.75rem;overflow-x:auto;padding-bottom:0.25rem;
  scroll-snap-type:x proximity}
.pdp-thumbs img{width:4.875rem;height:4.875rem;flex:none;object-fit:contain;padding:0.4375rem;
  background:transparent;border-radius:var(--sharp);border:0.09375rem solid var(--line);
  scroll-snap-align:start;mix-blend-mode:multiply;
  transition:border-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease),
             opacity var(--d-fast) var(--ease);opacity:.62}
.pdp-thumbs img:hover{opacity:1;transform:translateY(-0.125rem)}
.pdp-thumbs img.on{border-color:var(--iron);opacity:1}
.pdp-body{min-width:0}
.pdp h1{font-size:clamp(1.5625rem,3vw,2.375rem);letter-spacing:-.025em;line-height:1.14;
  margin-bottom:0.75rem;text-wrap:balance}
.pdp .price b{font-size:clamp(1.875rem,3.4vw,2.625rem);transition:opacity var(--d-fast) var(--ease)}
.pdp .price b.mm-flip{opacity:.25}
.opt-chips button{border-radius:var(--sharp);padding:0.625rem 1.0625rem;
  transition:border-color var(--d-fast) var(--ease),background var(--d-fast) var(--ease),
             color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.opt-chips button:hover:not([disabled]){border-color:var(--iron);transform:translateY(-1px)}
.opt-chips button:active:not([disabled]){transform:scale(.96)}
.opt-chips button.on{border-color:var(--volt);background:var(--volt-soft);color:var(--volt-deep);
  box-shadow:0 0 0 0.1875rem rgba(12,156,235,.13)}
.qty-box{border-radius:var(--sharp);border-color:var(--line-2)}
.qty-box button{transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease),
  transform var(--d-fast) var(--ease)}
.qty-box button:hover{background:var(--bg-2);color:var(--iron)}
.qty-box button:active{transform:scale(.88);background:var(--line)}
.qty-box input{font-family:var(--fn);font-variant-numeric:tabular-nums lining-nums;
  transition:transform var(--d) var(--ease-spring)}
.qty-box input.mm-tick{transform:scale(1.22)}
.buy .button{height:3.375rem}
.pdp-usp div{border-radius:var(--sharp);transition:background var(--d) var(--ease)}
.pdp-usp div:hover{background:var(--bg-4)}
.pdp-desc h2{font-size:clamp(1.1875rem,1.8vw,1.4375rem);letter-spacing:-.015em}
/* نصف القطر كان فيزيائياً فانقلب في العربية وبرز ركنٌ خارج الصندوق */
.pdp-note{border-radius:var(--sharp);border-inline-start:0.25rem solid var(--volt);background:var(--bg-3)}

/* المنتجات المرتبطة — تُبنى من فهرس مولَّد، ولا تظهر إن لم تُوجد */
.mm-rel{border-top:1px solid var(--line);padding:var(--sec-y) 0 var(--s8)}
.mm-rel .grid{grid-template-columns:repeat(4,1fr)}

/* ── ١٥. الأقسام القائمة، مضبوطة على النظام الجديد ─────────────── */
.brand-strip{border-bottom:1px solid var(--line);background:var(--bg)}
.brand-strip .wrap{padding-block:1.75rem}
/* القسم الذي يلي شريط العلامات يبدأ أقرب: الشريط نفسه فاصلٌ بصريّ
   كافٍ، فحشوة قسمٍ كاملة فوقه تترك فجوةً فارغة بلا سبب. */
.brand-strip + .sec{padding-top:clamp(2.25rem,4vw,4rem)}
.brand-strip h2{font-size:0.8125rem;letter-spacing:0;text-transform:none;color:var(--muted);
  font-weight:600}
.brand-row a{filter:none;transition:transform var(--d) var(--ease),opacity var(--d) var(--ease)}
.brand-row a:hover{transform:translateY(-0.1875rem) scale(1.04);opacity:1}

.usp{background:var(--bg-3);border-block:1px solid var(--line)}
.usp-grid{gap:clamp(1.375rem,3vw,2.25rem);padding:clamp(2.125rem,4vw,3.25rem) 0}
.usp-item{transition:transform var(--d) var(--ease)}
.usp-item:hover{transform:translateY(-0.1875rem)}
.usp-item svg{color:var(--volt)}
.usp-item h4{font-size:1rem;letter-spacing:-.01em}

.story{background:var(--iron)}
.story .lead{color:var(--volt)}
.story p{color:#aebcc4}
.stats{background:var(--iron-3);border-radius:var(--sharp)}
.stat{background:var(--iron-2);transition:background var(--d) var(--ease)}
.stat:hover{background:#242c32}
.stat b{font-size:clamp(1.625rem,3vw,2.25rem);letter-spacing:-.02em}
.stat span{color:#93a3ab}

.ath{border-radius:var(--sharp);background:var(--bg-2);
  transition:transform var(--d) var(--ease),background var(--d) var(--ease),
             box-shadow var(--d) var(--ease)}
.ath:hover{transform:translateY(-0.3125rem);background:#fff;box-shadow:var(--sh-2)}
.ath .av-img{transition:transform var(--d-slow) var(--ease)}
.ath:hover .av-img{transform:scale(1.07)}

.prog,.art,.bcard{transition:transform var(--d) var(--ease),box-shadow var(--d) var(--ease),
  border-color var(--d) var(--ease)}
.prog:hover,.art:hover{transform:translateY(-0.3125rem);box-shadow:var(--sh-2)}
.bcard:hover{transform:translateY(-0.3125rem);box-shadow:var(--sh-2)}
.bcard img{transition:transform 620ms var(--ease)}
.bcard:hover img{transform:scale(1.05)}
.bcard a{overflow:hidden}

.news{background:var(--bg-2)}
.news-form input{transition:border-color var(--d-fast) var(--ease),
  box-shadow var(--d-fast) var(--ease)}
.news-form input:focus{border-color:var(--iron);box-shadow:0 0 0 0.25rem rgba(20,24,27,.07)}

/* ── درج السلّة ──
   لوحٌ بلون أرضية الموقع لا بأبيض ناصع، وتذييله أغمق درجةً ليفصل
   المجموع عن قائمة الأصناف. وصور الأصناف تُضرب في اللوح فيذوب الأبيض
   المحيط بها — المعالجة نفسها في بطاقات المنتجات وصفحة المنتج. */
.cart-ft{background:var(--bg-2)}
.ci img{background:transparent;mix-blend-mode:multiply}
.cart-empty b{color:var(--ink)}

/* ── ١٦. التذييل ───────────────────────────────────────────────── */
.ftr{background:var(--iron);color:#9fadb5;padding-top:var(--s8)}
/* عمود العلامة: الشعار أبيض والشعار اللفظي تحته — المتجر يوقّع صفحته */
.ftr-grid{grid-template-columns:1.35fr repeat(3,1fr) 1.4fr}
.f-brand .logo-img{background-color:#fff;height:3rem;width:calc(3rem * 1417 / 425);margin-bottom:1rem}
.f-brand p{font-size:0.84375rem;line-height:1.7;color:#aeb8d8;max-width:30ch;margin:0}
@media(max-width:960px){.ftr-grid{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{color:#fff;font-size:0.90625rem;letter-spacing:-.01em;margin-bottom:1rem}
.ftr li a{padding:0.375rem 0;font-size:0.875rem;position:relative;display:inline-block;
  transition:color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.ftr li a:hover{color:#fff;transform:translateX(calc(var(--mm-dir) * 0.25rem))}
.ftr .news-form input{background:var(--iron-2);border-color:var(--iron-3);color:#fff}
.ftr .news-form input::placeholder{color:#6d7d86}
.ftr .news-form input:focus{border-color:var(--volt);box-shadow:0 0 0 0.25rem rgba(12,156,235,.16)}
.socials a{background:var(--iron-2);
  transition:background var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.socials a:hover{background:var(--volt);transform:translateY(-0.1875rem)}
.ftr-bar{border-top:1px solid var(--iron-3)}

/* ── ١٧. الانتقال بين الصفحات ──────────────────────────────────
   تلاشٍ قصير جداً عند المغادرة، وظهور عند الوصول. أي أطول من هذا
   يُحسّ تأخيراً لا صقلاً. */
@media(prefers-reduced-motion:no-preference){
  body{animation:mm-page-in 380ms var(--ease) both}
  body.mm-leaving{opacity:0;transition:opacity 190ms var(--ease-io)}
}
@keyframes mm-page-in{from{opacity:0}to{opacity:1}}

/* ── ١٨. الاستجابة ─────────────────────────────────────────────
   تخطيطات فعلية لكل مقاس، لا انكماش للتخطيط المكتبي. */
@media(max-width:1180px){
  .mm-ed{grid-template-columns:repeat(3,1fr)}
  .mm-ed>.card:first-child{grid-column:span 3;grid-row:span 1}
  .mm-ed>.card:first-child .card-img{min-height:0;aspect-ratio:16/9}
  .mm-rel .grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  .mm-hero-in{grid-template-columns:1fr;min-height:0;gap:var(--s6);
    padding-block:clamp(2.5rem,7vw,4rem)}
  .mm-hero-art{order:-1;min-height:0}
  /* المسرح يتقلّص كوحدة واحدة؛ نسب العبوات داخله محفوظة */
  .mm-hero-shot{height:clamp(15.625rem,58vw,22.5rem)}
  .mm-hero h1{max-width:20ch}
  .mm-hero-badge.b1{inset-inline-start:-0.25rem;top:4%}
  .mm-hero-badge.b2{inset-inline-end:-0.25rem;bottom:2%}
  .mm-hero-proof{gap:var(--s4) var(--s5);margin-top:var(--s5)}
  .mm-band-grid{grid-template-columns:1fr;gap:var(--s6)}
  /* الرفّ يصير شريطاً أفقياً بالسحب — أصدق على اللمس من خمسة أعمدة */
  .mm-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:0.75rem;padding-bottom:0.625rem;margin-inline:-1.25rem;padding-inline:1.25rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mm-rail::-webkit-scrollbar{display:none}
  .mm-rail .goal{flex:0 0 clamp(12.5rem,58vw,16.25rem);height:clamp(18.75rem,64vw,23.75rem);
    scroll-snap-align:start}
  /* على اللمس لا تحويم: الوصف ظاهر دائماً */
  .mm-rail .goal p{opacity:1;transform:none;max-height:6em;margin-top:0.5rem}
}
@media(max-width:820px){
  .mm-ed{grid-template-columns:repeat(2,1fr)}
  .mm-ed>.card:first-child{grid-column:span 2}
  .mm-rel .grid{grid-template-columns:repeat(2,1fr)}
  .pdp-media{position:static}
  .mm-hero-proof div{font-size:0.8125rem}
}
@media(max-width:560px){
  /* عمودان كشبكة المنتجات العامّة — البطاقات نفسها في الحالتين */
  .mm-ed,.mm-rel .grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}
  /* البطاقة الأولى تفقد امتيازها في عمودين: لا مكان لبطاقةٍ مميّزة
     بعرض ‎161px‎. وإلغاء ‎height:100%‎ شرطٌ لا تجميل — بدونه تتمدّد
     صورتها لتملأ البطاقة (‎421px‎ مقابل ‎160px‎ لجارتها) فيميل الصفّ. */
  .mm-ed>.card:first-child{grid-column:span 1}
  .mm-ed>.card:first-child .card-img{aspect-ratio:16/25;flex:none;height:auto;min-height:0}
  .mm-ed>.card:first-child .card-name{font-size:0.875rem;min-height:2.8em}
  .mm-ed>.card:first-child .card-price{font-size:1.0625rem}
  .mm-ed>.card:first-child .card-body{padding:0.625rem 1px 0;flex:1}
  .mm-ed>.card:first-child .card-add{--add:2.375rem;position:absolute;
    top:calc(var(--tile-h) - var(--add) - var(--add-in));inset-inline-end:var(--add-in)}
  .sec-head{align-items:flex-start;flex-direction:column;gap:var(--s3)}
  .mm-figs{grid-template-columns:1fr}
  .mm-hero-cta{flex-direction:column;align-items:stretch}
  .mm-hero-cta .button{width:100%}
  /* لا بدّ من مطابقة تخصيص قاعدة سطح المكتب (.mm-hero-art .mm-hero-badge)
     وإلّا لم يسقط الإظهار. تبقى بطاقة السعر — معلومة يريدها الزائر —
     وتسقط الثانية لضيق الشاشة. */
  .mm-hero-art .mm-hero-badge.b2{display:none}
  /* ترتفع فوق سطر التنبيه في أسفل المسرح بدل أن تجلس عليه */
  .mm-hero-art .mm-hero-badge.b1{inset-inline-start:0.125rem;top:auto;bottom:3.375rem;max-width:62%}
  .mm-hero-note{margin-top:0.875rem;font-size:0.71875rem}
  /* الشريط العلوي كان يفيض عن ارتفاعه الثابت حين يلتفّ نصّه */
  .util-in{height:auto;min-height:2.375rem;padding-block:0.4375rem;gap:0.625rem}
  .util-links{display:none}
  .buy{flex-wrap:wrap}
  .buy .button{flex:1 1 100%}
}
/* الهاتف: بطاقةٌ رأسية في شبكة عمودين.
   العمود ‎(335−12)/2 = 161px‎ والحشوة تترك ‎137px‎ للمحتوى — وهو ما
   يحكم كل مقاسٍ تحت: السعر ‎23px‎ وزرّ الإضافة ‎48px‎ لا يتجاوران في
   هذا العرض، فينزل الاثنان درجةً حتى يقعا في سطرٍ واحد. */
@media(max-width:560px){
  /* زرٌّ أصغر وأقرب إلى الزاوية على بلاطةٍ عرضها ‎161px‎؛ مساحة اللمس
     تبقى فوق ‎44px‎ بفضل ‎::after‎. */
  .card{--add:2.375rem;--add-in:0.5rem;flex-direction:column;align-items:stretch}
  .card-img{width:auto;flex:none;border-radius:var(--sharp)}
  .card-img img{padding:0}
  .card-body{padding:0.625rem 1px 0;flex:1;min-width:0;gap:0.3125rem}
  .card-cat{font-size:0.75rem;letter-spacing:.01em;gap:0.375rem;min-height:1.125rem}
  .card-cat .card-brand{font-size:0.75rem}
  .card-cat .card-brand+*::before{margin-inline-end:0.375rem}
  .card:is([data-brand="BiotechUSA"],[data-brand="Scitec Nutrition"],[data-brand="GASP" i],[data-brand="Gorilla Wear"]) .card-brand{
    width:calc(var(--logo-w) * .76);height:calc(var(--logo-h) * .76)}
  /* سطران بالضبط (القصّ في القاعدة العامّة): الاسم الطويل لا يُنزل
     قائمة النكهة في بطاقةٍ دون جارتها. */
  .card-name{font-size:0.9375rem;line-height:1.38;min-height:2.76em}
  .card-variant{height:2.125rem;font-size:0.8125rem;border-radius:var(--sharp);padding:0 0.5rem}
  .card-foot{padding-top:0.125rem;gap:0.5rem}
  .card-foot>div{min-width:0}
  .card-price{font-size:1.125rem;letter-spacing:-.02em}
  .card-price small{font-size:0.71875rem}
  .card-badge{font-size:0.59375rem;padding:0.125rem 0.5rem;top:0.4375rem;inset-inline-start:0.4375rem}
  .grid,.mm-ed,.mm-rel .grid{row-gap:1.375rem}
}
/* الشاشات الضيّقة جداً: العمود يهبط إلى ‎134px‎ */
@media(max-width:360px){
  .card{--add:2.125rem}
  .card-price{font-size:0.9375rem}
  .card-name{font-size:0.8125rem}
}

/* ── ١٩. شريط التمرير ─────────────────────────────────────────────
   عنصر واجهة صغير يُصمَّم كبقيّة الموقع لا يُترك للمتصفّح.

   الفكرة: المقبض أسطوانةٌ بلون الشعار تحمل تحزيزاً أفقياً دقيقاً —
   وهو تحزيز غطاء عبوة المكمّل نفسه، الجزء الذي يُمسَك ليُلفّ. والمقبض
   هنا أيضاً هو ما تُمسكه لتسحب. فالنقش ليس زينةً مستعارة من المنتج،
   بل الوظيفة ذاتها: سطحٌ يُقبَض عليه.

   ثلاثة تدرّجات مركّبة تبني هذا بلا سطر جافاسكربت واحد — يرسمها
   المتصفّح مرّة ولا تكلّف شيئاً أثناء التمرير:
     ١) تظليل جانبيّ يحوّل الشريط المسطّح إلى أسطوانة.
     ٢) إخفات التحزيز عند الطرفين حتى لا يُقرأ باركود.
     ٣) التحزيز نفسه.

   والحالات تحكي فعل المستخدم: عند الاقتراب يثخن المقبض (يضيق حدّه
   الشفّاف)، وعند الإمساك يلتقط ضوءَه الأزرقُ الذي يحمل كل فعل في
   الموقع. */
:root{
  --sb-w:1.125rem;
  --sb-pad:0.1875rem;   /* 18 − 2×3 = مقبض بعرض 12px يغطّي العلامات تماماً وهو يمرّ */
  --sb-thumb:27 44 77;      /* ‎--slate كقنوات، لتُشتقّ منها الشفافية */
  --sb-thumb-hi:14 26 47;   /* ‎--iron */
  --sb-volt:12 156 235;     /* ‎--volt */
}

/* على اللمس لا مقبض يُمسَك أصلاً، وأشرطة الجهاز العائمة أفضل — فيبقى
   كل ما دون هذا للفأرة وحدها. */
@media (hover:hover) and (pointer:fine){

  /* حجز مكان الشريط: فتح السلّة أو العرض السريع يقفل تمرير الصفحة،
     وبلا هذا الحجز يقفز المحتوى كلّه عند كل فتح وإغلاق.

     والحجز داخل هذا الاستعلام لا خارجه: الشريط المرسوم هنا وحده،
     وخارجه كان الحجز يقتطع عرضاً بلا مقابل. والأسوأ أنّه يوسّع
     «الكتلة الحاوية الابتدائية» عن العرض المرئي، فكل عنصر ثابت
     مقيس بـ‎100%‎ أو ‎inset:0‎ — غطاء السلّة ودرجها — يخرج ٦px عن
     الشاشة ويفتح تمريراً أفقياً على الجوّال. */
  html{scrollbar-gutter:stable}

  /* فايرفوكس لا يتيح نقشاً، فيأخذ أقرب صورة ممكنة من التصميم.
     والشرط ضروريّ لا تجميلي: كروم إن وجد scrollbar-width أو
     scrollbar-color أهمل قواعد ::-webkit-scrollbar كلّها وعاد إلى
     شريطه القياسي — أي أنّ كتابة البديل بلا تسييج تُلغي التصميم
     الأصلي في المتصفّح الذي صُمِّم له. */
  @supports not selector(::-webkit-scrollbar){
    html{scrollbar-width:thin;scrollbar-color:rgb(var(--sb-thumb)) var(--bg)}
    .cart-body,.mm-nav-body,.mega,.filters,.pdp-thumbs,.wk-scroll{
      scrollbar-width:thin;scrollbar-color:rgb(var(--sb-thumb)/.55) transparent}
  }

  ::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w)}
  ::-webkit-scrollbar-button{display:none}
  ::-webkit-scrollbar-corner{background:transparent}

  /* المجرى أرضية الصفحة نفسها، وفيه سكّة بعرض شعرة في منتصفه، وعلى
     السكّة ثلاث علامات: عبوة بروتين في الأعلى، كرياتين في المنتصف،
     وبروتين في الأسفل. العلامات مقصوصة من صور المنتجات الحقيقية
     وعتامتها ٦٠٪ مخبوزة داخل الملف — طبقة الخلفية الواحدة لا تُعتَّم
     في CSS. عرضها 11px دون عرض المقبض (12px) فيغطّيها تماماً وهو
     يمرّ عليها، فلا تظهر حوافّ من تحته. */
  ::-webkit-scrollbar-track{
    background-color:var(--bg);
    background-image:
      url(../media/deco/sb-protein.png),
      url(../media/deco/sb-creatine.png),
      url(../media/deco/sb-protein.png),
      linear-gradient(to right,
        transparent calc(50% - .5px),var(--line) calc(50% - .5px),
        var(--line) calc(50% + .5px),transparent calc(50% + .5px));
    background-repeat:no-repeat,no-repeat,no-repeat,repeat-y;
    background-position:center 1.25rem,center 50%,center calc(100% - 1.25rem),center top;
    background-size:0.6875rem auto,0.6875rem auto,0.6875rem auto,100% 100%}

  ::-webkit-scrollbar-thumb{
    min-height:3.25rem;                       /* لا يصير نقطةً في صفحةٍ طويلة */
    border:var(--sb-pad) solid transparent;
    background-clip:padding-box;           /* الحدّ الشفّاف يطفي المقبض داخل مجراه */
    border-radius:var(--sharp);
    background-color:rgb(var(--sb-thumb));
    background-image:
      linear-gradient(to right,rgba(255,255,255,.17) 0,
        rgba(255,255,255,0) 46%,rgba(0,0,0,.24) 100%),
      linear-gradient(to bottom,rgb(var(--sb-thumb)) 0,
        rgb(var(--sb-thumb)/0) 26%,rgb(var(--sb-thumb)/0) 74%,
        rgb(var(--sb-thumb)) 100%),
      repeating-linear-gradient(to bottom,rgba(255,255,255,.22) 0 1px,
        rgba(255,255,255,0) 1px 0.3125rem)}

  ::-webkit-scrollbar-thumb:hover{
    border-width:0.125rem;
    background-color:rgb(var(--sb-thumb-hi))}

  ::-webkit-scrollbar-thumb:active{
    border-width:0.125rem;
    background-color:rgb(var(--sb-thumb-hi));
    background-image:
      linear-gradient(to right,rgb(var(--sb-volt)/.72) 0,
        rgb(var(--sb-volt)/.14) 38%,rgba(255,255,255,0) 60%,rgba(0,0,0,.28) 100%),
      linear-gradient(to bottom,rgb(var(--sb-thumb-hi)) 0,
        rgb(var(--sb-thumb-hi)/0) 26%,rgb(var(--sb-thumb-hi)/0) 74%,
        rgb(var(--sb-thumb-hi)) 100%),
      repeating-linear-gradient(to bottom,rgba(255,255,255,.26) 0 1px,
        rgba(255,255,255,0) 1px 0.3125rem)}

  /* الأسطح الداخلية تتكلّم اللغة نفسها بمقاس أصغر وبلا تحزيز — النقش
     تحت هذا العرض يصير ضجيجاً لا ملمساً. */
  .cart-body::-webkit-scrollbar,.mm-nav-body::-webkit-scrollbar,
  .mega::-webkit-scrollbar,
  .pdp-thumbs::-webkit-scrollbar{width:0.5rem;height:0.5rem}
  .cart-body::-webkit-scrollbar-track,.mm-nav-body::-webkit-scrollbar-track,
  .mega::-webkit-scrollbar-track,
  .pdp-thumbs::-webkit-scrollbar-track{background:transparent;background-image:none}
  .cart-body::-webkit-scrollbar-thumb,.mm-nav-body::-webkit-scrollbar-thumb,
  .mega::-webkit-scrollbar-thumb,
  .pdp-thumbs::-webkit-scrollbar-thumb{
    min-height:1.875rem;border-width:0.125rem;background-image:none;
    background-color:rgb(var(--sb-thumb)/.42)}
  .cart-body::-webkit-scrollbar-thumb:hover,.mm-nav-body::-webkit-scrollbar-thumb:hover,
  .mega::-webkit-scrollbar-thumb:hover,
  .pdp-thumbs::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--sb-thumb)/.85)}
}

/* ── ٢٠. الجوّال ───────────────────────────────────────────────────
   قسمٌ واحد يجمع ما يخصّ اللمس والشاشة الضيّقة. الأصل أنّ الاستجابة
   تُكتب عند كل مكوّن (وهي كذلك في الأقسام السابقة)، لكنّ هذه القواعد
   تصحّح سلوكاً عامّاً — مقاس اللمس، وقفل التمرير، وتكبير iOS — فجمعها
   يجعلها مقروءةً ومراجَعةً دفعةً واحدة. */

/* سفاري على iOS يضخّم مقاسات النصّ حين يُقلب الجهاز أفقياً. القيمة
   ‎100%‎ تُبقي السلّم الطباعيّ كما صُمِّم. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* وميض اللمس الأزرق الافتراضي يكسر اللوحة المخفوتة عند كل ضغطة —
   يُستبدل بأثرٍ من كحليّ الموقع نفسه. */
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:rgba(27,44,77,.09)}

/* ── بطاقة مقالٍ لم تُكتب صفحته بعد ──
   عنصر ‎<a>‎ بلا ‎href‎: ليس رابطاً في نظر المتصفّح، فلا يُفتح ولا
   يستقبل تركيزاً بلوحة المفاتيح. يبقى أن نمنع مؤشّر اليد من الوعد
   بنقرةٍ لا تحدث، وأن تسكن آثار التحويم. */
.bc-dead{cursor:default}
.bc-dead:hover{transform:none}
.bcard:has(>.bc-dead):hover{transform:none;box-shadow:none}
@media(hover:hover){
  .bcard:has(>.bc-dead):hover .bc-img img{transform:none}
}

/* زرّ البحث في الرأس — مخفيّ حيث يوجد حقل البحث كاملاً */
.mm-search-btn{display:none;border:0;background:0;cursor:pointer;
  color:var(--ink);padding:0}
.mm-search-btn:active{transform:scale(.92)}

@media(max-width:820px){
  /* ١) الرأس لا ينضغط.
     ‎.hdr-in‎ صفٌّ مرن وعناصره تقبل الانكماش افتراضياً، فكان زرّ
     القائمة يهبط من ‎42px‎ إلى ‎32px‎ — دون حدّ اللمس — لأنّ مجموع
     العناصر يتجاوز العرض. تثبيتها يمنع الانضغاط، وتضييق الفجوات
     يوفّر ما يلزم للشعار. */
  .hdr-in{gap:var(--s3)}
  .hdr-actions{gap:0.125rem}
  .burger,.hdr-actions,.hdr-actions>*{flex:none}
  .logo{min-width:0;overflow:hidden}
  /* رأس الجوّال بلا قائمة ولا حقل بحث، فشريطٌ أقصر وشعارٌ أصغر من سطح
     المكتب — وما زال أكبر من الشعار القديم. */
  .hdr-in{height:4.875rem}
  .hdr.stuck .hdr-in{height:4rem}
  .hdr .logo-img{height:4.21875rem;width:calc(4.21875rem * 1417 / 425)}
  .hdr.stuck .logo-img{transform:scale(.86)}

  /* زرّ البحث يظهر حيث يختفي الحقل نفسه، لا قبل ذلك.
     (الإخفاء الأساسي مكتوب خارج الاستعلام — ‎.icon-btn‎ تجعله
     ‎display:grid‎ افتراضاً، فبلا قاعدةٍ صريحة يظهر على سطح المكتب
     بجانب حقل البحث نفسه.) */
  .mm-search-btn{display:grid}

  /* ٢) الحقول النصّية ‎16px‎ فما فوق.
     أيُّ حقلٍ دون ذلك يجعل iOS يكبّر الصفحة كلّها عند اللمس ولا
     يعيدها — فيبدو الموقع مكسوراً وهو سليم. القوائم المنسدلة
     مستثناة: iOS يفتح لها عجلة اختيار ولا يكبّر. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  textarea,
  /* الحقول المعرَّفة داخل أصناف تغلب الوسم المجرّد بالتخصيص، فتُسمّى
     صراحةً — وإلّا بقي بعضها عند ‎15px‎ (حقل ملاحظات إتمام الطلب). */
  .fld input,.fld select,.fld-p input,.fld-p textarea,.fld-p select,
  .tr-form .fld input,.search input,.news-form input,
  .mm-nav-search input,.ex-search{font-size:1rem}
}

@media(max-width:560px){
  /* شريطٌ أقصر يترك للمحتوى مساحةً أكبر على شاشةٍ قصيرة.
     الفارق بين الحالتين ‎8px‎ — داخل نطاق التثبيت (‎64/10‎) بفارقٍ
     واسع، فلا يعود الرأس إلى الاهتزاز. */
  .hdr-in{height:4.125rem;gap:var(--s2)}
  .hdr.stuck .hdr-in{height:3.625rem}
  /* ‎46px‎ طولاً؛ إن ضاق الصفّ ينكمش عرضه والقناع ‎contain‎ يحفظ النسبة */
  .hdr .logo-img{height:3.59375rem;width:calc(3.59375rem * 1417 / 425)}
  html{--mm-head:6rem}

  /* الرأس على ‎375px‎ لا يتّسع لخمسة عناصر. أيقونة «حسابي» تقود إلى
     صفحة تتبّع الطلب — وهي زرٌّ كامل بنصّه في تذييل قائمة الجوّال —
     بينما البحث لا بديل له. فتسقط الأولى ويبقى الثاني. */
  .hdr-actions a[href="track.html"]{display:none}
}

/* ٣) مقاس اللمس: ‎44px‎ حدّاً أدنى لكل ما يُضغط.
   الشرط على الإشارة لا على العرض: الفأرة دقيقة على أي عرض، والإصبع
   عريض على أي عرض. */
@media(hover:none),(pointer:coarse){
  .icon-btn{width:2.75rem;height:2.75rem}
  .burger{width:2.75rem;height:2.75rem}
  .card-add{width:2.875rem;height:2.875rem}
  .pager a{width:2.75rem;height:2.75rem}
  .qty-box button{min-width:2.875rem}
  /* أزرار الإغلاق كانت محارف نصّية بلا صندوق: ‎23‎ و‎27px‎ */
  .cart-hd button,.mm-nav-x{width:2.75rem;height:2.75rem;display:grid;place-items:center;
    padding:0;border-radius:50%}
  .cart-hd button:active,.mm-nav-x:active{background:var(--bg-2)}
  /* لا تحويم على اللمس — الردّ يأتي بالضغط */
  .card:active{scale:.988;transition:scale 90ms}   /* scale لا transform: الأخير تحرّكه صفحات القوائم مع التمرير */
  .goal:active,.bcard:active{transform:scale(.99);transition-duration:90ms}
  /* أزرارٌ صغيرة بقيت تحت ‎44px‎ (قواعد لاحقة أخصّ تغلب ما سبق): مساحة لمسٍ غير
     مرئية حولها بـ ::after — الشكل كما هو تماماً، والإصبع يصيب ‎44px‎ */
  .mm-side-x,.mm-pick-x,.ci-qty button,.ci-del{position:relative}
  .mm-side-x::after,.mm-pick-x::after,.ci-qty button::after,.card-wish::after,.ci-del::after{content:'';position:absolute}
  .mm-pick-x::after{inset:-0.5rem}
  .mm-side-x::after,.card-wish::after{inset:-0.3125rem}
  .ci-qty button::after{inset:-0.375rem}
  /* فوق «إزالة» ‎9px‎ فقط حتى زرّ −/+ ومساحته تنزل ‎6px‎: تمتدّ مساحة الإزالة ‎2px‎ لأعلى
     و‎12px‎ لأسفل — كانت ‎12px‎ لأعلى فتغطّي طرف زرّ الكمّية، ولمسةٌ عليه تحذف الصنف كلّه */
  .ci-del::after{inset:-0.125rem -0.375rem -0.75rem}
  /* زرّ إغلاق السلّة (‎40px‎ — قاعدةٌ لاحقة تغلب ‎44px‎ أعلاه) وأيقونات الرأس على الهاتف (‎42px‎):
     ‎2px‎ غير مرئية حول كلٍّ منها تبلغ ‎44px‎ */
  .cart-hd button{position:relative}
  .cart-hd button::after,.hdr-actions .icon-btn:not(.lang-toggle)::after{content:'';position:absolute;inset:-0.125rem;border-radius:50%}
}

/* ٤) الأدراج: التمرير داخلها لا يجرّ الصفحة تحتها.
   بلا هذا يواصل الإصبع تمرير الصفحة حين يبلغ الدرجُ طرفه، وقد يطلق
   «السحب للتحديث» على أندرويد فيضيع ما في الدرج. */
.cart-body,.mm-nav-body,.mega,.filters{overscroll-behavior:contain}

/* الحافّة السفلى على الأجهزة ذات الشقّ: شريط الإيماءات يغطّي آخر
   ‎34px‎، وزرّ «إتمام الطلب» كان يقع تحته. */
.cart-ft{padding-bottom:max(1.375rem,env(safe-area-inset-bottom,0px))}
.mm-nav-ft{padding-bottom:max(1.5rem,env(safe-area-inset-bottom,0px))}
.contact-fab.cf-btn{bottom:max(4.625rem,calc(env(safe-area-inset-bottom,0px) + 4.625rem))}

/* ٥) الأزرار العائمة تنسحب حين يُفتح درج.
   زرّ واتساب وفقاعة الشات يطفوان فوق الدرج ويحجبان أزراره — وفقاعة
   أودو خارج سلّم التكديس لدينا فلا يكفي ‎z-index‎. */
body.mm-nav-open .contact-fab,body.mm-cart-open .contact-fab{
  opacity:0;pointer-events:none;transform:translateY(0.625rem)}
body.mm-nav-open .o-livechat-root,body.mm-cart-open .o-livechat-root{
  opacity:0;pointer-events:none;transition:opacity var(--d) var(--ease)}

/* ٦) مرشِّحات صفحة التصنيف تُطوى على الجوّال.
   العمود الجانبي يهبط فوق الشبكة حين ينهار التخطيط إلى عمودٍ واحد،
   فكان الزائر يمرّ على نحو ‎900px‎ من التصنيفات والعلامات قبل أن يرى
   منتجاً واحداً. مطويّةً تصير ثلاثة سطور — والمرشِّحات في متناوله
   دون أن تسبق البضاعة. */
@media(max-width:820px){
  /* بلا ‎margin-bottom‎: التخطيط صار عموداً واحداً وفجوة الشبكة
     (‎gap‎) تفصل اللوحة عن العنوان أصلاً، فالهامش يُضاف إليها. */
  .col-layout,.ex-layout{gap:var(--s5);padding-bottom:var(--s7)}
  .filters,.ex-filters{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--sharp);padding:0 1rem}
  .ex-filters{display:block}
  .ex-filters .ex-search{margin:0.875rem 0}
  .ex-filters .f-reset{width:100%;margin:0.25rem 0 1rem}

  /* قواعد الطيّ القديم (‎.mm-fh‎ / ‎.mm-fold‎) حُذفت: الشريط الجانبي (motion.js ١٣·٥)
     يطوي أقسامه بنفسه ولا شيء يضع الصنفين. ‎:not(.mm-fold)‎ باقٍ كما هو لأنّه
     يطابق كل مجموعة ويحمل حشوتها — تغيير خصوصيته قد يقلب ترتيب قواعد أخرى. */
  .fgroup{padding:0;border-bottom:1px solid var(--line)}
  .fgroup:last-child{border-bottom:0}
  .fgroup:not(.mm-fold){padding-bottom:0.875rem}

  /* رأس القائمة يتكدّس: العنوان والعدد سطراً، وفرز بعرض كامل بدل
     قائمةٍ منسدلة بعرض ‎152px‎ في طرف الصفّ. */
  .col-head{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .sortbar select{width:100%;height:3rem}
  .fgroup label,.fgroup .fchip{padding:0.5625rem 0;font-size:0.875rem}
  .fgroup input[type=checkbox]{width:1.125rem;height:1.125rem}
  .sib{padding:0.5625rem 0;font-size:0.875rem}
}

/* ٧) حلقة تركيز واحدة بلون الفعل.
   لم يكن أيّ ‎outline:0‎ في الملف بلا بديل ظاهر — فالحقول كلّها تردّ
   بتغيّر حدّها — لكن ما بقي (الروابط والأيقونات والبطاقات) كان يعتمد
   حلقةَ المتصفّح الافتراضية: مقروءة، لكنها سوداء أو زرقاء نظامية
   غريبة عن اللوحة. ‎:focus-visible‎ لا ‎:focus‎: الفأرة لا تستدعيها
   ولوحة المفاتيح تستدعيها. */
a:focus-visible,button:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:0.15625rem solid var(--volt);outline-offset:0.1875rem}

@media(max-width:560px){
  /* ٨) شريط العلامات عمودان لا التفافٌ حرّ.
     ستّ علامات بعرضٍ مختلف تلتفّ ‎٢‎ و‎٣‎ و‎١‎ — والسطر الأخير المفرد
     يُقرأ بقيّةً منسيّة. عمودان يعطيان ثلاثة صفوفٍ متساوية، وتتّسع
     الخانة فيكبر الشعار بدل أن يصغر.

     التخصيص بـ‎.brand-strip‎ لا ‎.brand-row‎ وحدها: الصنف نفسه يحمل
     في صفحة المنتج معنىً آخر تماماً — رابط العلامة تحت اسم المنتج —
     وقاعدةٌ مطلقة كانت تحوّل ذلك الرابط المفرد إلى شبكة عمودين في
     ٤١٦ صفحة. */
  .brand-strip .brand-row{display:grid;grid-template-columns:1fr 1fr;
    gap:1.5rem 0.875rem;justify-items:center;align-items:center}
  /* الصفّ ملفوف بغلاف كشفٍ يحمل الصنف نفسه، فصارت شبكةٌ داخل خليّة
     شبكةٍ أخرى: انكمش الصفّ إلى ‎208px‎ بعمودين ‎70‎ و‎120‎ والتصق
     يساراً. إذابة الغلاف تجعل الشعارات الستّة أبناء الشبكة مباشرة. */
  .brand-strip .brand-row>.brand-row{display:contents}
  .brand-strip .brand-row a{width:100%;height:2.25rem;
    display:flex;align-items:center;justify-content:center}
  .brand-strip .brand-row a img,.brand-strip .brand-row a svg{
    height:auto;max-height:1.875rem;width:auto;max-width:min(100%,8.5rem)}
  .brand-strip .brand-row .b-txt{font-size:1.0625rem}

  /* ترتيب الصفوف: كل صفٍّ شعارٌ عريض وآخر مكتنز.
     بترتيب المصدر يقع العريضان (بايوتك ‎6.6:1‎ وجاسب ‎5.2:1‎) في صفّ،
     والمكتنزان (جوريلا ‎2.7‎ وسايتك ‎2.5‎) في صفّ — فيثقل الأول ويخفّ
     الثاني. المزاوجة توزّع الكتلة البصرية بالتساوي.
     الترتيب بصريّ فقط والتنقّل بلوحة المفاتيح يتبع المصدر — ولا ضير:
     الشعارات لا تسلسل بينها. */
  .brand-strip .brand-row a:nth-child(1){order:1}   /* BiotechUSA  6.6 */
  .brand-strip .brand-row a:nth-child(3){order:2}   /* Gorilla     2.7 */
  .brand-strip .brand-row a:nth-child(2){order:3}   /* GASP        5.2 */
  .brand-strip .brand-row a:nth-child(4){order:4}   /* Scitec      2.5 */
  .brand-strip .brand-row a:nth-child(6){order:5}   /* BetterBodies 4.1 */
  .brand-strip .brand-row a:nth-child(5){order:6}   /* NEBBIA      2.4 */

  /* ٩) الرياضيون عمودان: البطاقة صورةٌ دائرية واسمٌ وسطر — لا تحتاج
     عرض الشاشة كلّه، وخمس بطاقاتٍ بعرضٍ كامل تطيل الصفحة بلا داعٍ. */
  .ath-grid{grid-template-columns:1fr 1fr;gap:0.75rem}
  .ath{padding:1.375rem 0.75rem}
  .ath .av,.ath .av-img{width:4rem;height:4rem}
  .ath h4{font-size:0.90625rem}
  .ath p{font-size:0.78125rem}
}

/* ١٠) روابط التذييل: صفوفها كانت ‎36px‎ — تحت حدّ اللمس المريح،
   وهي أكثف قائمةٍ في الموقع وأكثرها عرضةً للضغط الخاطئ. */
@media(hover:none),(pointer:coarse){
  .ftr li a{padding:0.6875rem 0}
  .ftr-legal a{display:inline-block;padding:0.5rem 0}
}


/* ═══════════════════════════════════════════════════════════════════
   ‖  ٢١. هوية العلامة — الصفحة الرئيسية والدرج  ‖
   الهيرو كحليّ بعنوانٍ عريض من الخطّ نفسه الذي يشبه شعار العلامة
   (أرشيفو بعرضٍ موسَّع)، وبجانبه لوحة المستشار: الشيء الوحيد الذي
   لا يملكه متجر مكمّلات آخر، فيأخذ مكان الصورة. النقش خلفه هو شعار
   العلامة مكرّراً بلونٍ على لونه — كما في ملفّ الهوية.
   ═══════════════════════════════════════════════════════════════════ */
.hero-b{position:relative;background:var(--iron);color:#fff;overflow:hidden;isolation:isolate}
/* نقش العلامة كما في ملفّ الهوية: علامة M مكرّرة لوناً على لونه.
   خافتة عمداً — تُحَسّ ولا تُقرأ. */
.hero-b::before{content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background-color:rgba(13,156,248,.055);
  -webkit-mask-image:url(../media/brand/mm-mark-mask.png);mask-image:url(../media/brand/mm-mark-mask.png);
  -webkit-mask-size:9.375rem auto;mask-size:9.375rem auto;
  -webkit-mask-repeat:space;mask-repeat:space;
  transform:rotate(-10deg)}
/* ضوء واحد خلف لوحة المستشار */
.hero-b::after{content:'';position:absolute;z-index:0;width:min(45rem,80vw);aspect-ratio:1;
  border-radius:50%;inset-inline-end:-18%;top:-30%;pointer-events:none;
  background:radial-gradient(circle,rgba(13,156,248,.34),transparent 62%)}
.hero-b-in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.75rem,5vw,5rem);align-items:center;
  padding-block:clamp(3.5rem,7vw,6.5rem)}
.hero-b-txt{min-width:0}
.hero-b h1{font-size:clamp(2.5rem,6.2vw,5.375rem);line-height:1.02;font-weight:700;
  letter-spacing:-.022em;margin:0 0 var(--s5);max-width:12ch;color:#fff}
html[dir=rtl] .hero-b h1{letter-spacing:-.01em;line-height:1.14;max-width:14ch}
.hero-b h1 em{font-style:normal;color:var(--volt)}
.hero-b-sub{font-size:clamp(1rem,1.35vw,1.1875rem);line-height:1.65;color:#c3cbe8;max-width:46ch;
  margin:0 0 var(--s6)}
.hero-b-cta{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero-b .button.ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.hero-b .button.ghost::before{background:#fff}
.hero-b .button.ghost:hover{color:var(--iron);border-color:#fff}
.hero-b-proof{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);margin:var(--s7) 0 0;
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.14)}
.hero-b-proof li{display:flex;align-items:center;gap:0.5625rem;font-size:0.84375rem;color:#b5bfe0;font-weight:500}
.hero-b-proof svg{color:var(--volt);flex:none}

/* لوحة المستشار: سطح أبيض مرتفع فوق الكحليّ */
.adv-card{position:relative;background:#fff;color:var(--ink);border-radius:var(--sharp);
  padding:clamp(1.5rem,2.6vw,2.125rem);box-shadow:0 1.875rem 5rem rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:0.875rem;max-width:32.5rem;margin-inline-start:auto}
html[dir=rtl] .adv-card{margin-inline-start:auto}
.adv-card-k{display:flex;align-items:center;gap:0.5625rem;font-size:0.78125rem;font-weight:650;color:var(--royal)}
.adv-card-dot{width:0.5625rem;height:0.5625rem;border-radius:50%;background:var(--volt);flex:none;
  box-shadow:0 0 0 0.25rem rgba(13,156,248,.18)}
@media(prefers-reduced-motion:no-preference){
  .adv-card-dot{animation:adv-pulse 2.4s var(--ease-io) infinite}
}
@keyframes adv-pulse{0%,100%{box-shadow:0 0 0 0.25rem rgba(13,156,248,.18)}50%{box-shadow:0 0 0 0.5rem rgba(13,156,248,.08)}}
.adv-card h2{font-size:clamp(1.4375rem,2.1vw,1.875rem);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.adv-card>p{margin:0;font-size:0.9375rem;line-height:1.65;color:var(--ink-2)}
.adv-card-out{display:grid;gap:0.5rem;margin:0.25rem 0 0.375rem}
.adv-card-out li{display:grid;grid-template-columns:auto 1fr;gap:0.75rem;align-items:baseline;
  padding:0.6875rem 0.875rem;border-radius:var(--sharp);background:var(--bg);font-size:0.84375rem;color:var(--ink-2)}
.adv-card-out b{color:var(--iron);font-weight:650;white-space:nowrap}
.adv-card-go{width:100%}
.adv-card-note{margin:0;font-size:0.78125rem;color:var(--muted);text-align:center}

/* بلاطات الفئات: صورة المنتج الأكثر توفّراً على بلاطة رماديّة باردة */
.cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(0.75rem,1.4vw,1.25rem)}
.cat-tile{display:flex;flex-direction:column;background:#fff;border-radius:var(--sharp);overflow:hidden;
  box-shadow:var(--sh-1);transition:box-shadow var(--d) var(--ease)}
.cat-tile:hover{box-shadow:var(--sh-3)}
.cat-tile-img{display:block;background:var(--bg-2);aspect-ratio:4/3;padding:1.125rem;overflow:hidden}
.cat-tile-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform 600ms var(--ease)}
.cat-tile:hover .cat-tile-img img{transform:scale(1.05)}
.cat-tile-txt{display:flex;align-items:baseline;justify-content:space-between;gap:0.625rem;
  padding:0.875rem 1.125rem 1rem;font-size:0.78125rem;color:var(--muted)}
.cat-tile-txt b{font-size:0.96875rem;color:var(--ink);font-weight:650;letter-spacing:-.01em}
.mm-n{font-family:var(--fn);font-weight:600;direction:ltr;unicode-bidi:isolate}

/* شريط المستشار الكحليّ — الشارة الدائرية «CRAZY FOR A HEALTHIER
   LIFESTYLE» تدور ببطءٍ شديد خلف الخطوات: جهاز الهوية في مكانه
   الطبيعي، حيث الحديث عن أسلوب الحياة لا عن منتج. */
.adv-band{isolation:isolate}
.adv-band::before{content:'';position:absolute;z-index:0;width:min(35rem,60vw);aspect-ratio:1;
  inset-inline-end:-6%;top:50%;translate:0 -50%;pointer-events:none;opacity:.16;
  background-color:var(--volt);
  -webkit-mask-image:url(../media/brand/mm-badge-mask.png);mask-image:url(../media/brand/mm-badge-mask.png);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media(prefers-reduced-motion:no-preference){
  .adv-band::before{animation:mm-spin 90s linear infinite}
}
@keyframes mm-spin{to{transform:rotate(360deg)}}
.adv-band-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem);align-items:center}
.adv-band-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.adv-steps{margin:0;padding:0;list-style:none}

/* زوجا المكتبة: صورة بلونين كما في ملفّ الهوية — رماديّة ثم كحليّ
   بالضرب وسماويّ بالحجب. بلا صورةٍ مصمَّمة خصّيصاً، والأثر نفسه. */
.lib-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(0.875rem,1.8vw,1.5rem)}
.lib-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:0.5rem;
  min-height:clamp(18.75rem,30vw,25rem);padding:clamp(1.375rem,2.6vw,2.125rem);border-radius:var(--sharp);
  overflow:hidden;isolation:isolate;color:#fff;background:var(--iron);
  box-shadow:var(--sh-2);transition:box-shadow var(--d) var(--ease)}
/* الصورة عنصرٌ لا متغيّر CSS: مسار ‎url()‎ داخل متغيّر مُعلَن في وسم
   inline يُحلّ في بعض المتصفّحات نسبةً إلى ملفّ الأنماط لا الصفحة. */
.lib-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);transition:transform 900ms var(--ease)}
.lib-tile::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,74,140,.96) 18%,rgba(12,74,140,.55) 60%,rgba(13,156,248,.35));
  mix-blend-mode:multiply}
.lib-tile:hover{box-shadow:var(--sh-3)}
.lib-tile:hover .lib-img{transform:scale(1.05)}
.lib-n{display:inline-flex;align-items:baseline;gap:0.375rem;font-size:0.8125rem;color:#c3cbe8;
  margin-bottom:auto;padding:0.5rem 0.875rem;border-radius:var(--sharp);background:rgba(255,255,255,.1);
  backdrop-filter:blur(0.5rem);align-self:flex-start}
.lib-n b{font-family:var(--fn);font-weight:700;font-size:1.375rem;color:#fff;letter-spacing:-.015em;line-height:1}
.lib-tile h3{font-size:clamp(1.25rem,1.8vw,1.625rem);color:#fff;letter-spacing:-.015em}
.lib-tile p{margin:0;font-size:0.875rem;line-height:1.6;color:#c3cbe8;max-width:44ch}
.lib-go{font-size:0.875rem;font-weight:650;color:var(--volt);margin-top:0.375rem}

/* ── الدرج: يخرج من جهة أيقونة السلّة في اللغتين ──
   inset-inline-end مع معامل الاتجاه: في اللاتينية ينزلق من اليمين وفي
   العربية من اليسار — حيث تقع الأيقونة التي فتحته. */
.cart-dr{right:auto;inset-inline-end:0;width:min(27.5rem,100%);background:#fff;
  transform:translateX(calc(var(--mm-dir) * 100%));
  transition:transform var(--d-slow) var(--ease);
  box-shadow:0 0 0 1px var(--line),0 1.5rem 5rem rgba(12,74,140,.28)}
.cart-dr.on{transform:translateX(0)}
.cart-ov{background:rgba(17,22,51,.42);backdrop-filter:blur(0.125rem);transition:opacity var(--d) var(--ease)}
.cart-hd{padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.cart-hd{gap:0.625rem}
.cart-hd h3{font-size:1.125rem;letter-spacing:-.01em}
/* العدّاد أخٌ للعنوان لا ابنه: مبدّل اللغة يكتب textContent على العنوان
   فيمحو أيّ عنصرٍ يُحقن داخله. */
.cart-hd .cart-n{font-family:var(--fn);font-size:0.75rem;font-weight:650;color:var(--royal);
  background:var(--volt-soft);border-radius:var(--sharp);padding:0.1875rem 0.5625rem;direction:ltr;
  unicode-bidi:isolate;margin-inline-end:auto}
.cart-hd button{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.cart-hd button:hover{background:var(--bg-2);color:var(--ink)}
.cart-body{padding:0.375rem 1.5rem}
.ci{gap:0.875rem;padding:1rem 0}
.ci img{width:4.5rem;height:4.5rem;border-radius:var(--sharp);background:var(--bg-2);padding:0.375rem}
.ci-b h4{font-size:0.875rem;font-weight:600}
.ci-var{font-size:0.75rem;color:var(--muted);display:inline-flex;padding:0.125rem 0.5rem;border-radius:var(--sharp);
  background:var(--bg);margin-bottom:0.5rem}
.ci-qty{border-radius:var(--sharp);border:1px solid var(--line-2);direction:ltr}
.ci-qty button{width:2rem;height:2rem;font-size:1rem;border-radius:50%;
  transition:background var(--d-fast) var(--ease)}
.ci-qty button:hover{background:var(--bg-2)}
.ci-qty span{min-width:1.75rem;font-size:0.84375rem}
.ci-price{font-size:0.9375rem;color:var(--ink);direction:ltr;unicode-bidi:isolate}
.ci-del{font-size:0.75rem;text-decoration:none;color:var(--muted);margin-top:0.5rem;
  transition:color var(--d-fast) var(--ease)}
.ci-del:hover{color:var(--ember)}
.cart-ft{background:#fff;border-top:1px solid var(--line);padding:1rem 1.5rem 1.5rem}
/* شريط التوصيل المجاني — يُرسم من الجافاسكربت في الدرج وصفحة السلّة */
.cart-free{margin:0 0 0.875rem;padding:0.75rem 0.875rem;border-radius:var(--sharp);background:var(--bg);
  font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}
.cart-free.done{background:#e6f9f4;color:#08705f}
.cart-free b{color:var(--ink);font-weight:650}
.cart-free.done b{color:#08705f}
.cart-free .bar{height:0.375rem;border-radius:var(--sharp);background:var(--bg-4);overflow:hidden;margin-top:0.5625rem}
.cart-free .bar i{display:block;height:100%;border-radius:var(--sharp);background:var(--volt);
  transition:width var(--d-slow) var(--ease)}
.cart-free.done .bar i{background:var(--teal)}
.cart-free .cart-free-region{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--muted)}
.cart-free .cart-free-cta{margin-top:0.75rem;height:2.5rem;padding:0 1.125rem;font-size:0.84375rem}
#coShipWrap .cart-free{margin:0}
/* حقل المنطقة يأخذ شكل بقيّة حقول إتمام الطلب */
.fld-p select{width:100%;height:3.125rem;border:0.09375rem solid var(--line-2);border-radius:var(--sharp);padding:0 0.875rem;
  font-family:var(--f);font-size:1rem;background:#fff;color:var(--ink);cursor:pointer}
.fld-p select:focus{outline:0;border-color:var(--volt);box-shadow:0 0 0 0.25rem rgba(13,156,248,.14)}
.cart-line.tot{font-size:1.125rem;border-top:1px solid var(--line)}
.cart-line.tot b{direction:ltr;unicode-bidi:isolate}
.cart-ft .button{margin-top:0.75rem;height:3.375rem;font-size:0.96875rem}
.cart-ft .lnk{margin-top:0.75rem;color:var(--royal)}
.cart-empty{padding:3.5rem 1.25rem 4rem}
.cart-empty b{font-size:1.0625rem}
/* علامة M خافتة فوق حالة الفراغ — العلامة تُرافق الزبون حتى في سلّة فارغة */
.cart-empty::before{content:'';display:block;width:4rem;height:2.375rem;margin:0 auto 1.125rem;
  background-color:var(--bg-4);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat;
  mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat}
.toast{background:var(--iron);border-radius:var(--sharp);padding:0.8125rem 1.375rem;
  box-shadow:0 0.75rem 2.25rem rgba(17,22,51,.35);max-width:min(92vw,32.5rem);text-align:center;
  transition:transform var(--d) var(--ease-spring),opacity var(--d) var(--ease)}

/* ── الاستجابة لأقسام العلامة ── */
@media(max-width:1180px){.cat-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:960px){
  .hero-b-in{grid-template-columns:1fr;gap:var(--s6);padding-block:clamp(2.75rem,7vw,4.5rem)}
  .adv-card{max-width:none;margin-inline-start:0}
  .hero-b h1{max-width:16ch}
  .adv-band-in{grid-template-columns:1fr;gap:var(--s6)}
  .lib-pair{grid-template-columns:1fr}
  .lib-tile{min-height:16.25rem}
}
@media(max-width:820px){.cat-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .hero-b-cta{flex-direction:column;align-items:stretch}
  .hero-b-cta .button{width:100%}
  .hero-b-proof{gap:var(--s3) var(--s5);margin-top:var(--s5)}
  .hero-b-proof li{font-size:0.78125rem}
  .adv-card{padding:1.25rem;border-radius:var(--sharp)}
  .adv-card-out li{grid-template-columns:1fr;gap:0.125rem;padding:0.625rem 0.75rem}
  .cat-tiles{gap:0.75rem}
  .cat-tile-img{padding:0.75rem}
  .cat-tile-txt{padding:0.6875rem 0.8125rem 0.8125rem;flex-direction:column;gap:0.125rem;align-items:flex-start}
  .cat-tile-txt b{font-size:0.875rem}
  .cart-dr{width:100%}
  .lib-tile{min-height:13.75rem;padding:1.25rem;border-radius:var(--sharp)}
}

/* ═══════════════════════════════════════════════════════════════════
   ‖  ٢٢. زوج البطاقات الترويجية على الصفحة الرئيسية  ‖
   (الرافدتان الجانبيتان أُزيلتا بطلب العميل — بقي الزوج داخل عمود
   المحتوى على كل المقاسات. ملاحظة: ‎.mm-rail‎ هو رفّ الأهداف في القسم ٩،
   فلا تُستعمل للرافدتين.) */
.promo-duo-sec{display:block}

/* صفحة ٤٠٤: علامة M فوق العنوان — الزائر تائه لكنه ما زال عند مصل مانيا */
.mm-404-mark{display:block;width:4.75rem;height:2.75rem;margin-bottom:1.125rem;background-color:var(--volt);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat;
  mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat}

/* زوج البطاقات على الصفحة الرئيسية حين لا مكان للرافدتين */
.promo-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(0.75rem,1.6vw,1.25rem)}
.promo-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:0.25rem;
  min-height:13.75rem;padding:1.375rem 1.5rem;border-radius:var(--sharp);overflow:hidden;isolation:isolate;color:#fff;
  box-shadow:var(--sh-1);transition:box-shadow var(--d) var(--ease)}
.promo-card:hover{box-shadow:var(--sh-3)}
.promo-ship{background:var(--volt)}
.promo-ship::before{content:'';position:absolute;z-index:-1;inset-inline-end:-10%;top:-18%;width:52%;
  aspect-ratio:745/435;background-color:#fff;opacity:.14;transform:rotate(-12deg);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat;
  mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat}
.promo-ship .rail-k{font-size:0.8125rem;font-weight:650;opacity:.92}
.promo-ship b{font-family:var(--fn);font-size:clamp(2.125rem,4vw,3rem);font-weight:700;letter-spacing:-.025em;
  line-height:1;direction:ltr;unicode-bidi:isolate;margin:0.25rem 0}
.promo-ship span:not(.rail-k){font-size:0.84375rem;color:rgba(255,255,255,.9)}
.promo-photo{background:var(--iron)}
.promo-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(1) contrast(1.05);transition:transform 900ms var(--ease)}
.promo-photo::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,74,140,.95) 12%,rgba(12,74,140,.42) 60%,rgba(13,156,248,.3));
  mix-blend-mode:multiply}
.promo-photo:hover img{transform:scale(1.04)}
.promo-photo b{font-size:clamp(1.1875rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.015em}
.promo-photo span{font-size:0.84375rem;color:#c3cbe8}
@media(max-width:560px){
  .promo-duo{grid-template-columns:1fr}
  .promo-card{min-height:10.625rem;padding:1.125rem 1.25rem;border-radius:var(--sharp)}
}

/* ‖ ٢٣. الألواح الثابتة تحت الرأس ‖
   الرأس المصغَّر على سطح المكتب ‎127px‎ (الشريط ‎72‎ + القائمة). الألواح
   اللاصقة كانت على ‎96–104px‎ فيختفي أعلاها تحته؛ تُنزَّل إلى ما بعده
   بفسحة ‎16px‎. على الجوّال لا قائمة في الرأس فتبقى قيمها الأصلية. */
@media(min-width:821px){
  .ex-filters,.exd-imgs,.pd-side,.pdp-media,.sum{top:8.9375rem}
}

/* ‖ ٢٤. صفحات التصنيف تستعمل عرض الشاشة ‖
   السبب: كل الصفحات داخل ‎.wrap‎ بسقف ‎1320px‎، والشبكة مثبَّتة على
   أربعة أعمدة. على شاشة ‎1920px‎ يبقى نحو ‎300px‎ فارغاً في كلّ جانب.
   الحلّ لصفحات القوائم وحدها (التصنيفات والأهداف، ‎.col-layout‎):
   ١) حاوية أعرض بسقف ‎--wrap-wide‎ وهامش جانبي يتناسب مع الشاشة؛
      مسار التنقّل فوقها يأخذ الحاوية نفسها فتبقى الحافّتان على خطّ.
   ٢) لا عمود ترشيح جانبي: الترشيح والترتيب في درج «تصفية وترتيب»
      (القسم ٢٥). الحاوية ‎1600px‎ فتبقى البطاقة ~‎280px‎ بخمسة أعمدة.
   ٣) عدد الأعمدة يُشتقّ من العرض المتاح (‎auto-fill‎) بحدٍّ أدنى للبطاقة
      ‎236px‎ وسقفٍ صريح عند خمسة أعمدة — طلب المالك: صورٌ كبيرة كمتجر
      BiotechUSA (بطاقتهم ‎~305px‎)، وخمسة في الصفّ حدٌّ أعلى. الحدّ الأدنى
      الفعليّ للعمود = الأكبر بين ‎236px‎ وخُمس العرض، فلا يتّسع الصفّ لسادس
      مهما كبرت الشاشة؛ و‎-1px‎ تمنع التقريب من إسقاط الخامس. النتيجة:
      ٣ على ‎1280px‎، ٤ حتى نحو ‎1600px‎، ٥ فوقها (~‎280px‎ على ‎1920px‎).
      ‎auto-fill‎ لا ‎auto-fit‎: القسم ذو المنتج الواحد لا تتمدّد بطاقته
      على عرض الصفّ كلّه.
   تحت ‎1081px‎ تبقى قواعد اللوحي والجوّال كما هي. الخصائص منطقية
   (‎padding-inline‎، أعمدة الشبكة) فيعمل الاتجاهان RTL وLTR بلا تكرار. */
:root{--wrap-wide:100rem}
/* بلا عمودٍ جانبي على كلّ المقاسات. العمود مخفيّ من CSS قبل أن تنقله
   الجافاسكربت إلى الدرج، فلا تقفز الشبكة من عمودين إلى عمود عند التحميل. */
.wrap.col-layout{grid-template-columns:minmax(0,1fr)}
.col-layout>.filters,.col-layout .sortbar{display:none}
@media(min-width:1081px){
  .wrap.col-layout,
  .wrap:has(>.crumbs):has(+.col-layout){
    max-width:var(--wrap-wide);padding-inline:clamp(1.25rem,2.6vw,3rem)}
  .col-layout .grid{--cg:clamp(0.875rem,1.6vw,1.5rem);column-gap:var(--cg);
    grid-template-columns:repeat(auto-fill,minmax(max(14.75rem,calc((100% - 4 * var(--cg)) / 5 - 1px)),1fr))}
}

/* ‖ ٢٥. الشريط الجانبي للترشيح ‖
   تصميمٌ واحد لكلّ أشرطة الترشيح (البرامج، التمارين، المتجر) على مرجع
   المالك بأسلوب Apple: خلفية رمادية فاتحة، عناوين أقسامٍ صغيرة بسهمٍ
   يطويها، صفوفٌ بأيقونة ونصّ وعدد، والاختيار حبّةٌ رمادية أغمق مع صحّ
   بالأزرق الملكيّ. يبنيه ‎motion.js‎ (القسم ١٣·٥).
   - البرامج والتمارين: ظاهرٌ دائماً، لاصقٌ بجانب القائمة.
   - المتجر (‎.col-layout‎): مخفيّ حتى «تصفية وترتيب». عريضاً (‎≥1081px‎)
     يأخذ عموداً والبطاقات تنزلق؛ دون ذلك لوحٌ عائم من جهة البداية. */
.col-layout .col-head{flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:1rem;margin:0.25rem 0 clamp(1.5rem,3vw,2.25rem)}
.col-layout .col-head h1{font-size:clamp(1.75rem,2.6vw,2.375rem)!important;line-height:1.15;letter-spacing:-.02em;margin:0}
.mm-ftools{display:flex;align-items:center;justify-content:center;gap:clamp(0.875rem,2vw,1.75rem);flex-wrap:wrap}
.mm-ftools .count{font-size:0.9375rem;color:var(--ink-2);font-weight:500}
.mm-fbtn{display:inline-flex;align-items:center;gap:0.625rem;height:3rem;padding:0 1.25rem;border:0;
  border-radius:var(--sharp);background:#eef2f7;color:var(--ink);font:inherit;font-size:0.9375rem;font-weight:600;
  line-height:1;cursor:pointer;
  transition:background-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.mm-fbtn:hover{background:var(--bg-2)}
.mm-fbtn[aria-expanded="true"]{background:#dde4ee}
.mm-fbtn:active{transform:scale(.97)}
.mm-fbtn:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.1875rem}
.mm-fbtn-n{min-width:1.375rem;height:1.375rem;padding:0 0.375rem;border-radius:var(--sharp);background:var(--iron);color:#fff;
  font-size:0.75rem;font-weight:650;font-family:var(--fn);display:inline-grid;place-items:center}
.mm-fbtn-n[hidden]{display:none}

/* ── الشريط نفسه ── */
.mm-side{--sb:#f5f5f7;--s-ink:#1d1d1f;--s-2:#6e6e73;--s-3:#8e8e93;
  --s-hover:rgba(0,0,0,.045);--s-on:rgba(0,0,0,.075);--s-ease:cubic-bezier(.32,.72,0,1);--s-soft:cubic-bezier(.22,1,.36,1);
  background:var(--sb);border-radius:var(--sharp);padding:0.875rem 0.625rem 1rem;color:var(--s-ink);font-family:var(--f);
  scrollbar-color:transparent transparent}
.mm-side:hover{scrollbar-color:rgba(0,0,0,.2) transparent}
.mm-sec{margin-top:0.75rem}
.mm-sec:first-child{margin-top:0}
.mm-sec-h{display:flex;align-items:center;gap:0.5rem;width:100%;min-height:2.375rem;padding:0 0.75rem;border:0;border-radius:var(--sharp);
  background:none;font:inherit;font-size:0.875rem;font-weight:500;letter-spacing:.005em;color:var(--s-3);
  text-align:start;cursor:pointer;transition:color 160ms ease}
.mm-sec-h:hover{color:var(--s-ink)}
.mm-sec-h:focus-visible{outline:0.125rem solid var(--volt);outline-offset:-0.125rem}
.mm-chev{display:grid;place-items:center;width:1rem;height:1rem;flex:none;transition:transform 420ms var(--s-soft)}
.mm-chev svg{width:1rem;height:1rem}
.mm-sec:not(.mm-shut) .mm-chev{transform:rotate(90deg)}
html[dir=rtl] .mm-sec.mm-shut .mm-chev{transform:scaleX(-1)}
.mm-sec-n{margin-inline-start:auto;min-width:1.3125rem;height:1.3125rem;padding:0 0.375rem;border-radius:var(--sharp);background:var(--royal);
  color:#fff;font-size:0.75rem;font-weight:600;font-family:var(--fn);line-height:1;display:inline-grid;place-items:center}
.mm-sec-n[hidden]{display:none}
/* الطيّ: الصفّ يتقلّص من ‎1fr‎ إلى ‎0fr‎ فيُغلق بارتفاعه الحقيقيّ */
.mm-sec-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows 460ms var(--s-soft)}
.mm-sec.mm-shut .mm-sec-b{grid-template-rows:0fr}
.mm-sec-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:0.125rem;padding-top:0.25rem;
  transition:opacity 320ms ease}
.mm-sec.mm-shut .mm-sec-in{opacity:0}

/* ── الصفوف ── */
.mm-side .mm-row{position:relative;display:flex;align-items:center;gap:0.75rem;min-height:2.875rem;margin:0;padding:0 0.75rem;
  border-radius:var(--sharp);font-size:1rem;font-weight:450;line-height:1.3;color:var(--s-ink);text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color 220ms ease,transform 220ms var(--s-soft)}
.mm-side .mm-row:hover{background:var(--s-hover);color:var(--s-ink)}
.mm-side .mm-row:active{transform:scale(.985)}
.mm-side .mm-row input{position:absolute;inset-inline-start:0;top:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.mm-side .mm-row:has(input:focus-visible),.mm-side a.mm-row:focus-visible{outline:0.125rem solid var(--volt);outline-offset:-0.125rem}
.mm-side .mm-ico{width:1.625rem;height:1.625rem;flex:none;display:grid;place-items:center;color:var(--s-2);transition:color 220ms ease}
.mm-side .mm-row .mm-ico svg{width:1.3125rem;height:1.3125rem}
.mm-side .mm-mono{width:1.5rem;height:1.5rem;margin-inline:1px;border-radius:var(--sharp);background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);font:650 0.78125rem/1 var(--fn);color:var(--s-2)}
/* ‎direction/unicode-bidi‎ تُلغي قاعدة ‎.sib span‎ القديمة (أرقامٌ معزولة ‎ltr‎) التي
   كانت تُلصق اسم القسم العربي بالعدد في يسار الصفّ بدل أيقونته */
.mm-side .mm-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:1rem;font-family:var(--f);font-weight:inherit;color:inherit;letter-spacing:0;
  direction:inherit;unicode-bidi:normal;text-align:start}
.mm-side .mm-cnt{flex:none;margin-inline-start:auto;min-width:2ch;text-align:end;font-size:0.84375rem;font-style:normal;
  font-weight:500;font-family:var(--fn);color:var(--s-3);letter-spacing:0;font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate}
.mm-side .mm-tick{display:none;place-items:center;flex:none;margin-inline-start:auto;color:var(--royal)}
.mm-side .mm-tick svg{width:1.125rem;height:1.125rem}
.mm-side .mm-row:has(input:checked),.mm-side .mm-row.on{background:var(--s-on)}
.mm-side .mm-row:has(input:checked) .mm-ico,.mm-side .mm-row.on .mm-ico{color:var(--royal)}
.mm-side .mm-row:has(input:checked) .mm-mono{background:var(--royal);color:#fff;box-shadow:none}
.mm-side .mm-row:has(input:checked) .mm-lbl,.mm-side .mm-row.on .mm-lbl{font-weight:600}
.mm-side .mm-row:has(input:checked) .mm-cnt{display:none}
.mm-side .mm-row:has(input:checked) .mm-tick{display:grid;animation:mm-tick 300ms var(--s-ease)}
.mm-side .mm-row.mm-zero{opacity:.45}
@keyframes mm-tick{from{opacity:0;transform:scale(.4)}}

/* البحث (مكتبة التمارين) وزرّ المسح */
.mm-side .mm-search{position:relative;margin:0.125rem 0.125rem 0.625rem}
.mm-side .mm-search .mm-ico{position:absolute;inset-inline-start:0.625rem;top:50%;transform:translateY(-50%);
  width:1.375rem;height:1.375rem;color:var(--s-3);pointer-events:none}
.mm-side .ex-search{width:100%;height:2.75rem;margin:0;border:0;border-radius:var(--sharp);background:rgba(0,0,0,.055);
  padding:0;padding-inline:2.5rem 0.75rem;font-family:var(--f);font-size:0.96875rem;color:var(--s-ink);
  transition:background-color 160ms ease,box-shadow 160ms ease}
.mm-side .ex-search::placeholder{color:var(--s-3)}
.mm-side .ex-search:focus{outline:0;background:#fff;box-shadow:0 0 0 0.1875rem rgba(13,156,248,.28)}
.mm-side .button.mm-reset,.mm-side-clear{display:flex;align-items:center;justify-content:center;gap:0.5rem;
  width:calc(100% - 0.25rem);height:2.75rem;min-height:0;margin:0.875rem 0.125rem 0;padding:0;border:0;border-radius:var(--sharp);
  background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);color:var(--royal);
  font:600 0.9375rem/1 var(--f);cursor:pointer;transition:background-color 220ms ease,color 220ms ease}
.mm-side .button.mm-reset:hover,.mm-side-clear:hover{background:var(--royal);color:#fff;box-shadow:none;transform:none}
.mm-side .button.mm-reset[hidden],.mm-side-clear[hidden]{display:none}

/* ── البرامج والتمارين: ظاهرٌ دائماً ── */
.ex-filters.mm-side{border:0;background:var(--sb);border-radius:var(--sharp);padding:0.875rem 0.625rem 1rem;scrollbar-width:thin}
@media(min-width:1071px){
  .ex-layout,.pr-layout{grid-template-columns:18.75rem minmax(0,1fr)}
}
/* لاصقٌ فقط حين يكون التخطيط عمودين (‎>900px‎، القاعدة ‎.ex-layout‎ أعلاه): بين ‎821‎
   و‎900‎ كان التخطيط عموداً واحداً والشريط لاصقاً فيطفو فوق قائمة التمارين أثناء التمرير */
@media(min-width:901px){
  .ex-filters.mm-side{position:sticky;top:8.9375rem;max-height:calc(100vh - 10rem);overflow-y:auto;overscroll-behavior:contain}
  html[dir=rtl] .ex-filters.mm-side{max-height:calc(100vh - 15.625rem)}   /* فوق زرّ واتساب العائم */
}
@media(max-width:820px){
  .ex-filters.mm-side{position:static;max-height:none;padding:0.5rem 0.375rem 0.625rem;border:0}
}

/* ── المتجر: مخفيّ حتى الضغط ── */
.col-layout>.mm-side-shop{display:none}
.mm-side-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;padding:0.25rem 0.375rem 0.875rem;
  padding-inline-start:0.75rem}
.mm-side-tt h2{margin:0;font-size:1.3125rem;font-weight:600;letter-spacing:-.014em;line-height:1.25;color:var(--s-ink)}
.mm-side-count{margin:0.25rem 0 0;font-size:0.875rem;line-height:1.3;color:var(--s-3)}
.mm-side-x{width:2.125rem;height:2.125rem;flex:none;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:var(--s-2);
  display:grid;place-items:center;cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease,transform 160ms ease}
.mm-side-x:hover{background:rgba(0,0,0,.1);color:var(--s-ink)}
.mm-side-x:active{transform:scale(.9)}
.mm-side-x:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.125rem}
.mm-side-ft{display:flex;flex-direction:column;gap:0.5rem;padding:0 0 0.125rem}
.mm-side-go{display:none}
.mm-side-scrim{display:none}

@media(min-width:1081px){
  .wrap.col-layout{position:relative}
  .wrap.col-layout.mm-side-on{grid-template-columns:20rem minmax(0,1fr);column-gap:clamp(1.75rem,2.4vw,2.75rem)}
  /* بالعربية زرّ واتساب العائم في جهة الشريط نفسها: يتوقّف الشريط فوقه */
  html[dir=rtl] .col-layout.mm-side-on>.mm-side-shop{max-height:calc(100vh - 15.625rem)}
  .col-layout.mm-side-on>.mm-side-shop{display:block;position:sticky;top:8.9375rem;align-self:start;
    max-height:calc(100vh - 10.1875rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  /* الدخول: الشريط ينزلق من جهة البداية، وأقسامه تتبعه بتتابعٍ قصير */
  .mm-side-shop.mm-side-enter{animation:mm-side-in 760ms var(--s-soft) both}
  .mm-side-shop.mm-side-enter .mm-side-hd{animation:mm-sec-in 700ms var(--s-soft) 60ms both}
  .mm-side-shop.mm-side-enter .mm-sec{animation:mm-sec-in 700ms var(--s-soft) both}
  .mm-side-shop.mm-side-enter .mm-sec:nth-child(1){animation-delay:110ms}
  .mm-side-shop.mm-side-enter .mm-sec:nth-child(2){animation-delay:160ms}
  .mm-side-shop.mm-side-enter .mm-sec:nth-child(3){animation-delay:210ms}
  .mm-side-shop.mm-side-enter .mm-sec:nth-child(4){animation-delay:260ms}
  .mm-side-shop.mm-side-enter .mm-sec:nth-child(n+5){animation-delay:310ms}
  /* الخروج: مثبَّتٌ مطلقاً (يكتب motion.js موضعه) فتتّسع الشبكة تحته في اللحظة نفسها */
  .col-layout>.mm-side-shop.mm-side-leave{display:block;position:absolute;pointer-events:none;
    max-height:calc(100vh - 10.1875rem);overflow:hidden;animation:mm-side-out 340ms cubic-bezier(.4,0,.2,1) both}
}
@keyframes mm-side-in{from{opacity:0;transform:translateX(calc(var(--mm-dir) * -3.5rem)) scale(.985)}}
@keyframes mm-sec-in{from{opacity:0;transform:translateX(calc(var(--mm-dir) * -1.375rem))}}
@keyframes mm-side-out{to{opacity:0;transform:translateX(calc(var(--mm-dir) * -3rem)) scale(.985)}}

/* الهاتف واللوحي: لوحٌ عائم بمادّةٍ شفّافة فوق الصفحة */
@media(max-width:1080px){
  .col-layout>.mm-side-shop{display:flex;flex-direction:column;position:fixed;z-index:110;
    top:0.625rem;bottom:0.625rem;inset-inline-start:0.625rem;width:min(25rem,calc(100vw - 2rem));
    border-radius:var(--sharp);padding:1rem 0.625rem 0.75rem;
    background:rgba(245,245,247,.9);-webkit-backdrop-filter:blur(1.5rem) saturate(180%);backdrop-filter:blur(1.5rem) saturate(180%);
    box-shadow:0 1.875rem 5rem -1.5rem rgba(17,22,51,.5),0 0 0 .5px rgba(0,0,0,.08);
    transform:translateX(calc(var(--mm-dir) * (-100% - 1.5rem)));visibility:hidden;
    transition:transform 620ms var(--s-soft),visibility 0s linear 620ms}
  body.mm-side-open .col-layout>.mm-side-shop{transform:none;visibility:visible;
    transition:transform 620ms var(--s-soft),visibility 0s}
  body.mm-side-open .col-layout>.mm-side-shop .mm-sec{animation:mm-sec-in 620ms var(--s-soft) both}
  body.mm-side-open .col-layout>.mm-side-shop .mm-sec:nth-child(2){animation-delay:50ms}
  body.mm-side-open .col-layout>.mm-side-shop .mm-sec:nth-child(3){animation-delay:100ms}
  body.mm-side-open .col-layout>.mm-side-shop .mm-sec:nth-child(n+4){animation-delay:150ms}
  .mm-side-shop .mm-side-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 0.125rem}
  .mm-side-shop .mm-side-ft{padding:0.625rem 0.125rem 0}
  .mm-side-shop .mm-side-clear{margin:0;width:100%}
  .mm-side-go{display:block;width:100%;height:3.25rem;border:0;border-radius:var(--sharp);background:var(--iron);color:#fff;
    font:600 1rem/1 var(--f);cursor:pointer;transition:background-color 160ms ease,transform 160ms ease}
  .mm-side-go:active{transform:scale(.98)}
  .mm-side-scrim{display:block;position:fixed;inset:0;z-index:109;background:rgba(17,22,51,.28);
    opacity:0;pointer-events:none;transition:opacity 520ms ease}
  body.mm-side-open .mm-side-scrim{opacity:1;pointer-events:auto}
  body.mm-side-open .contact-fab,body.mm-side-open .o-livechat-root{opacity:0;pointer-events:none}
}
@media(max-width:560px){
  .col-layout>.mm-side-shop{top:0.5rem;bottom:0.5rem;inset-inline-start:0.5rem;width:calc(100vw - 1.5rem)}
  .mm-ftools{gap:0.75rem}
  .mm-fbtn{height:2.875rem;padding:0 1rem}
}
@media(prefers-reduced-motion:reduce){
  .mm-side-shop,.mm-side-shop .mm-sec,.mm-side-shop .mm-side-hd,.mm-sec-b,.mm-sec-in,.mm-chev,.mm-side .mm-tick{animation:none!important;transition:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .col-layout>.mm-side-shop{background:#f5f5f7;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── ٢٦. المقال والمنتجات حوله ────────────────────────────────────
   ثلاث نقاط فقط: داخل النص بعد الفقرة التي تتحدّث عن المنتج، قائمة
   لاصقة بجانب المقال على الشاشات العريضة، وصفّ «منتجات من هذا المقال»
   بعده. البطاقات هي بطاقات المتجر نفسها بصيغة صفّ أفقي. */
.abody ul.alist{margin:0 0 1.25rem;padding-inline-start:1.375rem;list-style:disc}
.abody ul.alist li{font-size:1.0625rem;line-height:1.9;color:var(--ink-2);margin-bottom:0.5rem;padding-inline-start:0.25rem}
.abody ul.alist li::marker{color:var(--volt)}
.abody b{font-weight:650;color:var(--ink)}
.art-wrap{max-width:77.5rem;margin:0 auto}
@media(min-width:1180px){
  .art-wrap{display:grid;grid-template-columns:minmax(0,47.5rem) 18.75rem;column-gap:clamp(2.75rem,4.5vw,5rem);
    justify-content:center;align-items:start;padding:0 1.5rem}
  .art-wrap>.apage{max-width:none;margin:0;padding-inline:0}
}

/* بطاقة صفّ: الصورة يساراً (يميناً بالعربية) والنصّ والسعر و+ بجانبها */
.card.card-row{display:grid;grid-template-columns:5.25rem minmax(0,1fr);gap:0.875rem;align-items:center;
  container-type:normal}
.card.card-row .card-img{aspect-ratio:4/5;border-radius:var(--sharp)}
.card.card-row .card-body{padding:0;gap:0.25rem;min-width:0}
.card.card-row .card-cat{font-size:0.75rem;min-height:1rem;gap:0.375rem}
.card.card-row .card-cat .card-brand{font-size:0.75rem}
.card.card-row .card-cat .card-brand+*::before{margin-inline-end:0.375rem}
.card.card-row[data-brand="BiotechUSA"]{--logo-w:4.125rem;--logo-h:0.626875rem}
.card.card-row[data-brand="Scitec Nutrition"]{--logo-w:3rem;--logo-h:0.81625rem}
.card.card-row[data-brand="GASP" i]{--logo-w:3.5rem;--logo-h:0.676875rem}
.card.card-row[data-brand="Gorilla Wear"]{--logo-w:2.75rem;--logo-h:1.01125rem}
.card.card-row .card-name{font-size:0.9375rem;line-height:1.35;min-height:0;margin:0;color:var(--ink)}
.card.card-row .card-foot{padding-top:0.125rem;display:flex;align-items:center;justify-content:space-between;gap:0.625rem}
.card.card-row .card-price{font-size:1.0625rem}
.card.card-row .card-price small{font-size:0.75rem}
.card.card-row .card-add{position:relative;top:auto;inset-inline-end:auto;width:2.375rem;height:2.375rem}
.card.card-row .card-add svg{width:1.125rem;height:1.125rem}

/* داخل النص */
.art-inline{margin:1.875rem 0 2.125rem;padding:1.125rem 1.25rem;border-radius:var(--sharp);background:#f2f5f9}
.art-inline-k{font-size:0.8125rem;font-weight:600;color:var(--royal);margin-bottom:0.875rem;line-height:1.4}
.art-inline-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr));gap:1rem 1.5rem}
.art-inline-list:has(>.card:only-child){max-width:28.75rem}
.art-inline .card.card-row{grid-template-columns:6rem minmax(0,1fr)}
.art-inline .card-img{background:#fff}
.art-inline:not(:has(.card:not([hidden]):not([data-stock="out"]))){display:none}

/* بجانب المقال */
.art-aside{display:none}
@media(min-width:1180px){
  .art-aside{display:block;position:sticky;top:8.9375rem;padding-top:1.875rem;padding-inline-end:0.375rem;
    max-height:calc(100vh - 9.375rem);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;
    scrollbar-color:transparent transparent}
  .art-aside:hover{scrollbar-color:rgba(0,0,0,.2) transparent}
  .art-aside:not(:has(.card:not([hidden]):not([data-stock="out"])))>*{display:none}
}
.art-aside-in{border-top:0.125rem solid var(--iron);padding-top:0.875rem}
.art-aside h2{font-size:0.9375rem;font-weight:600;letter-spacing:0;color:var(--iron);margin:0 0 1rem}
.art-aside-list{display:grid;gap:1rem}

/* بعد المقال: خمسة في صفّ حين تكون خمسة */
@media(min-width:1081px){.art-shop-grid.n5{grid-template-columns:repeat(5,1fr)}}
@media(max-width:560px){
  .art-inline{padding:0.875rem;margin:1.5rem 0 1.75rem;border-radius:var(--sharp)}
  .art-inline-list{grid-template-columns:1fr;gap:0.875rem}
  .art-inline .card.card-row{grid-template-columns:5.25rem minmax(0,1fr)}
  .abody ul.alist li{font-size:1rem}
}


/* ‖ ٢٧. صفحات القوائم: البطاقات تتحرّك مع التمرير ‖
   مربوطة بموضع التمرير لا بزمن: كل بطاقة تحسب حالتها من مكانها في
   الشاشة الآن، فالنزول يُدخلها، والصعود يعكسها، والنزول ثانيةً يُعيدها —
   بلا صنف «ظهرت» يُضاف مرّة ويبقى (طلب المالك صراحة).
   - الدخول (‎entry‎): من أسفل الشاشة شفّافةً، أخفض ‎110px‎، أصغر، ومائلةً للخلف
     قليلاً (‎rotateX‎ حول حافّتها السفلى) فتنتصب في مكانها (طلب المالك: أقوى)،
     وتبلغ حالتها الكاملة لحظة دخولها كلّها — فأيّ بطاقة ظاهرة بتمامها
     ظاهرةٌ بتمامها مهما قصرت الصفحة.
   - التتابع: كل عمود يبدأ بعد جاره بقليل (‎--mm-lag‎، بترتيب القراءة)،
     والأعمدة الطرفية تنضمّ من الخارج نحو المركز (‎--mm-dx‎)، فيبدو الصفّ
     يُرتَّب أمام الزائر. القيم يكتبها motion.js ‏(١٣·٦) بحسب الأعمدة الفعلية.
   - الخروج من الأعلى: خفوتٌ وصعودٌ طفيف، يُعكس عند الرجوع.
   - الصورة داخل البلاطة: انزياحٌ عموديّ صغير عبر مرور البطاقة (‎translate‎
     لا ‎transform‎ فلا يلغي تكبير التحويم).
   الحركة تُركَّب على البطاقات القريبة من الشاشة وحدها (‎.mm-near‎ من motion.js)،
   فلا تُحدَّث مئات المؤثّرات في كل إطار. التحريك (‎scroll-driven animations‎) بلا جافاسكربت
   في كل إطار. المتصفّحات التي لا تدعمها يغطّيها motion.js بالحساب نفسه. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .col-layout #pgrid>.card.mm-near{
      view-timeline-name:--mm-card;view-timeline-axis:block;
      animation-name:mm-card-in,mm-card-out;
      animation-duration:1ms,1ms;
      animation-timing-function:linear,linear;
      animation-fill-mode:both,forwards;
      animation-timeline:--mm-card,--mm-card;
      animation-range-start:entry calc(var(--mm-lag,0) * 1%),exit 20%;
      animation-range-end:entry 100%,exit 100%;
      transform-origin:50% 100%}
    .col-layout #pgrid>.card.mm-near .card-img>img{
      animation:mm-card-img 1ms linear both;animation-timeline:--mm-card;
      animation-range:cover 0% cover 100%}
    .col-layout .col-head{
      animation:mm-head-out 1ms linear both;animation-timeline:view();
      animation-range:exit 0% exit 100%}
  }
}
@keyframes mm-card-in{
  0%{opacity:0;
     transform:perspective(75rem) translate3d(var(--mm-dx,0px),6.875rem,0) rotateX(16deg) rotate(var(--mm-rz,0deg)) scale(.86);
     animation-timing-function:cubic-bezier(.16,.84,.3,1)}
  55%{opacity:1}
  100%{opacity:1;transform:perspective(75rem) translate3d(0,0,0) rotateX(0deg) rotate(0deg) scale(1)}
}
@keyframes mm-card-out{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);animation-timing-function:cubic-bezier(.55,0,.75,.45)}
  100%{opacity:.45;transform:translate3d(0,-0.75rem,0) scale(.97)}
}
@keyframes mm-card-img{
  from{translate:0 1.375rem}
  to{translate:0 -1.375rem}
}
@keyframes mm-head-out{
  0%{opacity:1;transform:none}
  100%{opacity:.15;transform:translate3d(0,-1.125rem,0)}
}
@media (max-width:560px){
  @keyframes mm-card-in{
    0%{opacity:0;
       transform:perspective(56.25rem) translate3d(var(--mm-dx,0px),4rem,0) rotateX(12deg) rotate(var(--mm-rz,0deg)) scale(.9);
       animation-timing-function:cubic-bezier(.16,.84,.3,1)}
    55%{opacity:1}
    100%{opacity:1;transform:perspective(56.25rem) translate3d(0,0,0) rotateX(0deg) rotate(0deg) scale(1)}
  }
  @keyframes mm-card-img{
    from{translate:0 0.75rem}
    to{translate:0 -0.75rem}
  }
}
/* البطاقة لا تنتقل بـ‎transition:all‎ في هذه الصفحات: الحركة كلّها من
   التمرير، وانتقالٌ عامّ كان سيُبطئ ما يكتبه البديل البرمجيّ كل إطار */
.col-layout #pgrid>.card{transition:box-shadow .18s,border-color .18s,scale 90ms}


/* ‖ ٢٨. هوية مصل مانيا — الخيار ١ (المصدر: ملفّ الهوية، الصفحتان ٣ و٤) ‖
   الألوان الرسمية مقروءة من رسوم الملفّ نفسه لا مقدَّرة بالعين:
     سماويّ   #0D9CF8  — اللون الأساسي: الأفعال، الإبراز، الأقسام الملوّنة
     أكوا     #00DFCE  — نقش العلامة: لمسة الصحّة والنجاح والتوفّر وحدها
     ملكيّ    #0A59A9  — عمق السماويّ: الروابط والنصوص الملوّنة الصغيرة
     كحليّ    #1F296F  — يبقى في الملفّ، ويُستغنى عنه كأرضية (طلب المالك)
     حبر      #141414  — العناوين والشعار على الأبيض (النسخة السوداء الرسمية)
   قاعدة الأدوار:
   - السماويّ للمساحات الكبيرة والأزرار؛ نصّ صغير ملوّن على الأبيض يأخذ
     الملكيّ لأنّ السماويّ على الأبيض 2.95:1 فقط.
   - الأكوا خلفيةً أو نقطةً أو أيقونة؛ نصّه الملوّن بدرجته الغامقة ‎--aqua-ink‎.
   - الأقسام الملوّنة تدرّج من الملكيّ إلى السماويّ، والنصّ فوقها على
     جانبه الأغمق — لا كتل كحليّة. */
:root{
  --brand:#0d9cf8;--brand-deep:#0a59a9;--brand-navy:#1f296f;--brand-aqua:#00dfce;--brand-ink:#141414;
  --sky:#0d9cf8;--sky-600:#0b88e2;--sky-50:#ebf6fe;--sky-100:#d8eefd;--sky-200:#b4ddfb;
  --aqua:#00dfce;--aqua-ink:#007f76;--aqua-50:#e2faf7;
  --brand-grad:linear-gradient(125deg,#0a59a9 0%,#0b78d2 50%,#0c8fee 100%);
  --brand-grad-rtl:linear-gradient(235deg,#0a59a9 0%,#0b78d2 50%,#0c8fee 100%);
  /* الأسماء القديمة تنتقل إلى الهوية الجديدة */
  --iron:#0a59a9;--iron-2:rgba(255,255,255,.1);--iron-3:rgba(255,255,255,.2);
  --slate:#141414;--slate-2:#555c69;
  --royal:#0a59a9;--volt:#0d9cf8;--volt-deep:#0a59a9;--volt-soft:#e8f5fe;--blue:#0d9cf8;
  --teal:#00dfce;
  --ink:#141414;--ink-2:#3e4452;--muted:#626978;--line:#e1e8f0;--line-2:#c9d4e1;
  --bg:#f4f8fc;--bg-2:#eaf2fa;--bg-3:#f0f5fb;--bg-4:#dbe8f5;
}
::selection{background:rgba(13,156,248,.22)}

/* ── الأزرار: سماويّة، وتمتلئ بالملكيّ عند التحويم ── */
.button{background:var(--sky);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.button::before{background:var(--brand-deep)}
.button:hover{background:var(--sky);color:#fff;box-shadow:0 0.625rem 1.5rem -0.5rem rgba(13,156,248,.6)}
.button.volt{background:var(--sky)}
.button.volt::before{background:var(--brand-deep)}
.button.ghost{background:transparent;color:var(--brand-deep);border-color:var(--sky-200);box-shadow:none}
.button.ghost::before{background:var(--sky)}
.button.ghost:hover{color:#fff;border-color:var(--sky);box-shadow:0 0.625rem 1.5rem -0.625rem rgba(13,156,248,.55)}
.story .button.ghost:hover,.mm-band .button.ghost:hover,.mm-hero .button.ghost:hover,
.ftr .button.ghost:hover,.mm-cta .button.ghost:hover,.hero-b .button.ghost:hover{color:var(--brand-deep);border-color:#fff}
.card-add{background:var(--sky)}
.card-add:hover{background:var(--brand-deep)}
.card-add.mm-done{background:var(--aqua)!important;color:#063a35}
.card-badge{background:var(--brand-deep)}
.sec-head>a{color:var(--brand-deep)}
.sec-head>a::after{background:var(--sky)}

/* ── الرأس: شريطٌ علويّ سماويّ فاتح، الشعار بالحبر الرسميّ ── */
.utility{background:var(--sky-50);color:var(--brand-deep);border-bottom:1px solid var(--sky-100)}
.utility b{color:var(--brand-deep)}
.util-links a{color:var(--ink-2);opacity:1}
.util-links a:hover{color:var(--brand-deep)}
.hdr .logo-img,.mm-nav-hd .logo-img{background-color:var(--brand-ink)}
.search input:focus{border-color:var(--sky);box-shadow:0 0 0 0.25rem rgba(13,156,248,.15)}
.search:hover button{color:var(--brand-deep)}
.burger span{background:var(--brand-ink)}
.lang-toggle[data-lang="ar"] .lt-ar{color:var(--brand-deep)}
.mega-col h4{color:var(--brand-ink)}
.mm-nav-t .nav-ico{color:var(--sky)}
.mm-nav-body>a,.mm-nav-grp>button{color:var(--brand-ink)}
.mm-nav-grp.open>button{color:var(--brand-deep)}
@media(min-width:821px){
  .mainnav li:hover .nav-ico{color:var(--sky)}
  .mainnav ul{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(235,246,254,.62))}
}

/* ── الصفحة الرئيسية: الهيرو والأشرطة بتدرّج العلامة ── */
.hero,.hero-b,.pd-hero,.wh-hero{background:var(--brand-grad);color:#fff}
html[dir=rtl] .hero-b,html[dir=rtl] .pd-hero,html[dir=rtl] .wh-hero{
  background:var(--brand-grad-rtl)}
.hero-b::before{background-color:rgba(255,255,255,.075)}
.hero-b::after{background:radial-gradient(circle,rgba(0,223,206,.3),transparent 62%)}
.hero-b h1 em{color:var(--aqua)}
.hero-b-sub{color:rgba(255,255,255,.9)}
.hero-b-proof{border-top-color:rgba(255,255,255,.22)}
.hero-b-proof li{color:rgba(255,255,255,.9)}
.hero-b-proof svg{color:var(--aqua)}
.hero-b .button.volt,.hero-b .button:not(.ghost){background:#fff;color:var(--brand-deep)}
.hero-b .button:not(.ghost)::before{background:var(--sky-50)}
.hero-b .button:not(.ghost):hover{color:var(--brand-deep);box-shadow:0 0.75rem 1.875rem -0.625rem rgba(4,30,70,.45)}
.pd-hero .pr-goal{color:var(--aqua)}
.adv-card{box-shadow:0 1.875rem 5rem -0.625rem rgba(4,40,90,.4),0 0 0 1px rgba(255,255,255,.2)}
.adv-card-out b{color:var(--brand-deep)}
.adv-card-dot{background:var(--aqua);box-shadow:0 0 0 0.25rem rgba(0,223,206,.22)}
@keyframes adv-pulse{0%,100%{box-shadow:0 0 0 0.25rem rgba(0,223,206,.24)}50%{box-shadow:0 0 0 0.5625rem rgba(0,223,206,.08)}}

.mm-band,.story{background:var(--brand-grad);color:#fff}
html[dir=rtl] .mm-band,html[dir=rtl] .story{background:var(--brand-grad-rtl)}
.mm-band p,.story p{color:rgba(255,255,255,.86)}
.mm-band .eyebrow,.story .lead{color:var(--aqua)}
.mm-figs,.stats,.mm-steps{background:rgba(255,255,255,.22)}
.mm-fig,.stat,.mm-step{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(0.375rem);backdrop-filter:blur(0.375rem)}
.mm-step:hover,.stat:hover{background:rgba(255,255,255,.18)}
.mm-fig span,.stat span,.mm-step p{color:rgba(255,255,255,.82)}
.mm-step i{color:#fff;background:rgba(0,223,206,.28);border-color:rgba(0,223,206,.75)}
/* على الأشرطة الملوّنة الزرّ الأساسي أبيض — السماويّ على السماويّ يختفي */
.mm-band .button:not(.ghost),.story .button:not(.ghost){background:#fff;color:var(--brand-deep)}
.mm-band .button:not(.ghost)::before,.story .button:not(.ghost)::before{background:var(--sky-50)}
.mm-band .button:not(.ghost):hover,.story .button:not(.ghost):hover{color:var(--brand-deep);box-shadow:0 0.75rem 1.875rem -0.625rem rgba(4,30,70,.45)}
.adv-band::before{background-color:#fff;opacity:.12}

.lib-tile,.promo-photo{background:var(--brand-deep)}
.lib-tile::after{background:linear-gradient(to top,rgba(10,89,169,.95) 16%,rgba(10,89,169,.5) 58%,rgba(13,156,248,.32))}
.lib-n,.lib-tile p{color:rgba(255,255,255,.88)}
.lib-go{color:#fff}

/* بلاطات المنتجات وصورها: رماديّ مائل إلى سماء العلامة */
.card{--tile:#e9f2fb}
.cat-tile-img,.art-inline .card-img{background:#e9f2fb}

/* ── التذييل: تدرّج العلامة ونقش M خافت ── */
.ftr{background:radial-gradient(56.25rem 27.5rem at 88% -12%,rgba(13,156,248,.62),transparent 62%),linear-gradient(180deg,#0a59a9,#0b6cc8);
  color:rgba(255,255,255,.84);position:relative;isolation:isolate;overflow:hidden}
html[dir=rtl] .ftr{background:radial-gradient(56.25rem 27.5rem at 12% -12%,rgba(13,156,248,.62),transparent 62%),linear-gradient(180deg,#0a59a9,#0b6cc8)}
.ftr::before{content:'';position:absolute;inset:-10%;z-index:-1;pointer-events:none;
  background-color:rgba(255,255,255,.06);
  -webkit-mask-image:url(../media/brand/mm-mark-mask.png);mask-image:url(../media/brand/mm-mark-mask.png);
  -webkit-mask-size:8.125rem auto;mask-size:8.125rem auto;-webkit-mask-repeat:space;mask-repeat:space;transform:rotate(-10deg)}
.f-brand p{color:rgba(255,255,255,.86)}
.ftr li a{color:rgba(255,255,255,.82)}
.ftr .news-form input{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.ftr .news-form input::placeholder{color:rgba(255,255,255,.7)}
.ftr .news-form input:focus{border-color:#fff;box-shadow:0 0 0 0.25rem rgba(255,255,255,.18)}
.socials a{background:rgba(255,255,255,.16)}
.socials a:hover{background:#fff;color:var(--brand-deep)}
.ftr-bar{border-top-color:rgba(255,255,255,.22)}
.ftr .button:not(.ghost){background:#fff;color:var(--brand-deep)}
.ftr .button:not(.ghost)::before{background:var(--sky-50)}

/* ── الجداول والأرقام ولافتات الصفحات الداخلية ── */
.ntable th,table.rt th,table.doc-t th{background:var(--sky-50);color:var(--brand-deep);
  border-bottom:1px solid var(--sky-100)}
.num{background:var(--brand-grad);color:#fff}
.num span{color:rgba(255,255,255,.86)}
.ath .av,.co-sec h3 i,.steps i.done{background:var(--sky);color:#fff}
.wk-now,.wk.is-on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.toast{background:var(--brand-ink);color:#fff;box-shadow:inset 0.1875rem 0 0 var(--aqua),0 1.125rem 2.5rem -0.75rem rgba(0,0,0,.4)}
html[dir=rtl] .toast{box-shadow:inset -0.1875rem 0 0 var(--aqua),0 1.125rem 2.5rem -0.75rem rgba(0,0,0,.4)}
.cart-ov{background:rgba(8,32,64,.36)}
.mm-side-scrim{background:rgba(8,32,64,.26)}
.mm-nav-ov{background:rgba(8,32,64,.4)}

/* ── الأكوا: الصحّة، النجاح، التوفّر — لمسة لا لون ثانٍ ينافس ── */
.in-stock,.stk.in{color:var(--aqua-ink)}
.in-stock::before{background:var(--aqua);box-shadow:0 0 0 0.1875rem rgba(0,223,206,.22)}
.stk.in i{background:var(--aqua)}
.band.ok,.vchip.ok{background:var(--aqua-50);color:var(--aqua-ink)}
.tier.ok{border-right-color:var(--aqua-ink)}
.rep-ph,.wk-back button:hover{background:var(--aqua-ink);border-color:var(--aqua-ink)}
.cart-free.done .bar i{background:var(--aqua)}
.sp-dose{background:var(--aqua-50)!important;color:var(--aqua-ink)!important}
.adv-restored{background:var(--sky-50)}

/* ── شريط الترشيح والعلامات الصغيرة ── */
.mm-fbtn{background:var(--sky-50)}
.mm-fbtn:hover{background:var(--sky-100)}
.mm-fbtn[aria-expanded="true"]{background:var(--sky-100)}
.mm-fbtn-n,.mm-side-go{background:var(--sky)}
.art-aside-in{border-top-color:var(--sky)}
.art-aside h2,.sp-h{color:var(--brand-deep)}
.art-inline{background:linear-gradient(135deg,var(--sky-50),#f3fbfd)}
.art-inline-k{color:var(--brand-deep)}

/* ‖ ٢٩. شفق خلف هيرو الصفحة الرئيسية ‖
   نقلٌ لمكوّن AuroraBackground (React/Tailwind) إلى CSS خالص — الموقع HTML
   ثابت بلا بناء. الوصفة نفسها: خطوط متكرّرة داكنة فوق تدرّج ألوانٍ متكرّر،
   مغبَّشة، وطبقةٌ ثانية تنزلق ببطء (60 ثانية) بمزج «الفرق» فتتموّج الأضواء،
   محصورةً بقناعٍ بيضويّ في زاوية لوحة المستشار. الألوان ألوان الهوية
   (سماويّ، أكوا، سماويّ فاتح) بدل البنفسجيّ والنيلي في المثال.
   الطبقة المتحرّكة تُوقَف حين يخرج الهيرو من الشاشة (motion.js)، ولا تتحرّك
   مع تقليل الحركة. */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.aurora-l{position:absolute;inset:-0.625rem;pointer-events:none;opacity:.5;filter:blur(0.625rem);
  --mm-stripe:repeating-linear-gradient(100deg,#000 0%,#000 7%,transparent 10%,transparent 12%,#000 16%);
  --mm-aurora:repeating-linear-gradient(100deg,#0d9cf8 10%,#00dfce 15%,#6cc8ff 20%,#b8f5ee 25%,#0d9cf8 30%);
  background-image:var(--mm-stripe),var(--mm-aurora);
  background-size:300% 100%,200% 100%;background-position:50% 50%,50% 50%;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 70%)}
html[dir=rtl] .aurora-l{
  -webkit-mask-image:radial-gradient(ellipse at 0% 0%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse at 0% 0%,#000 10%,transparent 70%)}
.aurora-l::after{content:'';position:absolute;inset:0;mix-blend-mode:difference;
  background-image:var(--mm-stripe),var(--mm-aurora);background-size:200% 100%,100% 100%;
  animation:mm-aurora 60s linear infinite}
.aurora.is-off .aurora-l::after{animation-play-state:paused}
@keyframes mm-aurora{
  from{background-position:50% 50%,50% 50%}
  to{background-position:350% 50%,350% 50%}
}
@media(max-width:820px){.aurora-l{opacity:.4;filter:blur(0.5rem)}}
@media(prefers-reduced-motion:reduce){.aurora-l::after{animation:none}}

/* ‖ ٣٠. تبويب «المستشار» المعدنيّ ‖
   نقلٌ لمكوّن MetallicButton على تبويب المستشار وحده (motion.js ٢·٧):
   حافّةٌ معدنية سائلة (لوحة WebGL2) حول وجهٍ بسماويّ العلامة. طلب المالك
   بعدها: أصغر، وباللون السماويّ من الهوية بدل الأسود — فالكبسولة أقصر من
   البند بستّة بكسلات من كل جهة، والمعدن مصبوغٌ بالسماويّ (‎colorTint‎)،
   والظلال زرقاء خفيفة تناسب حجمها. */
@media(min-width:821px){
  .mainnav li.nav-adv>a.adv-metal-on{isolation:isolate;margin-inline:0.25rem;padding:0 1.0625rem;gap:0.375rem;font-size:1.125rem;
    color:#fff;background:none}
  .mainnav li.nav-adv>a.adv-metal-on .nav-lbl{color:#fff;font-weight:calc(var(--ui-w) + 20);text-shadow:0 1px 1px rgba(5,63,122,.38);
    transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
  .mainnav li.nav-adv>a.adv-metal-on .nav-ico{width:1.0625rem;height:1.0625rem;color:#fff;filter:drop-shadow(0 1px 1px rgba(5,63,122,.38))}
  .mainnav li.nav-adv>a.adv-metal-on .nav-ico svg{width:1.125rem;height:1.125rem}
  .mainnav li.nav-adv:hover>a.adv-metal-on,.mainnav li.nav-adv.nav-on>a.adv-metal-on{color:#fff}
  .adv-metal{position:absolute;inset:0.375rem 0;z-index:-1;border-radius:var(--sharp);pointer-events:none;
    box-shadow:0 0 0 .5px rgba(10,89,169,.35),0 0.625rem 1rem -0.5rem rgba(13,156,248,.55),0 0.1875rem 0.375rem -0.125rem rgba(10,89,169,.22);
    transition:box-shadow .15s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.34,1.56,.64,1),inset var(--d) var(--ease)}
  .hdr.stuck .adv-metal{inset:0.3125rem 0}
  /* الصبغة تُقرأ مرّةً عند البدء؛ وطبقة «الشاشة» ترفع ظلال المعدن من الأسود إلى
     الأزرق فيبقى الكروم لامعاً بألوان العلامة لا داكناً */
  .mainnav li.nav-adv>a{--adv-tint:#a8dcff;--adv-lift:#0a59a9}
  /* العدسة تنكمش إلى حجم الكبسولة حين تصلها فتختفي خلفها بدل هالةٍ حولها */
  .nav-lens.is-adv{top:0.6875rem;bottom:0.6875rem;transform:translateX(var(--lx,0px))}
  .hdr.stuck .nav-lens.is-adv{top:0.625rem;bottom:0.625rem}
  .nav-lens{transition-property:transform,width,opacity,top,bottom}
  @media(prefers-reduced-motion:reduce){.nav-lens{transition:opacity .2s ease}}
  .adv-metal-rim{position:absolute;inset:0;border-radius:var(--sharp);overflow:hidden;isolation:isolate}
  .adv-metal-rim canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:var(--sharp)}
  .adv-metal-rim::after{content:'';position:absolute;inset:0;background:var(--adv-lift);mix-blend-mode:screen;pointer-events:none}
  .adv-metal-face{position:absolute;inset:0.125rem;border-radius:var(--sharp);
    background:linear-gradient(180deg,#4dbaff 0%,#0d9cf8 55%,#0a8ae4 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}
  /* بلا WebGL2: حافّةٌ معدنية ثابتة بدرجات السماء */
  .adv-metal-static .adv-metal-rim{background:conic-gradient(from 210deg,#eaf7ff,#3a8fd0,#ffffff,#0a59a9,#d6efff,#4aa6e6,#eaf7ff)}
  a.adv-metal-on.is-hover .adv-metal{box-shadow:0 0 0 .5px rgba(10,89,169,.45),0 0.75rem 1.25rem -0.5rem rgba(13,156,248,.7),
    0 0.25rem 0.5rem -0.125rem rgba(10,89,169,.26)}
  a.adv-metal-on.is-press .adv-metal{transform:translateY(1px) scale(.97);
    box-shadow:0 0 0 .5px rgba(10,89,169,.5),0 1px 0.1875rem 0 rgba(10,89,169,.35)}
  a.adv-metal-on.is-press .adv-metal-face{box-shadow:inset 0 0.125rem 0.25rem rgba(5,63,122,.35),inset 0 1px 0.125rem rgba(5,63,122,.25)}
  .mainnav li.nav-adv:hover .nav-ico svg{transform:rotate(18deg) scale(1.12)}
  .adv-ripple{position:absolute;width:1.25rem;height:1.25rem;border-radius:50%;pointer-events:none;z-index:2;
    background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%);
    animation:adv-ripple .6s ease-out forwards}
  @keyframes adv-ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:.6}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
  @media(prefers-reduced-motion:reduce){.adv-metal,.mainnav li.nav-adv .nav-lbl{transition:none}}
}
@media(min-width:821px) and (max-width:1199px){
  .mainnav li.nav-adv>a.adv-metal-on{font-size:1.0625rem;padding:0 0.875rem}
}
@media(min-width:821px) and (max-width:1160px){
  .mainnav li.nav-adv>a.adv-metal-on{font-size:1rem;padding:0 0.75rem}
}
@media(min-width:821px) and (max-width:1000px){
  .mainnav li.nav-adv>a.adv-metal-on{font-size:0.96875rem;padding:0 0.6875rem}
}

/* ‖ ٣١. الشعار السماويّ، وزرّ الترشيح وشريطه بزجاج شريط التنقّل ‖
   طلب المالك: الشعار بسماويّ الهوية، و«تصفية وترتيب» وشريطه الجانبي بالمادّة
   الزجاجية نفسها التي في شريط التنقّل — تدرّجٌ أبيض مائل للسماء، تغبيشٌ لما
   تحته، لمعةٌ في الحافّة العليا، خيطُ انكسارٍ رفيع، وظلٌّ أزرق ناعم. الخيار
   داخل الشريط «عدسة» بيضاء بارزة كعدسة التنقّل. التذييل يبقى بشعارٍ أبيض. */
.hdr .logo-img,.mm-nav-hd .logo-img{background-color:var(--sky)}

:root{
  --glass:linear-gradient(180deg,rgba(255,255,255,.8),rgba(235,246,254,.64));
  --glass-blur:blur(1.5rem) saturate(190%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(12,74,140,.05),0 0 0 .5px rgba(12,74,140,.14);
  --glass-rim:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 34%,rgba(13,156,248,.26) 62%,rgba(255,255,255,.8));
  --glass-lens:inset 0 1px 1px #fff,inset 0 -1px 1px rgba(12,74,140,.06),0 0 0 .5px rgba(12,74,140,.12),
    0 0.4375rem 1.125rem -0.5rem rgba(12,74,140,.36),0 1px 0.1875rem rgba(12,74,140,.08);
}

/* ── زرّ «تصفية وترتيب» ── */
.mm-fbtn{position:relative;isolation:isolate;border-radius:var(--sharp);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 0.875rem 1.875rem -1rem rgba(12,74,140,.42),0 0.1875rem 0.5rem -0.25rem rgba(12,74,140,.14);
  color:var(--brand-ink);font-weight:500;
  /* بلا ارتدادٍ زائد: المنحنى القديم (1.56) كان يتجاوز الحجم ويعود فيبدو الزرّ «يرتجف»
     بعد كل ضغطة (بلاغ المالك: رجفةٌ عند الضغط على «تصفية وترتيب») */
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.mm-fbtn::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* لمعةٌ تتبع المؤشّر فوق الزجاج (motion.js يكتب ‎--gx/--gy‎) */
.mm-fbtn::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(5.625rem 2.75rem at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.95),rgba(255,255,255,0) 72%);
  opacity:0;transition:opacity .35s ease}
.mm-fbtn svg{color:var(--sky);transition:transform .34s cubic-bezier(.22,1,.36,1)}
.mm-fbtn:hover{background:var(--glass);transform:translateY(-1px);
  box-shadow:var(--glass-edge),0 1.125rem 2.25rem -1rem rgba(12,74,140,.5),0 0.25rem 0.625rem -0.25rem rgba(12,74,140,.16)}
.mm-fbtn:hover::after{opacity:1}
.mm-fbtn:hover svg{transform:rotate(-8deg) scale(1.08)}
.mm-fbtn:active{transform:scale(.96);transition-duration:.14s}
.mm-fbtn[aria-expanded="true"]{background:linear-gradient(180deg,#fff,rgba(236,247,255,.92));
  box-shadow:var(--glass-edge),0 0 0 0.09375rem rgba(13,156,248,.5),0 0.75rem 1.625rem -0.875rem rgba(13,156,248,.55)}
.mm-fbtn-n{background:var(--sky);box-shadow:0 0.125rem 0.375rem -0.125rem rgba(13,156,248,.7)}

/* ── الشريط الجانبي (المتجر والبرامج والتمارين) ── */
.mm-side,.ex-filters.mm-side{--s-hover:rgba(255,255,255,.62);--s-on:#fff;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-radius:var(--sharp);
  box-shadow:var(--glass-edge),inset 0 0 0 1px rgba(255,255,255,.55),
    0 1.5rem 3.375rem -1.75rem rgba(12,74,140,.45),0 0.25rem 0.75rem -0.375rem rgba(12,74,140,.12)}
.mm-side .mm-row{transition:background-color 220ms ease,box-shadow 260ms ease,transform 220ms var(--s-soft)}
.mm-side .mm-row:has(input:checked),.mm-side .mm-row.on{background:var(--s-on);box-shadow:var(--glass-lens)}
.mm-side .mm-row:has(input:checked) .mm-ico,.mm-side .mm-row.on .mm-ico,.mm-side .mm-tick{color:var(--sky)}
.mm-side .mm-row:has(input:checked) .mm-mono{background:var(--sky);color:#fff}
.mm-side .mm-mono{background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 .5px rgba(12,74,140,.16)}
.mm-sec-n{background:var(--sky)}
.mm-side .ex-search{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 .5px rgba(12,74,140,.14),inset 0 1px 0.125rem rgba(12,74,140,.06)}
.mm-side .ex-search:focus{background:#fff;box-shadow:0 0 0 .5px rgba(12,74,140,.14),0 0 0 0.1875rem rgba(13,156,248,.3)}
.mm-side .button.mm-reset,.mm-side-clear{border-radius:var(--sharp);background:rgba(255,255,255,.72);color:var(--brand-deep);
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.16),0 0.3125rem 0.75rem -0.5rem rgba(12,74,140,.36)}
.mm-side .button.mm-reset:hover,.mm-side-clear:hover{background:var(--sky);color:#fff;
  box-shadow:0 0.5rem 1.125rem -0.5rem rgba(13,156,248,.7)}
.mm-side-x{background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.16),0 0.1875rem 0.5rem -0.3125rem rgba(12,74,140,.35)}
.mm-side-x:hover{background:#fff;color:var(--brand-ink)}
@media(max-width:1080px){
  /* عائماً فوق البطاقات: الزجاج أشفّ قليلاً فيُرى ما تحته مغبَّشاً، وظلّه أعمق */
  .col-layout>.mm-side-shop{border-radius:var(--sharp);
    background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(232,245,254,.6));
    -webkit-backdrop-filter:blur(1.875rem) saturate(200%);backdrop-filter:blur(1.875rem) saturate(200%);
    box-shadow:var(--glass-edge),inset 0 0 0 1px rgba(255,255,255,.55),0 2.125rem 5.625rem -1.625rem rgba(8,40,90,.55)}
  .mm-side-go{border-radius:var(--sharp);background:var(--sky);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0.625rem 1.375rem -0.625rem rgba(13,156,248,.75)}
}
@media(prefers-reduced-transparency:reduce){
  .mm-fbtn,.mm-side,.ex-filters.mm-side,.col-layout>.mm-side-shop{background:#f4f9fe;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  .mm-fbtn,.mm-fbtn svg{transition:none}
  .mm-fbtn:hover{transform:none}
}

/* ‖ ٣٢. حقل البحث واختيار اللغة بالزجاج نفسه ‖
   طلب المالك: البحث وكبسولة اللغة وقائمتها بمادّة شريط التنقّل — تدرّجٌ
   أبيض مائل للسماء، تغبيش، لمعة الحافّة العليا، خيط الانكسار (‎::before‎ على
   النموذج لأنّ الحقل لا يقبل عناصر زائفة)، وظلٌّ أزرق ناعم. التركيز حلقةٌ
   سماوية والحقل يصفو إلى الأبيض ليُقرأ ما يُكتب. */
.hdr .search::before,.lang-toggle::before,.lt-menu::before{content:'';position:absolute;inset:0;z-index:2;
  border-radius:inherit;padding:1px;pointer-events:none;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hdr .search{border-radius:var(--sharp)}
.hdr .search button{z-index:3}
.hdr .search input{border-color:transparent;background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 0.75rem 1.75rem -1rem rgba(12,74,140,.36),0 0.1875rem 0.5rem -0.25rem rgba(12,74,140,.1)}
.hdr .search input:hover{box-shadow:var(--glass-edge),0 1rem 2rem -1rem rgba(12,74,140,.44),0 0.25rem 0.625rem -0.25rem rgba(12,74,140,.13)}
.hdr .search input:focus{border-color:transparent;background:linear-gradient(180deg,#fff,rgba(242,249,255,.95));
  box-shadow:var(--glass-edge),0 0 0 0.09375rem rgba(13,156,248,.6),0 0 0 0.3125rem rgba(13,156,248,.14),0 0.875rem 1.875rem -1rem rgba(13,156,248,.42)}
.hdr .search input{font-family:'Red Hat Display','MM Arabic',system-ui,sans-serif;font-weight:500}
.hdr .search input::placeholder{color:#5f6878;font-weight:500}

.icon-btn.lang-toggle,.icon-btn.lang-toggle:hover{background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.icon-btn.lang-toggle{box-shadow:var(--glass-edge),0 0.625rem 1.5rem -0.875rem rgba(12,74,140,.4),0 0.125rem 0.375rem -0.1875rem rgba(12,74,140,.12)}
.icon-btn.lang-toggle:hover{box-shadow:var(--glass-edge),0 0.875rem 1.75rem -0.875rem rgba(12,74,140,.48),0 0.1875rem 0.5rem -0.1875rem rgba(12,74,140,.15)}
.lt-wrap.open .icon-btn.lang-toggle{background:linear-gradient(180deg,#fff,rgba(236,247,255,.92));
  box-shadow:var(--glass-edge),0 0 0 0.09375rem rgba(13,156,248,.5),0 0.625rem 1.5rem -0.75rem rgba(13,156,248,.5)}
.lang-toggle:focus-visible{box-shadow:var(--glass-edge),0 0 0 0.09375rem var(--volt),0 0 0 0.3125rem rgba(13,156,248,.24)}
.lang-toggle>*{position:relative;z-index:1}

/* القائمة أشفّ قليلاً فيُرى شريط التنقّل والهيرو تحتها مغبَّشين */
.lt-menu{border-radius:var(--sharp);padding:0.375rem;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(232,245,254,.66));
  -webkit-backdrop-filter:blur(1.625rem) saturate(200%);backdrop-filter:blur(1.625rem) saturate(200%);
  box-shadow:var(--glass-edge),0 1.625rem 3.375rem -1.25rem rgba(12,74,140,.48),0 0.3125rem 0.875rem -0.375rem rgba(12,74,140,.16)}
.lt-opt{position:relative;z-index:3;border-radius:var(--sharp)}
.lt-opt:hover,.lt-opt:focus-visible{background:rgba(255,255,255,.55)}
.lt-opt[aria-checked="true"]{background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));box-shadow:var(--glass-lens)}

@media(prefers-reduced-transparency:reduce){
  .hdr .search input,.icon-btn.lang-toggle,.icon-btn.lang-toggle:hover,.lt-menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ‖ ٣٣. إطارات صور القائمة الكبرى بالزجاج ‖
   طلب المالك: مربّعات صور الأقسام بمادّة الزجاج. اللوحة بيضاء فلا شيء
   تحتها يُغبَّش، فالزجاج هنا ضوءٌ لا تغبيش: أرضيةٌ متدرّجة من الأبيض إلى
   سماءٍ فاتحة (الصورة تمتزج بها بـ multiply كما كانت)، ثم فوق الصورة
   لمعةٌ هلالية في الأعلى، حافّةٌ داخلية بيضاء، وخيط الانكسار نفسه، وظلٌّ
   أزرق ناعم. عند التحويم يرتفع الإطار قليلاً ويشتدّ ظلّه. */
.mm-mt .mthumb{position:relative;border-radius:var(--sharp);
  background:radial-gradient(120% 85% at 28% 8%,#fff 0%,rgba(255,255,255,0) 62%),
    linear-gradient(160deg,#f1f8ff 0%,#dbeaf8 100%);
  box-shadow:0 0 0 .5px rgba(12,74,140,.14),0 0.5rem 1.125rem -0.625rem rgba(12,74,140,.42),0 0.125rem 0.3125rem -0.1875rem rgba(12,74,140,.14);
  transition:box-shadow .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.mm-mt .mthumb::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(130% 55% at 50% -12%,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 48%,rgba(255,255,255,0) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 -0.625rem 1rem -0.75rem rgba(13,156,248,.3)}
.mm-mt .mthumb::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.mm-mt:hover .mthumb{transform:translateY(-0.125rem);
  box-shadow:0 0 0 .5px rgba(12,74,140,.18),0 0.875rem 1.5rem -0.75rem rgba(12,74,140,.5),0 0.1875rem 0.5rem -0.1875rem rgba(12,74,140,.16)}
@media(prefers-reduced-motion:reduce){.mm-mt .mthumb{transition:box-shadow .2s ease}.mm-mt:hover .mthumb{transform:none}}

/* ‖ ٣٤. شعارات العلامات في شريط الترشيح ‖
   طلب المالك: قسم «العلامة التجارية» بالشعارات لا بالحروف، ثم: بلا إطار.
   الشعار بألوانه الأصلية مباشرةً على الزجاج داخل خانةٍ ثابتة ‎56×17‎ (صُغِّرت بطلب المالك)
   (‎contain‎، وملفّ Scitec يُقصّ هامشه كما على البطاقات)، فتبدأ الأسماء كلّها
   من الخطّ نفسه. العلامة التي لم يصل ملفّ شعارها بعد تبقى بحرفها في الخانة
   نفسها بلا بلاطة. الاختيار تدلّ عليه عدسة الصفّ والصحّ. */
.mm-side .mm-row .mm-logo,.mm-side .mm-row .mm-mono{width:3.5rem;height:1.0625rem;margin:0;flex:none;
  border-radius:0;background-color:transparent;box-shadow:none}
.mm-side .mm-logo{background:var(--logo) center/var(--logo-fit,contain) no-repeat}
.mm-side .mm-mono{font:600 0.8125rem/1 var(--fn);color:var(--s-3)}
.mm-side .mm-row:has(input:checked) .mm-mono{background:none;color:var(--sky)}

/* ‖ ٣٥. شعار الرأس ‖
   جُرّبت هنا مؤثّرات (ملمس، إضاءة خلفية، توهّج، ظلّ، خطّ MANIA أثخن) ثم طلب المالك
   إعادة الشعار كما كان: القناع الأصلي بالسماويّ (القسم ٣١)، بلا أيّ مؤثّر. */

/* ‖ ٣٦. رقم الواتساب في إتمام الطلب ‖
   حقلٌ واحد بشكل حقول النموذج نفسها: رمز الدولة (‎+970‎ بعَلَم فلسطين و‎+972‎ بعَلَم إسرائيل فقط)
   ثم رقم الجوّال، وفي الطرف أيقونة الحالة الصغيرة — دوّامة أثناء التحقّق، ✓ بأكوا
   العلامة، ✕ أحمر، أو دائرة رمادية حين يتعذّر التحقّق. تحته سطرٌ واحد صغير.
   الحقل ‎ltr‎ في اللغتين: الرمز يسبق الرقم كما يُكتب الرقم دولياً. */
.fld-p.fld-wa label{display:flex;align-items:center;gap:0.4375rem}
.fld-wa .wa-glyph{width:1rem;height:1rem;flex:none;color:#1faa53}
.wa-field{position:relative;display:flex;align-items:stretch;height:2.875rem;border:0.09375rem solid var(--line);border-radius:var(--sharp);
  background:var(--bg-2);transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.wa-field:focus-within{border-color:var(--sky);background:#fff;box-shadow:0 0 0 0.25rem rgba(13,156,248,.14)}
.wa-field[data-state="verified"]{border-color:rgba(0,127,118,.5)}
.wa-field[data-state="verified"]:focus-within{box-shadow:0 0 0 0.25rem rgba(0,223,206,.16)}
.wa-field[data-state="not_on_whatsapp"],.wa-field[data-state="invalid"],.wa-field[data-state="empty"]{border-color:rgba(229,72,77,.65)}
.wa-field[data-state="not_on_whatsapp"]:focus-within,.wa-field[data-state="invalid"]:focus-within,
.wa-field[data-state="empty"]:focus-within{box-shadow:0 0 0 0.25rem rgba(229,72,77,.12)}

.wa-cc{position:relative;flex:none;display:flex}
.wa-cc-btn{display:flex;align-items:center;gap:0.4375rem;height:100%;margin:0;padding:0 0.5625rem 0 0.75rem;border:0;
  border-right:1px solid var(--line);border-radius:var(--sharp) 0 0 var(--sharp);background:none;cursor:pointer;
  font:600 0.9375rem/1 var(--fn);color:var(--ink);-webkit-tap-highlight-color:transparent;transition:background-color .16s ease}
.wa-cc-btn:hover{background:rgba(13,156,248,.07)}
.wa-cc-btn:focus-visible{outline:0.125rem solid var(--sky);outline-offset:-0.1875rem}
.wa-flag{flex:none;display:block;width:1.375rem;height:0.9375rem;border-radius:var(--sharp);overflow:hidden;box-shadow:0 0 0 .5px rgba(0,0,0,.22)}
.wa-flag svg{display:block;width:100%;height:100%}
.wa-chev{width:0.875rem;height:0.875rem;color:var(--muted);transition:transform .32s cubic-bezier(.32,.72,0,1)}
.wa-cc.open .wa-chev{transform:rotate(180deg)}

.fld-p .wa-field input{flex:1;min-width:0;width:auto;height:100%;margin:0;padding:0 2.625rem 0 0.75rem;border:0;border-radius:0 var(--sharp) var(--sharp) 0;
  background:transparent;box-shadow:none;color:var(--ink);font:500 1rem/1 var(--fn);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;direction:ltr;text-align:left}
.fld-p .wa-field input:focus{outline:0;background:transparent;border:0}
.fld-p .wa-field input::placeholder{color:#9aa3b2;letter-spacing:.02em}

/* أيقونة الحالة */
.wa-ico{position:absolute;right:0.75rem;top:50%;width:1.25rem;height:1.25rem;margin-top:-0.625rem;pointer-events:none}
.wa-ico>*{position:absolute;inset:0;width:1.25rem;height:1.25rem;opacity:0;transform:scale(.55);
  transition:opacity .16s ease,transform .34s cubic-bezier(.34,1.56,.64,1)}
.wa-ok{color:#0a9f8f}
.wa-no{color:var(--red,#e5484d)}
.wa-na{color:#9aa3b2}
.wa-spin{box-sizing:border-box;border-radius:50%;border:0.125rem solid rgba(13,156,248,.22);border-top-color:var(--sky);
  transform:none;animation:wa-spin .7s linear infinite}
.wa-field[data-state="checking"] .wa-spin{opacity:1}
.wa-field[data-state="verified"] .wa-ok,.wa-field[data-state="not_on_whatsapp"] .wa-no,
.wa-field[data-state="unavailable"] .wa-na{opacity:1;transform:none}
@keyframes wa-spin{to{transform:rotate(360deg)}}

.wa-msg{min-height:1.125rem;margin:0.375rem 0.125rem 0;font-size:0.78125rem;line-height:1.45;color:var(--muted)}
.wa-msg[data-tone="ok"]{color:#08806f}
.wa-msg[data-tone="bad"]{color:#c9353a}
/* رسالة زرّ التأكيد لا تحجز مكاناً وهي فارغة: ملخّص الطلب يبقى كما كان تماماً */
#coMsg:empty{min-height:0;margin:0}

/* قائمة رمز الدولة: زجاج قائمة اللغة نفسها */
.wa-cc-menu{position:absolute;top:calc(100% + 0.5rem);left:-0.09375rem;z-index:40;min-width:9.375rem;margin:0;padding:0.375rem;list-style:none;
  border-radius:var(--sharp);background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(238,247,254,.88));
  -webkit-backdrop-filter:blur(1.5rem) saturate(190%);backdrop-filter:blur(1.5rem) saturate(190%);
  box-shadow:var(--glass-edge),0 1.375rem 2.75rem -1.125rem rgba(12,74,140,.42),0 0.25rem 0.75rem -0.375rem rgba(12,74,140,.14);
  transform-origin:top left;visibility:hidden;opacity:0;transform:translateY(-0.375rem) scale(.96);
  transition:opacity .16s ease,transform .26s cubic-bezier(.32,.72,0,1),visibility 0s linear .26s}
.wa-cc.open .wa-cc-menu{visibility:visible;opacity:1;transform:none;
  transition:opacity .16s ease,transform .4s cubic-bezier(.32,.72,0,1),visibility 0s}
.wa-cc-menu li{display:flex;align-items:center;gap:0.625rem;height:2.75rem;margin:0;padding:0 0.625rem 0 0.6875rem;border-radius:var(--sharp);cursor:pointer;
  font:600 0.96875rem/1 var(--fn);color:var(--ink);outline:0;transition:background-color .16s ease}
.wa-cc-menu li+li{margin-top:0.125rem}
.wa-cc-menu li:hover,.wa-cc-menu li:focus-visible{background:rgba(13,156,248,.09)}
.wa-cc-menu li[aria-selected="true"]{background:#fff;box-shadow:var(--glass-lens)}
.wa-cc-menu li:focus-visible{box-shadow:inset 0 0 0 0.09375rem rgba(13,156,248,.6)}
.wa-cc-menu li[aria-selected="true"]:focus-visible{box-shadow:var(--glass-lens),inset 0 0 0 0.09375rem rgba(13,156,248,.6)}
.wa-tick{width:1rem;height:1rem;margin-left:auto;color:var(--sky);opacity:0}
.wa-cc-menu li[aria-selected="true"] .wa-tick{opacity:1}
@media(prefers-reduced-motion:reduce){
  .wa-ico>*,.wa-chev,.wa-cc-menu,.wa-cc.open .wa-cc-menu{transition:opacity .15s ease}
  .wa-spin{animation-duration:1.6s}
}

/* ‖ ٣٧. شريط التمرير الزجاجي ‖
   طلب المالك: شريط التمرير الجانبي بمادّة الزجاج كبقيّة الواجهة بدل الأسطوانة
   الكحلية المحزَّزة. المقبض حبّةٌ بيضاء مائلة إلى السماء: تظليلٌ جانبيّ خفيف يعطيها
   استدارة، حافّةٌ داخلية بيضاء لامعة، وخيطٌ سماويّ رفيع حولها — كعدسة شريط
   التنقّل. عند التحويم يزداد لونها السماويّ، وعند الإمساك تمتلئ بسماويّ العلامة.
   المجرى أرضية الصفحة بلمعة زجاجية باهتة، وعلامات المنتجات فيه باقية كما كانت
   (المقبض شبه معتم فيغطّيها وهو يمرّ). */
@media (hover:hover) and (pointer:fine){
  @supports not selector(::-webkit-scrollbar){
    html{scrollbar-color:#b6dbfa var(--bg)}
    .cart-body,.mm-nav-body,.mega,.filters,.pdp-thumbs,.wk-scroll{scrollbar-color:rgba(13,156,248,.35) transparent}
  }
  ::-webkit-scrollbar-track{
    background-color:var(--bg);
    background-image:
      url(../media/deco/sb-protein.png),
      url(../media/deco/sb-creatine.png),
      url(../media/deco/sb-protein.png),
      linear-gradient(to right,rgba(12,74,140,.07) 0,rgba(255,255,255,.75) 1px,rgba(255,255,255,.35) 45%,rgba(12,74,140,.04) 100%)}
  /* الصيغة الحالية (طلب المالك): الحبّة الزجاجية البيضاء الأولى عادت، وبقيت في منتصفها
     علامة M الخاصّة بمصل مانيا — بسماويّ العلامة لتُقرأ على الأبيض، وبيضاء حين تمتلئ الحبّة
     بالسماويّ عند الإمساك. (مرّت بالأسود مع العلامة الفاتحة قبلها.) أشرطة التمرير لا تقبل
     قناعاً يُلوِّن الشعار، فالعلامة صورٌ ملوّنة مسبقاً (media/brand/mm-mark-sb*.png).
     الشريط أعرض قليلاً (20px → مقبض 14px) لتُقرأ العلامة. */
  :root{--sb-w:1.25rem}
  ::-webkit-scrollbar-thumb{
    border:0.1875rem solid transparent;border-radius:var(--sharp);
    background-color:#eaf5fe;
    background-image:
      url(../media/brand/mm-mark-sb-active.png),
      linear-gradient(to right,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 42%,rgba(13,156,248,.2) 100%),
      linear-gradient(to bottom,rgba(13,156,248,.16) 0,rgba(13,156,248,0) 22%,rgba(13,156,248,0) 78%,rgba(13,156,248,.16) 100%);
    background-size:0.625rem auto,100% 100%,100% 100%;background-position:center;background-repeat:no-repeat;
    background-clip:padding-box;background-origin:padding-box;
    box-shadow:inset 0 0 0 1px rgba(13,156,248,.34),inset 0.09375rem 0.09375rem 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(12,74,140,.1)}
  ::-webkit-scrollbar-thumb:hover{border-width:0.1875rem;background-color:#d6ecfd;
    box-shadow:inset 0 0 0 1px rgba(13,156,248,.5),inset 0.09375rem 0.09375rem 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(12,74,140,.14)}
  ::-webkit-scrollbar-thumb:active{border-width:0.1875rem;background-color:#0d9cf8;
    background-image:
      url(../media/brand/mm-mark-sb-white.png),
      linear-gradient(to right,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 50%,rgba(9,88,169,.28) 100%);
    background-size:0.625rem auto,100% 100%;
    box-shadow:inset 0 0 0 1px rgba(9,88,169,.35),inset 0.09375rem 0.09375rem 0 rgba(255,255,255,.45)}
  /* الأسطح الداخلية: الحبّة نفسها أنحف وأشفّ */
  .cart-body::-webkit-scrollbar-thumb,.mm-nav-body::-webkit-scrollbar-thumb,
  .mega::-webkit-scrollbar-thumb,.pdp-thumbs::-webkit-scrollbar-thumb{
    border-width:0.125rem;background-image:none;background-color:rgba(13,156,248,.24);
    box-shadow:inset 0 0 0 1px rgba(13,156,248,.3)}
  .cart-body::-webkit-scrollbar-thumb:hover,.mm-nav-body::-webkit-scrollbar-thumb:hover,
  .mega::-webkit-scrollbar-thumb:hover,.pdp-thumbs::-webkit-scrollbar-thumb:hover{background-color:rgba(13,156,248,.45)}
}

/* ‖ ٣٨. أيقونات الرأس: أكبر وبسماويّ العلامة ‖
   طلب المالك: «حسابي» و«السلّة» (وزرّ البحث على الهاتف) أكبر وزرقاء. الخطّ أنحف قليلاً
   مع الكِبَر فلا تثقل، والتحويم دائرةٌ سماوية باهتة والأيقونة إلى الملكيّ. */
.hdr-actions .icon-btn:not(.lang-toggle){width:3rem;height:3rem;color:var(--sky)}
.hdr-actions .icon-btn:not(.lang-toggle) svg{width:1.75rem;height:1.75rem;stroke-width:1.85}
.hdr-actions .icon-btn:not(.lang-toggle):hover{background:rgba(13,156,248,.1);color:var(--brand-deep)}
.hdr-actions .cart .badge{top:0.1875rem;inset-inline-start:0.125rem}
@media(max-width:560px){
  .hdr-actions .icon-btn:not(.lang-toggle){width:2.625rem;height:2.625rem}
  .hdr-actions .icon-btn:not(.lang-toggle) svg{width:1.5625rem;height:1.5625rem}
}

/* ‖ ٣٩. الأزرار العائمة تفسح لزرّ + (motion.js ٩·٥) ‖
   حين يقع زرّ إضافةٍ تحت زرّ واتساب أو دردشة أودو يتلاشى الزرّ العائم وينزاح قليلاً
   إلى جهته ولا يلتقط النقر، فيصل النقر إلى زرّ + تحته. */
.contact-fab.cf-btn{transition:opacity .22s ease,transform .3s cubic-bezier(.32,.72,0,1),background-color .18s ease}
.o-livechat-root{transition:opacity .22s ease}
.contact-fab.mm-fab-yield{opacity:0;pointer-events:none;transform:translateX(1.125rem) scale(.92)}   /* الزرّ في اليمين باللغتين */
.o-livechat-root.mm-fab-yield{opacity:0;pointer-events:none}
.contact-fab.mm-fab-yield.mm-fab-measure{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.contact-fab.mm-fab-yield{transform:none}}

/* ‖ ٣٩·٥. الرأس المتقلّص لا يغيّر تخطيط الصفحة (motion.js ٢) ‖
   ما يفقده الرأس من طولٍ حين يُثبَّت (32px على سطح المكتب، 14px على اللوحي، 8px على الهاتف)
   يُعاد هامشاً سفلياً بالمدّة والمنحنى نفسيهما، فمجموع ما يشغله ثابت: لا يتحرّك المحتوى
   حين يتبدّل الرأس، فيمكن أن يتبدّل عند أوّل تمرير بلا حالةٍ وسطى يتدلّى فيها الشريط. */
.hdr{transition:margin-bottom var(--d) var(--ease)}
.hdr.stuck{margin-bottom:2rem}
@media(max-width:820px){.hdr.stuck{margin-bottom:0.875rem}}
@media(max-width:560px){.hdr.stuck{margin-bottom:0.5rem}}

/* ‖ ٤٠. زرّ «تصفية وترتيب» والشريط الجانبي بخطّ شريط التنقّل ‖
   طلب المالك: الخطّ نفسه — ‎--ui-font‎ ووزن ‎--ui-w‎ (470 لاتيني / 390 عربي، جذعٌ متساوٍ
   بصرياً)، والعربية أكبر بدرجة (1px) كما في الشريط، والنصّ بالأسود نفسه. الاختيار
   والعنوان أعرض بمقدارٍ ثابت فوق الوزن الأساسي فيبقى الفرق متطابقاً في اللغتين. */
.mm-fbtn{font-family:var(--ui-font);font-weight:var(--ui-w);font-size:1rem;color:#141414}
html[lang=ar] .mm-fbtn{font-size:1.0625rem}
.mm-side,.mm-side .mm-lbl,.mm-side .ex-search{font-family:var(--ui-font)}
.mm-side .mm-row{font-weight:var(--ui-w);color:#141414}
.mm-side .mm-lbl{font-size:1rem;font-weight:var(--ui-w)}
html[lang=ar] .mm-side .mm-lbl{font-size:1.0625rem}
.mm-side .mm-row:has(input:checked) .mm-lbl,.mm-side .mm-row.on .mm-lbl{font-weight:calc(var(--ui-w) + 90)}
.mm-sec-h{font-family:var(--ui-font);font-weight:var(--ui-w);font-size:0.875rem}
html[lang=ar] .mm-sec-h{font-size:0.9375rem}
.mm-side-tt h2{font-family:var(--ui-font);font-weight:calc(var(--ui-w) + 110);font-size:1.3125rem}
html[lang=ar] .mm-side-tt h2{font-size:1.375rem}
.mm-side-count{font-family:var(--ui-font);font-weight:var(--ui-w)}
.mm-side .button.mm-reset,.mm-side-clear,.mm-side-go{font-family:var(--ui-font);font-weight:calc(var(--ui-w) + 80)}
html[lang=ar] .mm-side .button.mm-reset,html[lang=ar] .mm-side-clear{font-size:1rem}
.mm-side .ex-search{font-weight:var(--ui-w)}

/* ‖ ٤١. اختيار النكهة/المقاس فوق البطاقة (motion.js ٩·٣) ‖
   لوحةٌ زجاجية بمادّة القوائم نفسها تنبثق من أسفل صورة البطاقة، حبوب الخيارات بيضاء،
   والسعر يظهر بجانب الخيار فقط حين تختلف الأسعار. */
.mm-pick{position:absolute;z-index:6;display:flex;flex-direction:column;gap:0.5625rem;padding:0.75rem;border-radius:var(--sharp);
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(236,247,254,.88));
  -webkit-backdrop-filter:blur(1.125rem) saturate(180%);backdrop-filter:blur(1.125rem) saturate(180%);
  box-shadow:var(--glass-edge),0 1.125rem 2.5rem -1rem rgba(12,74,140,.45);
  transform-origin:50% 100%;animation:mm-pick-in .34s cubic-bezier(.32,.72,0,1) both}
.mm-pick.mm-pick-out{animation:mm-pick-out .18s ease forwards;pointer-events:none}
@keyframes mm-pick-in{from{opacity:0;transform:translateY(0.75rem) scale(.97)}}
@keyframes mm-pick-out{to{opacity:0;transform:translateY(0.5rem) scale(.98)}}
.mm-pick-hd{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  font-family:var(--ui-font);font-weight:calc(var(--ui-w) + 90);font-size:0.90625rem;color:#141414}
html[lang=ar] .mm-pick-hd{font-size:0.96875rem}
.mm-pick-x{flex:none;width:1.75rem;height:1.75rem;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.85);color:var(--ink-2);box-shadow:0 0 0 .5px rgba(12,74,140,.16)}
.mm-pick-x:hover{background:#fff;color:#141414}
.mm-pick-list{display:flex;flex-wrap:wrap;gap:0.375rem;overflow-y:auto;min-height:0;overscroll-behavior:contain;padding:1px}
.mm-pick-opt{display:inline-flex;align-items:center;gap:0.375rem;min-height:2.375rem;padding:0.375rem 0.8125rem;border:0;border-radius:var(--sharp);cursor:pointer;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 0.125rem rgba(12,74,140,.06);
  font-family:var(--ui-font);font-weight:var(--ui-w);font-size:0.84375rem;line-height:1.2;color:#141414;text-align:start;
  transition:box-shadow .16s ease,transform .16s ease,background-color .16s ease}
html[lang=ar] .mm-pick-opt{font-size:0.90625rem}
.mm-pick-opt:hover,.mm-pick-opt:focus-visible{outline:0;box-shadow:inset 0 0 0 0.09375rem var(--sky),0 0.25rem 0.625rem -0.375rem rgba(13,156,248,.45)}
.mm-pick-opt:active{transform:scale(.96)}
.mm-pick-opt.is-busy{background:var(--sky);color:#fff;box-shadow:none}
.mm-pick-p{font-family:var(--fn);font-size:0.75rem;color:var(--muted)}
.mm-pick-opt.is-busy .mm-pick-p{color:rgba(255,255,255,.85)}
@media(prefers-reduced-motion:reduce){.mm-pick,.mm-pick.mm-pick-out{animation-duration:.01s}}

/* ‖ ٤٢. التذييل: شفقٌ متحرّك ‖
   طلب المالك: «املأ التذييل بشعار مصل مانيا وضع الإضاءة الخلفية المتحرّكة التي في الهيرو».
   - الشفق نفسه (القسم ٢٩) بقناعين بيضويّين: أعلى جهة النهاية وأسفل جهة البداية، فيضيء
     الزاويتين دون أن يطغى على الروابط؛ يتوقّف حين يخرج التذييل من الشاشة (motion.js ٢·٦).
   - نقش علامة M أوضح قليلاً (6% → 10%).
   (شعار «MUSCLE MANIA» العريض فوق شريط الحقوق أُزيل بطلب المالك.) */
.ftr .aurora{z-index:-1}
.ftr .aurora-l{opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 60% 85% at 88% 0%,#000 8%,transparent 70%),radial-gradient(ellipse 55% 75% at 8% 100%,#000 5%,transparent 70%);
          mask-image:radial-gradient(ellipse 60% 85% at 88% 0%,#000 8%,transparent 70%),radial-gradient(ellipse 55% 75% at 8% 100%,#000 5%,transparent 70%)}
html[dir=rtl] .ftr .aurora-l{
  -webkit-mask-image:radial-gradient(ellipse 60% 85% at 12% 0%,#000 8%,transparent 70%),radial-gradient(ellipse 55% 75% at 92% 100%,#000 5%,transparent 70%);
          mask-image:radial-gradient(ellipse 60% 85% at 12% 0%,#000 8%,transparent 70%),radial-gradient(ellipse 55% 75% at 92% 100%,#000 5%,transparent 70%)}
.ftr::before{background-color:rgba(255,255,255,.1)}

/* ‖ ٤٣. المفضّلة ‖
   قلبٌ في الرأس بجانب السلّة (بعدّاد)، قلبٌ زجاجيّ صغير على كل بطاقة (يمتلئ بالأحمر
   وينبض حين يُضاف)، زرٌّ في صفحة المنتج، وصفحة wishlist.html. على الهاتف قلب الرأس
   مخفيّ لضيق المكان — «المفضّلة» في القائمة الجانبية. */
.hdr-in>.hdr-actions>.wish{margin-inline-start:0.375rem}
.hdr .wish .badge{position:absolute;top:0.1875rem;inset-inline-start:0.125rem;background:var(--red);color:#fff;font-size:0.625rem;font-weight:600;
  min-width:1.0625rem;height:1.0625rem;border-radius:var(--sharp);display:grid;place-items:center;font-family:var(--fn);padding:0 0.25rem}
.hdr .wish .badge[hidden]{display:none}
.hdr .wish:hover svg{transform:scale(1.08)}
.hdr .wish svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
@media(max-width:560px){.hdr-actions .wish{display:none}}

.card-wish{position:absolute;z-index:4;top:0.625rem;inset-inline-end:0.625rem;width:2.375rem;height:2.375rem;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#141414;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(0.625rem) saturate(160%);backdrop-filter:blur(0.625rem) saturate(160%);
  box-shadow:0 0 0 .5px rgba(12,74,140,.14),0 0.25rem 0.75rem -0.375rem rgba(12,74,140,.35);
  -webkit-tap-highlight-color:transparent;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.card-wish svg{width:1.1875rem;height:1.1875rem;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.card-wish:hover{background:#fff}
.card-wish:hover svg{transform:scale(1.1)}
.card-wish:active{transform:scale(.92)}
.card-wish:focus-visible{outline:0.125rem solid var(--sky);outline-offset:0.125rem}
.card-wish.on{color:#e5484d}
.card-wish.on svg path,.pdp-wish.on svg path{fill:currentColor}
.card-wish.mm-pop svg,.pdp-wish.mm-pop svg{animation:mm-heart-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes mm-heart-pop{0%{transform:scale(.55)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.card.card-row .card-wish{top:0.375rem;inset-inline-end:0.375rem;width:1.875rem;height:1.875rem}
.card.card-row .card-wish svg{width:0.9375rem;height:0.9375rem}
@media(max-width:560px){.card-wish{width:2.125rem;height:2.125rem;top:0.5rem;inset-inline-end:0.5rem}.card-wish svg{width:1.0625rem;height:1.0625rem}}

.pdp-wish{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:3.125rem;padding:0 1.25rem;border-radius:var(--sharp);cursor:pointer;
  border:0.09375rem solid var(--line-2);background:#fff;color:#141414;
  font-family:var(--ui-font);font-weight:var(--ui-w);font-size:0.9375rem;transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.pdp-wish svg{width:1.25rem;height:1.25rem;flex:none}
.pdp-wish:hover{border-color:#e5484d;color:#e5484d}
.pdp-wish.on{color:#e5484d;border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.05)}

.wish-sub{display:flex;flex-wrap:wrap;gap:0.375rem 0.625rem;align-items:baseline}
.wish-sub b{font-family:var(--fn);font-weight:600}
.wish-wrap{padding:1.875rem 0 5rem}
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.625rem 1.375rem}
@media(max-width:560px){.wish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem 0.75rem}}
.wish-out{display:block;margin-top:0.125rem;font-size:0.78125rem;color:#c9353a}
.wish-empty{max-width:33.75rem;margin:1.5rem auto 0.625rem;padding:3rem 1.625rem 2.5rem;text-align:center;border-radius:var(--sharp);
  background:var(--glass);box-shadow:var(--glass-edge),0 1.5rem 3.375rem -1.875rem rgba(12,74,140,.4)}
.wish-empty-ico{width:4.875rem;height:4.875rem;margin:0 auto 1.125rem;border-radius:50%;display:grid;place-items:center;color:#e5484d;background:rgba(229,72,77,.08)}
.wish-empty-ico svg{width:2.25rem;height:2.25rem}
.wish-empty h2{margin:0 0 0.5rem;font-size:clamp(1.375rem,2.4vw,1.75rem);letter-spacing:-.015em}
.wish-empty p{margin:0 auto 1.5rem;max-width:38ch;color:var(--muted);line-height:1.6}
.wish-empty-cta{display:flex;flex-wrap:wrap;gap:0.625rem;justify-content:center}

/* ‖ ٤٤. تقييمات المنتجات (app.js «تقييمات المنتجات») ‖
   عمودان: الملخّص (المتوسّط بالنجوم، توزيع 5→1) ونموذج التقييم على الزجاج، وقائمة التقييمات
   بجانبهما. النجوم بالكهرمانيّ الدافئ المعتاد للتقييم؛ اختيار النجوم يضيء حتى النجمة التي
   تحت المؤشّر (ترتيبٌ معكوس في DOM يتيح «ما قبلها» في CSS، والاتجاه يتبع لغة الصفحة). */
.rvw{margin:clamp(2.5rem,5vw,4rem) 0 0.625rem;padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--line)}
.rvw-head h2{margin:0 0 1.375rem;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.02em}
.rvw-grid{display:grid;grid-template-columns:minmax(17.5rem,23.75rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
@media(max-width:860px){.rvw-grid{grid-template-columns:1fr}}
.rvw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rvw-stars{display:inline-flex;gap:0.125rem;vertical-align:middle}
.rvw-s{position:relative;display:inline-block;width:1.125rem;height:1.125rem;color:#d5dbe3}
.rvw-s svg{display:block;width:100%;height:100%;fill:currentColor}
.rvw-s.on{color:#f5a623}
/* نصف نجمة: نجمةٌ ذهبية فوق الرمادية مقصوصةٌ إلى نصفها من جهة البداية */
.rvw-s-fill{position:absolute;inset:0;color:#f5a623;clip-path:inset(0 50% 0 0)}
html[dir=rtl] .rvw-s-fill{clip-path:inset(0 0 0 50%)}
.rvw-stars.lg .rvw-s{width:1.375rem;height:1.375rem}
.rvw-stars.sm .rvw-s{width:0.9375rem;height:0.9375rem}
.rvw-sum{display:flex;align-items:center;gap:1rem;margin-bottom:0.875rem}
.rvw-avg{font-family:var(--fn);font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.03em;color:#141414}
.rvw-count{margin-top:0.25rem;font-size:0.875rem;color:var(--muted)}
.rvw-dist{display:flex;flex-direction:column;gap:0.375rem;margin-bottom:1.375rem}
.rvw-bar{display:grid;grid-template-columns:0.75rem 0.875rem minmax(0,1fr) 1.625rem;align-items:center;gap:0.5rem;font-family:var(--fn);font-size:0.8125rem;color:var(--ink-2)}
.rvw-bar-s{width:0.875rem;height:0.875rem;fill:#f5a623}
.rvw-bar-t{height:0.4375rem;border-radius:var(--sharp);background:var(--bg-2);overflow:hidden}
.rvw-bar-t i{display:block;height:100%;border-radius:var(--sharp);background:#f5a623;transition:width .5s var(--ease)}
.rvw-bar-n{text-align:end;color:var(--muted)}
.rvw-form{padding:1.25rem;border-radius:var(--sharp);background:var(--glass);box-shadow:var(--glass-edge),0 1.125rem 2.75rem -1.75rem rgba(12,74,140,.4)}
.rvw-form h3{margin:0 0 0.625rem;font-size:1.0625rem}
.rvw-pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:0.25rem;margin:0 0 0.875rem}
.rvw-pick input{position:absolute;opacity:0;width:1px;height:1px}
.rvw-pick label{cursor:pointer;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--sharp);color:#cfd6df;
  transition:color .15s ease,transform .25s cubic-bezier(.34,1.56,.64,1),background-color .15s ease}
.rvw-pick label svg{width:1.875rem;height:1.875rem;fill:currentColor}
.rvw-pick label:hover,.rvw-pick label:hover~label,.rvw-pick input:checked~label{color:#f5a623}
.rvw-pick label:hover{transform:scale(1.12)}
.rvw-pick:hover input:checked~label:not(:hover):not(:hover~label){color:#cfd6df}
.rvw-pick input:focus-visible+label{outline:0.125rem solid var(--sky);outline-offset:1px}
.rvw-lbl{display:block;margin:0 0 0.375rem;font-size:0.84375rem;font-weight:600}
.rvw-form textarea{width:100%;min-height:6rem;resize:vertical;padding:0.75rem 0.875rem;border-radius:var(--sharp);border:0.09375rem solid var(--line);
  background:rgba(255,255,255,.8);font-family:var(--f);font-size:0.9375rem;line-height:1.5;color:var(--ink)}
.rvw-form textarea:focus{outline:0;border-color:var(--sky);background:#fff;box-shadow:0 0 0 0.25rem rgba(13,156,248,.14)}
/* مصيدة الروبوتات: مخفيّةٌ بالقصّ لا بإزاحةٍ ‎-9999px‎ — تلك في العربية (اتجاه معاكس)
   تصير فائضاً أفقياً قابلاً للتمرير في كل صفحة منتج */
.rvw-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
.rvw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem 0.875rem;margin-top:0.75rem}
.rvw-actions .button{height:2.875rem;padding:0 1.375rem}
.rvw-note{font-size:0.78125rem;color:var(--muted)}
.rvw-msg{min-height:1.25rem;margin:0.625rem 0 0;font-size:0.84375rem;color:var(--muted)}
.rvw-msg[data-tone="ok"]{color:#08806f}
.rvw-msg[data-tone="bad"]{color:#c9353a}
.rvw-list{display:flex;flex-direction:column;gap:0.75rem}
.rvw-item{padding:1rem 1.125rem;border-radius:var(--sharp);background:#fff;box-shadow:0 0 0 1px var(--line);animation:rvw-in .45s var(--ease) both}
@keyframes rvw-in{from{opacity:0;transform:translateY(0.5rem)}}
.rvw-item-hd{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.75rem}
.rvw-who{font-weight:600;font-size:0.875rem;color:#141414}
.rvw-date{font-size:0.78125rem;color:var(--muted)}
.rvw-text{margin:0.5rem 0 0;font-size:0.9375rem;line-height:1.65;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.rvw-empty{margin:0.375rem 0;padding:1.375rem;border-radius:var(--sharp);background:var(--bg-3);color:var(--muted);text-align:center}
@media(prefers-reduced-motion:reduce){.rvw-item{animation:none}.rvw-pick label{transition:none}}

/* ‖ ٤٥. المستشار: زجاجٌ سائل وحركة ‖
   طلب المالك: نوافذ المستشار بمادّة الزجاج نفسها، وتصل بحركةٍ حيّة. خلف البطاقة بقعُ ضوءٍ
   سماوية تنساب ببطء ليكون للزجاج ما يُغبِّشه (شفق الهيرو بمزجه «الفرق» ترك على الأبيض بقعاً
   رمادية وحمراء فاستُبدل). البطاقة زجاجٌ
   سميك بحافّةٍ لامعة؛ الخيارات والحقول زجاجٌ أرقّ فوقها، والمختار «عدسة» بيضاء بحلقةٍ سماوية
   كعدسة شريط التنقّل. الحركة في app.js (الاستمارة): انزلاق الصفحة إليها، تجسُّد البطاقة،
   تبديل الأسئلة باتجاه الخطوة، وتمدُّد البطاقة إلى ارتفاع السؤال الجديد. */
.adv-shell{position:relative;isolation:isolate;overflow:hidden;overflow:clip}   /* clip: لا يصير حاوية تمرير فيبقى sticky داخله */
.adv-shell::before,.adv-shell::after{content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%;will-change:transform}
.adv-shell::before{width:min(47.5rem,70vw);aspect-ratio:1;top:-8%;inset-inline-end:-6%;
  background:radial-gradient(closest-side,rgba(13,156,248,.26),rgba(108,200,255,.12) 55%,transparent);
  animation:adv-drift-a 22s ease-in-out infinite alternate}
.adv-shell::after{width:min(40rem,62vw);aspect-ratio:1;bottom:-10%;inset-inline-start:-8%;
  background:radial-gradient(closest-side,rgba(0,214,200,.16),rgba(120,220,255,.1) 55%,transparent);
  animation:adv-drift-b 26s ease-in-out infinite alternate}
@keyframes adv-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-9%,14%,0) scale(1.12)}}
@keyframes adv-drift-b{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(11%,-12%,0) scale(.94)}}

#formCard.adv-pre{opacity:0}

/* التقدّم: مجرى زجاجيّ يمتلئ بالسماويّ انسياباً */
.steps{gap:0.375rem;margin-bottom:0.625rem}
.steps i,.steps i.on,.steps i.done{position:relative;height:0.375rem;border-radius:var(--sharp);overflow:hidden;
  background:rgba(12,74,140,.09);box-shadow:inset 0 1px 1px rgba(12,74,140,.07)}
.steps i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--sky);
  transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.22,1,.36,1)}
html[dir=rtl] .steps i::after{transform-origin:right center}
.steps i.on::after,.steps i.done::after{transform:scaleX(1)}
.steps i.on::after{background:linear-gradient(90deg,#7fd0ff,var(--sky))}
html[dir=rtl] .steps i.on::after{background:linear-gradient(270deg,#7fd0ff,var(--sky))}
.step-meta #stepNum{color:var(--sky);font-weight:600}

/* البطاقة */
.card-form{position:relative;isolation:isolate;border:0;border-radius:var(--sharp);padding:2.25rem;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(237,247,255,.58));
  -webkit-backdrop-filter:blur(1.75rem) saturate(190%);backdrop-filter:blur(1.75rem) saturate(190%);
  box-shadow:var(--glass-edge),inset 0 0 0 1px rgba(255,255,255,.6),
    0 2.75rem 5.625rem -3rem rgba(12,74,140,.5),0 0.625rem 1.625rem -1rem rgba(12,74,140,.18)}
.card-form::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card-form.is-morph{overflow:hidden}
.step.step-leave{display:block;position:absolute;margin:0;pointer-events:none;z-index:2}
.step.on{animation:none}
.step h2{letter-spacing:-.01em}

/* الخيارات: زجاجٌ رقيق، والمختار عدسةٌ بيضاء بحلقة سماوية ونقطةٍ تمتلئ بعلامة صحّ */
.opt span{position:relative;border:0;border-radius:var(--sharp);padding:1.0625rem 1.1875rem;background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(12,74,140,.1),inset 0 1px 0 rgba(255,255,255,.9);
  transition:background-color .25s ease,box-shadow .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.opt span:hover{border-color:transparent;background:rgba(255,255,255,.8);transform:translateY(-0.125rem);
  box-shadow:inset 0 0 0 1px rgba(13,156,248,.24),inset 0 1px 0 #fff,0 0.875rem 1.75rem -1.125rem rgba(12,74,140,.45)}
.opt:active span{transform:scale(.975);transition-duration:.12s}
.opt input:checked+span{background:#fff;border-color:transparent;
  box-shadow:var(--glass-lens),0 0 0 0.09375rem rgba(13,156,248,.65),0 1rem 1.875rem -1.125rem rgba(13,156,248,.55)}
.opt input:focus-visible+span{box-shadow:inset 0 0 0 1px rgba(13,156,248,.4),0 0 0 0.1875rem rgba(13,156,248,.3)}
.opt span b{position:relative;padding-inline-end:1.875rem}
.opt span b::after{content:'';position:absolute;inset-inline-end:0;top:50%;width:1.25rem;height:1.25rem;margin-top:-0.625rem;border-radius:50%;
  background:rgba(255,255,255,.75) center/0.75rem no-repeat;box-shadow:inset 0 0 0 0.09375rem rgba(12,74,140,.2);
  transition:background-color .2s ease,box-shadow .25s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.opt input:checked+span b::after{background-color:var(--sky);transform:scale(1.06);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  box-shadow:0 0.25rem 0.625rem -0.1875rem rgba(13,156,248,.7)}
.chk{border:0;border-radius:var(--sharp);background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(12,74,140,.1),inset 0 1px 0 rgba(255,255,255,.9);
  transition:background-color .25s ease,box-shadow .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.chk:hover{border-color:transparent;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(13,156,248,.24),inset 0 1px 0 #fff}
.chk:active{transform:scale(.985);transition-duration:.12s}
.chk.hot{background:rgba(255,245,243,.6);box-shadow:inset 0 0 0 1px rgba(214,69,50,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.chk:has(input:checked){background:#fff;border-color:transparent;box-shadow:var(--glass-lens),0 0 0 0.09375rem rgba(13,156,248,.65)}
.chk.hot:has(input:checked){box-shadow:var(--glass-lens),0 0 0 0.09375rem rgba(214,69,50,.55)}
.chk.hot input{accent-color:#d64532}
.grp>h3{border-bottom-color:rgba(12,74,140,.09)}
.card-form .note{background:rgba(255,255,255,.55);border-radius:0 var(--sharp) var(--sharp) 0;box-shadow:inset 0 0 0 1px rgba(12,74,140,.08)}
html[dir=rtl] .card-form .note{border-radius:var(--sharp) 0 0 var(--sharp)}

/* الحقول */
.card-form .fld input,.card-form .fld select{border:0;border-radius:var(--sharp);background:rgba(238,247,255,.66);
  box-shadow:inset 0 0 0 1px rgba(12,74,140,.14),inset 0 1px 0.125rem rgba(12,74,140,.06);
  transition:background-color .2s ease,box-shadow .25s ease}
.card-form .fld input:hover,.card-form .fld select:hover{background:rgba(255,255,255,.8)}
.card-form .fld input:focus,.card-form .fld select:focus{background:#fff;box-shadow:inset 0 0 0 1px rgba(13,156,248,.55),0 0 0 0.25rem rgba(13,156,248,.16)}
.card-form .fld input.bad{background:rgba(255,242,240,.9);box-shadow:inset 0 0 0 0.09375rem rgba(214,69,50,.55),0 0 0 0.25rem rgba(214,69,50,.1)}
.card-form .fld label em.opt{background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 .5px rgba(12,74,140,.18)}

/* رسالة الخطأ: زجاجٌ مُحمَرّ بأيقونة، يطفو من فوق (الحركة في app.js) */
.err{border:0;border-radius:var(--sharp);padding:0.75rem 1rem;color:#a32a19;
  background:linear-gradient(180deg,rgba(255,245,243,.92),rgba(255,233,229,.74));
  -webkit-backdrop-filter:blur(1rem) saturate(170%);backdrop-filter:blur(1rem) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(214,69,50,.2),0 0.875rem 1.875rem -1.25rem rgba(214,69,50,.6)}
.err.on{display:flex;align-items:center;gap:0.6875rem}
.err::before{content:'';flex:none;width:1.375rem;height:1.375rem;border-radius:50%;
  background:#e04a35 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.6v.1'/%3E%3C/svg%3E") center/0.875rem no-repeat;
  box-shadow:0 0.25rem 0.625rem -0.25rem rgba(224,74,53,.75)}
.adv-restored{border-radius:var(--sharp);color:var(--brand-deep);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(226,243,255,.66));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(13,156,248,.2)}
.adv-restore{border-radius:var(--sharp);box-shadow:var(--glass-lens)}
.adv-restore:hover{background:var(--sky)}

/* الأزرار */
.nav-row{border-top-color:rgba(12,74,140,.09)}
.nav-row .button{border-radius:var(--sharp);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,color .2s ease}
.nav-row .button:active{transform:scale(.96);transition-duration:.12s}
.nav-row #btnNext{min-width:7.5rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0.875rem 1.75rem -0.875rem rgba(13,156,248,.8)}
.nav-row .button.ghost{border:0;background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(12,74,140,.14),0 0.5rem 1.25rem -0.875rem rgba(12,74,140,.4)}
.nav-row .button.ghost:hover{box-shadow:0 0.75rem 1.5rem -0.75rem rgba(13,156,248,.6)}

/* الخطة: أقسامٌ زجاجية (بلا تغبيشٍ حيّ — أسطحٌ كبيرة كثيرة فوق أرضٍ بيضاء) */
#res .r-sec{border:0;border-radius:var(--sharp);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,248,255,.78));
  box-shadow:var(--glass-edge),inset 0 0 0 1px rgba(255,255,255,.6),0 1.875rem 4.375rem -2.875rem rgba(12,74,140,.45)}

@media(max-width:820px){
  .card-form{padding:1.5rem 1.125rem;border-radius:var(--sharp)}
  #res .r-sec{border-radius:var(--sharp)}
  .opt span{border-radius:var(--sharp)}
}
@media(prefers-reduced-transparency:reduce){
  .card-form{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .err{background:#fff1ef;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  .steps i::after,.opt span,.chk,.nav-row .button{transition:none}
  .adv-shell::before,.adv-shell::after{animation:none}
}
@media print{
  .adv-shell::before,.adv-shell::after{display:none}
  #res .r-sec{background:#fff;box-shadow:none;border:1px solid #ccc}
}
/* ‖ ٤٦. تحويم البطاقة، وكبسولة اللغة بخطّ شريط التنقّل ‖
   طلب المالك: (١) عند التحويم على صورة المنتج يظهر خطٌّ رفيع تحت اسمه بلون النصّ نفسه
   («أشعر أنني أختار») — كان الخطّ يظهر عند التحويم على الاسم وحده وبلون سماويّ.
   (٢) اسم اللغة في الكبسولة بخطّ شريط التنقّل نفسه: العائلة والوزن والمقاس واللون. */
.card-name a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;
  transition:background-size .34s cubic-bezier(.22,1,.36,1)}
.card:hover .card-name a,.card:focus-within .card-name a,.card-name a:hover,.card-name a:focus-visible{
  color:inherit;background-size:100% 1px}
@media(prefers-reduced-motion:reduce){.card-name a{transition:none}}

.lang-toggle .lt-name{font-family:var(--ui-font);font-weight:var(--ui-w);font-size:1.1875rem;color:#141414;line-height:1.2}
.lt-opt{font-family:var(--ui-font);font-weight:var(--ui-w);color:#141414}
.lt-opt[aria-checked="true"]{font-weight:calc(var(--ui-w) + 120)}
html[lang=ar] .lang-toggle .lt-name{font-size:1.25rem}
@media(min-width:821px) and (max-width:1199px){
  .lang-toggle .lt-name{font-size:1.125rem}
  html[lang=ar] .lang-toggle .lt-name{font-size:1.1875rem}
}
@media(min-width:821px) and (max-width:1160px){
  .lang-toggle .lt-name{font-size:1.0625rem}
  html[lang=ar] .lang-toggle .lt-name{font-size:1.125rem}
}
@media(min-width:821px) and (max-width:1000px){
  .lang-toggle .lt-name{font-size:1rem}
  html[lang=ar] .lang-toggle .lt-name{font-size:1.03125rem}
}

/* ‖ s51 begin ‖ */
/* ‖ ٥١. زوايا حادّة موحّدة، وحركةٌ أسرع ‖ (2026-09-19)
   طلب المالك: كل ما هو زجاج (شريط التنقّل وعدسته، «تصفية وترتيب»، البحث، اللغة، الأشرطة
   الجانبية، رفّ الأهداف، بطاقات الهيرو) وبطاقات المنتجات نفسها بزاويةٍ واحدة حادّة ‎--sharp‎ —
   أحدّ من بطاقات المنتجات السابقة (6px). الأزرار الدائرية الصغيرة (+، الإغلاق) تبقى دوائر. */
:root{--sharp:0.375rem}   /* 2026-09-19: 4px ثم «أنعم قليلاً» — 6px في الموقع كلّه */

/* بطاقات المنتجات في كل مكان */
.card,.card-img,.card .card-img,.card.card-row .card-img,.art-inline .card-img,.cat-tile-img{border-radius:var(--sharp)!important}

/* شريط التنقّل الزجاجي وعدسته وكبسولة المستشار */
.mainnav ul,.nav-lens,.mainnav a.nav-a,.adv-metal,.adv-metal-rim,.adv-metal-rim canvas{border-radius:var(--sharp)!important}
.adv-metal-face{border-radius:calc(var(--sharp) - 1px)!important}
/* البحث واللغة وقائمتها */
.hdr .search,.search input,.hdr .search input,.lang-toggle,.icon-btn.lang-toggle,.lt-menu,.lt-opt,.mm-nav-search input{border-radius:var(--sharp)!important}
/* «تصفية وترتيب» والأشرطة الجانبية بكل ما فيها */
.mm-fbtn,.mm-side,.col-layout>.mm-side-shop,.ex-filters.mm-side,.mm-side .mm-row,.mm-sec-h,.mm-side .ex-search,
.mm-side-go,.mm-side-clear,.mm-side .button.mm-reset,.mm-side-x,.mm-fbtn-n,.mm-sec-n,.mm-side .mm-mono{border-radius:var(--sharp)!important}
/* القائمة الكبرى: أطر الصور المصغّرة */
.mm-mt .mthumb,.mega{border-radius:var(--sharp)!important}
/* رفّ الأهداف */
.goal,.mm-rail .goal,.goal-n{border-radius:var(--sharp)!important}
/* الهيرو */
.hx-s,.hx-ui,.hx-ui button,.hx-card,.hx-chip,.hx-logo,.hx-tag,.hx-city>span{border-radius:var(--sharp)!important}
/* زجاج المستشار والمراجعات */
.card-form,.card-form .note,.card-form .fld input,.card-form .fld select,.opt span,.chk,.rvw-form,.adv-restore{border-radius:var(--sharp)!important}

/* ── «تصفية وترتيب» أكبر بـ 15% ── */
.mm-fbtn{height:3.4375rem;padding:0 1.4375rem;gap:0.71875rem;font-size:1.15rem}
html[lang=ar] .mm-fbtn{font-size:1.21875rem}
.mm-fbtn svg{width:1.4375rem;height:1.4375rem}
.mm-fbtn-n{min-width:1.5625rem;height:1.5625rem;font-size:0.875rem}
@media(max-width:820px){.mm-fbtn{height:3.3125rem;padding:0 1.125rem}}

/* الفئة الحالية في الشريط الجانبي: علامة صحّ كأيّ خيارٍ مختار */
.mm-side a.mm-row.on .mm-tick{display:grid}
.mm-side a.mm-row.on .mm-cnt{display:none}

/* ── عدّاد السلّة: على الجهة الأخرى بعيداً عن مقبض العربة (المقبض يسار الأيقونة في اللغتين) ── */
.hdr-actions .cart .badge,.cart .badge{inset-inline-start:auto;inset-inline-end:auto;left:auto;right:0.125rem}

/* ── عدسة الشريط: تلحق المؤشّر أسرع ── */
@media(min-width:821px){
  .nav-lens{transition:transform .26s cubic-bezier(.25,.9,.3,1),width .26s cubic-bezier(.25,.9,.3,1),opacity .18s ease,top .26s ease,bottom .26s ease}
  .nav-lens.press{transition-duration:.14s,.26s,.18s}
}

/* ── رفّ الأهداف بسرعة 60 إطاراً ──
   كان يتمدّد في 720ms، والصورة تُعاد تحجيمها ومرشّحاتها (saturate/brightness) تُعاد رسمها
   في كل إطار. الآن: الصورة بعرض اللوح المفتوح دائماً (لا تُحجَّم، يتغيّر القصّ وحده)،
   والتعتيم طبقةٌ تُخفَت بالشفافية، والانتقال 420ms. */
.mm-rail{container-type:inline-size;transition:grid-template-columns 420ms cubic-bezier(.3,.8,.25,1)}
@media(min-width:961px){
  .mm-rail .goal img{left:50%;right:auto;width:calc(100cqw * .33);max-width:none;translate:-50% 0;
    filter:none!important;transition:transform 420ms cubic-bezier(.3,.8,.25,1);will-change:transform}
}
.mm-rail .goal img{filter:none}
.mm-rail .goal::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(20,24,27,.22);
  transition:opacity 420ms ease}
.mm-rail .goal:hover::before,.mm-rail .goal:focus-visible::before{opacity:0}
.mm-rail .goal-n{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.14)}
.mm-rail .goal p{transition:opacity .24s ease,transform .3s ease,max-height .3s ease,margin .3s ease}

/* ── الحركة أسرع في كل الموقع (طلب المالك: «كل الحركات أسرع وأنعم») ──
   رموز المدد المشتركة: 190/330/500/720ms صارت 150/240/360/480ms. كل ما يستعمل --d* يتسارع معها. */
:root{--d-fast:150ms;--d:240ms;--d-slow:360ms;--d-reveal:480ms}
/* ‖ s51 end ‖ */

/* ‖ s52 begin ‖ */
/* ‖ ٥٢. رؤوس الصفحات ‖ (2026-09-19)
   تصميمٌ بسيط واحد لرؤوس الصفحات الداخلية (من نحن، التواصل، السلّة، البرامج، التمارين، المدوّنة،
   المتابعة…): تدرّجٌ سماويّ فاتح بألوان العلامة، و«بصمتها» — نقش علامة M — يظهر على الجانب البعيد
   ويخفت نحو النصّ، وعلامة M كبيرة شفّافة على الطرف، وخطٌّ رفيع بتدرّج العلامة في الأسفل.
   المستشار وحده بالأخضر (أكوا العلامة). الاتجاه ينعكس مع العربية. */
.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero{
  --ph-a:13,156,248;                 /* لون اللمسة (RGB) */
  --ph-b1:#f6fbff;--ph-b2:#e6f3fe;--ph-b3:#d5ebfd;
  --ph-line:linear-gradient(90deg,#0a59a9,#0d9cf8 55%,#00dfce);
  position:relative;isolation:isolate;overflow:hidden;border-bottom:0!important;
  padding-block:clamp(3rem,5vw,4.875rem) clamp(2.625rem,4.4vw,4rem)!important;
  background:
    var(--ph-line) left bottom/100% 0.1875rem no-repeat,
    radial-gradient(47.5rem 21.25rem at 100% 0%,rgba(var(--ph-a),.2),transparent 66%),
    linear-gradient(118deg,var(--ph-b1) 0%,var(--ph-b2) 52%,var(--ph-b3) 100%)!important}
html[dir=rtl] :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero){
  background:
    var(--ph-line) left bottom/100% 0.1875rem no-repeat,
    radial-gradient(47.5rem 21.25rem at 0% 0%,rgba(var(--ph-a),.2),transparent 66%),
    linear-gradient(242deg,var(--ph-b1) 0%,var(--ph-b2) 52%,var(--ph-b3) 100%)!important}
/* النقش: علامات M متكرّرة، ظاهرة في الطرف البعيد وتتلاشى قبل النصّ */
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero)::before{
  content:'';position:absolute;inset:-20% -5%;z-index:-1;pointer-events:none;background:rgba(var(--ph-a),.11);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) 0 0/7.375rem auto space,linear-gradient(to left,#000 8%,transparent 62%);
  -webkit-mask-composite:source-in;
  mask:url(../media/brand/mm-mark-mask.png) 0 0/7.375rem auto space intersect,linear-gradient(to left,#000 8%,transparent 62%);
  transform:rotate(-10deg)}
html[dir=rtl] :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero)::before{
  -webkit-mask:url(../media/brand/mm-mark-mask.png) 0 0/7.375rem auto space,linear-gradient(to right,#000 8%,transparent 62%);
  -webkit-mask-composite:source-in;
  mask:url(../media/brand/mm-mark-mask.png) 0 0/7.375rem auto space intersect,linear-gradient(to right,#000 8%,transparent 62%)}
/* علامة M كبيرة على الطرف */
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero)::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;inset-inline-end:clamp(-3.75rem,-2vw,-0.625rem);top:50%;
  width:clamp(12.5rem,24vw,23.75rem);aspect-ratio:1.15;translate:0 -50%;
  background:linear-gradient(135deg,rgba(var(--ph-a),.26),rgba(0,223,206,.2));
  -webkit-mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat;mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat}
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero) h1{color:var(--brand-ink);letter-spacing:-.022em}
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero) p{color:#34405a}
/* مسار الصفحة فوق العنوان: كبسولة صغيرة بنقطة ملوّنة */
.pg-hero .crumb{display:inline-flex!important;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;margin-bottom:1rem!important;
  border-radius:var(--sharp);background:rgba(255,255,255,.72);color:rgb(var(--ph-a))!important;
  box-shadow:inset 0 0 0 1px rgba(var(--ph-a),.18)}
.pg-hero .crumb::before{content:'';width:0.4375rem;height:0.4375rem;border-radius:50%;background:rgb(var(--ph-a));
  box-shadow:0 0 0 0.1875rem rgba(var(--ph-a),.18)}
@media(max-width:700px){
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero)::after{width:10.625rem;inset-inline-end:-2.5rem;opacity:.7}
}

/* المستشار: أخضر العلامة (أكوا) */
.adv-hero{--ph-a:0,178,165;--ph-b1:#f4fdfb;--ph-b2:#e2faf6;--ph-b3:#cdf4ee;
  --ph-line:linear-gradient(90deg,#007f76,#00dfce 55%,#0d9cf8)}
.adv-hero::after{background:linear-gradient(135deg,rgba(0,190,176,.3),rgba(13,156,248,.18))}
.adv-hero .adv-tags span{box-shadow:inset 0 0 0 1px rgba(0,178,165,.25)}
/* ‖ s52 end ‖ */

/* ‖ s53 begin ‖ */
/* ‖ ٥٣. الصفحة الرئيسية تحت الهيرو ‖ (2026-09-19)
   العرض الكامل: أقسام الرئيسية تمتدّ على عرض الشاشة كلّه بهامشٍ متناسب (لا بياض على الجانبين).
   «الأكثر طلباً» شبكة بنتو: منتجٌ مُبرَز بعمودين وصفّين وثمانية حوله. «تصفّح الرفوف» تبويبات فئات
   كلٌّ منها صفّ منتجات يُمرَّر أفقياً. الملابس صفٌّ مثله. شريط المستشار بالأخضر (أكوا العلامة). */
.home{--gut:clamp(1rem,3.4vw,4.5rem);--cg:clamp(0.875rem,1.4vw,1.5rem)}
.home section>.wrap,.home section>.wrap.adv-band-in,.home section>.wrap.mm-band-grid{max-width:none;padding-inline:var(--gut)}
.home section.sec{padding-block:clamp(2.75rem,5vw,5.5rem)}

/* ── بنتو «الأكثر طلباً» ── */
.hm-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1.625rem,2.4vw,2.5rem) var(--cg)}
.hm-bento>.hm-spot{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.hm-bento>.hm-spot .card-img{aspect-ratio:auto;flex:1 1 auto;min-height:20rem}
.hm-bento>.hm-spot .card-img img{object-fit:contain}
.hm-bento>.hm-spot .card-name{font-size:clamp(1.1875rem,1.5vw,1.5rem);min-height:0}
.hm-bento>.hm-spot .card-price{font-size:clamp(1.375rem,1.8vw,1.75rem)}
.hm-bento>.hm-spot .card-body{flex:none;padding-top:1rem}
.hm-bento>.hm-spot .card-blurb{display:block}
@media(max-width:1199px){.hm-bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
  .hm-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-bento>.hm-spot{grid-row:span 1}
  .hm-bento>.hm-spot .card-img{min-height:0;aspect-ratio:4/3}
}

/* ── صفوف المنتجات الأفقية (الرفوف والملابس) ── */
.hm-row{--n:6;display:grid;grid-auto-flow:column;gap:var(--cg);
  grid-auto-columns:calc((100% - (var(--n) - 1) * var(--cg)) / var(--n));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:0.375rem;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
html[dir=rtl] .hm-row{-webkit-mask:linear-gradient(270deg,#000 calc(100% - 2.5rem),transparent);mask:linear-gradient(270deg,#000 calc(100% - 2.5rem),transparent)}
.hm-row.at-end{-webkit-mask:none;mask:none}
.hm-row::-webkit-scrollbar{display:none}
.hm-row>.card{scroll-snap-align:start;min-width:0}
@media(max-width:1199px){.hm-row{--n:5}}
@media(max-width:1199px){.hm-row{--n:4}}
@media(max-width:1000px){.hm-row{--n:3}}
@media(max-width:700px){.hm-row{--n:2.2}}

/* ── تبويبات الرفوف: كبسولة زجاجية بعدسةٍ تنزلق تحت التبويب المختار ── */
.hm-tabs{position:relative;isolation:isolate;display:inline-flex;gap:0.125rem;max-width:100%;overflow-x:auto;scrollbar-width:none;
  margin:0 0 clamp(1.125rem,2vw,1.75rem);padding:0.3125rem;border-radius:var(--sharp);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(236,245,254,.7));
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.14),0 0.75rem 1.75rem -1rem rgba(12,74,140,.35)}
.hm-tabs::-webkit-scrollbar{display:none}
.hm-tab{position:relative;z-index:1;flex:none;height:2.75rem;padding:0 1.125rem;border:0;border-radius:var(--sharp);background:none;
  font:var(--ui-w) 1.0625rem/1 var(--ui-font);color:#141414;cursor:pointer;white-space:nowrap;
  transition:color .2s ease}
html[lang=ar] .hm-tab{font-size:1.125rem}
.hm-tab[aria-selected=true]{color:var(--brand-deep)}
.hm-tab:focus-visible{outline:0.125rem solid var(--sky);outline-offset:-0.125rem}
.hm-tab-lens{position:absolute;z-index:0;top:0.3125rem;bottom:0.3125rem;left:0;width:0;border-radius:var(--sharp);pointer-events:none;
  background:#fff;box-shadow:0 0 0 .5px rgba(12,74,140,.12),0 0.375rem 1rem -0.5rem rgba(12,74,140,.4);
  transform:translateX(var(--tx,0));transition:transform .28s cubic-bezier(.25,.9,.3,1),width .28s cubic-bezier(.25,.9,.3,1)}
.hm-panel{animation:hm-in .34s cubic-bezier(.25,.9,.3,1)}
.hm-panel[hidden]{display:none}
@keyframes hm-in{from{opacity:0;translate:0 0.625rem}to{opacity:1;translate:0 0}}
.hm-all{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.125rem;font-weight:600;color:var(--brand-deep)}
.hm-all::after{content:'';width:1.125rem;height:0.125rem;background:var(--sky);transition:width .2s ease}
.hm-all:hover::after{width:1.875rem}
@media(prefers-reduced-motion:reduce){.hm-panel{animation:none}.hm-tab-lens{transition:none}}

/* ── شريط المستشار: أخضر العلامة ── */
.home .adv-band{background:linear-gradient(125deg,#006f67 0%,#00a99c 48%,#0bc5b6 100%)!important}
html[dir=rtl] .home .adv-band{background:linear-gradient(235deg,#006f67 0%,#00a99c 48%,#0bc5b6 100%)!important}
.home .adv-band .eyebrow{color:#c9fff8}
.home .adv-band .mm-step i{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.7)}
.home .adv-band .button:not(.ghost){color:#006f67}
.home .adv-band .button:not(.ghost):hover{color:#006f67}

/* رفّ الأهداف على الجوّال يمتدّ إلى حافّتي الشاشة بمقدار الهامش الجديد بالضبط (كان -20px مع هامش 16px: 4px زائدة) */
@media(max-width:960px){.home .mm-rail{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}}
/* ‖ s53 end ‖ */
/* ‖ s54 begin ‖ */
/* ‖ ٥٤. الجولة 2026-09-19 (الثانية) ‖
   زوايا أنعم قليلاً، أزرارٌ زجاجية في كل الموقع، أسهمٌ للرفوف، ألواح أهدافٍ تُظهر الصورة كاملة، مسافةٌ تحت
   الرأس الملتصق، قسم الأصالة من جديد، صور «تدرّب بمعرفة» بألوانها، بطاقات المقالات، ومسافاتٌ أقلّ في الرئيسية. */

/* ── زجاج الأزرار: الزرّ الأساسي سماويٌّ لامع بحافّةٍ مضيئة، والشبحيّ زجاجٌ فاتح. بلا backdrop-filter
   (يُعاد حسابه مع كل تمرير) — العمق من التدرّج والحافّة واللمعة وحدها، فيبقى التمرير 60 إطاراً. ── */
.button{
  background:radial-gradient(120% 70% at 50% -18%,rgba(255,255,255,.5),rgba(255,255,255,0) 58%),
             linear-gradient(180deg,#43b6ff 0%,#159ffa 46%,#0a86e0 100%)!important;
  color:#fff;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -0.125rem 0.3125rem rgba(0,50,120,.2),0 0 0 .5px rgba(6,80,160,.4),
    0 0.625rem 1.375rem -0.75rem rgba(13,156,248,.8)!important;
  transition:transform .16s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease)}
.button::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.12) 38%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.button::before{background:linear-gradient(180deg,#1b8ff0,#0a59a9)!important}
.button:hover{color:#fff;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -0.125rem 0.3125rem rgba(0,50,120,.2),0 0 0 .5px rgba(6,80,160,.4),
    0 0.875rem 1.75rem -0.75rem rgba(13,156,248,.85)!important}
.button:active{transform:translateY(0) scale(.975);transition-duration:80ms}
.button.ghost{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,246,254,.8))!important;color:var(--brand-deep)!important;
  border:0!important;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(12,74,140,.06),0 0 0 .5px rgba(12,74,140,.18),
    0 0.625rem 1.375rem -0.875rem rgba(12,74,140,.45)!important}
.button.ghost::after{background:var(--glass-rim)}
.button.ghost::before{background:linear-gradient(180deg,#43b6ff,#0d9cf8)!important}
.button.ghost:hover{color:#fff!important}
/* على الأشرطة الملوّنة والداكنة: الأساسيّ زجاجٌ أبيض، والشبحيّ زجاجٌ شفّاف بحافّةٍ بيضاء */
:is(.mm-band,.story,.ftr,.hx-s[data-theme=dark],.mm-cta,.wh-hero,.pd-hero) .button:not(.ghost){
  background:radial-gradient(120% 70% at 50% -18%,#fff,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fff,#e4f2fe)!important;
  color:var(--brand-deep)!important;box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(255,255,255,.6),0 0.75rem 1.625rem -0.875rem rgba(4,30,70,.6)!important}
:is(.mm-band,.story,.ftr,.hx-s[data-theme=dark],.mm-cta,.wh-hero,.pd-hero) .button:not(.ghost)::before{background:linear-gradient(180deg,#f2f9ff,#d4ebfd)!important}
:is(.mm-band,.story,.ftr,.hx-s[data-theme=dark],.mm-cta,.wh-hero,.pd-hero) .button.ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08))!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 .5px rgba(255,255,255,.35),0 0.75rem 1.625rem -1rem rgba(4,30,70,.6)!important}
:is(.mm-band,.story,.ftr,.hx-s[data-theme=dark],.mm-cta,.wh-hero,.pd-hero) .button.ghost::before{background:rgba(255,255,255,.95)!important}
:is(.mm-band,.story,.ftr,.hx-s[data-theme=dark],.mm-cta,.wh-hero,.pd-hero) .button.ghost:hover{color:var(--brand-deep)!important}
.home .adv-band .button:not(.ghost){color:#006f67!important}
/* الشارات والرقاقات بالزجاج نفسه */
.blog-nav a,.goal-n,.lib-n{border:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,246,254,.78))!important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.16),0 0.5rem 1.125rem -0.75rem rgba(12,74,140,.4)!important;
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),color .2s ease}
.blog-nav a:hover{transform:translateY(-1px);color:var(--brand-deep)}
.blog-nav a.on{background:linear-gradient(180deg,#43b6ff,#0a86e0)!important;color:#fff}
.goal-n,.lib-n{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1))!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 .5px rgba(255,255,255,.4),0 0.625rem 1.375rem -0.875rem rgba(0,0,0,.6)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.goal:hover .goal-n{background:linear-gradient(180deg,#fff,#e6f3fe)!important;color:var(--brand-deep)!important}

/* ── مسافةٌ بين شريط التنقّل والرأس حين يلتصق (كان الشريط ملاصقاً لحافّة الرأس) ── */
@media(min-width:821px){
  .hdr.stuck .mainnav{padding-top:0.625rem}
  .hdr.stuck{margin-bottom:1.5rem}      /* بالقياس: ما يخسره الرأس عند الالتصاق بعد المسافة الجديدة */
}

/* ── الرئيسية: مسافاتٌ أقلّ بين الأقسام ── */
.home section.sec{padding-block:clamp(1.625rem,2.8vw,3rem)!important}
.home .sec-head{margin-bottom:clamp(1rem,1.8vw,1.625rem)}
.home .mm-band{padding-block:clamp(2.5rem,4vw,4rem)}
.home .hm-best{padding-top:clamp(1.25rem,2.2vw,2.25rem)!important}

/* ── أسهم الرفوف والصفوف ── */
.hm-rowbox{position:relative}
.hm-arrow{position:absolute;top:calc(var(--img-h,40%) / 2);z-index:5;display:grid;place-items:center;width:3rem;height:3rem;
  margin-top:-1.5rem;border:0;border-radius:var(--sharp);cursor:pointer;color:var(--brand-deep);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(235,246,254,.86));
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.18),0 0.75rem 1.625rem -0.75rem rgba(12,74,140,.55);
  transition:opacity .2s ease,transform .16s var(--ease),visibility 0s linear .2s;opacity:0;visibility:hidden}
.hm-arrow.on{opacity:1;visibility:visible;transition:opacity .2s ease,transform .16s var(--ease),visibility 0s}
.hm-arrow:hover{transform:scale(1.06)}
.hm-arrow:active{transform:scale(.94)}
.hm-arrow:focus-visible{outline:0.125rem solid var(--sky);outline-offset:0.125rem}
.hm-arrow svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hm-arrow.prev{inset-inline-start:-0.875rem}
.hm-arrow.next{inset-inline-end:-0.875rem}
html[dir=rtl] .hm-arrow svg{transform:scaleX(-1)}
@media(hover:none){.hm-arrow{display:none}}

/* ── تسوّق حسب هدفك: الصورة كاملة (الألواح بنسبة الصورة نفسها 332×460) وزجاج الزرّ ── */
@media(min-width:961px){
  .mm-rail .goal{height:calc((100cqw - 2.5rem) / 5 / .7217)!important}
  .mm-rail .goal img{left:0!important;width:100%!important;translate:none!important;object-position:50% 20%}
}

/* ── تدرّب بمعرفة: الصور بألوانها، وتدرّجٌ داكن في الأسفل فقط لقراءة النصّ ── */
.lib-tile{min-height:clamp(21.25rem,32vw,32.5rem)}
.lib-img{filter:none!important;object-position:50% 25%}
.lib-tile::after{background:linear-gradient(to top,rgba(6,24,52,.9) 0%,rgba(6,24,52,.55) 32%,rgba(6,24,52,0) 62%)!important;
  mix-blend-mode:normal!important}
.lib-tile p{color:rgba(255,255,255,.9)!important}

/* ── اقرأ قبل أن تشتري: نصّ البطاقة بهامشٍ داخليّ وارتفاعٍ واحد ── */
.home .bcard{background:#fff;box-shadow:0 0 0 1px var(--line),0 0.625rem 1.625rem -1.25rem rgba(12,74,140,.35)}
.home .bcard>a{display:flex;flex-direction:column;height:100%}
.home .bc-img{border-radius:var(--sharp) var(--sharp) 0 0}
.home .bc-text{padding:1rem 1.25rem 1.25rem!important;display:flex;flex-direction:column;gap:0.375rem;flex:1}
.home .bc-cat{margin:0}
.home .bc-title{margin:0;font-size:1.0625rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── قسم الأصالة الجديد: عبوةٌ تُفحص بثلاث نقاط، وبطاقة لكل فحص ── */
.hm-auth{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding-block:clamp(3rem,5vw,5.25rem)!important;
  background:radial-gradient(56.25rem 32.5rem at 78% 30%,rgba(0,223,206,.22),transparent 60%),linear-gradient(125deg,#0a4c93 0%,#0a59a9 45%,#0b7fd9 100%)!important}
html[dir=rtl] .hm-auth{background:radial-gradient(56.25rem 32.5rem at 22% 30%,rgba(0,223,206,.22),transparent 60%),linear-gradient(235deg,#0a4c93 0%,#0a59a9 45%,#0b7fd9 100%)!important}
.hm-auth::before{content:'';position:absolute;inset:-10%;z-index:-1;background-color:rgba(255,255,255,.05);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;transform:rotate(-10deg)}
.hm-auth-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.75rem,4vw,4.5rem);align-items:center}
.hm-auth .eyebrow{color:var(--aqua)}
.hm-auth h2{color:#fff;font-size:clamp(1.875rem,3vw,3rem);line-height:1.12;letter-spacing:-.02em;margin:0.625rem 0 1rem;max-width:16ch}
.hm-auth-lead{color:rgba(255,255,255,.88);font-size:clamp(0.96875rem,1.1vw,1.125rem);line-height:1.7;max-width:48ch;margin:0 0 1.625rem}
.hm-auth-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.125rem,2.4vw,2.5rem);align-items:center}
.hm-tub{position:relative;justify-self:center;width:min(100%,21.25rem)}
.hm-tub img{display:block;width:100%;height:auto;filter:drop-shadow(0 1.875rem 1.75rem rgba(0,20,50,.45))}
.hm-dot{position:absolute;display:grid;place-items:center;width:1.875rem;height:1.875rem;margin:-0.9375rem 0 0 -0.9375rem;border-radius:50%;
  background:var(--aqua);color:#053a36;font:700 0.875rem/1 var(--fn);box-shadow:0 0 0 0.375rem rgba(0,223,206,.25),0 0.5rem 1.125rem -0.375rem rgba(0,0,0,.5);
  transition:transform .2s var(--ease),box-shadow .2s ease}
.hm-dot::after{content:'';position:absolute;inset:-0.375rem;border-radius:50%;border:0.125rem solid rgba(0,223,206,.55);animation:hm-ping 2.4s ease-out infinite}
@keyframes hm-ping{0%{transform:scale(.8);opacity:1}80%,100%{transform:scale(1.7);opacity:0}}
.hm-checks{display:grid;gap:0.75rem;counter-reset:chk}
.hm-chk{position:relative;display:grid;grid-template-columns:auto 1fr;gap:0.375rem 0.875rem;padding:1.125rem 1.25rem;border-radius:var(--sharp);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 .5px rgba(255,255,255,.25);transition:background .2s ease,transform .2s var(--ease)}
.hm-chk:hover{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.12));transform:translateX(0) translateY(-0.125rem)}
.hm-chk b{grid-row:span 2;display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--aqua);color:#053a36;font:700 0.875rem/1 var(--fn)}
.hm-chk h3{margin:0;font-size:1.0625rem;color:#fff}
html[lang=ar] .hm-chk h3{font-size:1.125rem}
.hm-chk p{margin:0;font-size:0.875rem;line-height:1.6;color:rgba(255,255,255,.84)}
/* بطاقةٌ تحت المؤشّر تُكبِّر نقطتها على العبوة */
.hm-auth:has(.hm-chk[data-n="1"]:hover) .hm-dot[data-n="1"],.hm-auth:has(.hm-chk[data-n="2"]:hover) .hm-dot[data-n="2"],
.hm-auth:has(.hm-chk[data-n="3"]:hover) .hm-dot[data-n="3"]{transform:scale(1.3);box-shadow:0 0 0 0.625rem rgba(0,223,206,.3),0 0.5rem 1.125rem -0.375rem rgba(0,0,0,.5)}
@media(max-width:1100px){.hm-auth-in{grid-template-columns:1fr}.hm-auth h2{max-width:22ch}}
@media(max-width:640px){.hm-auth-stage{grid-template-columns:1fr}.hm-tub{width:min(70%,15rem)}}
@media(prefers-reduced-motion:reduce){.hm-dot::after{animation:none}}
/* ‖ s54 end ‖ */

/* ‖ s55 begin ‖ */
/* ‖ ٥٥. أيقونات رؤوس الصفحات وزرّ واتساب الدائري ‖ (2026-09-19) */

/* ── أيقونات الرأس: لوحٌ زجاجيّ مائل بأيقونة الصفحة، وشارتان تطفوان حوله (motion.js §15) ── */
.ph-deco{position:absolute;z-index:0;inset-inline-end:clamp(2.5rem,9vw,13.125rem);top:50%;width:14.375rem;height:13.125rem;
  translate:0 -50%;pointer-events:none;animation:ph-in .7s cubic-bezier(.22,1,.36,1) both}
.ph-deco span{position:absolute;display:grid;place-items:center;border-radius:var(--sharp);color:rgb(var(--ph-a,13,156,248));
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(236,246,255,.82));
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.14),0 1.375rem 2.75rem -1.375rem rgba(12,74,140,.5)}
.ph-deco span::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ph-main{left:50%;top:50%;width:7.75rem;height:7.75rem;margin:-3.875rem 0 0 -3.875rem;rotate:-6deg}
.ph-main svg{width:3.625rem;height:3.625rem}
.ph-chip{width:3.75rem;height:3.75rem}
.ph-chip svg{width:1.75rem;height:1.75rem}
.ph-chip-a{left:0.125rem;top:0.375rem;rotate:8deg;animation:ph-float 5.5s ease-in-out infinite alternate}
.ph-chip-b{right:0;bottom:0.25rem;rotate:-10deg;animation:ph-float 6.5s ease-in-out -2s infinite alternate}
html[dir=rtl] .ph-chip-a{left:auto;right:0.125rem}
html[dir=rtl] .ph-chip-b{right:auto;left:0}
@keyframes ph-in{from{opacity:0;translate:0 calc(-50% + 1rem)}to{opacity:1;translate:0 -50%}}
@keyframes ph-float{to{transform:translateY(-0.5rem)}}
@media(max-width:1100px){.ph-deco{scale:.8;inset-inline-end:1.5rem}}
@media(max-width:760px){.ph-deco{display:none}}
@media(prefers-reduced-motion:reduce){.ph-deco,.ph-chip-a,.ph-chip-b{animation:none}}

/* ── زرّ واتساب: دائرةٌ بلونه الأصلي فقط (طلب المالك) ── */
.contact-fab.cf-btn{width:3.75rem!important;min-width:0!important;height:3.75rem;padding:0!important;justify-content:center;
  border-radius:50%!important;background:#25d366!important;box-shadow:0 0.625rem 1.5rem -0.5rem rgba(18,140,70,.6),0 0.125rem 0.375rem rgba(0,0,0,.18)!important}
.contact-fab.cf-btn:hover{background:#1ebe5b!important;transform:translateY(-0.125rem) scale(1.04)}
.contact-fab.cf-btn:active{transform:scale(.95)}
.cf-wa::before{display:none!important}
.contact-fab.cf-btn svg{width:2rem;height:2rem}
.contact-fab.cf-btn span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:480px){.contact-fab.cf-btn{width:3.375rem!important;height:3.375rem}.contact-fab.cf-btn svg{width:1.8125rem;height:1.8125rem}}
/* ‖ s55 end ‖ */

/* ‖ s56 begin ‖ */
/* ‖ ٥٦. رمز الشيكل ‖ (2026-09-19) — عملةٌ واحدة في الموقع كلّه: ₪ بعد الرقم في اللغتين (currency_shekel.py).
   الرمز أعرض من الكلمة التي حلّ محلّها وأصغر منها في الخطّ نفسه: يُكبَّر إلى ما يقارب ارتفاع الأرقام، ويبقى
   أخفّ منها وزناً ولوناً كي لا ينافس السعر. */
.cur,small.cur,.card-price small.cur{display:inline-block;margin-inline-start:.16em;font-family:Arial,'Segoe UI',sans-serif!important;
  font-size:.86em!important;font-weight:600!important;line-height:1;color:currentColor;opacity:.75;vertical-align:0;letter-spacing:0}
.card-price .cur,.pdp .price .cur,.hx-min-n .cur{opacity:.7}
.hx-min-n .cur{font-size:clamp(2.125rem,3.4vw,3.625rem)!important;opacity:1;color:var(--aqua);align-self:baseline}
/* ‖ s56 end ‖ */
/* ‖ s57 begin ‖ */
/* ‖ ٥٧. معدّل إطارات الشاشة كاملاً ‖ (2026-09-19) — لا سقف للإطارات في الموقع (كلّ الحركات requestAnimationFrame بزمنٍ
   حقيقي)، لكن شاشة 165Hz تعطي كل إطار 6ms فقط. أُزيل العمل الذي يتكرّر في كل إطار بلا داعٍ:
   · الأورورا كانت تُحرّك background-position ⇒ إعادة رسم وتمويه طبقة الهيرو كلّها في كل إطار. صارت إزاحة transform
     لطبقةٍ أعرض بدورة واحدة كاملة (النقش يتكرّر كل 200% من العرض فالحلقة بلا قفزة) — تعمل على بطاقة الرسوميات وحدها.
   · بقعتا الهيرو كانتا filter:blur(60px) على دوائر كبيرة تتحرّك ⇒ تدرّج شعاعي بالمظهر نفسه، بلا فلتر.
   · طبقة السلة المغلقة كانت تحمل backdrop-filter على الشاشة كلّها وهي شفّافة ⇒ التمويه يعمل فقط وهي مفتوحة. */
.aurora-l::after{inset:0 auto 0 0;width:300%;background-size:66.667% 100%,33.333% 100%;background-position:0 0,0 0;
  animation:mm-aurora-x 40s linear infinite;will-change:transform}
@keyframes mm-aurora-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-66.667%,0,0)}}
@media(prefers-reduced-motion:reduce){.aurora-l::after{animation:none}}

.hx-bg .hx-blob{filter:none;will-change:translate}
.hx-bg .hx-blob-a{background:radial-gradient(circle closest-side,#8fd3ff 0%,#8fd3ff 38%,rgba(143,211,255,.45) 66%,rgba(143,211,255,0) 100%)}
.hx-bg .hx-blob-b{background:radial-gradient(circle closest-side,#8ff0e4 0%,#8ff0e4 30%,rgba(143,240,228,.45) 62%,rgba(143,240,228,0) 100%)}

/* خطوات/أرقام شريط المستشار: الزجاج كان يموّه نقشاً يدور خلفه (mm-spin) ⇒ تمويهٌ جديد في كل إطار وهو في الشاشة.
   النقش باهت (12%) فالتمويه لا يُرى تقريباً: لونٌ أكثف قليلاً بدله */
.mm-fig,.stat,.mm-step{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.14)}

.cart-ov{-webkit-backdrop-filter:none;backdrop-filter:none}
.cart-ov.on{-webkit-backdrop-filter:blur(0.125rem);backdrop-filter:blur(0.125rem)}
/* ‖ s57 end ‖ */
/* ‖ s58 begin ‖ */
/* ‖ ٥٨. زرّ المستشار: حوافٌّ أكثر استدارة ‖ (2026-09-20) — طلب المالك. الزرّ وحده يخرج عن زوايا الموقع (6px)
   لأنّه الفعل الوحيد المميَّز في الشريط: الإطار المعدنيّ والوجه واللوحة كلّها بالاستدارة نفسها حتى لا يظهر خطٌّ
   معدنيٌّ خارج الوجه عند الزوايا. */
.mainnav li.nav-adv>a.adv-metal-on{--adv-r:0.8125rem}
.mainnav li.nav-adv .adv-metal,
.mainnav li.nav-adv .adv-metal-rim,
.mainnav li.nav-adv .adv-metal-rim canvas{border-radius:var(--adv-r)!important}
.mainnav li.nav-adv .adv-metal-face{border-radius:calc(var(--adv-r) - 0.125rem)!important}
/* ‖ s58 end ‖ */
/* ‖ s59 begin ‖ */
/* ‖ ٥٩. مكتبة التمارين والبرامج: استغلال عرض الشاشة ‖ (2026-09-20) — طلب المالك: الفراغ على الجانبين كبير
   والبطاقات صغيرة. الصفحتان كانتا داخل الحاوية العامّة (1320px) فتُترك ~275px فارغةً على كلّ جانبٍ في شاشة 1870.
   الحاوية هنا تتبع الشاشة (94vw) بسقف 1760px كما في صفحات المتجر، والحدّ الأدنى لعرض البطاقة أكبر: العرض الزائد
   يذهب إلى حجم البطاقة والصورة لا إلى عمودٍ إضافيّ ضيّق. الخصائص منطقية فالاتجاهان يعملان بلا تكرار. */
@media(min-width:1081px){
  .wrap:has(>.ex-layout),
  .wrap:has(>.pr-layout){max-width:min(110rem,94vw);padding-inline:clamp(1.25rem,2.4vw,2.75rem)}
  .ex-grid{grid-template-columns:repeat(auto-fill,minmax(16.875rem,1fr));gap:1.375rem}
  .pr-grid{grid-template-columns:repeat(auto-fill,minmax(18.75rem,1fr));gap:1.5rem}
}
/* بين 1081 و1400 لا يتّسع الصفّ لثلاث بطاقاتٍ بالحدّ الأعلى (العمود الجانبي 300px)، فكان يهبط إلى بطاقتين
   عريضتين جداً: حدٌّ أدنى أصغر يبقي ثلاثاً في الصفّ */
@media(min-width:1081px) and (max-width:1199px){
  .ex-grid{grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr))}
  .pr-grid{grid-template-columns:repeat(auto-fill,minmax(15.75rem,1fr))}
}
/* ‖ s59 end ‖ */
/* ‖ s60 begin ‖ */
/* ‖ ٦٠. عرض الرأس، صورة السلّة، وبياض بلاطة البطاقة ‖ (2026-09-20) — ثلاثة طلباتٍ للمالك:

   ١) الرأس يتبع عرض الشاشة كصفحات القوائم (1760px بحدٍّ أقصى، 94vw دونه) بدل 1320px الثابتة، والشريط الذي تحته
      يأخذ الحاوية نفسها — وهو أصلاً موسَّطٌ داخلها (‎.mainnav .wrap{justify-content:center}‎) فيقع في منتصف الرأس
      تماماً مهما اتّسعت الشاشة. حقل البحث يبقى بسقفه (600px) فلا يتمدّد مع الرأس.
   ٢) صورة السلّة: كانت مربّعاً 72×72 بحشوة، وصور المنتجات 4:5 فكانت العلبة تصغر داخله. صارت البلاطة بنسبة 4:5
      وأكبر، والصورة تملؤها (‎contain‎ يُبقي العلبة كاملة) على بلاطة البطاقات نفسها بخلط ‎multiply‎ كبقيّة الموقع.
   ٣) بلاطة صورة المنتج أفتح: كانت ‎#e5ebf3‎ وطلب المالك بياضاً أكثر. الصور بيضاء الخلفية وتُخلط ‎multiply‎ فاللون
      هنا هو كلّ ما يُرى خلفها. */
:root{--wrap-hdr:min(110rem,94vw)}
.hdr .wrap.hdr-in,
.mainnav>.wrap{max-width:var(--wrap-hdr)}

.ci img{width:5.375rem;height:auto;aspect-ratio:4/5;object-fit:contain;padding:0;
  background:var(--tile,#eef3f9);mix-blend-mode:multiply;border-radius:var(--sharp)}
.cart-tbl .ci img,.cart-body .ci img{width:5.75rem}

.card{--tile:#eef3f9}

/* ٤) بطاقات «تسوّق حسب الهدف»: التكبير عند المرور كان 7% مع قفزةٍ في الإضاءة (0.82 ← 1) فبدا اقتحامياً.
   3% تكفي للإحساس بالعمق، ومنحنى الخروج يجعل الحركة تهدأ عند نهايتها بدل أن تتوقّف فجأة. */
.mm-rail .goal img{transition:transform 620ms cubic-bezier(.22,.61,.36,1),filter 620ms cubic-bezier(.22,.61,.36,1);
  filter:saturate(.8) brightness(.88);will-change:transform}
.mm-rail .goal:hover img,.mm-rail .goal:focus-visible img{transform:scale(1.03);filter:saturate(1) brightness(1)}
.goal:hover img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.mm-rail .goal:hover img,.goal:hover img{transform:none}}
/* ‖ s60 end ‖ */
/* ‖ s61 begin ‖ */
/* ‖ ٦١. قسم الأصالة: ثلاث عبوات ونقاطٌ موصولة بخطوط ‖ (2026-09-20) — طلب المالك: ثلاث عبوات من صوره، واحدةٌ
   كبيرة في الوسط واثنتان خلفها يميناً ويساراً، بظلالٍ وعمق، والأرقام ١-٢-٣ موصولةٌ بخطوطٍ إلى أسماء ما تشير إليه.
   الصور مقصوصةٌ من خلفيّتها البيضاء (home/auth_tubs.py) فتقف على خلفية القسم الزرقاء مباشرة.
   المسرح صار عموداً واحداً: العبوات فوق وبطاقات الفحص تحتها في ثلاثة أعمدة، ليتّسع للخطوط والأسماء. */
.hm-auth-stage{grid-template-columns:minmax(0,1fr);gap:clamp(1.125rem,2.2vw,1.875rem)}
.hm-checks{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(0.625rem,1vw,0.875rem)}
.hm-chk{align-content:start}

/* عمودان أوسعهما للعبوات — فوق 1100px فقط، فدون ذلك يبقى القسم عموداً واحداً كما في القاعدة الأصلية */
@media(min-width:1101px){.hm-auth-in{grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr)}}
/* الأحجام بالارتفاع لا بالعرض: العبوة الوسطى أطول من مربّع المسرح لو قيست بالعرض فيُقصّ غطاؤها */
.hm-tubs{position:relative;display:block;width:100%;aspect-ratio:16/9;margin-inline:auto}
/* العبوتان الخلفيّتان: أقصر، مائلتان قليلاً، وأغمق قليلاً لتبتعدا في العمق */
.hm-tub-side{position:absolute;bottom:9%;height:58%;width:auto;z-index:1;
  filter:drop-shadow(0 1.625rem 1.625rem rgba(0,16,42,.5)) brightness(.88) saturate(.95)}
.hm-tub-a{left:4%;rotate:-5deg;transform-origin:bottom center}
.hm-tub-b{right:4%;rotate:5deg;transform-origin:bottom center}
/* العبوة الوسطى: أطول، في المقدّمة، وظلٌّ أعمق تحتها */
.hm-tub-main{position:absolute;left:50%;bottom:2%;translate:-50% 0;height:94%;z-index:3}
.hm-tub-main>img{display:block;height:100%;width:auto;
  filter:drop-shadow(0 2.125rem 1.875rem rgba(0,16,42,.55)) drop-shadow(0 0.25rem 0.5rem rgba(0,16,42,.35))}
/* ظلُّ أرضيةٍ واحد تحت المجموعة كلّها يربطها بالأرض */
.hm-tubs::after{content:'';position:absolute;left:50%;bottom:1%;translate:-50% 0;width:78%;height:7%;z-index:0;
  background:radial-gradient(ellipse at center,rgba(0,12,34,.55),rgba(0,12,34,0) 70%);filter:blur(0.375rem)}

/* الخطوط الموصِلة: تُرسم بإحداثيّات الصورة نفسها فتبقى على موضعها مهما تغيّر الحجم */
.hm-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:4;pointer-events:none}
.hm-lines path{stroke:rgba(0,223,206,.75);stroke-width:5;stroke-dasharray:14 12;stroke-linecap:round}
.hm-tub-main .hm-dot{z-index:5}
.hm-tag{position:absolute;z-index:5;translate:-50% -50%;white-space:nowrap;
  font:600 0.8125rem/1 var(--fn);color:#eafbf9;background:rgba(3,40,80,.55);
  border:1px solid rgba(0,223,206,.45);border-radius:var(--sharp);padding:0.3125rem 0.625rem}
html[lang=ar] .hm-tag{font-size:0.875rem}

/* دون 1100px يصير القسم عموداً واحداً وتضيق الصورة: تبقى النقاط وحدها بلا خطوطٍ ولا أسماء */
@media(max-width:1100px){
  .hm-checks{grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr))}
}
@media(max-width:860px){
  .hm-lines,.hm-tag{display:none}          /* المسرح يضيق فلا تتّسع الخطوط والأسماء: تبقى الأرقام وحدها */
  .hm-tubs{aspect-ratio:16/11}
  .hm-tub-main{height:92%}
  .hm-tub-side{height:52%}
  .hm-tub-a{left:7%}
  .hm-tub-b{right:7%}
}
@media(prefers-reduced-motion:no-preference){
  .hm-tub-side,.hm-tub-main{transition:translate .5s var(--ease),rotate .5s var(--ease)}
  .hm-tubs:hover .hm-tub-a{translate:-0.375rem 0;rotate:-7deg}
  .hm-tubs:hover .hm-tub-b{translate:0.375rem 0;rotate:7deg}
}
/* ‖ s61 end ‖ */
/* ‖ s62 begin ‖ */
/* ‖ ٦٢. «تدرّب بمعرفة»: صورةٌ بحجمها الحقيقي ‖ (2026-09-20) — طلب المالك: الصور تبدو ضعيفة لأنّها معروضة كبيرة.
   الصورتان أصلاً 332×460 بكسل وكانتا تُمدّان إلى 716×507 (أكثر من الضعف) فتغبش. لا توجد نسخةٌ أكبر منهما في
   ملفّات الموقع، فالحلّ أن تُعرض بحجمها لا أن تُكبَّر: البطاقة صارت صفّاً — الصورة عمودٌ إلى جانب النصّ على خلفية
   العلامة — فتُعرض عند مقاسها تقريباً وتظهر حادّة، والنصّ على لونٍ صلب صار أوضح ممّا كان فوق الصورة.
   الصورة طبقةٌ مطلقة لا خليّةً في الشبكة: لو امتدّت على صفوف النصّ لوزّعت ارتفاعها عليها فتباعد السطور. */
.lib-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  justify-items:start;gap:0.625rem;min-height:clamp(16.25rem,22vw,20rem)!important;
  padding:1.625rem 1.625rem 1.625rem calc(clamp(15rem,42%,20rem) + 1.625rem);overflow:hidden}
html[dir=rtl] .lib-tile{padding:1.625rem calc(clamp(15rem,42%,20rem) + 1.625rem) 1.625rem 1.625rem}
.lib-img{position:absolute;inset-block:0;inset-inline-start:0;inset-inline-end:auto;z-index:0;
  width:clamp(15rem,42%,20rem);height:100%;object-fit:cover;object-position:50% 30%;border-radius:0}
.lib-tile>:not(.lib-img){position:relative;z-index:1;margin:0}
.lib-tile::after{content:none}                      /* لا تدرّج فوق الصورة: النصّ لم يعد فوقها */
.lib-tile:hover .lib-img{transform:none}            /* التكبير كان يبرز ضعف الدقّة */
.lib-tile p{max-width:38ch}

@media(max-width:900px){
  .lib-tile,html[dir=rtl] .lib-tile{padding:0 0 1.375rem;min-height:0!important}
  .lib-img{position:relative;inset:auto;width:100%;height:clamp(11.25rem,42vw,15rem)}
  .lib-tile>:not(.lib-img){padding-inline:1.25rem}
}
/* ‖ s62 end ‖ */
/* ‖ s63 begin ‖ */
/* ‖ ٦٣. صفحات النصّ (الأصالة وأخواتها): ترتيب الأحجام ‖ (2026-09-20) — طلب المالك: الكلام غير واضح والأحجام
   غير مضبوطة. السبب تصادم أسماء: القائمة ‎<ol class="num">‎ تشترك في الصنف مع بطاقة الرقم الكحلية، وقاعدتها
   ‎.num b{display:block;font-size:32px}‎ كانت تُطبَّق على ‎<b>‎ الذي يبدأ كلّ بند — فيخرج سطرُ العنوان 32px فوق
   شرحٍ 15.5px، أي أكبر من عناوين الأقسام نفسها (22px) فانقلب الترتيب.
   هنا: يعود ‎<b>‎ سطراً صغيراً داخل البند، وتكبر عناوين الأقسام، ويتّسع سطر القراءة قليلاً. */
.doc ol.num li b,.doc ul.bul li b{display:inline;font:inherit;font-weight:650;color:var(--ink);font-family:inherit}
.doc ol.num li,.doc ul.bul li,.doc p{font-size:1rem;line-height:1.85}
.doc ol.num{padding-inline-start:1.625rem}
.doc ol.num li{margin-bottom:0.875rem;padding-inline-start:0.25rem}
.doc ol.num li::marker{font-size:0.9375rem;font-weight:700}
.doc h2{font-size:clamp(1.375rem,1.9vw,1.6875rem);margin:2.625rem 0 1rem;padding-bottom:0.75rem}
.doc h3{font-size:1.1875rem;margin:1.75rem 0 0.625rem}
.doc .lead{font-size:1.09375rem;line-height:1.85}
.doc{max-width:53.75rem}
/* ‖ s63 end ‖ */
/* ‖ s64 begin ‖ */
/* ‖ ٦٤. ضبط العربية على اللاتيني ‖ (2026-09-21) — بعد استبدال الخطّ بـ IBM Plex Sans Arabic: العربية والإنجليزية
   بالمقاس والوزن نفسيهما في كل مكان. الزيادات التي كانت تُعطى للعربية (شريط التنقّل 19–20px مقابل 17px، والأزرار
   والعناوين الجانبية) كانت تعويضاً عن صِغَر Geeza، ولم تعد لها حاجة مع size-adjust.
   والتضييق (letter-spacing السالب) يُلغى في العربية: الحروف متّصلة، والتضييق يقرّبها حتى تكاد تتداخل. */
html[lang=ar]{--ui-w:500}
/* شريط المكتب وحده: تحت 821px للشريط مقاساته الخاصة (14.5px) ولا شأن لهذا به */
@media(min-width:821px){
  html[lang=ar] .mainnav a.nav-a,
  html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:1.0625rem}
}
@media(min-width:821px) and (max-width:1160px){
  html[lang=ar] .mainnav a.nav-a,html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:1rem}
}
@media(min-width:821px) and (max-width:1000px){
  html[lang=ar] .mainnav a.nav-a,html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:0.9375rem}
}
html[lang=ar] .mm-fbtn,html[lang=ar] .mm-side .mm-lbl{font-size:0.9375rem}
html[lang=ar] .mm-sec-h{font-size:0.8125rem}
html[lang=ar] .hm-chk h3,html[lang=ar] .hm-tag{font-size:1.0625rem}

html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,
html[lang=ar] .nav-a,html[lang=ar] .button,html[lang=ar] .eyebrow,
html[lang=ar] .sec-head p,html[lang=ar] p,html[lang=ar] li{letter-spacing:0}
/* ‖ s64 end ‖ */
/* ‖ s65 begin ‖ */
/* ‖ ٦٥. زوايا أنعم، زجاجٌ أصفى، عناوين أكبر ‖ (2026-09-21) — أربعة طلباتٍ للمالك، كلّها من المصدر نفسه حتى
   يبقى الموقع متطابقاً: رمز الزاوية ‎--sharp‎ وحده يحكم زوايا كل شيء (الدوائر تبقى دوائر)، ورموز الزجاج تحكم
   كل سطحٍ زجاجيّ.

   ١) الزوايا: 6px ← 9px. زرّ المستشار يتبع الرمز نفسه (+6) فيبقى أكثر استدارةً من جيرانه بالفارق نفسه.
   ٣) الزجاج أصفى: كانت الأسطح شبه معتمة (أبيض 92%) فتبدو بلاستيكاً. صارت شفّافة يظهر ما تحتها، ومعها تمويهٌ
      خفيف على الأسطح القليلة الثابتة فقط (الأزرار الشبحية والرقاقات) — لا على ما يمرّ فوق محتوى متحرّك، حفاظاً
      على معدّل الإطارات. الحافّة العلوية المضيئة والحدّ الرفيع هما ما يجعل السطح يُقرأ زجاجاً لا ضباباً.
   ٧) عناوين أقسام الصفحة الرئيسية أكبر وأوضح، ووصفها أكبر قليلاً.
   ١٣) المسافة تحت الشريط الملتصق أقلّ. */
:root{--sharp:0.5625rem;
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  --glass-bg-on:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58));
  --glass-line:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(12,74,140,.14);
  --glass-dark:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  --glass-dark-line:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 .5px rgba(255,255,255,.28)}
.mainnav li.nav-adv>a.adv-metal-on{--adv-r:calc(var(--sharp) + 0.375rem)}

/* الزجاج الفاتح: أزرارٌ شبحية ورقاقات — ثابتةٌ وقليلة فالتمويه عليها لا يُحسب في كل إطار */
.button.ghost,.blog-nav a{background:var(--glass-bg)!important;
  -webkit-backdrop-filter:blur(0.625rem) saturate(1.5);backdrop-filter:blur(0.625rem) saturate(1.5);
  box-shadow:var(--glass-line),0 0.625rem 1.375rem -0.875rem rgba(12,74,140,.45)!important}
.button.ghost:hover,.blog-nav a:hover{background:var(--glass-bg-on)!important}
.blog-nav a.on{-webkit-backdrop-filter:none;backdrop-filter:none}

/* الزجاج فوق الصور والأشرطة الداكنة: شفافٌ أكثر، بلا تمويه (يمرّ فوق محتوى يتحرّك مع التمرير) */
.goal-n,.lib-n{background:var(--glass-dark)!important;
  box-shadow:var(--glass-dark-line),0 0.625rem 1.375rem -0.875rem rgba(0,0,0,.55)!important}
:is(.mm-band,.story,.ftr,.mm-cta,.wh-hero,.pd-hero) .button.ghost{
  background:var(--glass-dark)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--glass-dark-line),0 0.75rem 1.625rem -1rem rgba(4,30,70,.6)!important}
.hm-chk{background:var(--glass-dark)}
.hm-chk:hover{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.12))}

/* ٧) عناوين الأقسام في الرئيسية */
.home .sec-head h2{font-size:clamp(1.6875rem,3.4vw,2.75rem);font-weight:650;letter-spacing:-.018em;line-height:1.16}
.home .sec-head p{font-size:1.03125rem;line-height:1.6;color:var(--slate-2)}
html[lang=ar] .home .sec-head h2{font-weight:600}

/* ١٣) المسافة تحت الشريط */
.hdr.stuck{margin-bottom:0.75rem}
/* ‖ s65 end ‖ */
/* ‖ s66 begin ‖ */
/* ‖ ٦٦. الرأس: حقل بحثٍ أوسع، وشارتان على الجهة نفسها ‖ (2026-09-21)

   ٢) كان الرأس ثلاثة أعمدة طرفاها ‎1fr‎ فيتمدّدان ويدفعان الشعار إلى أقصى اليسار والأيقونات إلى أقصى اليمين،
      والبحث محبوسٌ في 600px وسط فراغين كبيرين. صار الطرفان بعرض محتواهما فقط، والعمود الأوسط يأخذ ما بقي:
      يقترب الشعار والأيقونات من الحقل، ويتّسع الحقل بما بينهما.
   ٥) شارة المفضّلة كانت على يسار القلب وشارة السلّة على يمينها. صارتا على اليمين معاً. */
.hdr .wrap.hdr-in{grid-template-columns:max-content minmax(0,1fr) max-content;
  gap:clamp(0.875rem,2vw,2.125rem);align-items:center}
.hdr .wrap.hdr-in>.search{max-width:min(100%,56.25rem);width:100%;margin-inline:auto}
.hdr-in>.hdr-actions{justify-self:end;gap:0.25rem}

.hdr .wish .badge,.hdr-actions .wish .badge{inset-inline-start:auto;inset-inline-end:auto;left:auto;right:0.125rem}
/* ‖ s66 end ‖ */

/* ‖ s67 begin ‖ */
/* ‖ ٦٧. أقسام الرئيسية: الأهداف، المعرفة، الأصالة ‖ (2026-09-21) — طلبات المالك ٩ و١١ و١٢.

   ٩) «تسوّق حسب الهدف»: التكبير عند المرور يصير همساً (1.5%) بحركةٍ أطول تهدأ عند نهايتها، والنصّ والزرّ
      في منتصف اللوح لا على حافّته.
   ١١) «تدرّب بمعرفة»: الأزرق كان كحليّاً داكناً؛ صار أزرق العلامة الفاتح كما في الشعار.
   ١٢) شريط الأصالة كان بارتفاع هيرو: حشوةٌ أقلّ ومسرحٌ أعرض (نسبة 16/7) فينخفض الارتفاع من غير أن تصغر
       العبوات كثيراً. */

/* ٩ */
.mm-rail .goal img,.goal img{transition:transform 760ms cubic-bezier(.22,.61,.36,1),filter 620ms cubic-bezier(.22,.61,.36,1)}
.mm-rail .goal:hover img,.mm-rail .goal:focus-visible img,.goal:hover img{transform:scale(1.015)}
.mm-rail .goal-in,.goal-in{text-align:center;align-items:center;display:flex;flex-direction:column}
.mm-rail .goal h3,.goal h3{text-align:center}
.mm-rail .goal p,.goal p{text-align:center;margin-inline:auto}
.goal-n{align-self:center}

/* ١١ */
.lib-tile{background:linear-gradient(165deg,#1aa6fb 0%,#0d9cf8 55%,#0b8ae0 100%)}
.lib-n{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.14))!important}
.lib-tile p,.lib-n{color:rgba(255,255,255,.92)}

/* ١٢ */
.hm-auth{padding-block:clamp(2.125rem,3.4vw,3.625rem)!important}
.hm-tubs{aspect-ratio:16/7}
.hm-auth h2{font-size:clamp(1.75rem,2.6vw,2.625rem)}
@media(max-width:860px){.hm-tubs{aspect-ratio:16/9}}
/* ‖ s67 end ‖ */
/* ‖ s68 begin ‖ */
/* ‖ ٦٨. درج السلّة: لوحٌ زجاجيّ طافٍ ‖ (2026-09-21) — طلب المالك: تصميمٌ أفضل للدرج الجانبي بزجاجٍ حقيقي.
   الدرج كان لوحاً أبيض ملتصقاً بحافّة الشاشة من أعلاها إلى أسفلها. صار لوحاً طافياً بحواشٍ من الجهات الثلاث،
   بزجاجٍ يُظهر الصفحة خلفه (التمويه هنا مقبول: الدرج لا يظهر إلا مفتوحاً، والصفحة خلفه ساكنة).
   داخله: رأسٌ ملتصق، بنودٌ كلٌّ منها بطاقةٌ صغيرة بدل سطرٍ بخطٍّ فاصل، وتذييلٌ زجاجيّ يحمل المجموع والزرّ. */
/* حواشٍ منطقية لا فيزيائية: الدرج يخرج نحو حافّته (يمين في الإنجليزية، يسار في العربية)، والحشوة الفيزيائية
   كانت تثبّته يميناً في اللغتين فيقف المغلق في وسط الشاشة في العربية بدل أن يختفي */
.cart-dr{right:auto;left:auto;inset-block:0.625rem;inset-inline-end:0.625rem;inset-inline-start:auto;
  height:auto;width:min(27.5rem,calc(100% - 1.25rem));
  border-radius:calc(var(--sharp) + 0.5625rem);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(244,249,255,.76));
  /* التمويه يعمل وهو مفتوح فقط: لوحٌ مغلقٌ خارج الشاشة بتمويهٍ دائم كان يُكلّف الصفحة إطاراتها (قياس: 83 إطاراً
     في الثانية على صفحة التصنيفات بدل مئات) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(12,74,140,.18),
    0 2.5rem 5.625rem -1.875rem rgba(8,48,104,.5),0 0.75rem 1.875rem -1.125rem rgba(8,48,104,.35)}
/* اللوح طافٍ بحاشيةٍ 10px، فإزاحةُ 100% وحدها تترك شريطاً منه ظاهراً على الحافّة: تُزاد الحاشية والظلّ */
.cart-dr{transform:translateX(calc(var(--mm-dir) * (100% + 3.75rem)))}
.cart-dr.on{transform:translateX(0);
  -webkit-backdrop-filter:blur(1.625rem) saturate(1.7);backdrop-filter:blur(1.625rem) saturate(1.7)}
.cart-ov.on{background:rgba(10,32,66,.34)}

.cart-hd{position:sticky;top:0;z-index:2;padding:1.125rem 1.25rem 0.875rem;border-bottom:1px solid rgba(12,74,140,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38))}
.cart-hd h3{font-size:1.1875rem}
.cart-hd .cart-n{background:linear-gradient(180deg,rgba(13,156,248,.16),rgba(13,156,248,.08));
  color:var(--royal);box-shadow:inset 0 0 0 .5px rgba(13,156,248,.3)}
.cart-hd button{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 .5px rgba(12,74,140,.14)}

.cart-body{padding:0.75rem 0.875rem 0.375rem}
.cart-dr .ci{padding:0.75rem;margin-bottom:0.625rem;border-bottom:0;border-radius:var(--sharp);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(12,74,140,.1),0 0.5rem 1.25rem -1rem rgba(8,48,104,.5)}
/* خلف الصورة بلاطةٌ صلبة لا خلط ‎multiply‎: الخلط فوق سطحٍ شفّاف يعطي مربّعاً أبيض قاسياً */
.cart-dr .ci img{width:5.5rem;mix-blend-mode:normal;background:#eef3f9;
  box-shadow:inset 0 0 0 .5px rgba(12,74,140,.1)}
.cart-dr .ci-qty{background:rgba(255,255,255,.6);border-radius:var(--sharp);
  box-shadow:inset 0 0 0 .5px rgba(12,74,140,.14)}

.cart-ft{padding:1rem 1.125rem 1.125rem;border-top:1px solid rgba(12,74,140,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.8))}
@media(max-width:560px){
  .cart-dr{inset-block:0;inset-inline-end:0;width:100%;border-radius:0}
}
/* ‖ s68 end ‖ */
/* ‖ s69 begin ‖ */
/* ‖ ٦٩. شريط صور المنتج الطويل ‖ (2026-09-21) — بعد إضافة صور المنتجات صار لبعض الصفحات 17 صورة (حقيبة
   Jerome). الشريط فيه overflow-x:auto ليتمرّر أفقياً، لكنّ عمود الشبكة الذي يحويه كان يتّسع بقدر محتواه (عنصر شبكة
   حدّه الأدنى min-content) فيدفع الصفحة كلّها أعرض من الشاشة. min-width:0 يبقي العمود بعرضه فيتمرّر الشريط داخله. */
.pdp-media,.pdp-media>*{min-width:0}
.pdp-thumbs{max-width:100%;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.pdp-thumbs img{scroll-snap-align:start}
/* ‖ s69 end ‖ */
/* ‖ s70 begin ‖ */
/* ‖ ٧٠. أرقام الهاتف في العربية، وبطاقات التواصل ‖ (2026-09-22)
   ١) في الصفحات العربية كان الرقم ‎+970 598 613 185‎ يُعرض «185 613 598 970+»: مجموعات الأرقام المفصولة بمسافات
      تُعاد ترتيبها داخل سطرٍ من اليمين لليسار، فيقرأ الزبون رقماً خاطئاً. كلّ رقمٍ ظاهر في الموقع داخل ‎.biz‎
      (هاتفان، البريد، ومبلغ 400)، وكلّها تُقرأ من اليسار: تُعزل عن اتّجاه السطر فتبقى كما كُتبت.
   ٢) بعد حذف بطاقتي «ساعات العمل» و«الجملة» بقيت أربع بطاقات، فكانت ثلاثٌ في صفّ وواحدة وحدها تحته: صفّان
      من اثنتين، وعمودٌ واحد على الهاتف. */
.biz{direction:ltr;unicode-bidi:isolate}
@media(min-width:561px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ‖ s70 end ‖ */

/* ‖ s71 begin ‖ */
/* ‖ ٧١. زجاجٌ سائلٌ حقيقي، وحوافُّ أنعم ‖ (2026-09-22) — طلب المالك: ما كان يُسمّى زجاجاً بدا رمادياً مسطّحاً.
   وصفةٌ واحدة (--glass-*) تُطبَّق على كل سطحٍ زجاجيّ في الموقع فيتطابق كلّه، على مبادئ موادّ Apple:
     · طبقةٌ شفّافة يظهر ما خلفها مموَّهاً ومُشبَعاً (backdrop-filter) — هذا ما يجعله زجاجاً لا لوناً؛
     · حافّةٌ علوية مضيئة (الضوء يلتقط سماكة المادّة) وخيطُ انكسارٍ متدرّج حول الإطار؛
     · لمعةٌ داخلية من الأعلى وظلٌّ داخلي خفيف من الأسفل (سماكة)، وظلٌّ خارجي ناعم (ارتفاع)؛
     · النصّ فوقه أثقل قليلاً وبتباينٍ أعلى (vibrancy) ليبقى مقروءاً فوق خلفيةٍ متغيّرة.
   الحوافّ: رمز الموقع 9 ← 12px، وللأسطح الزجاجية 16px (أنعم كما طُلب)، والدوائر دوائر.
   الأداء: التمويه على عناصر معدودة (الرأس، الأزرار، الرقاقات)، لا على ما يتكرّر بالمئات. من يطلب تقليل
   الشفافية يحصل على سطحٍ شبه صلب بلا تمويه. */
:root{--sharp:0.75rem;--glass-r:1rem;
  --glass-blur:blur(1.375rem) saturate(1.9);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.36) 100%);
  --glass-fill-on:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.44) 48%,rgba(255,255,255,.52) 100%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(12,74,140,.06),
    inset 0 0.75rem 1.125rem -0.875rem rgba(255,255,255,.9),0 0 0 .5px rgba(12,74,140,.16),
    0 0.625rem 1.5rem -0.875rem rgba(12,74,140,.45),0 0.125rem 0.3125rem -0.125rem rgba(12,74,140,.12);
  --glass-rim:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 32%,rgba(13,156,248,.28) 60%,rgba(255,255,255,.85));
  --glass-dark:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.14) 100%);
  --glass-dark-edge:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0.75rem 1.125rem -0.875rem rgba(255,255,255,.5),
    0 0 0 .5px rgba(255,255,255,.34),0 0.75rem 1.625rem -1rem rgba(0,0,0,.6)}
.mainnav li.nav-adv>a.adv-metal-on{--adv-r:calc(var(--glass-r) + 0.25rem)}

/* الوصفة الفاتحة (فوق الصفحات البيضاء): الشريط، البحث، مبدّل اللغة، الأزرار الشبحية، رقاقات المدوّنة، درج السلّة */
.mainnav ul,.hdr .search input,.icon-btn.lang-toggle,.button.ghost,.blog-nav a:not(.on),.lt-menu,.mm-fbtn{
  background:var(--glass-fill)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important;
  box-shadow:var(--glass-edge)!important;border:0!important}
.mainnav ul,.icon-btn.lang-toggle,.button.ghost,.blog-nav a,.lt-menu,.mm-fbtn,.hdr .search input,.nav-lens,.cart-dr,
.hm-chk,.goal-n,.lib-n,.hx-card,.hx-chip{border-radius:var(--glass-r)!important}
.mainnav ul::before,.nav-lens::after,.button::after,.button.ghost::after{background:var(--glass-rim)!important}
.button.ghost:hover,.blog-nav a:not(.on):hover,.icon-btn.lang-toggle:hover{background:var(--glass-fill-on)!important}
.hdr .search input:focus{background:var(--glass-fill-on)!important}
/* حقل البحث شفّافٌ أيضاً لكنّ ما خلفه أبيض غالباً: يُقرأ الزجاج من حافّته المضيئة وخيطه لا من لونه */
.hdr .search input{color:var(--ink)}
.hdr .search input::placeholder{color:rgba(20,32,52,.62)}
/* العدسة: قطعةٌ من السطح نفسه أكثر بياضاً — لا صندوقٌ أبيض مصمت */
.nav-lens{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.62))!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(12,74,140,.06),0 0 0 .5px rgba(12,74,140,.14),
    0 0.5rem 1.125rem -0.5rem rgba(12,74,140,.4)!important}
/* النصّ فوق الزجاج: أثقل بدرجة وتباينٌ أعلى (vibrancy) */
.mainnav a.nav-a,.icon-btn.lang-toggle,.button.ghost,.blog-nav a{color:var(--ink);font-weight:600}

/* الوصفة الداكنة (فوق الصور والأشرطة الزرقاء): رقاقات الأهداف والمعرفة، بطاقات فحص الأصالة، أزرار الأشرطة */
.goal-n,.lib-n,.hm-chk,:is(.mm-band,.story,.ftr,.mm-cta,.wh-hero,.pd-hero) .button.ghost{
  background:var(--glass-dark)!important;
  -webkit-backdrop-filter:blur(1rem) saturate(1.6)!important;backdrop-filter:blur(1rem) saturate(1.6)!important;
  box-shadow:var(--glass-dark-edge)!important;color:#fff!important;border:0!important}
.hm-chk:hover{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16))!important}
.goal:hover .goal-n{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;color:var(--brand-deep)!important}

/* الزرّ الأساسي: زجاجٌ سماويّ سائل — لونٌ شفّافٌ فوق تمويه، لا لوحٌ مصمت */
.button:not(.ghost){
  background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),
             linear-gradient(180deg,rgba(67,182,255,.92) 0%,rgba(21,159,250,.9) 50%,rgba(10,134,224,.94) 100%)!important;
  -webkit-backdrop-filter:blur(0.875rem) saturate(1.6);backdrop-filter:blur(0.875rem) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -0.125rem 0.375rem rgba(0,50,120,.22),0 0 0 .5px rgba(6,80,160,.45),
    0 0.75rem 1.625rem -0.75rem rgba(13,156,248,.85)!important}
:is(.mm-band,.story,.ftr,.mm-cta,.wh-hero,.pd-hero) .button:not(.ghost){
  background:radial-gradient(120% 80% at 50% -20%,#fff,rgba(255,255,255,0) 60%),
             linear-gradient(180deg,rgba(255,255,255,.96),rgba(228,242,254,.9))!important;
  color:var(--brand-deep)!important}

/* مبدّل اللغة: العَلَم كاملاً (لا مقصوصاً) وأكبر وأوضح — نسبة 4:3 كنسبة العَلَم نفسه */
.icon-btn.lang-toggle{height:3rem;padding:0 0.875rem 0 0.625rem;gap:0.625rem;font-size:1rem}
.lt-flag,.lang-toggle .lt-flag{width:2.5rem;height:1.875rem;border-radius:0.4375rem;
  box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0.125rem 0.3125rem rgba(12,40,80,.28)}
.lt-flag::after{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}
.lt-opt .lt-flag{width:2.125rem;height:1.5625rem}

/* الدرج والقوائم: زجاجٌ أسمك (سطحٌ أكبر ⇒ تمويهٌ أقوى وظلٌّ أعمق) */
.cart-dr.on,.lt-menu{-webkit-backdrop-filter:blur(1.875rem) saturate(1.8)!important;backdrop-filter:blur(1.875rem) saturate(1.8)!important}
.cart-dr{background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(244,249,255,.56))!important}

@media(prefers-reduced-transparency:reduce){
  .mainnav ul,.hdr .search input,.icon-btn.lang-toggle,.button.ghost,.blog-nav a,.lt-menu,.mm-fbtn,.cart-dr{
    background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .goal-n,.lib-n,.hm-chk{background:rgba(20,40,70,.85)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* ‖ s71 end ‖ */
/* ‖ s72 begin ‖ */
/* ‖ ٧٢. الرأس: أضيق ومتناظر، يختفي بالتمرير، عدسةٌ أسرع؛ الأهداف بلا تمدّد؛ ألوان الأصالة والمعرفة ‖ (2026-09-22)

   ٢) الرأس أضيق وكل ما فيه في موضعه تماماً: العمودان الجانبيان متساويان (1fr و1fr) فيقع حقل البحث في منتصف
      الصفحة بالضبط، وتحته الشريط موسَّطٌ في الحاوية نفسها — فالشعار والبحث والأيقونات والشريط على محورٍ واحد.
   ٤) العدسة أسرع: 580 ← 240ms بمنحنى خروجٍ سريع، فتلحق بالمؤشّر بدل أن تتبعه.
   ٥) «تسوّق حسب الهدف»: كان اللوح المحوَّم عليه يتمدّد (1.62fr) والبقيّة تنكمش وصورته تُقصّ من جديد — هذا
      «التكبير الكبير». أُلغي: الألواح ثابتة، والحركة الوحيدة همسٌ في الصورة (1.5%) وظهور الوصف.
   ٦) «افحص العبوة» و«تدرّب بمعرفة» بأزرق العلامة الفاتح نفسه، ونصّ بطاقات المعرفة أكبر وأثقل.
   ٧) الرأس يختفي عند التمرير نزولاً ويعود عند أقلّ تمريرٍ صعوداً (motion.js) بانزلاقٍ ناعم. */
:root{--wrap-hdr:min(87.5rem,90vw)}
/* الجانبان متساويان (330px فأكثر: عرض الأيقونات مع مبدّل اللغة) فيقع البحث في منتصف الصفحة بالضبط ولا يتداخل
   معه شيء؛ يضيق البحث قبل أن يزاحمه جاره. دون 1101px يبقى تخطيط الشاشات الصغيرة. */
@media(min-width:1101px){
  .hdr .wrap.hdr-in{grid-template-columns:minmax(23.75rem,1fr) minmax(0,47.5rem) minmax(23.75rem,1fr);gap:clamp(1rem,2vw,2.25rem)}
  .hdr .wrap.hdr-in>.logo{justify-self:start}
  .hdr .wrap.hdr-in>.search{max-width:47.5rem;width:100%;justify-self:center}
  .hdr-in>.hdr-actions{justify-self:end}
}
.mainnav>.wrap{max-width:var(--wrap-hdr)}

.nav-lens{transition:transform .24s cubic-bezier(.2,.8,.2,1),width .24s cubic-bezier(.2,.8,.2,1),opacity .16s ease!important}
.nav-lens.press{transition-duration:.14s,.24s,.16s!important}

@media(hover:hover) and (min-width:961px){.mm-rail:hover{grid-template-columns:1fr 1fr 1fr 1fr 1fr!important}}
.mm-rail{transition:none!important}
@media(min-width:961px){.mm-rail .goal img{left:0!important;width:100%!important;translate:none!important}}

.hm-auth,html[dir=rtl] .hm-auth{background:radial-gradient(56.25rem 32.5rem at 78% 20%,rgba(255,255,255,.16),transparent 60%),
  linear-gradient(165deg,#1aa6fb 0%,#0d9cf8 55%,#0b8ae0 100%)!important}
.hm-auth .eyebrow{color:#fff}                 /* السماويّ فوق الأزرق الفاتح لم يعد يُقرأ */
.hm-auth .eyebrow::before{background:#fff}
.lib-tile h3{font-size:clamp(1.5rem,2.1vw,1.9375rem);font-weight:750;letter-spacing:-.02em;line-height:1.15}
.lib-tile p{font-size:1.03125rem;font-weight:500;line-height:1.55;color:#fff!important}
.lib-n{font-size:0.90625rem;font-weight:600}
.lib-n b{font-size:1.625rem;font-weight:800}
.lib-go{font-size:1rem;font-weight:700}

.hdr{transition:transform .46s cubic-bezier(.32,.72,0,1),margin-bottom var(--d) var(--ease);will-change:transform}
.hdr.hdr-hide{transform:translateY(calc(-100% - 1.5rem));pointer-events:none}
@media(prefers-reduced-motion:reduce){.hdr{transition:none}}
/* ‖ s72 end ‖ */

/* ‖ s74 begin ‖ */
/* ‖ ٧٤. أزرار إتمام الطلب: زجاجٌ بوميضٍ يدور حول الحافّة ‖ (2026-09-22) — طلب المالك، على غرار مكوّن
   GlassmorphismCta (React/Tailwind) لكن بأزرق العلامة لا البنفسجي، وبلا تغيير في المارك-أب أو السلوك:
     · ‎#cartGo‎ زرّ «عرض السلّة وإتمام الطلب» في درج السلّة (كل الصفحات)،
     · ‎#toCheckout‎ زرّ «إتمام الطلب» في صفحة السلّة، و‎#coConfirm‎ زرّ تأكيد الطلب في صفحة الدفع.
   الوميض مذنّبٌ مخروطيّ (conic-gradient) يدور في حلقة ‎::after‎ الموجودة أصلاً (قناعها يُبقي الإطار وحده)،
   وزاويته خاصيّةٌ مسجَّلة (‎@property‎) تتحرّك؛ المتصفّح الذي لا يدعمها يرى الحلقة ثابتة. في الدرج المغلق لا يدور
   شيء، ومع تقليل الحركة كذلك. الجسم زجاج العلامة السماويّ نفسه (§٧١) مع هالةٍ زرقاء أوسع. */
@property --cta-a{syntax:'<angle>';inherits:false;initial-value:0deg}
#cartGo,#toCheckout,#coConfirm{isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -0.125rem 0.375rem rgba(0,50,120,.22),0 0 0 .5px rgba(6,80,160,.4),
    0 0.625rem 2.5rem -0.5rem rgba(13,156,248,.7)!important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .22s ease}
#cartGo::after,#toCheckout::after,#coConfirm::after{padding:0.125rem;
  background:conic-gradient(from var(--cta-a),transparent 0deg,rgba(255,255,255,.8) 80deg,#fff 140deg,transparent 140deg),
    linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22))!important;
  opacity:1!important;animation:cta-spin 4s linear infinite}
@keyframes cta-spin{to{--cta-a:360deg}}
.cart-dr:not(.on) #cartGo::after{animation:none}
@media(hover:hover){
  #cartGo:hover,#toCheckout:hover,#coConfirm:hover{transform:scale(1.03);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -0.125rem 0.375rem rgba(0,50,120,.22),0 0 0 .5px rgba(6,80,160,.4),
      0 0 2.5rem 0.375rem rgba(13,156,248,.5)!important}
}
#cartGo:active,#toCheckout:active,#coConfirm:active{transform:scale(.975);transition-duration:80ms}
#cartGo[disabled],#toCheckout[disabled],#coConfirm[disabled],
#cartGo[aria-disabled=true],#toCheckout[aria-disabled=true],#coConfirm[aria-disabled=true]{transform:none}
:is(#cartGo,#toCheckout,#coConfirm)[disabled]::after,:is(#cartGo,#toCheckout,#coConfirm)[aria-disabled=true]::after{animation:none}
@media(prefers-reduced-motion:reduce){
  #cartGo::after,#toCheckout::after,#coConfirm::after{animation:none}
  #cartGo:hover,#toCheckout:hover,#coConfirm:hover{transform:none}
}
/* ‖ s74 end ‖ */

/* ‖ s75 begin ‖ */
/* ‖ ٧٥. بطاقة المنتج: لا تكبيرَ للصورة عند التحويم ‖ (2026-09-22، طلب المالك) — كانت الصورة تكبر 4% تحت المؤشّر.
   البطاقة نفسها تبقى كما هي (لا ارتفاع ولا ظلّ بعد §٢٣)؛ زرّ الإضافة والقلب بحركتهما كما هما. */
.card:hover .card-img img,.card:focus-within .card-img img{transform:none!important}
/* ‖ s75 end ‖ */

/* ‖ s76 begin ‖ */
/* ‖ ٧٦. صفحة المنتج الغنيّة (‎.pdp-rich‎) ‖ (2026-09-23) — كتل المزايا والأرقام والقيمة الغذائية والأسئلة داخل عمود الصفحة نفسه
   (بعد «عن هذا المنتج» وقبل تقييمات الزبائن). الكتل الملوّنة لوحٌ مستديرٌ بحشوته لا شريطٌ بعرض الشاشة. */
.pdp-rich{max-width:none;padding:0 0 1.875rem}
.pdp-rich .pblock{padding:clamp(2.125rem,4vw,3.25rem) 0;border-top:1px solid var(--line)}
.pdp-rich .pblock.tint{padding:clamp(1.75rem,3.4vw,2.75rem) clamp(1.25rem,3vw,2.75rem);margin:1.125rem 0 0.375rem;border:0;border-radius:var(--glass-r);background:var(--sky-50)}
.pdp-rich .pblock.tint + .pblock{border-top:0}
.pdp-rich .pblock h2{font-size:clamp(1.375rem,2.4vw,1.875rem);letter-spacing:-.015em;margin-bottom:0.75rem}
.pdp-rich .lead{font-size:1.03125rem;line-height:1.75}
.pdp-rich .feat{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.pdp-rich .tint .feat,.pdp-rich .tint .ntable td{background:#fff}
.pdp-rich .proc div{border-inline-start:0.1875rem solid var(--sky)}
.pdp-rich .acc{border-top:0}
.pdp-rich .ntable{border-radius:var(--sharp);overflow:hidden}
@media(max-width:900px){.pdp-rich .feat-grid{grid-template-columns:repeat(2,1fr)}.pdp-rich .nums{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.pdp-rich .feat-grid,.pdp-rich .nums{grid-template-columns:1fr}.pdp-rich .ntable{font-size:0.78125rem}.pdp-rich .ntable td,.pdp-rich .ntable th{padding:0.5625rem 0.5rem}}
/* ‖ s76 end ‖ */
/* ‖ s77 begin ‖ */
/* ‖ ٧٧. الرأس وشريط التنقّل (جولة 30، 2026-09-23) ‖
   طلب المالك:
   ٨)  الرأس نفسه (الشعار والبحث والأيقونات) لا يختفي أبداً؛ شريط التنقّل وحده يختفي عند النزول
       ويعود عند الصعود، بحركةٍ هادئة، والطبقتان مستقلّتان: لا تراكب ولا قفز ولا تغيّر في التخطيط.
   ١٥) المسافة بين الرأس والشريط أقلّ — كانا يبدوان طبقتين عائمتين منفصلتين: 25px بين حقل البحث
       والكبسولة في أعلى الصفحة، وشريطٌ شفّاف 10px بين حافّة الرأس الملتصق والكبسولة.
   المقاسات (≥821px، حيث يظهر الشريط):
     أعلى الصفحة:  صفّ 88px (كان 96)، الكبسولة ملاصقةٌ لحافّته (كانت على 2px) → 19px من البحث.
     ملتصق:        صفّ 72px، الكبسولة على 2px من حافّته (كانت 10px) → 13px من البحث.
   تعويض الالتصاق: الرأس يقصر 22px حين يلتصق (152 → 130)، والهامش السفليّ نفسه يعيدها فلا يتحرّك
   المحتوى تحته. كانت قاعدة ‎.hdr.stuck{margin-bottom:8px}‎ في §50 (الهيرو) تسري على كل الصفحات
   فيقفز المحتوى 16px عند أوّل تمرير (6px على الهاتف) — ‎html .hdr.stuck‎ هنا أعلى تحديداً منها. */
@media(min-width:821px){
  .hdr-in,.hdr::before{height:5.5rem}
  .hdr .mainnav{padding-top:0;padding-bottom:0.75rem}
  .hdr.stuck .hdr-in,.hdr.stuck::before{height:4.5rem}
  .hdr.stuck .mainnav{padding-top:0.125rem;padding-bottom:0.5rem}
  html .hdr.stuck{margin-bottom:1.375rem}
}
@media(max-width:820px){html .hdr.stuck{margin-bottom:0.875rem}}
@media(max-width:560px){html .hdr.stuck{margin-bottom:0.5rem}}

/* ── ٨) الشريط وحده يختفي ──
   الكبسولة ترتفع قليلاً وتتلاشى (لا تنزلق فوق الصفّ: ‎clip-path‎ أو شفافيةٌ على ‎.mainnav‎ تجعله
   «جذر خلفية» فيفقد الزجاج تغبيش الصفحة خلفه). ارتفاع الرأس لا يتغيّر (تحويلٌ فقط) فلا يتحرّك شيء
   في الصفحة، وما كان تحت الشريط يصير قابلاً للنقر. الإخفاء أسرع من الظهور. */
@media(min-width:821px){
  .hdr .mainnav ul{transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .3s ease,visibility 0s linear 0s}
  .hdr.nav-hide .mainnav ul{transform:translateY(-0.625rem) scale(.985);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .22s ease,visibility 0s linear .3s}
}
/* الرأس لا يلتقط النقر في مساحته الشفّافة (جانبا الشريط، ومكانه حين يختفي)؛ الصفّ والكبسولة والقوائم تلتقطه */
.hdr{pointer-events:none}
.hdr>.hdr-in,.hdr>.mega,.hdr .mainnav ul{pointer-events:auto}
.hdr.nav-hide .mainnav ul{pointer-events:none}
/* الرأس كلّه لم يعد يُخفى (كانت ‎.hdr-hide‎ ترفعه بأكمله) */
.hdr.hdr-hide{transform:none;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .hdr .mainnav ul,.hdr.nav-hide .mainnav ul{transition:opacity .2s ease,visibility 0s linear .2s;transform:none}
}

/* ── العناصر اللاصقة تحت الرأس تتبع حافّته المرئية ──
   مع الشريط: أسفل الكبسولة 122px + 13px. بدونه: أسفل الصفّ 72px + 13px. تنزلق مع الشريط. */
:root{--mm-sticky:8.4375rem}
html.mm-nav-hidden{--mm-sticky:5.3125rem}
/* بالعربية الشريط في جهة زرّ واتساب العائم (يمين الشاشة باللغتين): يُترك له مكانه أسفل الشريط حين يبلغ طرفُ الشريط
   عمودَ الزرّ فقط (146px = بُعده عن الأسفل 74 + ارتفاعه 60 + 12؛ كانت 107 فيغطّي الزرّ أسفل الشريط 27px) — ‎.mm-fab-room‎ يضعه motion.js ١٣·٧ (وboot.js قبل الرسم لشريط المتجر). جولة 32 (المالك: «شريط
   الفئات بالعربية لا يفعل ما يفعله بالإنجليزية»): كان يُترك دائماً، فقصر الشريط العربي 87px على الشاشات العريضة بلا سبب */
@media(min-width:901px){
  .ex-filters.mm-side{top:var(--mm-sticky);max-height:calc(100vh - var(--mm-sticky) - 1.0625rem);
    transition:top .42s cubic-bezier(.32,.72,0,1),max-height .42s cubic-bezier(.32,.72,0,1)}
  /* القاعدة العربية الأقدم (§25، ‎100vh - 250px‎ دائماً) تُلغى هنا صراحةً — التحديد نفسه وبعدها */
  html[dir=rtl] .ex-filters.mm-side{max-height:calc(100vh - var(--mm-sticky) - 1.0625rem)}
  html[dir=rtl] .ex-filters.mm-side.mm-fab-room{max-height:calc(100vh - var(--mm-sticky) - 9.125rem)}
}
@media(min-width:1081px){
  .col-layout.mm-side-on>.mm-side-shop{top:var(--mm-sticky);max-height:calc(100vh - var(--mm-sticky) - 1.25rem);
    transition:top .42s cubic-bezier(.32,.72,0,1),max-height .42s cubic-bezier(.32,.72,0,1)}
  html[dir=rtl] .col-layout.mm-side-on>.mm-side-shop{max-height:calc(100vh - var(--mm-sticky) - 1.25rem)}
  html[dir=rtl] .col-layout.mm-side-on>.mm-side-shop.mm-fab-room{max-height:calc(100vh - var(--mm-sticky) - 9.125rem)}
}
@media(min-width:821px){
  .art-aside,.pdp-media,.sum,.pd-side,.exd-imgs{top:var(--mm-sticky);transition:top .42s cubic-bezier(.32,.72,0,1)}
}

/* ── أوّل رسم للرأس = شكله النهائيّ ──
   ١) عدسة البند الحالي تُبنى في motion.js بعد رسم الصفحة: قبلها يلبس البند نفسه شكلها (الزجاج الأنصع
      نفسه)، ثم تحلّ العدسة مكانه بلا انتقال (‎.mm-init‎) فلا يُرى تبدّل. */
@media(min-width:821px){
  .mainnav ul:not(:has(>.nav-lens.on))>li.nav-on:not(.nav-adv)>a.nav-a{
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.62));border-radius:var(--glass-r);
    box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(12,74,140,.06),0 0 0 .5px rgba(12,74,140,.14),0 0.5rem 1.125rem -0.5rem rgba(12,74,140,.4)}
  .nav-lens.mm-init{transition:none!important}
  /* ٢) كبسولة «المستشار» صارت في وسم كل صفحة (كان motion.js يُدخلها): حافّتها المعدنية قبل أن ترسمها
     لوحة WebGL هي الحافّة الثابتة نفسها التي تظهر بلا WebGL — ‎:empty‎ حتى تُضاف اللوحة */
  .adv-metal-rim:empty{background:conic-gradient(from 210deg,#eaf7ff,#3a8fd0,#ffffff,#0a59a9,#d6efff,#4aa6e6,#eaf7ff)}
}
/* ‖ s77 end ‖ */


/* ‖ s79 begin ‖ */
/* ‖ ٧٩. صفحات القوائم: شريط «تصفية وترتيب» (جولة 30، 2026-09-23) ‖
   ٤) الشريط المحفوظ مفتوحاً يُحجز عموده قبل أوّل رسم (boot.js يضع ‎.mm-side-on‎ على التخطيط)، فتُرسم البطاقات
      من البداية بأربعة أعمدة ولا تقفز. قبل أن يُدخل motion.js الشريط لا يوجد في العمود الأوّل إلا ‎aside.filters‎
      المخفيّ، فكان ‎main‎ سيأخذ العمود الضيّق: يُثبَّت في العمود الثاني. الشريط نفسه يدخل بحركته المعتادة
      (‎mm-side-enter‎: انزلاقٌ من جهة البداية وأقسامه تتبعه).
   ٩) ارتفاع الشريط يتبع ما بقي من الشاشة تحته (motion.js ١٣·٧ يكتبه حين لا يكون ملتصقاً بعد)؛ ملتصقاً يأخذ
      ارتفاع الشاشة ناقص الرأس (§77). ما زاد يُمرَّر داخله، ولا يُقصّ أسفل الشاشة. */
@media(min-width:1081px){
  .wrap.col-layout.mm-side-on>main{grid-column:2}
}
.ex-filters.mm-fit,.mm-side-shop.mm-fit{transition:none!important}
/* ‖ s79 end ‖ */
/* ‖ s80 begin ‖ */
/* ‖ ٨٠. رؤوس الصفحات الداخلية — أقصر وأنظف (جولة 30، 2026-09-23) ‖
   طلب المالك: رؤوس «من نحن، البرامج، مكتبة التمارين…» أحدث وأفخم وأبسط، والأهمّ أصغر وأقصر (كانت
   275–400px، أي ثلث الشاشة إلى نصفها قبل أيّ محتوى).
   التصميم: لوحٌ زجاجيّ واحد على حدود محتوى الصفحة نفسها (لا شريطٌ بعرض الشاشة) —
     · مربّع زجاجيّ بأيقونة الصفحة (في الوسم نفسه، round30/ph_static.py؛ كانت ثلاث أيقوناتٍ تُحقن بعد الرسم)،
     · مسار تنقّلٍ حقيقيّ فوق العنوان (الرئيسية › الصفحة)، ثم العنوان وسطرٌ أو سطران من الوصف،
     · الأرقام (البرامج، التمارين، الجملة) كبسولاتٌ صغيرة في الطرف البعيد على الشاشة العريضة، وتحت النصّ على الأضيق،
     · بصمة العلامة: M واحدة كبيرة خافتة في الطرف البعيد (لا تنعكس بالعربية) وخطٌّ رفيع بتدرّج العلامة في الأسفل.
   المستشار وحده بالأخضر (أكوا) كما كان. ارتفاع اللوح ~150–190px على الحاسوب. */
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero){
  --ph-a:13,156,248;--ph-ink:#0a59a9;--ph-b1:#f7fbff;--ph-b2:#eef6fe;--ph-b3:#e4f2fd;
  --ph-line:linear-gradient(90deg,#0a59a9,#0d9cf8 55%,#00dfce);
  position:relative;isolation:auto;overflow:visible!important;border:0!important;color:var(--ink);
  padding:0!important;background:none!important;
  /* الهامش العلويّ للّوح يبقى داخل القسم: كان ينهار عبره وعبر ‎<main>‎ مع هامش الرأس السفليّ الذي يعوّض قِصَره حين
     يلتصق (‎.hdr.stuck{margin-bottom:22px}‎ ‏s77) فتقفز الصفحة 20px لحظة الالتصاق */
  display:flow-root}
.adv-hero{--ph-a:0,178,165;--ph-ink:#007f76;--ph-b1:#f5fdfc;--ph-b2:#e9f9f6;--ph-b3:#dcf5f1;
  --ph-line:linear-gradient(90deg,#007f76,#00dfce 55%,#0d9cf8)}
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)::before,
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)::after{content:none!important}
/* الشريط القديم (s52) له قاعدةٌ خاصّة بالعربية ‎html[dir=rtl] :is(…)‎ أعلى خصوصيةً من ‎background:none‎ أعلاه،
   فكان في العربية وحدها يرسم خلف اللوح شريطاً فاتحاً بعرض الشاشة وخطّ العلامة تحته */
html[dir=rtl] :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero){background:none!important}

/* اللوح */
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap){
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(1rem,1.7vw,1.625rem);
  grid-template-areas:"ico crumbs meta" "ico title meta" "ico desc meta" ". extra extra";
  width:calc(100% - 2.5rem);max-width:calc(var(--wrap) - 2.5rem);margin:clamp(0.75rem,1.4vw,1.25rem) auto clamp(1.375rem,2.4vw,2.125rem);
  padding:clamp(1.25rem,2vw,1.75rem) clamp(1.25rem,2.4vw,2.25rem) clamp(1.375rem,2.2vw,1.875rem);
  border-radius:calc(var(--glass-r,1rem) + 0.25rem);
  background:
    radial-gradient(32.5rem 13.75rem at 100% 0%,rgba(var(--ph-a),.13),transparent 70%),
    linear-gradient(120deg,var(--ph-b1) 0%,var(--ph-b2) 52%,var(--ph-b3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(12,74,140,.13),0 1.375rem 2.75rem -2.125rem rgba(12,74,140,.5)}
/* عرض اللوح = عمود المحتوى الذي تحته في كل صفحة، فتلتقي حافّتاهما:
   البرامج والتمارين على الحاوية العريضة (min(1760px,94vw) وهامشها)، صفحات النصوص على عمود ‎.doc‎ (820px)،
   صفحة الجملة على ‎.doc.wide‎ (1060px)، المستشار 960px، وسائر الصفحات (ومنها المتابعة منذ صار لمحتواها هامش الموقع،
   s90) على الحاوية العادية. */
@media(min-width:1081px){   /* الحاوية العريضة نفسها لا تسري إلا من 1081px (style.css §59) */
  :is(.pr-hero,.ex-hero)>.wrap{--ph-pad:clamp(1.25rem,2.4vw,2.75rem);
    width:min(calc(min(110rem,94vw) - 2 * var(--ph-pad)),calc(100% - 2 * var(--ph-pad)));max-width:none}
}
.pg-hero:has(+.doc:not(.wide))>.wrap{max-width:51.25rem}
:is(.pg-hero,.wh-hero):has(+.doc.wide)>.wrap{max-width:66.25rem}
.adv-hero>.adv-wrap{max-width:60rem}
html[dir=rtl] :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap){
  background:
    radial-gradient(32.5rem 13.75rem at 0% 0%,rgba(var(--ph-a),.13),transparent 70%),
    linear-gradient(240deg,var(--ph-b1) 0%,var(--ph-b2) 52%,var(--ph-b3) 100%)}
/* بصمة العلامة: M كبيرة خافتة في الطرف البعيد، والخطّ المتدرّج في الأسفل */
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap)::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;inset-inline-end:clamp(-2.75rem,-2vw,-1.125rem);top:50%;
  width:clamp(10.625rem,17vw,15.625rem);aspect-ratio:1.15;translate:0 -50%;
  background:linear-gradient(135deg,rgba(var(--ph-a),.16),rgba(0,223,206,.13));
  -webkit-mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat;mask:url(../media/brand/mm-mark-mask.png) center/contain no-repeat}
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap)::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;inset-inline:clamp(1.25rem,2.4vw,2.25rem);bottom:0;height:0.125rem;
  border-radius:0.125rem;background:var(--ph-line);opacity:.85}
html[dir=rtl] :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap)::before{
  background:linear-gradient(270deg,#0a59a9,#0d9cf8 55%,#00dfce)}
html[dir=rtl] .adv-hero>.adv-wrap::before{background:linear-gradient(270deg,#007f76,#00dfce 55%,#0d9cf8)}

/* مربّع الأيقونة: زجاج الشريط نفسه */
.ph-ico{grid-area:ico;align-self:center;position:relative;display:grid;place-items:center;
  width:4rem;height:4rem;border-radius:calc(var(--glass-r,1rem) + 0.125rem);color:rgb(var(--ph-a));
  background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.74) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(12,74,140,.05),0 0 0 .5px rgba(12,74,140,.14),0 0.75rem 1.625rem -0.875rem rgba(12,74,140,.5)}
.ph-ico::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--glass-rim,linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 40%,rgba(13,156,248,.25)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ph-ico svg{width:1.875rem;height:1.875rem}

/* مسار التنقّل */
.ph-crumbs{grid-area:crumbs;display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;margin:0 0 0.375rem;
  font-size:0.84375rem;line-height:1.4;font-weight:500;color:#5b6b85}
.ph-crumbs a{color:#5b6b85;text-decoration:none;border-radius:0.25rem;transition:color .16s ease}
.ph-crumbs a:hover{color:var(--ph-ink);text-decoration:underline;text-underline-offset:0.1875rem}
.ph-crumbs a:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.125rem}
.ph-crumbs [aria-current]{color:var(--ph-ink);font-weight:600}
.ph-sep{width:0.375rem;height:0.375rem;flex:none;border-top:0.09375rem solid currentColor;border-inline-end:0.09375rem solid currentColor;
  transform:rotate(45deg);opacity:.55;margin-inline:1px 0.125rem}
html[dir=rtl] .ph-sep{transform:rotate(-45deg)}

/* العنوان والوصف */
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1{grid-area:title;margin:0 0 0.375rem!important;
  font-size:clamp(1.625rem,1.5vw + 0.875rem,2.375rem)!important;line-height:1.12;font-weight:650;letter-spacing:-.022em;
  color:var(--brand-ink,#141414)!important}
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1+p,
:is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1+.wish-sub{grid-area:desc;margin:0!important;
  max-width:72ch;font-size:0.96875rem!important;line-height:1.6!important;color:#3d4a63!important;opacity:1!important}
.pg-hero .mm-404-mark{display:none}

/* الأرقام: كبسولاتٌ صغيرة في الطرف البعيد */
:is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats){grid-area:meta;align-self:center;display:flex;flex-wrap:nowrap;
  gap:0.625rem;margin:0!important;padding:0}
:is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats)>div{min-width:0;margin:0;padding:0.625rem 0.875rem;border:0!important;
  border-radius:var(--sharp);background:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.12),0 0.5rem 1.125rem -0.875rem rgba(12,74,140,.4)}
:is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats) b{display:block;font-size:1.3125rem!important;line-height:1.15;font-weight:650;
  color:var(--brand-ink,#141414)!important;font-family:var(--fn);letter-spacing:-.01em}
:is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats) span{display:block;margin-top:0.125rem;font-size:0.78125rem!important;line-height:1.3;
  font-weight:500;color:#5b6b85!important;opacity:1!important;white-space:nowrap}

/* ما تحت النصّ: تصنيفات المدوّنة، وسوم المستشار، أزرار ٤٠٤ */
:is(.blog-hero .blog-nav,.adv-hero .adv-tags,.pg-hero .mm-hero-cta){grid-area:extra;margin:0.875rem 0 0!important;padding:0!important}
.adv-hero .adv-tags span{background:rgba(255,255,255,.72)}

/* اللوحيّ: الأرقام تحت الوصف */
@media(max-width:1100px){
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap){
    grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico crumbs" "ico title" "ico desc" ". meta" ". extra"}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats){margin-top:0.875rem!important;flex-wrap:wrap}
}
/* الهاتف: أيقونةٌ أصغر بجانب المسار والعنوان، والوصف والأرقام بعرض اللوح */
@media(max-width:760px){
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap){
    grid-template-areas:"ico crumbs" "ico title" "desc desc" "meta meta" "extra extra";column-gap:0.75rem;
    width:calc(100% - 2.5rem);margin:0.625rem auto 1.25rem;padding:1rem 1rem 1.125rem}
  .ph-ico{width:2.875rem;height:2.875rem;border-radius:0.875rem;align-self:center}
  .ph-ico svg{width:1.4375rem;height:1.4375rem}
  .ph-crumbs{font-size:0.78125rem;margin-bottom:0.1875rem}
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1{font-size:clamp(1.375rem,6.2vw,1.6875rem)!important;margin:0!important}
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1+p,
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1+.wish-sub{margin-top:0.625rem!important;font-size:0.90625rem!important;line-height:1.6!important}
  /* الوصف: ثلاثة أسطر على الهاتف (اللوح يعرّف الصفحة؛ الشرح الطويل للشاشة الأوسع) */
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1+p{display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  /* الأرقام وتصنيفات المدوّنة ووسوم المستشار: صفٌّ واحد يُسحب أفقياً بدل صفوفٍ تتراكم */
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats),
  .blog-hero .blog-nav,.adv-hero .adv-tags{display:flex;flex-wrap:nowrap!important;gap:0.5rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-1rem!important;padding:0.125rem 1rem 0.25rem!important;
    -webkit-mask:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 1rem),transparent);
    mask:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 1rem),transparent)}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats)::-webkit-scrollbar,.blog-hero .blog-nav::-webkit-scrollbar,
  .adv-hero .adv-tags::-webkit-scrollbar{display:none}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats){margin-top:0.75rem!important}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats)>div,.blog-hero .blog-nav>a,.adv-hero .adv-tags>span{flex:none;scroll-snap-align:start}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats)>div{padding:0.5rem 0.75rem}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats) b{font-size:1.0625rem!important}
  :is(.blog-hero .blog-nav,.adv-hero .adv-tags){margin-top:0.75rem!important}
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap)::after{display:none}
  :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero)>:is(.wrap,.adv-wrap)::before{inset-inline:1rem}
}
/* ‖ s80 end ‖ */

/* ‖ s81 begin ‖ */
/* ‖ ٨١. تصحيحات جولة 30 (2026-09-23) ‖
   ١) تحت الرأس الجديد (§80): أوّل حاوية بعده كانت تبدأ بحشوتها القديمة (44px في صفحات النصوص، 34px في
      المدوّنة…) فوق هامش اللوح، فصار الفراغ 60–108px (156px في صفحة ٤٠٤) — نصف ما وفّره تقصير الرأس.
      الآن هامش اللوح وحده (34px على الحاسوب، 20px على الهاتف). */
:is(.pg-hero,.wh-hero)+.doc,.pg-hero+.wrap,.pg-hero+.wrap.wish-wrap,.tr-hero+.tr-body,.blog-hero+.sec,.pg-hero+.sec,
:is(.pr-hero,.ex-hero)+.wrap{padding-top:0!important}
:is(.pg-hero,.wh-hero)+.doc>:first-child,.pg-hero+.wrap>:first-child,.tr-hero+.tr-body>:first-child,
.blog-hero+.sec>.wrap>:first-child,.pg-hero+.sec>.wrap>:first-child{margin-top:0!important}
.pg-hero+.wrap>.cart-pg,:is(.pr-hero,.ex-hero)+.wrap>:is(.pr-layout,.ex-layout),.adv-hero+.adv-shell{padding-top:0!important}
/* ٢) المتابعة: في صندوق «هذه الصفحة مجّانية» كانت قاعدة العنوان (‎.freebox b{display:block}‎) تصيب الكلمات
      البارزة داخل الفقرة أيضاً فتقطع السطر: «الصور / اختيارية تماماً / وكل شيء…» */
.freebox p b{display:inline;font-size:inherit;margin:0}
/* ‖ s81 end ‖ */
/* ‖ s82 begin ‖ */
/* ‖ ٨٢. الهيرو: أوّل رسمٍ هو الشريحة الأولى (جولة 30، 2026-09-23) ‖
   بلاغ المالك: عند تحديث الرئيسية أو العودة إليها من الشعار تظهر لحظةً شريحةٌ خاطئة قبل الأولى. السبب: hero.js
   مؤجَّل، وقبله كانت الشرائح الخمس مكدّسةً في الوسط بلا تحويل، فالأخيرة في الوسم (البرامج) فوق الجميع، بلا جارتين،
   وكلّها تحت الغطاء الداكن للشرائح غير الفعّالة. الآن CSS يرسم الحالة الأولى نفسها التي يحسبها hero.js:
   الأولى في الوسط (‎.is-on‎ في الوسم)، الثانية جارتها التالية، الخامسة جارتها السابقة، والثالثة والرابعة مخفيّتان.
   المسافة والانخفاض والدوران هي معادلات geo() في hero.js نفسها (البطاقة ‎--cw‎×‎--ch‎، المروحة 100cqw):
     spacing = round(max(8, (fan − w)/2) − 0.6·h·s·sin(rot) + w·(1−s)/2) ، drop = −0.1·h·(1−s) = −0.004·h ،
     s = .96 ، rot = 1.2° (1° حين تضيق البطاقة عن 520px، أي الشاشة دون 588px).
   hero.js يكتب القيم نفسها أسلوباً مضمَّناً فوق هذه القواعد، فلا تتغيّر صورةٌ واحدة لحظة يبدأ.
   الشرائح مرتّبة في الوسم (‎.hx-s1‎…‎.hx-s5‎): إن تغيّر عددها أو ترتيبها تُحدَّث هذه الأسماء معه. */
.hx-fan{container-type:inline-size}
.hx{--hx-rot:1.2deg;--hx-lean:.0120628}
@media(max-width:587px){.hx{--hx-rot:1deg;--hx-lean:.0100526}}
.hx-s{--hx-x:round(calc(max(0.5rem,(100cqw - var(--cw)) / 2) - var(--hx-lean) * var(--ch) + var(--cw) * .02),1px);
  --hx-y:calc(var(--ch) * -.004)}
.hx-s:not(.hx-s1,.hx-s2,.hx-s5){opacity:0;visibility:hidden;z-index:98}
.hx-s1{z-index:100}
.hx-s2,.hx-s5{z-index:99}
.hx-s2{transform:translate3d(var(--hx-x),var(--hx-y),0) rotate(var(--hx-rot)) scale(.96)}
.hx-s5{transform:translate3d(calc(var(--hx-x) * -1),var(--hx-y),0) rotate(calc(var(--hx-rot) * -1)) scale(.96)}
html[dir=rtl] .hx-s2{transform:translate3d(calc(var(--hx-x) * -1),var(--hx-y),0) rotate(calc(var(--hx-rot) * -1)) scale(.96)}
html[dir=rtl] .hx-s5{transform:translate3d(var(--hx-x),var(--hx-y),0) rotate(var(--hx-rot)) scale(.96)}

/* الانتقال بين الشرائح (hero.js): القادمة تذوب فوق الحالية، ومحتوى الراحلة يخبو أسرع منها فلا يتراكب نصّان؛
   يعود المحتوى إلى الجارة بهدوء بعد أن تستقرّ */
/* (الجولة 35، المالك) الشريحة الراحلة لا تفقد محتواها: كان يخبو 0.14 ثانية ويعود بعد 0.7 فتبقى الجارة خلفيةً بلا تفاصيل نحو ثانية.
   البطاقات معتمة فلا يتراكب نصّان — المحتوى يبقى ظاهراً طوال الانتقال */
.hx-s .hx-in,.hx-s.is-leaving .hx-in{opacity:1;transition:none}
/* ‖ s82 end ‖ */

/* ‖ s83 begin ‖ */
/* ‖ ٨٣. «تدرّب بمعرفة» في الرئيسية — بلا تعبئةٍ زرقاء (جولة 30، 2026-09-23) ‖
   طلب المالك: البطاقتان كانتا صورة شخصٍ على طرف وبقيّة المستطيل أزرق مصمت. المطلوب أشفّ وأرقى وأقرب إلى روح
   «تسوّق حسب هدفك» (صورٌ تملأ البطاقة، ظلٌّ داكن شفّاف للنصّ، كبسولاتٌ زجاجية)، والأشخاص بارزون.
   الصور الأصلية صغيرة (332×460) فلا تُمدَّد على عرض البطاقة: تبقى الصورة الحادّة في طرفها بحجمها، وخلف النصّ
   الصورةُ نفسها مغبّشةً ومعتّمة (‎.lib-bg‎) — امتدادٌ ضوئيّ لها لا لونٌ مصمت — والحدّ بينهما يذوب بتدرّج. العدد
   والرابط كبسولتان زجاجيتان كرقاقات الأهداف. تباين النصّ الأبيض فوق الخلفية ≥ 7:1 (ظلٌّ داكن تحت النصّ). */
.lib-tile{background:#0d1b2d!important;box-shadow:0 1.625rem 3.125rem -2.125rem rgba(6,24,52,.6);transition:box-shadow .3s var(--ease)}
.lib-tile>img.lib-bg{position:absolute!important;inset:-14%;z-index:-2!important;width:128%;height:128%;max-width:none;margin:0;
  object-fit:cover;object-position:50% 30%;filter:blur(1.875rem) saturate(1.35) brightness(.72);pointer-events:none}
.lib-tile::after{content:''!important;position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:normal!important;
  background:linear-gradient(90deg,rgba(7,18,36,.08) 0%,rgba(7,18,36,.42) 40%,rgba(7,18,36,.66) 100%),
    radial-gradient(28.75rem 17.5rem at 88% 0%,rgba(13,156,248,.3),transparent 70%)!important}
html[dir=rtl] .lib-tile::after{
  background:linear-gradient(270deg,rgba(7,18,36,.08) 0%,rgba(7,18,36,.42) 40%,rgba(7,18,36,.66) 100%),
    radial-gradient(28.75rem 17.5rem at 12% 0%,rgba(13,156,248,.3),transparent 70%)!important}
/* الصورة الحادّة تذوب في خلفيتها بدل حافّةٍ قاطعة */
.lib-img{-webkit-mask:linear-gradient(90deg,#000 68%,transparent 100%);mask:linear-gradient(90deg,#000 68%,transparent 100%)}
html[dir=rtl] .lib-img{-webkit-mask:linear-gradient(270deg,#000 68%,transparent 100%);mask:linear-gradient(270deg,#000 68%,transparent 100%)}
.lib-tile h3{color:#fff;text-shadow:0 1px 1rem rgba(0,0,0,.28)}
.lib-tile p{color:rgba(255,255,255,.9)!important;text-shadow:0 1px 0.75rem rgba(0,0,0,.22)}
/* الرابط: كبسولةٌ زجاجية بسهمٍ صغير يتبع اتجاه القراءة */
.lib-go{display:inline-flex;align-items:center;gap:0.625rem;margin-top:0.5rem!important;padding:0.625rem 1rem;border-radius:var(--glass-r,1rem);
  color:#fff!important;font-size:0.9375rem;font-weight:600;
  background:var(--glass-dark,rgba(255,255,255,.14));box-shadow:var(--glass-dark-line,inset 0 1px 0 rgba(255,255,255,.35)),0 0.625rem 1.375rem -0.875rem rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(1rem) saturate(1.6);backdrop-filter:blur(1rem) saturate(1.6);
  transition:background-color .2s var(--ease),transform .2s var(--ease)}
.lib-go::after{content:'';width:0.4375rem;height:0.4375rem;border-top:0.125rem solid currentColor;border-inline-end:0.125rem solid currentColor;
  transform:rotate(45deg);margin-inline-start:0.125rem;transition:translate .2s var(--ease)}
html[dir=rtl] .lib-go::after{transform:rotate(-45deg)}
.lib-tile:hover{box-shadow:0 1.875rem 3.75rem -2rem rgba(6,24,52,.7)}
.lib-tile:hover .lib-go{background:rgba(255,255,255,.26)}
.lib-tile:hover .lib-go::after{translate:0.1875rem 0}
html[dir=rtl] .lib-tile:hover .lib-go::after{translate:-0.1875rem 0}
.lib-tile:focus-visible{outline:0.1875rem solid var(--volt);outline-offset:0.1875rem}
.lib-tile>img.lib-bg{padding:0!important}
.lib-go{white-space:nowrap}
/* بين 901 و1100px كانت البطاقتان متجاورتين وعمود النصّ ~180px: بطاقةٌ في كل صفّ حتى 1100px */
@media(max-width:1100px){.lib-pair{grid-template-columns:1fr}}
@media(max-width:900px){
  /* القاعدة القديمة تضع حشوةً جانبية على كل ما تحت الصورة؛ الكبسولتان تحتاجان هامشاً لا حشوةً داخلية */
  .lib-tile>.lib-n,.lib-tile>.lib-go{padding-inline:1rem!important;margin-inline:1.25rem!important}
  .lib-img,html[dir=rtl] .lib-img{-webkit-mask:linear-gradient(180deg,#000 66%,transparent 100%);mask:linear-gradient(180deg,#000 66%,transparent 100%)}
  .lib-tile::after,html[dir=rtl] .lib-tile::after{
    background:linear-gradient(180deg,rgba(7,18,36,.1) 0%,rgba(7,18,36,.5) 45%,rgba(7,18,36,.66) 100%)!important}
}
@media(prefers-reduced-motion:reduce){.lib-go,.lib-go::after{transition:none}}
/* ‖ s83 end ‖ */
/* ‖ s84 begin ‖ */
/* ‖ ٨٤. تقييم «آيزو واي زيرو» ومحاذاة العلامة في صفحة المنتج (جولة 30، 2026-09-23) ‖
   ١) بطاقة «الأكثر طلباً» الكبيرة: الوصف المولَّد الذي كان يكرّر الاسم مخفيّ. (سطر التقييم الخاصّ تحت الاسم أُلغي
      في الجولة 32: النجوم والرقم صارا بجانب الفئة، القسم ٩٤.)
   ٢) صفحة المنتج: كبسولة العلامة كانت في الوسط وحدها (قاعدة ‎.brand-row{justify-content:center}‎ لشريط العلامات
      القديم في الرئيسية تسري على كل صفحات المنتجات) والنصّ كلّه في بداية السطر؛ وسطر التقييم يلتفّ نصفين بجانب النجوم. */
.hm-bento>.hm-spot .card-blurb{display:none}
.pdp .brand-row{justify-content:flex-start}
.pdp .rating{flex-wrap:wrap;gap:0.125rem 0.5rem;margin:-0.375rem 0 1rem;font-size:0.875rem;line-height:1.35}
.pdp .rating .stars{font-size:0.9375rem;letter-spacing:1px}
.pdp .rating>span:last-child{flex:0 1 auto}
/* ‖ s84 end ‖ */

/* ‖ s85 begin ‖ */
/* ‖ ٨٥. بطاقات المدوّنة: نصٌّ لا يلامس حافّة البطاقة (جولة 30، 2026-09-24) ‖
   البطاقة سطحٌ أبيض بزوايا وظلٍّ عند التحويم، ونصّها كان بحشوة 2px جانبياً و0 في الأسفل: الفئة والعنوان يلامسان
   حافّة الصندوق — يظهر ذلك في «اقرأ أيضاً» أسفل كل مقال (على أرضيةٍ رمادية) وعند التحويم في صفحة المدوّنة.
   مصدرٌ واحد لكل بطاقات المدوّنة (الصفحة، أسفل المقالات، الرئيسية): صندوقٌ بحدٍّ رفيع كبطاقات الرئيسية، الصورة
   تملأ أعلاه وتقصّها زوايا البطاقة، والنصّ بحشوةٍ داخلية ومسافاتٍ ثابتة بين الفئة والعنوان والمقتطف، وسطرٌ أوسع
   للعربية (نزلات ي/ج/ع والشدّة والتنوين تلتهم ما يكفي اللاتينية). البطاقة الكبيرة تبقى صورةً ونصّاً متجاورين. */
.bcard{background:#fff;box-shadow:0 0 0 1px var(--line),0 0.625rem 1.625rem -1.25rem rgba(12,74,140,.35)}
.bcard:hover{box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.bcard>a{display:flex;flex-direction:column;height:100%}
.bcard .bc-img{border-radius:0}
.bc-text{padding:1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:0.5rem;flex:1}
.bc-cat,.bc-title,.bc-ex{margin:0}
.bc-title{text-wrap:pretty}
.bc-ex{line-height:1.7}
html[lang=ar] .bc-title{line-height:1.6}
html[lang=ar] .bc-ex{line-height:1.85}
/* الكبيرة: الصورة تملأ طرفها، والنصّ بحشوته على الطرف الآخر */
.bcard.big .bc-text{padding-block:1.75rem;padding-inline:0 clamp(1.75rem,3.4vw,3rem);gap:0.75rem}
.bcard.big .bc-ex{font-size:0.96875rem;max-width:54ch}
html[lang=ar] .bcard.big .bc-title{line-height:1.42}
/* «اقرأ قبل أن تشتري» في الرئيسية خمس مقالات: في ثلاثة أعمدة يبقى الصفّ الثاني ناقصاً بخانةٍ فارغة.
   اثنتان عريضتان فوقهما ثلاث (ستة أعمدة)، وفي عمودين: الأولى بعرض الصفّ ثم اثنتان واثنتان. */
@media(min-width:821px){
  .home .blog-grid:has(>.bcard:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .home .blog-grid:has(>.bcard:nth-child(5):last-child)>.bcard{grid-column:span 2}
  .home .blog-grid:has(>.bcard:nth-child(5):last-child)>.bcard:nth-child(-n+2){grid-column:span 3}
}
@media(min-width:561px) and (max-width:820px){
  .home .blog-grid:has(>.bcard:nth-child(5):last-child)>.bcard:first-child{grid-column:span 2}
}
@media(max-width:1080px){
  .bcard.big a{gap:0}
  .bcard.big .bc-text{padding:1.25rem 1.5rem 1.625rem}
}
@media(max-width:560px){
  .bc-text,.home .bc-text{padding:0.875rem 1rem 1.125rem!important}
  .bcard.big .bc-text{padding:1rem 1.125rem 1.375rem!important}
}
/* ‖ s85 end ‖ */
/* ‖ s86 begin ‖ */
/* ‖ ٨٦. رمز الشيكل أكبر وأوضح، بنسبةٍ واحدة من الأرقام في كل مكان (جولة 30، 2026-09-24) ‖
   القياس (flowtest/r30_cur_measure.py): ارتفاع ‎₪‎ ‏0.52em (ارتفاع حرف x) والأرقام 0.71em، فالرمز بحجم الأرقام نفسه
   أقصر منها بطبيعته. كان ‎.86em‎ من الأب وبشفافية ‎.7‎: 61% من ارتفاع الأرقام في البطاقات، و14px رماديّاً بجانب
   أرقامٍ 42px في صفحة المنتج (25%)، وثلثها في رقم الهيرو، و‎<small>‎ بلا صنفٍ في نتائج البحث (43%)، ونصّاً عادياً
   في السلّة والدفع. الآن الرمز بحجم الأرقام (‎1.05em‎ ≈ 77% من ارتفاعها) في البطاقات وصفحة المنتج والسلّة والدفع
   ونتائج البحث وقائمة النكهات والتلميحات، ورقم الهيرو العرضيّ ‎.8‎ منه (≈ 59% — وحدةٌ بجانب رقمٍ ضخم).
   الخطّ Red Hat Display نفسه: رمزه مرسومٌ بمنطق أرقامه (Arial بالارتفاع نفسه ريثما يُحمَّل). الشفافية ‎.85‎ تبقيه
   تابعاً للسعر لا منافساً له، والرمز واحدٌ في اللغتين. */
.cur,small.cur,.card-price small.cur{font-family:'Red Hat Display',Arial,sans-serif!important;font-size:1.05em!important;
  font-weight:600!important;opacity:.85;margin-inline-start:.18em}
.card-price .cur{opacity:.85}
/* صفحة المنتج: الرمز شقيق الرقم لا داخله (يُستبدل الرقم عند تغيير النكهة)، فيُقاس من مقاس الرقم نفسه */
.pdp .price .cur{font-size:calc(clamp(1.875rem,3.4vw,2.625rem) * 1.05)!important;color:inherit;opacity:.85;margin-inline-start:-0.1875rem}
/* رقم الهيرو «400 ₪»: مقاس الرقم في كل عرضٍ كما في §50 */
.hx-min-n .cur{font-size:calc(clamp(4rem,min(8vw,15vh),8.5rem) * .8)!important;margin-inline-start:0}
@media(max-width:900px){.hx-min-n .cur{font-size:calc(5.25rem * .8)!important}}
@media(max-width:560px){.hx-min-n .cur{font-size:calc(4.5rem * .8)!important}}
/* المبلغ لا ينكسر بين الرقم والرمز ولا ينكمش أمام اسمٍ طويل (سطور ملخّص الدفع كانت تُنزل الرمز سطراً) */
.cart-line{gap:0.875rem}
.cart-line>b,.ci-price{flex:none;white-space:nowrap}
/* ترتيبٌ واحد في العربية: الرمز بعد الرقم (يساره) كما في البطاقات وصفحة المنتج والمجموع الفرعي — سطور السلّة
   والمجاميع وتلميحات الهيرو كانت معزولةً باتجاهٍ لاتينيّ فيقع الرمز يمين الرقم. العزل نفسه باقٍ. */
.ci-price,.cart-line.tot b,.hx-tip .hx-tip-n{direction:inherit}
/* ‖ s86 end ‖ */
/* ‖ s87 begin ‖ */
/* ‖ ٨٧. صفحة الدفع: حقل المدينة، وعرض الصفحة على الهاتف (جولة 30، 2026-09-24) ‖
   ١) المدينة تتبع المنطقة (checkout.html): مثالٌ واقتراحاتٌ (datalist) لكل منطقة تظهر عند الكتابة أو النقر في الحقل.
      سهم Chrome الافتراضي للاقتراحات مثلّثٌ أسود ثقيل لا يشبه سهم قائمة المنطقة بجانبه، فيُخفى.
   ٢) على هاتفٍ بعرض 390px كانت الصفحة 405–427px (تمريرٌ أفقي): حقل رقم الواتساب صفٌّ مرن (رمز الدولة + الحقل + أيقونة
      الحالة) وحقل الإدخال يساهم بعرضه الطبيعي (~20 حرفاً) في العرض الأدنى للصفّ حتى مع min-width:0، فيتّسع عمود
      الاستمارة الوحيد (1fr = minmax(auto,1fr)) عن الشاشة. الحقل يبدأ من صفر ويملأ الباقي (flex:1)، والعمود لا يتجاوز
      الحاوية مهما كان محتواه. */
#co-city::-webkit-calendar-picker-indicator{display:none!important}
.fld-p .wa-field input{width:0}
@media(max-width:900px){.co-grid{grid-template-columns:minmax(0,1fr)}}
/* ‖ s87 end ‖ */

/* ‖ s88 begin ‖ */
/* ‖ ٨٨. توازن العربية مع الإنجليزية بخطّ Noto Kufi Arabic (جولة 30، 2026-09-24) ‖
   ١) الأوزان: وجوه 'MM Arabic' أعلى الملفّ (round30/ar_font_faces.py) تجعل كل وزنٍ في CSS يرسم العربية بسُمك جذعٍ
      يساوي جذع Red Hat عند الوزن نفسه (مقيسٌ على الأحرف المرسومة). فالوزن الواحد يصلح للغتين، ولم يعد لتعويضات
      الخطّ السابق حاجة: وزن الواجهة العربيّ كان 500 مقابل 470 للإنجليزية (يرسم الآن أثقل منها)، وعناوين أقسام
      الرئيسية 600 مقابل 650 (يرسم أخفّ منها).
   ٢) تباعد الأسطر: حروف الكوفي الطويلة (ا ل ك والهمزة فوقها) ونزلات ي/ج/و تحتاج تقدّماً سطرياً أوسع من اللاتينية؛
      العناوين المشدودة (1.12–1.2) كانت تُقرّب ذيل السطر الأوّل من رأس الثاني في عنوان المنتج ورؤوس الصفحات والمقالات.
      الهيرو خارج هذا: مقاساته محسوبة ومختبرة (1.24 للعربية أصلاً). */
html[lang=ar]{--ui-w:470;--ld-display:1.3;--ld-h1:1.34;--ld-h2:1.36;--ld-h3:1.45}
html[lang=ar] .home .sec-head h2{font-weight:650}
html[lang=ar] h4{line-height:1.45}
html[lang=ar] :is(.pdp h1,.apage h1,.adv-card h2){line-height:1.36}
html[lang=ar] :is(.col-layout .col-head h1,.home .sec-head h2,.hm-auth h2,.lib-tile h3){line-height:1.3}
html[lang=ar] :is(.pg-hero,.pr-hero,.ex-hero,.blog-hero,.tr-hero,.adv-hero,.wh-hero) h1{line-height:1.3!important}
/* ‖ s88 end ‖ */
/* ‖ s89 begin ‖ */
/* ‖ ٨٩. الانتقال بين الصفحات: مزجٌ مباشر والرأس ثابت (جولة 30، 2026-09-24) ‖
   كان كل تنقّلٍ داخليّ يُخفي الصفحة كلّها إلى الأبيض (تأخير 185ms قبل الانتقال ثم تلاشٍ 190ms، motion.js ١٢) ثم
   يُظهر الجديدة من الشفافية (380ms، §17): الرأس نفسه يختفي ويعود في كل مرّة وبينهما لحظةٌ بيضاء (فيلم التحميل،
   flowtest/r30_filmstrip.py). الآن في المتصفّحات التي تدعم الانتقال بين المستندين (Chrome/Edge 126+، Safari 18.2+)
   يمزج المتصفّح الصفحتين مباشرةً في 240ms بلا فراغٍ أبيض ولا تأخيرٍ قبل الانتقال، والرأس عنصرٌ مسمّى فيبقى في مكانه
   (إن اختلف ارتفاعه — شريطٌ مخفيّ بالتمرير — ينمو إلى الجديد بالحركة نفسها). boot.js يعلّم الصفحة الواصلة بانتقالٍ
   (‎html.mm-vt-in‎) فلا يتكرّر تلاشيها القديم فوق المزج. المتصفّحات الأخرى تبقى على التلاشي القديم كما هو.
   تقليل الحركة: لا انتقال (والتلاشي القديم معطّلٌ فيه أصلاً). */
@view-transition{navigation:auto}
.hdr{view-transition-name:mm-hdr}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
  animation-duration:240ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html.mm-vt-in body{animation:none!important}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* ‖ s89 end ‖ */
/* ‖ s90 begin ‖ */
/* ‖ ٩٠. لا تمرير أفقيّ على الهاتف (جولة 30، فحص الجودة النهائي) ‖
   flowtest/r30_overflow_scan.py (22 صفحة × 4 عروض × لغتين) وجد صفحتين أعرض من الشاشة:
   ١) صفحة البرنامج: عمود المحتوى (‎.pd-cols‎: عمودٌ واحد ‎1fr‎ على ≤900px، و‎1fr‎ بجانب الشريط الجانبي فوقها) يتّسع إلى
      أدنى عرض محتواه، وشريط أسابيع البرنامج صفٌّ طوله ~1024px صُمّم ليُمرَّر داخل صندوقه (overflow-x:auto) — فكانت
      الصفحة كلّها 1046px على هاتف 390px. العمود الآن لا يتجاوز حاويته (minmax(0,1fr)) فيُمرَّر الشريط وحده كما صُمّم.
   ٢) صفحة التمرين: زرّا «السابق / التالي» يحملان اسم التمرين المجاور، والأزرار لا تلتفّ (nowrap): اسمٌ طويل وسّع الصفحة
      إلى 351px على شاشة 320px. على الهاتف يلتفّ الاسم داخل زرّه، وعمود الصفحة لا يتجاوز حاويته.
   (وحقل رقم الواتساب في صفحة الدفع: s87.)
   ٣) المفضّلة ونتائج البحث والمتابعة: حاوياتها بلا حشوةٍ جانبية (‎.wish-wrap{padding:30px 0 80px}‎،
      ‎.tr-body{padding:38px 0 70px}‎، ونمطٌ مضمَّن في search.html) بدل هامش الموقع (‎.wrap{padding:0 20px}‎): البطاقات
      والصناديق تلامس حافّتي الهاتف، وعلى الحاسوب تبدأ قبل حافّة لوح الرأس بـ20px. */
.wish-wrap,.wrap.tr-body,.wrap:has(>#searchGrid){padding-inline:1.25rem!important}
/* ومع الهامش على شاشة 320px: حقل الصور (input type=file، عرضه الطبيعي ~282px لا ينكمش) وعمود المتابعة الذي يتّسع لأدنى
   عرض محتواه كانا يوسّعان الصفحة إلى 338px. */
.tr-cols{grid-template-columns:minmax(0,1fr) 20rem}
@media(max-width:960px){.tr-cols{grid-template-columns:minmax(0,1fr)}}
.tr-body input[type=file]{max-width:100%;min-width:0}
.pd-cols{grid-template-columns:minmax(0,1fr) 18.75rem}
@media(max-width:900px){
  .pr-layout,.pd-cols,.exd{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .exd-nav .button{white-space:normal;min-width:0;max-width:100%;height:auto;min-height:2.875rem;padding-block:0.625rem;line-height:1.35}
}
/* ‖ s90 end ‖ */
/* ‖ s91 begin ‖ */
/* ‖ ٩١. جولة 31 (2026-09-25): الفئة الفارغة، واستعادة شريط التصفية ‖
   ١) فئةٌ ليس فيها ما هو متوفّر (round31/stock_nav.py يضع ‎.mm-empty-cat‎ ورسالةً بعد الشبكة): لا زرّ تصفية فوق شبكةٍ
      فارغة، بل رسالةٌ قصيرة بزرٍّ إلى القسم الأمّ — بمادّة ألواح الموقع الزجاجية نفسها.
   ٢) الشريط المحفوظ مفتوحاً: مبنيٌّ في الوسم فيُرسم مع الصفحة؛ إن بُني بعد التحميل (نسخةٌ قديمة) يظهر بتلاشٍ قصير
      بدل دخول الفتح الكامل (motion.js ١٣·٥). */
.col-layout.mm-empty-cat .mm-ftools{display:none}
.mm-empty{display:flex;flex-direction:column;align-items:center;gap:0.875rem;max-width:30rem;margin:0.375rem auto 4.5rem;
  padding:2rem 1.625rem 1.75rem;text-align:center;border-radius:calc(var(--glass-r,1rem) + 0.25rem);
  background:var(--glass-bg);box-shadow:var(--glass-line),0 1.375rem 2.75rem -2.125rem rgba(12,74,140,.5)}
.mm-empty-ico{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:1rem;color:var(--volt);
  background:#fff;box-shadow:var(--glass-line)}
.mm-empty b{font-size:1.0625rem;font-weight:600;line-height:1.5;color:var(--ink)}
@media(min-width:1081px){
  .mm-side-shop.mm-side-quick{animation:mm-side-fade 220ms ease-out both}
}
@keyframes mm-side-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.mm-side-shop.mm-side-quick{animation:none}}
/* ‖ s91 end ‖ */
/* ‖ s92 begin ‖ */
/* ‖ ٩٢. شريط التنقّل (جولة 31، 2026-09-25، طلب المالك) ‖
   ٣) مادّة الشريط مادّة صفّ الرأس نفسها: أبيض 84% بتمويه 18px وتشبّع 180% (‎.hdr::before‎). كان زجاجاً شفّافاً
      (52%←28%) تظهر الصفحة من خلاله، فبدا طبقةً أخرى غير الرأس. الإطار المضيء والظلّ باقيان: كبسولةٌ واضحة الحدود.
   ٤) يختفي بالانزلاق لا بالتلاشي: يصعد بمقدار ارتفاعه ويُقصّ عند حافّة صفّ الرأس كأنّه يدخل تحته، ويعود نازلاً
      منها. القصّ على الكبسولة نفسها (‎clip-path‎ يتحرّك مع التحويل بالمقدار نفسه وبالمنحنى نفسه، فخطّ القصّ ثابتٌ عند
      حافّة الصفّ طوال الحركة: 2px فوق الكبسولة الملتصقة = أسفل الصفّ بالضبط) — لا على أبٍ لها: قصُّ الأب أو شفافيته
      تجعله «جذر خلفية» فيفقد الزجاج تمويه الصفحة خلفه. الإخفاء أسرع قليلاً من الظهور؛ visibility يُطفأ بعد اكتمال
      الصعود (فلا يصله التركيز ولا يبقى ظلّه). */
@media(min-width:821px){
  .hdr .mainnav ul{background:rgba(255,255,255,.84)!important;
    -webkit-backdrop-filter:blur(1.125rem) saturate(180%)!important;backdrop-filter:blur(1.125rem) saturate(180%)!important;
    transform:none;clip-path:inset(-0.125rem -3rem -3rem -3rem);opacity:1;
    transition:transform .42s cubic-bezier(.32,.72,0,1),clip-path .42s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s}
  .hdr.nav-hide .mainnav ul{transform:translateY(calc(-100% - 0.25rem));clip-path:inset(calc(100% + 0.125rem) -3rem -3rem -3rem);
    opacity:1;visibility:hidden;pointer-events:none;
    transition:transform .34s cubic-bezier(.4,0,.2,1),clip-path .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s}
}
@media(min-width:821px) and (prefers-reduced-motion:reduce){
  .hdr .mainnav ul,.hdr.nav-hide .mainnav ul{transform:none;clip-path:none;transition:opacity .2s ease,visibility 0s linear .2s}
  .hdr.nav-hide .mainnav ul{opacity:0}
}
@supports not (backdrop-filter:blur(1px)){
  @media(min-width:821px){.hdr .mainnav ul{background:#fff!important}}
}
/* ‖ s92 end ‖ */
/* ‖ s93 begin ‖ */
/* ‖ ٩٣. حقل البحث: العبوات تنزاح لزرّ المسح، واقتراحاتٌ أثناء الكتابة (جولة 31، 2026-09-25، طلب المالك) ‖
   (يحلّ محلّ s78 الذي كان يُخفي العبوات ما دام في الحقل نصّ.)
   ١) العبوات الصغيرة لا تختفي: حين يظهر زرّ المسح (في الحقل نصّ) تنزلق جانباً بعرضه، وزرّ المسح في طرف الحقل.
      × المتصفّح يلتصق دائماً بنهاية النصّ فلا تُفسح له العبوات، فحلّ محلّه زرٌّ حقيقيّ (boot.js) بالشكل نفسه: دائرةٌ
      رمادية خفيفة تزرقّ عند التحويم. حشوة الحقل تحجز مكان العبوات (ثم العبوات والزرّ) فلا يمرّ النصّ تحتها، والنصّ
      الطويل ينتهي بنقاط.
   ٢) الاقتراحات: لوحٌ أبيض تحت الحقل بظلّ القوائم المنبثقة — صورة المنتج، اسمه، علامته وفئته، سعره — وسطرٌ أخير
      لكل النتائج. في قائمة الهاتف في مجرى القائمة تحت الحقل. */
.hdr .search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.hdr .search input{text-overflow:ellipsis}
.hdr .search .search-clear{position:absolute;inset-inline-start:auto;inset-inline-end:0.875rem;top:50%;z-index:3;
  width:1.625rem;height:1.625rem;margin:-0.8125rem 0 0;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  color:#141414;background:rgba(20,32,52,.08);cursor:pointer;-webkit-tap-highlight-color:transparent;
  visibility:hidden;opacity:0;transform:scale(.6);
  transition:opacity .16s ease,transform .2s cubic-bezier(.4,0,.2,1),background-color .16s ease,visibility 0s linear .2s}
.hdr .search:has(input:not(:placeholder-shown)) .search-clear{visibility:visible;opacity:1;transform:none;
  transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.3,.64,1),background-color .16s ease,visibility 0s}
.hdr .search .search-clear:hover{background:rgba(13,156,248,.18);color:var(--royal)}
.hdr .search .search-clear:active{transform:scale(.9)}
.hdr .search .search-clear:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.125rem}
/* العبوات تبقى ظاهرة (كانت تختفي عند التركيز وعند الكتابة)، وتنزاح بعرض الزرّ حين يظهر */
.hdr .search .search-marks,.hdr .search:focus-within .search-marks{opacity:.5;transform:none}
.hdr .search:has(input:not(:placeholder-shown)) .search-marks{opacity:.5;transform:translateX(calc(var(--mm-dir) * -2.25rem))}
@media(min-width:1181px){
  /* 20px هامش العبوات + 92px عرضها + 12px فراغ؛ ومع الزرّ +36px */
  .hdr .search input{padding-inline-end:7.75rem}
  .hdr .search:has(input:not(:placeholder-shown)) input{padding-inline-end:10rem}
}
@media(max-width:1180px){
  .hdr .search:has(input:not(:placeholder-shown)) input{padding-inline-end:3.125rem}
}
@media(prefers-reduced-motion:reduce){
  .hdr .search .search-clear,.hdr .search:has(input:not(:placeholder-shown)) .search-clear{transition:opacity .16s ease,visibility 0s linear .16s;transform:none}
}

/* ── الاقتراحات ── */
/* بعرض الحقل، ولا يضيق عن 380px (الحقل على 1024px نحو 190px فكانت الأسماء تُقصّ) — يمتدّ من بداية الحقل */
.mm-sug{position:absolute;top:calc(100% + 0.5rem);inset-inline:0 auto;width:100%;min-width:min(23.75rem,calc(100vw - 2rem));
  z-index:130;padding:0.375rem;
  max-height:min(28.75rem,calc(100vh - 9.375rem));overflow-y:auto;overscroll-behavior:contain;
  border-radius:calc(var(--glass-r,1rem) + 0.125rem);
  background:#fff;   /* سطحٌ للقراءة: الصفحة تحته كانت تُقرأ من خلال 94% */
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.16),0 1.625rem 3.375rem -1.25rem rgba(12,74,140,.46),0 0.3125rem 0.875rem -0.375rem rgba(12,74,140,.16);
  transform-origin:top center;animation:mm-sug-in .24s cubic-bezier(.32,.72,0,1)}
.mm-sug[hidden]{display:none}
@keyframes mm-sug-in{from{opacity:0;transform:translateY(-0.375rem) scale(.985)}}
.mm-sug-opt{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:center;gap:0.75rem;
  padding:0.375rem 0.75rem 0.375rem 0.375rem;padding-inline:0.375rem 0.75rem;border-radius:0.75rem;color:var(--ink);text-decoration:none;
  transition:background-color .14s ease}
.mm-sug-opt[aria-selected="true"]{background:rgba(13,156,248,.1)}
.mm-sug-img{width:2.5rem;height:3.125rem;border-radius:0.5rem;object-fit:cover;background:var(--bg-2);display:block}
.mm-sug-tx{min-width:0}
.mm-sug-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:0.90625rem;font-weight:600;line-height:1.35}
.mm-sug-m{display:block;margin-top:0.125rem;font-size:0.78125rem;line-height:1.3;color:var(--slate-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-sug-p{font:650 0.90625rem/1 var(--fn);color:var(--ink);white-space:nowrap}
.mm-sug-all{display:flex;align-items:center;gap:0.625rem;margin-top:0.25rem;padding:0.75rem;border-radius:0.75rem;
  font-size:0.875rem;font-weight:600;color:var(--royal);text-decoration:none;box-shadow:0 -1px 0 var(--line);
  transition:background-color .14s ease}
.mm-sug-all span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-sug-all[aria-selected="true"]{background:rgba(13,156,248,.1)}
.mm-sug-none{padding:0.875rem 0.75rem;font-size:0.875rem;color:var(--slate-2)}
html[lang=ar] .mm-sug-t{line-height:1.5}
/* قائمة الهاتف: في مجرى القائمة تحت الحقل */
.mm-nav-search .mm-sug{position:static;margin-top:0.625rem;max-height:none;overflow:visible;
  box-shadow:0 0 0 .5px rgba(12,74,140,.14),0 0.625rem 1.5rem -1.125rem rgba(12,74,140,.4);animation:none}
@media(prefers-reduced-motion:reduce){.mm-sug{animation:none}}
/* ‖ s93 end ‖ */
/* ‖ s94 begin ‖ */
/* ‖ ٩٤. تقييم البطاقة بجانب الفئة (جولة 32، 2026-09-25) ‖
   طلب المالك: النجوم والرقم فقط، بجانب كلمة الفئة في سطر العلامة — عدد التقييمات يبقى في صفحة المنتج.
   لا ينكمش (الفئة وحدها تُختصر بنقاط إن ضاق السطر، ‎.card-brand+*‎)، ولا فاصل نقطيّ قبله: المسافة تكفي. */
.card-cat>.card-rate{flex:none;display:inline-flex;align-items:center;gap:0.3125rem;margin-inline-start:0.1875rem;line-height:1}
.card-cat>.card-rate .stars{color:#f5a623;letter-spacing:1px;font-size:0.875rem;line-height:1}
.card-cat>.card-rate b{font-family:var(--fn);font-weight:650;font-size:0.875rem;color:var(--ink);letter-spacing:0}
@media(max-width:600px){
  .card-cat>.card-rate{gap:0.25rem;margin-inline-start:1px}
  .card-cat>.card-rate .stars,.card-cat>.card-rate b{font-size:0.78125rem}
}
/* ‖ s94 end ‖ */
/* ‖ s96 begin ‖ */
/* ‖ ٩٦. «تدرّب بمعرفة» في الرئيسية: صور رياضيّي BiotechUSA وبطاقتان أكبر (جولة 32، طلب المالك) ‖
   الصورتان من صفّ «رياضيّونا» في موقع BiotechUSA (332×430، المقاس الوحيد المنشور) — كانتا نسختين من صورتي «تسوّق
   حسب هدفك». لا تُمدَّدان: الصورة كاملةً حادّةً بارتفاع البطاقة في طرفها (عرضها من نسبتها)، وخلف النصّ الصورةُ نفسها
   مغبّشةً ومعتّمة — امتدادٌ ضوئيّ لها بألوانها — والحدّ بينهما يذوب بتدرّج (روح «تسوّق حسب هدفك» التي طلبها المالك
   في الجولة 30). أكبر من قبل (‎~470px‎ على الشاشة العريضة بدل ‎~320px‎) بخطٍّ أكبر، وكبسولة العدد والرابط زجاجٌ داكن.
   أسماء جديدة (‎.hm-lib-*‎): قواعد ‎.lib-tile‎ القديمة موزّعة على ستّ جولات بـ!important. التباين: نصٌّ أبيض فوق
   خلفيةٍ معتّمة إلى ‎brightness(.6)‎ مع تدرّجٍ داكن وظلّ نصّ — ≥ 7:1. */
.hm-lib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.75rem)}
.hm-lib-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);
  min-height:clamp(23.75rem,25vw,29.375rem);border-radius:var(--sharp);background:#0b1a2e;color:#fff;text-decoration:none;
  box-shadow:0 1.875rem 3.75rem -2.25rem rgba(6,24,52,.65);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.hm-lib-card>.hm-lib-amb{position:absolute;inset:-12%;z-index:-2;width:124%;height:124%;max-width:none;margin:0;
  object-fit:cover;object-position:50% 30%;filter:blur(2.125rem) saturate(1.4) brightness(.6);pointer-events:none}
.hm-lib-card::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,18,36,0) 0%,rgba(7,18,36,0) 32%,rgba(7,18,36,.48) 55%,rgba(7,18,36,.64) 100%),
    radial-gradient(26.25rem 16.25rem at 92% 0%,rgba(13,156,248,.28),transparent 70%)}
html[dir=rtl] .hm-lib-card::after{
  background:linear-gradient(270deg,rgba(7,18,36,0) 0%,rgba(7,18,36,0) 32%,rgba(7,18,36,.48) 55%,rgba(7,18,36,.64) 100%),
    radial-gradient(26.25rem 16.25rem at 8% 0%,rgba(13,156,248,.28),transparent 70%)}
/* الصورة كاملةً بارتفاع البطاقة، عرضها من نسبتها؛ حافّتها الداخلية تذوب في امتدادها */
.hm-lib-card>.hm-lib-photo{display:block;height:100%;width:auto;max-width:none;aspect-ratio:332/430;object-fit:cover;margin:0;
  -webkit-mask:linear-gradient(90deg,#000 86%,transparent 100%);mask:linear-gradient(90deg,#000 86%,transparent 100%)}
html[dir=rtl] .hm-lib-card>.hm-lib-photo{-webkit-mask:linear-gradient(270deg,#000 86%,transparent 100%);mask:linear-gradient(270deg,#000 86%,transparent 100%)}
.hm-lib-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0.875rem;
  padding:clamp(1.75rem,2.6vw,3rem);padding-inline-start:clamp(0.25rem,.8vw,1rem)}
/* (الجولة 35، المالك) العدد بلا إطار */
.hm-lib-n{display:inline-flex;align-items:baseline;gap:0.5rem;padding:0;font-size:1rem;font-weight:600;color:rgba(255,255,255,.94);text-shadow:0 1px 0.75rem rgba(0,0,0,.3)}
.hm-lib-n b{font-family:var(--fn);font-weight:700;font-size:2.125rem;line-height:1;letter-spacing:-.02em;color:#fff}
.hm-lib-card h3{margin:0;font-size:clamp(1.5rem,1.9vw,2.125rem);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#fff;
  text-shadow:0 1px 1rem rgba(0,0,0,.28);text-wrap:balance}
html[dir=rtl] .hm-lib-card h3{line-height:1.35;letter-spacing:0}
.hm-lib-card p{margin:0;max-width:40ch;font-family:var(--fr);font-size:clamp(0.96875rem,1.05vw,1.125rem);line-height:1.6;color:rgba(255,255,255,.9);
  text-shadow:0 1px 0.75rem rgba(0,0,0,.22)}
.hm-lib-go{display:inline-flex;align-items:center;gap:0.625rem;margin-top:0.375rem;padding:0.75rem 1.25rem;border-radius:var(--glass-r,1rem);
  font-size:1rem;font-weight:600;color:#fff;white-space:nowrap;
  /* (الجولة 35، المالك) زجاجٌ أوضح: أشفّ، بحافّةٍ بيضاء دقيقة ولمعةٍ علويّة أنصع */
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.14),0 0.625rem 1.625rem -0.875rem rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(1.375rem) saturate(1.9) brightness(1.08);backdrop-filter:blur(1.375rem) saturate(1.9) brightness(1.08);
  text-shadow:0 1px 0.5rem rgba(0,0,0,.25);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.hm-lib-go::after{content:'';width:0.4375rem;height:0.4375rem;border-top:0.125rem solid currentColor;border-inline-end:0.125rem solid currentColor;
  transform:rotate(45deg);margin-inline-start:0.125rem;transition:translate .2s var(--ease)}
html[dir=rtl] .hm-lib-go::after{transform:rotate(-45deg)}
.hm-lib-card:hover{transform:translateY(-0.1875rem);box-shadow:0 2.25rem 4.375rem -2.25rem rgba(6,24,52,.75)}
.hm-lib-card:hover .hm-lib-go{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.12));border-color:rgba(255,255,255,.75)}
/* (الجولة 35، المالك) صاحب الصورة في زاويتها السفلى */
.hm-lib-credit{position:absolute;bottom:0.75rem;inset-inline-start:0.875rem;z-index:1;font:600 0.8125rem/1 var(--ui-font);letter-spacing:.01em;
  color:rgba(255,255,255,.9);text-shadow:0 1px 0.375rem rgba(0,0,0,.65);pointer-events:none}
.hm-lib-card:hover .hm-lib-go::after{translate:0.1875rem 0}
html[dir=rtl] .hm-lib-card:hover .hm-lib-go::after{translate:-0.1875rem 0}
.hm-lib-card:focus-visible{outline:0.1875rem solid var(--volt);outline-offset:0.1875rem}
@media(max-width:1100px){.hm-lib{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  /* الهاتف: الصورة فوق بعرض البطاقة، والنصّ تحتها على امتدادها */
  .hm-lib-card{grid-template-columns:minmax(0,1fr);min-height:0}
  .hm-lib-card>.hm-lib-photo,html[dir=rtl] .hm-lib-card>.hm-lib-photo{width:100%;height:16.25rem;aspect-ratio:auto;object-position:50% 22%;
    -webkit-mask:linear-gradient(180deg,#000 68%,transparent 100%);mask:linear-gradient(180deg,#000 68%,transparent 100%)}
  .hm-lib-card::after,html[dir=rtl] .hm-lib-card::after{background:linear-gradient(180deg,rgba(7,18,36,.04) 0%,rgba(7,18,36,.5) 42%,rgba(7,18,36,.68) 100%)}
  .hm-lib-body{margin-top:-2.125rem;padding:0 1.25rem 1.375rem;gap:0.625rem}
  .hm-lib-n{font-size:0.875rem}
  .hm-lib-n b{font-size:1.75rem}
  .hm-lib-card p{font-size:0.9375rem}
  .hm-lib-go{padding:0.625rem 1rem;font-size:0.9375rem}
  .hm-lib-credit{bottom:auto;top:14.5rem;font-size:0.75rem}
}
@media(prefers-reduced-motion:reduce){.hm-lib-card,.hm-lib-go,.hm-lib-go::after{transition:none}.hm-lib-card:hover{transform:none}}
/* ‖ s96 end ‖ */

/* ‖ s98 begin ‖ */
/* ‖ ٩٨. شريط التنقّل بعد البندين الأطول (جولة 34، طلب المالك: «Exercises library» و«Training programs» /
   «البرامج التدريبية») ‖ البنود أعرض بنحو 80px، فيضيق الشريط درجةً واحدة في المدى الذي كان يفيض فيه عن صفّ الترويسة
   (1321–1480 و1161–1320 و821–960) — الخطّ والحشوة فقط، والأيقونات باقية حيث كانت. مقيسٌ بـ‎r30_nav_fit‎ (هامش ≥ 10px). */
@media(min-width:1200px) and (max-width:1199px){
  .mainnav a.nav-a{padding:0 0.625rem;gap:0.375rem}
  .mainnav li.nav-adv>a.adv-metal-on{padding:0 0.875rem}
}
@media(min-width:1161px) and (max-width:1199px){
  .mainnav a.nav-a{padding:0 0.5rem;gap:0.3125rem}
  html:not([lang=ar]) .mainnav a.nav-a{font-size:1.0625rem}
  html[lang=ar] .mainnav a.nav-a,html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:1rem}
  .mainnav li.nav-adv>a.adv-metal-on{padding:0 0.75rem;font-size:1rem}
}
@media(min-width:821px) and (max-width:960px){
  .mainnav a.nav-a{padding:0 0.375rem}
  html:not([lang=ar]) .mainnav a.nav-a{font-size:0.90625rem}
  html[lang=ar] .mainnav a.nav-a,html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{font-size:0.875rem}
  html[lang=ar] .mainnav a.nav-a{padding:0 0.25rem}
  .mainnav li.nav-adv>a.adv-metal-on{padding:0 0.5625rem;font-size:0.90625rem}
  html[lang=ar] .mainnav li.nav-adv>a.adv-metal-on{padding:0 0.5rem}
}
/* ‖ s98 end ‖ */

/* ‖ s99 begin ‖ */
/* ‖ ٩٩. الرأس بلا تعلّق (الجولة 35، 2026-09-26، المالك) ‖
   ١) الشريط يختفي عند التمرير نزولاً «ويعلق قليلاً قبل أن يختفي»: كان يُقصّ بـ‎clip-path‎ متحرّك (§92) — والقصّ المتحرّك
      يُرسم من جديد في كل إطار على الخيط الرئيسيّ، فوق زجاجٍ مغبَّش. الآن القصّ ثابت: ‎.mainnav‎ نفسه يقصّ ما فوقه
      (‎overflow:hidden‎ لا يجعل الأب «جذر خلفية»، فالتغبيش خلف الكبسولة باقٍ)، والكبسولة تنزلق تحته بتحويلٍ فقط — على
      المركِّب، بلا رسم. الحافّة السفلى للصندوق ممدودة 44px (بهامشٍ سالبٍ مساوٍ) كي لا يُقصّ ظلّ الكبسولة.
   ٢) زرّ اللغة بمادّة صفّ الرأس نفسها (أبيض 84% بتغبيش 18px وتشبّع 180%) لا زجاجٍ صافٍ، وعند التحويم أبيض أنصع؛
      والانتقال لونٌ وظلّ فقط (كان ‎transition:all‎ بين تدرّجين لا يُستكملان فيقفز اللون — «الرجّة» عند التحويم).
      القائمة بالمادّة نفسها. */
@media(min-width:821px){
  .hdr .mainnav{overflow:hidden;padding-bottom:calc(0.75rem + 2.75rem);margin-bottom:-2.75rem}
  .hdr.stuck .mainnav{padding-bottom:calc(0.5rem + 2.75rem)}
  .hdr .mainnav ul,.hdr.nav-hide .mainnav ul{clip-path:none}
  /* (بلا ‎visibility:hidden‎ في آخر الحركة: إطفاؤها يهدم طبقة الزجاج المغبَّش فيعلق آخر إطارٍ ~70ms — «يعلق قبل أن يختفي».
     الكبسولة مقصوصةٌ خارج الرؤية ولا تلتقط المؤشّر؛ والتركيز بلوحة المفاتيح يعيدها — motion.js) */
  .hdr .mainnav ul,.hdr.nav-hide .mainnav ul{visibility:visible;opacity:1}
  .hdr .mainnav ul{transform:none;transition:transform .4s cubic-bezier(.32,.72,0,1)}
  .hdr.nav-hide .mainnav ul{transform:translateY(calc(-100% - 0.375rem));transition:transform .3s cubic-bezier(.4,0,.2,1)}
}
@media(min-width:821px) and (prefers-reduced-motion:reduce){
  .hdr .mainnav ul,.hdr.nav-hide .mainnav ul{transform:none;transition:opacity .2s ease,visibility 0s linear .2s}
  .hdr.nav-hide .mainnav ul{opacity:0}
}
.icon-btn.lang-toggle,.icon-btn.lang-toggle:hover,.lt-wrap.open .icon-btn.lang-toggle{
  background:rgba(255,255,255,.96)!important;
  -webkit-backdrop-filter:blur(1.125rem) saturate(180%)!important;backdrop-filter:blur(1.125rem) saturate(180%)!important}
.icon-btn.lang-toggle:hover,.lt-wrap.open .icon-btn.lang-toggle{background:#fff!important}
.lang-toggle,.icon-btn.lang-toggle{transition:background-color .18s ease,box-shadow .18s ease,transform .12s ease!important}
.lt-menu{background:rgba(255,255,255,.97)!important;
  -webkit-backdrop-filter:blur(1.125rem) saturate(180%)!important;backdrop-filter:blur(1.125rem) saturate(180%)!important}
.lt-opt:hover,.lt-opt:focus-visible{background:rgba(13,156,248,.08)}
@supports not (backdrop-filter:blur(1px)){.icon-btn.lang-toggle,.lt-menu{background:#fff!important}}

/* ٢ب) (المالك: «قلّل الشفافية في الرأس وشريطه — يبدو فوضويّاً أثناء التصفّح») صفّ الرأس والشريط وزرّ اللغة أبيض 96% (كان
      84%): النصوص والصور لا تظهر من خلالها بعد الآن، ويبقى تغبيشٌ خفيف عند الحوافّ */
.hdr::before{background:rgba(255,255,255,.96)}
@media(min-width:821px){.hdr .mainnav ul{background:rgba(255,255,255,.96)!important}}

/* ٣) (المالك) القائمة الكبرى تنزل بحركةٍ قصيرةٍ سريعة (0.2 ثانية) بدل الظهور الفجائيّ؛ صور الأقسام بلا إطار وأكبر،
      وأسماء الأقسام وأعدادها وعناوين الأعمدة أكبر */
.mega.open{animation:mm-mega-in .2s cubic-bezier(.2,.9,.25,1) both}
@keyframes mm-mega-in{from{opacity:0;transform:translateY(-0.625rem)}}
/* (المالك: «حين أنتقل إلى بندٍ آخر تختفي القائمة لحظة») الانتقال من لوحةٍ مفتوحة إلى أخرى بلا حركة دخول — تحلّ محلّها
   فوراً (app.js يضع ‎mm-swap‎) */
.mega.open.mm-swap{animation:none}
@media(prefers-reduced-motion:reduce){.mega.open{animation:mm-mega-fade .12s ease both}}
@keyframes mm-mega-fade{from{opacity:0}}
.mega-col li a.mm-mt{grid-template-columns:4.75rem minmax(0,1fr);column-gap:1rem;padding:0.375rem 0.75rem}
.mm-mt .mthumb,.mm-mt:hover .mthumb{width:4.75rem;height:4.75rem;background:none;box-shadow:none;transform:none}
.mm-mt .mthumb::before,.mm-mt .mthumb::after{content:none}
.mega-col li a{font-size:1.09375rem}
.mega-col li a.mm-mt .mcnt{font-size:0.875rem}
.mega-col li a .mcnt{font-size:0.84375rem}
.mega-col h4{font-size:1.1875rem}

/* ٤) (المالك: «يعلق قليلاً قبل أن يختفي») لحظة اختفاء الشريط كانت ‎html.mm-nav-hidden‎ تبدّل ‎--mm-sticky‎ على الجذر —
      خاصيّةٌ موروثة، فتُعاد أنماط كلّ عناصر الصفحة (الرئيسية آلاف العناصر: إطارٌ من ~130ms). الجذر لا يتبدّل الآن؛ العناصر
      اللاصقة التي تستعمل المتغيّر وحدها تنتقل إلى الحافّة الجديدة (motion.js وboot.js يقرآنه منها) */
html.mm-nav-hidden{--mm-sticky:8.4375rem}
html.mm-nav-hidden :is(.ex-filters.mm-side,.col-layout.mm-side-on>.mm-side-shop,.art-aside,.pdp-media,.sum,.pd-side,.exd-imgs){--mm-sticky:5.3125rem}
/* ‖ s99 end ‖ */

/* ‖ s100 begin ‖ */
/* ‖ ١٠٠. إصلاحات مراجعةٍ خارجيّة (2026-09-27، بطلب المالك: «نفّذ كلّ ما يمكن من ملاحظات المراجعة، محلّياً») ‖
   ١) «عرض المزيد» في صفحات المنتجات: البطاقات بعد أوّل 30 ظاهرة مخفيّة (app.js paginate)، والزرّ تحت الشبكة */
.mm-lm-hide{display:none!important}
.mm-more{display:flex;margin:1.75rem auto 0.25rem;min-width:15rem;justify-content:center}
.mm-more[hidden]{display:none}
/* ٢) صفحة المنتج: «اسأل عن هذا المنتج عبر واتساب» تحت صندوق الشراء — رابطٌ هادئ بأخضر واتساب، لا زرٌّ ثانٍ ينافس «أضف إلى السلّة» */
.pdp-ask{display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.875rem;font:500 0.9375rem/1.3 var(--ui-font);color:#0f7535;text-decoration:none}
.pdp-ask svg{flex:none;color:#25d366}
.pdp-ask:hover span{text-decoration:underline;text-underline-offset:0.1875rem}
/* ٣) المستشار: التنبيه نفسه («ما هذه الخطة وما ليست…») قبل الخطوة الأولى أيضاً، لا في آخرها وحدها */
.adv-pre{margin:0 0 1.125rem}
/* ٤) (المالك، 2026-09-28) شعارات شريط التصفية: الخانة 56×17px تناسب الشعارات العريضة (Scitec، GASP، EVOGEN)، أمّا
   المربّعة والمتوسّطة فكانت تُصغَّر حتى لا تُرى — «أكبر»: درع 14 وحرف B الجديد لـ BiotechUSA بارتفاع 30px، وGAT
   وBetter Bodies 26px (بالعرض نفسه 56px، فتبقى الأسماء مصطفّة) */
.mm-side .mm-row .mm-logo[style*="superior14"],.mm-side .mm-row .mm-logo[style*="biotechusa-b"]{height:1.875rem}
.mm-side .mm-row .mm-logo[style*="brands/gat"],.mm-side .mm-row .mm-logo[style*="betterbodies"]{height:1.625rem}
/* ‖ s100 end ‖ */

/* ‖ s101 begin ‖ */
/* ‖ ١٠١. شعارات العلامات على كلّ بطاقات المنتجات (2026-09-28، المالك: «ضع الشعار على كلّ بطاقات المنتجات» —
   Nebbia وBetter Bodies وGAT وEVOGEN بالاسم، وSuperior 14 معها) ‖
   كانت الشعارات لأربع علاماتٍ فقط (§ «شعارات العلامات»)، والباقي نصّ. الآن كلّ علامةٍ لها ملفّ شعار. المقاسات على قاعدة
   الأربع: مساحةٌ مرئيّة متقاربة (~1000px²، العريض أقصر والمتراصّ أطول)، بنسبة الملفّ تماماً، وبارتفاعٍ ≤ 21px (Gorilla
   Wear 20.2px) كي لا يعلو سطر العلامة في بطاقةٍ دون جارتها. FA وPS بلا ملفّ شعار: تبقيان نصّاً. */
.card[data-brand="Nebbia" i]{--logo:url(../media/brands/nebbia.svg);--logo-w:4.75rem;--logo-h:0.72rem}
.card[data-brand="EVOGEN" i]{--logo:url(../media/brands/evogen.webp);--logo-w:5.25rem;--logo-h:0.690625rem}
.card[data-brand="GAT" i]{--logo:url(../media/brands/gat.webp);--logo-w:2.75rem;--logo-h:1.298125rem}
.card[data-brand="Better Bodies" i]{--logo:url(../media/brands/betterbodies.svg);--logo-w:2.75rem;--logo-h:1.3175rem}
.card[data-brand="Superior 14" i]{--logo:url(../media/brands/superior14.webp);--logo-w:1.1875rem;--logo-h:1.3125rem}
.card:is([data-brand="Nebbia" i],[data-brand="EVOGEN" i],[data-brand="GAT" i],[data-brand="Better Bodies" i],[data-brand="Superior 14" i]) .card-brand{
  display:block;width:var(--logo-w);height:var(--logo-h);
  font-size:0;line-height:0;color:transparent;
  background:var(--logo) center/var(--logo-fit,contain) no-repeat;
  transition:opacity var(--d-fast) var(--ease)}
.card:is([data-brand="Nebbia" i],[data-brand="EVOGEN" i],[data-brand="GAT" i],[data-brand="Better Bodies" i],[data-brand="Superior 14" i]) .card-brand:hover{opacity:.72}
@media(max-width:560px){
  .card:is([data-brand="Nebbia" i],[data-brand="EVOGEN" i],[data-brand="GAT" i],[data-brand="Better Bodies" i],[data-brand="Superior 14" i]) .card-brand{
    width:calc(var(--logo-w) * .76);height:calc(var(--logo-h) * .76)}
}
/* بطاقات الصفّ (المقالات) أصغر بنسبة الأربع نفسها (~0.78) */
.card.card-row[data-brand="Nebbia" i]{--logo-w:3.6875rem;--logo-h:0.55875rem}
.card.card-row[data-brand="EVOGEN" i]{--logo-w:4.125rem;--logo-h:0.5425rem}
.card.card-row[data-brand="GAT" i]{--logo-w:2.125rem;--logo-h:1.003125rem}
.card.card-row[data-brand="Better Bodies" i]{--logo-w:2.125rem;--logo-h:1.018125rem}
.card.card-row[data-brand="Superior 14" i]{--logo-w:0.9375rem;--logo-h:1.035625rem}
/* ‖ s101 end ‖ */
/* ‖ s102 begin ‖ */
/* ‖ ١٠٢. الرأس لا يختفي عند تحديث الصفحة (2026-09-28، المالك: «عند التحديث يختفي الشعار لحظة») ‖
   عند التحديث أو الدخول المباشر (بلا انتقالٍ بين صفحتين) كانت الصفحة كلّها تظهر من الشفافية (§17، ‎body‎ 380ms) —
   الرأس معها: الشعار وحقل البحث يختفيان ثم يعودان (فيلم التحديث: ~6 إطارات بيضاء). الآن الظهور على المحتوى والتذييل
   وحدهما، والرأس ثابتٌ من أوّل رسم. الانتقال بين الصفحات (§89) كما هو. */
@media(prefers-reduced-motion:no-preference){
  body{animation:none}
  body>main,body>.ftr{animation:mm-page-in 380ms var(--ease) both}
}
html.mm-vt-in body>main,html.mm-vt-in body>.ftr{animation:none!important}
/* ‖ s102 end ‖ */
/* ‖ s103 begin ‖ */
/* ‖ ١٠٣. شعار الرأس صورةٌ لا قناع (2026-09-28، المالك: «عند التحديث يختفي الشعار لحظة») ‖
   القناع (mm-stacked-mask.png) كان يُرسم بعد بقيّة الرأس عند التحديث (5–11 إطاراً فارغاً)؛ الآن ‎<img decoding="sync">‎
   بالشعار نفسه ملوّناً بالسماويّ (round35/logo_img.py) يُرسم مع الرأس. الخانة ‎.logo-img‎ نفسها (المقاسات والتصغير عند
   الالتصاق)، والقناع مطفأٌ فيها وحدها. التذييل وقائمة الهاتف كما هما. */
.hdr .logo-img:has(>img){-webkit-mask-image:none;mask-image:none;background:none}
.hdr .logo-img>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
/* ‖ s103 end ‖ */
/* ‖ s104 begin ‖ */
/* ‖ ١٠٤. إشعار السلّة وخانة الكمّيّة (2026-09-28، المالك) ‖
   ١) «أُضيف إلى السلّة» / «لا يتوفّر أكثر من…»: كان مربّعاً داكناً بخطٍّ أخضر — الآن بمادّة الموقع (زجاجٌ أبيض،
      حافّة بيضاء، ظلّ سماويّ خفيف، زوايا 14px) وأيقونةٌ سماويّة: صحّ للإضافة، ونقطة معلومة لغيرها (app.js data-kind).
      و«يعلق في أسفل الموقع حين يختفي»: الإخفاء كان إزاحةً بمقدار ارتفاعه فقط (120% من 24px فوق الحافّة) بلا تلاشٍ،
      فيبقى طرفه وظلّه ظاهرَين؛ الآن يختفي تماماً (شفافيّةٌ ثم visibility بعد انتهاء الحركة) ويخرج كلّه تحت الحافّة. */
.toast{display:flex;align-items:center;gap:0.625rem;inset-block-end:1.5rem;
  background:rgba(255,255,255,.94);color:#141414;border:1px solid rgba(255,255,255,.9);border-radius:0.875rem;
  -webkit-backdrop-filter:blur(1.125rem) saturate(180%);backdrop-filter:blur(1.125rem) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(13,156,248,.14),0 1rem 2.5rem -0.75rem rgba(8,52,110,.35);
  padding:0.75rem 1.25rem 0.75rem 0.875rem;font:600 0.9375rem/1.35 var(--ui-font);max-width:min(92vw,32.5rem);text-align:start;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(calc(100% + 2.5rem));
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .32s}
html[dir=rtl] .toast{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(13,156,248,.14),0 1rem 2.5rem -0.75rem rgba(8,52,110,.35);padding:0.75rem 0.875rem 0.75rem 1.25rem}
.toast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s}
.toast::before{content:'';flex:none;width:1.5rem;height:1.5rem;border-radius:50%;
  background:#0d9cf8 no-repeat center/0.875rem 0.875rem;box-shadow:0 0.25rem 0.625rem -0.1875rem rgba(13,156,248,.6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.toast[data-kind="info"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E")}
@supports not (backdrop-filter:blur(1px)){.toast{background:#fff}}
@media(prefers-reduced-motion:reduce){.toast,.toast.on{transform:translateX(-50%);transition:opacity .15s ease,visibility 0s linear .15s}}

/* ٢) خانة الكمّيّة (− العدد +): بلا سهمي المتصفّح الصغيرين — الزرّان − و+ يكفيان (وفي كلّ خانة عددٍ بجانبها زرّاها) */
.qty-box input[type=number],.cart-dr input[type=number],.cart-page input[type=number]{-moz-appearance:textfield;appearance:textfield}
.qty-box input[type=number]::-webkit-inner-spin-button,.qty-box input[type=number]::-webkit-outer-spin-button,
.cart-dr input[type=number]::-webkit-inner-spin-button,.cart-dr input[type=number]::-webkit-outer-spin-button,
.cart-page input[type=number]::-webkit-inner-spin-button,.cart-page input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ٣) صفحة المنتج: مصغّرات صور النكهات (motion.js) كبقيّة المصغّرات؛ النكهة النافدة باهتة */
.pdp-thumbs img.mm-flav-out{opacity:.4;filter:grayscale(.5)}
.pdp-thumbs img.mm-flav-out:hover{opacity:.7}

/* ٤) السلّة (الدرج والصفحة): الصورة على بلاطة المنتج مدموجةً بها كما في البطاقات (الصور بخلفيّةٍ بيضاء: كانت مربّعاً
      أبيض داخل البلاطة). الغلاف ‎.ci-img‎ يحمل البلاطة ويعزل الدمج، والصورة ‎multiply‎ فيبيضّ الأبيض إلى لون البلاطة */
.ci .ci-img{flex:none;display:block;width:5.375rem;aspect-ratio:4/5;background:#eef3f9;border-radius:var(--sharp);
  isolation:isolate;overflow:hidden;box-shadow:inset 0 0 0 .5px rgba(12,74,140,.1)}
.cart-tbl .ci .ci-img,.cart-body .ci .ci-img{width:5.75rem}
.cart-dr .ci .ci-img{width:5.5rem}
.ci .ci-img img,.cart-dr .ci .ci-img img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;padding:0.25rem;
  background:transparent;mix-blend-mode:multiply;box-shadow:none;border-radius:0}
@media(max-width:560px){.ci .ci-img,.cart-dr .ci .ci-img{width:4.5rem}}

/* ٥) السلّة الفارغة: علامة M بالأزرق الفاتح (كانت رماديّةً فاتحة تكاد لا تُرى على زجاج الدرج) */
.cart-empty::before{background-color:#7cc8fb}

/* ٦) التذييل: الاشتراك برقم واتساب (round35/footer_whatsapp.py + app.js) — الحقل بالاتّجاه اليساريّ للأرقام، والزرّ
      بأخضر واتساب الداكن (تباين النصّ الأبيض ≥4.5، مثل زرّ واتساب العائم)، ورسالة الخطأ تحت الحقل */
.ftr .news-wa input{text-align:start}
html[dir=rtl] .ftr .news-wa input::placeholder{text-align:right}
.ftr .news-wa .button,.f-news .news-wa .button{background:#0f7535;white-space:nowrap}
.ftr .news-wa .button:hover{background:#0c6129}
.news-wa-msg{margin:0.5rem 0 0;font-size:0.8125rem;color:#ffd7d7}
/* ‖ s104 end ‖ */
/* ‖ s105 begin ‖ */
/* ‖ ١٠٥. القوائم المنسدلة بمادّة الموقع (2026-09-28، المالك: «كلّ قائمةٍ منسدلة في الموقع تطابق شكله، لا العاديّة») ‖
   ١) الصندوق المغلق: سهم الموقع (خطّ رفيع بلون الحبر) بدل سهم المتصفّح، في الجهة الصحيحة بالعربيّة.
   ٢) القائمة المفتوحة (app.js ‎.mm-dd‎، على أجهزة الفأرة): زجاجٌ أبيض بزوايا 14px وظلٍّ سماويّ خفيف، صفوفٌ 42px،
      التظليل سماويّ فاتح، والمختار بالسماويّ مع علامة صحّ، والخيار الفارغ («اختر…») رماديّ. تنزل بحركةٍ قصيرة. */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:1rem 1rem;background-position:right 0.875rem center;padding-inline-end:2.5rem!important;cursor:pointer}
html[dir=rtl] select:not([multiple]):not([size]){background-position:left 0.875rem center}
select[data-mm-open]{border-color:var(--volt,#0d9cf8)!important;box-shadow:0 0 0 0.25rem rgba(13,156,248,.14)}

.mm-dd{position:fixed;z-index:200;overflow:auto;overscroll-behavior:contain;padding:0.375rem;border-radius:0.875rem;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(1.125rem) saturate(180%);backdrop-filter:blur(1.125rem) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(13,156,248,.14),0 1.125rem 2.75rem -0.875rem rgba(8,52,110,.38);
  animation:mm-dd-in .16s cubic-bezier(.2,.9,.25,1) both;scrollbar-width:thin}
.mm-dd.up{animation-name:mm-dd-up}
@keyframes mm-dd-in{from{opacity:0;transform:translateY(-0.375rem)}}
@keyframes mm-dd-up{from{opacity:0;transform:translateY(0.375rem)}}
.mm-dd-list{list-style:none;margin:0;padding:0}
.mm-dd-opt{position:relative;display:flex;align-items:center;min-height:2.625rem;padding:0 2.375rem 0 0.875rem;border-radius:0.625rem;
  font:500 0.9375rem/1.3 var(--ui-font);color:#141414;cursor:pointer;white-space:nowrap}
.mm-dd[dir=rtl] .mm-dd-opt{padding:0 0.875rem 0 2.375rem}
.mm-dd-opt.act{background:rgba(13,156,248,.09)}
.mm-dd-opt.on{color:#0a6fc4;font-weight:600}
.mm-dd-opt.on::after{content:'';position:absolute;inset-inline-end:0.75rem;top:50%;width:1rem;height:1rem;margin-top:-0.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9cf8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.mm-dd-opt.ph{color:#8a94a6}
.mm-dd-opt.dis{color:#b6bdc9;cursor:default}
.mm-dd-opt.dis.act{background:none}
@media(prefers-reduced-motion:reduce){.mm-dd{animation:none}}
@supports not (backdrop-filter:blur(1px)){.mm-dd{background:#fff}}
/* ‖ s105 end ‖ */

/* ‖ s106 begin ‖ */
/* ‖ ١٠٦. بطاقة المنتج: الشعار على الصورة، وبلا سطر الفئة (2026-09-28، المالك) ‖
   «شعار العلامة داخل صورة البطاقة، في الجهة الأخرى من زرّ +، في الأسفل — وأزل الفئة تحت الصورة».
   السطر تحت الصورة (العلامة · الفئة) يختفي: الفئة مخفيّة في كلّ البطاقات، والعلامة تنتقل إلى أسفل الصورة في الجهة المقابلة
   لـ + وعلى خطّ وسطه (بقياس الزرّ نفسه: ‎--tile-h / --add / --add-in‎). في العربيّة + يسارٌ والشعار يمين، وبالعكس.
   بطاقة «الأبرز» الكبيرة (أوّل ‎.mm-ed‎ وبطاقة ‎.hm-spot‎) صورتها بارتفاعٍ آخر و+ تحت الصورة على الشاشة العريضة: العلامة
   فيها أعلى النصّ. وبطاقات الصفّ (المقالات) صغيرة أفقيّة: العلامة في مكانها بلا الفئة. العلامة بلا ملفّ شعار (FA، PS)
   كلمةٌ على شارةٍ بيضاء صغيرة. */
.card .card-catlink,.card .card-cat .card-brand+*{display:none}
.card:not(.card-row) .card-cat{display:contents}
.card:not(.card-row) .card-brand{position:absolute;z-index:4;margin:0;
  inset-inline-start:calc(var(--add-in) + 0.25rem);top:calc(var(--tile-h) - var(--add-in) - 0.1875rem);transform:translateY(-100%)}   /* (المالك: «أنزل الشعار» — أسفله على خطّ أسفل زرّ +) */
/* (شعارٌ بلا ملفّ: نصٌّ على شارة) */
.card:not(.card-row):not([data-brand="BiotechUSA"]):not([data-brand="Scitec Nutrition"]):not([data-brand="GASP" i]):not([data-brand="Gorilla Wear"]):not([data-brand="Nebbia" i]):not([data-brand="EVOGEN" i]):not([data-brand="GAT" i]):not([data-brand="Better Bodies" i]):not([data-brand="Superior 14" i]) .card-brand{
  padding:0.25rem 0.5625rem;border-radius:62.4375rem;background:rgba(255,255,255,.88);font-size:0.75rem;font-weight:600;color:#141414;line-height:1.2}
/* بطاقة «الأبرز»: العلامة فوق الاسم، في النصّ */
.mm-ed>.card:first-child .card-brand,.hm-bento>.hm-spot .card-brand{position:static;transform:none;align-self:flex-start;margin-bottom:0.125rem}
@media(max-width:560px){
  .mm-ed>.card:first-child .card-brand{position:absolute;transform:translateY(-100%)}
}

/* ‖ صفحة المتابعة (2026-09-28، المالك): قسما «المشاركة في تحدّي التغيير» و«فحوص المعقولية الستّة» مخفيّان حتى يُطلق تحدٍّ
   للمستخدمين — لإظهارهما يُحذف الصنف mm-later من tracking.html (أو هذه القاعدة). */
.tr-sec.mm-later{display:none!important}
/* ‖ s106 end ‖ */
/* ‖ s107 begin ‖ */
/* ‖ ١٠٧. التذييل أغمق، وعلامة M أكبر، والاشتراك برمز الدولة (2026-09-29، المالك) ‖
   «الأزرق أغمق ليعطي تباينًا أكثر، وحرف M في الخلفية أكبر قليلاً، والاشتراك يختار بين +972 و+970».
   الخلفيّة من الأزرق الملكيّ الداكن إلى الكحليّ (#0a59a9→#0b6cc8 كانت)، والضوء العلويّ والشفق أخفّ؛ النصّ الأبيض يبلغ تباينًا
   ≥ 8:1 بدل ~5:1. نقش M: ‎190px‎ (كان 130px) وأوضح قليلاً على الداكن. */
.ftr,html[dir=rtl] .ftr{background:radial-gradient(56.25rem 27.5rem at 88% -12%,rgba(13,156,248,.22),transparent 62%),linear-gradient(180deg,#04254a,#05305f)}
html[dir=rtl] .ftr{background:radial-gradient(56.25rem 27.5rem at 12% -12%,rgba(13,156,248,.22),transparent 62%),linear-gradient(180deg,#04254a,#05305f)}
.ftr .aurora-l{opacity:.22}
.ftr::before{background-color:rgba(255,255,255,.08);-webkit-mask-size:11.875rem auto;mask-size:11.875rem auto}

/* رمز الدولة في حقل الاشتراك: قائمةٌ صغيرة قبل الرقم (+972 أوّلاً كما في إتمام الطلب)، بمادّة الحقل نفسه، والقائمة
   المنسدلة بمادّة الموقع (s105) */
.ftr .news-wa{flex-wrap:nowrap}
.ftr .news-wa .news-cc{flex:none;width:auto;height:2.75rem;padding:0 2.125rem 0 0.75rem!important;border-radius:var(--sharp);
  background-color:rgba(255,255,255,.14);border:0.09375rem solid rgba(255,255,255,.3);color:#fff;font:600 0.9375rem/1 var(--ui-font);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position:right 0.625rem center;background-size:0.875rem 0.875rem;direction:ltr}
.ftr .news-wa .news-cc option{color:#141414}
.ftr .news-wa .news-cc:focus{outline:0;border-color:#fff;box-shadow:0 0 0 0.25rem rgba(255,255,255,.18)}
.ftr .news-wa input{min-width:0}

/* (المالك، بعدها: «أغمق، والنصوص أبيض») كحليٌّ داكن، والنصّ أبيض (كان 82–86%): الروابط والفقرات 95%، والعناوين أبيض كامل */
.ftr,.ftr p,.f-brand p{color:rgba(255,255,255,.95)}
.ftr li a,.ftr a{color:rgba(255,255,255,.95)}
.ftr h4,.ftr .f-col h4{color:#fff}
.ftr li a:hover{color:#fff}
.ftr .ftr-bar,.ftr .ftr-bar a,.ftr .ftr-bar span{color:rgba(255,255,255,.9)}
/* (بالعربيّة: السهم يمين الرمز كما في الإنجليزيّة، الرمز يساراً) */
html[dir] .ftr .news-wa .news-cc{background-position:right 0.625rem center;text-align:left}

/* (المالك: «أيقونات التذييل تبدو سيّئة — أجمل وأكبر») أزرارٌ 48px مربّعةٌ مدوّرة بزجاجٍ أبيض خفيف وحافّة، والأيقونة 24px
   أوضح: واتساب بشعاره المصمت (كزرّ واتساب العائم) وإنستغرام بخطٍّ أثخن؛ عند التحويم يرتفع الزرّ بلون العلامة (تدرّج
   إنستغرام، أخضر واتساب). الأيقونة قناعٌ في ‎::before‎ (رسم الوسم مخفيّ) فلا يُمسّ وسم الصفحات */
.ftr .socials{gap:0.75rem;margin-top:1.25rem}
.ftr .socials a{position:relative;width:3rem;height:3rem;border-radius:0.875rem;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s cubic-bezier(.2,.9,.25,1),background .2s ease,box-shadow .2s ease}
.ftr .socials a svg{display:none}
.ftr .socials a::before{content:'';width:1.5rem;height:1.5rem;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ftr .socials a[href*="instagram"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.6'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Ccircle cx='17.7' cy='6.3' r='1.35' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.ftr .socials a[href*="wa.me"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-2.9.9.9-2.8-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.7-.3-1.4-.7-2-1.3-.5-.5-1-1.1-1.3-1.7-.1-.2 0-.4.1-.5l.4-.4.3-.5v-.4l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.6.6-.9 1.4-.9 2.2.1.9.4 1.8 1 2.6 1.1 1.6 2.5 2.9 4.2 3.7.5.2.9.4 1.4.5.5.1 1.1.1 1.6 0 .6-.1 1.1-.4 1.5-.9.2-.3.3-.8.2-1.1-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E")}
.ftr .socials a:hover,.ftr .socials a:focus-visible{transform:translateY(-0.1875rem);color:#fff}
.ftr .socials a[href*="instagram"]:hover,.ftr .socials a[href*="instagram"]:focus-visible{background:linear-gradient(45deg,#f9a13c,#e1306c 50%,#8a3ab9);box-shadow:0 0.625rem 1.375rem -0.5rem rgba(225,48,108,.7)}
.ftr .socials a[href*="wa.me"]:hover,.ftr .socials a[href*="wa.me"]:focus-visible{background:#25d366;box-shadow:0 0.625rem 1.375rem -0.5rem rgba(37,211,102,.7)}
@media(prefers-reduced-motion:reduce){.ftr .socials a:hover{transform:none}}
/* ‖ s107 end ‖ */

/* ‖ s108 begin ‖ */
/* ‖ ١٠٨. بالعربية زرّ واتساب يفسح لشريط الترشيح (2026-09-29، المالك: «القائمة بالعربي على اللابتوب شكلها سيّئ») ‖
   الشريط العربي في يمين الشاشة، في عمود الزرّ العائم؛ كان يقصر 126px ليترك للزرّ مكانه (340px على لابتوب: الترتيب وفئةٌ
   واحدة). الآن ما دام الشريط اللاصق مفتوحاً في عمود الزرّ (‎html.mm-fab-left‎، motion.js ١٣·٧ وboot.js) ينتقل الزرّ إلى
   يسار الشاشة بالمسافة نفسها، والشريط بطوله كما بالإنجليزية. تفسّح الزرّ لزرّ + (§39) تنزاح جهته الجديدة. */
html.mm-fab-left .contact-fab.cf-btn{right:auto;left:1.5625rem}
html.mm-fab-left .contact-fab.mm-fab-yield{transform:translateX(-1.125rem) scale(.92)}
html.mm-fab-left .contact-fab.mm-fab-yield.mm-fab-measure{transform:none}
@media(prefers-reduced-motion:reduce){html.mm-fab-left .contact-fab.mm-fab-yield{transform:none}}
/* ‖ s108 end ‖ */

/* ‖ s109 begin ‖ */
/* ‖ ١٠٩. شعارات البطاقات بلون الموقع (2026-10-12، المالك: «اجعل الشعارات تناسب ثيم الموقع ولونه، لا ألوان الشعارات الأصلية») ‖
   كانت صوراً بألوانها (أحمر Gorilla وScitec، برتقاليّ GASP، سماويّ BiotechUSA…). الآن كلّ ملفّ شعارٍ قناعٌ بالأزرق الملكيّ
   ‎--royal‎ (لون الروابط الصغيرة على الفاتح)، ويصير سماويّاً ‎--volt‎ عند التحويم. الملفّات نفسها والمقاسات نفسها (‎--logo‎،
   ‎--logo-w/-h‎، ‎--logo-fit‎)؛ كلّها شفّافة الخلفيّة فتبقى تفاصيلها (درع Superior 14، فراغات GAT) مقروءة. */
.card:is([data-brand="BiotechUSA"],[data-brand="Scitec Nutrition"],[data-brand="GASP" i],[data-brand="Gorilla Wear"],[data-brand="Nebbia" i],[data-brand="EVOGEN" i],[data-brand="GAT" i],[data-brand="Better Bodies" i],[data-brand="Superior 14" i]) .card-brand{
  background:var(--volt);
  -webkit-mask:var(--logo) center/var(--logo-fit,contain) no-repeat;mask:var(--logo) center/var(--logo-fit,contain) no-repeat;
  transition:background-color var(--d-fast) var(--ease)}
.card:is([data-brand="BiotechUSA"],[data-brand="Scitec Nutrition"],[data-brand="GASP" i],[data-brand="Gorilla Wear"],[data-brand="Nebbia" i],[data-brand="EVOGEN" i],[data-brand="GAT" i],[data-brand="Better Bodies" i],[data-brand="Superior 14" i]) .card-brand:hover{
  opacity:1;background:var(--royal)}
/* (المالك: «وهذه أيضاً») شعارات العلامات في شريط الترشيح (‎.mm-logo‎، motion.js ‎BRAND_LOGOS‎ والشريط المبنيّ في الوسم):
   القناع نفسه بالأزرق الملكيّ، والصفّ المختار والتحويم كما هما */
.mm-logo,.mm-side .mm-logo,.mm-side .mm-row .mm-logo{background:var(--volt);
  -webkit-mask:var(--logo) center/var(--logo-fit,contain) no-repeat;mask:var(--logo) center/var(--logo-fit,contain) no-repeat}
/* (2026-10-13، المالك: «بلون زرّ + السماويّ، لا الداكن» — في البطاقات وشريط الترشيح): الشعارات بالسماويّ ‎--volt‎، والتحويم يغمق إلى الملكيّ */
/* علاماتٌ بلا ملفّ شعار (FA، PS): اسمها على الشارة البيضاء بالأزرق الملكيّ نفسه (كان #141414) */
.card:not(.card-row):not([data-brand="BiotechUSA"]):not([data-brand="Scitec Nutrition"]):not([data-brand="GASP" i]):not([data-brand="Gorilla Wear"]):not([data-brand="Nebbia" i]):not([data-brand="EVOGEN" i]):not([data-brand="GAT" i]):not([data-brand="Better Bodies" i]):not([data-brand="Superior 14" i]) .card-brand{
  color:var(--volt)}
/* ‖ s109 end ‖ */
/* ‖ s110 begin ‖ */
/* ‖ ١١٠. شريط الترشيح يتمدّد مع التمرير بنعومة (2026-10-12، المالك: «يتقطّع وهو يتمدّد مع التمرير»، «مقصوصٌ من أسفل حين يظهر»،
   ثمّ مع الارتفاع الثابت: «لا يتحرّك ويبدو صغيراً») ‖
   المطلوب الاثنان: يظهر كاملاً على الشاشة من أوّل لحظة، ويتمدّد مع التمرير حتى يملأ الشاشة ملتصقاً — بلا ارتجاف. كان الارتفاع
   يُكتب بـ JavaScript بعد كلّ تمريرة (يتأخّر عنها إطاراً أو اثنين) ثم تتسلّمه قاعدة CSS بانتقالٍ عند الالتصاق. الآن يقوده
   التمرير نفسه في CSS (‎animation-timeline: scroll()‎): من «الشاشة − موضعه في الصفحة ‎--mm-t0‎ − الهامش» في أعلى الصفحة
   إلى «الشاشة − ‎--mm-sticky‎ − الهامش» حين يلتصق، خطّيّاً على مسافة ‎t0 − ‎--mm-sticky‎ بالضبط — فأسفله ثابتٌ على
   الشاشة طوال التمدّد. motion.js ١٣·٧ وboot.js يكتبان ‎--mm-t0‎ مرّةً (عند تغيّر التخطيط، لا مع التمرير) ويضعان ‎.mm-grow‎.
   شريط التنقّل حين يختفي يغيّر ‎--mm-sticky‎ (خاصيّةٌ مسجّلة، s‎mm-scale‎): ينتقل هو نفسه .42s فيتبعه الموضع والارتفاع
   والمدى معاً (انتقال ‎top/max-height‎ القديم أُلغي هنا). متصفّحٌ بلا هذه الميزة أو مع «تقليل الحركة»: ارتفاعٌ ثابتٌ يسع
   الشاشة (motion.js). مكان شريط التمرير محجوزٌ دائماً فلا يتغيّر عرض الصفوف. */
.col-layout.mm-side-on>.mm-side-shop,.ex-filters.mm-side{scrollbar-gutter:stable}
/* (المرّة الرابعة: «الحجم جيّد لكن ما زالت قفزاتٌ وتقطّع») قياس عمل المتصفّح أثناء التمرير، الشريط مفتوحاً مقابل مغلقاً:
   إعادة حساب الأنماط ضعفان (أطولها 41ms في إطارٍ واحد) والرسم ضعفان. السببان: (١) ‎--mm-sticky‎ الذي ينتقل حين يختفي شريط
   التنقّل خاصيّةٌ موروثة، فكلّ إطارٍ من انتقاله يعيد أنماط ~300 عنصرٍ في الشريط — الآن ينتقل ‎--mm-st‎ غير الموروث على الشريط
   وحده؛ (٢) زجاج الشريط ‎backdrop-filter‎ يُعاد رسمه بالضبابيّة مع كلّ تغيّرٍ في الارتفاع، وخلف الشريط المثبّت على الشاشة العريضة
   صفحةٌ بيضاء فقط فلا أثر مرئيّاً له — أُطفئ هنا (اللون والتدرّج كما هما)، و‎contain:layout‎ يحصر إعادة التخطيط فيه. */
@property --mm-st{syntax:'<length>';inherits:false;initial-value:135px}
@supports (animation-timeline:scroll()){
  @keyframes mm-side-grow{
    from{max-height:calc(100vh - var(--mm-t0) - var(--mm-gap))}
    to{max-height:calc(100vh - var(--mm-st) - var(--mm-gap))}}
  @media(min-width:1081px){
    .col-layout.mm-side-on>.mm-side-shop.mm-grow:not(.mm-side-leave){--mm-gap:1.25rem;--mm-st:var(--mm-sticky);top:var(--mm-st);
      animation:mm-side-grow linear both;animation-timeline:scroll(root block);
      animation-range:0px max(1px,calc(var(--mm-t0) - var(--mm-st)));
      transition:--mm-st .42s cubic-bezier(.32,.72,0,1);
      -webkit-backdrop-filter:none;backdrop-filter:none;contain:layout}
    /* الدخول (انزلاقٌ مع فتح الشريط) يجتمع مع التمدّد */
    .col-layout.mm-side-on>.mm-side-shop.mm-grow.mm-side-enter{
      animation:mm-side-in 760ms var(--s-soft) both,mm-side-grow linear both;animation-timeline:auto,scroll(root block);
      animation-range:normal,0px max(1px,calc(var(--mm-t0) - var(--mm-st)))}
  }
  @media(min-width:901px){
    .ex-filters.mm-side.mm-grow{--mm-gap:1.0625rem;--mm-st:var(--mm-sticky);top:var(--mm-st);
      animation:mm-side-grow linear both;animation-timeline:scroll(root block);
      animation-range:0px max(1px,calc(var(--mm-t0) - var(--mm-st)));
      transition:--mm-st .42s cubic-bezier(.32,.72,0,1);
      -webkit-backdrop-filter:none;backdrop-filter:none;contain:layout}
  }
}
/* ‖ s110 end ‖ */
/* ‖ s111 begin ‖ */
/* ‖ ١١١. الشعار: «MANIA» أبعد إلى اليمين و«MUSCLE» في مكانها تماماً (2026-10-12/13، المالك: «اجعل MANIA أكثر إلى اليمين»،
   ثمّ: «MUSCLE لا تتحرّك أبداً») ‖
   ملفّا الشعار (القناع ‎mm-stacked-mask.png‎ وصورة الرأس ‎mm-logo-sky.png‎) أعرض بقدر الإزاحة (round36/logo_mania_shift.py:
   1417→1618 من 425؛ ثمّ «أكثر»: الإزاحة 67→134→201)، و«MUSCLE» في الملفّ في مكانها. المحاولة الأولى وسّعت خانة الشعار فانزاحت «MUSCLE» بالعربية 8–12px
   (الخانة تلتصق باليمين فتتّسع يساراً). الآن:
   - الرأس: الخانة بعرضها القديم (1417/425) بالضبط، والصورة الأعرض تفيض منها إلى اليمين (‎direction:ltr‎ داخلها في اللغتين)؛
     التصغير عند الالتصاق كما كان.
   - التذييل وقائمة الهاتف (قناع، لا يفيض): الخانة بنسبة الملفّ الجديد، وبالعربية تُزاح يميناً بقدر ما زادت فيبقى يسارها
     — و«MUSCLE» — حيث كان. */
.hdr .logo-img:has(>img){direction:ltr;overflow:visible}
.hdr .logo-img>img{width:calc(100% * 1618 / 1417);max-width:none}
.f-brand .logo-img,.mm-nav-hd .logo-img{width:auto;aspect-ratio:1618/425}
html[dir=rtl] :is(.f-brand,.mm-nav-hd) .logo-img{transform:translateX(calc(100% * 201 / 1618))}
/* ‖ s111 end ‖ */
/* ‖ s112 begin ‖ */
/* ‖ ١١٢. زرّ «أضف» في شريط التوصيل المجاني (2026-10-13، المالك: «ضع علامة "أضف" صغيرة هنا»، ثمّ: «في الزاوية السفلى، بكلمة
   "أضف" لا + وحدها، وقابلة للنقر تأخذ المستخدم ليضيف منتجات») ‖
   زرٌّ صغير تحت الشريط في زاويته (جهة نهاية السطر: يمين بالإنجليزية، يسار بالعربية) بلون زرّ + في البطاقات (‎--volt‎،
   نصٌّ أبيض)، يأخذ إلى صفحة المنتجات. يغمق عند التحويم وينضغط عند النقر. */
.cart-free-add{display:flex;align-items:center;gap:0.3125rem;width:max-content;margin:0.625rem 0 0;margin-inline-start:auto;
  height:1.875rem;padding:0 0.8125rem 0 0.625rem;border-radius:62.4375rem;background:var(--volt);color:#fff;font-size:0.84375rem;font-weight:600;
  line-height:1;text-decoration:none;box-shadow:0 0.1875rem 0.625rem rgba(13,156,248,.3);
  transition:background-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.cart-free-add svg{width:0.75rem;height:0.75rem;flex:none}
.cart-free-add:hover{background:var(--royal);color:#fff}
.cart-free-add:active{transform:scale(.96)}
.cart-free-add:focus-visible{outline:0.125rem solid var(--volt);outline-offset:0.1875rem}
/* ‖ s112 end ‖ */

/* ‖ s113 begin ‖ */
/* ‖ ١١٣. «عرض المزيد» بحركة (المالك، 2026-10-14: «لما يكبس بتجي مرة وحدة، بدي يكون فيها موشن حلو») ‖
   البطاقات التي يكشفها الزرّ وتقع كاملةً داخل الشاشة تصعد قليلاً وتظهر واحدةً بعد الأخرى (app.js: MMRevealIn يضع
   ‎.mm-lm-in‎ ورقمها ‎--lm-i‎ ثم يزيله بعد الحركة)؛ التي تحت الشاشة تدخل بحركة التمرير المعتادة (١٣·٦). أثناء الحركة
   تتوقّف حركة التمرير على البطاقة نفسها (هي داخل الشاشة كاملةً، فحالتها بعدها هي حالتها الكاملة — لا قفزة). */
@media (prefers-reduced-motion: no-preference){
  .col-layout #pgrid>.card.mm-lm-in,#pgrid>.card.mm-lm-in,.ex-grid>.ex-card.mm-lm-in{
    animation-name:mm-lm-in;animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.8,.3,1);
    animation-delay:calc(var(--lm-i,0) * 50ms);animation-fill-mode:both;animation-iteration-count:1;
    animation-timeline:auto;animation-range:normal}
}
/* خفيفة: صعودٌ 16px وتكبيرٌ من 98% مع الظهور */
@keyframes mm-lm-in{
  from{opacity:0;transform:translate3d(0,1rem,0) scale(.98)}
  to{opacity:1;transform:none}
}
/* ‖ s113 end ‖ */

/* ‖ s114 begin ‖ */
/* ‖ ١١٤. رأس الصفحة على الهاتف (المالك عبر الـhub، 2026-10-15: «نسخة الهاتف فيها أخطاء كثيرة») ‖
   شعار «MUSCLE MANIA» كان 32–59px عرضاً على 360–390px (ويُقصّ «MANIA» داخل خانته): زرّ اللغة (90px: العلم والسهم) وحاشيتان
   بـ40px تأخذان مكانه. على الهاتف: حاشيةٌ بحافّة بطاقة الهيرو، زرّ اللغة علمٌ وحده (القائمة تفتح بالنقر كما هي)، والشعار
   يأخذ ما بقي حتى 150px بنسبته. */
@media(max-width:560px){
  .hdr .wrap.hdr-in{padding-inline:0.25rem;gap:0.5rem}
  .hdr .icon-btn.lang-toggle{padding:0 0.5rem;gap:0}
  .hdr .lang-toggle .lt-chev{display:none}
  .hdr .lang-toggle .lt-flag{width:1.75rem;height:1.25rem}
  .hdr .hdr-in>.logo{flex:1 1 auto;min-width:0}
  /* (الصورة أعرض من خانتها بـ1618/1417 — إزاحة «MANIA»، s111 — فالخانة ≤ 1417/1618 من المكان كي لا يُقصّ آخرها) */
  .hdr .logo-img{height:auto;width:min(calc(100% * 1417 / 1618),8.25rem);aspect-ratio:1417/425}
  /* بالعربيّة الخانة عند يمين مكانها والصورة تفيض يميناً (اتّجاهها ltr) فيُقصّ آخر «MANIA»: تُزاح الخانة يساراً بمقدار الفيض */
  html[dir=rtl] .hdr .logo-img{translate:calc(-100% * 201 / 1417) 0}
}
/* ‖ s114 end ‖ */
/* ‖ s115 begin ‖ */
/* ‖ ١١٥. إصلاحات الهاتف واللوحيّ (المالك عبر الـhub، 2026-10-15: «نسخة الهاتف فيها أخطاء كثيرة») ‖ المكتب كما هو. */
@media(max-width:960px){
  /* التذييل: نموذج «اشترك عبر واتساب» (الرمز + الرقم + الزرّ في سطرٍ لا يلتفّ) كان يمدّ عمود التذييل إلى 539px على هاتفٍ
     عرضه 390 فيُقصّ زرّ «اشترك» (والتذييل يخفي ما يفيض). العمود الآن لا يتجاوز الشاشة، والزرّ ينزل سطراً بعرض النموذج حين
     لا يتّسع السطر */
  .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr .news-wa{flex-wrap:wrap;row-gap:0.625rem}
  .ftr .news-wa .button{flex:1 1 100%}
}
/* جداول البرامج: عنوان عمود «التمرين» كان مثبّتاً يميناً (text-align:right) فيبدو منزاحاً في الصفحة الإنجليزيّة — إلى
   بداية السطر بحسب اللغة (بالعربيّة كما هو) */
.sess th:first-child{text-align:start}
/* وكذلك جداول الصفحات النصّيّة (من نحن، السياسات): «Item / Detail» كانا في الوسط واليمين فوق خلايا تبدأ يساراً */
table.doc-t th{text-align:start}
@media(max-width:560px){
  /* أرقام رأس مكتبة التمارين والبرامج (577 تمريناً · 519 بالصور · …): كانت صفّاً يُسحب جانباً فيظهر الرابع مقصوصاً — الآن
     أربع خاناتٍ متساوية تظهر كلّها */
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0.375rem;overflow:visible;
    margin-inline:0!important;padding:0!important;-webkit-mask:none;mask:none}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats)>div{min-width:0;padding:0.5rem 0.375rem}
  :is(.pr-hero,.ex-hero,.wh-hero) :is(.ex-stats,.wh-stats) span{font-size:0.71875rem!important;line-height:1.25;white-space:normal!important}
  .ftr-grid{grid-template-columns:minmax(0,1fr)}
  /* درج السلّة مفتوحٌ بعرض الشاشة: إشعار «أُضيف إلى السلّة» كان فوق زرّ «عرض السلّة وإتمام الطلب» (وأعلى الدرج فوق المنتج
     نفسه) — والدرج المفتوح بالمنتج فيه هو التأكيد نفسه، فلا إشعار فوقه على الهاتف */
  body:has(.cart-dr.on) .toast{opacity:0;visibility:hidden}
  /* مكتبة التدريب في الرئيسيّة: اسم صاحب الصورة كان فوق العدد (54 / 577) — إلى زاوية الصورة العليا */
  .hm-lib-credit{top:0.75rem;bottom:auto}
}
/* ‖ s115 end ‖ */

/* ‖ ٥٠. هيرو الصفحة الرئيسية: أربع شرائح ‖
   علامات كثيرة في متجر واحد، المستشار، التوصيل المجاني، الأصالة والدفع عند الاستلام.
   المسار شريط تمريرٍ أفقي بنقاط التقاط: السحب باللمس ولوحة اللمس أصليّ (لا يحبس التمرير
   العمودي)، والفأرة تسحب عبر hero.js. كل شريحة تعرف موضعها من مركز المسار (‎--p‎ من ‎-1‎
   إلى ‎1‎) فتتحرّك طبقاتها بسرعاتٍ مختلفة — عمقٌ من الحركة نفسها لا من مؤثّرات إضافية.
   الحركة الدائمة (المدار، الطفو، الطريق) تعمل في الشريحة الظاهرة وحدها، وتتوقّف مع تقليل الحركة. */
.hx{--cw:min(87.5rem,calc(100vw - 12.5rem));--ch:clamp(32.5rem,calc(24vw + 14.375rem),42.5rem);--pad:clamp(1.75rem,3vw,3.25rem);
  position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.375rem,2.4vw,2.25rem) 0 1.125rem;color:var(--brand-ink);
  background:linear-gradient(180deg,#fff 0%,var(--sky-50) 100%)}
/* المسرح: ضوءٌ سماويّ خافت فوق البطاقات وظلّ تحتها — كطبقتي الضوء في المكوّن الأصلي */
.hx-stage{position:relative;height:var(--ch);touch-action:pan-y}
.hx-wash,.hx-shade{position:absolute;left:50%;translate:-50% 0;border-radius:50%;pointer-events:none}
.hx-wash{top:0;width:70%;height:48%;background:rgba(13,156,248,.14);filter:blur(3.75rem)}
.hx-shade{bottom:-0.625rem;width:76%;height:34%;background:rgba(10,60,120,.22);filter:blur(3.5rem)}
.hx-fan{position:absolute;inset:0}
.hx-s{--p:0;--pa:0;position:absolute;left:50%;bottom:0;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);
  border-radius:var(--sharp);overflow:hidden;isolation:isolate;border:0.25rem solid rgba(255,255,255,.55);
  box-shadow:0 2.75rem 5rem -2.125rem rgba(8,48,104,.55),0 0.875rem 1.75rem -1rem rgba(8,48,104,.35);
  transform-origin:50% 100%;will-change:transform;backface-visibility:hidden;-webkit-user-select:none;user-select:none}
.hx-s.is-on{cursor:grab}
.hx-s.is-grab{cursor:grabbing}
.hx-s::after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;background:rgba(6,34,76,.32);
  transition:opacity .5s var(--ease)}
.hx-s.is-on::after{opacity:0}
.hx-hit{position:absolute;inset:0;z-index:8;border:0;padding:0;background:transparent;cursor:pointer}
.hx-s.is-on .hx-hit{display:none}
.hx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hx-s .hx-in{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.25rem,3vw,3.5rem);align-items:center;height:100%;max-width:none;margin:0;padding:var(--pad)}
.hx-s img{-webkit-user-drag:none}
/* النصّ: يتأخّر قليلاً عن الشريحة ويخفت عند الخروج */
.hx-copy{min-width:0;position:relative;z-index:6;
  transform:translate3d(calc(var(--p) * -18%),0,0);opacity:calc(1 - var(--pa) * 1.35)}
.hx-k{display:flex;align-items:center;gap:0.5625rem;margin:0 0 1.125rem;
  font:var(--ui-w) 0.9375rem/1.3 var(--ui-font);color:var(--hx-acc)}
html[lang=ar] .hx-k{font-size:1rem}
.hx-k svg{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hx-h{margin:0 0 1.125rem;font-size:clamp(2.25rem,3.7vw,4rem);line-height:1.04;font-weight:650;
  letter-spacing:-.024em;color:var(--hx-ink);max-width:14ch;text-wrap:balance}
html[dir=rtl] .hx-h{line-height:1.2;letter-spacing:-.005em;max-width:15ch}
.hx-h em{display:block;font-style:normal;color:var(--hx-em)}
.hx-p{margin:0 0 1.75rem;max-width:44ch;font-size:clamp(0.96875rem,1.08vw,1.125rem);line-height:1.65;color:var(--hx-sub)}
.hx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 0.875rem}
.hx-note{font-size:0.875rem;color:var(--hx-sub)}

/* لونان للشرائح: الداكنة بتدرّج العلامة، والفاتحة على بياضٍ سماويّ */
.hx-s[data-theme=dark]{--hx-ink:#fff;--hx-em:var(--aqua);--hx-acc:var(--aqua);--hx-sub:rgba(255,255,255,.88)}
.hx-s[data-theme=light]{--hx-ink:var(--brand-ink);--hx-em:var(--sky);--hx-acc:var(--brand-deep);--hx-sub:#3c4658;color:var(--brand-ink)}
.hx-s[data-theme=dark] .button:not(.ghost){background:#fff;color:var(--brand-deep)}
.hx-s[data-theme=dark] .button:not(.ghost)::before{background:var(--sky-50)}
.hx-s[data-theme=dark] .button:not(.ghost):hover{color:var(--brand-deep);box-shadow:0 0.75rem 1.875rem -0.625rem rgba(4,30,70,.45)}
.hx-s[data-theme=dark] .button.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hx-s[data-theme=dark] .button.ghost::before{background:#fff}
.hx-s[data-theme=dark] .button.ghost:hover{color:var(--brand-deep);border-color:#fff}
.hx-s[data-theme=light] .button.ghost{background:rgba(255,255,255,.6)}

.hx-art{position:relative;min-width:0;height:min(29.375rem,calc(var(--ch) - 2 * var(--pad)));align-self:center}
.hx-art>*{will-change:transform}

/* ── ١ · واجهة العلامات: انظر كتلة 2026-09-22 (الواجهة) في آخر الملف ── */

/* ── ٢ · المستشار: ثلاث بطاقات زجاجية هي مخرجاته الثلاث ── */
.hx-s2 .hx-bg{background:linear-gradient(160deg,#f7fbff 0%,#eaf5fe 55%,#e3faf6 100%)}
.hx-blob{position:absolute;border-radius:50%;filter:blur(3.75rem);opacity:.55}
.hx-blob-a{width:46vw;aspect-ratio:1;inset-inline-end:-8vw;top:-18vw;background:#8fd3ff}
.hx-blob-b{width:30vw;aspect-ratio:1;inset-inline-end:26vw;bottom:-16vw;background:#8ff0e4}
.hx-s.is-on .hx-blob-a{animation:hx-drift 14s ease-in-out infinite alternate}
@keyframes hx-drift{to{translate:-4vw 3vw}}
.hx-plan{display:block}
.hx-card{position:absolute;display:flex;flex-direction:column;gap:0.625rem;padding:1.25rem 1.375rem;border-radius:var(--sharp);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.66));color:var(--brand-ink);
  box-shadow:0 1.875rem 3.75rem -1.75rem rgba(10,89,169,.45),0 0.125rem 0.375rem rgba(10,89,169,.08),inset 0 0 0 1px rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(1.125rem) saturate(160%);backdrop-filter:blur(1.125rem) saturate(160%)}
.hx-card>b{font:var(--ui-w) 0.875rem/1.2 var(--ui-font);color:var(--brand-deep)}
html[lang=ar] .hx-card>b{font-size:0.9375rem}
.hx-card p{margin:0;font-size:0.875rem;line-height:1.45;color:#4a5568}
.hx-card strong{font-weight:600;color:var(--brand-ink)}
.hx-c1{inset-inline-start:4%;top:4%;width:40%;align-items:flex-start;
  transform:translate3d(calc(var(--p) * -40%),0,0) rotate(-2deg)}
.hx-c2{inset-inline-end:2%;top:20%;width:42%;z-index:2;
  transform:translate3d(calc(var(--p) * -80%),0,0) rotate(1.5deg)}
.hx-c3{inset-inline-start:14%;bottom:4%;width:54%;z-index:3;
  transform:translate3d(calc(var(--p) * -120%),0,0)}
.hx-ring{position:relative;width:8.25rem;aspect-ratio:1;margin:0.125rem 0}
.hx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hx-ring circle{fill:none;stroke:var(--sky-100);stroke-width:10}
.hx-ring .hx-ring-v{stroke:var(--sky);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.hx-s.is-on .hx-ring-v{animation:hx-ring 1.4s .25s var(--ease) forwards}
@keyframes hx-ring{to{stroke-dashoffset:22}}
.hx-ring span{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.hx-ring strong{font:600 2.125rem/1 var(--fn)}
.hx-ring small{font-size:0.78125rem;color:#4a5568}
.hx-c1 p strong{font-family:var(--fn);font-size:1.125rem}
.hx-week{display:grid;grid-template-columns:repeat(7,1fr);gap:0.375rem;height:3.5rem;align-items:end}
.hx-week i{display:block;height:30%;border-radius:var(--sharp);background:var(--sky-100)}
.hx-week i.on{height:100%;background:linear-gradient(180deg,var(--sky),#0b78d2)}
.hx-s.is-on .hx-week i.on{animation:hx-bar .9s var(--ease) both}
.hx-s.is-on .hx-week i:nth-child(3){animation-delay:.08s}.hx-s.is-on .hx-week i:nth-child(5){animation-delay:.16s}
.hx-s.is-on .hx-week i:nth-child(6){animation-delay:.24s}
@keyframes hx-bar{from{transform:scaleY(.3);transform-origin:bottom}to{transform:none;transform-origin:bottom}}
.hx-supp{display:flex;align-items:center;gap:0.875rem}
.hx-supp img{width:4rem;height:auto;flex:none;filter:drop-shadow(0 0.625rem 0.625rem rgba(4,30,70,.22))}
.hx-supp p{display:grid;gap:0.1875rem}
.hx-supp strong{font-size:0.96875rem}
.hx-supp span{font-size:0.84375rem;color:var(--aqua-ink)}
.hx-tag{position:absolute;inset-inline-end:4%;bottom:8%;z-index:4;padding:0.4375rem 0.8125rem;border-radius:var(--sharp);
  font-size:0.78125rem;color:var(--brand-deep);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--sky-100)}

/* ── ٣ · التوصيل: شاحنة بألوان العلامة على طريقٍ يمرّ بمدن الضفة ── */
.hx-s3 .hx-bg{background:radial-gradient(56.25rem 30rem at 78% 108%,rgba(0,223,206,.28),transparent 60%),
  linear-gradient(135deg,#0a4c93 0%,#0a59a9 42%,#0b7fd9 100%)}
html[dir=rtl] .hx-s3 .hx-bg{background:radial-gradient(56.25rem 30rem at 22% 108%,rgba(0,223,206,.28),transparent 60%),
  linear-gradient(225deg,#0a4c93 0%,#0a59a9 42%,#0b7fd9 100%)}
.hx-min{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.875rem;margin:0.375rem 0 1.875rem}
.hx-min-l{font-size:clamp(1.0625rem,1.35vw,1.3125rem);color:var(--hx-sub)}
.hx-min-n{display:inline-flex;align-items:baseline;gap:0.5rem;color:#fff}
.hx-min-n b{font:600 clamp(4.75rem,7.6vw,8rem)/.9 var(--fn);letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff 30%,#bdf6ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-min-n small{font-size:clamp(1.25rem,1.7vw,1.75rem);font-weight:600;color:var(--aqua)}
.hx-drive{--vw:64%}
.hx-route{position:absolute;inset:2% 2% 44%;width:96%;height:54%;overflow:visible;
  transform:translate3d(calc(var(--p) * -20%),0,0)}
.hx-route path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hx-city{position:absolute;left:calc(2% + var(--cx) * .96);top:calc(2% + var(--cy) * .54);display:flex;align-items:center;gap:0.4375rem;
  translate:-50% -50%;font-size:0.8125rem;color:#fff;white-space:nowrap;
  transform:translate3d(calc(var(--p) * -20%),0,0)}
.hx-city i{width:0.75rem;height:0.75rem;border-radius:50%;background:var(--aqua);flex:none;
  box-shadow:0 0 0 0.3125rem rgba(0,223,206,.22),0 0 1.125rem rgba(0,223,206,.8)}
.hx-city>span{padding:0.25rem 0.625rem;border-radius:var(--sharp);background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hx-road{position:absolute;inset-inline-start:-8%;inset-inline-end:-60%;bottom:0;height:17%;border-radius:40% 0 0 0/100% 0 0 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%);mask:linear-gradient(90deg,transparent,#000 22%);
  background:linear-gradient(180deg,rgba(4,30,70,.55),rgba(4,30,70,.2));overflow:hidden}
html[dir=rtl] .hx-road{border-radius:0 40% 0 0/0 100% 0 0;-webkit-mask:linear-gradient(270deg,transparent,#000 22%);mask:linear-gradient(270deg,transparent,#000 22%)}
.hx-road i{position:absolute;inset-inline:0;top:46%;height:0.25rem;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 2.125rem,transparent 2.125rem 4.875rem)}
.hx-s.is-on .hx-road i{animation:hx-road 1.2s linear infinite}
@keyframes hx-road{to{background-position:-4.875rem 0}}
.hx-van{position:absolute;right:2%;bottom:8%;width:var(--vw);aspect-ratio:520/290;z-index:3;
  transform:translate3d(calc(var(--p) * -50%),0,0)}
.hx-van svg{display:block;width:100%;height:100%;overflow:visible}
.hx-van-logo{position:absolute;left:10%;top:24%;width:46%;height:16%;background:var(--brand-deep);
  -webkit-mask:url(../media/brand/mm-line-mask.png) center/contain no-repeat;mask:url(../media/brand/mm-line-mask.png) center/contain no-repeat}
.hx-s.is-on .hx-van{animation:hx-arrive 1.1s var(--ease) both}
@keyframes hx-arrive{from{translate:-34% 0}to{translate:0 0}}
.hx-s.is-on .hx-wheel{animation:hx-spin .55s linear infinite}
@keyframes hx-spin{to{transform:rotate(360deg)}}
.hx-man{position:absolute;right:calc(var(--vw) - 1%);bottom:5%;height:52%;aspect-ratio:160/300;z-index:4;
  transform:translate3d(calc(var(--p) * -80%),0,0)}
.hx-man svg{display:block;width:100%;height:100%}
.hx-box{position:absolute;bottom:5%;z-index:4;border-radius:var(--sharp);
  background:linear-gradient(180deg,#e0b27a,#c89456);box-shadow:0 0.625rem 1rem -0.5rem rgba(4,30,70,.5)}
.hx-box::after{content:'';position:absolute;inset-block:0;left:42%;width:16%;background:var(--sky)}
.hx-box-a{right:calc(var(--vw) + 11%);width:12%;aspect-ratio:1.2;transform:translate3d(calc(var(--p) * -90%),0,0)}
.hx-box-b{right:calc(var(--vw) + 13%);width:9%;aspect-ratio:1.1;bottom:calc(5% + 9.8%);transform:translate3d(calc(var(--p) * -90%),0,0) rotate(-6deg)}
.hx-s.is-on .hx-van,.hx-s.is-on .hx-man{will-change:transform}

/* ── ٤ و٥ · مكتبة التمارين ومكتبة البرامج: انظر كتلة «الشريحتان ٤ و٥» في آخر الملف ── */

/* ── التحكّم: النقاط تحت البطاقات، وزرّ الإيقاف بجانبها ── */
.hx-ui{position:relative;z-index:10;display:flex;align-items:center;gap:0.25rem;width:max-content;margin:0.875rem auto 0;
  padding:0.3125rem;border-radius:var(--sharp);background:rgba(255,255,255,.8);color:var(--brand-deep);
  -webkit-backdrop-filter:blur(1rem) saturate(160%);backdrop-filter:blur(1rem) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(10,89,169,.1),0 0.625rem 1.875rem -1rem rgba(10,89,169,.45)}
.hx-ui button{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;padding:0;
  background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,transform .2s ease}
.hx-ui button:hover{background:rgba(13,156,248,.1)}
.hx-ui button:active{transform:scale(.94)}
.hx-ui button:focus-visible{outline:0.125rem solid currentColor;outline-offset:-0.125rem}
.hx-ui svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-play .hx-i-play{display:none;fill:currentColor;stroke:none}
.hx-play[aria-pressed=true] .hx-i-play{display:block}
.hx-play[aria-pressed=true] .hx-i-pause{display:none}
.hx-dots{display:flex;align-items:center;gap:0;padding-inline:0.25rem}
.hx-ui .hx-dot{width:1.5rem}
.hx-dot i{position:relative;display:block;width:0.5rem;height:0.5rem;border-radius:var(--sharp);overflow:hidden;
  background:currentColor;opacity:.35;transition:width .5s var(--ease),opacity .3s ease}
.hx-ui .hx-dot[aria-current=true]{width:3.125rem}
.hx-dot[aria-current=true] i{width:2.25rem;opacity:1;background:var(--sky-100)}
.hx-dot[aria-current=true] i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--sky);
  transform-origin:left;transform:scaleX(1)}
html[dir=rtl] .hx-dot[aria-current=true] i::after{transform-origin:right}
.hx.is-auto .hx-dot[aria-current=true] i::after{animation:hx-fill var(--hx-dur,3000ms) linear both}
.hx.is-held .hx-dot[aria-current=true] i::after{animation-play-state:paused}
@keyframes hx-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ── المقاسات ── */
@media(max-width:1180px){
  .hx-card{padding:1rem 1.125rem}
  .hx-ring{width:7rem}
}
/* اللوحيّ العموديّ والجوّال: النصّ فوق والمشهد تحته بارتفاعٍ ثابت — لا تصغيرٌ لتصميم المكتب */
@media(max-width:1180px){.hx{--cw:calc(100vw - 7.5rem)}}
/* اللوحيّ العموديّ والجوّال: النصّ فوق والمشهد تحته داخل البطاقة — لا تصغيرٌ لتصميم المكتب */
@media(max-width:900px){
  .hx{--cw:calc(100vw - 4rem);--ch:43.75rem;--pad:1.875rem}
  .hx-s .hx-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1rem;align-items:start}
  .hx-h{max-width:18ch}
  .hx-art{height:100%;min-height:0;width:min(100%,35rem);justify-self:center}
  .hx-p{margin-bottom:1.25rem}
  .hx-ring{width:6rem}
  .hx-ring strong{font-size:1.75rem}
  .hx-c1{inset-inline-start:2%;top:0;width:40%}
  .hx-c2{inset-inline-end:2%;top:0;width:50%}
  .hx-c3{inset-inline-start:auto;inset-inline-end:2%;bottom:0;width:54%}
  .hx-week{height:2.75rem}
  .hx-tag{bottom:auto;top:-2%}
}@media(max-width:560px){
  .hx{--cw:calc(100vw - 2rem);--ch:33.75rem;--pad:1.25rem;padding-top:1rem}
  .hx-s{border-radius:var(--sharp);border-width:0.1875rem}
  .hx-s .hx-in{gap:0.625rem}
  .hx-s .hx-p{display:none}
  .hx-k{margin-bottom:0.75rem;font-size:0.84375rem}
  html[lang=ar] .hx-k{font-size:0.90625rem}
  .hx-h{font-size:clamp(1.8125rem,8.4vw,2.25rem);margin-bottom:0.75rem}
  .hx-p{font-size:0.90625rem;line-height:1.6;margin-bottom:1.125rem}
  .hx-cta{gap:0.625rem}
  .hx-cta .button{height:2.875rem;padding:0 1.25rem;font-size:0.90625rem}
  .hx-note{font-size:0.8125rem}

  .hx-min{margin:0 0 1.125rem;gap:0.125rem 0.625rem}
  .hx-min-n b{font-size:4.5rem}
  .hx-card{padding:0.75rem 0.8125rem;border-radius:var(--sharp);gap:0.375rem}
  .hx-card>b{font-size:0.78125rem}
  html[lang=ar] .hx-card>b{font-size:0.8125rem}
  .hx-card p{font-size:0.75rem}
  .hx-ring{width:4.875rem}
  .hx-ring strong{font-size:1.375rem}
  .hx-ring small{font-size:0.65625rem}
  .hx-c1 p strong{font-size:0.875rem}
  .hx-c1{width:44%;top:0}
  .hx-c2{width:52%;top:0}
  .hx-c3{width:52%;bottom:0}
  .hx-week{height:2.25rem;gap:0.25rem}
  .hx-supp img{width:2.625rem}
  .hx-supp strong{font-size:0.8125rem}
  .hx-supp span{font-size:0.71875rem}
  .hx-tag{display:none}
  .hx-city{font-size:0.6875rem;gap:0.3125rem}
  .hx-city>span{padding:0.1875rem 0.4375rem}
  .hx-city i{width:0.5625rem;height:0.5625rem}
  .hx-drive{--vw:68%}
}
@media(max-width:380px){
  .hx-cta .button{padding:0 1rem}
  .hx-ui .hx-dot{width:1.375rem}
  .hx{--ch:33.75rem}
}

@media(prefers-reduced-motion:reduce){
  .hx-copy,.hx-art>*,.hx-art .hx-card,.hx-pr{transform:none!important}
  .hx-s::after{transition:none}
  .hx-s .hx-pr,.hx-s .hx-blob-a,.hx-s .hx-road i,.hx-s .hx-van,.hx-s .hx-wheel{animation:none!important}
  .hx-ring-v{stroke-dashoffset:22}
}
@media(prefers-reduced-transparency:reduce){
  .hx-card,.hx-logo,.hx-ui,.hx-city>span{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hx-card,.hx-logo{background:#fff}
}

/* 60 إطاراً: لا طمس (backdrop-filter) داخل البطاقات المتحرّكة — كان يُعاد حسابه في كل إطار
   من حركة المروحة. الأسطح نفسها بلون أكثف قليلاً بدل الطمس. */
.hx-card,.hx-logo,.hx-city>span,.hx-tag{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hx-card{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.88))}
.hx-city>span{background:rgba(255,255,255,.18)}
.hx-s{contain:layout paint}
.hx-pr,.hx-van,.hx-man{will-change:transform}
/* ── الجولة 2026-09-19 (الثالثة): خلفيةٌ زرقاء فاتحة بضوءٍ خفيف كالتذييل وشعارٍ شفّاف جداً، بطاقةٌ بارزة بظلّ،
   وجارتان أخفض بزاوية ومرئيّتان على الجانبين. لا شريط نقاط تحت الهيرو (طلب المالك). ── */
.hx{background:
    radial-gradient(68.75rem 32.5rem at 12% -12%,rgba(13,156,248,.16),transparent 62%),
    radial-gradient(56.25rem 30rem at 90% -6%,rgba(0,223,206,.1),transparent 60%),
    linear-gradient(180deg,#f3f9ff 0%,#e6f2fe 100%)!important;padding-bottom:clamp(1.75rem,3vw,3rem)!important}
.hx-shade{display:none!important}
.hx-wash{background:rgba(13,156,248,.1)!important}
.hx-logo-bg{position:absolute;left:50%;top:50%;width:min(75rem,86vw);aspect-ratio:425/150;translate:-50% -50%;pointer-events:none;
  background:rgba(13,156,248,.06);
  -webkit-mask:url(../media/brand/mm-stacked-mask.png) center/contain no-repeat;mask:url(../media/brand/mm-stacked-mask.png) center/contain no-repeat}
.hx-stage{height:calc(var(--ch) + 1.875rem)!important}
.hx-s{transform-origin:50% 60%;box-shadow:0 1.125rem 2.5rem -1.625rem rgba(8,48,104,.45),0 0.375rem 0.875rem -0.625rem rgba(8,48,104,.25)!important}
.hx-s.is-on{box-shadow:0 2.875rem 5.625rem -2.25rem rgba(8,48,104,.62),0 1.125rem 2.25rem -1.125rem rgba(8,48,104,.35)!important}
.hx-s::after{background:rgba(6,34,76,.22)!important}

/* ── الجولة 2026-09-21: الهيرو على بياض الموقع نفسه (طلب المالك) وبطاقةٌ أكبر.
   الخلفية الزرقاء والشعار الشبح شيلا: المساحة كلّها بيضاء كبقيّة الصفحات، والعمق يأتي من ظلّ البطاقة وحده. ── */
.hx{background:#fff!important}
.hx-logo-bg{display:none!important}
.hx-wash{background:rgba(13,156,248,.07)!important}
.hx{--cw:min(97.5rem,calc(100vw - 7.5rem))!important;--ch:clamp(35rem,calc(26vw + 15.625rem),47.5rem)!important}
/* ضبط بعد القياس: البطاقة أوسع من قبل لكن تبقى للجارتين إطلالةٌ من الجانبين، ومساحةٌ فوق المسرح تكفي
   ارتفاعهما الجديد فلا تُقصّ حوافّهما العليا. */
.hx{--cw:min(89.375rem,calc(100vw - 11.875rem))!important;--ch:clamp(33.75rem,calc(25vw + 15rem),45rem)!important;
  padding-top:clamp(2.125rem,3.4vw,3.625rem)!important}
.hx-stage{height:calc(var(--ch) + 3.25rem)!important}

/* ── 2026-09-22 (طلب المالك): لا خلفية ولا ظلال خلف الهيرو إطلاقاً، بطاقةٌ أمامية أكبر، ولا فراغَ فوقها.
   الجارتان أخفض من الأمامية (hero.js) فلا يظهر منهما شيءٌ فوق رأسها، والمسرح لا يحتاج مساحةً فوقه. ── */
.hx{background:#fff!important;padding-top:0.375rem!important;padding-bottom:clamp(1.25rem,2.4vw,2.25rem)!important}
.hx-wash,.hx-shade,.hx-logo-bg{display:none!important}
.hx-s,.hx-s.is-on{box-shadow:none!important}
.hx-s::after{background:rgba(6,34,76,.16)!important}
.hx{--cw:min(93.75rem,calc(100vw - 6.875rem))!important;--ch:clamp(35rem,calc(26vw + 15.625rem),47.5rem)!important}
.hx-stage{height:calc(var(--ch) + 0.375rem)!important}
.hdr.stuck{margin-bottom:0.5rem}

/* ── 2026-09-22 (الواجهة): الشريحة الأولى «علامات عالمية في مكان واحد» — واجهة عرضٍ لا رفّ.
   طلب المالك: الفكرة تبقى (منتجٌ من كل شركة) لكن أكبر وأفخم وتفاعلية:
     · أزرق العلامة الفاتح (لا الداكن) مع أخضرها، وضوءٌ نيونيّ خافت خلف المنتجات يفصل المتراكب منها؛
     · ثمانية منتجاتٍ سمّاها المالك في تكوينٍ مقصود: الرئيسي في الوسط، داعمان أمامه، ثم صفٌّ خلفي، والملابس في العمق؛
       كل منتجٍ رابطٌ لصفحته، يتقدّم عند التحويم ويُظهر اسمه وسعره؛
     · الشعارات الثمانية لا تدور: صفّان تحت المنتجات (٣ ثم ٥)، أكبر، زجاجٌ شفّاف بتوهّجٍ خافت، وكلٌّ منها رابطٌ
       لمنتجات علامته؛
     · منتجان ضخمان شبه شفّافين على طرفي البطاقة يملآن الفراغ؛ نصٌّ وأزرار أكبر.
   الأداء: لا backdrop-filter ولا blur حيّ — التوهّجات تدرّجاتٌ شعاعية، والحركة transform/opacity فقط.
   المارك-أب يولّده hero/showcase_build.py (الأسماء والأسعار من صفحات المنتجات نفسها). ── */
.hx{--ch:clamp(37.5rem,calc(27vw + 18.75rem),53.75rem)!important}

.hx-s1 .hx-bg{background:
    radial-gradient(64% 86% at 12% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(58% 78% at 70% 44%,rgba(255,255,255,.2),transparent 64%),
    radial-gradient(44% 58% at 98% 106%,rgba(0,223,206,.36),transparent 66%),
    linear-gradient(165deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
html[dir=rtl] .hx-s1 .hx-bg{background:
    radial-gradient(64% 86% at 88% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(58% 78% at 30% 44%,rgba(255,255,255,.2),transparent 64%),
    radial-gradient(44% 58% at 2% 106%,rgba(0,223,206,.36),transparent 66%),
    linear-gradient(195deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
.hx-s1 .hx-bg::before{content:'';position:absolute;inset:-10%;background-color:rgba(255,255,255,.06);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;
  transform:rotate(-10deg)}
/* (الجولة 35، المالك) المنتجان الجوّيان في خلفية الشريحة الأولى — «البلايز الشفّافة البيضاء» — أُزيلا */

/* النصّ: أكبر وأثقل وأوضح — المقاسات نفسها لكل الشرائح (انظر «نظام الهيرو الموحَّد» في آخر الملف) */
.hx-s .hx-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(1rem,2vw,2.5rem)}
.hx-s1 .hx-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.hx-s .hx-k{margin-bottom:1.375rem;font-size:1.0625rem}
.hx-s[data-theme=dark] .hx-k{color:#c9fff6}
html[lang=ar] .hx-s .hx-k{font-size:1.125rem}
.hx-s .hx-k svg{width:1.375rem;height:1.375rem}
.hx-s .hx-h{margin-bottom:1.375rem;max-width:none;font-size:clamp(2.75rem,4.35vw,5.125rem);line-height:1.01;font-weight:700;letter-spacing:-.032em}
.hx-s[data-theme=dark] .hx-h{text-shadow:0 0.125rem 1.625rem rgba(3,52,120,.3)}
html[dir=rtl] .hx-s .hx-h{line-height:1.24;letter-spacing:0;font-size:clamp(2.625rem,4.1vw,4.875rem)}
.hx-s[data-theme=dark] .hx-h em{color:#bffff4}
.hx-s .hx-p{margin-bottom:2.125rem;max-width:41ch;font-size:clamp(1.0625rem,1.3vw,1.34375rem);line-height:1.6;font-weight:500}
.hx-s[data-theme=dark] .hx-p{color:#fff;text-shadow:0 1px 0.875rem rgba(3,52,120,.28)}
.hx-s .hx-cta{gap:0.875rem 1rem}
.hx-s .hx-cta .button{height:4rem;padding:0 2.375rem;font-size:1.15625rem;font-weight:650}

/* المسرح */
/* المسرح بنسبةٍ ثابتة (5:3) في كل المقاسات: مواضع المنتجات نِسَبٌ منه، فيبقى التكوين نفسه ولا «تطفو» الملابس
   حين يضيق العمود. المسرح والشعارات كتلةٌ واحدة موسَّطة عمودياً. */
.hx-art.hx-show{display:grid;grid-template-rows:auto auto;align-content:center;gap:clamp(0.75rem,1.3vw,1.375rem);height:100%;align-self:stretch}
.hx-art.hx-show>*{will-change:auto}
.hx-set{position:relative;min-height:0;width:100%;aspect-ratio:5/3;max-height:calc(var(--ch) - 2 * var(--pad) - 12.8125rem);justify-self:center}
.hx-beam{position:absolute;left:50%;top:-16%;width:70%;height:128%;translate:-50% 0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 48%,rgba(255,255,255,.36),rgba(140,232,255,.15) 52%,transparent 72%)}
.hx-show .hx-floor{position:absolute;inset-inline:3%;bottom:-5%;height:24%;border-radius:50%;transform:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.5),rgba(190,240,255,.18) 46%,transparent 70%)}
.hx-show .hx-pr{position:absolute;left:var(--x);top:auto;bottom:var(--b);width:var(--w);height:auto;z-index:var(--z);display:block;
  filter:none;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:var(--sharp);
  transform:translate3d(calc(var(--mx,0) * var(--d) * -1.125rem),calc(var(--my,0) * var(--d) * -0.625rem),0);animation:none!important}
.hx-pr-in{position:relative;display:block;transform-origin:50% 100%;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.hx-pr-in img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 1.5rem 1.125rem rgba(3,40,96,.4)) drop-shadow(0 0.1875rem 0.3125rem rgba(3,40,96,.26))}
.hx-pr-glow{position:absolute;left:50%;top:50%;z-index:-1;width:165%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  pointer-events:none;opacity:.7;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(closest-side,rgba(0,223,206,.5),rgba(0,223,206,.15) 50%,transparent 72%)}
.hx-pr[data-glow=w] .hx-pr-glow{background:radial-gradient(closest-side,rgba(222,248,255,.6),rgba(150,230,255,.17) 50%,transparent 72%)}
.hx-pr-main .hx-pr-glow{width:185%;opacity:.9;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(0,223,206,.3) 42%,rgba(0,223,206,.08) 60%,transparent 74%)}
.hx-s.is-on .hx-pr-main .hx-pr-glow{animation:hx-breathe 5.5s ease-in-out infinite alternate}
@keyframes hx-breathe{from{opacity:.72}to{opacity:1}}
@keyframes hx-float{from{translate:0 0}to{translate:0 -0.5625rem}}
.hx-s.is-on .hx-fl img{animation:hx-float 7s ease-in-out infinite alternate;animation-delay:calc(var(--z) * -1.3s)}
/* دخولٌ واحد منسّق: الرئيسي أوّلاً ثم الصفوف إلى الخلف، ثم الشعارات. backwards فقط كي لا يحجب الحركةُ تحويمَ ما بعدها */
.hx-s1.is-on .hx-pr-in{animation:hx-rise .85s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc((5 - var(--z)) * 80ms + 60ms)}
/* الرئيسي (صورة LCP) لا يبدأ شفّافاً: يرتفع فقط — فيُرى من أوّل إطار حتى في تبويبٍ خلفيّ تتجمّد فيه الحركة */
.hx-s1.is-on .hx-pr-main .hx-pr-in{animation-name:hx-rise-main}
@keyframes hx-rise-main{from{transform:translate3d(0,1.375rem,0) scale(.96)}}
.hx-s1.is-on .hx-brand{animation:hx-rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.42s}
.hx-s1.is-on .hx-brow-5 .hx-brand{animation-delay:.52s}
@keyframes hx-rise{from{opacity:0;transform:translate3d(0,1.75rem,0) scale(.95)}}

/* بطاقة المعلومات: اسم المنتج وسعره، تظهر حين يتقدّم */
.hx-tip{position:absolute;left:50%;bottom:7%;z-index:3;display:grid;gap:0.1875rem;width:max-content;max-width:min(15.625rem,60vw);
  padding:0.6875rem 0.9375rem 0.75rem;border-radius:var(--glass-r);text-align:start;pointer-events:none;opacity:0;translate:-50% 0.625rem;
  color:var(--brand-ink);background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(238,248,255,.92));
  box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.18),0 1.125rem 2.25rem -1rem rgba(3,40,96,.6),0 0 1.75rem -0.375rem rgba(0,223,206,.55);
  transition:opacity .2s ease,translate .34s cubic-bezier(.2,.8,.2,1)}
.hx-tip small{font-size:0.78125rem;font-weight:600;color:var(--brand-deep)}
.hx-tip>b{font-size:0.9375rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}
html[lang=ar] .hx-tip>b{font-size:0.96875rem;letter-spacing:0}
.hx-tip-p{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:0.1875rem}
.hx-tip-n{font:650 1rem/1 var(--fn);color:var(--brand-ink);direction:ltr;unicode-bidi:isolate}
.hx-tip-n .cur{font-size:0.75rem;font-weight:500}
.hx-tip em{font-style:normal;font-size:0.8125rem;font-weight:600;color:var(--sky)}
.hx-pr-hmb .hx-tip,.hx-pr-tank .hx-tip{left:0;translate:0 0.625rem}
.hx-pr-shaker .hx-tip,.hx-pr-tee .hx-tip{left:auto;right:0;translate:0 0.625rem}
.hx-pr-tank .hx-tip,.hx-pr-tee .hx-tip{bottom:34%}
@media(hover:hover){
  .hx-show .hx-pr:hover{z-index:20}
  .hx-show .hx-pr:hover .hx-pr-in{transform:translate3d(0,-5%,0) scale(1.09)}
  .hx-show .hx-pr:hover img{animation-play-state:paused}
  .hx-show .hx-pr:hover .hx-pr-glow{opacity:1;transform:scale(1.2)}
  .hx-show .hx-pr:hover .hx-tip{opacity:1;translate:-50% 0}
  .hx-show .hx-pr:is(.hx-pr-hmb,.hx-pr-tank,.hx-pr-shaker,.hx-pr-tee):hover .hx-tip{translate:0 0}
}
.hx-show .hx-pr:focus-visible{z-index:20;outline:0.1875rem solid #fff;outline-offset:0.25rem}
.hx-show .hx-pr:focus-visible .hx-pr-in{transform:translate3d(0,-5%,0) scale(1.09)}
.hx-show .hx-pr:focus-visible .hx-tip{opacity:1;translate:-50% 0}
.hx-show .hx-pr:is(.hx-pr-hmb,.hx-pr-tank,.hx-pr-shaker,.hx-pr-tee):focus-visible .hx-tip{translate:0 0}
.hx-show .hx-pr:active .hx-pr-in{transform:translate3d(0,-2%,0) scale(1.04);transition-duration:.12s}

/* الشعارات: ٣ ثم ٥، زجاجٌ شفّاف بتوهّجٍ خافت، وكلٌّ منها رابطٌ لمنتجات علامته. الشعار أبيض فوق الأزرق
   (الملفّات شفّافة الخلفية) فيُقرأ بلا صندوقٍ مصمت خلفه. */
.hx-brands{position:relative;z-index:6;display:grid;gap:clamp(0.5rem,.85vw,0.8125rem)}
.hx-brow{display:grid;gap:clamp(0.5rem,.85vw,0.8125rem)}
.hx-brow-3{grid-template-columns:repeat(3,minmax(0,1fr));width:74%;margin-inline:auto}
.hx-brow-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hx-brand{--bh:clamp(3.375rem,4.5vw,4.625rem);position:relative;display:grid;place-items:center;height:var(--bh);padding:0 clamp(0.75rem,1.5vw,1.625rem);
  border-radius:var(--glass-r);-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.07) 55%,rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -0.625rem 1.125rem -0.75rem rgba(0,223,206,.4),
    0 0.75rem 1.875rem -1rem rgba(0,223,206,.75),0 0.5rem 1.125rem -0.875rem rgba(3,40,96,.5);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),background-color .25s ease,box-shadow .32s ease}
.hx-brow-3 .hx-brand{--bh:clamp(3.75rem,5vw,5.25rem)}
.hx-brand img{display:block;width:100%;height:calc(var(--bh) * .5);object-fit:contain;filter:brightness(0) invert(1);opacity:.96;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.hx-brand img[src*=superior14],.hx-brand img[src*=betterbodies]{height:calc(var(--bh) * .7)}
.hx-brand img[src*=gat]{height:calc(var(--bh) * .6)}
.hx-brand img[src*=evogen]{height:calc(var(--bh) * .3)}
.hx-brand img[src*=biotechusa]{height:calc(var(--bh) * .4)}
@media(hover:hover){
  .hx-brand:hover{transform:translate3d(0,-0.25rem,0) scale(1.045);background-color:rgba(255,255,255,.2);
    box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -0.75rem 1.25rem -0.75rem rgba(0,223,206,.6),
      0 1.125rem 2.375rem -0.875rem rgba(0,223,206,.95),0 0 1.625rem -0.25rem rgba(190,250,255,.6)}
  .hx-brand:hover img{transform:scale(1.06);opacity:1}
}
.hx-brand:active{transform:scale(.97);transition-duration:.1s}
.hx-brand:focus-visible{outline:0.1875rem solid #fff;outline-offset:0.1875rem}

/* ── المقاسات ── */
@media(max-width:1199px){
  .hx-s1 .hx-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .hx-s .hx-cta .button{height:3.625rem;padding:0 1.875rem;font-size:1.09375rem}
}
@media(max-width:1100px){
  .hx-s .hx-h,html[dir=rtl] .hx-s .hx-h{font-size:clamp(2.375rem,4.4vw,3rem)}
  .hx-s .hx-p{font-size:1.03125rem;margin-bottom:1.625rem}
  .hx-s1 .hx-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .hx-s .hx-cta{gap:0.625rem}
  .hx-s .hx-cta .button{height:3.375rem;padding:0 1.25rem;font-size:1rem}
  .hx-brand{padding:0 0.625rem}
}
/* اللوحيّ العموديّ والجوّال: النصّ فوق، ثم المنتجات، ثم الشعارات — والبطاقة أطول لتتّسع لها */
@media(max-width:900px){
  .hx{--ch:58.75rem!important;--pad:1.875rem}
  .hx-s .hx-in,.hx-s1 .hx-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:1.125rem}
  .hx-s .hx-h,html[dir=rtl] .hx-s .hx-h{font-size:clamp(2.5rem,7vw,3.5rem)}
  .hx-s .hx-p{margin-bottom:1.375rem}
  .hx-art.hx-show{width:min(100%,37.5rem);justify-self:center;align-content:end}
  .hx-set{max-height:none}
}
@media(max-width:560px){
  .hx{--ch:37.5rem!important;--pad:1.25rem}
  .hx-set{width:calc(100% + 1.5rem);margin-inline:-0.75rem}
  .hx-s .hx-in{gap:0.75rem}
  .hx-s .hx-k{margin-bottom:0.625rem;font-size:0.875rem}
  html[lang=ar] .hx-s .hx-k{font-size:0.9375rem}
  .hx-s .hx-h,html[dir=rtl] .hx-s .hx-h{font-size:clamp(2rem,9.4vw,2.5rem);margin-bottom:0.875rem}
  .hx-s .hx-cta{gap:0.625rem}
  .hx-s .hx-cta .button{height:3.125rem;padding:0 1.25rem;font-size:0.96875rem}
  /* الشعارات ٤ × ٢ على الجوّال: خمسةٌ في صفٍّ واحد تصغر حتى لا تُقرأ */
  .hx-brands{grid-template-columns:repeat(4,minmax(0,1fr));gap:0.4375rem}
  .hx-brow{display:contents}
  .hx-brand,.hx-brow-3 .hx-brand{--bh:2.75rem;padding:0 0.5rem;border-radius:var(--sharp)}
  .hx-tip{display:none}
  .hx-pr-in img{filter:drop-shadow(0 0.625rem 0.5625rem rgba(3,40,96,.4))}
}
@media(prefers-reduced-motion:reduce){
  .hx-show .hx-pr{transform:none!important}
  .hx-pr-in,.hx-pr-glow,.hx-brand,.hx-brand img,.hx-tip{transition:none!important}
  .hx-s1 .hx-pr-in,.hx-s1 .hx-brand,.hx-s1 .hx-pr-glow,.hx-s1 .hx-fl img{animation:none!important}
}

/* ═ نظام الهيرو الموحَّد (2026-09-22، طلب المالك): الشريحة الأولى مرجعُ المقاس، والبقيّة عليه قبل أيّ صقلٍ تفصيليّ.
   المشترك بين الشرائح الأربع: ارتفاع البطاقة وحشوتها، عمود النصّ (يبدأ من الحافّة نفسها ويتوسّط عمودياً)، العنوان
   والنصّ الداعم وأزرار الدعوة بالمقاسات نفسها أعلاه (‎.hx-s‎)، والمشهد يملأ ارتفاع البطاقة كلّه بدل 470px.
   لكلّ شريحةٍ تكوينها ومفهومها كما هما — الذي تغيّر هو المقياس: بطاقات المستشار، الشاحنة، خاتم الأصالة ومنتجاته
   كبرت لتشغل المساحة كما تشغلها منتجات الشريحة الأولى. الأزرق الفاتح للعلامة في الشريحتين الداكنتين معاً. ═ */
.hx-s .hx-art{height:100%;align-self:stretch}
.hx-s .hx-note{font-size:1rem;font-weight:500}
.hx-s .hx-min{margin:0.25rem 0 2.125rem;gap:0.375rem 1rem}
.hx-s .hx-min-l{font-size:clamp(1.125rem,1.4vw,1.4375rem);font-weight:500}
.hx-s .hx-min-n b{font-size:clamp(5.25rem,8vw,8.5rem)}
.hx-s .hx-min-n small{font-size:clamp(1.375rem,1.9vw,2rem)}
/* ٣ · التوصيل: أزرق العلامة الفاتح نفسه (كان كحلياً)، وظلٌّ أزرق أعمق خلف النصّ كما في الأولى */
.hx-s3 .hx-bg{background:
    radial-gradient(64% 86% at 12% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(60% 70% at 78% 108%,rgba(0,223,206,.34),transparent 62%),
    linear-gradient(165deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
html[dir=rtl] .hx-s3 .hx-bg{background:
    radial-gradient(64% 86% at 88% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(60% 70% at 22% 108%,rgba(0,223,206,.34),transparent 62%),
    linear-gradient(195deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
@media(min-width:561px){
  /* ٢ · المستشار: البطاقات الثلاث أكبر بمحتواها */
  .hx-card{gap:0.875rem;padding:1.625rem 1.75rem}
  .hx-card>b{font-size:1.0625rem}
  html[lang=ar] .hx-card>b{font-size:1.125rem}
  .hx-card p{font-size:1.0625rem}
  .hx-ring{width:clamp(9.375rem,13vw,12.5rem);margin:0.25rem 0}
  .hx-ring circle{stroke-width:9}
  .hx-ring strong{font-size:clamp(2.375rem,3.2vw,3rem)}
  .hx-ring small{font-size:0.9375rem}
  .hx-c1 p strong{font-size:1.5rem}
  .hx-week{height:clamp(4.5rem,6.4vw,6.25rem);gap:0.5625rem}
  .hx-supp{gap:1.125rem}
  .hx-supp img{width:clamp(5.25rem,7vw,7rem)}
  .hx-supp strong{font-size:1.1875rem}
  .hx-supp span{font-size:1rem}
  .hx-tag{padding:0.5625rem 1rem;font-size:0.90625rem}
  .hx-c1{inset-inline-start:2%;top:4%;width:42%}
  .hx-c2{inset-inline-end:0;top:15%;width:47%}
  .hx-c3{inset-inline-start:10%;bottom:4%;width:62%}
  /* ٣ · التوصيل: شاحنةٌ أكبر، والمندوب بقامتها */
  .hx-drive{--vw:72%}
  .hx-man{height:auto;width:calc(var(--vw) * .3);bottom:4%}
  .hx-city{font-size:0.96875rem;gap:0.5625rem}
  .hx-city i{width:0.875rem;height:0.875rem}
  .hx-city>span{padding:0.375rem 0.8125rem}
  .hx-box-a{right:calc(var(--vw) + 12%)}
  .hx-box-b{right:calc(var(--vw) + 14%)}
}
@media(max-width:1100px) and (min-width:901px){
  .hx-card{padding:1.125rem 1.25rem;gap:0.625rem}
  .hx-card p{font-size:0.9375rem}
  .hx-supp strong{font-size:1rem}.hx-supp span{font-size:0.875rem}
  .hx-s .hx-note{font-size:0.90625rem}
}
@media(max-width:560px){
  .hx-s .hx-note{font-size:0.84375rem}
  .hx-s .hx-min{margin:0 0 1rem}
  .hx-s .hx-min-n b{font-size:4.5rem}
}

/* ═ إطارٌ زجاجيّ، ومروحةٌ داخل إطار الموقع (2026-09-22، طلب المالك) ═
   ٤) كانت حافّتا الجارتين تخرجان من الشاشة. المروحة الآن بعرض إطار الصفحة (حشوة الأقسام نفسها ‎--hx-gut‎)، والبطاقة
      الأمامية أضيق منه بإطلالتين (‎--hx-peek‎)، وhero.js يضع الجارتين بحيث تنتهي حافّتاهما عند حدّ الإطار تماماً.
   ٢) إطار كل شريحة زجاجٌ سائل: حزامٌ شفّاف رفيع (4px بعد أن طلب المالك تصغيره؛ كان 9px) فوق المحتوى — لمعةٌ قويّة في الزاويتين (الضوء يلتقط سماكة
      الزجاج) وشفافيةٌ في الوسط، ثم خيطٌ داخليّ مضيء وظلٌّ ناعم تحته يعطيان الحافّة عمقها. تدرّجات فقط، بلا
      backdrop-filter (البطاقات تتحرّك). الحوافّ (12px) كما هي. */
/* 2026-09-22 (طلب المالك): البياض على يمين الهيرو ويساره يُستغلّ — الجارتان تمتدّان فيه حتى حافّة إطار الموقع
   (هامشٌ صغير عن حافّة الشاشة، ولا تخرجان منه)، والبطاقة الأمامية بعرضها نفسه: الإطلالة 3.5vw ← 5.5vw والهامش 3.4vw ← 1.4vw. */
.hx{--hx-gut:clamp(0.625rem,1.4vw,1.625rem);--hx-peek:clamp(2.5rem,5.5vw,6.5rem);
  --cw:min(93.75rem,calc(100vw - 2 * var(--hx-gut) - 2 * var(--hx-peek)))!important}
.hx-fan{inset:0 var(--hx-gut)!important}
.hx-s{border:0!important}
.hx-s::before{content:'';position:absolute;inset:0;z-index:9;padding:0.25rem;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.42) 14%,rgba(255,255,255,.14) 38%,
      rgba(190,240,255,.2) 62%,rgba(255,255,255,.5) 86%,rgba(255,255,255,.92) 100%),
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hx-s .hx-in::after{content:'';position:absolute;inset:0.25rem;z-index:8;border-radius:0.5rem;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.62),0 0 0 0.25rem rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(3,52,120,.1),inset 0 0.625rem 1.25rem -0.75rem rgba(255,255,255,.6),inset 0 -0.875rem 1.625rem -1rem rgba(3,52,120,.22)}
.hx-s[data-theme=light]::before{background:
    linear-gradient(135deg,#fff 0%,rgba(255,255,255,.6) 14%,rgba(13,156,248,.12) 38%,rgba(0,223,206,.14) 62%,
      rgba(255,255,255,.6) 86%,#fff 100%),
    linear-gradient(180deg,rgba(13,156,248,.16),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(13,156,248,.14))}
.hx-s[data-theme=light] .hx-in::after{box-shadow:0 0 0 1px rgba(13,156,248,.28),0 0 0 0.25rem rgba(13,156,248,.04),
    inset 0 0 0 1px rgba(255,255,255,.9),inset 0 0.625rem 1.25rem -0.75rem #fff,inset 0 -0.875rem 1.625rem -1rem rgba(10,89,169,.2)}
@media(max-width:900px){.hx{--hx-gut:0.5rem;--hx-peek:1.625rem}}
@media(max-width:560px){.hx{--hx-gut:0.375rem;--hx-peek:1.125rem}
  .hx-s::before{padding:0.1875rem}.hx-s .hx-in::after{inset:0.1875rem}}

/* ═ الهيرو يتّسع لارتفاع الشاشة (2026-09-22، بلاغ المالك: على شاشته 1903×934 قُصّ أسفل الهيرو) ═
   كان ارتفاع البطاقة يُحسب من عرض الشاشة وحده (‎27vw + 300px‎)، فعلى شاشةٍ عريضة قصيرة يتجاوز ما تبقّى تحت الرأس.
   الآن يُحدّ أيضاً بارتفاع النافذة: البطاقة كلّها — بإطارها السفليّ — داخل الشاشة الأولى على أيّ مقاس مكتبيّ، من
   شاشةٍ كبيرة إلى لابتوب 1366×768. وكل ما بداخلها يتبع الارتفاع كما يتبع العرض (العنوان، النصّ، الأزرار، الحشوة،
   مسرح المنتجات والشعارات، بطاقات المستشار، الشاحنة) فلا يفيض شيءٌ ولا يتراكب حين تقصر البطاقة. القواعد واحدة
   للشرائح الأربع، فيبقى النظام موحَّداً. التخطيط العموديّ (≤900px) صفحةٌ تُمرَّر أصلاً فلا يُحدّ. */
@media(min-width:901px){
  .hx{--hx-top:11.625rem;
    --ch:clamp(26.25rem,min(calc(27vw + 18.75rem),calc(100vh - var(--hx-top))),53.75rem)!important;
    --pad:clamp(1.375rem,min(3vw,4.6vh),3.25rem)}
  @supports(height:100svh){.hx{--ch:clamp(26.25rem,min(calc(27vw + 18.75rem),calc(100svh - var(--hx-top))),53.75rem)!important}}
  .hx-s .hx-k{margin-bottom:clamp(0.625rem,2.4vh,1.375rem)}
  .hx-s .hx-h,html[dir=rtl] .hx-s .hx-h{font-size:clamp(2.375rem,min(4.35vw,calc(12vh - 1.875rem)),5.125rem);margin-bottom:clamp(0.75rem,2.4vh,1.375rem)}
  html[dir=rtl] .hx-s .hx-h{font-size:clamp(2.25rem,min(4.1vw,calc(11.4vh - 1.875rem)),4.875rem)}
  .hx-s .hx-p{font-size:clamp(0.96875rem,min(1.3vw,calc(1.2vh + 0.53125rem)),1.34375rem);margin-bottom:clamp(1.125rem,3.6vh,2.125rem)}
  .hx-s .hx-cta .button{height:clamp(3.125rem,8vh,4rem);padding:0 clamp(1.375rem,min(2.6vw,4.6vh),2.375rem);font-size:clamp(1rem,min(1.3vw,2.4vh),1.15625rem)}
  .hx-s .hx-min{margin:0.25rem 0 clamp(1rem,3.6vh,2.125rem)}
  .hx-s .hx-min-n b{font-size:clamp(4rem,min(8vw,15vh),8.5rem)}
  /* ١ · المسرح يحافظ على نسبته 5:3: إن قصرت البطاقة ضاق عرضه معها بدل أن تنضغط المنتجات فوق الشعارات */
  .hx-show{--bh5:clamp(2.75rem,min(4.5vw,7.8vh),4.625rem);--bh3:clamp(3rem,min(5vw,8.8vh),5.25rem);--bgap:clamp(0.5rem,.85vw,0.8125rem)}
  .hx-show .hx-brand{--bh:var(--bh5)}
  .hx-show .hx-brow-3 .hx-brand{--bh:var(--bh3)}
  .hx-art.hx-show{gap:clamp(0.625rem,2vh,1.375rem)}
  .hx-set{max-height:none;
    width:min(100%,calc((var(--ch) - 2 * var(--pad) - var(--bh3) - var(--bh5) - var(--bgap) - 1.625rem) * 5 / 3))}
  /* ٢ · بطاقات المستشار */
  .hx-card{gap:clamp(0.5rem,1.6vh,0.875rem);padding:clamp(0.875rem,2.9vh,1.625rem) clamp(1rem,3.1vh,1.75rem)}
  .hx-ring{width:clamp(6.75rem,min(13vw,21vh),12.5rem)}
  .hx-ring strong{font-size:clamp(1.75rem,min(3.2vw,5vh),3rem)}
  .hx-card p{font-size:clamp(0.875rem,1.9vh,1.0625rem)}
  .hx-c1 p strong{font-size:clamp(1.125rem,2.6vh,1.5rem)}
  .hx-week{height:clamp(3.125rem,min(6.4vw,10.5vh),6.25rem)}
  .hx-supp img{width:clamp(3.75rem,min(7vw,11.5vh),7rem)}
  .hx-supp strong{font-size:clamp(0.9375rem,2.1vh,1.1875rem)}
  .hx-supp span{font-size:clamp(0.8125rem,1.8vh,1rem)}
  /* ٣ · الشاحنة لا تعلو أكثر من نصف المسرح */
  .hx-drive{--vw:min(72%,calc((var(--ch) - 2 * var(--pad)) * .92))}
}
/* شاشةٌ مكتبية قصيرة (لابتوب): بطاقة «مكمّلاتك» تنزل تحت «برنامجك» بدل أن تغطّي أسفل «أرقامك» */
@media(min-width:901px) and (max-height:780px) and (max-width:1199px), (min-width:901px) and (min-aspect-ratio:1920/780) and (min-width:1200px){
  .hx-c2{top:5%}
  .hx-c3{inset-inline-start:36%;width:60%;bottom:3%}
  .hx-tag{inset-inline-end:auto;inset-inline-start:4%;bottom:5%}
}

/* ═ الشريحتان ٤ و٥ (2026-09-22، طلب المالك): مكتبة التمارين بدل الأصالة، ومكتبة البرامج خامسةً ═
   النظام واحد (‎.hx-s‎: البطاقة، العنوان، النصّ، الأزرار، الحشوة) ولكلّ شريحةٍ مشهدها:
   ٤) بطاقة تمرينٍ حقيقية كما في صفحات المكتبة — صورتا «البداية» و«النهاية» تتبادلان فيُفهم «كيف يُؤدّى» بلا قراءة —
      وخلفها بطاقتان أصغر (مكتبة)، وعدّاد التمارين. الصور من مكتبة الموقع نفسها، والبطاقات روابط لصفحاتها.
   ٥) خطّة أسبوعٍ من برنامجٍ حقيقي (دفع · سحب · أرجل — ستة أيام): سبعة أيام بتمارينها، وشريط الأسابيع
      (تأسيس ← بناء ← ذروة ← تفريغ) — أي «برنامجٌ كامل» لا تمرينٌ مفرد؛ فالفرق عن الرابعة واضحٌ من الصورة.
   الحركة: تبادل الصورتين وإضاءة يوم الأسبوع بمفاتيح CSS تعمل في الشريحة الظاهرة وحدها. لا backdrop-filter. */
.hx-s4 .hx-bg{background:linear-gradient(160deg,#f7fbff 0%,#eaf5fe 55%,#e3faf6 100%)}
.hx-s4 .hx-bg::before{content:'';position:absolute;inset:-10%;background-color:rgba(13,156,248,.06);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;
  transform:rotate(-10deg)}
.hx-s4 .hx-bg::after{content:'';position:absolute;width:min(50rem,60vw);aspect-ratio:1;border-radius:50%;inset-inline-end:-12%;top:-20%;
  background:radial-gradient(circle,rgba(0,223,206,.22),rgba(13,156,248,.12) 40%,transparent 66%)}
.hx-lib{position:relative}
.hx-ex{position:absolute;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--glass-r);text-decoration:none;color:var(--brand-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.9));-webkit-tap-highlight-color:transparent;
  box-shadow:0 1.875rem 3.75rem -1.75rem rgba(10,89,169,.5),0 0.125rem 0.375rem rgba(10,89,169,.08),inset 0 0 0 1px rgba(255,255,255,.9);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}
.hx-ex-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#1a2230}
.hx-ex-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx-ex-img .hx-f1{opacity:0}
.hx-ex-body{display:grid;gap:0.25rem;padding:clamp(0.625rem,1.6vh,1rem) clamp(0.75rem,1.9vh,1.125rem) clamp(0.75rem,1.9vh,1.125rem)}
.hx-ex-body b{font-size:clamp(0.9375rem,2.1vh,1.1875rem);font-weight:650;line-height:1.25;letter-spacing:-.01em}
.hx-ex-mus{font-size:clamp(0.78125rem,1.6vh,0.90625rem);font-weight:500;color:var(--brand-deep)}
.hx-ex-lvl{font-size:clamp(0.75rem,1.5vh,0.84375rem);color:#4a5568}
.hx-ex-step{position:absolute;inset-inline-start:0.75rem;top:0.75rem;display:inline-grid;align-items:center;height:2rem;padding:0 0.75rem 0 0.625rem;border-radius:var(--sharp);
  font-size:0.84375rem;font-weight:650;color:var(--brand-deep);background:rgba(255,255,255,.92);box-shadow:0 0.375rem 1rem -0.5rem rgba(4,30,70,.6);white-space:nowrap}
.hx-ex-step>*{grid-area:1/1}
.hx-ex-step i{display:none}
.hx-ex-step .hx-st1{opacity:0}
.hx-ex-main{inset-inline-start:27%;top:2%;width:62%;z-index:2}
.hx-ex-main .hx-ex-body b{font-size:clamp(1.125rem,2.6vh,1.5rem)}
.hx-ex-b{inset-inline-end:-2%;top:9%;width:36%;z-index:1;rotate:4deg;opacity:.96}
.hx-ex-c{inset-inline-start:-2%;bottom:1%;width:37%;z-index:1;rotate:-4deg}
html[dir=rtl] .hx-ex-b{rotate:-4deg}
html[dir=rtl] .hx-ex-c{rotate:4deg}
.hx-lib-n{position:absolute;inset-inline-end:4%;bottom:6%;z-index:4;display:grid;justify-items:center;padding:clamp(0.625rem,1.8vh,1rem) clamp(1rem,2.4vh,1.375rem);border-radius:var(--glass-r);
  color:#fff;background:linear-gradient(180deg,#43b6ff,#0d9cf8 55%,#0b8ae0);box-shadow:0 1.125rem 2.25rem -0.875rem rgba(13,156,248,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.hx-lib-n b{font:800 clamp(1.875rem,4.6vh,2.75rem)/1 var(--fn);letter-spacing:-.03em}
.hx-lib-n span{font-size:clamp(0.78125rem,1.7vh,0.9375rem);font-weight:600;opacity:.95}
/* البداية ← النهاية: 4.4 ثوانٍ للدورة، تتبادلان في الشريحة الظاهرة وحدها */
.hx-s4.is-on .hx-ex-main .hx-f1,.hx-s4.is-on .hx-ex-main .hx-st1{animation:hx-fin 4.4s ease-in-out infinite}
.hx-s4.is-on .hx-ex-main .hx-st0{animation:hx-st0 4.4s ease-in-out infinite}
@keyframes hx-st0{0%,38%{opacity:1}50%,88%{opacity:0}100%{opacity:1}}
@keyframes hx-fin{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
.hx-s4.is-on .hx-ex-b .hx-f1{animation:hx-fin 5.6s 1.2s ease-in-out infinite}
.hx-s4.is-on .hx-ex-c .hx-f1{animation:hx-fin 5.2s 2.3s ease-in-out infinite}
@media(hover:hover){
  .hx-ex:hover{transform:translate3d(0,-0.375rem,0) scale(1.03);box-shadow:0 2.5rem 4.375rem -1.75rem rgba(10,89,169,.6),0 0.125rem 0.375rem rgba(10,89,169,.1),inset 0 0 0 1px #fff;z-index:6}
}
.hx-ex:focus-visible{outline:0.1875rem solid var(--sky);outline-offset:0.1875rem;z-index:6}

/* ٥ · مكتبة البرامج: خطّة أسبوع */
.hx-s5 .hx-bg{background:
    radial-gradient(64% 86% at 12% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(50% 70% at 84% 100%,rgba(0,223,206,.34),transparent 62%),
    linear-gradient(165deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
html[dir=rtl] .hx-s5 .hx-bg{background:
    radial-gradient(64% 86% at 88% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(50% 70% at 16% 100%,rgba(0,223,206,.34),transparent 62%),
    linear-gradient(195deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
.hx-s5 .hx-bg::before{content:'';position:absolute;inset:-10%;background-color:rgba(255,255,255,.06);
  -webkit-mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;mask:url(../media/brand/mm-mark-mask.png) 0 0/9.375rem auto space;
  transform:rotate(-10deg)}
.hx-prog{position:relative;display:grid;align-content:stretch}
.hx-wk{position:relative;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(0.75rem,2vh,1.125rem);padding:clamp(1rem,2.6vh,1.5rem) clamp(1rem,2.6vh,1.5rem) clamp(0.875rem,2.2vh,1.25rem);border-radius:var(--glass-r);
  text-decoration:none;color:var(--brand-ink);background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.9));-webkit-tap-highlight-color:transparent;
  box-shadow:0 2.125rem 4.375rem -1.875rem rgba(3,40,96,.7),0 0.125rem 0.375rem rgba(3,40,96,.12),inset 0 0 0 1px rgba(255,255,255,.9);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}
.hx-wk-h{display:grid;gap:0.25rem}
.hx-wk-h b{font-size:clamp(1.0625rem,2.8vh,1.625rem);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.hx-wk-h span{font-size:clamp(0.78125rem,1.7vh,0.90625rem);font-weight:500;color:var(--brand-deep)}
/* أسبوعٌ في صفّين (٤ + ٣ والعدّاد): الصور تُقرأ، والبطاقة تملأ المسرح */
.hx-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-height:0;gap:clamp(0.375rem,.8vw,0.625rem)}
.hx-day{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;align-content:stretch;min-height:0;justify-items:center;gap:clamp(0.25rem,.9vh,0.5rem);padding:clamp(0.5rem,1.3vh,0.75rem) clamp(0.25rem,.5vw,0.4375rem) clamp(0.5rem,1.3vh,0.75rem);border-radius:var(--sharp);
  text-align:center;background:var(--sky-50);box-shadow:inset 0 0 0 1px rgba(13,156,248,.14)}
.hx-day i{font-size:clamp(0.65625rem,1.4vh,0.78125rem);font-style:normal;font-weight:600;color:#4a5568;text-transform:uppercase;letter-spacing:.02em}
html[lang=ar] .hx-day i{text-transform:none;letter-spacing:0}
/* الصورة مطلقةٌ داخل غلافٍ بلا ارتفاعٍ ذاتيّ: لا تُطوِّل البطاقة بحجمها، بل تملأ ما يفيض من ارتفاع المسرح */
.hx-day-p{position:relative;display:block;width:100%;min-height:0;justify-self:stretch}
.hx-day img{position:absolute;inset:0;width:100%;height:100%;border-radius:calc(var(--sharp) - 0.25rem);object-fit:cover;box-shadow:0 0 0 0.125rem #fff,0 0.375rem 0.75rem -0.375rem rgba(4,30,70,.5)}
.hx-day em{position:absolute;inset:0;display:block;border-radius:calc(var(--sharp) - 0.25rem);background:repeating-linear-gradient(45deg,rgba(13,156,248,.14) 0 0.25rem,transparent 0.25rem 0.5625rem);box-shadow:inset 0 0 0 0.09375rem rgba(13,156,248,.3)}
.hx-day b{font-size:clamp(0.75rem,1.9vh,1.03125rem);font-weight:700;line-height:1.1}
.hx-day small{font-size:clamp(0.625rem,1.3vh,0.71875rem);color:#4a5568}
.hx-day-rest{background:rgba(13,156,248,.05);box-shadow:inset 0 0 0 1px rgba(13,156,248,.08)}
.hx-day-rest b{color:#7b8797;font-weight:600}
.hx-day.is-now{background:linear-gradient(180deg,#43b6ff,#0d9cf8);box-shadow:0 0.875rem 1.75rem -0.75rem rgba(13,156,248,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.hx-day.is-now i,.hx-day.is-now b,.hx-day.is-now small{color:#fff}
.hx-wks{display:grid;grid-template-columns:3fr 4fr 4fr 1.4fr;gap:0.3125rem}
.hx-wks i{display:grid;gap:0.125rem;padding:clamp(0.4375rem,1.4vh,0.75rem) 0.5rem;border-radius:calc(var(--sharp) - 0.25rem);font-style:normal;text-align:center;font-size:clamp(0.65625rem,1.4vh,0.78125rem);font-weight:600;color:var(--brand-deep);
  background:var(--sky-50);box-shadow:inset 0 0 0 1px rgba(13,156,248,.14)}
.hx-wks b{font:700 clamp(0.8125rem,1.8vh,0.96875rem)/1.1 var(--fn);color:var(--brand-ink)}
.hx-wks .wb{background:#dff1ff}
.hx-wks .wc{background:linear-gradient(180deg,#43b6ff,#0d9cf8);color:#fff}.hx-wks .wc b{color:#fff}
.hx-wks .wd{background:#e3faf6;color:var(--aqua-ink)}
.hx-day-n{grid-template-rows:1fr auto;align-content:center;color:#fff;background:linear-gradient(180deg,#43b6ff,#0d9cf8 55%,#0b8ae0);box-shadow:0 0.875rem 1.75rem -0.75rem rgba(13,156,248,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.hx-day-n b{align-self:end;font:800 clamp(1.875rem,5.2vh,3.125rem)/1 var(--fn);letter-spacing:-.03em}
.hx-day-n small{color:#fff;font-weight:600;font-size:clamp(0.6875rem,1.5vh,0.84375rem);line-height:1.25;padding:0 0.25rem}
/* اليوم المضاء ينتقل عبر أيام التدريب — «اتّبع البرنامج» */
.hx-s5.is-on .hx-day:not(.hx-day-rest):not(.hx-day-n){animation:hx-dayoff 7.2s linear infinite}
.hx-s5.is-on .hx-day:nth-child(1){animation-delay:0s}.hx-s5.is-on .hx-day:nth-child(2){animation-delay:1.2s}.hx-s5.is-on .hx-day:nth-child(3){animation-delay:2.4s}
.hx-s5.is-on .hx-day:nth-child(4){animation-delay:3.6s}.hx-s5.is-on .hx-day:nth-child(5){animation-delay:4.8s}.hx-s5.is-on .hx-day:nth-child(6){animation-delay:6s}
@keyframes hx-dayoff{0%,16%{box-shadow:0 0.875rem 1.75rem -0.75rem rgba(13,156,248,.9),inset 0 0 0 0.125rem #0d9cf8}17%,100%{box-shadow:inset 0 0 0 1px rgba(13,156,248,.14)}}
@media(hover:hover){.hx-wk:hover{transform:translate3d(0,-0.375rem,0) scale(1.015);box-shadow:0 2.75rem 5rem -1.875rem rgba(3,40,96,.75),0 0.125rem 0.375rem rgba(3,40,96,.14),inset 0 0 0 1px #fff}}
.hx-wk:focus-visible{outline:0.1875rem solid #fff;outline-offset:0.25rem}

@media(max-width:1100px) and (min-width:901px){
  .hx-s4 .hx-in,.hx-s5 .hx-in{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
  /* لابتوب ضيّق وقصير: النصّ أطول سطراً بسطر، فتُضيَّق الفجوات قليلاً — لكلّ الشرائح معاً */
  .hx-s .hx-h,html[dir=rtl] .hx-s .hx-h{margin-bottom:1rem}
  .hx-s .hx-p{margin-bottom:1.25rem}
  .hx-ex-main{width:66%;inset-inline-start:24%}
  .hx-ex-b,.hx-ex-c{width:38%}
  .hx-days{gap:0.3125rem}
}
@media(max-width:900px){
  .hx-lib,.hx-prog{height:100%;min-height:0}
  .hx-ex-main{inset-inline-start:24%;top:2%;width:64%}
  .hx-ex-b{width:34%;top:12%}
  .hx-ex-c{width:34%;bottom:0}
  .hx-lib-n{bottom:2%}
}
@media(max-width:560px){
  .hx-ex-b,.hx-ex-c{display:none}
  .hx-ex-main{inset-inline-start:0;width:100%;top:0}
  .hx-ex-main .hx-ex-img{aspect-ratio:2/1}
  .hx-ex-lvl{display:none}
  .hx-drive{--vw:80%}
  .hx-lib-n{inset-inline-end:3%;bottom:auto;top:3%}
  .hx-wk{padding:0.875rem 0.75rem 0.75rem;gap:0.625rem}
  .hx-days{gap:0.25rem}
  .hx-day{padding:0.375rem 0.125rem}
  .hx-day-p,.hx-day small{display:none}
  .hx-day{grid-template-rows:auto auto;gap:0.1875rem;padding:0.4375rem 0.125rem}
  .hx-day-n{grid-template-rows:auto auto}
  .hx-wk-h b{font-size:1rem}
  .hx-day small{display:none}
  .hx-wks i{padding:0.3125rem 0.25rem}
  .hx-day-n b{font-size:1.625rem}
  .hx-prog{align-content:start;padding:0}
  .hx-wk{grid-template-rows:auto auto auto}
}
@media(prefers-reduced-motion:reduce){
  .hx-s4 .hx-f1,.hx-s4 .hx-st1,.hx-s4 .hx-st0,.hx-s5 .hx-day{animation:none!important}
  .hx-ex,.hx-wk{transition:none!important}
}

/* ‖ s97 begin ‖ */
/* ═ الجولة 33 (2026-09-25، طلب المالك): الشرائح الخمس على سمةٍ واحدة — ضوءٌ نيونيّ دائم ═
   المنطق الواحد: مصدر ضوءٍ واحد في كل شريحة — نيون بلون العلامة المائيّ (aqua ‎#00dfce‎) يأتي من الأرض ومن خلف
   الأشياء: خطّ الأرضية تحت المنتجات، هالةٌ خلف كل منتج وكل شعار وكل بطاقة، وتحت الأزرار ورقاقة العنوان. الشرائح
   الداكنة على الأزرق، والفاتحتان على الجليد؛ وشريحة المستشار تحمل الأخضر (هويّة المستشار) على النيون نفسه.
   الضوء خلف الأشياء دائماً (z أدنى) وبنسب شفافيةٍ منخفضة، فلا يمسّ الصور. لا backdrop-filter ولا blur حيّ.
   عنوان كل شريحة (السطر التمهيدي) أكبر وأيقونته في رقاقةٍ زجاجية مضيئة.
   الوسم: hero/showcase_build2.py (الأولى) وhero/hero_build33.py (٢–٥).
   عرض البطاقة الأمامية كما كان قبل الجولة (المالك أعاده 2026-09-25): ‎--hx-peek 5.5vw‎ والسقف 1500px من القاعدة الأقدم. */
/* الجولة 34 (المالك): النيون أزرقُ جليديّ على الشرائح ١ و٣ و٥ — «ما بدي الأخضر، بدي لون يليق بالسلايد زي الأزرق الفاتح» —
   وأخضر المستشار على ٢ (زرّها أخضر كذلك)، وسماويّ مخفَّف على ٤. */
.hx-s{--neon:160,226,255;--neon-core:#f4fbff}
/* نصوص الإبراز على الشرائح الداكنة (١ و٣ و٥): جليديّة كالنيون بدل النعناعيّ (#bffff4 / #c9fff6) */
.hx-s[data-theme=dark]{--hx-em:#c4ebff;--hx-acc:#c4ebff}
.hx-s[data-theme=dark] .hx-k{color:#e2f4ff}
.hx-s[data-theme=dark] .hx-h em{color:#c4ebff}
.hx-s2,.hx-s2[data-theme=light]{--neon:20,214,170;--neon-core:#f2fffb;--hx-em:#0a9c84;--hx-acc:#087f6c}
/* محتوى كل شريحة طبقةٌ دائمة: تلاشي المحتوى الراحل (§82) كان ينشئ طبقةً ويرسم البطاقة كلّها (1640×818 بظلالها) عند كل
   تبديل — إطارٌ متأخّر يبلغ 200ms — ثم يحذفها */
.hx-s .hx-in{will-change:opacity}
/* وطبقات المنتجات والشعارات دائمةٌ كذلك: دخولها (hx-rise) كان ينشئها ويرسم الصور بظلالها عند كل عودةٍ إلى الشريحة */
.hx-show .hx-pr-in,.hx-s1 .hx-brand{will-change:transform,opacity}
.hx-s4{--neon:13,156,248}

/* ── عنوان الشريحة (السطر التمهيدي): أكبر، وأيقونته في رقاقةٍ مضيئة ── */
.hx-s .hx-k{gap:0.875rem;font-size:clamp(1.125rem,min(1.35vw,2.8vh),1.4375rem);font-weight:600;letter-spacing:-.005em}
html[lang=ar] .hx-s .hx-k{font-size:clamp(1.1875rem,min(1.4vw,2.9vh),1.5rem)}
.hx-s .hx-k-ico{display:grid;place-items:center;flex:none;width:clamp(2.75rem,min(3.2vw,6.6vh),3.375rem);height:clamp(2.75rem,min(3.2vw,6.6vh),3.375rem);border-radius:0.9375rem;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.1) 55%,rgba(var(--neon),.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.28),0 0 0 1px rgba(var(--neon),.5),0 0 1.625rem -0.125rem rgba(var(--neon),.9)}
.hx-s .hx-k-ico svg{width:clamp(1.5625rem,min(1.85vw,3.8vh),1.9375rem);height:clamp(1.5625rem,min(1.85vw,3.8vh),1.9375rem)}
/* العربيّة على المكتب: العنوان أربعة أسطر في الشريحة ٢ — الرقاقة الأكبر أخرجت النصّ من البطاقة بـ7px على 1903×934 */
@media(min-width:901px){
  html[dir=rtl] .hx-s .hx-k{margin-bottom:clamp(0.5rem,1.8vh,1rem)}
  html[dir=rtl] .hx-s .hx-h{line-height:1.2}
  html[dir=rtl] .hx-s .hx-p{margin-bottom:clamp(1rem,3vh,1.75rem)}
}
.hx-s[data-theme=light] .hx-k-ico{background:linear-gradient(180deg,#fff,#f0f9ff 60%,rgba(var(--neon),.14));
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(var(--neon),.5),0 0 1.625rem -0.125rem rgba(var(--neon),.7)}
/* (الجولة 35، المالك) لا ضوء زائد من تحت الأيقونة: بلا شريط النيون تحتها ولا التوهّج النازل — توهّجها المتساوي يبقى */
.hx-s .hx-k-ico::after{content:none}
.hx-s .hx-k-ico{position:relative}

/* ── صفٌّ واحد بارتفاع البطاقة للشرائح ٢–٥: المشهد يأخذ ارتفاع الصفّ لا ارتفاع محتواه (كان يفيض تحت البطاقة على
   الشاشات القصيرة حين صار المشهد شبكةً لا عناصر مطلقة) ── */
.hx-s2 .hx-in,.hx-s3 .hx-in,.hx-s4 .hx-in,.hx-s5 .hx-in{grid-template-rows:minmax(0,1fr)}
.hx-s .hx-art{min-height:0}
.hx-plan,.hx-lib,.hx-drive,.hx-prog{min-height:0}
/* لابتوب قصير أو ضيّق: رقاقة العنوان والهوامش أصغر، والنصّ الداعم أصغر ثم يختفي حيث لا يتّسع (الحقائق والعنوان تكفي) */
@media(min-width:901px) and (max-height:760px) and (max-width:1199px), (min-width:901px) and (min-aspect-ratio:1920/760) and (min-width:1200px){
  .hx-s3 .hx-p{display:none}   /* 1536×730 بعد إعادة عرض البطاقة: العنوان ثلاثة أسطر والفقرة تُخرج النصّ من البطاقة بـ9px */
  .hx-s5 .hx-p{display:none}   /* (الجولة 34: «البرامج التدريبية» أطول بسطر — كانت تُخرج النصّ 16px على 1536×730) */
  .hx-s .hx-k{margin-bottom:0.5rem}
  .hx-s .hx-k-ico{width:2.25rem;height:2.25rem;border-radius:0.6875rem}
  .hx-s .hx-k-ico svg{width:1.3125rem;height:1.3125rem}
  .hx-s .hx-h,html[dir=rtl] .hx-s .hx-h{margin-bottom:0.625rem}
  .hx-s .hx-p{margin-bottom:0.875rem}
}
@media(min-width:901px) and (max-height:700px) and (max-width:1199px), (min-width:901px) and (min-aspect-ratio:1920/700) and (min-width:1200px){.hx-s2 .hx-p,.hx-s3 .hx-p,.hx-s5 .hx-p{display:none}}
@media(min-width:901px) and (max-height:640px) and (max-width:1199px), (min-width:901px) and (min-aspect-ratio:1920/640) and (min-width:1200px){.hx-s1 .hx-p,.hx-s4 .hx-p{display:none}}
@media(min-width:901px) and (max-width:1100px){
  html[lang=ar] .hx-s1 .hx-p{display:none}   /* 1024×700 بالعربيّة: العمود الأضيق يلفّ العنوان سطراً زائداً فيخرج النصّ من صفّه */
  .hx-s .hx-k{margin-bottom:0.5rem}
  .hx-s .hx-k-ico{width:2.25rem;height:2.25rem;border-radius:0.6875rem}
  .hx-s .hx-k-ico svg{width:1.3125rem;height:1.3125rem}
  .hx-s .hx-p{font-size:0.96875rem;margin-bottom:0.875rem}
  .hx-s .hx-cta{gap:0.5rem}
  .hx-s3 .hx-p,.hx-s5 .hx-p{display:none}
}

/* ── الأزرار: توهّجٌ نيونيّ دائم تحتها، في كل الشرائح ── */
.hx-s .hx-cta .button:not(.ghost){box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -0.125rem 0.375rem rgba(0,50,120,.22),0 0 0 1px rgba(var(--neon),.55),
  0 0.75rem 1.625rem -0.75rem rgba(13,156,248,.85),0 0 1.625rem -0.125rem rgba(var(--neon),.9),0 1.125rem 2.25rem -0.75rem rgba(var(--neon),.55)!important}
.hx-s .hx-cta .button.ghost{box-shadow:var(--glass-edge),0 0 0 1px rgba(var(--neon),.45),0 0 1.5rem -0.1875rem rgba(var(--neon),.8),0 0.875rem 1.875rem -0.875rem rgba(var(--neon),.45)!important}
.hx-s[data-theme=dark] .hx-cta .button.ghost{box-shadow:var(--glass-dark-edge),0 0 0 1px rgba(var(--neon),.5),0 0 1.5rem -0.1875rem rgba(var(--neon),.85),0 0.875rem 1.875rem -0.875rem rgba(var(--neon),.5)!important}

/* ── العلامة المائية: الشعار مرّةً واحدة، خافتاً، في زاوية الشريحة (٢–٥) ── */
.hx-wm{position:absolute;inset-inline-end:-5%;bottom:-9%;width:min(54%,40rem);aspect-ratio:425/150;pointer-events:none;
  background:rgba(255,255,255,.085);
  -webkit-mask:url(../media/brand/mm-stacked-mask.png) center/contain no-repeat;mask:url(../media/brand/mm-stacked-mask.png) center/contain no-repeat}
.hx-s[data-theme=light] .hx-wm{background:rgba(13,156,248,.075)}
.hx-s2 .hx-wm{background:rgba(20,180,150,.085)}
.hx-s4 .hx-bg::before,.hx-s5 .hx-bg::before{content:none}
.hx-s4 .hx-bg::after{content:none}

/* ═══ ١ · الواجهة (الجولة 34، طلب المالك) ═══
   رياضيّان بالملابس نفسها (صورتا المنتجين: الشخص لابسها) يقفان يميناً ويساراً بين المنتجات، كبيرين؛ إيزو واي زيرو
   (صورة المالك، بلا قطعة الشوكولاتة) أكبر في الوسط، والمنتجات عن يمينه وشماله أمام وركَي الرياضيَّين فتبقى طبعتا
   قميصيهما ظاهرتين؛ ضوءٌ واحد من خلف المجموعة كلّها (‎.hx-backlight‎)، لا ضوءَ لكل منتج، بأزرقٍ جليديّ.
   المسرح حاويةٌ بالحجم: الوحدة ‎--u‎ = أصغر ما بين 1% من ارتفاعه و1/184 من عرضه (صندوق 184 × 100، التكوين في
   ‎showcase_build2.py‎). لا حركة عند التحويم: تظهر بطاقة المعلومات فقط. */
.hx-s1 .hx-bg{background:
    radial-gradient(64% 86% at 12% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(58% 78% at 70% 44%,rgba(255,255,255,.2),transparent 64%),
    radial-gradient(44% 58% at 98% 106%,rgba(160,226,255,.42),transparent 66%),
    linear-gradient(165deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
html[dir=rtl] .hx-s1 .hx-bg{background:
    radial-gradient(64% 86% at 88% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(58% 78% at 30% 44%,rgba(255,255,255,.2),transparent 64%),
    radial-gradient(44% 58% at 2% 106%,rgba(160,226,255,.42),transparent 66%),
    linear-gradient(195deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
.hx-s1 .hx-in{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);grid-template-rows:minmax(0,1fr) auto;gap:clamp(0.625rem,1.8vh,1.375rem) clamp(1rem,2vw,2.5rem)}
.hx-s1 .hx-copy{grid-row:1}
.hx-art.hx-show{grid-column:2;grid-row:1;display:block;position:relative;height:100%;min-height:0;align-self:stretch}
.hx-set{position:absolute;inset:0;inset-inline-end:calc(0.25rem - var(--pad));width:auto;max-height:none;aspect-ratio:auto;justify-self:auto;
  container-type:size;--u:min(1cqh,calc(1cqw / 1.90))}
@media(min-width:901px){.hx-set{width:auto;max-height:none}}
/* العرض ‎max-content‎ والصورة بلا ‎max-width‎: عنصرٌ مطلق الموضع لا يتّسع أكثر ممّا بين موضعه وحافّة المسرح، فكانت
   قاعدة ‎img{max-width:100%}‎ العامّة تضغط صورة كلّ منتجٍ قرب الحافّة أفقياً (الشيكر سابقاً — «جاية بالطول» كما لاحظ المالك —
   وفي هذا التكوين الرياضيّ الأيمن والغلوتامين إلى 0.55 من نسبتهما). الآن النسبة نسبة الصورة دائماً (يفحصها r33_hero_check). */
.hx-show .hx-pr{left:calc(50% + var(--cx) * var(--u));right:auto;top:auto;bottom:calc(var(--b) * var(--u));width:max-content;height:calc(var(--h) * var(--u));
  translate:-50% 0;transform:none!important}
/* (الجولة 35، المالك) المسرح نفسه بالعربيّة: المنتجان والرياضيّان في المواضع نفسها لا معكوسين (كان الرجلان ينظران خارج
   المجموعة) — لا قاعدة ‎html[dir=rtl]‎ للمواضع؛ بطاقات المعلومات مثبّتةٌ بالجهات الفعليّة (أدناه) */
.hx-show .hx-pr-in{height:100%;transition:none}
.hx-show .hx-pr-in img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 1.125rem 1rem rgba(3,40,96,.4)) drop-shadow(0 0.1875rem 0.3125rem rgba(3,40,96,.24))}
/* (المالك: «ظلٌّ خفيف للرجلين») ظلٌّ ناعم أوضح قليلاً: قريبٌ يحدّد الحافّة وبعيدٌ يرفعهما عن الخلفيّة */
.hx-show .hx-pr-man .hx-pr-in img{filter:drop-shadow(0 0.1875rem 0.375rem rgba(3,30,80,.3)) drop-shadow(0 0.875rem 1.5rem rgba(3,30,80,.4))}
/* (الجولة 35، المالك) «بوب أب» خفيف عند التحويم: المنتج يعلو قليلاً ويكبر 4% بنابضٍ ناعم، ويعود حين يغادره المؤشّر
   (على الصورة لا على غلافها: حركة الدخول على الغلاف تثبّت آخر إطارٍ لها فتغلب أيّ تحويل) */
.hx-show .hx-pr-in,.hx-show .hx-pr:hover .hx-pr-in,.hx-show .hx-pr:focus-visible .hx-pr-in,.hx-show .hx-pr:active .hx-pr-in{transform:none}
.hx-show .hx-pr-in img{transform-origin:50% 100%;transition:transform .34s cubic-bezier(.34,1.5,.64,1)}
@media(hover:hover){
  .hx-show .hx-pr:hover .hx-pr-in img,.hx-show .hx-pr:focus-visible .hx-pr-in img{transform:translate3d(0,-2.5%,0) scale(1.04)}
  .hx-show .hx-pr-man:hover .hx-pr-in img,.hx-show .hx-pr-man:focus-visible .hx-pr-in img{transform:translate3d(0,-1.2%,0) scale(1.02)}
}
.hx-show .hx-pr:focus-visible .hx-pr-in img{transform:translate3d(0,-2.5%,0) scale(1.04)}
@media(prefers-reduced-motion:reduce){.hx-show .hx-pr-in img{transition:none;transform:none!important}}
.hx-s.is-on .hx-fl img{animation:none}
/* الدخول: الإيزو أوّلاً ثم المنتجات من الأقرب ثم الرياضيّان (z من 1 إلى 9) */
/* (الجولة 35، المالك: «المنتجات والشعارات تظهر ببطء — أسرع بكثير») الحركة 0.42 ثانية بدل 0.85، والتتابع 22ms بدل 55 —
   كلّ شيءٍ في مكانه خلال ~0.6 ثانية (كان ~1.3) */
.hx-s1.is-on .hx-pr-in{animation-duration:.42s;animation-delay:calc((9 - var(--z)) * 22ms)}
/* الرياضيّان لا يتقدّمان عند التحويم (المنتجات أمام وركيهما) — بطاقتهما عند كتفيهما نحو الحافّة الخارجية، حيث لا منتج أمامهما */
.hx-show .hx-pr-man:hover,.hx-show .hx-pr-man:focus-visible{z-index:var(--z)}
/* ضوءٌ واحد خلف المجموعة: قلبٌ أبيض خلف الإيزو يذوب إلى الأزرق الجليديّ حتى الرياضيَّين، وخطّ أرضيةٍ مضيء تحت الصفّ */
/* (الجولة 35، المالك: «الضوء الأبيض بالضبط في منتصف المنتجات — هو أعلى») قلب الضوء كان عند 71 من 100 (أعلى العلبة)؛ الآن
   عند منتصف ارتفاع المنتجات (47 = نصف علبة الإيزو، أعلى المنتجات الصغيرة) وفوق مركز العلبة أفقياً (‎--cx‎ من showcase_build2) */
/* (المالك، أخيراً: «أخفت — كبيرٌ ولامعٌ جدّاً، وعند يساره وأسفله خطوطٌ كنهاية الضوء») الخطوط كانت حوافّ صندوق الضوء: التدرّج لم
   يبلغ الصفر عندها (نصف قطرٍ أعرض من نصف الصندوق، وأسفله تحت الأرضيّة). الآن الصندوق من الأرضيّة إلى أعلى العلبة (0–94) وبعرض
   المسرح، والتدرّجان يبلغان الصفر داخله (‎closest-side‎ ودوائر أصغر من نصفه) — لا حافّة تُرى؛ والقلب أبيض 80% أصغر وأخفت */
.hx-backlight{position:absolute;left:calc(50% + var(--cx,0) * var(--u));bottom:0;width:calc(190 * var(--u));height:calc(94 * var(--u));translate:-50% 0;
  z-index:0;pointer-events:none;
  /* (المالك: «ألمع قليلاً») قلبٌ أبيض أنصع (95%) ولمعةٌ صغيرة في وسطه، والجليديّ أكثف قليلاً — والصندوق كما هو (بلا حوافّ) */
  background:radial-gradient(18% 24% at 50% 50%,#fff 0%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%),
    radial-gradient(34% 42% at 50% 50%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.66) 45%,rgba(255,255,255,0) 100%),
    radial-gradient(closest-side,rgba(var(--neon),.68) 0%,rgba(var(--neon),.38) 45%,rgba(var(--neon),.12) 75%,rgba(var(--neon),0) 100%)}
/* (القلب أعرض من الإيزو: ضوءٌ خلفيّ يُرى حافّةً مضيئة حول الصورة، لا خلفها — قلبٌ أضيق منها كان يختفي كلّه وراءها) */
/* (الجولة 35، المالك: «خطوط بيضاء غريبة») بلا خطّ الأرضيّة المضيء تحت المنتجات */
.hx-s1 .hx-neon{display:none}
.hx-neon{position:absolute;left:2%;right:2%;bottom:calc(-.6 * var(--u));height:0.25rem;border-radius:0.25rem;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(var(--neon),.95) 12%,var(--neon-core) 50%,rgba(var(--neon),.95) 88%,transparent);
  box-shadow:0 0 0.625rem 0.125rem rgba(var(--neon),.95),0 0 2.125rem 0.625rem rgba(var(--neon),.6),0 0 5.625rem 1.875rem rgba(var(--neon),.3)}
.hx-neon::before{content:'';position:absolute;left:6%;right:6%;bottom:-0.5rem;height:10.625rem;border-radius:50%;
  background:radial-gradient(50% 100% at 50% 100%,rgba(var(--neon),.55),rgba(var(--neon),.18) 45%,transparent 74%)}
/* شفق خلفيّة الشريحة (طبقة الجولة 20) بألوانٍ جليديّة وسماويّة بدل المائيّ والنعناعيّ — لا أخضر على الأولى */
.hx-s1 .aurora-l{--mm-aurora:repeating-linear-gradient(100deg,#0d9cf8 10%,#9fe0ff 15%,#6cc8ff 20%,#e2f6ff 25%,#0d9cf8 30%)}
/* بطاقة المعلومات: التقييم على المنتج الرئيسي؛ بطاقات الأطراف تنفتح نحو الداخل؛ توهّجها جليديّ */
.hx-tip{max-width:min(16.875rem,60vw);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(12,74,140,.18),0 1.125rem 2.25rem -1rem rgba(3,40,96,.6),0 0 1.75rem -0.375rem rgba(var(--neon),.7)}
.hx-tip-r{display:flex;align-items:center;gap:0.375rem;margin-top:1px;font:650 0.84375rem/1 var(--fn);color:var(--brand-ink)}
.hx-tip-r i{font-style:normal;color:#f5a623;letter-spacing:1px;font-size:0.8125rem;line-height:1}
.hx-pr-hmb .hx-tip,.hx-pr-tank .hx-tip,html[dir=rtl] .hx-pr-hmb .hx-tip,html[dir=rtl] .hx-pr-tank .hx-tip{inset-inline:auto;left:0;right:auto;translate:0 0.625rem}
.hx-pr-tee .hx-tip,.hx-pr-glut .hx-tip,html[dir=rtl] .hx-pr-tee .hx-tip,html[dir=rtl] .hx-pr-glut .hx-tip{inset-inline:auto;right:0;left:auto;translate:0 0.625rem}
.hx-show .hx-pr-glut:hover .hx-tip,.hx-show .hx-pr-glut:focus-visible .hx-tip{translate:0 0}
.hx-pr-tank .hx-tip,.hx-pr-tee .hx-tip{bottom:auto;top:5%}
/* الشعارات: صفٌّ واحد بعرض البطاقة (٨)؛ بألوان كل علامة على زجاجٍ أبيضَ مصقول (المالك: «استخدم ألوانه، واعطه شوية من
   تأثير الأبيض»)، وتحت كل رقاقةٍ خطّ نيونٍ جليديّ كخطّ الأرضية */
/* (الجولة 35، المالك) بلا إطار حول الشعارات، أصغر ممّا كانت (0.95 بعد أن طلب المالك تكبيرها قليلاً عن 0.85)، وكما كانت أوّلاً: ثلاثةٌ فوق وخمسةٌ تحتها، تحت المنتجات. كل شعارٍ
   بألوانه على ضوءٍ أبيض ناعمٍ بلا حوافّ (بقيّة «تأثير الأبيض» — بعض الشعارات زرقاء أو داكنة على خلفيّةٍ زرقاء) */
.hx-s1 .hx-copy{grid-row:1 / 3}
.hx-s1 .hx-brands{grid-column:2;grid-row:2;display:grid;gap:clamp(0.375rem,1.2vh,0.875rem);position:relative;z-index:6}
/* (الجولة 35، المالك: «ضوء النيون لا يبدو جيّداً، بعض الشعارات لا تُرى… ضع خطّ زجاجٍ سائل للثلاثة وللخمسة بقليلٍ من النيون،
   وكبّر الشعارات») كلّ صفٍّ شريطٌ من الزجاج السائل: أبيض مغبَّش شبه صافٍ (فيظهر الأزرق الفاتح والكحليّ على الأزرق)، بلمعةٍ في
   أعلاه وحافّةٍ بيضاء، وحوله توهّجُ نيونٍ جليديّ خفيف؛ لا ضوء خلف الشعار نفسه ولا ظلّ عليه — ألوانه كما هي. الشعارات 1.3 من
   مقاس الجولة 34 */
/* (المالك، بعدها: «أكثر زجاجاً سائلاً وأرفع بـ40%») الشريط طبقةٌ خلف الصفّ (‎::before‎) بارتفاع 60% من الصفّ في وسطه — الشعارات
   بمقاسها فوقه؛ زجاجٌ أشفّ بتغبيشٍ أقوى وتشبّعٍ وسطوع (يلتقط زرقة ما خلفه)، حافّةٌ عليا لامعة وسفلى مضيئة، ولمعةٌ طويلة على
   أعلاه (‎::after‎)، ونيونٌ جليديّ خفيف حوله */
.hx-s1 .hx-brow{display:grid;gap:clamp(0.125rem,.4vw,0.5rem);position:relative;padding:0 clamp(0.625rem,1.2vw,1.375rem)}
.hx-s1 .hx-brow::before,.hx-s1 .hx-brow::after{content:'';position:absolute;inset-inline:0;top:50%;pointer-events:none;border-radius:62.4375rem}
/* (المالك، ثالثاً: «الخطوط التي تقف عليها الشعارات أرفع بكثير») خطٌّ زجاجيّ رفيع (~10px) تقف عليه الشعارات — عند أسفل الشعار
   العاديّ (84% من الصفّ)، لا شريطٌ خلفها */
/* (المالك، رابعاً: «الخطّ في منتصف الشعارات لا تحتها، وأكثر زجاجاً سائلاً وأشفّ») الخطّ في وسط الصفّ خلف الشعارات؛ زجاجٌ
   أشفّ (أبيض 12–38%) بتغبيشٍ وسطوعٍ أقوى يلتقط الأزرق خلفه، حافّتان لامعتان ولمعةٌ طويلة، ونيونٌ أخفّ */
.hx-s1 .hx-brow::before,.hx-s1 .hx-brow::after{top:50%}
.hx-s1 .hx-brow::before{height:clamp(0.5rem,1.2vh,0.75rem);translate:0 -50%;
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.12) 60%,rgba(255,255,255,.3) 100%);
  -webkit-backdrop-filter:blur(0.875rem) saturate(2.2) brightness(1.22);backdrop-filter:blur(0.875rem) saturate(2.2) brightness(1.22);
  box-shadow:inset 0 0.09375rem 1px rgba(255,255,255,.95),inset 0 -0.09375rem 1px rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 -0.375rem 0.625rem -0.4375rem rgba(var(--neon),.9),0 0 0 1px rgba(var(--neon),.28),0 0 0.5625rem rgba(var(--neon),.45),0 0 1.375rem rgba(var(--neon),.22)}
.hx-s1 .hx-brow::after{height:clamp(0.5rem,1.2vh,0.75rem);translate:0 -50%;inset-inline:3%;
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 38%);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 70%,transparent)}
.hx-s1 .hx-brand{z-index:1}
/* (المالك، أخيراً: «أزل الخطوط خلف الشعارات، وكبّر الشعارات فقط») بلا خطّ — الشعارات 1.5 من مقاس الجولة 34 (كانت 1.3) بحافّتها البيضاء الرفيعة */
.hx-s1 .hx-brow::before,.hx-s1 .hx-brow::after{content:none}
.hx-s1 .hx-brow-3{grid-template-columns:repeat(3,minmax(0,1fr));width:64%;margin-inline:auto}
.hx-s1 .hx-brow-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hx-s1 .hx-brand,.hx-s1 .hx-brow-3 .hx-brand{--bh:calc(clamp(3.5rem,min(5.4vw,9vh),5.75rem) * 1.5);height:calc(var(--bh) * .74);position:relative;padding:0 clamp(0.25rem,.5vw,0.625rem);border-radius:0;
  background:none;box-shadow:none}
/* (قصيرة الارتفاع ≤700px: صفّا الشعارات كانا يضغطان مسرح المنتجات — على 1280×620 صار أعرض من 2.6 ضعف ارتفاعه) */
@media(min-width:1101px) and (max-height:700px) and (max-width:1199px), (min-width:1101px) and (min-aspect-ratio:1920/700) and (min-width:1200px){.hx-s1 .hx-brand,.hx-s1 .hx-brow-3 .hx-brand{--bh:calc(clamp(2.5rem,8vh,3.5rem) * 1.3)}}
.hx-s1 .hx-brand::before,.hx-s1 .hx-brand::after{content:none}
.hx-s1 .hx-brand img{height:calc(var(--bh) * .5);max-width:100%;object-fit:contain;filter:none}
/* (المالك: «بعض الشعارات لا تُرى») شعار BiotechUSA أزرقُ فاتح على الأزرق: حافّةٌ بيضاء رفيعة حول حروفه وحدها (ألوانه كما هي) */
/* (المالك: «إطارٌ أبيض رفيع حول الشعارات — لا تبالغ») حافّةٌ بيضاء ~1px تتبع شكل كلّ شعار؛ BiotechUSA معها وهجٌ خفيف */
.hx-s1 .hx-brand img{filter:drop-shadow(0 0 .9px #fff) drop-shadow(0 0 .9px #fff)}   /* (المالك: «أثقل شوي» — .6→.9px) */
/* (BiotechUSA: الشعار الأسود الذي أرسله المالك — بالحافّة البيضاء نفسها، بلا وهج) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hx-s1 .hx-brow::before{background:#fff}}
.hx-s1 .hx-brand img[src*=superior14],.hx-s1 .hx-brand img[src*=betterbodies]{height:calc(var(--bh) * .68)}
.hx-s1 .hx-brand img[src*=gat]{height:calc(var(--bh) * .58)}
.hx-s1 .hx-brand img[src*=evogen]{height:calc(var(--bh) * .3)}
.hx-s1 .hx-brand img[src*=biotechusa]{height:calc(var(--bh) * .42)}
.hx-s1.is-on .hx-brand{animation-duration:.38s;animation-delay:.12s}
.hx-s1.is-on .hx-brow-5 .hx-brand{animation-delay:.17s}
@media(hover:hover){
  .hx-s1 .hx-brand:hover{transform:translate3d(0,-0.1875rem,0) scale(1.04);background-color:transparent;box-shadow:none}
}
/* (الجولة 35، المالك: «الشعارات أكبر 30%، والمسافة بين الثلاثة والخمسة أقلّ، ووسطها تحت علبة الإيزو تماماً»)
   كانت كلّ الشعارات العريضة محصورةً بعرض خانتها (145px) فلا يكبّرها المقاس؛ الآن الصفّان سطران مرنان والشعار بعرضه الطبيعيّ من
   وحدةٍ على عرض العمود (‎--lw = 22cqw‎، ≤ 20vh على الشاشات القصيرة) — ~1.3 من المرئيّ قبلها (189 بدل 145px على 1903)، ومجموع
   الصفّ الخامس ≤ عرض العمود. والصفّان ينزاحان حتى يكون وسطهما وسط العلبة: المسرح أعرض من العمود بـ‎pad − 4px‎ جهة نهاية
   السطر (≥901px)، والعلبة عند ‎--tubx‎ (5.5) من وسطه بوحدة المسرح (عرضه ÷ 190). */
/* (‎--tubx‎ في الوسم: وسط مجموعة المنتجات — showcase_build2؛ 5.5 هنا احتياطٌ فقط) */
.hx-s1 .hx-brands{container-type:inline-size;row-gap:clamp(0.125rem,.8vh,0.625rem);--lw:min(22cqw,20vh);--ext:calc(var(--pad) - 0.25rem);--tubx:5.5;
  --dy:clamp(0.375rem,1.4vh,1rem);translate:calc(var(--ext) / 2 + var(--tubx) * (100% + var(--ext)) / 190) var(--dy)}   /* (--dy: «أنزلها قليلاً») */
html[dir=rtl] .hx-s1 .hx-brands{translate:calc(var(--tubx) * (100% + var(--ext)) / 190 - var(--ext) / 2) var(--dy)}
.hx-s1 .hx-brands .hx-brow,.hx-s1 .hx-brands .hx-brow-3{display:flex;justify-content:center;align-items:center;width:auto;margin:0;padding:0;gap:clamp(0.375rem,1cqw,0.875rem)}
/* (المالك: «أبعد عن بعضها، يميناً ويساراً خاصّة، وأكبر قليلاً، ونيونٌ خفيفٌ جدّاً خلفها») الصفّ الثالث 1.08 من الوحدة
   بفراغ 7cqw؛ الخامس بفراغ 3.2cqw (يبلغ ~96cqw — حدّه حافّة البطاقة، ووسطه تحت العلبة)؛ خلف كلّ شعارٍ ضوءٌ جليديّ خافت */
/* (المالك: «خطٌّ رفيعٌ جدّاً وخفيف خلف الشعارات، أبيض مع أزرق فاتح») خطٌّ 3px (ثمّ «أكبر قليلاً — أثخن وأطول») أعرض من الصفّ قليلاً، في وسطه، يذوب عند طرفيه، بوهجٍ جليديّ خافت */
.hx-s1 .hx-brands .hx-brow::before{content:"";position:absolute;inset-inline:3%;top:50%;height:clamp(0.3125rem,.75vh,0.5rem);translate:0 -50%;z-index:0;border-radius:0.125rem;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.62) 14%,rgba(196,235,255,.7) 50%,rgba(255,255,255,.62) 86%,rgba(255,255,255,0));
  box-shadow:0 0 0.625rem rgba(var(--neon),.35);-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}   /* (أثخن ~7px بحافّتين ناعمتين، بطوله الأوّل) */
/* (المالك: «خطّ صفّ الخمسة أطول من اليمين والشمال») يمتدّ 7% من عرض صفّه بعد أوّل شعارٍ وآخره */
.hx-s1 .hx-brands .hx-brow-5::before{inset-inline:-7%}
.hx-s1 .hx-brands .hx-brow-3{gap:7cqw}
.hx-s1 .hx-brands .hx-brow-3 .hx-brand{--w:calc(var(--lw) * 1.08)}
.hx-s1 .hx-brands .hx-brand::before{content:"";position:absolute;inset:-30% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--neon),.42) 0%,rgba(var(--neon),.16) 55%,rgba(var(--neon),0) 100%)}
.hx-s1 .hx-brands .hx-brand{--w:var(--lw);height:auto;width:auto;padding:0;flex:none}
.hx-s1 .hx-brands .hx-brand img{width:var(--w);height:auto;max-width:none}
/* (الصفّ الخامس: وسطه تحت العلبة فعرضه ≤ ضعف ما بين العلبة وحافّة البطاقة ≈ 94cqw — الشعار .84 من الوحدة (~1.15 ممّا كان)
   بفراغاتٍ تُرى بينها؛ الصفّ الثالث بالوحدة كاملة (~1.29)) */
.hx-s1 .hx-brands .hx-brow-5{gap:3.2cqw}
.hx-s1 .hx-brands .hx-brow-5 .hx-brand{--w:calc(var(--lw) * .84)}
.hx-s1 .hx-brands .hx-brand:has(img[src*=superior14]){--w:calc(var(--lw) * .44)}
@supports not selector(:has(a)){.hx-s1 .hx-brands .hx-brand img[src*=superior14]{width:calc(var(--lw) * .44)}}

/* ═══ ٢ · المستشار: ثلاث بطاقاتٍ بحجم المسرح، بأرقام المستشار نفسه، وبالأخضر ═══ */
.hx-s2 .hx-bg{background:linear-gradient(160deg,#f6fcfa 0%,#e8f7f2 48%,#e6f3fe 100%)}
/* البقعتان بلا ‎filter:blur‎ (تدرّجٌ شعاعيّ ناعم بدله): التمويه على عنصرٍ بعرض 46vw كان يُرسم أوّل مرّةٍ تظهر الشريحة —
   إطارٌ متأخّر 110–130ms عند أوّل تبديلٍ تلقائيّ */
.hx-blob{filter:none;opacity:1}
.hx-s2 .hx-blob-a{background:radial-gradient(closest-side,rgba(157,240,218,.55),rgba(157,240,218,.22) 45%,transparent 72%)}
.hx-s2 .hx-blob-b{background:radial-gradient(closest-side,rgba(143,211,255,.55),rgba(143,211,255,.22) 45%,transparent 72%)}
/* الجولة 34 (المالك): كلّ ما في الشريحة يُضغط — بطاقة الأرقام إلى المستشار، البرنامج إلى صفحته، كلّ مكمّلٍ إلى صفحة منتجه،
   والوسم إلى المستشار؛ البروتين والكربوهيدرات والدهون حلقاتٌ كبيرة كحلقة السعرات؛ نصّ البرنامج والمكمّلات وصورها أكبر.
   المقاسات تتبع ارتفاع الخطّة (‎cqh‎ — الحاوية «plan») وتُسقَف بعرض البطاقة (‎cqw‎ — الحاوية «card»)، فتكبر مع كلّ شاشة
   بسلاسة؛ والمراتب في آخر الملفّ لا تقرّر إلا ما يُخفى حين يضيق المكان. */
.hx-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(0.625rem,1.4vh,1rem) clamp(0.625rem,1vw,1rem);height:100%;container-type:size;container-name:plan}
.hx-s2 .hx-card{position:static;inset:auto;width:auto;min-height:0;overflow:hidden;transform:none!important;container-type:inline-size;container-name:card;
  display:flex;flex-direction:column;align-items:stretch;gap:clamp(0.375rem,1.8cqh,0.8125rem);padding:clamp(0.625rem,2.6cqh,1.25rem) clamp(0.75rem,2.6cqh,1.25rem);border-radius:var(--glass-r);
  color:inherit;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  box-shadow:0 1.625rem 3.375rem -1.875rem rgba(10,89,169,.4),0 0.125rem 0.375rem rgba(10,89,169,.06),inset 0 0 0 1px rgba(255,255,255,.9),inset 0 -1.125rem 1.875rem -1.125rem rgba(var(--neon),.55),
    0 0 0 1px rgba(var(--neon),.55),0 0 2.125rem -0.25rem rgba(var(--neon),.7),0 1.375rem 2.75rem -1.375rem rgba(var(--neon),.45);transition:box-shadow .25s ease}
.hx-s2 a.hx-card{cursor:pointer}
@media(hover:hover){.hx-s2 a.hx-card:hover{box-shadow:0 1.625rem 3.375rem -1.875rem rgba(10,89,169,.45),0 0.125rem 0.375rem rgba(10,89,169,.08),inset 0 0 0 1px #fff,inset 0 -1.125rem 1.875rem -1rem rgba(var(--neon),.75),
    0 0 0 0.09375rem rgba(var(--neon),.9),0 0 2.5rem -0.125rem rgba(var(--neon),.9),0 1.375rem 2.75rem -1.25rem rgba(var(--neon),.55)}}
.hx-s2 a:focus-visible{outline:0.1875rem solid #087f6c;outline-offset:0.1875rem}
.hx-c1{grid-column:1;grid-row:1 / 3;justify-content:space-between}
.hx-c2{grid-column:2;grid-row:1;z-index:auto}
.hx-c3{grid-column:2;grid-row:2;z-index:auto}
.hx-s2 .hx-tag{grid-column:1 / -1;grid-row:3;position:static;justify-self:center;display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.875rem;
  font-size:clamp(0.75rem,1.7vh,0.84375rem);font-weight:600;color:#087f6c;text-decoration:none;background:rgba(255,255,255,.85);
  box-shadow:inset 0 0 0 1px rgba(var(--neon),.35),0 0 1.25rem -0.375rem rgba(var(--neon),.5);transition:box-shadow .2s ease,background .2s ease}
@media(hover:hover){.hx-s2 .hx-tag:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(var(--neon),.7),0 0 1.5rem -0.25rem rgba(var(--neon),.8)}}
.hx-s2 .hx-tag i{width:0.5rem;height:0.5rem;border-radius:50%;background:#14d6aa;box-shadow:0 0 0.625rem 0.125rem rgba(20,214,170,.7)}
.hx-card-h{display:grid;gap:0.125rem}
.hx-card-h b{font:600 clamp(0.875rem,2.7cqh,1.15625rem)/1.2 var(--ui-font);color:#087f6c}
.hx-card-h span{font-size:clamp(0.6875rem,2cqh,0.84375rem);line-height:1.35;color:#4a5568}
/* الأرقام: حلقة السعرات، ثم ثلاث حلقاتٍ للبروتين والكربوهيدرات والدهون (الغرامات في الوسط، والقوس = حصّتها من السعرات) */
/* (الجولة 35، المالك مرّتين: «الدوائر أكبر، وأرقامها وكلامها أكبر»، «وصور المنتجات أكبر وأوضح») الحلقة ~223px، الثلاث ~110 بأرقامٍ 27px وأسماءٍ 17px — الحلقة الكبرى ~188px على 1903 (كانت ~155)، والثلاث ~105 (~90)،
   وصور المكمّلات بارتفاع ~77px بعرضها الطبيعيّ (كانت في مربّعٍ 60px فتظهر العلبة الطويلة بعرض 31px) */
/* (2026-09-29، الصفحة تتصاغر مع الشاشة: كل لابتوب يرى تصميم 1920 بارتفاع 1920×h/w) خطّةٌ بين 600 و650px كانت تدفع
   مربّعات الأرقام حتى 25px خارج البطاقة، وبين 470 و540px حتى 14px: الحلقة لا تتجاوز ما يتركه ارتفاع الخطّة (64cqh − 202px
   و53cqh − 124px تحت 600) — على الخطط الأطول كما كانت */
.hx-s2 .hx-ring{width:clamp(5rem,min(36cqh,62cqw,calc(64cqh - 12.625rem)),15.625rem);margin:0 auto}
.hx-s2 .hx-ring circle{stroke:#e3f4ef;stroke-width:9}
.hx-s2 .hx-ring .hx-ring-v{stroke:#12cfa3}
.hx-s2 .hx-ring strong{font:700 clamp(1.1875rem,min(6.6cqh,12cqw),2.875rem)/1 var(--fn);letter-spacing:-.02em}
.hx-s2 .hx-ring small{font-size:clamp(0.625rem,min(2.3cqh,4.2cqw),1rem)}
.hx-mrings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(0.25rem,1.4cqh,0.75rem) clamp(0.1875rem,2cqw,0.625rem);justify-items:center}
.hx-mrings li{display:grid;justify-items:center;gap:clamp(1px,.5cqh,0.25rem);text-align:center;min-width:0}
.hx-mr{position:relative;display:grid;place-items:center;width:clamp(3rem,min(20cqh,31.5cqw),8.25rem);aspect-ratio:1}
/* (بطاقةٌ قصيرة — 1366×562: الحلقات الأكبر كانت تدفع مربّعات الأرقام 2px خارج البطاقة) */
@container plan (max-height:37.5rem){.hx-s2 .hx-ring{width:clamp(5rem,min(31cqh,54cqw,calc(53cqh - 7.75rem)),13.75rem)}.hx-mr{width:clamp(3rem,min(18cqh,30cqw),7.5rem)}}
@container plan (max-height:27.5rem){.hx-s2 .hx-ring{width:clamp(5rem,min(25cqh,46cqw),10.625rem)}.hx-mr{width:clamp(3rem,min(14.6cqh,27cqw),6.125rem)}}
.hx-mr svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hx-mr circle{fill:none;stroke:#e6f3ef;stroke-width:11}
.hx-mr .v{stroke:var(--mc);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p))}
.hx-s2.is-on .hx-mr .v{animation:hx-mring 1.2s .3s var(--ease) backwards}
@keyframes hx-mring{from{stroke-dashoffset:100}}
.hx-mr b{position:relative;font:700 clamp(0.8125rem,min(4cqh,7.2cqw),1.6875rem)/1 var(--fn);color:var(--brand-ink);letter-spacing:-.02em;white-space:nowrap}
.hx-mr b small{font-size:.6em;font-weight:600;margin-inline-start:1px;color:#4a5568}
.hx-mrings em{font:600 clamp(0.6875rem,min(2.6cqh,5cqw),1.0625rem)/1.15 var(--ui-font);font-style:normal;color:var(--brand-ink);white-space:nowrap}
.hx-mrings i{font:650 clamp(0.625rem,min(2.2cqh,4.2cqw),0.90625rem)/1 var(--fn);font-style:normal;color:#087f6c}
.hx-mrings li:nth-child(1){--mc:#12cfa3}
.hx-mrings li:nth-child(2){--mc:#0d9cf8}
.hx-mrings li:nth-child(3){--mc:#f2a33a}
.hx-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(0.25rem,1.2cqh,0.5rem)}
.hx-stats li{display:grid;gap:1px;padding:clamp(0.25rem,1.3cqh,0.5625rem) clamp(0.4375rem,1.5cqh,0.625rem);border-radius:0.625rem;background:#f2faf7;box-shadow:inset 0 0 0 1px rgba(20,214,170,.18)}
.hx-stats b{font:700 clamp(0.8125rem,2.7cqh,1.15625rem)/1.15 var(--fn);color:var(--brand-ink);letter-spacing:-.01em;white-space:nowrap}
.hx-stats span{font-size:clamp(0.65625rem,1.9cqh,0.8125rem);color:#4a5568}
/* البرنامج: الاسم والتفاصيل وبلاطات الأسبوع والجولات أكبر وأوضح (أسماء الأيام تُسقَف بعرض البطاقة كي لا تفيض) */
.hx-prog-n{display:grid;gap:0.125rem}
.hx-prog-n strong{font-size:clamp(0.875rem,min(3.3cqh,6.2cqw),1.375rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--brand-ink)}
.hx-prog-n span{font-size:clamp(0.6875rem,min(2.1cqh,4.1cqw),0.875rem);color:#4a5568}
.hx-s2 .hx-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(0.1875rem,.7cqw,0.3125rem);height:auto;align-items:stretch}
.hx-s2 .hx-week i{display:grid;gap:clamp(0.125rem,.6cqh,0.3125rem);justify-items:center;align-content:center;height:auto;padding:clamp(0.375rem,1.9cqh,0.875rem) 1px;border-radius:0.625rem;
  font-style:normal;text-align:center;background:#eef7f4;box-shadow:inset 0 0 0 1px rgba(20,214,170,.15);animation:none!important}
.hx-s2 .hx-week i.on{background:linear-gradient(180deg,#19dcae,#0aa88b);box-shadow:0 0.625rem 1.25rem -0.625rem rgba(20,214,170,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.hx-s2 .hx-week em{font:600 clamp(0.5625rem,min(1.75cqh,3.3cqw),0.75rem)/1 var(--ui-font);font-style:normal;color:#5b6675;text-transform:uppercase;letter-spacing:.02em}
html[lang=ar] .hx-s2 .hx-week em{text-transform:none;letter-spacing:0;font-size:clamp(0.5625rem,min(1.7cqh,2.95cqw),0.75rem)}
.hx-s2 .hx-week i.on em{color:rgba(255,255,255,.9)}
.hx-s2 .hx-week b{font:700 clamp(0.65625rem,min(2.15cqh,3.9cqw),0.90625rem)/1.1 var(--ui-font);color:var(--brand-ink)}
.hx-s2 .hx-week i.on b{color:#fff}
.hx-s2 .hx-week i.off b{color:#8a95a6;font-weight:600}
.hx-sets{font-size:clamp(0.6875rem,min(2.05cqh,3.9cqw),0.875rem);line-height:1.4;color:#4a5568}
.hx-sets b{font-weight:600;color:var(--brand-ink)}
/* المكمّلات: كلّ صفٍّ رابطٌ إلى صفحة المنتج؛ الصورة والاسم والجرعة والتوقيت أكبر */
.hx-supps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(0.25rem,1.1cqh,0.5rem);min-height:0}
.hx-supps a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(0.5rem,1.6cqh,0.75rem);padding:clamp(0.1875rem,1cqh,0.5rem) clamp(0.5rem,1.5cqh,0.6875rem);border-radius:0.75rem;
  color:inherit;text-decoration:none;background:#f2faf7;box-shadow:inset 0 0 0 1px rgba(20,214,170,.16);transition:background .2s ease,box-shadow .2s ease}
@media(hover:hover){.hx-supps a:hover{background:#e8f8f2;box-shadow:inset 0 0 0 1px rgba(20,214,170,.5),0 0 1.125rem -0.375rem rgba(20,214,170,.7)}}
.hx-supps img{height:clamp(2.5rem,12.5cqh,4.75rem);width:auto;max-width:none;margin-block:calc(-1 * clamp(0.1875rem,1cqh,0.5rem));object-fit:contain;filter:drop-shadow(0 0.375rem 0.5rem rgba(4,30,70,.22))}
/* (الجولة 35، المالك: «صور المنتجات بالحجم نفسه، أكبر، وبلا إطار») بلا إطار حول الصفوف (بلا خلفيّةٍ ولا حافّة)؛ كلّ صورةٍ بمساحةٍ
   مرئيّةٍ واحدة (‎--k‎ من hero_build33: العلبة العريضة كانت تبدو الأكبر بالارتفاع نفسه) في خانةٍ بعرضٍ واحد (فيبدأ الكلام من
   الخطّ نفسه)، وأكبر — تمتدّ في حشوة الصفّ ولا تطوّله؛ والصفوف أقرب */
.hx-supps{--sh:clamp(2.875rem,14.5cqh,5.625rem);gap:clamp(0.125rem,.5cqh,0.25rem)}
.hx-supps a,.hx-supps a:hover{background:none;box-shadow:none}
@media(hover:hover){.hx-supps a:hover{background:rgba(20,214,170,.07)}}
.hx-supps img{height:calc(var(--sh) * var(--k,1));width:calc(var(--sh) * .7);object-position:50% 50%}
.hx-supps a>span{display:grid;gap:1px;min-width:0}
.hx-supps strong{font-size:clamp(0.78125rem,min(2.5cqh,4.6cqw),1.0625rem);font-weight:650;line-height:1.2;color:var(--brand-ink)}
.hx-supps small{font-size:clamp(0.6875rem,min(2.05cqh,3.8cqw),0.875rem);line-height:1.3;color:#4a5568}
.hx-supps em{font:600 clamp(0.625rem,min(1.9cqh,3.5cqw),0.8125rem)/1.2 var(--ui-font);font-style:normal;color:#087f6c;padding:0.3125rem 0.5rem;border-radius:0.5rem;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(20,214,170,.3);white-space:nowrap;text-align:center}
.hx-s2 .hx-note{color:#087f6c}
/* زرّ «ابدأ مع المستشار» بأخضر النيون (المالك) — بنية الزرّ الأساسيّ نفسها: لمعةٌ علويّة وحافّة وملء التحويم؛ الأخضر بإضاءة
   الأزرق السماويّ للزرّ الأساسيّ نفسها (#10aa8c ≈ #0d9cf8) فيبقى تباين النصّ الأبيض كما في أزرار الموقع */
.hx-s2 .hx-cta .button:not(.ghost){
  background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),
             linear-gradient(180deg,#25d3ac 0%,#10aa8c 50%,#0a8e74 100%)!important;color:#fff!important;text-shadow:0 1px 1px rgba(0,70,55,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -0.125rem 0.375rem rgba(0,70,55,.25),0 0 0 1px rgba(var(--neon),.6),
    0 0.75rem 1.625rem -0.75rem rgba(10,142,116,.85),0 0 1.625rem -0.125rem rgba(var(--neon),.9),0 1.125rem 2.25rem -0.75rem rgba(var(--neon),.55)!important}
.hx-s2 .hx-cta .button:not(.ghost)::before{background:linear-gradient(180deg,#10aa8c,#07735f)!important}

/* ═══ ٣ · التوصيل (الجولة 34، طلب المالك) ═══
   الـ400 كبيرةٌ واضحة كما كانت أوّلاً (قواعد ‎.hx-min‎ الأصل)، بلا إطار، و«48 ساعة» و«10 محافظات» تحتها أصغر منها وبلا
   إطار؛ الخريطة بلا إطارٍ ولا حدود الضفة، خمس مدنٍ رئيسية فقط على خطٍّ واحدٍ صاعدٍ من الجنوب إلى الشمال بمسافاتٍ متساوية
   (الصعود بخطوط العرض الحقيقية)؛ السيارة والموظّف والشارع أكبر بكثير، والعجلات تدور (طبقتان مستقلّتان تدوران على
   المركِّب، بلا إعادة رسم)؛ النيون جليديّ كالأولى. في العربيّة يُقرأ الشريط والمشهد من اليمين (والشعار على السيارة لا ينقلب). */
.hx-s3 .hx-bg{background:
    radial-gradient(64% 86% at 12% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(60% 70% at 78% 108%,rgba(var(--neon),.36),transparent 62%),
    linear-gradient(165deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
html[dir=rtl] .hx-s3 .hx-bg{background:
    radial-gradient(64% 86% at 88% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(60% 70% at 22% 108%,rgba(var(--neon),.36),transparent 62%),
    linear-gradient(195deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
.hx-s3 .hx-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
/* الأرقام */
.hx-s3 .hx-min{margin:0 0 clamp(0.375rem,1.2vh,0.75rem);row-gap:0}
.hx-s3 .hx-min-n b{background:linear-gradient(180deg,#fff 30%,#cdeeff);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(min-width:901px){.hx-s3 .hx-min-n b{font-size:clamp(4rem,min(7.6vw,13.6vh),8.25rem)}}
.hx-s3 .hx-min-n small{color:rgb(var(--neon))}
.hx-min2{list-style:none;margin:0 0 clamp(0.875rem,2.6vh,1.5rem);padding:0;display:flex;flex-wrap:wrap;gap:clamp(0.5rem,1.4vh,0.875rem) clamp(1.375rem,2.6vw,2.75rem)}
/* كلّ رقمٍ ووصفه بجانبه (لا تحته): الصفّ بارتفاع الرقم وحده — الوصف تحت الرقم كان يزيد 48px فيُخرج النصّ من البطاقة */
.hx-min2 li{display:flex;align-items:center;gap:clamp(0.5rem,.8vw,0.75rem);min-width:0}
.hx-min2 li>span{max-width:15ch;line-height:1.25}
/* (الجولة 35، المالك) رقمٌ واحد تحت الـ400 — 48 ساعة، والمحافظات العشر أُزيلت — فيكبر هو ووصفه ليملأ مكانهما (ويبقى أصغر من 400) */
.hx-min2 b{display:flex;align-items:baseline;gap:0.375rem;font:600 clamp(3.25rem,min(5.2vw,9.2vh),5.75rem)/.95 var(--fn);letter-spacing:-.03em;color:#fff;white-space:nowrap}
.hx-min2 b small{font-size:.4em;font-weight:600;letter-spacing:0;color:rgb(var(--neon))}
.hx-min2 li>span{font-size:clamp(1.0625rem,min(1.5vw,2.8vh),1.625rem);font-weight:600;line-height:1.25;color:#fff}
/* الخريطة: عنوانٌ صغير، ثم شريط المدن الخمس */
/* (الجولة 35، المالك) بلا عنوانٍ فوق الخريطة، والمشهد أعلى — الشاحنة والشارع والموظّف والصندوقان أكبر بـ35% */
.hx-drive{--vw:80%;display:grid;grid-template-rows:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(0.375rem,1.2vh,0.75rem);height:100%}
.hx-map{position:relative;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(0.25rem,1vh,0.625rem);
  background:none;box-shadow:none;border-radius:0;overflow:visible}
.hx-map::before{content:none}
.hx-map-t{display:none}
.hx-map-t b{font-size:clamp(0.9375rem,2.3vh,1.25rem);font-weight:650;line-height:1.2;color:#fff;text-shadow:0 1px 0.75rem rgba(3,52,120,.35)}
.hx-map-t span{font-size:clamp(0.75rem,1.7vh,0.90625rem);line-height:1.3;color:rgba(255,255,255,.86)}
/* الشريط في الصفّ الثاني دائماً: حين يُخفى العنوان (الهاتف) كان يصعد إلى صفّ العنوان «auto» فيصير ارتفاعه صفراً */
.hx-strip{grid-row:2;position:relative;min-height:0;margin:0 clamp(0.875rem,4%,2.5rem) clamp(1.375rem,4vh,2.25rem)}
.hx-route{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;overflow:visible;transform:none;z-index:1}
html[dir=rtl] .hx-route{transform:scaleX(-1)}
.hx-route path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:none}
/* (بمحدّديّةٍ أعلى من قاعدة الأصل ‎.hx-route path{stroke:… 2px}‎ — كانت تغلب ‎.hx-route-line‎ فيبقى الخطّ أبيض رفيعاً) */
.hx-route .hx-route-glow{stroke:rgba(var(--neon),.42);stroke-width:26}
.hx-route .hx-route-line{stroke:rgb(var(--neon));stroke-width:7;filter:none}
/* الخطوط البيضاء الجارية على المسار: صورةُ خطٍّ أبيض على المنحنى نفسه (تتمدّد معه كما يتمدّد الرسم) يقطعها قناعٌ متحرّك:
   شَرطةٌ 15px بطرفين ناعمين (كالشرطة السابقة 12px بطرفيها المستديرين) كلّ 32px، تجري 32px كلّ 1.1 ثانية (السرعة السابقة
   نفسها). كخطٍّ حيٍّ ثالث كلّفت ~55ms من عمل المعالج الرسوميّ أوّل ظهورٍ للشريحة (الجولة 34) */
.hx-flow{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:1;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 1px,#000 0.875rem,transparent 0.9375rem) 0 0/2rem 100% repeat-x;
  mask:linear-gradient(90deg,transparent 0,#000 1px,#000 0.875rem,transparent 0.9375rem) 0 0/2rem 100% repeat-x}
html[dir=rtl] .hx-flow{transform:scaleX(-1)}
.hx-s3.is-on .hx-flow{animation:hx-flow 1.1s linear infinite}
@keyframes hx-flow{to{-webkit-mask-position:2rem 0;mask-position:2rem 0}}
/* كل مدينة: النقطة على الخطّ تماماً (مركزها = نقطة المسار)، واسمها تحتها — صفٌّ مرتّب */
.hx-city{position:absolute;left:calc(var(--cx) * 1%);top:calc(var(--cy) * 1%);right:auto;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  translate:-50% -0.5625rem;transform:none;font-size:clamp(0.78125rem,1.9vh,1rem);font-weight:650;color:#fff;white-space:nowrap}
html[dir=rtl] .hx-city{left:auto;right:calc(var(--cx) * 1%);translate:50% -0.5625rem}
.hx-city i{flex:none;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;box-shadow:0 0 0 0.3125rem rgba(var(--neon),.5),0 0 1.375rem 0.5rem rgba(var(--neon),.95)}
.hx-city-hub{translate:-50% -0.6875rem}
html[dir=rtl] .hx-city-hub{translate:50% -0.6875rem}
.hx-city-hub i{width:1.375rem;height:1.375rem;background:#f4fbff;box-shadow:0 0 0 0.375rem rgba(var(--neon),.55),0 0 1.875rem 0.625rem rgba(var(--neon),1)}
.hx-city>span{padding:0.3125rem 0.75rem;border-radius:var(--sharp);background:rgba(6,40,90,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0.25rem 0.875rem -0.375rem rgba(3,40,96,.7)}
.hx-city-hub>span{background:rgba(var(--neon),.3);box-shadow:inset 0 0 0 1px rgba(var(--neon),.75),0 0 1.125rem -0.25rem rgba(var(--neon),.8)}
/* المشهد: شارعٌ عريض بحافّتين نيونيّتين، والسيارة 64% من العرض، والصناديق بين الموظّف والسيارة.
   (الجولة 34) كلّ ما لا يتحرّك فيه صورٌ مرسومةٌ مسبقاً (‎hero/scene_render.py‎): مرسوماً حيّاً — تدرّجات وأقنعة وقصٌّ
   وظلال — كلّف أوّلُ ظهورٍ له ~190ms من عمل المعالج الرسوميّ فتقطّع أوّلُ انتقالٍ بين الشرائح. ما يتحرّك يبقى حيّاً:
   العجلتان (طبقتان تدوران) ووصول السيارة وخطوط الشارع */
.hx-scene{position:relative;min-height:0}
html[dir=rtl] .hx-scene{transform:scaleX(-1)}
/* صورتا الموظّف والصندوقين بحسب اتّجاه الصفحة: في نسخة العربيّة العلامة مقلوبةٌ مسبقاً فتُقرأ صحيحةً بعد قلب المشهد */
html:not([dir=rtl]) .hx-scene .hx-rtl,html[dir=rtl] .hx-scene .hx-ltr{display:none}
.hx-road,html[dir=rtl] .hx-road{position:absolute;inset-inline:auto;left:-8%;right:-44%;bottom:0;height:35%;
  border-radius:0;background:none;-webkit-mask:none;mask:none}
.hx-road::before,.hx-road::after{content:none}
.hx-road img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
/* الخطوط المتقطّعة تبهت عند طرف الشارع كما يبهت هو */
.hx-road i{top:50%;height:0.3125rem;-webkit-mask:linear-gradient(90deg,transparent,#000 18%);mask:linear-gradient(90deg,transparent,#000 18%)}
/* (الجولة 35) الشاحنة أكبر بـ35%: مقدّمتها عند حافّة الشريحة لا خارجها (‎-3%‎؛ ‎-5%‎ كان يقصّ المصباح على الشاشات القصيرة) */
.hx-van{position:absolute;right:-3%;bottom:9%;width:var(--vw);aspect-ratio:560/300;z-index:3;transform:none}
/* (بلا ‎border-radius‎: التدرّج شفّافٌ من 72% فالزوايا شفّافةٌ أصلاً، والمستطيل أرخص رسماً) */
/* (الجولة 35، المالك) لا ضوء بين الشاحنة والشارع (ولا في رسمها: ‎hero/svg/van.svg‎) */
.hx-van::before{content:none}
.hx-scene-img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.hx-van-logo{position:absolute;left:9%;top:48%;width:44%;height:9.5%;max-width:none;background:none;-webkit-mask:none;mask:none}
html[dir=rtl] .hx-van-logo{transform:scaleX(-1)}
.hx-van-beam{position:absolute;right:-24%;bottom:26%;width:34%;height:26%;max-width:none;pointer-events:none}
.hx-s.is-on .hx-van{animation:hx-arrive 1.1s var(--ease) both}
/* العجلتان: طبقتان فوق السيارة في موضعي عجلتيها في الرسم (560×300: المركزان 126 و432، ‎y‎ 240، نصف القطر 40) */
.hx-wh{position:absolute;top:66.667%;width:14.286%;aspect-ratio:1;display:block;z-index:1;will-change:transform}
.hx-wh img{display:block;width:100%;height:100%}
.hx-wh-a{left:15.357%}
.hx-wh-b{left:70%}
.hx-s3.is-on .hx-wh{animation:hx-spin .9s linear infinite}
@keyframes hx-spin{to{transform:rotate(360deg)}}
/* الموظّف أمام مؤخّرة الشاحنة (بلا مكانٍ لهما جنباً إلى جنب بالحجم الأكبر)، والصندوقان عند قدميه — والعجلتان ظاهرتان */
.hx-man{position:absolute;right:auto;left:4%;bottom:3%;height:92%;width:auto;aspect-ratio:180/320;z-index:4;transform:none}
/* الصندوقان صورةٌ واحدة: عمودٌ 90×143.09 وحوله 26px لظلّيهما — الحاوية بحجم العمود، والصورة تفيض عنها بقدر الظلّ */
.hx-boxes{position:absolute;right:auto;left:-1%;bottom:4%;width:13.5%;aspect-ratio:90/143.09;z-index:5}
.hx-boxes img{position:absolute;left:-28.8889%;top:-18.1699%;width:157.7778%;height:136.3398%;max-width:none}
/* (الجولة 35) ارتفاعٌ متوسّط (761–1000px، ومنه 1903×934): الـ48 الأكبر كانت تُخرج النصّ 11px عن حشوة البطاقة — تتبع
   الارتفاع أكثر (7.1vh) وتبقى أكبر بكثير من الجولة 34 */
@media(min-width:901px) and (min-height:761px) and (max-height:1000px) and (max-width:1199px), (min-width:901px) and (max-aspect-ratio:1920/761) and (min-aspect-ratio:1920/1000) and (min-width:1200px){.hx-min2 b{font-size:clamp(3.25rem,min(5.2vw,7.1vh),5.75rem)}}
/* الشاشات القصيرة (بعد قواعد الشريحة كي تغلبها): الـ400 تتبع الارتفاع أكثر، والصفّ الثاني أصغر، والفراغات أضيق
   (كان النصّ يخرج 5–15px على 1536×730 و1366×657 و1280×620) */
@media(min-width:901px) and (max-height:760px) and (max-width:1199px), (min-width:901px) and (min-aspect-ratio:1920/760) and (min-width:1200px){
  .hx-s3 .hx-h,html[dir=rtl] .hx-s3 .hx-h{margin-bottom:0.5rem}
  .hx-s3 .hx-min{margin-bottom:0.25rem}
  .hx-s3 .hx-min-n b{font-size:clamp(3.75rem,11.6vh,8.25rem)}
  .hx-min2{margin-bottom:0.625rem}
  .hx-min2 b{font-size:clamp(2.875rem,7.6vh,4.5rem)}
  .hx-min2 li>span{font-size:clamp(1rem,2.4vh,1.3125rem)}
}
/* مكتبٌ ضيّق (901–1100): الزرّان في صفٍّ واحد (كانا ينزلان صفّين في عمودٍ من 320px) */
@media(min-width:901px) and (max-width:1100px){.hx-s3 .hx-cta .button{padding:0 0.9375rem}}

/* ═══ ٤ · مكتبة التمارين (الجولة 34، طلب المالك) ═══
   الصور كاملةً غير مقصوصة وأكبر: كلّ إطار صورةٍ بنسبة الصورة نفسها (3:2 — صور الموقع 850×567)، فلا قصّ؛ عرض العمودين
   يُحسب من المكان (وحدات الحاوية «lib»): العمود الأيمن = أصغر ما بين 40% من العرض و(الارتفاع − الفجوة − نصَّي
   البطاقتين) × ¾، والأيسر = الباقي، مسقوفاً بما يسع صورة البطاقة الكبرى ونصّها والعدّاد. النيون السماويّ أخفّ: لا توهّج
   داخليّ فوق النصّ (كان يُبهت الكلام)، والتوهّج الخارجيّ نصف ما كان. بلا شعار في الخلفية. */
/* ‎--sb/--mb/--nb‎ = ارتفاع نصّ البطاقة الصغيرة/نصّ الكبرى/العدّاد — مقيسة (الجولة 34): على مسرحٍ من 368px ‏81–98 / 107 / 61،
   وعلى 662px ‏102 / 134 / 85؛ القيم هنا تعلوها قليلاً (عنوانٌ من سطرين في البطاقة الصغيرة) */
.hx-lib{container-type:size;container-name:lib;display:flex;justify-content:center;align-items:center;gap:var(--gx);height:100%;
  --g:clamp(0.625rem,1.5vh,1rem);--gx:clamp(0.75rem,1.2vw,1.125rem);
  --sb:clamp(6rem,calc(10cqh + 3.75rem),7.75rem);--mb:clamp(6.25rem,calc(16cqh + 3rem),8.75rem);--nb:clamp(3.75rem,calc(10cqh + 1.625rem),5.75rem)}
/* مسرحٌ قصير (تحت 460px): البطاقتان الصغريان بلا سطر العضلات فتكبر صورتاهما (الاسم وعدد الخطوات يبقيان) */
@container lib (max-height:28.6875rem){.hx-lib-l,.hx-lib-r{--sb:4.625rem}.hx-lib-r .hx-ex-mus{display:none}}
.hx-lib-l,.hx-lib-r{flex:none;display:flex;flex-direction:column;gap:var(--g);min-width:0}
.hx-lib-r{width:min(40cqw,calc((100cqh - var(--g) - 2 * var(--sb)) * .75))}
.hx-lib-l{width:min(calc(100cqw - var(--gx) - min(40cqw,calc((100cqh - var(--g) - 2 * var(--sb)) * .75))),calc((100cqh - var(--mb) - var(--nb) - var(--g)) * 1.5))}
.hx-ex{position:relative;inset:auto;width:100%;min-height:0;rotate:0deg;opacity:1;transform:none;display:grid;grid-template-rows:auto auto;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.82));
  box-shadow:0 1.375rem 2.875rem -1.75rem rgba(10,89,169,.4),0 0.125rem 0.375rem rgba(10,89,169,.06),inset 0 0 0 1px rgba(255,255,255,.9),
    0 0 0 1px rgba(13,156,248,.34),0 0 1.625rem -0.5rem rgba(13,156,248,.42)}
.hx-ex-b,.hx-ex-c,html[dir=rtl] .hx-ex-b,html[dir=rtl] .hx-ex-c{rotate:0deg;opacity:1}
.hx-ex-main,.hx-ex-b,.hx-ex-c{grid-column:auto;grid-row:auto}
/* (المحدّديّة أعلى من قاعدة الهاتف القديمة ‎.hx-ex-main .hx-ex-img{aspect-ratio:2/1}‎ التي كانت تقصّ صورة الهاتف) */
.hx-lib .hx-ex .hx-ex-img{aspect-ratio:3/2;height:auto;min-height:0}
.hx-lib .hx-ex .hx-ex-img img{object-fit:contain}
.hx-ex-body{gap:0.1875rem;padding:clamp(0.4375rem,1.3vh,0.8125rem) clamp(0.75rem,1.8vh,1.125rem) clamp(0.5rem,1.5vh,0.875rem)}
.hx-ex-body b{font-size:clamp(0.875rem,2vh,1.125rem)}
.hx-ex-main .hx-ex-body b{font-size:clamp(1.0625rem,2.5vh,1.4375rem)}
.hx-ex-mus{font-size:clamp(0.75rem,1.55vh,0.875rem)}
.hx-ex-lvl{font-size:clamp(0.71875rem,1.45vh,0.8125rem)}
.hx-lib-r .hx-ex-lvl{display:none}   /* البطاقتان الصغريان: الاسم والعضلات والخطوات — المستوى في صفحة التمرين */
.hx-ex-cap{font-size:clamp(0.6875rem,1.4vh,0.78125rem);font-weight:600;color:var(--brand-deep);display:inline-flex;align-items:center;gap:0.375rem;margin-top:0.125rem}
.hx-ex-cap::before{content:'';width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--sky);box-shadow:0 0 0.375rem 1px rgba(13,156,248,.4)}
.hx-ex-step{box-shadow:0 0.375rem 1rem -0.5rem rgba(4,30,70,.6),0 0 0 1px rgba(13,156,248,.3),0 0 0.75rem -0.25rem rgba(13,156,248,.5)}
.hx-s4.is-on .hx-ex-b .hx-st1{animation:hx-fin 5.6s 1.2s ease-in-out infinite}
.hx-s4.is-on .hx-ex-b .hx-st0{animation:hx-st0 5.6s 1.2s ease-in-out infinite}
.hx-s4.is-on .hx-ex-c .hx-st1{animation:hx-fin 5.2s 2.3s ease-in-out infinite}
.hx-s4.is-on .hx-ex-c .hx-st0{animation:hx-st0 5.2s 2.3s ease-in-out infinite}
@media(hover:hover){.hx-ex:hover{transform:none;box-shadow:0 1.375rem 2.875rem -1.625rem rgba(10,89,169,.48),0 0.125rem 0.375rem rgba(10,89,169,.08),inset 0 0 0 1px #fff,
  0 0 0 1px rgba(13,156,248,.5),0 0 1.875rem -0.375rem rgba(13,156,248,.6)}}
.hx-lib-n{grid-column:auto;grid-row:auto;position:static;inset:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.75rem;padding:0 0.125rem;
  color:var(--brand-ink);background:none;box-shadow:none;justify-items:start}
.hx-lib-n b{font:800 clamp(2.375rem,min(3.4vw,6.4vh),3.75rem)/1 var(--fn);letter-spacing:-.03em;color:var(--sky);text-shadow:0 0 1rem rgba(13,156,248,.35)}
.hx-lib-n span{font-size:clamp(1.0625rem,2.6vh,1.375rem);font-weight:700;color:var(--brand-ink);opacity:1}
.hx-lib-n small{font-size:clamp(0.75rem,1.6vh,0.875rem);color:#4a5568;flex-basis:100%;line-height:1.3}
/* النيون على الشريحة أخفّ كذلك في رقاقة العنوان والزرّين */
.hx-s4 .hx-k-ico{box-shadow:inset 0 1px 0 #fff,inset 0 -0.625rem 1.125rem -0.75rem rgba(var(--neon),.45),0 0 0 1px rgba(var(--neon),.35),0 0 1rem -0.25rem rgba(var(--neon),.45),0 0.625rem 1.375rem -0.875rem rgba(var(--neon),.3)}
.hx-s4 .hx-k-ico::after{box-shadow:0 0 0.375rem 1px rgba(var(--neon),.5)}
.hx-s4 .hx-cta .button:not(.ghost){box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -0.125rem 0.375rem rgba(0,50,120,.22),0 0 0 1px rgba(var(--neon),.4),
  0 0.75rem 1.625rem -0.75rem rgba(13,156,248,.7),0 0 1rem -0.25rem rgba(var(--neon),.55)!important}
.hx-s4 .hx-cta .button.ghost{box-shadow:var(--glass-edge),0 0 0 1px rgba(var(--neon),.3),0 0 0.875rem -0.25rem rgba(var(--neon),.45)!important}

/* ═══ ٥ · البرامج التدريبية (الجولة 34، طلب المالك) ═══
   الكلام والأرقام في بطاقة الأسبوع أكبر بكثير وأوضح (تكبر مع ارتفاع البطاقة — الحاوية «prog»)؛ صورة كل يوم كاملة غير
   مقصوصة (الصورة بحجمها الملائم داخل خانتها، وإطارها على الصورة نفسها)؛ النيون جليديّ كالأولى، بلا أخضر. */
.hx-s5 .hx-bg{background:
    radial-gradient(64% 86% at 12% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(50% 70% at 84% 100%,rgba(var(--neon),.36),transparent 62%),
    linear-gradient(165deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
html[dir=rtl] .hx-s5 .hx-bg{background:
    radial-gradient(64% 86% at 88% 52%,rgba(6,82,178,.36),transparent 70%),
    radial-gradient(50% 70% at 16% 100%,rgba(var(--neon),.36),transparent 62%),
    linear-gradient(195deg,#2fb3fd 0%,#0d9cf8 50%,#0b8be2 100%)}
.hx-prog{container-type:size;container-name:prog}
.hx-wk{gap:clamp(0.5rem,2.2cqh,1rem);padding:clamp(0.75rem,3.2cqh,1.5rem) clamp(0.75rem,3.2cqh,1.5rem) clamp(0.625rem,2.8cqh,1.25rem);
  box-shadow:0 2.125rem 4.375rem -1.875rem rgba(3,40,96,.7),0 0.125rem 0.375rem rgba(3,40,96,.12),inset 0 0 0 1px rgba(255,255,255,.9),inset 0 -1.375rem 2.25rem -1.375rem rgba(var(--neon),.6),
    0 0 0 1px rgba(var(--neon),.6),0 0 2.875rem -0.25rem rgba(var(--neon),.9),0 1.625rem 3.375rem -1.625rem rgba(var(--neon),.55)}
.hx-wk-h{gap:clamp(0.25rem,1cqh,0.5rem)}
.hx-wk-h b{font-size:clamp(1.0625rem,4.6cqh,2rem)}
.hx-wk-meta{display:flex;flex-wrap:wrap;gap:clamp(0.25rem,.9cqh,0.4375rem)}
.hx-wk-meta i{font:600 clamp(0.6875rem,2.4cqh,1rem)/1 var(--ui-font);font-style:normal;padding:clamp(0.25rem,1cqh,0.4375rem) clamp(0.5rem,1.6cqh,0.6875rem);border-radius:0.5rem;
  background:var(--sky-50);color:var(--brand-deep);box-shadow:inset 0 0 0 1px rgba(13,156,248,.18)}
.hx-wk-meta i:first-child{background:linear-gradient(180deg,#43b6ff,#0d9cf8);color:#fff;box-shadow:0 0.375rem 0.875rem -0.5rem rgba(13,156,248,.9)}
.hx-days{gap:clamp(0.3125rem,1.5cqh,0.6875rem)}
/* (الجولة 35، المالك) الصور أكبر بكثير والكلام تحتها أصغر: النصوص والفجوات والحشوة تصغر، والصورة تأخذ ما يفضل */
.hx-day{position:relative;isolation:isolate;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:clamp(0.125rem,.45cqh,0.25rem);padding:clamp(0.25rem,1cqh,0.5rem) clamp(0.1875rem,.6cqh,0.3125rem)}
/* (ارتفاع السطر صريح: الموروث ≈1.7 جعل سطر اليوم 29px وسطر العدد 27px على 1903 — على حساب الصورة) */
.hx-day i{--c:#3d4a5c;font-size:clamp(0.625rem,min(2.1cqh,2.4cqw),0.875rem);line-height:1.15;font-weight:650;color:var(--c)}
.hx-day b{--c:var(--brand-ink);font-size:clamp(0.75rem,min(2.8cqh,3cqw),1.1875rem);line-height:1.1;color:var(--c)}
/* الصورة كاملة: بحجمها الملائم وسط خانتها (لا قصّ)، والإطار والظلّ على الصورة نفسها */
.hx-day-p{position:relative;min-height:0}
.hx-day-p img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  border-radius:0.5rem;box-shadow:0 0 0 0.125rem #fff,0 0.375rem 0.875rem -0.375rem rgba(4,30,70,.55)}
/* سطر العضلات (‎.hx-day>em‎) غير مربّع يوم الراحة (‎.hx-day-p em‎، المطلق المخطّط) */
.hx-day>em{position:static;inset:auto;display:block;border-radius:0;background:none;box-shadow:none;
  --c:#3d4a5c;font-size:clamp(0.59375rem,min(1.8cqh,1.8cqw),0.78125rem);font-style:normal;font-weight:500;line-height:1.2;color:var(--c);padding:0 0.125rem;
  min-height:2.4em}   /* سطران محجوزان في كل يوم: «صدر · أكتاف · ذراعان» يلتفّ وغيره لا — فتتساوى الصور في الصفّ */
.hx-day small{--c:#4a5568;font-size:clamp(0.59375rem,min(1.8cqh,2cqw),0.78125rem);line-height:1.2;font-weight:600;color:var(--c)}
/* يوم الراحة: المربّع المخطّط بنسبة صورةٍ (3:2) وبحجمها، لا بعرض الخانة كلّه */
.hx-day-p em{inset:0;margin:auto;height:100%;width:auto;max-width:100%;aspect-ratio:3/2}
.hx-day-rest em,.hx-day-rest b{--c:#7b8797;color:#7b8797}
/* (الجولة 35، المالك) لا يومَ أزرقَ ثابتاً: حين تظهر الشريحة ينتقل الأزرق بين الأيام السبعة، ثانيةً لكلّ يوم (المالك)، ويعود اليوم
   الذي تركه إلى لونه. طبقةٌ زرقاء خلف محتوى اليوم (::before) تتلاشى وتظهر (شفافيةٌ فقط)، والكلام يبيضّ معها */
.hx-day::after{content:none}
.hx-day::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:var(--sharp);pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#43b6ff,#0d9cf8);box-shadow:0 0.875rem 1.75rem -0.75rem rgba(13,156,248,.9),0 0 0 1px rgba(var(--neon),.7),0 0 1.625rem -0.25rem rgba(var(--neon),.85)}
.hx-day-n::before{content:none}
.hx-days>.hx-day:nth-child(1){--d:0}.hx-days>.hx-day:nth-child(2){--d:1}.hx-days>.hx-day:nth-child(3){--d:2}.hx-days>.hx-day:nth-child(4){--d:3}
.hx-days>.hx-day:nth-child(5){--d:4}.hx-days>.hx-day:nth-child(6){--d:5}.hx-days>.hx-day:nth-child(7){--d:6}
.hx-s5.is-on .hx-day:not(.hx-day-n),.hx-s5.is-on .hx-day:not(.hx-day-rest):not(.hx-day-n){animation:none}
.hx-s5.is-on .hx-day:not(.hx-day-n)::before{animation:hx-daylit 7s linear infinite;animation-delay:calc(var(--d) * 1s)}
.hx-s5.is-on .hx-day:not(.hx-day-n) :is(i,b,small),.hx-s5.is-on .hx-day:not(.hx-day-n)>em{animation:hx-daytx 7s linear infinite;animation-delay:calc(var(--d) * 1s)}
@keyframes hx-daylit{0%{opacity:0}3%,12.5%{opacity:1}16%,100%{opacity:0}}
@keyframes hx-daytx{0%{color:var(--c)}2.5%,13%{color:#fff}15.5%,100%{color:var(--c)}}
@media(prefers-reduced-motion:reduce){.hx-s5 .hx-day::before,.hx-s5 .hx-day :is(i,b,small),.hx-s5 .hx-day>em{animation:none!important}}
.hx-day-n{grid-template-rows:1fr auto;box-shadow:0 0.875rem 1.875rem -0.875rem rgba(13,156,248,.9),0 0 0 1px rgba(var(--neon),.65),0 0 1.875rem -0.25rem rgba(var(--neon),.9)}
/* (الجولة 35، المالك) الـ54 وكلامها أكبر وأوضح — كان الكلام رماديّاً على الأزرق (قاعدة ‎.hx-day small‎ تغلب أبيضه) */
.hx-day-n b{font-size:clamp(2.125rem,min(12.5cqh,11.5cqw),5.5rem)}   /* (cqw: على 640 المربّع ضيّق) */
.hx-s5 .hx-day-n small{--c:#fff;color:#fff;font-size:clamp(0.6875rem,min(2.9cqh,2.4cqw),1.1875rem);font-weight:650;line-height:1.25;text-shadow:0 1px 0.375rem rgba(3,52,120,.35)}
/* شريط الأسابيع: الأرقام والأسماء أكبر؛ أسبوع التفريغ بجليديٍّ فاتح (كان نعناعيّاً) */
.hx-wks{gap:clamp(0.25rem,.9cqh,0.4375rem)}
.hx-wks i{padding:clamp(0.3125rem,1.2cqh,0.5625rem) 0.5rem;font-size:clamp(0.6875rem,2.4cqh,1rem);line-height:1.2;gap:clamp(1px,.4cqh,0.1875rem)}
.hx-wks b{font-size:clamp(0.8125rem,3.3cqh,1.375rem)}
.hx-wks .wd{background:#eaf6ff;color:var(--brand-deep)}
/* صفوف الأيام محاذاةٌ عبر الأيام (subgrid): اسم اليوم والصورة والنوع والعضلات والعدد في صفوفٍ مشتركة بين الأيام الأربعة،
   فتتساوى الصور في الصفّ حتى حين يلتفّ سطر العضلات في يومٍ دون غيره (على 640 كان «صدر · أكتاف · ذراعان» ثلاثة أسطر).
   الصفّان مفصولان بمسارٍ فارغ (فجوة الشبكة صفر كي لا تتباعد صفوف اليوم الواحد). فوق الهاتف فقط. */
@media(min-width:561px){
  .hx-days{grid-template-rows:auto minmax(0,1fr) auto auto auto clamp(0.3125rem,1.5cqh,0.6875rem) auto minmax(0,1fr) auto auto auto;row-gap:0}
  .hx-day{grid-template-rows:subgrid;row-gap:clamp(0.125rem,.45cqh,0.25rem)}
  .hx-day:nth-child(-n+4){grid-row:1 / span 5}
  .hx-day:nth-child(n+5){grid-row:7 / span 5}
  /* (الجولة 35، المالك: «الرقم أبيض وأعلى إلى الأعلى، والكلام أيضاً») الرقم وكلامه عمودٌ واحد من أعلى المربّع — لا على صفوف
     الأيام المشتركة (كان الرقم أسفل صفّ الصورة والكلام تحته، في منتصف المربّع). ‎contain:size‎: المربّع يأخذ ارتفاع صفوف
     الأيام ولا يُطوّلها (على 640 كان كلامه يمدّ البطاقة خارج الشريحة) */
  .hx-s5 .hx-day-n{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;contain:size;overflow:hidden;gap:clamp(0.25rem,1cqh,0.5625rem);padding-top:clamp(0.5rem,2.2cqh,1.125rem)}
}
.hx-s5 .hx-day-n b{--c:#fff;color:#fff;line-height:1;align-self:center;text-shadow:0 0.125rem 0.625rem rgba(3,52,120,.3)}
/* بطاقةٌ قصيرة (لابتوب 768/720 بشريط المتصفّح): الصور أولى بالمكان — بلا سطر العضلات تحت 470px، وبلا آخر رقاقتين */
@container prog (max-height:29.3125rem){.hx-day>em{display:none}.hx-wk-meta i:nth-child(n+5){display:none}}
@container prog (max-height:24.9375rem){.hx-wks{display:none}.hx-wk{grid-template-rows:auto minmax(0,1fr)}}
@media(hover:hover){.hx-wk:hover{transform:none;box-shadow:0 2.125rem 4.375rem -1.875rem rgba(3,40,96,.75),0 0.125rem 0.375rem rgba(3,40,96,.14),inset 0 0 0 1px #fff,
  0 0 0 1px rgba(var(--neon),.75),0 0 3.375rem -0.25rem rgba(var(--neon),1)}}

/* ── المقاسات ── */
@media(max-width:1100px){
  .hx-s1 .hx-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .hx-s1 .hx-brand,.hx-s1 .hx-brow-3 .hx-brand{--bh:calc(clamp(2.875rem,min(5vw,8vh),4rem) * 1.5)}
  /* الرقمان في صفٍّ واحد مهما ضاق العمود: خطٌّ أصغر ووصفٌ أضيق (كانا ينزلان صفّين فيخرج النصّ 31px) */
  .hx-min2{column-gap:1.125rem}
  .hx-min2 b{font-size:2.75rem}
  .hx-min2 li{gap:0.5rem}
  .hx-min2 li>span{font-size:1rem;max-width:11ch}
}
/* ═══ الشريحة ٢: ما يظهر بحسب المكان ═══
   حاويتا قياس: «plan» للخطّة كلّها (ارتفاعها = ما يبقى للمسرح: على المكتب من 368px في أقصر بطاقة إلى ~710px على 1080،
   وعلى اللوحيّ ما يبقى تحت العنوان) و«card» لكلّ بطاقة. الأساس = أضيق حالة: بلا عناوين فرعيّة ولا جولات، مكمّلٌ واحد،
   والأرقام الأربعة في صفّ؛ المراتب في آخر الملفّ تُضيف ما يتّسع له الارتفاع. */
.hx-card-h span,.hx-sets{display:none}
.hx-supps li:nth-child(n+2){display:none}
.hx-stats{grid-template-columns:repeat(4,minmax(0,auto))}

@media(max-width:900px){
  /* عمودٌ واحد للشرائح كلّها هنا (القاعدتان غير المشروطتان للأولى والثالثة أعلاه كانتا تُبقيانهما عمودين) */
  .hx-s .hx-in,.hx-s1 .hx-in,.hx-s3 .hx-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .hx-s1 .hx-in{grid-template-rows:auto minmax(0,1fr) auto}
  /* الشريحة ٢ على اللوحيّ: الخطّة بعرض البطاقة كلّه (قاعدةٌ قديمة كانت تحصر كلّ مسرحٍ في 560px فتُقصّ الأرقام والأسماء)،
     البرنامج بارتفاعه الطبيعيّ والمكمّلات تأخذ ما بقي؛ ما يظهر تقرّره مراتب الارتفاع في آخر الملفّ */
  .hx-s2 .hx-art,.hx-s4 .hx-art,.hx-s5 .hx-art{width:100%;justify-self:stretch}   /* (٤ و٥: الصور والأسبوع بعرض البطاقة، الجولة 34) */
  .hx-plan{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:auto minmax(0,1fr) auto;gap:0.75rem}
  .hx{--ch:62.5rem!important}
  .hx-art.hx-show{grid-column:1;grid-row:2;width:100%;justify-self:stretch;align-content:normal}
  .hx-s1 .hx-copy{grid-row:1}
  .hx-s1 .hx-brands{grid-column:1;grid-row:3;--ext:0px}   /* (المسرح بعرض العمود هنا) */
  .hx-set{inset-inline-end:0}
  .hx-plan,.hx-lib{height:100%}
  .hx-drive{--vw:76%}
}
/* اللوحيّ الصغير (561–700px): عمود البرنامج أعرض */
@media(min-width:561px) and (max-width:700px){
  .hx-plan{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
}
@media(max-width:560px){
  .hx{--ch:43.125rem!important}   /* 640 كانت تُبقي للخطّة العربيّة 284px وبطاقتاها 319 */
  .hx-s .hx-k{gap:0.5625rem;font-size:0.90625rem}
  html[lang=ar] .hx-s .hx-k{font-size:0.96875rem}
  .hx-s .hx-k-ico{width:2rem;height:2rem;border-radius:0.625rem}
  .hx-s .hx-k-ico svg{width:1.1875rem;height:1.1875rem}
  .hx-s1 .hx-brands{gap:0.375rem;grid-template-columns:minmax(0,1fr)}   /* (لا 4 × 2 القديمة: كلّ صفٍّ شريطٌ زجاجيّ الآن) */
  .hx-s1 .hx-brow{gap:0.125rem;padding:0 0.5rem}
  .hx-s1 .hx-brow-3{width:70%}
  .hx-s1 .hx-brand,.hx-s1 .hx-brow-3 .hx-brand{--bh:3.5rem;padding:0 0.1875rem}
  .hx-neon{bottom:0}
  /* الهاتف: بطاقتا الأرقام والبرنامج فوق بعضهما (المكمّلات والوسم في صفحة المستشار) */
  /* لا حاوية قياسٍ هنا (البطاقتان بارتفاع محتواهما؛ الحاوية كانت تقسم ما بقي بينهما بالتساوي فتقصّ الأرقام) */
  .hx-plan{container-type:normal;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content;gap:0.5rem;align-content:start}
  .hx-c1,.hx-c2{grid-column:1}
  .hx-c1{grid-row:1}.hx-c2{grid-row:2}
  .hx-s2 .hx-c3,.hx-s2 .hx-tag{display:none}
  /* على الهاتف لا حاوية قياس (فتُحسب ‎cqh‎ من الشاشة): مقاساتٌ ثابتة؛ بطاقة الأرقام صفٌّ: حلقة السعرات ثم الحلقات الثلاث */
  .hx-s2 .hx-card{container-type:normal;padding:0.625rem 0.75rem;gap:0.375rem;overflow:visible}
  .hx-s2 .hx-c1{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:0.625rem;row-gap:0.375rem}
  .hx-c1 .hx-card-h,.hx-c1 .hx-stats{grid-column:1 / -1}
  .hx-card-h b{font-size:0.90625rem}
  .hx-s2 .hx-ring{width:4.625rem;margin:0}
  .hx-s2 .hx-ring strong{font-size:1.125rem}.hx-s2 .hx-ring small{font-size:0.59375rem}
  .hx-mrings{gap:0.25rem}.hx-mrings li{gap:0.125rem}
  .hx-mr{width:3rem}.hx-mr b{font-size:0.78125rem}
  .hx-mrings em{font-size:0.65625rem}.hx-mrings i{font-size:0.59375rem}
  .hx-stats{grid-template-columns:repeat(4,minmax(0,auto));gap:0.25rem}
  .hx-stats li{padding:0.3125rem 0.3125rem}
  .hx-stats b{font-size:0.8125rem}.hx-stats span{font-size:0.625rem}
  .hx-card-h span{display:none}
  .hx-prog-n strong{font-size:0.875rem}.hx-prog-n span{font-size:0.6875rem}
  .hx-s2 .hx-week{gap:0.1875rem}
  .hx-s2 .hx-week i{padding:0.3125rem 1px;gap:0.125rem}
  .hx-s2 .hx-week em,html[lang=ar] .hx-s2 .hx-week em{font-size:0.5625rem}
  .hx-s2 .hx-week b{font-size:0.65625rem}
  .hx-map-t{display:none}
  .hx-city{font-size:0.6875rem;gap:0.3125rem}
  .hx-city>span{padding:0.1875rem 0.375rem}
  /* خمسة أسماء في 290px: تتناوب فوق الخطّ وتحته (النقطة تبقى على الخطّ) */
  .hx-city:nth-of-type(even){flex-direction:column-reverse;translate:-50% calc(-100% + 0.5625rem)}
  html[dir=rtl] .hx-city:nth-of-type(even){translate:50% calc(-100% + 0.5625rem)}
  .hx-strip{margin:1.625rem 1.125rem 1.5rem}
  .hx-ex-b,.hx-ex-c{display:none}
  .hx-min2{gap:0.375rem 1.25rem;margin-bottom:0.875rem}
  .hx-min2 b{font-size:2.5rem}.hx-min2 li>span{font-size:0.9375rem}
  .hx-drive{grid-template-rows:minmax(0,.6fr) minmax(0,1.4fr);gap:0.375rem;--vw:80%}
  /* الهاتف: البطاقة الكبرى وحدها (صورةٌ كاملة 3:2 بعرض ما يسعه الارتفاع) والعدّاد تحتها */
  .hx-lib{--mb:5.25rem;--nb:2.5rem}
  .hx-lib-r{display:none}
  .hx-lib-l{width:min(100cqw,calc((100cqh - var(--mb) - var(--nb) - var(--g)) * 1.5))}
  .hx-lib-n{inset:auto;top:auto;bottom:auto}
  .hx-lib-n b{font-size:2.125rem}.hx-lib-n span{font-size:0.9375rem}.hx-lib-n small{display:none}
  .hx-ex-cap{display:none}
  .hx-day em{display:none}
  /* الشريحة ٥ على الهاتف: بطاقة الأسبوع كانت 382px في مسرحٍ من 324 (الإنجليزيّة) — بلا شريط الأسابيع، أربع رقائق، بلاطات أضيق */
  .hx-wks{display:none}
  .hx-wk-meta i:nth-child(n+5){display:none}
  .hx-s5 .hx-day{padding:0.3125rem 0.125rem}
  /* (الجولة 34) صورة كل يوم على الهاتف أيضاً — كاملةً، والبطاقة تملأ المسرح؛ اسم اليوم ونوعه أكبر */
  .hx-prog{align-content:stretch}
  .hx-wk{grid-template-rows:auto minmax(0,1fr)}
  .hx-day-p{display:block}
  .hx-s5 .hx-day{grid-template-rows:auto minmax(0,1fr) auto;gap:0.1875rem}
  .hx-day i{font-size:0.71875rem}
  .hx-day b{font-size:1rem}
  .hx-s5 .hx-day-n{grid-template-rows:1fr}   /* (‎.hx-s5 .hx-day‎ أعلاه يشملها — المحدّديّة نفسها وبعدها) */
  .hx-day-n b{font-size:1.875rem;align-self:center}
}
/* ═══ مراتب الخطّة (561px فما فوق): ما يُضاف كلّما اتّسع الارتفاع («plan»)؛ وصفّ المكمّل بحسب عرض البطاقة («card») ═══
   (استعلامات القياس تقيس صندوق المحتوى: بطاقة عرضها 314px تُقاس 288) */
@container card (max-width:17.4375rem){
  .hx-supps a{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;row-gap:0.25rem}
  .hx-supps img{grid-row:1 / 3}
  .hx-supps em{grid-column:2;justify-self:start}
}
/* بطاقةٌ متوسّطة: رقاقة التوقيت تلتفّ على نفسها (سطران) بدل أن تدفع اسم المنتج إلى سطرين — «الصباح مع الفطور» أطولها */
/* (الجولة 34) ‎6.6em‎ للنصّ + الحشوة: «Morning, with» يسع سطراً (76px بخطّ 12.2px) فتصير الرقاقة سطرين لا ثلاثة، و«After
   training» سطراً واحداً؛ ‎7.2em‎ مع الحشوة كانت تُبقي للنصّ 72px */
@container card (min-width:17.5rem) and (max-width:26.1875rem){.hx-supps em{white-space:normal;max-width:calc(6.6em + 1rem)}}
@media(min-width:561px){
  @container plan (min-height:25rem){.hx-supps li:nth-child(2){display:block}}
  @container plan (min-height:29.375rem){.hx-c1 .hx-card-h span{display:block}.hx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @container plan (min-height:31.875rem) and (min-width:35rem){.hx-c2 .hx-card-h span,.hx-c3 .hx-card-h span{display:block}}
  @container plan (min-height:34.0625rem){.hx-sets{display:block}}
  @container plan (min-height:37.5rem) and (min-width:35rem){.hx-supps li:nth-child(3){display:block}}
  /* 600–699 (شاشة المالك 1903×934 = 662): المكمّلات الثلاثة تسع بلا سطرَي العنوان الفرعيّ — ويعود من 700 */
  @container plan (min-height:37.5rem) and (max-height:43.6875rem){.hx-c3 .hx-card-h span{display:none}}
  /* تحت 330px (هاتفٌ أفقيّ أو نافذةٌ واطئة جداً): بطاقة المكمّلات تتنحّى ويأخذ البرنامج الصفّين */
  @container plan (max-height:20.5625rem){.hx-s2 .hx-c3{display:none}.hx-c2{grid-row:1 / 3}}
  /* خطّةٌ ضيّقة (تحت 560px — مكتب 1024 واللوحيّ الصغير): الأرقام الأربعة 2×2 مهما قصر الارتفاع — في صفٍّ واحد لا تسع
     «66.4 kg» و«+0.2–0.4» (كانت تفيض عن خاناتها) */
  @container plan (max-width:34.9375rem){.hx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-stats li{padding:0.25rem 0.5rem}}
}
/* نافذة مكتبٍ ضيّقة (901–1200): عمود البرنامج أعرض (.8/1.2) فتسع بلاطات الأسبوع أسماء الأيام */
@media(min-width:901px) and (max-width:1199px){
  .hx-plan{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media(prefers-reduced-motion:reduce){
  .hx-s3 .hx-flow,.hx-s3 .hx-wh,.hx-s2 .hx-mr .v{animation:none!important}
}
/* (شاشاتٌ قصيرة ≤700px: الشعارات تتبع الارتفاع أكثر كي يبقى للمنتجات مكانها) */
@media(min-width:1101px) and (max-height:700px) and (max-width:1199px), (min-width:1101px) and (min-aspect-ratio:1920/700) and (min-width:1200px){.hx-s1 .hx-brands{--lw:min(22cqw,16vh)}}
/* (المالك: «BiotechUSA أكبر، وكلّ الشعارات متوازنة — بعضها يبدو أثقل») حجمٌ بصريٌّ واحد لا صندوقٌ واحد: عرض كلّ شعار = الوحدة ×
   نسبته^0.4 × √وزنه (المساحة المتساوية تماماً — الأسّ 0.5 — كبّرت الكلمات العريضة أكثر من اللازم) — فحجمها البصريّ متقارب (العريض الرفيع لا يصغر، والمربّع الكثيف لا يطغى)، والوزن يصحّح كثافة الحبر:
   الكلمات الرفيعة (BiotechUSA 1.25، EVOGEN 1.1) أكثر قليلاً، والكثيفة (Gorilla .95، الدرع 14 .65) أقلّ. الصفّ الخامس
   بفراغ 2.4cqw يبلغ ~96cqw */
.hx-s1 .hx-brands{--lu:min(11cqw,10vh)}
@media(min-width:1101px) and (max-height:700px) and (max-width:1199px), (min-width:1101px) and (min-aspect-ratio:1920/700) and (min-width:1200px){.hx-s1 .hx-brands{--lu:min(11cqw,8vh)}}
.hx-s1 .hx-brands .hx-brow-5{gap:3.6cqw}   /* (المالك: «الخمسة أبعد عن بعضها كالثلاثة» — الصفّ ~100cqw: أوسع من ذلك يخرج أيسرها عن البطاقة بالعربيّة) */
.hx-s1 .hx-brands .hx-brand img[src*=biotechusa]{width:calc(var(--lu) * 2.37)}
.hx-s1 .hx-brands .hx-brand img[src*=scitec]{width:calc(var(--lu) * 1.7)}   /* (المالك: «Scitec يبدو صغيراً») */
.hx-s1 .hx-brands .hx-brand img[src*=gorillawear]{width:calc(var(--lu) * 1.45)}
.hx-s1 .hx-brands .hx-brand img[src*=gat]{width:calc(var(--lu) * 1.35)}
.hx-s1 .hx-brands .hx-brand img[src*=evogen]{width:calc(var(--lu) * 2.36)}
.hx-s1 .hx-brands .hx-brand img[src*=superior14]{width:calc(var(--lu) * .77)}
.hx-s1 .hx-brands .hx-brand img[src*=gasp]{width:calc(var(--lu) * 1.93)}
.hx-s1 .hx-brands .hx-brand img[src*=betterbodies]{width:calc(var(--lu) * 1.34)}
/* ‖ s97 end ‖ */

/* ‖ refine begin ‖ */
/* ═══ تبسيط الشرائح (المالك، 2026-10-14): كلامٌ أقلّ وما يبقى أكبر ═══
   شريحةً شريحة، بطلب المالك لكلّ واحدة. ما حُذف حُذف من الوسم (hero_build33.py، ونصّ الأولى في hero.html)؛ هنا المقاسات
   فقط — يُلصق في hero.css بعد s97 (refine.py) فيغلب ما قبله بالمحدّديّة نفسها. المقاسات بتصميم 1920 (scale_css.py يحوّلها). */

/* ── كلّ الشرائح: العنوان الصغير وأيقونته، والعنوان، والأزرار مجموعةٌ واحدة في وسط البطاقة بمسافاتٍ واحدة في كلّ الشرائح
   (المالك: «الأيقونة وجملتها فوق على اليسار، والكبسات تحت» ثمّ «خليهم أقرب على الكلام اللي بالنص») — المسافتان تكبران
   مع ارتفاع الشاشة ولا تتجاوزان 52 و60px ── */
@media(min-width:901px){
  .hx-s .hx-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
  html .hx-s .hx-copy>.hx-k{margin-bottom:clamp(1.125rem,4.4vh,3.25rem)}
  html .hx-s .hx-copy>.hx-h{margin-top:0;margin-bottom:0}
  html .hx-s .hx-copy>.hx-cta{margin-top:clamp(1.375rem,5.2vh,3.75rem)}
}
/* اللوحيّ والهاتف (النصّ فوق الصور): هواءٌ قليل بين العنوان والأزرار مكان الفقرة */
@media(max-width:900px){
  .hx-s1 .hx-cta,.hx-s2 .hx-cta,.hx-s4 .hx-cta,.hx-s5 .hx-cta{margin-top:clamp(0.25rem,1.4vh,1rem)}
}

/* ── ١ · العلامات: بلا فقرة أسماء العلامات؛ العنوان (h1 الصفحة) أكبر — يملأ ما تركته الفقرة ── */
@media(min-width:901px){
  .hx-s.hx-s1 .hx-h{font-size:clamp(2.875rem,min(5vw,calc(14vh - 2.25rem)),6rem)}
  html[dir=rtl] .hx-s.hx-s1 .hx-h{font-size:clamp(2.75rem,min(4.8vw,calc(13.4vh - 2.125rem)),5.75rem)}
}

/* ── ٢ · المستشار: الأرقام حلقاتٌ فقط، البرنامج اسمٌ وأسبوع، المكمّلات صورةٌ واسمٌ وتوقيت ── */
@media(min-width:561px){
  /* الحلقة الكبرى تأخذ مكان مربّعات الأرقام: حتى 78% من عرض البطاقة، ولا تتجاوز ما يتركه ارتفاع الخطّة للعنوان والحلقات
     الثلاث (80cqh − 230px) */
  .hx-s2 .hx-ring{width:clamp(5rem,min(46cqh,78cqw,calc(80cqh - 14.375rem)),18.75rem)}
  .hx-s2 .hx-ring strong{font-size:clamp(1.25rem,min(8cqh,15cqw),3.5rem)}
  .hx-s2 .hx-ring small{font-size:clamp(0.65625rem,min(2.7cqh,5cqw),1.1875rem)}
  .hx-s2 .hx-mrings em{font-size:clamp(0.71875rem,min(2.8cqh,5.5cqw),1.1875rem)}
  .hx-s2 .hx-mrings i{font-size:clamp(0.65625rem,min(2.4cqh,4.6cqw),1rem)}
  /* البرنامج: الاسم أكبر، وبلاطات الأسبوع أطول بخطٍّ أكبر (العرض نفسه: سبع بلاطات في البطاقة) */
  .hx-s2 .hx-c2{gap:clamp(0.375rem,2cqh,1rem)}
  .hx-s2 .hx-prog-n strong{font-size:clamp(0.9375rem,min(4cqh,7.4cqw),1.75rem);line-height:1.15}
  .hx-s2 .hx-week i{padding:clamp(0.4375rem,2.4cqh,1.125rem) 1px;gap:clamp(0.1875rem,.8cqh,0.375rem)}
  .hx-s2 .hx-week em,html[lang=ar] .hx-s2 .hx-week em{font-size:clamp(0.5625rem,min(1.95cqh,3.5cqw),0.84375rem)}
  .hx-s2 .hx-week b{font-size:clamp(0.65625rem,min(2.4cqh,4.2cqw),1rem)}
  /* المكمّلات: صورٌ أكبر — ثلاثة صفوف تتقاسم ما يبقى من ارتفاع الخطّة بعد البرنامج والعنوان والوسم */
  .hx-s2 .hx-supps{--sh:clamp(2.875rem,min(17cqh,calc((100cqh - 21.875rem) / 3)),7.25rem);gap:clamp(0.125rem,.8cqh,0.5rem)}
  .hx-s2 .hx-supps strong{font-size:clamp(0.78125rem,min(2.8cqh,5.2cqw),1.1875rem)}
}
/* بطاقة أرقامٍ ضيّقة وطويلة (مكتب 901–1200: نحو 150px عرضاً): الحلقات الثلاث عمودٌ — كلّ حلقةٍ واسمها ونسبتها بجانبها —
   بدل صفٍّ من ثلاث حلقاتٍ صغيرة جداً، فيُستعمل الارتفاع الذي تركته المربّعات */
@media(min-width:561px){
  @container card (max-width:14.3125rem){
    .hx-s2 .hx-ring{width:clamp(5rem,min(46cqh,92cqw,calc(80cqh - 14.375rem)),18.75rem)}
    .hx-s2 .hx-mrings{grid-template-columns:minmax(0,1fr);justify-items:stretch;row-gap:clamp(0.375rem,1.4cqh,0.75rem)}
    .hx-s2 .hx-mrings li{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:0.625rem;row-gap:0.125rem;
      align-items:center;justify-items:start;text-align:start}
    .hx-s2 .hx-mr{grid-row:1 / 3;width:clamp(3rem,44cqw,4.5rem)}
    .hx-s2 .hx-mr b{font-size:clamp(0.8125rem,10cqw,1.0625rem)}
    .hx-s2 .hx-mrings em{align-self:end;font-size:clamp(0.75rem,9cqw,0.9375rem)}
    .hx-s2 .hx-mrings i{align-self:start;font-size:clamp(0.6875rem,8cqw,0.84375rem)}
  }
}
/* خطّةٌ أقصر من 600px يظهر فيها مكمّلان: الصفّان يتقاسمان المكان */
@media(min-width:561px){
  @container plan (max-height:37.4375rem){.hx-s2 .hx-supps{--sh:clamp(2.875rem,min(17cqh,calc((100cqh - 21.75rem) / 2)),7.25rem)}}
}

/* ── ٣ · التوصيل: ضوء المصباح (المالك: «ضو السيارة مش راكب منيح») — كان يبدأ داخل جسم الشاحنة بحافّةٍ مستطيلة (90% من
   عرضها، والمصباح بين 92 و97.7% في صورتها). الآن خلف الجسم (z-index:-1 داخل الشاحنة) من 95%، فيظهر من مقدّمتها تماماً،
   وبمركز المصباح عمودياً (55.7% من أعلى صورة الشاحنة)، وطرفه الداخليّ يذوب ── */
.hx-s3 .hx-van-beam{right:-27%;bottom:auto;top:42.7%;width:32%;height:26%;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
/* ── ٣ · التوصيل: بلا «48 ساعة حتى باب بيتك»؛ الـ400 وكلامها أكبر ── */
@media(min-width:901px){
  .hx-s3 .hx-min{margin:clamp(0.625rem,2.4vh,1.625rem) 0 0;row-gap:clamp(0.125rem,.6vh,0.375rem)}
  .hx-s3 .hx-min-n b{font-size:clamp(4.5rem,min(8.8vw,16vh),10.5rem)}
  .hx-s3 .hx-min-n small{font-size:clamp(1.5rem,2.3vw,2.5rem)}
  .hx-s3 .hx-min-l{font-size:clamp(1.125rem,min(1.6vw,3vh),1.8125rem)}
}

/* ── ٤ · مكتبة التمارين: بلا سطر «المستوى · المعدّات · النوع»، والكلام تحت الصور أكبر ── */
@media(min-width:561px){
  /* (‎--nb‎: العدّاد سطرٌ واحد الآن — «577 تمريناً» بلا سطر «مصنّفة بالعضلة…» تحته، فتكبر البطاقة الكبرى) */
  .hx-s4 .hx-lib{--sb:clamp(6rem,calc(10cqh + 4.125rem),8.25rem);--nb:clamp(2.75rem,calc(6cqh + 1.25rem),4.125rem)}
  .hx-s4 .hx-ex-body{gap:0.25rem}
  .hx-s4 .hx-ex-body b{font-size:clamp(0.9375rem,2.3vh,1.3125rem);line-height:1.2}
  .hx-s4 .hx-ex-main .hx-ex-body b{font-size:clamp(1.125rem,2.9vh,1.6875rem)}
  .hx-s4 .hx-ex-mus{font-size:clamp(0.78125rem,1.8vh,1rem)}
  .hx-s4 .hx-ex-main .hx-ex-mus{font-size:clamp(0.8125rem,1.95vh,1.09375rem)}
  .hx-s4 .hx-ex-cap{font-size:clamp(0.71875rem,1.6vh,0.90625rem)}
}

/* ── ٥ · مكتبة البرامج: بلا رقائق التفاصيل ولا شريط الأسابيع ولا «N تمارين»؛ صور الأيام أطول، والاسم والعضلات أكبر
   وفي وسط الأبيض تحت الصورة؛ «54 برنامجاً جاهزاً» أكبر يملأ مربّعه ── */
/* اسم اليوم وعضلاته معاً (‎.hx-day-t‎): سطر العضلات لم يعد ابناً مباشراً لـ‎.hx-day‎ فتُعاد له أنماطه هنا */
.hx-s5 .hx-day-t{display:grid;justify-items:center;align-content:center;gap:clamp(1px,.4cqh,0.25rem);width:100%;min-width:0;text-align:center}
.hx-s5 .hx-day-t>em{position:static;inset:auto;display:block;border-radius:0;background:none;box-shadow:none;--c:#3d4a5c;
  font-size:clamp(0.59375rem,min(1.8cqh,1.8cqw),0.78125rem);font-style:normal;font-weight:500;line-height:1.2;color:var(--c);padding:0 0.125rem}
.hx-s5 .hx-day-rest .hx-day-t>em{--c:#7b8797;color:#7b8797}
@media(max-width:560px){.hx-s5 .hx-day-t>em{display:none}}
@media(min-width:561px){
  .hx-s5 .hx-wk{grid-template-rows:auto minmax(0,1fr)}
  /* ثلاثة صفوفٍ لكلّ صفّ أيام: اليوم، الصورة، الاسم والعضلات */
  .hx-s5 .hx-days{grid-template-rows:auto minmax(0,1fr) auto clamp(0.3125rem,1.5cqh,0.6875rem) auto minmax(0,1fr) auto}
  .hx-s5 .hx-day:nth-child(-n+4){grid-row:1 / span 3}
  .hx-s5 .hx-day:nth-child(n+5){grid-row:5 / span 3}
  .hx-s5 .hx-day-t{padding-block:clamp(0.25rem,1.3cqh,0.75rem)}
  /* الصورة تملأ خانتها بنسبةٍ بين 3:4 و3:2 (قصٌّ من الجانبين حول اللاعب — في الصور الستّ في الوسط) */
  .hx-s5 .hx-day-p{container-type:size;width:100%}
  .hx-s5 .hx-day-p img{width:min(100cqw,150cqh);height:min(100cqh,133.4cqw);max-width:none;max-height:none;object-fit:cover;object-position:50% 40%}
  .hx-s5 .hx-day-p em{width:min(100cqw,150cqh);height:min(100cqh,133.4cqw);max-width:none;aspect-ratio:auto}
  .hx-s5 .hx-day i{font-size:clamp(0.65625rem,min(2.3cqh,2.6cqw),0.96875rem)}
  .hx-s5 .hx-day:not(.hx-day-n) b{font-size:clamp(0.8125rem,min(3.3cqh,3.5cqw),1.5rem)}
  .hx-s5 .hx-day-t>em{font-size:clamp(0.65625rem,min(2.3cqh,2.4cqw),1rem);font-weight:600}
  /* الـ54 وكلامها أكبر بكثير وفي وسط المربّع الأزرق */
  .hx-s5 .hx-day-n{justify-content:center;padding:clamp(0.375rem,1.6cqh,0.875rem) clamp(0.25rem,.8cqw,0.5rem);gap:clamp(0.25rem,1.4cqh,0.75rem)}
  .hx-s5 .hx-day-n b{font-size:clamp(2.125rem,min(16cqh,15cqw),8rem)}
  .hx-s5 .hx-day-n small{font-size:clamp(0.8125rem,min(4.6cqh,3.9cqw),2.125rem);line-height:1.15;padding:0 0.25rem}
}
@container prog (max-height:24.9375rem){.hx-s5 .hx-day-t>em{display:none}}

/* ═══ الهاتف (المالك عبر الـhub، 2026-10-15: «نسخة الهاتف — الهيرو أوّلاً — لا تظهر بشكلٍ جيّد») ═══
   الشاشات حتى 560px فقط؛ المكتب كما هو. */
@media(max-width:560px){
  /* (الجولة الثانية، المالك: «لسه مش واضح على التليفون») البطاقة كانت 690px ثابتة — على آيفون في سفاري لا يظهر تحت أشرطة
     المتصفّح إلّا ~664px من الشاشة كلّها، فكان ربع البطاقة السفليّ (الشعارات، البرنامج، العدّاد…) خارج الشاشة. الآن بارتفاع
     الجزء الظاهر فعلاً (‎100svh‎ − رأس الصفحة) بين 540 و690px، وما فيها يتّسع له */
  .hx{--ch:clamp(33.75rem,calc(100svh - 5.625rem),43.125rem)!important}
  /* الزرّان في سطرٍ واحد حين يتّسعان (حشوةٌ أضيق قليلاً) — كانا ينزلان سطرين فيتركان فراغاً */
  .hx-s .hx-cta .button{padding-inline:1rem}
  /* ١: المنتجات والرياضيّان أكبر — المسرح إلى حافّتي البطاقة (بلا قصّ: أطراف التكوين منتجات)؛ العنوان (h1 الصفحة) أكبر
     كما على المكتب؛ الشعارات في الوسط (كانت مزاحةً لتقع تحت العلبة على المكتب، فيخرج الصفّ الخامس من البطاقة) وأصغر
     قليلاً كي يسع الصفّ الخامس العرض */
  .hx-s.hx-s1 .hx-h,html[dir] .hx-s.hx-s1 .hx-h{font-size:clamp(2.25rem,11.2vw,3rem);line-height:1.05}
  /* المسرح بارتفاع التكوين (عرضه ÷ 1.75؛ التكوين ≈ عرضه × 0.53) لا كلّ ما بقي من البطاقة — كانت المنتجات في أسفل مسرحٍ
     طوله 365px وفوقها 197px فارغة؛ الآن النصّ في الأعلى والشعارات في الأسفل والمنتجات في الوسط بينهما */
  .hx-s1 .hx-in{grid-template-rows:auto auto auto;align-content:space-between}
  .hx-s1 .hx-art.hx-show{height:auto;aspect-ratio:1.75}
  .hx-s1 .hx-brands,html[dir=rtl] .hx-s1 .hx-brands{translate:0 0;--lw:16.5cqw}
  /* ٢: الحلقات أكبر، وبطاقة المكمّلات تظهر (صورةٌ واسمٌ لكلّ مكمّل في صفّ) — كان أسفل البطاقة فارغاً */
  .hx-s2 .hx-ring{width:5.75rem}
  .hx-s2 .hx-ring strong{font-size:1.3125rem}.hx-s2 .hx-ring small{font-size:0.65625rem}
  .hx-s2 .hx-mr{width:3.625rem}.hx-s2 .hx-mr b{font-size:0.875rem}
  .hx-s2 .hx-mrings em{font-size:0.71875rem}.hx-s2 .hx-mrings i{font-size:0.65625rem}
  .hx-s2 .hx-week i{padding:0.4375rem 1px}
  .hx-plan{grid-template-rows:max-content max-content max-content}
  .hx-s2 .hx-c3{display:flex;grid-column:1;grid-row:3}
  .hx-s2 .hx-supps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.375rem;--sh:3.875rem}
  .hx-s2 .hx-supps li,.hx-s2 .hx-supps li:nth-child(n+2){display:block}
  .hx-s2 .hx-supps a{display:flex;flex-direction:column;align-items:center;gap:0.375rem;padding:0.25rem 0.125rem;text-align:center}
  .hx-s2 .hx-supps img{margin:0;width:auto;height:calc(var(--sh) * var(--k,1))}
  .hx-s2 .hx-supps strong{font-size:0.75rem;line-height:1.2}
  .hx-s2 .hx-supps em{display:none}
  /* (الجولة الثانية) كلامٌ أوضح: العنوان الصغير، بلاطات أسبوع البرنامج، أسماء المدن، أسماء الأيام */
  html .hx-s .hx-k{font-size:0.9375rem}
  html[lang=ar] .hx-s .hx-k{font-size:1rem}
  .hx-s2 .hx-week em,html[lang=ar] .hx-s2 .hx-week em{font-size:0.625rem}
  .hx-s2 .hx-week b{font-size:0.71875rem}
  .hx-s3 .hx-city{font-size:0.75rem}
  .hx-s5 .hx-day:not(.hx-day-n) b{font-size:0.875rem}
  .hx-s5 .hx-day i{font-size:0.75rem}
  /* ٥: صور الأيام تملأ خانتها (بين 3:4 و3:2، قصٌّ من الجانبين حول اللاعب) — كانت 60×40px؛ و«برنامجاً جاهزاً» تحت الـ54 */
  .hx-s5 .hx-day-p{container-type:size;width:100%}
  .hx-s5 .hx-day-p img{width:min(100cqw,150cqh);height:min(100cqh,133.4cqw);max-width:none;max-height:none;object-fit:cover;object-position:50% 40%}
  .hx-s5 .hx-day-n{align-content:center;gap:0.25rem}
  .hx-s5 .hx-day-n small{display:block;font-size:0.6875rem;line-height:1.15;padding:0 0.125rem}
}

/* هاتفٌ بشاشةٍ ظاهرة أقصر من 780px (البطاقة أقلّ من ~690px): بطاقة المكمّلات في الشريحة ٢ لا تتّسع لها — كانت تُقصّ
   أسفل البطاقة؛ تظهر على الشاشات الأطول */
@media(max-width:560px) and (max-height:779px) and (max-width:1199px){.hx-s2 .hx-c3{display:none}}
/* ٤ على الشاشات الظاهرة القصيرة: بطاقة التمرين كانت تضيق إلى ~130px (عرضها من الارتفاع الباقي × 1.5) فيلتفّ اسمها سطرين —
   الصورة هنا بنسبة 16:9 (تُقصّ قليلاً من أعلاها وأسفلها) وبلا سطر العضلات تحت الاسم، فتتّسع البطاقة؛ والعدّاد باقٍ */
@media(max-width:560px) and (max-height:779px) and (max-width:1199px){
  .hx-s4 .hx-lib{--mb:3.625rem}
  .hx-s4 .hx-ex-main .hx-ex-mus{display:none}
  .hx-s4 .hx-lib .hx-ex-main .hx-ex-img{aspect-ratio:16/9}
  .hx-s4 .hx-lib .hx-ex-main .hx-ex-img img{object-fit:cover}
  .hx-s4 .hx-lib-l{width:min(100cqw,calc((100cqh - var(--mb) - var(--nb) - var(--g)) * 1.78))}
}
/* هاتفٌ ضيّق (حتى 380px): الزرّان في سطرٍ واحد بخطٍّ أصغر قليلاً (كانا سطرين فيضيق ما تحتهما)، وبلاطات أسبوع البرنامج بخطٍّ
   يسع «Upper/Lower» (كانت تُقصّ «Uppe») */
@media(max-width:380px){
  .hx-s .hx-cta .button{font-size:0.875rem;padding-inline:0.75rem}
  .hx-s2 .hx-week b{font-size:0.65625rem}
  .hx-s2 .hx-week em,html[lang=ar] .hx-s2 .hx-week em{font-size:0.59375rem}
}

/* ═══ الأداء (المالك، 2026-10-14: «ما بدي جهاز أي زبون يعلّق وهو على الموقع») ═══
   الصفحة مفتوحةً بلا حركة كانت تشغل نواةً ونصفاً إلى نواتين في عمليّة الرسوميّات ونواةً في الصفحة (قياس flowtest/perf_idle.py،
   ومقياس الـhub على جهاز المالك 99–100%). السبب: حركاتٌ زخرفيّة دائمة يُعاد رسمها في كلّ إطار. الشكل نفسه، والكلفة: */
/* ١. الشفق (الشريحة ١ والتذييل): طبقةٌ مموّهة (blur) ممزوجة (difference) بعرض البطاقة يُعاد حسابها في كلّ إطار — الانجراف
   نفسه (40 ثانية للدورة) بـ24 خطوة في الثانية (≈3px لكلّ خطوة تحت تمويه 10px — لا تُرى)؛ ويقف حين لا تكون الشريحة ١ في
   المقدّمة (جانبيّةً تحت الغطاء الداكن) أو الهيرو خارج الشاشة */
.aurora-l::after{animation-timing-function:steps(960)}
.hx-s1:not(.is-on) .aurora-l::after{animation-play-state:paused}
/* ٢. الهيرو خارج الشاشة أو التبويب مخفيّ (hero.js يضع ‎.is-still‎): كلّ حركاته تقف */
/* (2026-11-02) hero.js يوقفها بالـ Web Animations (pauseLoops): هذه القاعدة كانت تعيد حساب 850 عنصراً عند مغادرة الهيرو الشاشة */
/* (2026-11-02، المالك: «الموقع كتير بعلق») طبقات الحركة للشريحة الظاهرة فقط: الشرائح الأربع الأخرى لا يتحرّك داخلها شيء وكانت تحجز ذاكرة الرسم */
.hx-s:not(.is-on) *{will-change:auto!important}
/* ٣. خطوط الطريق (الشريحة ٣): كانت تحريك background-position = إعادة رسمٍ في كلّ إطار على الخيط الرئيسيّ. الآن الخطوط نفسها
   على طبقةٍ أعرض بدورةٍ واحدة (78px) تنزلق بـtransform على بطاقة الرسوميّات وحدها؛ التلاشي عند طرفها باقٍ على ‎i‎ */
.hx-road i{overflow:hidden;background:none}
.hx-road i::before{content:'';position:absolute;top:0;bottom:0;left:0;right:-4.875rem;will-change:transform;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 2.125rem,transparent 2.125rem 4.875rem)}
.hx-s.is-on .hx-road i{animation:none}
.hx-s.is-on .hx-road i::before{animation:hx-road-x 1.2s linear infinite}
@keyframes hx-road-x{to{transform:translateX(-4.875rem)}}
/* ٤. الشرطات الجارية على المسار (الشريحة ٣): كانت تحريك mask-position على الصورة = إعادة رسمٍ في كلّ إطار. الآن القناع على
   الغلاف (picture، أعرض بدورةٍ من كلّ جانب) والغلاف ينزلق 32px والصورة داخله تنزلق عكسه — فتبقى الصورة في مكانها والقناع
   يجري فوقها، كلاهما translate على بطاقة الرسوميّات. بالعربية الاتجاه معكوس كما كان (الصورة مقلوبة هناك) */
.hx-strip picture{position:absolute;top:0;bottom:0;left:-2rem;right:-2rem;display:block;z-index:1;pointer-events:none;will-change:translate;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 1px,#000 0.875rem,transparent 0.9375rem) 0 0/2rem 100% repeat-x;
  mask:linear-gradient(90deg,transparent 0,#000 1px,#000 0.875rem,transparent 0.9375rem) 0 0/2rem 100% repeat-x}
.hx-strip picture .hx-flow{left:2rem;right:2rem;width:auto;-webkit-mask:none;mask:none;will-change:translate}
.hx-s3.is-on .hx-strip picture{animation:hx-flow-w 1.1s linear infinite}
.hx-s3.is-on .hx-strip picture .hx-flow{animation:hx-flow-i 1.1s linear infinite}
html[dir=rtl] .hx-s3.is-on .hx-strip picture{animation-direction:reverse}
html[dir=rtl] .hx-s3.is-on .hx-strip picture .hx-flow{animation-direction:reverse}
@keyframes hx-flow-w{from{translate:0 0}to{translate:2rem 0}}
@keyframes hx-flow-i{from{translate:0 0}to{translate:-2rem 0}}
/* ٥. اليوم الأزرق (الشريحة ٥): hero.js ينقل ‎.is-lit‎ مرّةً في الثانية؛ الأزرق يظهر ويخبو بتلاشٍ قصير (شفافيّة) والكلام يبيضّ
   معه — بدل 28 حركةً دائمة (لونٌ يُعاد حسابه في كلّ إطار) */
.hx-s5.is-on .hx-day:not(.hx-day-n)::before,.hx-s5.is-on .hx-day:not(.hx-day-n) :is(i,b,small),.hx-s5.is-on .hx-day:not(.hx-day-n)>em{animation:none}
.hx-s5 .hx-day:not(.hx-day-n)::before{transition:opacity .22s linear}
.hx-s5 .hx-day:not(.hx-day-n)>i,.hx-s5 .hx-day-t>*{transition:color .2s linear}
.hx-s5 .hx-days .hx-day.is-lit::before{opacity:1}
.hx-s5 .hx-days .hx-day.is-lit>i,.hx-s5 .hx-days .hx-day.is-lit .hx-day-t>*{color:#fff}
/* ٦. الحركات البطيئة أو الصغيرة بإطاراتٍ أقلّ (الفرق لا يُرى، وعلى شاشات 120–165Hz كانت تُرسم كلّ إطار): البقعة الضوئيّة خلف
   بطاقات الشريحة ٢ (تنجرف 5px في الثانية: 6 خطوات/ث ≈ 1px — كانت وحدها نواةً ونصفاً من الرسوميّات، فهي تحت بطاقاتٍ زجاجيّة
   متوهّجة يُعاد مزجها كلّها)، خطوط الطريق والمسار (30/ث)، العجلتان (60/ث سقفاً)، وتبادل صورتي التمرين (≈30/ث في كلّ تلاشٍ) */
.hx-s.is-on .hx-blob-a{animation-timing-function:steps(84)}
.hx-s.is-on .hx-road i::before{animation-timing-function:steps(36)}
.hx-s3.is-on .hx-strip picture,.hx-s3.is-on .hx-strip picture .hx-flow{animation-timing-function:steps(33)}
.hx-s3.is-on .hx-wh{animation-timing-function:steps(54)}
.hx-s4.is-on .hx-ex :is(.hx-f1,.hx-st0,.hx-st1){animation-timing-function:steps(20)}
@media(prefers-reduced-motion:reduce){
  .hx-road i::before,.hx-strip picture,.hx-strip picture .hx-flow{animation:none!important}
}
/* ‖ refine end ‖ */