/*
Theme Name: Tyreon
Theme URI: https://tyreon.com
Description: Egypt's premier tire shop directory theme
Version: 2.0.0
Author: Tyreon Team
Text Domain: tyreon
*/

/* ============================================
   TOKENS
   ============================================ */
:root {
  /**
   * **الأسطحُ والحدودُ من لوحةِ البوّابةِ — مش لوحةً محايدةً تانية.**
   *
   * القيمُ القديمةُ كانت رماديّاتٍ محايدةً (`#f8f9fa` · `#dee2e6`)، ولوحةُ
   * البوّابةِ **مصبوغةٌ بالنيڤي** (`#f6f8fc` · `#e2e8f0`). الفرقُ نقطتانِ
   * أو تلاتةٌ في كلِّ قناةٍ — مايتسمّاش بالعين، بس الوجهانِ بيتفتحوا في
   * نفسِ الجلسةِ من نفسِ القايمة، والرماديُّ المحايدُ جنبَ المصبوغِ بيقرا
   * «أقدم». والمصدرُ: `--t-*` في `plugins/tyreon-ui/app/src/index.css`.
   *
   * و`--c-sur3` مالوش نظيرٌ في البوّابةِ (عندَها سطحانِ)، فاتشتقَّ خطوةً
   * من `--c-sur2` في نفسِ العائلةِ بدل ما يفضلَ رماديًّا وحدَه وسطَ لوحةٍ
   * مصبوغة.
   */
  --c-bg:        #f6f8fc;
  --c-sur:       #ffffff;
  --c-sur2:      #f4f7fb;
  --c-sur3:      #e8eef7;
  --c-bor:       #e2e8f0;

  /* ── BRAND (ADR-027) ──────────────────────────────────────────────────
     One blue. The theme carried two — #1B6FE8 here and #1B4FD8 in
     tyreon-modern.css — so a component rendered whichever its token happened
     to reach for. The owner picked the deeper one from the identity artwork
     (2026-07-27); every other blue in the theme now resolves to this.
     Changing the brand colour is now this one line. */
  --c-pri:       #1B4FD8;
  --c-pri-d:     #1640B0;   /* hover / pressed */
  --c-pri-l:     #EEF3FF;   /* pale wash behind badges and callouts */
  /* The wordmark, hero and footer navy from the identity. It already existed
     but only as --sb-bg, named for the sidebar it happened to be used in
     rather than for what it is. A brand colour needs a brand name. */
  --c-ink:       #0F1E3C;
  --c-ink-2:     #1E3055;
  /* ── SEMANTIC ─────────────────────────────────────────────────────────
     Each has three jobs and needs three values: the FILL (a badge, a bar, an
     icon), the pale WASH behind it (-l), and a TEXT-safe darker variant (-d).
     The third one is not decoration: #10b981 is 2.54:1 on white and #ef4444 is
     3.76:1 — both fail AA as body text, and both were being used as body text.
     The codebase had already invented the darker variants ad hoc (#047857 in
     14 places, #b45309 in 12, #b91c1c in 6) without naming them, so they drifted
     — five different greens, four ambers. Named once, used everywhere. */
  --c-grn:       #10b981;
  --c-grn-l:     #d1fae5;
  --c-grn-d:     #047857;   /* 5.5:1 on white — safe as text */
  --c-amb:       #f59e0b;
  --c-amb-l:     #fef3c7;
  --c-amb-d:     #b45309;   /* 5.0:1 */
  --c-red:       #ef4444;
  --c-red-l:     #fee2e2;
  --c-red-d:     #b91c1c;   /* 6.5:1 */
  /* Violet has no fill/wash counterpart — it exists only as a text accent for
     the agent/team surfaces, so only the -d value is declared. */
  --c-vio-d:     #5b21b6;   /* 9.0:1 */

  /* الحبرُ نيڤي العلامةِ لا أسودَ رماديًّا — نفسُ `--t-txt` في البوّابة.
     ١٦٫٥٢:١ على الأبيضِ بدل ١٧٫٧٤ (الاتنانِ فوقَ الحدِّ بأضعاف)، والمكسبُ
     إن الحبرَ بقى من عائلةِ العلامةِ لا لونًا محايدًا جايًا من مكانٍ تاني. */
  --c-txt:       #0f1e3c;
  --c-txt2:      #475569;
  --c-txt3:      #61708a; /* نظيرُ `--t-txt3` في البوّابة. الأصلُ كان #9ca3af (٢٫٦:١ — تحتَ الحدّ)
                            ورُفعَ لـ#6b7280 (٤٫٨:١) في S0-3b؛ و#64748b ٤٫٧٦:١ — نفسُ الأمانِ وبنفسِ الصبغة. */

  /**
   * **الكسوةُ الواحدةُ — والاتّجاهُ هنا مالوش موك-أب، المالكُ قالَه بنفسِه.**
   *
   * ٢٠٢٦-٠٨-٢٥: *«البوّابةُ شكلُها كويسٌ جدًّا وترتيبُها كويس، لكنّ
   * البلاتفورمَ للمستخدمِ العاديِّ أو الزائرِ شكلُه لسه قديم»*.
   *
   * فالهدفُ مش تصميمٌ جديدٌ يتخترعُ للوجهِ العامّ — الهدفُ إنّه **يوصلَ
   * لنظامِ البوّابةِ اللي المالكُ راضٍ عنه**. والفرقُ المقيسُ بينَ
   * النظامينِ كان في تلاتِ حاجاتٍ بس، والخطُّ كان واحدًا خلاص:
   *
   *   نصفُ القطر   ٨ · ١٢ · ١٦        →  ١٠ · ١٤ · ١٨   (`tailwind.config.js`)
   *   لونُ الظلِّ   `rgba(0,0,0,…)`     →  `rgb(15 30 60 / …)` — مصبوغٌ بالنيڤي
   *   طبقاتُه      واحدةٌ               →  اتنتانِ: ضيّقةٌ تحدُّ، وواسعةٌ ترفع
   *
   * والأسودُ الخالصُ هو اللي بيدّي إحساسَ «قديم»: ظلٌّ محايدٌ بيبقى رماديًّا
   * على أيِّ خلفيّةٍ، والمصبوغُ بلونِ الحبرِ بيبانُ كأنّه ضوءٌ ساقطٌ على نفسِ
   * السطح. ودي مش تفصيلةً: ١٦٠ موضعًا بيقروا التوكِنز دي.
   *
   * **والقيمُ منقولةٌ لا مخترعةٌ** — لو التطبيقُ غيّرَها، الفحصُ بيحمّرُ:
   * `docs/testing/harness/validate-one-skin-two-faces.php`.
   */
  --rad:         10px;
  --rad-lg:      14px;
  --rad-xl:      18px;

  --sh-sm:       0 1px 2px rgb(15 30 60 / .06);
  --sh:          0 1px 2px rgb(15 30 60 / .06), 0 4px 16px rgb(15 30 60 / .06);
  --sh-lg:       0 8px 32px rgb(15 30 60 / .16);

  /**
   * **وصفةُ الهيرو — واحدةٌ لتمانِ لافتاتٍ ملوّنة.**
   *
   * كان فيه **خمسُ وصفاتٍ** مختلفةٍ للتدرّجِ نفسِه، وفيها ألوانٌ
   * مالهاش توكن: نيڤيانِ دخيلانِ (`#0f2057` في ٦ مواضعَ · `#0b1838` في
   * ٣) وأزرقانِ (`#3b8cff` · `#0EA5E9`). ونفسُ الوصفةِ مكتوبةٌ تلاتَ
   * مرّاتٍ بـ٥٢٪ و٥٥٪ و٦٠٪ — تلاتُ نسخٍ من قرارٍ واحدٍ اتاخدَ مرّة.
   *
   * يعني تغييرُ لونِ العلامةِ ماكانش بيوصلُ للافتاتِ دي أصلًا، ودي
   * بالظبط الحالةُ اللي ADR-027 اتعملت عشانها.
   *
   * والوصفةُ دلوقتي **من التوكِنز القانونيّةِ وحدَها**: نيڤي العلامةِ →
   * الأزرقُ → التدرّجُ الأوسط. والضوءُ الساقطُ فوقَ الوسطِ بيدّي العمقَ
   * اللي كان جايًا من السماويِّ الدخيل — من غيرِ لونٍ برّه اللوحة.
   */
  --grad-hero:
    radial-gradient(120% 100% at 50% 0%, rgb(255 255 255 / .16), transparent 62%),
    linear-gradient(135deg, var(--c-ink) 0%, var(--c-pri) 62%, var(--pri-m) 100%);

  /**
   * **سلّمُ الطباعةِ — ٦١ مقاسًا بقوا تسعةً.**
   *
   * القياس: الوجهُ العامُّ فيه **٦١ قيمةَ `font-size` مختلفةً** (١٠ · ١١ ·
   * ١٢ · ١٢٫٥ · ١٣ · ١٣٫٥ · ١٤ · ١٥ · ١٦ …). المنتجُ المتماسكُ عندَه ستّةٌ
   * أو تمانيةٌ — والواحدُ والستّونَ معناها إن **كلَّ عنصرٍ اتقاسَ بالعينِ
   * لوحدَه**، وده بالظبط اللي بيخلّي الصفحةَ تقرا «مجمَّعةً» لا «مصمَّمة».
   *
   * **والسببُ الجذريُّ إن العناوينَ ماكانش ليها مقاسٌ خالص:** القاعدةُ
   * الوحيدةُ عليها كانت وزنًا وارتفاعَ سطرٍ ولونًا، فبتقعُ على افتراضيِّ
   * المتصفّح — وكلُّ مكانٍ عايزٌ حجمًا معيّنًا كتبَه بإيدِه. فالمصدرُ مش
   * إهمالًا، هو **فراغٌ اتملا واحدًا واحدًا**.
   *
   * والسلّمُ **مقلّدٌ من البوّابةِ** (Tailwind: 12·14·16·18·20·24·30·36)
   * بس **سائلٌ**: `clamp()` بتخلّي العنوانَ يتنفّسُ بينَ التليفونِ
   * والديسكتوبِ بدل نقطةِ كسرٍ لكلِّ مقاس.
   *
   * **وارتفاعُ السطرِ أعلى من اللاتينيّ:** العربيّةُ فيها نقاطٌ فوقَ وتحتَ
   * الحرفِ، و١٫٢ اللي بتشتغلُ للإنجليزيِّ بتخلّي السطورَ تتلامسُ عندنا.
   */
  /**
   * ─────────────────────────────────────────────────────────────────
   * **السلّمُ اترفعَ لمواصفةِ المالكِ — والفرقُ إنَّ اللي عندَنا كان خجولًا.**
   *
   * المالكُ بعتَ نظامَ تصميمٍ معلَنًا فيه سلّمُ الطباعةِ بالأرقامِ:
   *
   *     H1     40/48        H2    28/36        H3    20/28
   *     Body   16/24        Small 14/20
   *
   * واللي كان عندَنا: H1 يوقفُ عندَ ٣٨ · Body ١٥ · Small ١٣٫٥. الفرقُ
   * بكسلٌ أو اتنانِ في كلِّ درجةٍ — **ومجموعُهم هو الفرقُ بينَ صفحةٍ
   * بتقولُ حاجةً وصفحةٍ بتهمسُ**. النصُّ الصغيرُ بيخلّي كلَّ حاجةٍ تبانُ
   * أقلَّ أهميّةً، والعناوينُ اللي مش أكبرَ بوضوحٍ من الجسمِ بتلغي
   * التراتبَ اللي هي أصلًا موجودةٌ عشانَه.
   *
   * **والمقاساتُ اتاخدت زيَّ ما هي؛ وارتفاعُ السطرِ لأ.**
   *
   * المواصفةُ بتقولُ Body 16/**24** = ١٫٥. ودي رقمٌ لاتينيٌّ: الحرفُ
   * العربيُّ فيه إعجامٌ فوقَ وتحتَ (نقاطُ «ب/ت/ث» و«ج/ح/خ»)، و١٫٥
   * بتخلّي النقطةَ العليا لسطرٍ تلمسَ السفلى للسطرِ اللي فوقَه. فالجسمُ
   * العربيُّ بيفضلُ على ١٫٧٥ — **مقاسُ المواصفةِ بارتفاعِ سطرٍ يقراهُ
   * العربيُّ**. ودي نفسُ القاعدةِ اللي خلّت الأرضيّةَ ١٢px لا ١٠.
   *
   * **والخطُّ:** المواصفةُ بتقولُ Poppins — **ومالوش عربيَّةٌ خالص**.
   * فالعائلةُ فضلت `IBM Plex Sans Arabic` (هندسيّةٌ وقريبةٌ في الروحِ
   * وبتقرا عربيًّا)، وPoppins مسجَّلٌ كخيارٍ للاتينيِّ وحدَه لو المالكُ
   * عايزُه — بتحميلٍ زيادةٍ.
   * `docs/product/PUBLIC-FACE-DONE-2026-08-27.md`
   */
  /**
   * ─────────────────────────────────────────────────────────────────
   * **درجةُ العرضِ — صوتُ الهيرو.**
   *
   * H1 عندَ ٤٠px كافٍ **لعنوانِ صفحةٍ**، ومش كافٍ **لجملةٍ افتتاحيّةٍ**.
   * الفرقُ بينَ «عنوانٍ» و«بيانٍ» هو الفرقُ بينَ صفحةٍ بتقولُ اسمَها
   * وصفحةٍ بتقولُ **ليه هي موجودةٌ**.
   *
   * وتراكبُ السطورِ (`1.02`) وتضييقُ التتبّعِ (`-.035em`) بيخلّوا الكتلةَ
   * تقرا **شكلًا** لا نصًّا — ودي اللي بتبني الشخصيّةَ لمّا مافيش صورةٌ.
   *
   * **والعربيّةُ محتاجةٌ حرصًا هنا**: تضييقُ التتبّعِ في اللاتينيِّ
   * بيقرّبُ الحروفَ، وفي العربيِّ **بيقرّبُ الوصلاتِ** فالكلمةُ بتلزقُ.
   * فالتتبّعُ بيترجعُ صفرًا في العربيِّ تحتَ (`html[dir=rtl]`).
   */
  --fs-display: clamp(34px, 7.4vw, 76px);

  /**
   * **سلّمُ المسافةِ — إيقاعُ الصفحةِ.**
   *
   * كانت المسافاتُ بتتكتبُ بإيدٍ في كلِّ مكانٍ، فالفراغُ بينَ الأقسامِ
   * ماكانش بيقولُ حاجةً. السلّمُ ده بيخلّي **الفراغَ أداةَ تراتبٍ**:
   * قسمٌ مرتبطٌ باللي فوقَه بياخدُ `--sp-6`، وقسمٌ جديدٌ بياخدُ `--sp-9`.
   */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: clamp(64px, 9vw, 112px);

  /**
   * **الأرضيّاتُ التلاتُ — الإيقاعُ بيتبني بيهم لا بالبطاقاتِ.**
   *
   * الحبرُ للبدايةِ والنهايةِ (هيرو · دعوةٌ)، والورقُ للمحتوى، والصبغةُ
   * للإثباتِ. صفحةٌ كلُّها ورقٌ = كلُّ الأقسامِ بتقرا بنفسِ الأهميّةِ.
   */
  --c-ink-deep: #080e1a;
  --c-ink-2:    #101a2e;

  /* شبكةُ الرسمِ الهندسيِّ — الموتيفُ اللي بيقولُ «سيّاراتٌ وهندسةٌ»
     من غيرِ ولا صورةٍ. */
  --grid-line: rgb(255 255 255 / .045);
  --rad-2xl: 24px;

  /* الحركةُ: مدّةٌ واحدةٌ ومنحنًى واحدٌ — والاختلافُ بيقرا عشوائيًّا. */
  --dur: .22s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --fs-xs:  12px;                              /* الأرضيّةُ */
  --fs-sm:  14px;                              /* Small 14/20 */
  --fs-md:  16px;                              /* Body  16/24 */
  --fs-lg:  clamp(17px, 1.6vw, 18px);
  --fs-h6:  14px;
  --fs-h5:  16px;
  --fs-h4:  clamp(17px, 1.8vw, 18px);
  --fs-h3:  clamp(18px, 2.1vw, 20px);          /* H3    20/28 */
  --fs-h2:  clamp(22px, 3vw, 28px);            /* H2    28/36 */
  --fs-h1:  clamp(28px, 4.6vw, 40px);          /* H1    40/48 */

  --fnt: 'IBM Plex Sans Arabic', 'Inter', -apple-system, sans-serif;
  --sidebar-w: 240px;
  --header-h: 60px;
  /* The mobile bottom bar's height, as a token rather than a number repeated in
     four places (.bottom-nav, .portal-bottom-nav, .mobile-bottom-nav, and the
     body padding that keeps content off it). Anything that has to sit ABOVE the
     bar — the preferences widget, floating buttons — measures from this, so a
     change to the bar moves them with it instead of leaving one behind on top
     of a nav item. */
  --bottom-nav-h: 60px;

  /* ── Aliases for token names the codebase already uses ──────────────────
   * Reported 2026-08-01: the customer's car-selection overlay is WHITE in dark
   * mode. Its background is `var(--card, #fff)` — and `--card` is not a token
   * this theme has ever defined, so the fallback wins permanently and no theme
   * switch can reach it.
   *
   * A scan found forty sites doing this, under sixteen names: --card, --c-bg2,
   * --c-muted, --c-mut, --c-border, --c-danger, --c-suc, --c-wrn… Each was
   * written from memory of what the token "should" be called, each fell back to
   * a light-mode literal, and none of them failed loudly — the page just looked
   * right in the theme the author happened to be using.
   *
   * Defining the aliases fixes all forty in one place. The alternative — editing
   * forty call sites — is forty chances to pick the wrong replacement, for the
   * same result. These are deliberately aliases and not new colours: every one
   * points at the token that already carries the value in both themes, so dark
   * mode gets its answer and nothing changes in light mode.
   *
   * New code should use the canonical names below the arrow. */
  --card:      var(--c-sur);    /* → --c-sur   */
  --c-bg2:     var(--c-sur2);   /* → --c-sur2  */
  --c-muted:   var(--c-txt3);   /* → --c-txt3  */
  --c-mut:     var(--c-txt3);   /* → --c-txt3  */
  --c-border:  var(--c-bor);    /* → --c-bor   */
  --c-danger:  var(--c-red-d);  /* → --c-red-d */
  --c-suc:     var(--c-grn);    /* → --c-grn   */
  --c-suc-l:   var(--c-grn-l);  /* → --c-grn-l */
  --c-wrn:     var(--c-amb);    /* → --c-amb   */
  --c-wrn-l:   var(--c-amb-l);  /* → --c-amb-l */
  --c-wrn-d:   var(--c-amb-d);  /* → --c-amb-d */
  --warn-l:    var(--c-amb-l);  /* → --c-amb-l */
  --err-l:     var(--c-red-l);  /* → --c-red-l */
  --c-pri10:   var(--c-pri-l);  /* → --c-pri-l */

  /* ── Stacking order, for the layers that actually collide ───────────────
   * Reported the same day: the map renders ON TOP of the mobile menu.
   *
   * That is not a bug in the map. Leaflet ships its own z-indexes — panes at
   * 400, controls at 1000 — and the drawer was at 201, chosen when nothing on
   * the page went above 200. A number picked against today's neighbours stops
   * being right the moment a library arrives with its own opinion.
   *
   * So the few layers that can overlap are named, above Leaflet's ceiling. */
  --z-drawer: 1200;   /* mobile menu + its backdrop — must clear Leaflet's 1000 */
  --z-modal:  2000;   /* dialogs and overlays, above the drawer */
}

html[data-tyreon-theme="dark"] {
  /**
   * **اللوحةُ الداكنةُ كانت لوحةَ GitHub — لا لوحتَنا.**
   *
   * `#0d1117` · `#161b22` · `#30363d` · `#c9d1d9` دي بالحرفِ ألوانُ
   * GitHub. اتاخدت وقتَ ما الوضعُ الداكنُ اتعملَ لأنّها جاهزةٌ ومجرَّبةٌ —
   * وهي فعلًا سليمةٌ في التباين. بس هي **محايدةٌ رماديّةٌ-خضراء**، ولوحةُ
   * البوّابةِ مصبوغةٌ بالنيڤي، فالوجهانِ بيبانوا من نظامينِ مختلفين لأيِّ
   * حدٍّ بيتنقّلُ بينهم في نفسِ الجلسة.
   *
   * والتحويلُ **بيرفعُ التباينَ مش بينزّلُه** (مقيسٌ على البطاقة):
   *
   *   النصُّ الأساسيّ   ١١٫٢١:١  →  ١٤٫٧٧:١
   *   النصُّ الثانويّ    ٥٫٦٢:١  →   ٨٫١٣:١
   *   النصُّ الخافت      ٤٫٦٤:١  →   ٥٫٢٠:١
   *
   * والمصدرُ `--t-*` في `plugins/tyreon-ui/app/src/index.css`.
   */
  --c-bg:   #0d111b;
  --c-sur:  #161b28;
  --c-sur2: #1c2231;
  --c-sur3: #252d3d;
  --c-bor:  #2d374a;
  --c-pri-l: rgba(27,79,216,.20);  /* ADR-027: was rgba(27,111,232,…) — the OLD brand blue; the dark tint has to be the tint of the CURRENT one */
  /**
   * **و`--c-pri-d` كمانْ — كانَ ناقصًا هنا لوحدَه.**
   *
   * `.main-nav a.active` بتحطُّ `--c-pri-d` نصًّا فوقَ `--c-pri-l` خلفيّةً.
   * ومن غيرِ النظيرِ ده كانَ #1640B0 فوقَ #17254b = **1.71** — أزرقُ غامقٌ
   * على أزرقَ غامقٍ. وتمانيةُ مواضعَ بتستعملُه كنصٍّ بنفسِ الشكلِ:
   * الهيدرُ · الشعارُ · `.badge.blue` · `.fit--alt` · `.tws-chip.is-on`.
   *
   * والاتّجاهُ بينعكسُ: «أقوى» في الفاتحِ = أغمقُ، وفي الغامقِ = **أفتحُ**.
   * #9ec2ff فوقَ نفسِ التنويرِ = 8.28.
   */
  --c-pri-d: #9ec2ff;
  --c-grn-l: rgba(16,185,129,.15);
  --c-amb-l: rgba(245,158,11,.15);
  --c-red-l: rgba(239,68,68,.15);
  --c-txt:  #e9eef7;
  --c-txt2: #a8b3c6;
  /* S0-3b raised this from #484f58 and recorded "#6e7681 ≈ 4.5:1". Measured, it
     is 4.12:1 on --c-bg and 3.77:1 on --c-sur — the surface is the lighter of
     the two and the one most muted text actually sits on, so the estimate was
     made against the easier background and still missed. #7d8590 is 5.07 / 4.64.
     Now measured by validate-dark-mode-contrast.js rather than estimated.

     ونظيرُ البوّابةِ (`--t-txt3` الداكن = #828ea3) **أعلى**: ٥٫٢٠:١ على البطاقةِ
     بدل ٤٫٦٤ — فالتوحيدُ هنا بيرفعُ الأمانَ مش بينزّلُه. */
  --c-txt3: #828ea3;
  /* غالي: "لون السعر يبقا افتح اكتر .. اريح للعين".
     ─────────────────────────────────────────────────────────────────────────
     --c-pri was NOT overridden here, alone among the accents. Green, amber, red
     and violet all get a lighter dark-mode value, under a comment right below
     explaining exactly why they need one — the brand blue was simply left out
     of that pass. #1B4FD8 on #0d1117 measures 2.60:1, and 139 places in this
     codebase set --c-pri as a text colour, so one missing override is 139
     unreadable strings. The price in the report is one of them.
     #6ea8fe measures 7.84 / 7.16.

     A blue light enough to read on near-black cannot also carry white text —
     white on #6ea8fe is 2.42:1 — so the components FILLED with the brand colour
     flip to dark text below. That pair is what makes this safe, and both halves
     are checked numerically. */
  --c-pri:  #6ea8fe;
  /* The -d variants exist to be legible on WHITE. On #0d1117 they invert the
     problem — #047857 is 2.6:1 there — so dark mode uses the lighter fills,
     which clear AA against this background. */
  --c-grn-d: #34d399;
  --c-amb-d: #fbbf24;
  --c-red-d: #f87171;
  --c-vio-d: #a78bfa;
  /* --muted's dark value moved to tyreon-modern.css, the file that declares
     it, alongside the 12 other tokens from that family that were missing one.
     Overriding a token from a file that does not own it is how the gap went
     unnoticed for so long. */
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* A11Y #15: skip-to-content link — off-screen until it receives keyboard focus. */
/* `inset-inline-start` لا `left`: ده **أوّلُ عنصرٍ** بيوصلْ له مستخدمُ
   الكيبورد، وكان بيطلعُ على الشمالِ في صفحةٍ عربيّةٍ — بعيدًا عن
   مكانِ بدايةِ القراءةِ. [[every-screen-needs-a-door]] */
.skip-link{position:fixed;top:-60px;inset-inline-start:8px;z-index:100000;background:var(--pri,#1B4FD8);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;transition:top .15s ease;}
.skip-link:focus{top:8px;outline:3px solid #fff;outline-offset:2px;}
#main{scroll-margin-top:80px;} /* keep the jump target clear of the fixed header */

body {
  font-family: var(--fnt);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-txt);
  background: var(--c-bg);
  direction: rtl;
}

body.ltr { direction: ltr; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-pri); text-decoration: none; }
a:hover { text-decoration: underline; }

/**
 * **العناوينُ بقى ليها مقاسٌ — وده اللي كان ناقصًا.**
 *
 * الشرحُ الكاملُ عند `--fs-h1` فوق. والوزنُ بيتدرّجُ كمان: العنوانُ الكبيرُ
 * ٨٠٠ والصغيرُ ٧٠٠ — **الحجمُ وحدَه مش كافيًا للتراتب**، والفرقُ بينَ
 * ١٧px و٢٠px بيتحسُّ أوضحَ لمّا الوزنُ يفرقَ معاه.
 *
 * و`text-wrap: balance` على الكبارِ: العنوانُ اللي بينكسرُ لسطرين بيسيبُ
 * كلمةً وحيدةً في التاني — والمتصفّحُ بيوزّعُهما بالتساوي لمّا نطلبَ منه.
 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--c-txt);
  line-height: 1.35;
  margin-block: 0;
}
/* ارتفاعاتُ السطرِ من المواصفةِ: 48/40 · 36/28 · 28/20. */
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.2;  letter-spacing: -.015em; text-wrap: balance; }
/**
 * **تضييقُ التتبّعِ لاتينيٌّ — وفي العربيِّ بيلزقُ الكلمةَ.**
 *
 * الحرفُ اللاتينيُّ منفصلٌ، فتقريبُه بيشدُّ الكتلةَ. والعربيُّ **موصولٌ**،
 * فتقريبُه بيقصّرُ الوصلةَ نفسَها — «محمّد» بتبقى «محمد» مضغوطةً وبتتقرا
 * أصعبَ. فالتتبّعُ بيترجعُ صفرًا هنا. [[a-fix-has-two-directions]]
 */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] .display { letter-spacing: 0; }

/**
 * **درجةُ العرضِ.**
 *
 * مش `h1` بمقاسٍ أكبرَ — دي **درجةٌ مستقلّةٌ** بارتفاعِ سطرٍ متراكبٍ
 * ووزنٍ أتقلَ. الهيرو بيستعملْها، وصفحاتُ العنصرِ لأ.
 */
.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0;
}
/* والعربيّةُ محتاجةٌ سطرًا أوسعَ شويّةً حتى في العرضِ — النقاطُ. */
html[dir="rtl"] .display { line-height: 1.16; }

/**
 * **الحركةُ بتتلغي لمّا المستخدمُ يطلبَ.**
 *
 * إعدادُ نظامٍ حقيقيٌّ بيستعملُه ناسٌ عندَهم دوارٌ حركيٌّ. وتجاهلُه
 * بيخلّي الموقعَ **مؤذيًا** لا بطيئًا بس.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.29; letter-spacing: -.01em;  text-wrap: balance; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* **العربيّةُ محتاجةٌ سطرًا أوسعَ.** `1.5` اللي بتشتغلُ للاتينيِّ بتخلّي
   الفقرةَ العربيّةَ تبانُ مضغوطةً — النقاطُ فوقَ وتحتَ الحرفِ بتاكلْ
   المسافةَ. و`max-width` بالحروفِ لا بالبكسل: السطرُ الأطولُ من ٧٥ حرفًا
   العينُ بتتوهُ في رجوعِها لأوّلِه. */
p { margin-bottom: 12px; line-height: 1.75; }
p:not([class]) { max-width: 72ch; }
p:last-child { margin-bottom: 0; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--c-bor); border-radius: 3px; }

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
/* والأدواتُ من نفسِ السلّمِ — كانت ستَّ قيمٍ منفصلةٍ عن العناوينِ تمامًا،
   فنصٌّ بـ`.text-lg` كان ممكنٌ يطلعَ أكبرَ من `h3` جنبَه. */
.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-lg  { font-size: var(--fs-lg); }
.text-xl  { font-size: var(--fs-h3); }
.text-2xl { font-size: var(--fs-h2); }
.text-3xl { font-size: 36px; }
.text-muted  { color: var(--c-txt2); }
.text-pri    { color: var(--c-pri); }
.font-bold   { font-weight: 700; }
.font-semi   { font-weight: 600; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ============================================
   LAYOUT
   ============================================ */
/**
 * ═══════════════════════════════════════════════════════════════════
 * **سلّمُ الحاوياتِ — والسؤالُ اللي بناه.**
 *
 * المالك: *«الصفحةُ فيها أجزاءٌ فاضيةٌ في الجانبِ ليه لمّا ممكنٌ تكونَ
 * ١٠٠٪؟»*.
 *
 * والقياسُ قالَ إنَّ المشكلةَ أوسعُ من رقمٍ: **خمسُ صفحاتٍ بخمسةِ عروضٍ**
 * — ٧٨٠ · ٨٦٠ · ٩٦٠ · ١٢٠٠ · ١٢٠٠ — مكتوبةً بإيدٍ في القوالبِ. يعني
 * الزائرُ بيعدّي بينَ صفحاتٍ **بيتغيّرُ عرضُها تحتَ رجلِه**، وده لوحدَه
 * بيقرا «مجمَّعةً» حتى لو كلُّ صفحةٍ لوحدَها مظبوطةٌ.
 *
 * ─────────────────────────────────────────────────────────────────
 * **بس ١٠٠٪ مش الجوابَ — والسببُ مقيسٌ لا ذوقٌ.**
 *
 * سطرُ النصِّ اللي بيعدّي **٧٥ حرفًا** العينُ بتتوهُ في رجوعِها لأوّلِه
 * (بحثُ قابليّةِ القراءةِ، وهو أوضحُ في العربيّةِ لأنَّ الكلمةَ موصولةٌ
 * والعينُ مالهاش نقاطُ ارتكازٍ زيَّ اللاتينيِّ). على شاشةِ ١٩٢٠،
 * فقرةٌ ١٠٠٪ بتبقى ~٢٤٠ حرفًا في السطرِ — **غيرَ مقروءةٍ عمليًّا**.
 *
 * فالجوابُ مش «واحدٌ» ولا «١٠٠٪»، الجوابُ **أربعُ عروضٍ لأربعِ وظائفَ**:
 *
 *   `--w-text`     ٧٢ch    نصٌّ يتقرا — فقرةٌ · شرحٌ · شروطٌ
 *   `--w-content`  ١٣٦٠px  الافتراضيُّ — نماذجُ · قوائمُ · تفاصيلُ
 *   `--w-wide`     ١٦٤٠px  شبكاتٌ وخرائطُ — الفراغُ هنا خسارةٌ
 *   full-bleed             الأشرطةُ واللافتاتُ — عرضُ الشاشةِ
 *
 * والافتراضيُّ طلعَ من ١٢٠٠ لـ**١٣٦٠**: ١٢٠٠ رقمُ شاشةِ ٢٠١٥، وعلى
 * ١٩٢٠ بيسيبُ ٣٦٠px فاضيةً كلَّ ناحيةٍ — وده بالظبط اللي المالكُ شافَه.
 *
 * **والهامشُ بقى سائلًا**: ١٦px على التليفونِ و٤٠px على الديسكتوبِ.
 * هامشٌ ثابتٌ ١٦ على شاشةٍ كبيرةٍ بيخلّي المحتوى **يلزقُ في الحافّةِ**.
 */
:root {
  --w-text:    72ch;
  --w-content: 1360px;
  --w-wide:    1640px;
  --gutter:    clamp(16px, 3vw, 40px);
}

.tyreon-container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* شبكاتٌ وخرائطُ — الفراغُ الجانبيُّ هنا خسارةٌ لا راحةٌ. */
.tyreon-container--wide { max-width: var(--w-wide); }

/* نصٌّ يتقرا — بالحروفِ لا بالبكسل، فبيتبعُ مقاسَ الخطِّ لوحدَه. */
.tyreon-container--text { max-width: var(--w-text); }

/* والخروجُ للحافّةِ من جوّا حاويةٍ — للأشرطةِ والخرائطِ. */
.tyreon-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 32px; }
.mt-6 { margin-top: 48px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 32px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none !important; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
  height: var(--header-h);
  background: var(--c-sur);
  border-bottom: 1px solid var(--c-bor);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sh-sm);
}

.site-header .inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-pri);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo:hover { text-decoration: none; color: var(--c-pri-d); }

/**
 * **الإصبعُ مش الفأرةَ** — أهدافُ لمسٍ ٤٤px على الأجهزةِ اللمسيّةِ.
 *
 * مقيسٌ ٢٠٢٦-١٠-١٠ على ١٦ سطحًا عامًّا: الشعارُ وأزرارُ التفضيلاتِ أقلُّ
 * من ٤٠px ارتفاعًا على الموبايلِ — في **كلِّ** صفحةٍ، لأنّهمْ في الرأسِ
 * المشترَكِ. والهدفُ الصغيرُ بيتداسُ غلطًا أو مابيتداسش.
 *
 * ⚠️ **والشرطُ  لا عرضُ الشاشةِ**: السببُ الحقيقيُّ هو
 * الإصبعُ، لا ضيقُ النافذةِ. فتابلتٌ عريضٌ بإصبعٍ بياخدْها، وكمبيوترٌ
 * بنافذةٍ ضيّقةٍ وفأرةٍ بيفضلْ بكثافتِه. [[measure-mobile-not-screenshot-it]]
 */
@media (pointer: coarse) {
  .site-logo { min-height: 44px; }
}

/* Any logo fits INSIDE the bar — whatever is uploaded, forever.
 *
 * the_custom_logo() prints the image at whatever size the media library
 * registered, with hard width/height attributes and no CSS of its own. The
 * header is a fixed 60px, so a logo taller than that simply hangs out of it —
 * which is what happened the first time a real logo was uploaded.
 *
 * Written as a rule about the SLOT rather than a size for one picture: bound by
 * the header's own token, so changing --header-h moves this with it, and the
 * next logo — taller, wider, a different aspect ratio — is contained without
 * anyone remembering to come back here.
 *
 * max-height derives from --header-h so the two cannot drift apart. object-fit
 * keeps the aspect ratio no matter what the intrinsic attributes say; width:auto
 * is what lets max-height win over the width attribute WordPress emits.
 * max-width stops a wide mascot logo from eating the navigation beside it. */
/* The custom logo is a SIBLING of .site-logo, not a child — WordPress gives it
   its own .custom-logo-link anchor (see header.php). Sized here so it occupies
   the same slot the fallback would. */
.site-header .custom-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;   /* no descender gap under the image */
}

.site-header .custom-logo,
.site-logo img,
.site-logo .custom-logo {
  /* var(--header-h, 60px) with the fallback, not var(--header-h) bare. An
     undefined custom property makes the whole calc() invalid at computed-value
     time, and an invalid max-height is not ignored — it resolves to `none`, so
     the constraint disappears entirely and the logo overflows again. The rest
     of the theme already writes it this way (tyreon-modern.css); this rule did
     not, which is a silent way to lose the fix in any context where the token
     is not in scope. */
  max-height: calc(var(--header-h, 60px) - 14px);
  width: auto;
  max-width: 190px;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  /* Tighter still on mobile: the bar carries the search and the menu button
     too, and a logo at desktop width pushes them off the row.
     .site-header .custom-logo is listed here for the same reason it is listed
     above: once the custom logo became a SIBLING of .site-logo instead of a
     child, both `.site-logo img` and `.site-logo .custom-logo` stopped matching
     anything, and this cap silently applied to nothing — the uploaded logo kept
     its 190px desktop width on a 360px screen and pushed the rest of the row
     off, which is exactly what the comment above predicted. A rule that matches
     no element fails silently; there is no warning anywhere. */
  .site-header .custom-logo,
  .site-logo img,
  .site-logo .custom-logo { max-width: 132px; }
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--c-pri), var(--c-pri-d));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
}

/* Main nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.main-nav a {
  padding: 7px 14px;
  border-radius: var(--rad);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-txt2);
  text-decoration: none;
  transition: all .12s;
  white-space: nowrap;
}

.main-nav a:hover {
  background: var(--c-sur2);
  color: var(--c-txt);
  text-decoration: none;
}

.main-nav a.active,
.main-nav a[aria-current="page"] {
  background: var(--c-pri-l);
  color: var(--c-pri-d);
  font-weight: 600;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Hamburger - mobile only */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--c-txt2);
  /* `margin-inline-end` بتدفعَه لآخرِ الصفِّ في الاتّجاهين. */
  margin-inline-end: auto;
}

.mob-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  /* Was 200 — under Leaflet's map panes (400) and controls (1000), so on any
     page carrying a map the menu opened UNDERNEATH it. */
  z-index: var(--z-drawer, 1200);
}

.mob-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: var(--c-sur);
  z-index: calc(var(--z-drawer, 1200) + 1);   /* one above its own backdrop */
  padding: 20px 16px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
}

body.ltr .mob-nav { right: auto; left: 0; transform: translateX(-100%); }

/* Both selectors, and the reason is specificity rather than direction.
 *
 * `body.ltr .mob-nav` weighs (0,2,1); `.mob-nav.open` weighs (0,2,0). In Arabic
 * the closed state is plain `.mob-nav` (0,1,0), so `.open` outranks it and the
 * drawer slides in. In English the ltr rule outranks `.open`, so the drawer
 * stayed at translateX(-100%) — off-screen, forever. The menu button worked, the
 * class was added, and nothing moved.
 *
 * Matching the specificity rather than reaching for !important: the same
 * collision elsewhere (.stores-side) was solved with !important, which works and
 * then makes the next override impossible. */
.mob-nav.open,
body.ltr .mob-nav.open {
  transform: translateX(0);
}

.mob-nav-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.mob-nav-close button {
  width: 32px;
  height: 32px;
  background: var(--c-sur2);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  cursor: pointer;
  font-size: 16px;
  color: var(--c-txt2);
}

.mob-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--rad);
  color: var(--c-txt);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* The account widget already sits on --c-sur2, so the shared :hover below would
   be invisible on it — it would look unclickable on hover, which is the whole
   thing being fixed. */
.mob-nav .mob-nav-me:hover { box-shadow: inset 0 0 0 1px var(--c-pri); }

.mob-nav a:hover {
  background: var(--c-sur2);
  text-decoration: none;
}

/* ============================================
   BUTTONS
   ============================================ */
.tyreon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--rad);
  font-family: var(--fnt);
  font-size: var(--fs-h6);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .13s;
  border: none;
  white-space: nowrap;
  line-height: 1.2;
}

.tyreon-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh); }
.tyreon-btn:active { transform: translateY(0); }

.tyreon-btn.primary     { background: var(--c-pri); color: #fff; }
.tyreon-btn.primary:hover { background: var(--c-pri-d); }
.tyreon-btn.outline     { background: transparent; color: var(--c-pri); border: 1.5px solid var(--c-pri); }
.tyreon-btn.outline:hover { background: var(--c-pri-l); }
.tyreon-btn.ghost       { background: transparent; color: var(--c-txt2); border: 1px solid var(--c-bor); }
.tyreon-btn.ghost:hover { background: var(--c-sur2); color: var(--c-txt); }
.tyreon-btn.success     { background: var(--c-grn); color: #fff; }
.tyreon-btn.danger      { background: var(--c-red); color: #fff; }
.tyreon-btn.sm          { padding: 6px 14px; font-size: var(--fs-xs); }
.tyreon-btn.xs          { padding: 4px 10px; font-size: var(--fs-xs); font-weight: 500; }
.tyreon-btn.full        { width: 100%; justify-content: center; }
.tyreon-btn[disabled]   { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================
   CARDS
   ============================================ */
/**
 * **البطاقةُ نفسُها على الوجهين.**
 *
 * البوّابةُ بترسمُ بطاقتَها `rounded-lg border border-line bg-surface
 * shadow-card`، ودي بقت **نفسَ القيمِ بالحرفِ** بعدَ توحيدِ التوكِنز —
 * ما عدا الظلّ: هنا كان `--sh-sm` (طبقةٌ ضيّقةٌ بتحدُّ وبس) وهناك الطبقتانِ
 * (`--sh`: ضيّقةٌ تحدُّ + واسعةٌ ترفع).
 *
 * والفرقُ ده هو «مسطّحةٌ» مقابلَ «مرفوعةٌ» — وبيتكرّرُ في **٢٥٤ موضعًا**،
 * فهو من أكبرِ اللي بيخلّي الوجهَ العامَّ يقرا مختلفًا عن البوّابة.
 */
.tyreon-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 20px;
  box-shadow: var(--sh);
}

/* The same card at list density. 22 places hand-roll exactly this with an
   inline style (padding:12px, no shadow) because the standard 20px is too
   generous inside a list — so the variant already exists in practice, it just
   had no name and therefore drifted. Naming it gives those call sites somewhere
   to move to without changing how they look (DUP-47). */
.tyreon-card.compact { padding: 12px; box-shadow: none; }

/* A form field's label. 20 places declare these five properties inline,
   identically. Purely additive: the declarations are copied verbatim, so
   adopting the class changes nothing visually. */
.tyreon-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-txt3);
  margin-bottom: 4px;
}

/* An image filling its frame — 26 identical inline copies. The parent supplies
   the box; this only says how the picture sits in it. */
.tyreon-cover { width: 100%; height: 100%; object-fit: cover; }

.tyreon-card h4 { font-size: 15px; margin-bottom: 8px; }

.card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-bor);
  gap: 12px;
}

/* `h2` معاه لا بدلَه — `.card-hdr` مستعملٌ في البوّاباتِ الكلاسيك،
   واللي اتغيّرَ هنا هو مستوى العنوانِ في الأسطحِ العامّةِ وحدَها. */
.card-hdr h3, .card-hdr h2 {
  font-size: var(--fs-h5);
  font-weight: 700;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.badge.active, .badge.approved, .badge.accepted, .badge.completed { background: var(--c-grn-l); color: #047857; }
.badge.pending, .badge.pending_review, .badge.pending_admin, .badge.pending_supervisor, .badge.in_progress, .badge.under_review { background: var(--c-amb-l); color:var(--c-amb-d,#b45309); }
.badge.rejected, .badge.cancelled, .badge.overdue { background: var(--c-red-l); color: #b91c1c; }
.badge.gray { background: var(--c-sur2); color: var(--c-txt2); }
.badge.blue { background: var(--c-pri-l); color: var(--c-pri-d); }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: 16px; }

label, .tyreon-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-txt2);
  margin-bottom: 6px;
}

.req { color: var(--c-red); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select,
.tyreon-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--c-bor);
  border-radius: var(--rad);
  font-family: var(--fnt);
  font-size: var(--fs-h6);
  color: var(--c-txt);
  background: var(--c-sur);
  outline: none;
  transition: all .13s;
  -webkit-appearance: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--c-pri);
  box-shadow: 0 0 0 3px rgba(27,111,232,.1);
}

/* Form controls do NOT inherit font-family from body — browsers give them their
   own default. .tyreon-input sets it, but 26 fields across the portals are
   styled with an inline `style="width:100%;padding:9px 12px;border:…"` that
   reimplements that class and omits the font, so those fields have been
   rendering in the browser's default face instead of IBM Plex Sans Arabic —
   visibly wrong next to every other field, in Arabic especially.

   Fixing the element rather than the 26 call sites: one line, no markup churn,
   and it also covers any field written the same way tomorrow. Extracting those
   inline styles onto the class is still worth doing (DUP-47) — this just stops
   the visible symptom now, without a risky sweep. */
input, select, textarea, button { font-family: var(--fnt); }

textarea { min-height: 100px; resize: vertical; line-height: 1.6; }

select { cursor: pointer; }

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .input-row { grid-template-columns: 1fr; }
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-bor);
}

/* Checkbox */

/* ============================================
   TABLES
   ============================================ */

.tyreon-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.tyreon-table th {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-txt3);
  padding: 12px 16px;
  text-align: right;
  border-bottom: 1px solid var(--c-bor);
  background: var(--c-sur2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.tyreon-table td {
  font-size: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--c-bor);
  color: var(--c-txt);
  vertical-align: middle;
}

.tyreon-table tr:last-child td { border-bottom: none; }
.tyreon-table tr:hover td { background: var(--c-sur2); }

.table-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--c-txt3);
  font-size: var(--fs-sm);
}

/* ============================================
   FILTER BAR
   ============================================ */

/* Filter chips — a row of toggles above a list, one of which is active (the
   review queue's "browse by kind of request" tabs).

   Deliberately NOT .portal-tab-chips: despite the name, that class is the
   MOBILE BOTTOM NAVIGATION BAR — display:none on desktop and a fixed bar at the
   bottom of the screen on mobile. Anything put in it disappears on desktop and
   lands inside the bottom nav on a phone. This is its own component. */
.tyreon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tyreon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--c-bor);
  background: var(--c-sur);
  color: var(--c-txt);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tyreon-chip:hover { border-color: var(--c-pri); color: var(--c-pri); }
.tyreon-chip.active {
  background: var(--c-pri);
  border-color: var(--c-pri);
  color: #fff;
}
@media (max-width: 780px) {
  /* one scrollable line rather than a wall of wrapped chips on a phone */
  .tyreon-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .tyreon-chips::-webkit-scrollbar { display: none; }
}

/* ============================================
   KPI GRID (portal overview stat cards)
   v63.2: CRITICAL FIX — .kpi-grid / .kpi-card / .kpi-icon / .kpi-val /
   .kpi-lbl are used in agent-portal.php and staff-portal.php's overview
   pages (the very first thing rendered on those portals) but had ZERO
   CSS rules anywhere in this file. Completely unstyled — no grid, no
   card box, no responsive collapse — which is exactly why the overview
   page showed as a row of tall, empty, unreadable strips on mobile: an
   <a> with no display rule set and no width constraint, four of them in
   a row, is exactly what breaks like that. This is likely the single
   biggest cause of "كل البوابات بايظة ع الموبايل."
   ============================================ */

/* ============================================
   QUICK ACTIONS (portal overview shortcuts)
   v63.2: same bug as .kpi-grid right above — .quick-actions/.qa-card/
   .qa-icon used in agent-portal.php with zero CSS anywhere.
   ============================================ */

/* ============================================
   STAFF PORTAL — v63.2: was entirely unstyled (see CHANGELOG). Reuses
   the shared .portal-wrap/.portal-layout/.portal-sidebar/.portal-main
   structure (nav links already inherit styling from ".portal-sidebar a"
   above), so only these staff-portal-specific inner pieces needed real
   CSS: the sidebar brand header, the sidebar user block, the mobile
   topbar, and the store cards on the "My Stores" tab.
   ============================================ */

.sidebar-nav { display: flex; flex-direction: column; }

.tyreon-topbar {
  display: none; /* only shown on mobile via media query below */
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--c-sur, #fff);
  border-bottom: 1px solid var(--c-bor, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 50;
}
.dot { position: absolute; top: 0; inset-inline-end: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red, #ef4444); }

@media (max-width: 780px) {
  .tyreon-topbar { display: flex; }
}

.store-card-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.store-card-name { font-weight: 700; font-size: var(--fs-h5); }
.store-card-rating { font-size: 12px; margin: 2px 0; letter-spacing: 1px; }
/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **صفُّ أفعالِ بطاقةِ المحلِّ — زرَّانِ متساويانِ بحجمِ إصبعٍ.**
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * المالك (٢٠٢٦-٠٨-٣١): *«شكلُ الزرِّ محتاجٌ يكونَ أفضلَ وتنسيقٌ أفضلُ»*.
 *
 * وكانوا `xs` بعرضِ نصِّهما، فالصفُّ بيطلعُ **غيرَ متوازنٍ** («اتصال» أضيقُ
 * من «الاتجاهات») ومزحومًا في الركنِ. والبطاقةُ كلُّها بتنتهي بحاجةٍ شكلُها
 * ناقصٌ.
 *
 * وتلاتةُ فروقٍ مقصودةٍ:
 *
 *   ١· **متساويانِ ومالِيانِ الصفَّ** (`flex:1`) — البطاقةُ بتقفلُ بخطٍّ
 *      مستقيمٍ، والعينُ مابتقفش تقارنُ عرضينِ مختلفينِ.
 *
 *   ٢· **ارتفاعٌ ٤٠px** — `xs` كانت أصغرَ من هدفِ الإصبعِ. وبطاقاتُ الدليلِ
 *      بتتقرا على الموبايلِ أكترَ من الديسكتوب.
 *
 *   ٣· **والأوّلُ ممتلئٌ** — «اتصالٌ» هو الفعلُ اللي الزائرُ جايٌّ يعملُه،
 *      و«الاتجاهاتُ» بعدَه. زرّانِ بنفسِ الوزنِ بيخلّياهُ يفكّرُ في اختيارٍ
 *      مالوش لازمةٌ.
 *
 * والتنسيقُ **مقصورٌ على البطاقةِ**: `.tyreon-btn.ghost` مستعمَلٌ في مطارحَ
 * كتيرةٍ، وتغييرُه عامًّا كانَ هيحرّكْ أزرارًا مالهاش علاقةٌ.
 */
.store-card-actions {
  display: flex;
  gap: var(--sp-2, 8px);
  margin-top: var(--sp-3, 12px);
  padding-top: var(--sp-3, 12px);
  border-top: 1px solid var(--c-bor);
}

.store-card-actions > .tyreon-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* الأوّلُ هو الفعلُ المقصودُ — ممتلئٌ لا شبحيٌّ. */
.store-card-actions > .tyreon-btn:first-child {
  background: var(--c-pri);
  border-color: var(--c-pri);
  color: #fff;
}
.store-card-actions > .tyreon-btn:first-child:hover {
  background: var(--c-pri-d, var(--c-pri));
  border-color: var(--c-pri-d, var(--c-pri));
  color: #fff;
}

/* ============================================
   MISSING CLASSES — وفتحةُ التعليقِ دي كانت **مفقودةً من أوّلِ كوميتٍ**.

   والأثرُ مش تجميليًّا: قفلةُ تعليقٍ بلا فتحةٍ خطأُ تحليلٍ في CSS، فالمُحلِّلُ
   بياخدُ نصَّ التعليقِ كلَّه **كمحدِّدٍ** لحدِّ أوّلِ قوسٍ — يعني قاعدةُ
   `.welcome-banner` كانت **بتترمي بالكاملِ** وهي مكتوبةٌ ومقروءةٌ في
   الملفِّ: خلفيّتُها ولونُها وحافّتُها كلُّهم ماكانوش بيوصلوا.

   ونفسُ صنفِ العيبِ اللي بلعَ نصَّ صفحةِ «اختارْ عربيّتَك» في `<style>`
   مش متقفلٍ — نصٌّ سليمٌ في الملفِّ ومالوش أثرٌ على الشاشةِ.
   [[unclosed-raw-text-eats-the-page]]

   Found via a systematic scan comparing every class= used across all
   portal templates against what's actually defined here. These are used
   repeatedly across admin/agent/merchant/supervisor portals with zero
   styling.
   ============================================ */

.badge-blue  { background: var(--c-pri-l, #eff6ff); color: var(--c-pri,#1B4FD8); }
.badge-green { background: var(--c-grn-l, #ecfdf5); color: #047857; }
.badge-red   { background: var(--c-red-l, #fef2f2); color: #b91c1c; }
.badge-gray  { background: var(--c-sur2, #f1f5f9); color: var(--c-txt2, #64748b); }
.badge-blue, .badge-green, .badge-red, .badge-gray {
  display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 9px; border-radius: 20px;
}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all .15s;
}

.stat-card:hover {
  border-color: var(--c-pri);
  box-shadow: var(--sh);
}

.stat-card .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 4px;
}

.stat-card strong {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-txt);
}

.stat-card span {
  font-size: 13px;
  color: var(--c-txt2);
  font-weight: 500;
}

.stat-card .trend {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  width: fit-content;
}

.stat-card .trend.up { background: var(--c-grn-l); color: #047857; }
.stat-card .trend.down { background: var(--c-red-l); color: #b91c1c; }

/* ============================================
   GRID LAYOUTS
   ============================================ */
.tyreon-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.tyreon-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tyreon-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .tyreon-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tyreon-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tyreon-grid-4,
  .tyreon-grid-3,
  .tyreon-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================
   PORTAL LAYOUT (ADMIN / SUPERVISOR / AGENT / MERCHANT)
   ============================================ */

/* Sidebar */
.portal-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--c-sur);
  /**
   * **حدٌّ منطقيٌّ — القاعدةُ ورقعتُها بقوا واحدةً.**
   *
   * كان `border-left` هنا و`body.ltr .portal-sidebar { border-left: none;
   * border-right: … }` تحتَ — قاعدتانِ بيقولوا حاجةً واحدة: «الحدُّ على
   * الناحيةِ اللي القراءةُ بتبدأ منها».
   *
   * والإنجليزيُّ **سطحٌ حيٌّ**: اللغةُ كوكيز (`tyreon_lang`)، وللزائرِ زرُّ
   * تبديلٍ في القايمة، و`dir="ltr"` بيترسمُ فعلًا — مقيسٌ بجلبِ الصفحة.
   * يعني الرقعةُ دي مش احتياطًا نظريًّا، هي بتشتغلُ عند ناس.
   *
   * والمشكلةُ في النمطِ نفسِه لا في السطر: **أيُّ قاعدةٍ جديدةٍ لازم حدٌّ
   * يفتكرَ يكتبَ رقعتَها**، واللي بينساها مايبانش غلطُه إلّا لمّا حدٌّ يقلبَ
   * اللغة. `border-inline-start` بتلغي السؤالَ من أصلِه.
   */
  border-inline-start: 1px solid var(--c-bor);
  padding: 20px 12px;
  min-height: calc(100vh - var(--header-h));
  position: sticky;
  top: var(--header-h);
  align-self: flex-start;
  overflow-y: auto;
}

.portal-sidebar a,
.portal-sidebar button.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--rad);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-txt2);
  text-decoration: none;
  transition: all .1s;
  margin-bottom: 2px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  /* `start` = يمينٌ في العربيِّ ويسارٌ في الإنجليزيِّ — بلا رقعة. */
  text-align: start;
  font-family: var(--fnt);
}

.portal-sidebar a:hover,
.portal-sidebar button.sidebar-link:hover {
  background: var(--c-sur2);
  color: var(--c-txt);
  text-decoration: none;
}

.portal-sidebar a.active,
.portal-sidebar button.sidebar-link.active {
  background: var(--c-pri-l);
  color: var(--c-pri-d);
  font-weight: 600;
}

.portal-sidebar a .icon,
.portal-sidebar button.sidebar-link .icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Main content */

.portal-page-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.portal-page-hdr h2 {
  font-size: 22px;
  font-weight: 700;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 50;
  backdrop-filter: blur(2px);
}

/* ============================================
   STORE CARD
   ============================================ */
.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.store-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  overflow: hidden;
  transition: all .15s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.store-card:hover {
  border-color: var(--c-pri);
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.store-card-img {
  height: 160px;
  background: linear-gradient(135deg, var(--c-sur2) 0%, var(--c-sur3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* contain, not cover. Reported 2026-08-01: «الصورة الخاصة بالمنتجات مش كاملة
 * مقصوصة» — a tyre photographed on white, cropped top and bottom by a 160px
 * box.
 *
 * cover is right for a PHOTOGRAPH of a shop, where the edges carry nothing and
 * filling the frame looks better. It is wrong for what stores actually upload
 * here, which is overwhelmingly a product or a logo on a plain background —
 * the subject IS the image, and cropping it removes the thing the card exists
 * to show. A letterboxed tyre reads as a smaller picture; a cropped one reads
 * as a broken one.
 *
 * The gradient behind it is already a deliberate backdrop, so the padding this
 * leaves is a designed surface rather than a gap. */
.store-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **المسافةُ وحالةُ الفتحِ — شارتانِ فوقَ الصورةِ.**
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * من تصميمِ المالكِ المرجعيِّ ٢٠٢٦-١٠-٠٥. والاتنانِ بيجاوبوا سؤالَ الزائرِ
 * **قبلَ** ما يقرا الاسمَ («قريبٌ؟ فاتحٌ؟»)، فمكانُهما فوقَ الصورةِ لا في
 * ذيلِ البطاقةِ.
 *
 * وبيقعدوا على **ركنينِ مختلفينِ** عشانْ مايتزاحموش على بطاقةٍ ضيّقةٍ،
 * و`inset-inline` عشانْ الركنُ يتمرّى صحًّا في الإنجليزيِّ.
 */
.sc-dist, .sc-open { position: absolute; z-index: 2; pointer-events: none; }
.sc-dist {
  top: 10px; inset-inline-start: 10px;
  background: rgba(15, 23, 42, .74); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.sc-open { bottom: 10px; inset-inline-start: 10px; }
/* الشارةُ جوّاها بتسيبُ هامشَها — هي متصمَّمةٌ لسطرِ نصٍّ لا لركنٍ. */
.sc-open .badge { margin: 0; box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }

/**
 * ⚠️ **ومحدودتانِ بصندوقِهما، لا بعرضٍ افترضناهُ.**
 *
 * في وضعِ القائمةِ الصورةُ بتبقى ١٣٠px (و٩٦ تحتَ ٥٦٠)، فشارةٌ أعرضُ منها
 * بتتقصُّ عندَ `overflow:hidden` — **نفسُ عطلِ «ضمان» من بابٍ تالتٍ**. والسقفُ
 * نسبةٌ من الصندوقِ ناقصَ الهامشينِ، فمافيش عرضٌ بيكسرُها.
 */
/* والسقفُ على العنصرِ **الموضوعِ** نفسِه: نسبةُ عنصرٍ `absolute` بتتحسبُ من
   الصندوقِ الحاوي (الصورةِ)، أمّا نسبةُ ابنٍ عاديٍّ جوّاه فبتتحسبُ من أبيهِ
   المنكمشِ على محتواهُ — فتبقى سقفًا على نفسِها ومابتمنعش حاجةً. */
.sc-dist, .sc-open {
  max-width: calc(100% - 20px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-open .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 🔴 **وكانوا ١٠٫٥px — تحتَ الأرضيّةِ.** ضيّقتُ الشارتينِ لوضعِ القائمةِ
   بتصغيرِ الخطِّ، والأرضيّةُ ١٢px **مش تفضيلًا**: الحرفُ العربيُّ بيفرّقُه
   إعجامٌ، وعندَ ١٠px النقطةُ بتبقى بكسلًا — فالكلمةُ بتتخمّنُ لا بتتقرا.
   فالتضييقُ بقى **بالحشوِ** لا بالمقاسِ: نفسُ المكسبِ في العرضِ، والنصُّ
   يفضلْ مقروءًا. [[one-type-scale]] */
.stores-grid.stores-list .sc-dist { padding: 4px 7px; }

/* The avatar keeps cover: it is a small round crop where filling the circle is
   the point, and a letterboxed circle looks like a mistake. */

.store-card-body { padding: 16px; flex: 1; }

.store-card-name {
  font-size: var(--fs-h5);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--c-txt);
}

.store-card-meta {
  font-size: var(--fs-xs);
  color: var(--c-txt2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.store-card-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **صفُّ الشاراتِ بيلفُّ — شارةٌ نصُّها برّه أوحشُ من شارةٍ مش موجودةٍ.**
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * بلاغُ المالكِ ٢٠٢٦-١٠-٠٥ بلقطةٍ: *«هتلاقي الضمانَ موجودًا نصُّه والباقي
 * برّه»* — «✓ ضم…» مقصوصةً عندَ حافّةِ البطاقةِ.
 *
 * 🔑 **والميكانيكيّةُ**: الصفُّ كانَ `display:flex` **بلا `flex-wrap`**، فأربعُ
 * شاراتٍ (مفتوحٌ · النوعُ · النشاطُ · ضمانٌ) بتفيضُ على سطرٍ واحدٍ،
 * و`.store-card { overflow:hidden }` بيقصُّ الزايدَ. فالشارةُ **اتولدتْ
 * مقصوصةً**، لا اتشالتْ ولا بانتْ.
 *
 * ⚠️ **وده مش تجميليًّا**: «ضمان» معلومةُ شراءٍ. نصفُها بيتقري «ضم» — كلمةً
 * مالهاش معنًى، فالزائرُ بيفتكرُ البياناتِ مكسورةً. [[every-screen-needs-a-door]]
 *
 * والعلاجُ `wrap` لا تصغيرُ الخطِّ ولا قصُّ العددِ: الشاراتُ عددُها بيتغيّرُ
 * من محلٍّ لمحلٍّ، فأيُّ سقفٍ ثابتٍ بيقصُّ محلًّا تانٍ. [[count-is-not-a-condition]]
 */
/**
 * **وبقوا تلاتةَ صفوفٍ** (حبيبة ٢٠٢٦-١٠-١٠): «إيه هو» · «أأمنُ له» ·
 * «بيعملْ إيه». نفسُ الشكلِ بالظبطِ — اللي بيفرقْ هو السؤالُ اللي بيردُّ عليه.
 */
.store-card-foot,
.store-card-trust,
.store-card-services {
  padding: 12px 16px;
  border-top: 1px solid var(--c-bor);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/**
 * ⚠️ **والخطُّ بينَ الصفوفِ واحدٌ لا تلاتةٌ.**
 *
 * كلُّ صفٍّ بياخدُ `border-top` عشانْ يشتغلَ لمّا يكونَ هو الأوّلَ الظاهرَ —
 * والصفوفُ شرطيّةٌ، فأيُّ واحدٍ فيهم ممكنْ يغيبْ. واللي بعدَه بيشيلُ خطَّه
 * عشانْ مايبقاش فيه تلاتُ فواصلَ في بطاقةٍ واحدةٍ.
 */
.store-card-foot + .store-card-trust,
.store-card-foot + .store-card-services,
.store-card-trust + .store-card-services {
  border-top: none;
  padding-top: 0;
}
/* والشارةُ نفسُها مابتفضلش أعرضَ من سطرِها لو الاسمُ طويلٌ. */
.store-card-foot > .badge,
.store-card-trust > .badge,
.store-card-services > .badge { max-width: 100%; }

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **كارتُ المحلِّ الموحَّدُ (`.store-card.sc`) — طلبُ المالكِ ٢٠٢٦-١٠-٣٠.**
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * بلاغُه بلقطةِ موبايلٍ: الأزرارُ التلاتةُ تحتَ بعضٍ، و«اتصال» رماديٌّ بإطارٍ غيرَ أخواتِه، والكارتُ طويلٌ.
 * 🔑 **الكارتُ متعرَّفٌ في كسوتينِ**: `.store-card` هنا وفي `assets/css/tyreon-modern.css` (اللي بتتحمّلْ
 * آخرَ فبتكسبْ — `padding:16px` على الكارتِ كلِّه و`flex-direction: column` للأزرارِ تحتَ ٤٨٠px).
 * [[the-later-sheet-wins-silently]] فالشكلُ الموحَّدُ على صنفٍ تاني (`.sc`) بمحدِّدٍ أقوى — مابيعتمدش على
 * ترتيبِ التحميلِ، ومابيلمسش كروتَ البوّابةِ الكلاسيكيّةِ المجمّدةِ اللي بتستعملُ `.store-card` بماركٍ تاني.
 *
 *   · الصورةُ بنسبةٍ ثابتةٍ (١٦:٩، و٢:١ على الموبايلِ) — كلُّ الكروتِ بنفسِ الارتفاعِ.
 *   · الاسمُ ثمَّ سطرُ «فين · تليفون · منتجات» ملفوفًا (مش عمودًا) — أقصرُ بسطرينِ.
 *   · الأفعالُ: شبكةُ ٣ خاناتٍ متساويةٍ، ٤٤px (هدفُ إصبعٍ)، والمطفيُّ بلونٍ واحدٍ.
 */
.store-card.sc { padding: 0; gap: 0; }
.store-card.sc .store-card-img { height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 560px) {
  .store-card.sc .store-card-img { aspect-ratio: 2 / 1; }
}
.store-card.sc .store-card-body { padding: 12px 14px 6px; }
.store-card.sc .store-card-name { margin: 0 0 4px; line-height: 1.35; overflow-wrap: anywhere; }
.store-card.sc .store-card-meta { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
.store-card.sc .store-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.store-card.sc .sc-meta-dist { font-weight: 800; color: var(--c-pri); }
.store-card.sc .store-card-foot,
.store-card.sc .store-card-trust,
.store-card.sc .store-card-services { padding: 6px 14px; gap: 6px; border-top: 0; }
.store-card.sc .store-card-foot .badge,
.store-card.sc .store-card-trust .badge,
.store-card.sc .store-card-services .badge { margin: 0; font-size: 12px; }

/* صفُّ الأفعالِ — `.store-card-actions.sc-acts` (٠،٢،٠) بيغلبْ `.store-card-actions` في أيِّ كسوةٍ وأيِّ مقاسٍ. */
.store-card-actions.sc-acts {
  display: grid;
  /* بيلفّْ لوحدِه بدلَ تلاتِ أعمدةٍ ثابتةٍ — كارتٌ ضيّقٌ بيحطُّ الزرَّ التالتَ تحتُ بدلَ ما يقصّْ نصَّه (`validate-it-fits-every-screen`). */
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  flex-direction: row;
  gap: 8px;
  margin: auto 0 0;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--c-bor);
}
.store-card.sc .store-card-actions.sc-acts { margin-top: 8px; }
.sc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sc-act > span { overflow: hidden; text-overflow: ellipsis; }
.sc-act .ti { width: 18px; height: 18px; }
.sc-act:focus-visible { outline: 2px solid var(--c-pri); outline-offset: 2px; }
/* ألوانٌ ثابتةٌ في الوضعينِ: الأبيضُ على `--c-pri` الليليِّ (فاتحٍ) مابيتقراش. */
.sc-act--call { background: #1B4FD8; color: #fff; }
.sc-act--call:hover { background: #1640B0; color: #fff; text-decoration: none; }
.sc-act--wa { background: #15803d; color: #fff; }               /* ٥:١ معَ الأبيضِ */
.sc-act--wa:hover { background: #166534; color: #fff; text-decoration: none; }
.sc-act--dir { background: var(--c-sur); color: var(--c-txt); border-color: var(--c-bor); }
.sc-act--dir:hover { border-color: var(--c-pri); color: var(--c-pri); text-decoration: none; }
.sc-act.is-off,
.sc-act.is-off:hover {
  background: var(--c-sur2);
  color: var(--c-txt3);
  border-color: var(--c-bor);
  cursor: not-allowed;
}
/* شريطُ الرئيسيّةِ (~١٦٨px): أيقوناتٌ بسْ، بنفسِ الألوانِ. */
.store-card-actions.sc-acts--icons { padding: 8px 0 0; gap: 6px; border-top: 0; }
.sc-acts--icons .sc-act { min-height: 40px; padding: 0; }
/* عرضُ «القائمة»: الصورةُ على الجنبِ والأفعالُ بعرضِ الكارتِ تحتُ. */
.stores-grid.stores-list .store-card.sc .store-card-img { aspect-ratio: auto; }
.stores-grid.stores-list .store-card.sc .sc-acts { flex-basis: 100%; }

/* ============================================
   STORE PROFILE
   ============================================ */
.store-profile-hero {
  background: var(--c-sur);
  border-bottom: 1px solid var(--c-bor);
  padding: 32px 0;
}

.store-profile-hero .inner {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: start;
}

.store-avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--rad-xl);
  background: linear-gradient(135deg, var(--c-pri-l), var(--c-sur2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  flex-shrink: 0;
  border: 1px solid var(--c-bor);
  overflow: hidden;
}

.store-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-profile-name { font-size: 26px; font-weight: 800; margin-bottom: 8px; }

.store-profile-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.store-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--c-txt2);
}

.store-meta-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.store-profile-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 28px 0;
  align-items: start;
}

.store-section { margin-bottom: 28px; }

.store-section-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-pri-l);
  color: var(--c-txt);
}

/* ============================================
   PAGINATION
   ============================================ */
.tyreon-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.tyreon-pagination a,
.tyreon-pagination span {
  padding: 8px 14px;
  border-radius: var(--rad);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--c-bor);
  color: var(--c-txt2);
  text-decoration: none;
  background: var(--c-sur);
}

.tyreon-pagination a:hover { background: var(--c-sur2); text-decoration: none; }
.tyreon-pagination .current { background: var(--c-pri); color: #fff; border-color: var(--c-pri); }

/* ============================================
   HERO
   ============================================ */
/* `background` اتشالت من هنا: `.hero` معرَّفٌ تاني تحتَ بنفسِ التحديدِ
   بالظبط، فاللي هنا كان **ميتًا** — أيُّ حدٍّ عدّلَه ماكانش هيشوفَ فرقًا
   ويدوّرُ في مكانٍ غلط. والباقي (اللونُ والحشوُ والمحاذاةُ) لسه حيٌّ. */
.hero {
  color: #fff;
  padding: 72px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero .inner { position: relative; z-index: 1; }

/* 800, not 900: 900 was never in the font request, so the browser was
   synthesising it — a smeared 800 at the biggest size on the page. #19 */
.hero h1 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero p {
  font-size: clamp(15px, 2.5vw, 20px);
  color: rgba(255,255,255,.85);
  max-width: 640px;
  margin: 0 auto 28px;
}

/* Car search bar */
/**
 * **بطاقةُ البحثِ — الفعلُ الأساسيُّ في الصفحة، ومساحتُها كانت أصغرَ من دورِها.**
 *
 * `docs/product/PUBLIC-FACE-DESIGN-PLAN.md` §١. وتلاتُ تغييراتٍ **كلُّها
 * ليها سببٌ يتقاسُ، مش ذوق**:
 *
 *   ١ · **مساحةُ اللمس.** المدخلُ كان حشوُه ١١px وخطُّه ١٤ = ~٤٠px ارتفاعًا.
 *       والحدُّ الأدنى المتعارَفُ لهدفِ اللمسِ **٤٤×٤٤**. يعني الفرقُ مش
 *       «أوسع شوية» — هو **تحتَ الحدّ**، والمندوبُ والزبونُ الاتنانِ على
 *       تليفون.
 *
 *   ٢ · **فصلُ البطاقةِ عن التدرّج.** الخلفيّةُ كانت `rgba(255,255,255,.12)`
 *       — شفّافةٌ لدرجةِ إن البطاقةَ ماكانتش بتقرا كسطحٍ، والتدرّجُ
 *       المتحرّكُ تحتَها بيدخلُ في الحقول. `.18` مع ضبابٍ أقوى بيدّوا سطحًا
 *       واضحًا من غيرِ ما البطاقةُ تبقى صندوقًا مصمتًا.
 *
 *   ٣ · **العرضُ يقولُ الأهمّيّة.** ٧٠٠px وسطَ لافتةٍ بعرضِ الشاشةِ بتخلّي
 *       الفعلَ الأساسيَّ يبانُ ثانويًّا. ٨٦٠ بيوازي وزنَه.
 *
 * و`color: #111` كان أسودَ مثبَّتًا برّه اللوحة — بقى `--c-txt`.
 */
/**
 * **لوحةُ الاختيارِ — الفعلُ الأساسيُّ الوحيدُ في الشاشةِ الأولى.**
 *
 * كانت **قاعدتانِ** بنفسِ الاسمِ في نفسِ الملفِّ (٢٠٠٥ و٢٨٨١)، والتانيةُ
 * بتكسبُ في الأرضيّةِ والظلِّ. فالشغلُ في الأولى ماكانش بيرسمُ.
 * [[the-later-sheet-wins-silently]]
 *
 * والأرضيّةُ بقت أتقلَ (٪١٤ ← ٪٩ حبرٍ داكنٍ فوقَ ضبابٍ): اللوحةُ لازم
 * **تفصلَ نفسَها عن الخلفيّةِ** عشان تقرا وحدةَ تحكّمٍ لا لوحًا شفّافًا.
 */
.car-search-bar {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--rad-xl);
  border: 1px solid rgb(255 255 255 / .18);
  background: rgb(8 14 26 / .42);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 22px 60px -26px #000;
}

/**
 * **شبكةٌ لا `flex-wrap` — عشان الخاناتُ تفضلْ متساويةً.**
 *
 * `flex-wrap` بتدّي أعرضَ خانةٍ للأطولِ محتوًى، فالتلاتةُ بيطلعوا
 * **بعروضٍ مختلفةٍ** والصفُّ يقرا عشوائيًّا. والشبكةُ بتساويهم،
 * والزرُّ بياخدُ عرضَه هو.
 */
.car-search-bar .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 780px) {
  .car-search-bar .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-search-bar .hs-go { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .car-search-bar .row { grid-template-columns: 1fr; }
}

/**
 * **العنوانُ فوقَ الخانةِ — الفرقُ بينَ نموذجٍ ووحدةِ تحكّمٍ.**
 *
 * العنوانُ كانَ **جوّا** الخانةِ كخيارٍ فاضٍ، فبيختفي أوّلَ ما تختارَ.
 * وفوقَها بيفضلْ — فالزائرُ شايفٌ **إنتَ اخترتَ إيه في أنهي خانةٍ** طولَ
 * الوقتِ، وده اللي بيخلّي التلاتَ خاناتٍ تقرا «مُختارَ سيّارةٍ».
 */
.hs-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-f-l {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  color: rgb(255 255 255 / .68);
}

.car-search-bar select {
  width: 100%;
  min-width: 0;
  /* ٤٤px هو الحدُّ الأدنى لهدفِ اللمس — مش تفضيلًا. */
  min-height: 46px;
  background: #fff;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: var(--rad);
  color: var(--c-txt);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
}
.car-search-bar select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.car-search-bar .hs-go {
  min-height: 46px;
  padding: 12px 30px;
  font-weight: 800;
  white-space: nowrap;
}

.hs-note { margin-top: 10px; min-height: 18px; font-size: var(--fs-xs); color: rgb(255 255 255 / .78); }

/**
 * **بابُ الخروجِ سطرٌ هادئٌ تحتَ اللوحةِ.**
 *
 * كانَ رابطًا **جوّا شريطِ التبويبِ** — فبيقرا تبويبًا تالتًا وهو مش
 * بحثًا. ونزلَ تحتَ عشان الفعلَ الأساسيَّ يفضلْ واحدًا، واللي مش عايزٌ
 * يبحثَ يلاقي بابَه من غيرِ ما ينافسَه.
 */
.hs-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-3);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / .6);
}
.hs-out a {
  color: rgb(255 255 255 / .92);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / .3);
  padding-bottom: 1px;
}
.hs-out a:hover, .hs-out a:focus-visible { border-bottom-color: #fff; text-decoration: none; }

/* ============================================
   SECTION
   ============================================ */
/**
 * **إيقاعُ الأقسامِ — والمسافةُ هي اللي بتفصلُ المعنى.**
 *
 * ٤٨px ثابتةً معناها إن التليفونَ بياخدُ نفسَ الفراغِ بتاعِ الديسكتوبِ
 * — وعلى شاشةٍ ٣٦٠px الفراغُ ده بياكلْ ثلثَ اللي بيتشافُ في المرّة.
 * والعكسُ على شاشةٍ عريضةٍ: الأقسامُ بتتلزقُ في بعضِها.
 *
 * فبقى سائلًا: ٣٢px على التليفونِ و٦٤ على الديسكتوب. **ودي مش تفصيلةً**
 * — الفراغُ بينَ الأقسامِ هو اللي بيقولُ للعينِ «ده موضوعٌ تانٍ»، وبدونِه
 * الصفحةُ بتقرا شريطًا واحدًا طويلًا مهما اتحسّنَ محتواها.
 */
.section { padding-block: clamp(32px, 5vw, 64px); }
.section-sm { padding-block: clamp(20px, 3vw, 34px); }
/* والأقسامُ المتجاورةُ بنفسِ الخلفيّةِ مالهاش تتضاعفَ مسافتُها. */
.section + .section { padding-block-start: 0; }

.section-hdr {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 36px);
}

/* من السلّمِ لا برقمٍ لوحدَه — كان بيطلعُ أكبرَ من `h1` على شاشاتٍ معيّنة. */
.section-hdr h2 { font-size: var(--fs-h2); }
.section-hdr p { color: var(--c-txt2); margin-top: 8px; }

/* ============================================
   MODAL
   ============================================ */
.tyreon-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tyreon-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.tyreon-modal-box {
  position: relative;
  background: var(--c-sur);
  border-radius: var(--rad-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--c-bor);
  z-index: 1;
}

.tyreon-modal-box.lg { max-width: 780px; }

.modal-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-bor);
}

.modal-hdr h3, .modal-hdr h2 { font-size: var(--fs-h4); }

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--rad);
  background: var(--c-sur2);
  border: 1px solid var(--c-bor);
  cursor: pointer;
  font-size: 18px;
  color: var(--c-txt2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover { background: var(--c-sur3); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}

/* ============================================
   TOAST
   ============================================ */
.tyreon-toast {
  position: fixed;
  bottom: 20px;
  inset-inline-end: 20px;
  z-index: 999;
  padding: 14px 20px;
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  /* الحدُّ الملوّنُ على ناحيةِ الشاشةِ اللي التوستُ طالعٌ منها. */
  border-inline-end: 4px solid var(--c-grn);
  border-radius: var(--rad-lg);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-txt);
  max-width: 320px;
  min-width: 220px;
  animation: toastIn .25s ease;
}

.tyreon-toast.error   { border-inline-end-color: var(--c-red); }
.tyreon-toast.warning { border-inline-end-color: var(--c-amb); }

@keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ============================================
   LOADING
   ============================================ */
/**
 * **السبينرُ بيقولُ «استنّى» — والهيكلُ بيقولُ «استنّى، وهيبانُ كده».**
 *
 * كلُّ الأسطحِ (٥٠ موضعًا) على الوصفةِ الواحدةِ دي، وده كويّسٌ. المشكلةُ
 * إنَّ السبينرَ **بيشغلُ مساحةً مختلفةً عن اللي جايٍّ**: شبكةٌ فيها سبينرٌ
 * ارتفاعُها ~١٤٠px، وأوّلَ ما عشرُ كروتٍ توصلْ بتبقى ٩٠٠px. فالصفحةُ
 * **بتنطُّ** والزائرُ اللي كانَ بيدوسُ بيدوسُ على حاجةٍ تانيةٍ (CLS · #59).
 *
 * والحلُّ الكاملُ هيكلٌ لكلِّ نوعِ محتوًى. والحلُّ اللي بيقفلْ **أغلبَ**
 * الضررِ بقاعدةٍ واحدةٍ: **احجزْ ارتفاعًا معقولًا وقتَ التحميلِ**. الشبكةُ
 * مابتقفلْش من ٩٠٠ لـ١٤٠ ورا بعضٍ — بتبتدي من ٣٢٠ فالفرقُ يقلَّ للتلتِ.
 *
 * `--loading-h` بتخلّي كلَّ مكانٍ يقولَ ارتفاعَه لو عارفُه، وبتقعُ على
 * قيمةٍ وسطٍ لو مش عارفُه.
 */
.tyreon-loading {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: var(--loading-h, 320px);
  padding: 24px 20px;
  color: var(--c-txt3);
  font-size: var(--fs-sm);
}
/* والحاويةُ الصغيرةُ بتقولُ كده — لوحةٌ جانبيّةٌ أو بطاقةٌ مش شبكةً. */
.tyreon-loading.sm { --loading-h: 120px; }
.tyreon-loading.xs { --loading-h: 64px; }

.tyreon-loading::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2.5px solid var(--c-bor);
  border-top-color: var(--c-pri);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--c-txt2);
}

.empty-state .icon { font-size: var(--fs-h1); margin-bottom: 14px; }
/**
 * **حالةُ الفراغِ بقت تشرحُ وتدلُّ — فمحتاجةٌ مساحةً لده.**
 *
 * كانت أيقونةً ٤٨px وعنوانًا وخلاص. دلوقتي فيها سببٌ ومخرجانِ، والوصفةُ
 * الواحدةُ في `assets/js/empty-state.js`.
 *
 * والأيقونةُ **صغرت**: ٤٨px كانت بتقرا لافتةً في شاشةٍ مافيهاش حاجةٌ
 * تانيةٌ — والمعنى بييجي من النصِّ لا من حجمِ الرمزِ.
 */
.empty-state .icon { font-size: var(--fs-h1); margin-bottom: 10px; opacity: .75; }
.empty-state p { max-width: 46ch; margin-inline: auto; }
/* المخارجُ صفٌّ بينهار لعمودٍ — ومافيش زرٌّ مملوءٌ: ده مخرجٌ لا فعلٌ أساسيٌّ. */
.es-acts {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: center;
  margin-top: 16px;
}
.es-alt { font-size: var(--fs-sm); color: var(--c-txt3); text-decoration: underline; }
.es-alt:hover { color: var(--c-pri); }
/* والخطأُ بيتفرقُ عن الفراغِ بحافّةٍ دافيةٍ — مش بلونٍ صارخٍ: هو مش تحذيرًا،
   هو «جرّبْ تاني». */
.empty-state.is-error {
  border: 1px solid color-mix(in srgb, #d97706 32%, transparent);
  border-radius: var(--rad-lg);
  background: color-mix(in srgb, #d97706 5%, transparent);
}
.empty-state h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.empty-state p { font-size: var(--fs-sm); color: var(--c-txt3); }

/* ============================================
   MAP
   ============================================ */
.tyreon-map {
  border-radius: var(--rad-lg);
  overflow: hidden;
  border: 1px solid var(--c-bor);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: #0f1723;
  color: rgba(255,255,255,.75);
  padding: 52px 0 24px;
  margin-top: auto;
}

/**
 * **الشبكةُ كانت مربوطةً بعددِ الأعمدةِ — والعددُ اتغيّر.**
 *
 * `2fr repeat(3, 1fr)` يعني **أربعةَ أعمدةٍ بالظبط**: علامةٌ وتلاتةٌ. ولمّا
 * الفوترُ اتقسّمَ بالمعنى بقى **ستّةَ عناصرَ** (علامةٌ وخمسةُ أعمدةٍ) —
 * فالتانيةُ نزلت لصفٍّ جديدٍ بعرضِ عمودٍ واحدٍ والباقي فضلَ فوق.
 *
 * ودي غلطةٌ عملتُها أنا في نفسِ الجلسةِ: قسّمتُ المحتوى ونسيتُ إن الشبكةَ
 * بتعدُّ. `auto-fit` مابتعدّش — بتوزّعُ اللي موجودٍ مهما كان عددُه،
 * والعلامةُ بتاخدُ ضِعفَ العرضِ بقاعدةٍ لوحدِها.
 *
 * وبكده الفوترُ **بيتنفّسُ لوحدِه** على كلِّ عرضٍ: ستّةٌ على الديسكتوب،
 * وتلاتةٌ على التابلت، واتنانِ على التليفون — بلا نقطةِ كسرٍ زيادة.
 */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 28px 26px;
  margin-bottom: 40px;
}
/* العلامةُ سطرٌ كاملٌ على الضيّقِ وعمودانِ على الواسع — هي تعريفٌ لا قايمة. */
.footer-brand { grid-column: span 2; min-width: 0; }
@media (max-width: 560px) { .footer-brand { grid-column: 1 / -1; } }

.footer-brand .logo {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.footer-brand p { font-size: 14px; line-height: 1.7; }

/**
 * **عيبٌ عملتُه أنا: العنوانُ اتغيّرَ والكسوةُ فضلت على الوسمِ القديمِ.**
 *
 * عناوينُ الفوترِ كانت `<h4>`، وحوّلتُها `<h2>` عشان أقفلَ قفزةَ المستوى
 * (`h2` ثمَّ `h4` = مستوى ٣ ناقصٌ). **والمحدِّدُ هنا كان `.footer-col h4`
 * وحدَه** — فالعنوانُ الجديدُ وقعَ على القاعدةِ العامّةِ
 * `h1..h6 { color: var(--c-txt) }`، وهي **كحليٌّ داكنٌ**… على خلفيّةِ
 * الفوترِ `#0f1723` **السوداءِ**.
 *
 * النتيجةُ: خمسةُ عناوينَ بتباينٍ ~١٫٤:١ — يعني **غيرُ مقروءةٍ عمليًّا**،
 * وده اللي المالكُ شافَه في اللقطةِ.
 *
 * **والدرسُ مش «انتبهْ»** — الدرسُ إنَّ تغييرَ الوسمِ **بيغيّرُ المحدِّدَ**،
 * والكسوةُ اللي مربوطةٌ باسمِ الوسمِ بتتفكُّ في السكوتِ. فالمحدِّدُ بقى
 * **بالكلاسِ لا بالوسمِ** — يعني لو العنوانُ اتغيّرَ تاني، الكسوةُ ماشيةٌ
 * معاه. [[a-fix-has-two-directions]] · [[the-later-sheet-wins-silently]]
 */
.footer-col h2,
.footer-col h3,
.footer-col h4,
.footer-col .footer-col-t {
  font-size: var(--fs-h6);
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-bottom: 8px;
  text-decoration: none;
  transition: color .12s;
}

.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================
   PREFERENCES WIDGET
   ============================================ */
.tyreon-prefs-widget {
  position: fixed;
  bottom: 20px;
  /**
   * **الرقعةُ هنا كانت بتخدمُ الحالةَ الافتراضيّةَ لا الاستثناء.**
   *
   * القاعدةُ كانت `left: 20px` ورقعتُها `body:not(.ltr) { left: auto;
   * right: 20px }` — يعني **العربيُّ**، اللي هو افتراضيُّ المنصّة، كان
   * بيتخدمُ من الاستثناء. فشيلُ الرقعةِ وحدَها كان هيحرّكُ الودجت لليسارِ
   * في كلِّ صفحةٍ عربيّة.
   *
   * `inset-inline-start` بتدّي الاتنينِ الصحَّ: يمينٌ في العربيِّ ويسارٌ في
   * الإنجليزيّ — بقاعدةٍ واحدةٍ ومن غيرِ ما حدَّ يفتكر.
   */
  inset-inline-start: 20px;
  /* v63.2: CRITICAL FIX — was z-index:200, low enough that any
     external floating widget in the same corner (the unidentified chat
     bubble seen throughout this project's screenshots, which appears to
     use a very high z-index typical of third-party embeds) could sit on
     top of it and block clicks — the exact same root cause already
     fixed for #work-float-btn earlier this session. Same fix here. */
  z-index: 2147483000;
}


/* ⚙️ floats OVER the open drawer (غالي: "زر الاعدادات لما تفتح المينو بيظهر فوق منها").
 *
 * The z-index above is 2147483000 on purpose — it was raised to beat an
 * unidentified third-party embed that was covering it. That fix was scoped to
 * the collision it was found in, and it beats EVERYTHING, our own drawer at
 * var(--z-drawer)+1 included. Lowering it would just hand the corner back to
 * the embed, so the number stays and the widget steps aside while the drawer
 * is open instead.
 *
 * #mob-nav and .tyreon-prefs-widget are both direct children of <body>
 * (header.php:250 and footer.php:64), so the general sibling combinator
 * reaches it with no JS and no body class to keep in sync. */
.mob-nav.open ~ .tyreon-prefs-widget { display: none; }

.tyreon-prefs-toggle {
  width: 48px;  /* #15 (a11y): ≥48px tap target (was 44px) */
  height: 48px;
  border-radius: 50%;
  background: var(--c-pri);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--sh-lg);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}

.tyreon-prefs-toggle:hover { transform: scale(1.06); }

.tyreon-prefs-panel {
  position: absolute;
  bottom: 52px;
  /* نفسُ حالةِ الودجت اللي جوّاها: الرقعةُ كانت بتخدمُ العربيَّ الافتراضيّ. */
  inset-inline-start: 0;
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 12px;
  box-shadow: var(--sh-lg);
  min-width: 232px;
}


.mob-pref-h,
.tyreon-prefs-panel h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--c-txt3);
  margin: 10px 0 6px;
  letter-spacing: 0.5px;
}

.tyreon-prefs-panel h4:first-child { margin-top: 0; }

/**
 * **لوحةُ التفضيلاتِ كانت عمودًا من أزرارٍ عريضة.**
 *
 * المالك، بلقطةٍ من المحلّيّ: *«المظهرُ واللغةُ اللي موجودينَ بشكلٍ أهبلَ
 * دول إيه؟»*.
 *
 * والسببُ إنّها كانت `flex-direction: column` — يعني **خمسةُ أزرارٍ
 * عريضةٍ فوقَ بعضٍ**، تلاتةٌ للمظهرِ واتنانِ للّغة، كلُّ واحدٍ بعرضِ
 * اللوحةِ كاملًا ومملوءٌ بالأزرقِ لمّا يبقى نشطًا. لوحةُ إعداداتٍ
 * بتاخدُ مساحةَ قايمةٍ رئيسيّة.
 *
 * والنمطُ المتعارَفُ لاختيارٍ من مجموعةٍ صغيرةٍ هو **الشريطُ المقسَّمُ**
 * (segmented): صفٌّ واحدٌ، الخياراتُ متساويةُ العرض، والنشطُ بيتظلّلُ
 * جوّاه. بياخدُ تلتَ المساحةِ وبيقرا «اختارْ واحدًا» فورًا.
 */
.tyreon-prefs-options {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--c-bor);
  border-radius: 999px;
  background: var(--c-sur2);
}

.tyreon-prefs-opt {
  flex: 1;
  min-height: 32px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  font-family: var(--fnt);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-txt2);
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.tyreon-prefs-opt:hover { background: var(--c-sur); color: var(--c-txt); }

/* ⚠️ **وهنا لا فوقُ**: كتبتُها أوّلَ مرّةٍ جنبَ قاعدةِ الشعارِ — يعني **قبلَ**
   قاعدةِ `.tyreon-prefs-opt` الأساسيّةِ بألفَي سطرٍ، فالأخيرةُ غلبتْها بنفسِ
   الأولويّةِ وفضلَ الزرُّ ٣٢px وهو «متصلَّحٌ». الترتيبُ حكمٌ مش تنظيمًا. */
@media (pointer: coarse) {
  .tyreon-prefs-opt { min-height: 44px; }
}
/* النشطُ حبّةٌ بيضا جوّا الشريطِ — مش لونًا مملوءًا بيصرخ. */
.tyreon-prefs-opt.active {
  background: var(--c-sur);
  color: var(--c-pri);
  box-shadow: var(--sh-sm);
}

/* ============================================
   RESPONSIVE - MOBILE FIRST
   ============================================ */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .store-profile-hero .inner { grid-template-columns: 80px 1fr; }
  .store-profile-hero .store-profile-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .store-profile-body { grid-template-columns: 1fr; }
}

/**
 * **الترويسةُ بتتحوّلُ للدُرجِ عندَ ١٠٢٤ — كانتْ ٧٨٠ (٢٠٢٦-٠٩-٠٤).**
 *
 * المالك بلّغَ بلقطةٍ من تابلت: الصفحةُ كلُّها مزاحةٌ والعنوانُ مقصوصٌ،
 * **وبعدَ تسجيلِ الدخولِ بسّ**. والقياسُ على جهازِه (مقياسٌ محقونٌ في الصفحةِ):
 *
 *     vw 800 · scrollWidth 841 · **عنصرٌ واحدٌ بيخرجُ من أبيه**:
 *     div.header-actions · over=41px · عرضُه 262px
 *
 * يعني `.site-header .inner` صفُّ فلكسٍ بلا التفافٍ، و`.header-actions`
 * مالقيش ٤١px. وقبلَ الدخولِ العناصرُ أقلَّ فبتزقُّ نفسَها — ودي إجابةُ
 * «ليه بعدَ الدخولِ بسّ».
 *
 * والزرُّ البديلُ (`.menu-toggle` اللي بيفتحُ `#mob-nav`) كانَ **مبنيًّا
 * وشغّالًا** — بسّ نطاقُه ١١px بسّ (٧٦٩–٧٨٠)، فالتابلت وقعَ برّه.
 *
 * والسطرانِ اتفصلوا عن كتلةِ ٧٨٠ عن قصدٍ: الكتلةُ دي فيها كمانَ قواعدُ
 * الشريطِ الجانبيِّ للبوّابةِ، وتحريكُ رقمِها كانَ هيغيّرُ سلوكًا تانِيًا
 * ماحدّش طلبَه.
 *
 * **وليه ١٠٢٤ لا ٨٦٠**: البحثُ (`.gsearch`) بيرجعْ يظهرُ فوقَ ٨٦٠ فبيزوّدُ
 * عرضًا، والقياسُ اللي عندي من ٨٠٠ وحدَها. ١٠٢٤ نقطةُ تابلتٍ معتادةٌ وفيها
 * فسحةٌ — والتمنُ سطرُ ملّاحٍ بيتحوّلُ لدُرجٍ على شاشاتِ ٩٠٠–١٠٢٤، وده أهونُ
 * من صفحةٍ بتتزحلقُ أفقيًّا.
 */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
}

@media (max-width: 780px) {
  /* Portal */
  .portal-sidebar {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer, 1200);   /* was 101 — under Leaflet's panes (400) */
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
    overflow-y: auto;
    height: auto;
    min-height: 0;
  }

  body.ltr .portal-sidebar {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }

  /* Same specificity trap as .mob-nav above, and this one covers EVERY portal —
     admin, supervisor, agent, merchant, customer. In English the sidebar could
     not be opened on any of them.
     ───────────────────────────────────────────────────────────────────────
     …and the previous version of this rule did not fix it, because it invented
     the class names `.mob-open` and `.visible`. Nothing anywhere adds either
     one. theme.js:1535 adds `.open` to the sidebar and `.show` to the overlay,
     which is also what tyreon-modern.css and mobile.css listen for. Three
     vocabularies for one drawer, and the odd one out was written here — so the
     rule was dead from the moment it was committed and the bug it names
     survived it, reported again on the merchant portal.

     A CSS class that matches nothing fails in complete silence: no console
     warning, no visual difference from a rule that simply lost. The only way to
     know is to check what the JavaScript actually adds, which is what the
     harness beside this now does.

     The doubled selector is still needed for the original reason:
     `body.ltr .portal-sidebar` is (0,2,1) and beats a bare `.portal-sidebar
     .open` at (0,2,0), so in English the closed transform wins and the drawer
     never slides in. */
  .portal-sidebar.open,
  body.ltr .portal-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.show,
  body.ltr .sidebar-overlay.show {
    display: block;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  :root { --header-h: 56px; }

  .tyreon-container { padding: 0 12px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .stat-card { padding: 14px; }
  .stat-card strong { font-size: 22px; }

  .hero { padding: 48px 12px; }

  .section { padding: 32px 0; }

  .footer-grid { grid-template-columns: 1fr; }

  .portal-page-hdr h2 { font-size: 18px; }

  .tyreon-table { font-size: 13px; }
  .tyreon-table th, .tyreon-table td { padding: 10px 12px; }
}

/* ── PORTAL PLATFORM BUTTON (back to public site) ── */

/* Sidebar: platform link at bottom */

/* Sidebar nav divider label */

/* Country-city-zone cascade filters */

/* ── PORTAL PAGES: hide site header/footer nav ── */
/* v63.2: CRITICAL FIX — this targeted .nav-menu, but header.php's actual
   markup is <nav class="main-nav">. .nav-menu matches nothing at all, so
   the full public top nav (Home/Stores/Products/About/Contact) rendered
   on EVERY portal page this whole time, stacked right above each
   portal's own sidebar — exactly the "أكتر من مينو" duplication reported
   repeatedly. The intended design (per Ghali) is Sidebar-only on
   desktop, Bottom Nav-only on mobile — no public nav bar in a portal at
   all. */
body.tyreon-portal-page .site-header .main-nav,
body.tyreon-portal-page .site-header .header-actions > a:not(.portal-btn),
body.tyreon-portal-page .site-header .menu-toggle,
body.tyreon-portal-page #wpadminbar { display: none !important; }

body.tyreon-portal-page .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;
}

/* #90: the header has to span what the portal spans.
   .site-header .inner is capped at 1280px and centred, which is right for the
   public site. Now that the portal layout fills the viewport, leaving the header
   centred would put the logo and the account menu floating in the middle while
   the sidebar sits flush against the edge — the two surfaces disagreeing about
   where the page begins. */
body.tyreon-portal-page .site-header .inner {
  max-width: none;
}

/* Login/Register pages: no header at all */
body.tyreon-portal-page .site-footer { display: none; }

/* v63.4: per Ghali's confirmation — settings (language/theme) are
   reachable from inside the Profile tab on every portal now, so this
   floating widget is redundant there. More importantly, it was also a
   real visual bug: both this widget and .portal-bottom-nav are
   position:fixed at the bottom of the screen with a near-max z-index,
   so on portal pages the widget's gear icon was rendering ON TOP of the
   bottom nav's own "Home" button, visually replacing it — this is very
   likely the real explanation for "the navbar isn't showing right" —
   the nav IS there, its leftmost icon is just covered by this widget. */
body.tyreon-portal-page .tyreon-prefs-widget { display: none !important; }

/* …and the same collision on the PUBLIC pages, where hiding it is not the answer.
 *
 * The v63.4 note above diagnosed this exactly — a fixed widget at bottom:20px
 * landing inside a 60px bottom bar, covering its first item — and fixed it for
 * portals only. The public directory has its own .bottom-nav and the identical
 * overlap: in RTL the widget sits over "الرئيسية", so Home cannot be tapped.
 * Reported from /stores/ on a phone, 2026-08-01.
 *
 * Hiding it here would be wrong. On a portal the language and theme controls
 * live in the Profile tab, so the widget is redundant; a logged-out visitor on
 * the public site has nowhere else to change either. So it moves ABOVE the bar
 * rather than away.
 *
 * Measured from --bottom-nav-h, not from 60: whatever the bar becomes, the
 * widget clears it, and nobody has to remember this rule exists. */
@media (max-width: 768px) {
  body.has-bottom-nav .tyreon-prefs-widget {
    bottom: calc(var(--bottom-nav-h, 60px) + 14px);
  }
}

/* ═══════════════════════════════════════════════
   BOTTOM NAV — fixed at bottom, mobile only
   ═══════════════════════════════════════════════ */
.bottom-nav {
  display: none; /* hidden on desktop */
}

/* v63.2: CRITICAL FIX — .portal-tab-chips (rendered inline at the top of
   every portal template, e.g. agent-portal.php) had ZERO CSS rules
   anywhere in the stylesheet. With no styling at all it rendered as a
   plain block of stacked/wrapped links, visible on every screen size —
   a second, unstyled navigation duplicating the sidebar, exactly what
   showed up as the mystery top row in Ghali's screenshots. This was
   clearly meant to be the mobile bottom-nav equivalent for portals (the
   site's own .bottom-nav is deliberately hidden on portal pages via
   body.tyreon-portal-page .bottom-nav, since portals have their own
   nav) — so: hidden entirely on desktop, a real fixed bottom bar on
   mobile only, matching Ghali's explicit rule (Sidebar on desktop,
   Bottom Nav on mobile — nothing else). */

@media (max-width: 780px) {
  /* content needs bottom padding so the fixed bar never covers it */
  body.tyreon-portal-page main,
  body.tyreon-portal-page .portal-main {
    padding-bottom: 64px;
  }
}

.bottom-nav-inner {
  display: flex;
  align-items: stretch;
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  min-height: 48px; /* #15 (a11y): meet the ≥48px tap-target minimum */
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-txt3, #94a3b8);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s;
}
.bn-item .bn-icon { font-size: 20px; line-height: 1; }
.bn-item.active { color: var(--c-pri,#1B4FD8); }

/* Show ONLY on mobile, fixed to bottom */
@media (max-width: 768px) {
  .bottom-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h, 60px);
    background: var(--c-sur, #fff);
    border-top: 1px solid var(--c-bor, #e2e8f0);
    z-index: 900;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Add padding so content isn't hidden behind bottom nav */
  body.has-bottom-nav { padding-bottom: var(--bottom-nav-h, 60px); }
}

/* Hide the desktop main-nav on mobile (bottom-nav replaces it) */
@media (max-width: 768px) {
  .site-header .main-nav { display: none; }
}

/* Hide bottom-nav inside portal pages (portals have their own nav) */
body.tyreon-portal-page .bottom-nav { display: none !important; }
body.tyreon-portal-page.has-bottom-nav { padding-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   v63.27 — ONE navigation per breakpoint on the public site too
   (غالي: "التجربة من الموبايل زحمة اوي مقدرش اوصل لباقي الكاتيجوريز")

   The header bar was rendering, on a 360px phone: logo + car switcher +
   ملفي الشخصي + خروج + ☰. The ☰ was the item pushed off the end — and the
   drawer it opens is where البراندات · الماركات · المقاسات · التصنيفات ·
   الخدمات · العروض all live. So the one control that reached the rest of
   the site was the one the crowding removed.

   This is the rule the portals already follow, written above in Ghali's
   own words: "Sidebar-only on desktop, Bottom Nav-only on mobile." The
   public site never got it, so its bottom nav was ADDED to the header row
   instead of REPLACING it, and every destination was drawn twice.

   Breakpoint is 768px, not the 1024px used by .menu-toggle, because it must
   match where .bottom-nav actually appears. Between 769–1024px the bottom
   nav is gone and .main-nav is already hidden, so the header ☰ is the only
   way in and must survive — hence ≤768 and not ≤1024.

   (كان النطاقُ ٧٦٩–٧٨٠ — ١١px بسّ — لحدِّ ٢٠٢٦-٠٩-٠٤، لمّا القياسُ على
   تابلت ٨٠٠px بيّنَ إنّ `.header-actions` بيخرجُ ٤١px برّه أبيه فتزحلقتِ
   الصفحةُ كلُّها. الشرحُ كامِلًا فوقَ عندَ `@media (max-width: 1024px)`.)

   .site-header prefix (0,1,1) so this wins over `.menu-toggle{display:flex}`
   at line ~1948 regardless of where in the file it ends up.

   What is NOT hidden, deliberately:
     · /register/  — its only entry point on the whole site is this bar.
                     The drawer has merchant-register, not customer signup.
     · .veh-switch — the active-vehicle switcher has no second surface, and
                     it is the context for everything the customer browses.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header .hdr-mobile-dup { display: none !important; }

  /* With the duplicates gone the row is logo + car switcher, so give the
     switcher the room — but cap the label: a long car name ("سيارتي العزيزه")
     would otherwise grow the button until the logo starts shrinking again. */
  .site-header .veh-switch { min-width: 0; }
  .site-header #veh-switch-label {
    display: inline-block;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .header-actions { gap: 6px; min-width: 0; }
}

/* ٢٠٢٦-١١-٠٧ (جولةُ العميلِ): عميلٌ داخلٌ بعربيّةٍ على لابتوب ١٣٦٦: الصفُّ أوسعُ من الشاشةِ بـ٤px — «خروج» مقصوصٌ وشريطُ تمريرٍ أفقيٌّ في كلِّ الموقعِ.
   البحثُ هو اللي بيتنازلْ، واسمُ العربيّةِ مابيكبّرش الصفَّ. */
@media (min-width: 769px) and (max-width: 1500px) {
  .site-header .gsearch { flex: 1 1 90px; min-width: 90px; width: auto; max-width: 170px; }
  .site-header .main-nav { min-width: 0; }
  .site-header #veh-switch-label { display: inline-block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v63.18 — PUBLIC SITE MODERN REFRESH (غالي: "الموقع بشكل عام عصري أكتر")
   Token-based, append-only. Richer hero, softer cards, springy buttons.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero: deeper multi-stop gradient + soft radial glow (when no bg image set;
   inline style from front-page.php takes over when an image IS uploaded). */
.hero {
  background: var(--grad-hero);
  padding: clamp(56px, 9vw, 92px) 16px;
}
.hero::after {
  content: '';
  position: absolute;
  top: -40%; inset-inline-end: -20%;
  width: 70%; height: 160%;
  background: radial-gradient(circle, rgb(var(--t-accent) / .30), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
.hero h1 { letter-spacing: -.5px; text-shadow: 0 2px 20px rgba(0,0,0,.15); }

/* Car search bar: crisper glass */

/* Public cards & buttons — mirror the portal refresh so the whole product
   feels consistent. Uses the public --c-* token set. */
.card, .store-card, .product-card, .stat-card {
  border-radius: 16px;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.card:hover, .store-card:hover, .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
}
.tyreon-btn { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, filter .2s, background .2s; }
.tyreon-btn:active { transform: translateY(1px) scale(.99); }
.tyreon-btn.primary { box-shadow: 0 4px 14px rgba(27,111,232,.3); }
.tyreon-btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(27,111,232,.4); }

@media (prefers-reduced-motion: reduce) {
  .card, .store-card, .product-card, .stat-card, .tyreon-btn { transition: none; }
  .card:hover, .store-card:hover, .product-card:hover, .tyreon-btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v63.19 — HOMEPAGE AUTOMOTIVE REDESIGN (غالي: صور تعبّر عن مجال السيارات)
   Styles for the automotive SVG scene + new sections. Token-based.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero automotive scene (shown only when no custom hero image) */
.hero { position: relative; }
.hero-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
@keyframes heroSpin { to { transform: rotate(360deg); } }
@keyframes heroCarIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: .9; transform: none; } }
.hero .inner { position: relative; z-index: 2; }

/* Search bar lead row (steering wheel + label) */

/* Stats: automotive icon above the number */

/* How-it-works steps */
.home-step {
  flex: 1 1 200px; max-width: 260px; text-align: center;
  padding: 24px 18px; border-radius: var(--rad-lg);
  background: var(--c-bg); border: 1px solid var(--c-bor);
  transition: transform .2s, box-shadow .2s;
}
.home-step:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.home-step h4 { font-size: 16px; margin-bottom: 4px; }

/* `.home-feature` اتشالَ من الرئيسيّةِ (بقى `.why-item`)، فقاعدتُه هنا
   اتشالت معاه. `.home-stat` سايبٌ عن قصدٍ: لسه مستعملًا في
   `geo-explorer` وفي `stats-grid` بتاعةِ البوّابات. */

/* Store card automotive placeholder (no photo) */
.store-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, var(--c-pri-l), var(--c-sur2));
}
.store-verified {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-pri); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(27,79,216,.4); z-index: 2;
}

/* Merchant CTA with automotive backdrop */
/**
 * **لونُ النصِّ كان في سمةِ `style=` في الماركِ لا في الكسوةِ.**
 *
 * القسمُ ده خلفيّتُه التدرّجُ الأزرقُ الغامقُ، ونصُّه أبيضُ — **بس
 * الأبيضَ مكتوبٌ في `style="color:#fff"` على العنصرِ**. يعني القاعدةُ
 * نفسُها مابتضمنش حاجةً: أوّلُ مرّةٍ حدٌّ يشيلُ السمةَ المضمَّنةَ (أو
 * يضيفُ عنصرًا جديدًا جوّاها بلا سمةٍ) بيبقى **نصٌّ كحليٌّ على أزرقَ
 * غامقٍ**.
 *
 * ودي بالظبط الطريقةُ اللي عناوينُ الفوترِ اتكسرت بيها في نفسِ اليومِ:
 * الضمانةُ كانت في مكانٍ تانٍ. اللونُ بقى في القاعدةِ — والسماتُ
 * المضمَّنةُ بتبقى تحصيلَ حاصلٍ لا شرطًا. [[a-fix-has-two-directions]]
 */
.home-cta {
  position: relative; overflow: hidden; text-align: center;
  background: var(--grad-hero);
  color: #fff;
}
.home-cta-art {
  position: absolute; top: 50%; inset-inline-end: -6%;
  width: 360px; height: 360px; transform: translateY(-50%);
  opacity: .12; pointer-events: none;
}

@media (max-width: 640px) {
  .home-cta-art { width: 220px; height: 220px; opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-step:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v63.20 — STORES DIRECTORY REDESIGN (غالي: فلاتر أكتر + تقسيم + تصميم أفضل)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero header */
/* ونفس السبب: العنوان فوق تدرّجٍ غامق محتاج لونه بنفسه، لأن القاعدة العامّة
   على `h1` بتكسب الوراثة من `.stores-hero`. */

/* Filter card */

/* Mode toggle segmented control */
.stores-mode {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--c-sur2); border-radius: 12px; margin-bottom: 14px;
}
.stores-mode-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 700;
  color: var(--c-txt2); font-family: inherit; transition: all .15s;
}
.stores-mode-btn.active { background: var(--c-pri); color: #fff; box-shadow: 0 2px 8px rgba(27,79,216,.3); }

/* Primary filter row */
.stores-search {
  position: relative; flex: 1; min-width: 240px;
}
.stores-search-ico {
  position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%);
  font-size: 15px; opacity: .5; pointer-events: none;
}
.stores-search input {
  width: 100%; padding: 12px 14px; padding-inline-start: 38px;
  border: 1.5px solid var(--c-bor); border-radius: 12px;
  font-size: 14px; font-family: inherit; background: var(--c-sur2); color: var(--c-txt);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.stores-search input:focus {
  outline: none; border-color: var(--c-pri); background: var(--c-sur);
  box-shadow: 0 0 0 4px rgba(27,79,216,.1);
}
.stores-sel {
  padding: 12px 14px; border: 1.5px solid var(--c-bor); border-radius: 12px;
  font-size: 13.5px; font-family: inherit; background: var(--c-sur2); color: var(--c-txt);
  cursor: pointer; transition: border-color .15s; min-width: 140px;
}
.stores-sel:focus { outline: none; border-color: var(--c-pri); }

/* Advanced filter grid */

/* Active filter chips */
.stores-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stores-chips:empty { margin-top: 0; }
.stores-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: 20px;
  background: var(--c-pri-l); color: var(--c-pri-d);
  font-size: 12.5px; font-weight: 600;
}
html[dir="rtl"] .stores-chip { padding: 5px 12px 5px 6px; }
.stores-chip button {
  border: none; background: rgba(0,0,0,.08); color: inherit; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; font-size: var(--fs-xs); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.stores-chip button:hover { background: rgba(0,0,0,.18); }
.stores-chip-clear {
  border: none; background: transparent; color: var(--c-red, #dc2626);
  cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 5px 10px;
}
.stores-chip-clear:hover { text-decoration: underline; }

/* Result bar */
.stores-resultbar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 18px 0 12px;
}
.stores-view-toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--c-sur2); border-radius: 9px; }
.stores-view-toggle button {
  border: none; background: transparent; cursor: pointer;
  width: 32px; height: 30px; border-radius: 7px; font-size: 15px; color: var(--c-txt2);
  transition: all .15s;
}
.stores-view-toggle button.active { background: var(--c-sur); color: var(--c-pri); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* Verified badge on store card image */
.store-verified {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-pri); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; z-index: 2;
  box-shadow: 0 3px 8px rgba(27,79,216,.4);
}
.store-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, var(--c-pri-l), var(--c-sur2));
}

/* LIST VIEW — horizontal cards */
.stores-grid.stores-list { grid-template-columns: 1fr; }
.stores-grid.stores-list .store-card {
  flex-direction: row; align-items: stretch;
}
.stores-grid.stores-list .store-card-img {
  width: 130px; height: auto; min-height: 100px; flex-shrink: 0;
}
.stores-grid.stores-list .store-card-body { flex: 1; }
.stores-grid.stores-list .store-card-foot,
.stores-grid.stores-list .store-card-trust,
.stores-grid.stores-list .store-card-services {
  flex-direction: column; justify-content: center; align-items: flex-start;
  border-top: none; border-inline-start: 1px solid var(--c-bor);
  min-width: 130px; padding: 12px;
}
/* وفي الليستِ الفاصلُ رأسيٌّ، فاللي بعدَ الأوّلِ بيشيلُه هو كمانْ. */
.stores-grid.stores-list .store-card-foot + .store-card-trust,
.stores-grid.stores-list .store-card-foot + .store-card-services,
.stores-grid.stores-list .store-card-trust + .store-card-services {
  border-inline-start: none; padding-inline-start: 0; min-width: 0;
}
@media (max-width: 560px){
  /* غالي 2026-08-01, pointing at the ⊞/☰ pair: "مش شغال".
   *
   * The toggle was working — setView() flips the class, the .active state
   * moves, the layout recomputes. It produced an IDENTICAL result, which is
   * indistinguishable from a dead button.
   *
   * On a phone, grid mode is one column (mobile.css forces
   * .stores-grid{grid-template-columns:1fr!important}) with a stacked card and
   * a full-width image. This block then gave list mode flex-direction:column
   * and a full-width 150px image — the same card, in the same single column.
   * Two modes, one layout.
   *
   * The point of a list is density: more results per screen. So it stays
   * horizontal here, with a thumbnail sized for a narrow screen; only the
   * footer — the part that genuinely could not fit beside a 130px thumb and a
   * body — wraps to its own full-width row. That is what the old override was
   * protecting against, solved by moving one element instead of collapsing all
   * three. */
  .stores-grid.stores-list .store-card { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .stores-grid.stores-list .store-card-img { width: 96px; height: auto; min-height: 96px; flex-shrink: 0; }
  .stores-grid.stores-list .store-card-body { flex: 1 1 0; min-width: 0; }
  .stores-grid.stores-list .store-card-foot,
  .stores-grid.stores-list .store-card-trust,
  .stores-grid.stores-list .store-card-services {
    flex: 1 0 100%;
    flex-direction: row; justify-content: flex-start; align-items: center;
    border-inline-start: none; border-top: 1px solid var(--c-bor);
    min-width: 0; padding: 10px 12px;
  }
  /* وعلى الموبايلِ الفاصلُ بيرجعْ أفقيًّا — فنفسُ قاعدةِ «خطٌّ واحدٌ». */
  .stores-grid.stores-list .store-card-foot + .store-card-trust,
  .stores-grid.stores-list .store-card-foot + .store-card-services,
  .stores-grid.stores-list .store-card-trust + .store-card-services {
    border-top: none; padding-top: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   v63.21 — دليل المتاجر: Sidebar فلاتر + نجوم تقييم العملاء الدهبية
   (بلاغ غالي 2026-07-05: "الفلاتر في الجانب مش فوق" + "نجوم لونها دهبي")
   ══════════════════════════════════════════════════════════════════════ */

/* Layout: sidebar + main. RTL: العمود الأول = يمين تلقائيًا. */
.stores-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ── Sidebar ── */
.stores-side {
  position: sticky; top: 76px;
  background: var(--c-sur); border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg); padding: 16px;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  /**
   * **مافيش تمريرٌ داخليٌّ — شريطانِ في شاشةٍ واحدةٍ بيتصارعوا.**
   *
   * كانَ `max-height: calc(100vh - 92px); overflow-y: auto` — فاللوحةُ
   * ليها شريطُها والصفحةُ ليها شريطُها، والزائرُ **مش عارفٌ أنهي واحدٍ
   * بيتحرّكُ**. والمالكُ لاحظَها فورًا.
   *
   * والحلُّ مش تكبيرَ الحدِّ — **الحلُّ إنَّ اللوحةَ تدخلَ**. فالفلاترُ
   * اللي مش عندَها بياناتٌ اتشالت (٤ من ١٠)، والباقي داخلٌ في الشاشةِ.
   *
   * وحدُّ الأمانِ باقٍ لشاشةٍ قصيرةٍ جدًّا — بس مش هو الحالةَ العاديّةَ.
   */
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.stores-side-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-size: 14px;
}
.stores-side-close {
  display: none; border: none; background: var(--c-sur2); color: var(--c-txt2);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.stores-mode--full { display: flex; width: 100%; margin-bottom: 14px; }
.stores-mode--full .stores-mode-btn { flex: 1; text-align: center; padding: 9px 8px; font-size: 12.5px; }

.stores-side-groups { display: flex; flex-direction: column; gap: 13px; }
.stores-side-group { display: flex; flex-direction: column; gap: 6px; }
.stores-side-group > label {
  font-size: var(--fs-xs); font-weight: 800; color: var(--c-txt2);
  letter-spacing: .03em;
}
.stores-side-group .stores-sel,
.stores-side-group .stores-search input { width: 100%; }
.stores-side-divider { border-top: 1px dashed var(--c-bor); }

.stores-side-backdrop {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: rgba(15,23,42,.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s;
}
.stores-side-backdrop.show { display: block; opacity: 1; }

/* زرار "فلاتر" — موبايل بس */
.stores-filters-btn {
  display: none; align-items: center; gap: 7px;
  border: 1.5px solid var(--c-bor); background: var(--c-sur);
  color: var(--c-txt); font-weight: 800; font-size: 13px;
  padding: 9px 14px; border-radius: 11px; cursor: pointer; font-family: inherit;
}
.stores-filters-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--c-pri); color: #fff; font-size: var(--fs-xs); font-weight: 800;
}

@media (max-width: 1023px) {
  .stores-layout { grid-template-columns: 1fr; }
  .stores-filters-btn { display: inline-flex; }
  .stores-side {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(320px, 86vw); max-height: none; z-index: 999;
    border-radius: 0; border: none;
    transform: translateX(-105%); transition: transform .25s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,.18);
  }
  html[dir="rtl"] .stores-side { transform: translateX(105%); box-shadow: -8px 0 30px rgba(0,0,0,.18); }
  .stores-side.open { transform: translateX(0) !important; }
  .stores-side-close { display: flex; align-items: center; justify-content: center; }
}

/* ── نجوم التقييم الدهبية (مكوّن مشترك — دليل المتاجر + صفحة المتجر) ──
   طبقتين ★★★★★: رمادية كقاعدة + دهبية فوقها مقصوصة بعرض = المتوسط/5،
   فالتعبئة الجزئية (4.1 من 5) بتظهر بدقة. direction:ltr جوّه الودجت
   عشان التعبئة تبدأ من نفس الجهة حتى في RTL. */
.tyr-stars {
  display: inline-flex; align-items: center; gap: 6px;
  direction: ltr; line-height: 1;
}
.tyr-stars-track {
  position: relative; display: inline-block;
  font-size: var(--star-size, 14px); letter-spacing: 1.5px;
}
.tyr-stars-base { color: #d7dbe3; }
.tyr-stars-fill {
  position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap;
  color: #f5a623;
  text-shadow: 0 1px 2px rgba(245,166,35,.35);
}
.tyr-stars-num {
  font-size: calc(var(--star-size, 14px) - 1px);
  font-weight: 800; color: var(--c-txt);
}
.tyr-stars-cnt {
  font-size: calc(var(--star-size, 14px) - 2px);
  color: var(--c-txt3, #94a3b8); font-weight: 600;
}
/* نسخة على خلفية غامقة (هيرو صفحة المتجر) */
.tyr-stars--onblue .tyr-stars-base { color: rgba(255,255,255,.32); }
.tyr-stars--onblue .tyr-stars-num { color: #fff; }
.tyr-stars--onblue .tyr-stars-cnt { color: rgba(255,255,255,.75); }

.store-card-rating { margin: 4px 0 2px; }

/* ── v63.21: تابات صفحة المتجر (معلومات/المنتجات/التقييمات) ──
   Pill segmented بارز مع عدّادات — بدل أزرار underline باهتة كانت
   بتتلخبط مع النص العادي (بلاغ غالي: "التابات مش واضحة"). */
.sp-tabs {
  display: flex; gap: 8px; padding: 10px 0;
  overflow-x: auto; scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 12px;
  border: 1.5px solid var(--c-bor, #e2e8f0);
  background: var(--c-sur2, #f8fafc); color: var(--c-txt2, #475569);
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: all .16s ease;
}
.sp-tab-btn:hover { border-color: var(--c-pri, #1B4FD8); color: var(--c-pri, #1B4FD8); }
.sp-tab-btn.active {
  background: var(--c-pri, #1B4FD8); border-color: var(--c-pri, #1B4FD8);
  color: #fff; box-shadow: 0 4px 12px rgba(27,79,216,.28);
}
.sp-tab-ico { font-size: 15px; line-height: 1; }
.sp-tab-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: rgba(0,0,0,.12); color: inherit;
  font-size: var(--fs-xs); font-weight: 800;
}
.sp-tab-btn.active .sp-tab-cnt { background: rgba(255,255,255,.25); color: #fff; }

/* ── v63.23: البحث العام الذكي في الهيدر ── */
.gsearch { position: relative; flex: 1; max-width: 340px; min-width: 150px; margin-inline: 12px; }
.gsearch-ico { position: absolute; top: 50%; inset-inline-start: 11px; transform: translateY(-50%); font-size: 13px; opacity: .5; pointer-events: none; }
.gsearch input {
  width: 100%; padding: 9px 12px; padding-inline-start: 33px;
  border: 1.5px solid var(--c-bor); border-radius: 11px;
  font-size: 13px; font-family: inherit; background: var(--c-sur2); color: var(--c-txt);
  transition: border-color .15s, box-shadow .15s;
}
.gsearch input:focus { outline: none; border-color: var(--c-pri); background: var(--c-sur); box-shadow: 0 0 0 4px rgba(27,79,216,.1); }
.gsearch-drop {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline: 0;
  background: var(--c-sur); border: 1px solid var(--c-bor); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14); z-index: 300;
  max-height: 380px; overflow-y: auto; padding: 6px;
}
.gsearch-drop.open { display: block; }
.gsearch-grp { font-size: var(--fs-xs); font-weight: 800; color: var(--c-txt3, #94a3b8); padding: 8px 10px 4px; letter-spacing: .03em; }
.gsearch-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit;
}
.gsearch-item:hover { background: var(--c-sur2); }
.gsearch-item-name { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-item-meta { font-size: var(--fs-xs); color: var(--c-txt3, #94a3b8); flex-shrink: 0; }
.gsearch-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--c-txt3, #94a3b8); }
@media (max-width: 860px) {
  .site-header .inner {
    height: auto;
    min-height: var(--header-h);
    flex-wrap: wrap;
    padding-bottom: 8px;
  }
  .site-header .gsearch {
    order: 10;
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v63.27 — HERO ARTWORK: the whole frame, one per theme
   (غالي: "واحدة تكون درايك مود و التاني لايت و يكونوا واضحين مفيش حاجة بتقطعهم")

   The artwork used to be a CSS background with background-size:cover under a
   darkening gradient. `cover` is defined to crop — it scales until the box is
   full and discards the overflow — and on a wide, short hero band that removes
   the top and bottom of a 16:9 banner. These banners carry the mascot, the
   product line-up and their own headline, so what `cover` threw away was the
   message. The gradient on top is right for a photograph behind white text and
   wrong for finished artwork.

   It is an <img> beside the copy now, object-fit:contain, so nothing is ever
   cut. Both variants ship in the HTML and CSS picks one — the theme toggle
   switches on the client, so a server-chosen <img> would keep showing the old
   theme's artwork until the next reload.
   ═══════════════════════════════════════════════════════════════════════ */
/* غالي: "لما ضفت الصورة اصلا المفروض يكون بردوا البحث موجود بقي مختفي تحت".
 *
 * A 16:9 banner at full viewport width is 56vw tall — on a 1900px screen that
 * is over 1000px, taller than the screen itself, so the search landed below the
 * fold. Three things were in conflict and only two can hold at once:
 *
 *   · the banner spans the full width      (no blue margin)
 *   · the banner is never cropped          (contain)
 *   · the search is on the first screen
 *
 * `contain` with a height cap is what put the side bars back, because a
 * contained image inside a shorter box shrinks and leaves the sides empty. So
 * the height is capped and the fit is `cover`: the frame fills the band and
 * loses a little off the top and bottom rather than the left and right, and the
 * banner's own margins are where that loss lands. On a screen close to 16:9
 * nothing is cropped at all.
 *
 * The remaining height is bought back by the search card riding up onto the
 * banner — which is how the design has it anyway.
 */
/* غالي: "ما الصورة اتقصت و في ازرق تحت لوحده مش منطقي" — both true, and the
 * `cover` version above was my error. I claimed nothing would be cropped on a
 * screen near 16:9; his is 1914×830, which is 2.3:1. On a viewport that wide,
 * `cover` on a 16:9 banner throws away a third of its height, and what it threw
 * away was the top of the headline.
 *
 * The three requirements really are mutually exclusive at that aspect ratio —
 * whole frame, full width, fits the screen. Every previous attempt picked one
 * to sacrifice: cropping lost the headline, a height cap with `contain` lost
 * the full width to side bars, no cap at all lost the search below the fold.
 *
 * So the SIDES become part of the picture. The band carries the same artwork
 * scaled to cover and blurred behind the whole, uncropped frame. Nothing is
 * cut, the width is full, the height fits, and the edges read as a continuation
 * of the image rather than as dead space — which is what "اجزاء فاضيه" was
 * about in the first place.
 */
/* Final shape, per Ghali: the artwork fills the hero, whole, and the search sits
   BELOW it on the page's own background.
   ─────────────────────────────────────────────────────────────────────────
   Every earlier version tried to keep the search on the first screen at the
   same time, and each one paid for it somewhere: cropping the headline,
   letterbox bars, or a blurred surround that read as noise. Letting the banner
   take its natural height and putting the search after it costs a scroll and
   nothing else — the banner is whole, edge to edge, at full width, and the
   search is a normal part of the page rather than a card floating on a
   gradient. */
.hero-art { display: block; width: 100%; }
.hero-art-img {
  display: block;
  width: 100%;
  height: auto;             /* natural ratio — no cap, so nothing is cropped */
}

/* غالي: "ممكن تصغير حاجة الهيرو عشان اللي تحته يبكون بيان و توضيح في الاعدادات
   المقاس المطلوب".
   ─────────────────────────────────────────────────────────────────────────
   The two asks are the same ask. A full-width image's height is decided by its
   own ratio, so the only ways to shorten it are to crop it or to change the
   file. Cropping silently is what produced the last three rounds of this, so
   the ratio becomes a STATED CONTRACT instead: the band is 2.6:1 on desktop,
   the admin field says so in pixels, and an image at that ratio is displayed
   whole — `cover` never has anything to remove.

   `cover` is still there as the behaviour for an image that does NOT match. It
   has to do something, and trimming the edges of a mismatched upload is better
   than either letting it push the page down or barring its sides. The settings
   text is what keeps it from ever engaging.

   Desktop only. On a phone the screen is tall and the banner is short, so
   nothing needs shortening and the natural height above still applies — a 2.6:1
   crop of a phone-width image would cut the artwork for no gain. */
@media (min-width: 900px) {
  .hero-art { aspect-ratio: 2.6 / 1; overflow: hidden; }
  .hero-art-img { height: 100%; object-fit: cover; object-position: center; }
}
/* Light is the default; dark replaces it only when the toggle says so. Both
   directions are written explicitly so the rule survives either theme being
   the one stamped on <html>. */
.hero-art-img--dark { display: none; }
html[data-tyreon-theme="dark"] .hero-art-img--light { display: none; }
html[data-tyreon-theme="dark"] .hero-art-img--dark  { display: block; }

/* غالي 2026-08-01, looking at it live: "انا عاوز الصورة اخد المكان كله و ممكن
   نحط البحث تحت الصورة، ع دول كأن في تدخل بينهم".

   The first attempt put the artwork in a second column with
   `grid-column:2; grid-row:1/-1`, meaning to span every row beside the copy. It
   does not. With no EXPLICIT rows declared, `-1` names the last explicit row
   line, so `1 / -1` collapses to a single row — the artwork held row 1 of
   column 2 and auto-placement then dropped the NEXT item, the search bar, into
   row 2 of the same column, directly under the image. That is the collision in
   the screenshot: not two things overlapping by accident of z-index, but the
   search bar being placed exactly where the grid was told to put it.

   Now the hero is one column, in DOM order: artwork · headline · subtitle ·
   search · buttons. The artwork spans the full width — "تاخد المكان كله" — and
   the search sits below it with real space between them.

   max-height is capped in vh as well as px: unbounded, a 16:9 banner across a
   1400px container is 787px tall and pushes everything below it off the first
   screen. */
/* غالي, comparing the live hero with the design he sent: "لا طبعا ما اجزاء
   فاضيه انا عاوز اصلحه زي ما انا بعت في التصميم".
   ─────────────────────────────────────────────────────────────────────────
   The gap between the two was empty blue. The artwork sat inside
   .tyreon-container — capped width, side padding — and had a max-height and a
   border-radius on top of that, so it floated as a card in the middle of a
   gradient band with dead space all around it. In the design the banner IS the
   hero: it runs edge to edge, and the search sits on it.

   So the hero stops padding itself when artwork is set, the artwork moves
   outside the container (see front-page.php), and the max-height and radius
   come off — a capped height on a `contain` image is exactly what produces
   bars at the sides.

   The headline and subtitle are VISUALLY hidden rather than removed. These
   banners already carry their own headline, so rendering ours underneath says
   the same sentence twice in two typefaces. Hidden this way it still reaches
   screen readers and crawlers — the h1 is the page's main heading and deleting
   it costs real SEO for a purely visual duplication. */
.hero.hero--has-img {
  /* .hero.hero--has-img, doubled up, because assets/css/mobile.css sets
     `.hero { padding: 40px 16px !important }`. An !important declaration beats a
     normal one whatever the specificity, so the only way past it is another
     !important with HIGHER specificity — otherwise the side padding survives on
     phones and puts the blue strips back exactly where they were reported. */
  padding: 0 0 clamp(28px, 4vw, 44px) !important;
  overflow: hidden;
}
.hero--has-img .inner { display: block; }

.hero--has-img > .inner > h1,
.hero--has-img > .inner > p {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* The search sits BELOW the banner on the PAGE's own background — not on a
   gradient, and not as a white card floating on one (غالي: "البحث يكون بخلفية
   الصفحة نفسه و بيتغير مع الدارك و اللايت").
   ─────────────────────────────────────────────────────────────────────────
   That is why it is written in TOKENS rather than colours. --c-bg/--c-txt are
   what html[data-tyreon-theme="dark"] reassigns, so the strip follows the theme
   toggle on its own. The hero's gradient and its ::after glow are switched off
   for the same reason: a fixed blue band cannot follow a theme, and it was the
   thing that made the search look bolted onto the picture instead of part of
   the page. */
.hero.hero--has-img {
  background: var(--c-bg) !important;
}
.hero.hero--has-img::after { display: none; }

.hero--has-img .inner {
  position: relative;
  z-index: 2;
  margin-top: clamp(16px, 2.4vw, 26px);
  color: var(--c-txt);
}

/* The search as the design has it: a solid, elevated white card riding the
   bottom edge of the banner — not a translucent panel floating in a blue field.
   The glass treatment above is right when the hero is a gradient behind it; over
   finished artwork it reads as a smudge, and its white-on-white select labels
   lose contrast against the light parts of the banner.

   Scoped to .hero--has-img so the no-artwork hero keeps the glass look it was
   designed with. */
/* No card: the search IS the page here. Transparent background, no shadow, no
   border — the only thing left is the controls, on whatever --c-bg currently
   is. A white card would be a fixed colour that cannot follow the theme, which
   is exactly what was asked against. */
.hero--has-img .car-search-bar {
  max-width: 980px;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.hero--has-img .car-search-bar,
.hero--has-img .car-search-bar .car-search-lead {
  color: var(--c-txt, #0f172a);
}
.hero--has-img .car-search-bar select {
  background: var(--c-sur2, #f8fafc);
  border: 1px solid var(--c-bor, #e2e8f0);
  color: var(--c-txt, #0f172a);
}
/**
 * **وشريطُ التبويباتِ كمان — عيبٌ كامنٌ اتلقطَ قبلَ ما يحصل.**
 *
 * لمّا يبقى فيه بانرُ هيرو، البطاقةُ بتبقى **شفّافةً على خلفيّةِ الصفحةِ**
 * (`background: transparent`) بدل ما تبقى فوقَ التدرّجِ الأزرق. والتبويباتُ
 * اتكتبت بحبرٍ **أبيضَ** لأنّها كانت على أزرق — فكانت هتبقى **أبيضَ على
 * أبيضَ** أوّلَ ما حدٌّ يرفعُ صورة.
 *
 * ومحدّش كان هيشوفَه دلوقتي: الديفُ مالوش بانرٌ متركَّب، فالمتغيّرُ ده
 * مابيشتغلش أصلًا. عيبٌ بيستنّى رفعةَ صورةٍ عشان يظهر.
 * [[a-fix-has-two-directions]]
 */
.hero--has-img .hs-tab,
.hero--has-img 
.hero--has-img .hs-tab:hover,
.hero--has-img 
.hero--has-img .hs-tab.is-active {
  background: var(--c-pri, #1B4FD8);
  border-color: var(--c-pri, #1B4FD8);
  color: #fff;
}

/* The secondary links sat on the gradient; under a white card they need their
   own contrast rather than inheriting hero-white. */

/* Hero search tabs. Sits above .row, so the card reads: which search · the
   fields · the button. */
/* **وهدفُ اللمسِ في التبويباتِ كمان.** ٩px حشوًا مع خطٍّ ١٣٫٥ = ~٣٦px،
   والحدُّ الأدنى ٤٤. دي أوّلُ حاجةٍ إصبعٌ بيلمسْها في الصفحة. */
/**
 * **التبويبُ بقى أيقونةً ونصًّا — والإيموجي اتشالت.**
 *
 * الإيموجي شكلُها بيتغيّرُ من جهازٍ لجهازٍ ومالهاش وزنٌ ولا لونٌ يتحكمَ
 * فيه. وأيقونةُ `tyreon_svg` بتاخدُ `currentColor` — فبتبهتُ مع التبويبِ
 * الساكنِ وتبيضُّ مع النشطِ، من غيرِ ولا سطرٍ زيادةٍ.
 */
.hs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgb(255 255 255 / .16);
}
.hs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  min-height: 42px;
  padding: 8px 16px;
  cursor: pointer;
  color: rgb(255 255 255 / .6);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -3px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hs-tab svg { flex: none; }
.hs-tab:hover { color: rgb(255 255 255 / .85); }

/**
 * **والنشطُ بخطٍّ تحتَه لا بصندوقٍ مملوءٍ.**
 *
 * التبويبُ المملوءُ بيتنافسْ مع زرِّ «عرض النتائج» — واللونُ الواحدُ
 * على حاجتينِ بيخلّي العينَ ماتعرفش الفعلَ الأساسيَّ فينِ. والخطُّ
 * بيقولُ «إنتَ هنا» من غيرِ ما يدّعي إنَّه زرٌّ.
 */
.hs-tab.is-active {
  color: #fff;
  border-bottom-color: #fff;
}
.hs-pane[hidden] { display: none; }
#home-ts-note { color: var(--c-txt3, #64748b); }


/* With nothing following the card, the hero ends just past it. The bottom
   padding was sized for a row of buttons that no longer exists — left as it
   was, it IS the lone blue band that was reported. */
.hero.hero--has-img { padding-bottom: clamp(18px, 2.2vw, 26px) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Dark mode: text ON the brand fill
   ─────────────────────────────────────────────────────────────────────────
   --c-pri is lightened in dark mode so the 139 places that use it as TEXT are
   readable (2.60:1 → 7.84:1). White text on that lighter blue measures 2.42:1,
   so every component filled with it flips to dark text — 7.75:1.

   These are the rules in this stylesheet that pair `background: var(--c-pri)`
   with a colour of their own. Enumerated rather than matched by a wildcard,
   because a wildcard would also catch the ones filled with a GRADIENT that
   stays dark at one end, and flip those wrongly.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-tyreon-theme="dark"] .tyreon-btn.primary,
html[data-tyreon-theme="dark"] .tyreon-pagination .current,
html[data-tyreon-theme="dark"] .tyreon-prefs-opt.active,
html[data-tyreon-theme="dark"] .stores-mode-btn.active,
html[data-tyreon-theme="dark"] .tyreon-chip.active,
html[data-tyreon-theme="dark"] .hs-tab.is-active {
  color: #0b1220;
}


/* ── إظهار كلمة المرور ────────────────────────────────────────────────────
   كانت متعرَّفة جوّه `tyreon-login.php` وبس، فأول ما فورم التسجيل استعملها
   (المالك ٢٠٢٦-٠٨-١٠: «مفيش إظهار كلمة المرور») الزرار طلع بلا مكان.
   قاعدةٌ محبوسة في قالب هي قاعدةٌ مش قابلة لإعادة الاستخدام. */
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-inline-end:44px}
.pw-wrap button{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:0;line-height:1}

/* ═══════════════════════════════════════════════════════════════════════════
   صفحة المتجر العامّة — بلغة الواجهة الجديدة، ولجمهورٍ عادي.

   المالك، ٢٠٢٦-٠٨-١٠: *«شكل صفحة المتجر في العام محتاج تكون احسن، ممكن نستخدم
   فيها UI الجديدة بطريقة مناسبة لجمهور العادي»*.

   واللي كان: شريطٌ أزرق مسطّح بمربّعٍ شفّاف، وكل التنسيق `style=""` مضمَّن في
   الماركب. يعني تغييرُ شكلٍ واحد بيتعمل في عشر حتّة، والصفحة مالهاش لغةٌ
   مشتركة مع باقي المنصّة.

   والمقاسات هنا مقصودة لواحدٍ بيدوّر على كاوتش، مش لموظّف: عناوين أكبر،
   مسافات أوسع، وأول حاجة تقع عليها العين هي **الصورة والاسم وزرار الاتصال**.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── الرأس ─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   **رأسُ صفحةِ المحلِّ: كارتٌ أبيضُ.** (تصميمُ المالكِ ٢٠٢٦-١٠-٠٨)
   ═══════════════════════════════════════════════════════════════════════════

   كانَ شريطًا أزرقَ داكنًا بعرضِ الشاشةِ، وصورةُ المحلِّ مغبَّشةٌ خلفَه. وتصميمُ
   المالكِ كارتٌ أبيضُ على خلفيّةٍ فاتحةٍ — نفسُ لغةِ باقي الصفحةِ، فالرأسُ بقى
   **أوّلَ كارتٍ** لا لافتةً منفصلةً.

   ⚠️ **والنصُّ رجعَ للونِ المحتوى** — كانَ `#fff` إجباريًّا عشانْ الخلفيّةِ
   الداكنةِ، وأبيضُ على أبيضَ اختفاءٌ. [[a-fix-has-two-directions]]
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-hero {
  position: relative;
  background: transparent;
  color: var(--c-txt);
  padding-top: 14px;
}
.sp-hero .tyreon-container:first-child {
  background: var(--c-sur, #fff);
  border: 1px solid var(--c-line, #e6eaf2);
  border-radius: var(--rad-lg, 16px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* والأزرارُ في نفسِ الكارتِ لا في شريطٍ تحتَه. */
.sp-hero .tyreon-container + .tyreon-container {
  margin-top: -1px;
  background: var(--c-sur, #fff);
  border: 1px solid var(--c-line, #e6eaf2);
  border-top: 0;
  border-radius: 0 0 var(--rad-lg, 16px) var(--rad-lg, 16px);
  padding-bottom: 16px;
}
.sp-hero .tyreon-container:first-child { border-radius: var(--rad-lg, 16px) var(--rad-lg, 16px) 0 0; }
/* صورة المحل نفسها خلف الرأس — مغبَّشة ومعتّمة، فبتدّي إحساس المكان من غير
   ما تاكل النصّ. بتتحطّ من الجافاسكربت، ومن غير صورة بيفضل التدرّج. */
.sp-hero-bg { display: none; }  /* الصورةُ المغبَّشةُ اتشالتْ مع الشريطِ الداكنِ (٢٠٢٦-١٠-٠٨). */
.sp-hero::after { content: none; }
.sp-avatar {
  width: 104px; height: 104px; border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  border: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(5,15,40,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; flex-shrink: 0;
}
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* **واللون أبيضُ صريح — مش موروثًا.**

   المالك، ٢٠٢٦-٠٨-١١: *«اسم المتجر مكتوب أسود والخلفية غامقة، بصّ كده على
   اسم المتجر Auto Parts - Sidi Bishr هتلاقي إنه مش واضح»*.

   و`.sp-hero { color:#fff }` فوق ماكانتش بتكفي: القاعدة العامّة
   `h1,h2,…,h6 { color: var(--c-txt) }` (سطر ١٩٩) **مُعلَنة على العنصر
   نفسه**، والإعلان المباشر بيكسب الوراثة مهما كان أب العنصر مظبوطًا. يعني
   الاسم كان بياخد لون النصّ العادي — كحليٌّ غامق — فوق تدرّجٍ أزرق غامق.

   ودي غلطةٌ بتتكرّر: أي عنوانٍ جوّه رأسٍ ملوّن محتاج لونه بنفسه. */
.sp-name {
  font-size: clamp(22px, 4vw, 32px); font-weight: 800; line-height: 1.2;
  margin: 0 0 8px; color: var(--c-txt);
}
/* الحقائق كشرائح مقروءة — كانت نصًّا رماديًّا على أزرق. */
.sp-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--c-sur2, #f4f6fb);
  border: 1px solid var(--c-line, #e6eaf2);
  font-size: 13px; font-weight: 600; color: var(--c-txt2);
}
.sp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; align-items: center; }
.sp-verified {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.92); color: #0b7a3b;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800;
}

/* تقييم تايرون لجودة البيانات — سطرٌ تحت الشارات، على الرأس الأزرق الغامق.
   ذهبيٌّ على الغامق: النجمة البيضاء كانت شبه مختفية، وهو نفس الدرس اللي
   العنوان الأسود على الغامق علّمه (#٢٠٢٦-٠٨-١١). والنجوم الفاضية بتفضل
   ظاهرةً بخفوت — «٢ من ٥» معلومةٌ، و«٢» لوحدها مش بتقول من كام. */
.sp-tyreon-rating {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; flex-wrap: wrap;
}
.sp-tyreon-stars { color: #fbbf24; font-size: 16px; letter-spacing: 1px; line-height: 1; }
.sp-tyreon-dim   { color: rgba(255,255,255,.35); }
.sp-tyreon-label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); }

/* ── شريط الأفعال ───────────────────────────────────────────────────────
   نزل تحت الرأس بدل عمودٍ جنبه: على الموبايل العمود كان بيضغط الاسم، وعلى
   الديسكتوب كان بعيدًا عن العين. ده بيبقى أول حاجة تحت الاسم. */
.sp-actions {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 16px 22px;
}
.sp-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: 13px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.16); color: #fff;
  backdrop-filter: blur(6px);
  transition: transform .14s ease, background .14s ease;
}
.sp-act:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
/* الاتصال هو الفعل الأساسي — أبيضُ صريح، مش واحد من خمسة متشابهين. */
.sp-act--main { background: #fff; color: var(--c-pri); border-color: #fff; box-shadow: 0 6px 18px rgba(5,15,40,.25); }
.sp-act--main:hover { background: #fff; }
.sp-act--wa { background: #25D366; border-color: #25D366; color: #fff; }
.sp-act--wa:hover { background: #1eb757; }

/* ── الكروت ────────────────────────────────────────────────────────────── */
.sp-card {
  background: var(--c-sur); border: 1px solid var(--c-bor);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
}
.sp-card + .sp-card { margin-top: 16px; }
/**
 * **عناوينُ أقسامِ صفحةِ المحلِّ كانت عناصرَ نصٍّ — عشرةُ أقسامٍ بلا عنوانٍ.**
 *
 * صفحةُ المحلِّ فيها عشرُ بطاقاتٍ (صورٌ · خدماتٌ · ماركاتٌ · عربيّاتٌ ·
 * دفعٌ · وصفٌ · تواصلٌ · سوشيال · موقعٌ · معلوماتٌ)، وكلُّ واحدةٍ عنوانُها
 * كان عنصرَ نصٍّ عاديًّا. يعني **الصفحةُ عندَها عنوانٌ رئيسيٌّ واحدٌ وبس**
 * — ومستخدمُ قارئِ الشاشةِ بيتنقّلُ بالعناوينِ، فماكانش قدّامَه غيرُ إنّه
 * يقرا الصفحةَ كلَّها سطرًا سطرًا عشان يوصلْ لرقمِ التليفونِ.
 *
 * **وهي نهايةُ الرحلةِ** — «يصلُ إلى متجرٍ → يتّخذُ إجراءً». الإجراءُ
 * لازم يكونَ على بُعدِ خطوةٍ لكلِّ مستخدمٍ.
 *
 * بقوا مستوى تانٍ تحتَ اسمِ المحلِّ، والمقاسُ **موروثٌ** عشان التغييرَ
 * يبقى دلاليًّا بحتًا بلا أثرٍ بصريٍّ.
 * [[reading-code-is-not-running-it]] · [[every-screen-needs-a-door]]
 */
.sp-card-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 18px; border-bottom: 1px solid var(--c-bor);
  font-size: var(--fs-md); font-weight: 800; color: var(--c-txt);
}
.sp-card-hd h2 { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; letter-spacing: inherit; }
.sp-card-bd { padding: 18px; }

/* ── سطر الحقائق السريع (فوق كل حاجة) ───────────────────────────────────
   اللي بيدوّر على محل عايز يعرف تلات حاجات في تانية: مفتوح دلوقتي؟ فين؟
   ومنتجاته كام؟ */

/* ── الشبكة ────────────────────────────────────────────────────────────── */
/* **والفراغ لمّا المحل لسه مالوش تفاصيل.**

   المالك، ٢٠٢٦-٠٨-١٠: *«الاماكن الفاضي ده بتكون ليه بجد؟»* — وهو بيتكلّم عن
   البوّابة، والصفحة دي كان فيها نفس المرض: عمودان ثابتان، والرئيسي فيه كارتٌ
   واحد لمّا المحل يبقى جديدًا.

   الكروت بتخفي نفسها لمّا تبقى فاضية (وده صح)، فالنتيجة عمودٌ طويل جنب عمودٍ
   قصير. `align-items: start` بتمنع التمطيط، و`.sp-body--thin` — بتتحطّ من
   الجافاسكربت لمّا الكروت المعروضة تبقى أقلّ من تلاتة — بتلغي العمود خالص،
   فالخريطة والتواصل بياخدوا العرض كله وينزلوا جنب بعض. */
.sp-body { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
.sp-body--thin { grid-template-columns: 1fr; }
.sp-body--thin .sp-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sp-body--thin .sp-side .sp-card + .sp-card { margin-top: 0; }
.sp-side { position: sticky; top: 76px; }

/* ── شريط الخلاصة ───────────────────────────────────────────────────────
   الحقايق اللي بيتسأل عنها قبل أي تفصيلة، في سطرٍ واحد فوق العمودين.

   المالك، ٢٠٢٦-٠٨-١١: *«يكون فيها كل المعلومات الخاصة بالمتجر المتاحة
   للمستخدم والزائر»*. والصفحة كانت بتبتدي بصندوق تواصلٍ بيكرّر أزرار الرأس،
   وجنبه خريطة — يعني ولا حقيقة عن المحل نفسه في أول شاشة، رغم إن الردّ فيه
   النوع وسنة التأسيس والمنطقة والتقييم وحالة الفتح.

   والمربّع بيترسم لو ليه قيمة بس: محلٌّ بياناته قليلة شريطه أقصر، مش صفحةً
   فيها مربّعاتٌ فاضية. */
/**
 * **بلاطةٌ واحدةٌ تفضلْ بلاطةً — مابتتمدّش على العرضِ كلِّه.**
 *
 * بلاغُ المالكِ ٢٠٢٦-١٠-٠٤ على المتجرِ #2286: *«عرض المتجر ده مش صح، مختلف
 * عن كل المتاجر»*. والمقيسُ إنّ المتجرَ ده **شبهَ فاضٍ** (بلا نوعِ نشاطٍ ولا
 * سنةِ تأسيسٍ ولا منتجاتٍ)، فبلاطةٌ واحدةٌ بتفضلْ — «المنطقة».
 *
 * و`auto-fit` بيطبقُ المساراتِ الفاضيةَ **ويمدُّ الباقيةَ**، فبلاطةٌ فيها
 * كلمتانِ بقتْ صندوقًا بعرضِ الصفحةِ فيه فراغٌ. يعني الشكلُ بيتغيّرُ مع
 * **كمِّ البياناتِ** — ومحلٌّ ناقصُ البياناتِ بيبانُ «مكسورًا» لا «ناقصًا».
 * [[count-is-not-a-condition]]
 *
 * والسقفُ بيخلّي الواحدةَ والتمانيةَ بنفسِ الشكلِ، و`justify-content: start`
 * بتسيبُهمْ عندَ بدايةِ السطرِ بدلَ ما يتوسّطوا.
 */
.sp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 260px));
  justify-content: start;
  gap: 12px; margin-bottom: 20px;
}
.sp-facts:empty { display: none; margin: 0; }
/* **وبقى جوّا كارتِ «معلوماتُ المحلِّ»** (٢٠٢٦-١٠-٠٨): بلاطاتٌ تملا عرضَ
   الكارتِ زيَّ التصميمِ، لا صفٌّ قصيرٌ عايمٌ فوقَه. */
/* `auto-fill` لا `auto-fit`: `auto-fit` بيطبقُ المساراتِ الفاضيةَ، فبلاطتانِ
   في كارتٍ عرضُه ٩٠٠px بيتمطّوا لـ٤٥٠px للواحدةِ — بلاطةٌ بتقولُ «٢٠١٨» وبينها
   وبينَ عنوانِها شبرٌ. `auto-fill` بيسيبُ المساراتِ فالبلاطةُ بتفضلْ بحجمِها. */
#sp-info-card .sp-facts {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  padding: 14px 14px 0; margin-bottom: 14px;
}
#sp-info-card .sp-facts:empty { padding: 0; }
.sp-fact {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--c-sur); border: 1px solid var(--c-bor);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.sp-fact-ico { font-size: 17px; line-height: 1; margin-bottom: 4px; }
.sp-fact-v { font-size: 15px; font-weight: 800; color: var(--c-txt); line-height: 1.25; }
.sp-fact-l { font-size: var(--fs-xs); color: var(--c-txt2); }
/* «مفتوح دلوقتي» بيتلوّن — الحالة دي هي اللي بتقرّر يركب ولا يستنّى. */
.sp-fact--ok { border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.07); }
.sp-fact--ok .sp-fact-v { color: #16a34a; }

/* ── محلّات قريبة ───────────────────────────────────────────────────────
   محلٌّ بياناته قليلة مش هينملي بكلامٍ نخترعه — بس ينفع نقول لواحدٍ واقف على
   صفحته إن فيه أربع محلّات على بُعد كيلومتر، ودي معلومةٌ حقيقية عندنا.

   **وقسمٌ مستقل تحت، مش بطاقةً في العمود الجنبي.** المالك، ٢٠٢٦-٠٨-١١:
   *«تحسّ إنه جزء من بيانات المحلّات، مع إن المفروض يتم فصلهم»*. وبطاقةٌ جنب
   «الموقع» و«معلومات» بتقول بصريًّا إن التلاتة بيوصفوا نفس المحل — والخطّ
   الفاصل والعنوان والسطر التوضيحي بيقولوا العكس. */
.sp-near-sec {
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid var(--c-bor);
}
.sp-near-hd { margin-bottom: 16px; }
.sp-near-hd h2 { font-size: 19px; font-weight: 800; margin: 0 0 4px; color: var(--c-txt); }
.sp-near-hd p { font-size: 13px; color: var(--c-txt2); margin: 0; }
.sp-near-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}
/* **والبديلُ بيستضيفُ الوشَّ المصمَّمَ** — نفسُ اللي الدليلُ بيرسمُه. كانَ
   أيقونةً ٣٠px في المنتصفِ، فكلُّ محلٍّ بلا صورةٍ شكلُه واحدٌ. والوشُّ بيتمدّدْ
   على الصندوقِ لأنّ مقاساتِه نسبةٌ منه. [[unify-once-not-per-portal]] */
/* 🔴 **وكانَ ٩px — واللي مايتقراش مايتصغّرش، يتشالْ.**
   صندوقُ «متاجرَ قريبةٍ» ٩٦px، والاسمُ مكتوبٌ **تحتَه مباشرةً** في البطاقةِ.
   فتصغيرُه لـ٩px كانَ بيحطُّ معلومةً مكرَّرةً بمقاسٍ مابيتقراش — نفسُ قاعدةِ
   الوشِّ الصغيرِ في صفحاتِ الماركاتِ. [[one-type-scale]] */

/* ── المعرض ────────────────────────────────────────────────────────────── */
/* نفسُ القاعدةِ للمعرضِ — صورةٌ واحدةٌ كانتْ بتقفْ في أوّلِ مسارٍ وتسيبُ
   باقيَ الكارتِ فراغًا. والسقفُ بيخلّيها مربّعًا مقصودًا. */
/**
 * **ومعرضٌ بصورةٍ واحدةٍ مابيسيبش كارتًا عريضًا فاضيًا.**
 *
 * بلاغُ المالكِ ٢٠٢٦-١٠-٠٥: الكارتُ بعرضِ الصفحةِ والصورةُ مربّعٌ ١٨٠px في
 * الركنِ — `justify-content: start` بيلزّقْها في أوّلِ السطرِ والباقي فراغٌ.
 *
 * 🔑 **والصورةُ الواحدةُ حالةٌ لا استثناءٌ**: أغلبُ المحلّاتِ اللي عندَها صورٌ
 * عندَها **واحدةٌ**. فالحالةُ الشائعةُ لازمْ تبقى هي الشكلَ الصحَّ، مش الحالةَ
 * اللي الشبكةُ بتتعاملْ معاها كبقيّةٍ.
 *
 * فواحدةٌ بتاخدْ عرضًا محترمًا وبنسبةٍ عريضةٍ (زيَّ غلافٍ)، والاتنانِ فأكترُ
 * بيرجعوا للشبكةِ المربّعةِ. [[count-is-not-a-condition]]
 */
.sp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 180px));
  justify-content: start; gap: 10px; }
.sp-gallery:has(> a:only-child) { grid-template-columns: minmax(0, 520px); }
.sp-gallery > a:only-child { aspect-ratio: 16 / 10; }
.sp-gallery > a:only-child img { object-fit: contain; background: var(--c-sur2); }
.sp-gallery a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--c-sur2); }
.sp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.sp-gallery a:hover img { transform: scale(1.06); }

/* ── الشرائح (خدمات · ماركات · دفع) ────────────────────────────────────── */

/* ── لمّا المحل لسه مالوش تفاصيل ────────────────────────────────────────
   صفحةٌ فاضية بتتقري «الموقع باظ». جملةٌ واحدة بتقول إن ده طبيعي. */

@media (max-width: 900px) {
  .sp-body { grid-template-columns: 1fr; }
  .sp-side { position: static; }
}
@media (max-width: 560px) {
  .sp-avatar { width: 84px; height: 84px; border-radius: 18px; }
  .sp-act { flex: 1 1 auto; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   هيرو الدليل — كسوةٌ واحدةٌ لخمسِ صفحات.

   كانت مكتوبةً `style="…"` جوّا كلِّ قالبٍ من الخمسة: ٦ سماتٍ × ٥ = ٣٠،
   ونفسُ القيمِ بالحرف. المعمارُ (`template-parts/directory-hero.php`)
   بيشرحُ ليه اتوحّدت.

   والتدرّجُ بيقرا `--c-pri` و`--pri-m` (التدرّجُ الأوسطُ، مالوش نظيرٌ في العائلةِ القانونيّةِ فاتساب) — يعني لونُ العلامةِ لو اتغيّرَ
   في سطرٍ واحدٍ بيوصلْ هنا كمان، بدل ما يفضلَ `#1B4FD8` مكتوبًا في خمسةِ
   قوالب. [[unification-over-duplication]]
   ───────────────────────────────────────────────────────────────────── */
/**
 * **الهيرو ده كان بيقرا «قديم» — وده اللي المالكُ حسَّه.**
 *
 * كان شريطًا **مسطّحًا**: تدرّجٌ من أزرقٍ لأزرقٍ أفتحَ بحوافَّ حادّةٍ،
 * وإيموجي بـ٥٢ بكسل فوقَ عنوان. ودي لغةُ ٢٠١٥ بالظبط.
 *
 * واللي اتغيّرَ تلاتُ حاجاتٍ **مالهاش علاقةٌ بالذوق**:
 *
 *   ١ · **العمقُ بدل السطح.** التدرّجُ بقى من نيڤي العلامةِ (`--c-ink`)
 *       للأزرقِ — تدرّجٌ بينَ لونينِ **مختلفينِ في القيمةِ** لا درجتينِ من
 *       نفسِ اللون. وده اللي بيدّي إحساسَ الجسمِ بدل الورقةِ الملوّنة.
 *
 *   ٢ · **وضوءٌ واحدٌ ساقطٌ.** هالةٌ خافتةٌ فوقَ وسطِ الشريطِ بتخلّي العينَ
 *       تلاقي العنوانَ لوحدِها. `radial-gradient` مالهاش أيُّ تكلفةٍ —
 *       ولا صورةٌ ولا طلبٌ زيادة.
 *
 *   ٣ · **والعلامةُ صغرت والعنوانُ كبر.** الإيموجي كان أكبرَ عنصرٍ في
 *       الشريط، والمفروضُ العنوانُ هو. و`clamp()` بتخلّي المقاسَ يتنفّسُ
 *       مع الشاشةِ بدل ما يبقى رقمًا واحدًا للتليفونِ والديسكتوب.
 *
 * وكلُّه في **قاعدةٍ واحدةٍ بتوصلُ لخمسِ صفحات** — ده مكسبُ التوحيدِ اللي
 * اتعملَ قبلَ كده: التحسينُ بيتعملُ مرّةً وينتشرُ خمسًا.
 */
/**
 * **رتبُ الرئيسيّةِ — الشكلُ بيقولُ الأولويّة.**
 *
 * `docs/product/PUBLIC-FACE-DESIGN-PLAN.md` §١: سبعةُ رفوفٍ متطابقةٍ
 * بتخلّي الصفحةَ ماتقولش إيه المهمّ. فالرفُّ المميَّزُ بياخدُ عنوانًا أكبرَ
 * ومسافةً أوسعَ وكروتًا أعرض، وكتلةُ التصفّحِ بتاخدُ ربعَ المساحةِ
 * وبترسمُ روابطَ.
 */
.home-rail-sec.is-feature { padding-block: 8px 4px; }
.home-rail-sec.is-feature .home-rail-hd h2 { font-size: clamp(19px, 2.4vw, 23px); }
.home-rail-sec.is-feature .home-rail > * { min-width: 232px; }

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

/**
 * **شريطُ فلترةِ الكتالوج — كان تلاتَ مخالفاتٍ في أربعةِ عناصر.**
 *
 * الفلاترُ كانت مكتوبةً سمةً مضمَّنةً على كلِّ عنصرٍ، وفيها:
 *
 *   `padding: 10px 16px`  → ~٣٨px ارتفاعًا، **تحتَ حدِّ اللمسِ ٤٤**
 *   `border-radius: 8px`  → قطرٌ مثبَّتٌ، والقانونيُّ `--rad` = ١٠
 *   `border: none`        → المدخلُ بيلزقُ في اللافتةِ بلا حافّة
 *
 * والتلاتةُ مكرّرةٌ أربعَ مرّاتٍ — يعني أيُّ تعديلٍ لازم يتعملَ أربعةً.
 * فبقت مكوّنًا واحدًا، ونفسُ لغةِ فلاترِ قايمةِ المتاجرِ اللي ناضجةٌ خلاص.
 */
/**
 * **مرشّحُ الشبكةِ — واحدٌ للماركاتِ وللموديلات.**
 *
 * مرشّحُ الموديلاتِ في «اعثرْ على سيّارتك» كان مكتوبًا سمةً مضمَّنةً بـ
 * `padding:10px` (~٣٨px، **تحتَ حدِّ اللمسِ ٤٤**) و`border-radius:12px`
 * مثبَّتٍ مش `--rad-lg`. ولمّا زوّدتُ مرشّحًا للماركاتِ بقى نمطًا متكرّرًا،
 * فاتكتبَ مرّةً واحدة.
 */
/**
 * **زرّا المظهرِ واللغةِ في القايمة — نفسُ لغةِ البوّابة.**
 *
 * أزرارٌ شفّافةٌ صغيرةٌ بحدٍّ خفيفٍ، بتتلوّنْ بلونِ العلامةِ عند الوقوف.
 * ٤٤px لأنّهما بيتلمسوا زيَّ أيِّ حاجةٍ تانية.
 */
.hdr-pref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  min-width: 40px;
  padding: 6px 10px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  background: transparent;
  color: var(--c-txt2);
  font-family: var(--fnt);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.hdr-pref svg { width: 17px; height: 17px; flex: none; }
.hdr-pref:hover { color: var(--c-pri); border-color: var(--c-pri); background: var(--c-sur2); }
.hdr-pref--icon { padding-inline: 8px; justify-content: center; }
/* على الشاشاتِ الصغيرةِ القايمةُ ضيّقةٌ، والاتنانِ موجودانِ في الدرجِ. */
@media (max-width: 640px) { .hdr-pref { display: none; } }

/**
 * **شريطُ «خلصنا — تروحْ فين».**
 *
 * بيبانُ بعدَ ما العربيّةُ تتحفظُ فعلًا، ولونُه من عائلةِ النجاحِ لا من
 * لونِ العلامةِ: هو بيقولُ «تمّ» قبلَ ما يقولَ «روحْ».
 */
/* رسالةُ التوسيعِ — تنبيهٌ هادئٌ لا خطأٌ: المنصّةُ شغّالةٌ، الفلترُ بس
   ماكانش ليه نتيجة. */
.stores-widened {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--c-amb);
  border-radius: var(--rad);
  background: var(--c-amb-l);
  color: var(--c-amb-d);
  font-size: 13.5px;
  font-weight: 700;
}
.stores-widened[hidden] { display: none; }

/* «مرتّبة بالأقرب لموقعك» / «موقعك مش متاح» — سطرٌ بيقولْ أساسَ الترتيبِ، مش تنبيهًا. */
.stores-order-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  background: var(--c-sur2);
  color: var(--c-txt2);
  font-size: 13.5px;
}
.stores-order-note strong { color: var(--c-txt); }
.stores-order-note__all {
  margin-inline-start: auto;
  color: var(--c-pri);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stores-order-note[hidden] { display: none; }
/* «حدّث موقعي» في نفسِ الشريطِ (٢٠٢٦-١١-٠٣) — في آخرِ السطرِ زيَّ «كل المتاجر». */
.stores-order-note__btn {
  margin-inline-start: auto;
  border: 1px solid var(--c-pri);
  border-radius: 999px;
  background: var(--c-sur, #fff);
  color: var(--c-pri);
  font: inherit;
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 12px;
  cursor: pointer;
}
.stores-order-note__btn:disabled { opacity: .6; cursor: progress; }
.stores-order-note__all + .stores-order-note__btn { margin-inline-start: 0; }

.fyc-done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--c-grn);
  border-radius: var(--rad-lg);
  background: var(--c-grn-l);
}
.fyc-done[hidden] { display: none; }
.fyc-done-lbl { font-weight: 800; color: var(--c-grn-d); font-size: 14px; }
.fyc-done-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/**
 * **متاجرُ العربيّةِ في نفسِ الصفحةِ — طبقتانِ بنفسِ الشكلِ.**
 *
 * الطبقتانِ (المتخصّصونَ · أقربُ المتاجرِ) **بيتقروا زيَّ بعضٍ** عن قصدٍ:
 * الفرقُ بينهما مكتوبٌ في السطرِ تحتَ العنوانِ لا مرسومٌ باللونِ. لونٌ
 * بيقولُ «دي أحسنُ» بيوعدُ بترتيبٍ مالوش أساسٌ في البياناتِ النهارده.
 *
 * والبطاقةُ رابطٌ كاملٌ لا اسمٌ جوّه صندوقٍ: الهدفُ كلُّه قابلٌ للنقرِ،
 * وارتفاعُه ≥ ٤٤ بكسل عشان الإصبعِ. [[anchor-needs-a-box]]
 */

.fyc-st {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  background: var(--c-sur);
  color: var(--c-txt);
  text-decoration: none;
}
.fyc-st:hover { border-color: var(--c-pri); background: var(--c-sur2); }

/**
 * **شارةُ التوافقِ — أربعُ حالاتٍ بأربعةِ ألوانٍ دلاليّة.**
 *
 * اللونُ هنا **مش زخرفةً**: هو أوّلُ حاجةٍ بتتقرا قبلَ الكلمات. الأخضرُ
 * «اطمئنّ»، والأزرقُ «ده اختيارٌ تانٍ»، والكهرمانيُّ «راجعْ»، والرماديُّ
 * «لسه مانعرفش». والأربعةُ من توكِنز اللوحةِ فبيتقلبوا مع الوضعِ الداكن.
 */
/**
 * **كتلةُ الجوابِ — أوّلُ حاجةٍ بعدَ الهيرو.**
 *
 * مش رفًّا ولا شبكةً: هي **جوابٌ على السؤالِ اللي الهيرو سألَه**. فشكلُها
 * أقربُ لبطاقةِ نتيجةٍ منه لقسمِ تصفّح — إطارٌ واحدٌ، عنوانٌ، ومحتوًى
 * بيتغيّرُ حسبَ اللي إحنا عارفينَه.
 */
/**
 * **شريطُ الإثباتِ في الهيرو.**
 *
 * صفٌّ واحدٌ خفيفٌ تحتَ بطاقةِ البحثِ — **مش بطاقاتِ إحصاءٍ**. الفرقُ
 * مقصودٌ: البطاقاتُ بتقولُ «بُصَّ لي» وتزاحمُ الفعلَ الأساسيَّ، والصفُّ
 * بيقولُ «اطمئنّ» وإنت رايحٌ تدوس.
 *
 * و`min-height` بتحجزُ المساحةَ قبلَ ما الأرقامُ توصلَ من الشبكةِ —
 * وإلّا بطاقةُ البحثِ اللي فوقُها بتنطّ.
 */
/**
 * **صفُّ الأسبابِ — تلاتةٌ بفاصلٍ شعريٍّ لا تلاتُ بطاقات.**
 *
 * الفاصلُ `border-inline-start` بيشتغلُ في الاتّجاهين لوحدَه، وبيختفي
 * لمّا الصفُّ ينهارُ لعمودٍ — الخطُّ الرأسيُّ بينَ عناصرَ فوقَ بعضِها
 * بيبقى غلطًا بصريًّا.
 */

/**
 * **شريطُ الثقةِ — صفٌّ واحدٌ بينهارُ لاتنينِ ثمَّ لواحدٍ.**
 *
 * أربعةٌ في صفٍّ على الديسكتوبِ، اتنانِ على التابلت، وواحدٌ على
 * التليفونِ — **مش أربعةً مضغوطينَ**: النصُّ اللي مايتقراش وعدٌ ضايعٌ.
 *
 * ومافيش حدودٌ بينهم ولا صناديقُ: ده صفُّ طمأنةٍ لا أربعُ بطاقاتٍ.
 */
/* ═══════════════════════════════════════════════════════════════════
   الهيرو — إعادةُ بناءٍ (٢٠٢٦-٠٨-٢٧)

   المالك: «DO NOT OPTIMIZE THE OLD DESIGN. REDESIGN THE EXPERIENCE».
   والقواعدُ في `docs/product/PUBLIC-VISUAL-DIRECTION.md`.
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **الأرضيّةُ بقت حبرًا لا تدرّجًا أزرقَ.**
 *
 * التدرّجُ الأزرقُ كانَ بيخلّي الأزرقَ **هو الخلفيّةَ** — فالزُّرارُ
 * الأزرقُ عليه بيضيعُ، والصفحةُ كلُّها بتقرا بنبرةٍ واحدةٍ. وعلى الحبرِ
 * الأزرقُ بيرجعُ يبقى **إشارةً**: الزُّرارُ بيلمعُ، والرقمُ بيبانُ،
 * والعنوانُ الأبيضُ بيتنفّسُ.
 *
 * والارتفاعُ `min-height` لا `padding` ثابتٌ: الهيرو **مساحةٌ** لا شريطٌ.
 * وعلى التليفونِ بيقلَّ عشانَ الفعلُ الأساسيُّ يفضلَ فوقَ الطيّةِ.
 */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-ink-deep);
  color: #fff;
  padding: var(--sp-8) 16px var(--sp-7);
  min-height: min(78vh, 720px);
  display: grid;
  align-items: center;
  text-align: start;
}
@media (max-width: 780px) {
  .hero { min-height: 0; padding: var(--sp-7) 16px var(--sp-6); }
}

/**
 * **شبكةُ الرسمِ الفنّيِّ.**
 *
 * خطوطٌ كلُّ ٤٨px بشفافيّةٍ ٤٫٥٪ — تحسُّها ومابتقراهاش. ودي اللي بتقولُ
 * «مقاسٌ ودقّةٌ» من غيرِ ولا صورةٍ. وبتتلاشى عندَ الحوافِّ بـ`mask` عشانَ
 * ماتعملش إطارًا.
 */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 40%, #000 40%, transparent 100%);
}

/**
 * **الموتيفُ: مقطعُ إطارٍ بيخرجُ من الحافّةِ.**
 *
 * بيقعدُ في الجهةِ **المنطقيّةِ** (`inset-inline-end`) فبيتقلبُ مع
 * العربيّةِ لوحدَه. وبيتقصُّ من الحافّةِ عن قصدٍ: الشكلُ المقصوصُ بيقرا
 * «الصفحةُ أوسعُ من الشاشةِ» — إحساسٌ بالمساحةِ.
 *
 * وبيختفي تحتَ ٧٨٠px: على تليفونٍ المساحةُ للفعلِ لا للزخرفةِ.
 */
.hero-motif {
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  translate: 0 -50%;
  width: min(52vw, 560px);
  height: auto;
  color: #fff;
  pointer-events: none;
}
@media (max-width: 980px) { .hero-motif { inset-inline-end: -22%; opacity: .55; } }
@media (max-width: 780px) { .hero-motif { display: none; } }

/**
 * **عمودُ الكلامِ محدودٌ — والحدُّ هو التصميمُ.**
 *
 * الكتلةُ بتوقفْ عندَ ٧٢٠px حتى على شاشةٍ عرضُها ١٩٢٠. عنوانٌ بيمتدُّ
 * على الشاشةِ كلِّها بيتقرا **صفًّا** لا **بيانًا** — والعينُ بتتوهُ في
 * رجوعِها لأوّلِ السطرِ.
 */
.hero .inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: 0;
  text-align: start;
}
@media (min-width: 1240px) { .hero .inner { max-width: 760px; } }

/**
 * **الحاجبُ: الإثباتُ قبلَ الوعدِ.**
 *
 * سطرٌ صغيرٌ بنقطةٍ خضراءَ نابضةٍ ورقمينِ حيَّينِ. النقطةُ بتقولُ «حيٌّ
 * دلوقتي» — والرقمُ اللي جنبَها بيبقى قراءةً لا ادّعاءً.
 *
 * وبيترسمُ بارتفاعٍ محجوزٍ (الأرقامُ بتيجي من الشبكةِ) — وإلّا العنوانُ
 * كلُّه بينطُّ. [[#59 CLS]]
 */
.hero-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 22px;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgb(255 255 255 / .72);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.hero-kicker.is-on { opacity: 1; }
.hero-kicker b { color: #fff; font-weight: 800; }
.hero-kicker-sep { color: rgb(255 255 255 / .35); }
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / .6);
  animation: heroPulse 2.4s ease-out infinite;
}
@keyframes heroPulse {
  70%  { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); }
}

.hero .display { color: #fff; margin: 0 0 var(--sp-4); }
.hero-sub {
  margin: 0 0 var(--sp-6);
  max-width: 54ch;
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: rgb(255 255 255 / .78);
}

/**
 * **بابُ الخروجِ: هادئٌ وموجودٌ.**
 *
 * البطاقةُ بتطلبُ من الزائرِ يعرفَ عربيّتَه أو مقاسَه. واللي لسه
 * بيتفرّجُ مايعرفش ولا واحدةً — فالسطرُ ده بابُه، تحتَ البطاقةِ مباشرةً
 * وبوزنٍ أقلَّ منها.
 */
.hero-out {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / .62);
}
.hero-out a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgb(255 255 255 / .38);
}
.hero-out a:hover { text-decoration-color: #fff; }

/* والمشهدُ القديمُ اتشالَ — القواعدُ دي بتلغيه لو فضلَ في ماركٍ قديمٍ. */
.hero-scene, .hero-road, .hero-car, .hero-tire { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   دعوةُ التاجرِ — كتلةٌ تحريريّةٌ (٢٠٢٦-٠٨-٢٨)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **عمودانِ: النداءُ والحقائقُ — لا كتلةٌ متوسّطةٌ.**
 *
 * الكتلةُ المتوسّطةُ بتقرا «لافتةً»، والصفُّ التحريريُّ بيقرا «عرضًا».
 * والفرقُ إنَّ الحقائقَ بتاخدُ عمودَها بدل ما تتحشرَ تحتَ الزرِّ.
 */
.home-cta-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 880px) {
  .home-cta-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-8); }
}

.cta-kicker {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  color: rgb(255 255 255 / .62);
}
.home-cta-say h2 { margin: 0 0 var(--sp-3); color: #fff; }
.cta-sub {
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-md);
  line-height: 1.8;
  color: rgb(255 255 255 / .78);
}

/**
 * **زرٌّ أبيضُ على الحبرِ — الفعلُ الوحيدُ في القسمِ.**
 *
 * كانَ `style="background:#fff;color:var(--c-pri)"` داخلَ السطرِ. واللونُ
 * المثبَّتُ بإيدٍ مابيعرفش وضعًا داكنًا ولا توكِن؛ والقاعدةُ هنا بتاخدُ
 * لونَها من نفسِ المصدرِ اللي كلُّ حاجةٍ بتاخدُ منه.
 */
.cta-go {
  background: #fff;
  color: var(--c-ink-deep);
  font-weight: 800;
  padding: 13px 30px;
  min-height: 48px;
  border: 0;
}
.cta-go:hover, .cta-go:focus-visible { background: rgb(255 255 255 / .88); color: var(--c-ink-deep); }

/**
 * **الحقائقُ صفوفٌ بعلامةٍ — والعلامةُ مرسومةٌ بالكسوةِ لا بحرفٍ.**
 *
 * علامةُ الصحِّ لو إيموجي بيرسمْها نظامُ التشغيلِ بلونِه هو. ودي
 * مرسومةٌ بـ`border` على مربّعٍ مدوَّرٍ — بتاخدُ لونَ النصِّ وبتصغرُ معاه.
 */
.cta-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cta-facts li {
  position: relative;
  padding: 13px 0 13px 0;
  padding-inline-start: 30px;
  border-top: 1px solid rgb(255 255 255 / .14);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgb(255 255 255 / .84);
}
.cta-facts li:last-child { border-bottom: 1px solid rgb(255 255 255 / .14); }
.cta-facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18px;
  width: 15px;
  height: 8px;
  border-inline-start: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: .8;
}

/* الرسمُ الخلفيُّ باهتٌ وبيختفي على الضيّقِ — الزخرفةُ مابتزاحمش نصًّا. */
.home-cta-art { opacity: .06; color: #fff; }
@media (max-width: 700px) { .home-cta-art { display: none; } }
/* ═══════════════════════════════════════════════════════════════════
   «مركبتي» — اللوحةُ الطافيةُ (٢٠٢٦-٠٨-٢٨)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **بتطفو فوقَ الهيرو — والعمقُ ده هو الفرقُ.**
 *
 * على الشاشةِ الواسعةِ اللوحةُ `absolute` جوّا الهيرو، في الحافّةِ
 * المقابلةِ للعنوانِ فمابتنافسْهوش. وبأرضيّةٍ شبهِ شفّافةٍ + `blur`،
 * فالحبرُ اللي وراها بيبانُ — **طبقةٌ فوقَ طبقةٍ**، لا صندوقٌ جنبَ صندوقٍ.
 *
 * وعلى التليفونِ بترجعُ `static` فوقَ بطاقةِ البحثِ: التراكبُ على ٣٦٠px
 * بياكلْ محتوًى، والسيّارةُ لازم تبانَ **قبلَ** البحثِ لأنَّها بتغيّرُ
 * نتيجتَه.
 */
.gar {
  position: relative;
  z-index: 3;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--rad-xl);
  border: 1px solid rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  box-shadow: 0 18px 44px -22px #000;
}
@media (min-width: 1000px) {
  .gar {
    position: absolute;
    inset-block-start: clamp(84px, 12vh, 132px);
    inset-inline-end: var(--gutter);
    width: 268px;
    margin: 0;
  }
}

.gar-lbl {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  color: rgb(255 255 255 / .62);
}

/**
 * **الشعارُ الحقيقيُّ فوقَ ظلِّ الهيكلِ — أقوى صورةٍ في الصفحةِ.**
 *
 * ٤٨ شعارَ ماركةٍ هما **الأصلُ البصريُّ الوحيدُ الحقيقيُّ** في المشروعِ
 * (صفرُ صورٍ لكلِّ حاجةٍ تانيةٍ). فبيتعرضوا في أوضحِ مكانٍ.
 *
 * والظلُّ أبيضُ شفّافٌ لأنَّه SVG أسودُ على أرضيّةِ حبرٍ — `brightness`
 * بتقلبُه من غيرِ ما نلمسَ ١٢ ملفًّا.
 */
.gar-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 48px;
  margin-bottom: 10px;
}
.gar-sil {
  height: 44px;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .82;
}
.gar-logo {
  flex: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}

.gar-name {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}

/* الحقائقُ بأرقامٍ جدوليّةٍ — لسانُ الأداةِ. */
.gar-facts {
  margin: 3px 0 0;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / .72);
  text-align: start;
}

.gar-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgb(255 255 255 / .14);
}
.gar-a {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgb(255 255 255 / .66);
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: 32px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gar-a:hover, .gar-a:focus-visible { color: #fff; border-bottom-color: currentColor; text-decoration: none; }
/* التبديلُ فعلٌ أساسيٌّ فهو أبيضُ؛ والخروجُ نادرٌ فهو أهدأُ. */
.gar-a--main { color: #fff; }
.gar-a--main::after { content: " ←"; }
html[dir="ltr"] .gar-a--main::after { content: " →"; }

@media (max-width: 600px) {
  .gar { padding: var(--sp-4); }
  .gar-a { min-height: 44px; display: flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   تصنيفاتٌ · علاماتٌ · أدلّةٌ — تلاتُ أقسامٍ بفتحاتِ صورٍ (٢٠٢٦-٠٨-٢٨)

   المالك: «ضيفهم… وأنا لمّا أرفعْ أحطُّ الصورَ براحتي، لكنْ تنظيمُ
   الصفحةِ يكونُ جاهزًا كلَّه».

   فكلُّ قسمٍ فيه **حالتانِ مكتوبتانِ**: بصورةٍ وبلا صورةٍ. والتانيةُ مش
   «حالةً فاضيةً» — دي تصميمٌ قايمٌ بذاتِه، عشان الصفحةُ تبقى كاملةً
   النهاردةَ وتتحسّنَ بكرةَ.
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **التصنيفاتُ — بلاطاتٌ صغيرةٌ في صفٍّ، لا بطاقاتٌ بارتفاعِ شاشةٍ.**
 *
 * `auto-fit` بحدٍّ أدنى ١٤٠px: خمسةٌ على الواسعِ، تلاتةٌ على التابلت،
 * اتنانِ على التليفونِ — بلا ولا `@media`. والوزنُ خفيفٌ عن قصدٍ لأنَّ ده
 * **مدخلٌ سريعٌ** لا قسمٌ يقفَ عندَه الزائرُ.
 */
.hc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.hc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hc-tile:hover, .hc-tile:focus-visible {
  border-color: var(--c-pri);
  transform: translateY(-2px);
  text-decoration: none;
}

/**
 * **فتحةُ الصورةِ بنسبةٍ ثابتةٍ — الصفُّ مايتهزّش لمّا الصورُ تترفعْ.**
 *
 * الفتحةُ ليها `aspect-ratio` من الأوّلِ. فلمّا المالكُ يرفعْ صورةً،
 * بتقعدْ في نفسِ المساحةِ بالظبط — **الصفحةُ مابتتغيّرش، الصورةُ بس
 * بتظهرُ**. ولو الصورُ اترفعت بأبعادٍ مختلفةٍ، `object-fit: cover`
 * بيقصُّها لنفسِ الشكلِ فالصفُّ يفضلْ منتظمًا.
 */
.hc-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--rad);
  overflow: hidden;
  background: var(--c-pri10);
  color: var(--c-pri);
  font-size: 30px;   /* الأيقونةُ ١em — فالحجمُ من هنا */
}
.hc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }

/* وعلى التليفونِ البلاطةُ أفقيّةٌ — الصفُّ العموديُّ بياكلْ شاشةً كاملةً. */
@media (max-width: 480px) {
  .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-art { aspect-ratio: 16 / 10; font-size: 24px; }
}

/**
 * **العلاماتُ — شريطٌ رفيعٌ، والاسمُ هو العلامةُ لحدِّ ما يترفعَ الشعارُ.**
 *
 * صفرُ شعاراتٍ لعشرِ علاماتٍ. والبديلُ الشائعُ (مربّعٌ رماديٌّ فيه صورةٌ
 * مكسورةٌ) بيقرا **عطلًا**. فالاسمُ بيتكتبُ بوزنٍ تقيلٍ وتباعدٍ مضبوطٍ —
 * شريطٌ نصّيٌّ مقصودٌ، وده شكلٌ احترافيٌّ قايمٌ بذاتِه.
 *
 * وأوّلَ ما يترفعَ شعارٌ، الصورةُ بتاخدُ مكانَ الاسمِ في نفسِ الصندوقِ
 * بنفسِ الارتفاعِ — **بلا نطّةٍ وبلا سطرِ كودٍ**.
 */
.hb-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--sp-2);
}
.hb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  background: var(--c-sur);
  color: var(--c-txt2);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hb-item:hover, .hb-item:focus-visible {
  border-color: var(--c-pri);
  color: var(--c-txt);
  text-decoration: none;
}
.hb-item img {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* الشعارُ الملوَّنُ وسطَ شريطٍ رماديٍّ بيشتّتُ — بيتشبّعُ عندَ اللمسِ. */
  filter: grayscale(1);
  opacity: .74;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hb-item:hover img, .hb-item:focus-visible img { filter: none; opacity: 1; }

/* والاسمُ لمّا مافيش شعارٌ — وزنٌ تقيلٌ وتباعدٌ، فيقرا علامةً لا نصًّا. */
.hb-item--text span {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
  text-align: center;
}
html[dir="rtl"] .hb-item--text span { letter-spacing: 0; }

/**
 * **الأدلّةُ — بطاقاتٌ بفتحةِ صورةٍ، والقسمُ مابيرسمْش بلا مقالاتٍ.**
 *
 * صفرُ مقالاتٍ النهاردةَ، فالقسمُ **مش بيترسمُ خالص** (شرطُ PHP). وأوّلَ ما
 * يتنشرَ مقالٌ يظهرُ لوحدَه.
 *
 * والصورةُ من `post_thumbnail` — فتحةٌ قياسيّةٌ في ووردبريس، بتتحطُّ من
 * محرّرِ المقالِ. والبطاقةُ بتشتغلُ من غيرِها كمان: العنوانُ والمقتطفُ
 * كفايةٌ، فمافيش فراغٌ لو المقالُ مالوش صورةٌ.
 */
.hg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.hg-card a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 0 0 var(--sp-4);
  border-radius: var(--rad-lg);
  border: 1px solid var(--c-bor);
  background: var(--c-sur);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hg-card a:hover, .hg-card a:focus-visible {
  border-color: var(--c-pri);
  transform: translateY(-2px);
  text-decoration: none;
}
.hg-art { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-pri10); }
.hg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-card h3 {
  margin: 0;
  padding-inline: var(--sp-4);
  font-size: var(--fs-h3);
  line-height: 1.4;
}
.hg-card p {
  margin: 0;
  padding-inline: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-txt2);
}
/* المقالُ بلا صورةٍ محتاجٌ هامشَه العلويَّ — الصورةُ كانت بتوفّرْه. */
.hg-card a:not(:has(.hg-art)) { padding-top: var(--sp-4); }

/**
 * **بطاقةُ المقاسِ — الأيقونةُ والرقمُ.**
 *
 * الأيقونةُ كانت إيموجي بحجمِ ٢٢px؛ بقت من الطقمِ فبتاخدُ لونَ البطاقةِ.
 * والرقمُ («٣٩ طراز») هو اللي بيخلّي القائمةَ **مرتّبةً بمعنًى** لا أبجديًّا.
 */
.sz-ico { font-size: 24px; color: var(--c-pri); line-height: 1; }
/* الرسمةُ بتاخدُ مكانَ الأيقونةِ في بطاقةِ الدليلِ — نفسُ حجمِ `.dss-img` تقريبًا. */
.sz-ico .sz-img { display: block; width: 64px; height: 64px; object-fit: contain; }
.sz-fit {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-txt2);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--c-pri10);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   مقاساتُ الماركةِ — بديلُ الطريقِ المسدودِ (٢٠٢٦-٠٨-٢٩)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **بيقعدُ تحتَ الاعتذارِ لا مكانَه.**
 *
 * الرسالةُ بتقولُ «لم تُسجَّل مقاسات هذا الطراز» — ودي حقيقةٌ لازم تتقالَ.
 * والكتلةُ دي بتيجي **بعدَها**: «لكن ٢٦ مقاسًا مسجّلًا لطُرُز الماركةِ دي».
 *
 * الترتيبُ مقصودٌ: **الحقيقةُ الأوّلَ ثمَّ الإجابةُ**. العكسُ بيقرا تهرّبًا.
 */
.fyc-mkfit {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-xl);
  background: var(--c-sur);
}
.fyc-mkfit h3 { margin: 0 0 6px; font-size: var(--fs-h3); }
.fyc-mkfit > p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-txt2);
  max-width: 60ch;
}

/**
 * **كلُّ مقاسٍ معاه قوّتُه — «على ٤ من طُرُزها».**
 *
 * من غيرِ الرقمِ، القائمةُ بتبقى تخمينًا. ومعاه بتبقى **دليلًا**:
 * الزائرُ بيشوفُ أنهي مقاسٍ أشهرُ في ماركتِه ويبدأُ منه.
 */
.fyc-mkfit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2);
}
.fyc-mkfit-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.fyc-mkfit-list a:hover, .fyc-mkfit-list a:focus-visible {
  border-color: var(--c-pri);
  text-decoration: none;
}
.fyc-mkfit-list b {
  font-size: var(--fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fyc-mkfit-list span { font-size: var(--fs-xs); color: var(--c-txt3); }

/* ═══════════════════════════════════════════════════════════════════
   الكتالوجُ — عمودٌ جانبيٌّ للفلاترِ (٢٠٢٦-٠٨-٢٩)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **نفسُ شبكةِ دليلِ المتاجرِ — سطحانِ بنفسِ الشغلِ بنفسِ القراءةِ.**
 *
 * ٢٧٢px للفلاترِ والباقي للنتائجِ. والزائرُ اللي اتعلّمَ الدليلَ بيلاقي
 * الكتالوجَ **مألوفًا** — والتعلّمُ ده أوفرُ من أيِّ ذكاءٍ في التصميمِ.
 */
.pubcat-body {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .pubcat-body { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/**
 * **لاصقٌ وبلا تمريرٍ داخليٍّ.**
 *
 * أربعُ أدواتٍ بس (بحثٌ · تصنيفٌ · علامةٌ · ترتيبٌ) — داخلةٌ في الشاشةِ
 * بسهولةٍ، فمافيش سببٌ لشريطِ تمريرٍ تانٍ. نفسُ الغلطةِ اللي المالكُ
 * لقاها في دليلِ المتاجرِ.
 */
.pubcat-side {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
  box-shadow: 0 2px 10px rgb(15 23 42 / .05);
}
@media (max-width: 900px) { .pubcat-side { position: static; } }

/* والأدواتُ بقت عمودًا — كانت صفًّا في لافتةٍ عرضُها الشاشةُ. */
.pubcat-side .pubcat-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.pubcat-side .pubfilter {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  background: var(--c-bg, #fff);
  color: var(--c-txt);
  font-family: inherit;
}
.pubcat-side .pubfilter--go {
  width: 100%;
  min-height: 42px;
  font-weight: 800;
  border-radius: var(--rad);
  border: 0;
  background: var(--c-pri);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   شريطُ بدايةِ الكتالوجِ (٢٠٢٦-٠٨-٢٩)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **تلاتُ مداخلَ، وكلُّ واحدٍ بيحملُ رقمَه.**
 *
 * الرقمُ هو الفرقُ بينَ «تصفّح المتاجر» (دعوةٌ) و«تصفّح المتاجر · ٢٬٣٥١»
 * (**وعدٌ بحجمٍ**). والزائرُ بيقرّرْ يدوسْ أنهي واحدٍ من الرقمِ لا من النصِّ.
 */
.cstart-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.cstart-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cstart-tile:hover, .cstart-tile:focus-visible {
  border-color: var(--c-pri);
  transform: translateY(-2px);
  text-decoration: none;
}
.cstart-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--rad);
  font-size: 22px;
  background: var(--c-pri10);
  color: var(--c-pri);
}
.cstart-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cstart-txt b { font-size: var(--fs-md); font-weight: 700; }
.cstart-txt span { font-size: var(--fs-xs); color: var(--c-txt2); line-height: 1.5; }

/* والرقمُ بأرقامٍ جدوليّةٍ — الأعمدةُ بتصطفُّ لمّا الأرقامُ تختلفُ طولًا. */
.cstart-n {
  flex: none;
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--c-pri);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   سياقُ الزائرِ — الدعوةُ والسطرُ (٢٠٢٦-٠٨-٢٩)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **صندوقٌ واحدٌ بتلاتِ أوجهٍ — دعوةٌ · انتظارٌ · سياقٌ.**
 *
 * نفسُ العنصرِ بيتحوّلُ بدل ما يختفي ويظهرَ تانٍ مكانَه. فالزائرُ بيشوفُ
 * **تحوّلًا** لا نطّةً، والمساحةُ محجوزةٌ فالتخطيطُ مابيتزحزحش.
 */
.vctx {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding: 14px 18px;
  border-radius: var(--rad-lg);
  border: 1px solid rgb(255 255 255 / .18);
  background: rgb(255 255 255 / .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--fs-sm);
}
.vctx[hidden] { display: none; }

/**
 * **وعلى الورقِ بيقلبُ — نفسُ الصندوقِ في مكانينِ مختلفينِ.**
 *
 * في الهيرو أرضيّتُه حبرٌ، وفوقَ باقي الصفحاتِ أرضيّتُه ورقٌ. ولونٌ واحدٌ
 * ثابتٌ كانَ هيبقى غيرَ مقروءٍ في واحدٍ من الاتنينِ.
 */
/**
 * **الصندوقُ جوّا الشريطِ — بلا أرضيّةٍ ولا حدٍّ ولا هامشٍ.**
 *
 * لمّا كانَ شريطًا لوحدَه، كانَ محتاجًا أرضيّتَه وحدَّه. وجوّا شريطِ
 * السيّارةِ **بيرثُ كلَّ ده** — والمطلوبُ منه بس إنَّه يضيفَ حقيقةً
 * للصفِّ. أرضيّةٌ تانيةٌ هنا كانت هترسمُ صندوقًا جوّا صندوقٍ.
 */
.vctx--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: inherit;
  font-size: var(--fs-sm);
}
.vctx--inline[hidden] { display: none; }
.vctx--inline .vctx-ico { display: none; }

/**
 * **والدعوةُ جوّا الشريطِ بتبقى سطرًا لا لوحةً.**
 *
 * لوحةٌ بعنوانٍ وسطرينِ وزرّينِ جوّا شريطٍ ارتفاعُه ٤٨px بتكسرُه.
 * فجوّا الشريطِ: جملةٌ واحدةٌ وزرٌّ صغيرٌ. والرئيسيّةُ بتفضلْ باللوحةِ
 * الكاملةِ لأنَّ عندَها المساحةَ — **نفسُ المكوّنِ بوزنينِ حسبَ مكانِه**.
 */
.vctx--inline .vctx-say span { display: none; }
.vctx--inline .vctx-say strong { font-size: var(--fs-sm); font-weight: 600; }
.vctx--inline .vctx-acts .tyreon-btn { min-height: 32px; padding: 5px 14px; font-size: var(--fs-xs); }
.vctx--inline .vctx-fact { gap: 6px; }
.vctx--inline .vctx-v { font-size: var(--fs-sm); }

.vctx-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 19px;
  background: rgb(255 255 255 / .12);
}

.vctx-say { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vctx-say strong { font-size: var(--fs-md); font-weight: 700; }
.vctx-say span { opacity: .78; line-height: 1.6; }

.vctx-acts { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.vctx-acts .tyreon-btn { min-height: 42px; padding: 10px 22px; font-weight: 800; }

/**
 * **«ليس الآن» رابطٌ لا زرٌّ — الرفضُ مايتزيّنش.**
 *
 * زرَّانِ متساويانِ بيخلّوا الاختيارَ يقرا خمسينَ بخمسينَ. والعرضُ في
 * صالحِ الزائرِ، فالسماحُ هو الفعلُ الأساسيُّ — **والرفضُ باينٌ ومحترمٌ
 * لكنَّه مش مساوٍ**. ومافيش خداعٌ: النصُّ صريحٌ والباباتُ الاتنانِ شغّالانِ.
 */
.vctx-skip, .vctx-link {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: inherit;
  opacity: .72;
  background: none;
  border: 0;
  padding: 6px 4px;
  min-height: 34px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.vctx-skip:hover, .vctx-link:hover, .vctx-skip:focus-visible, .vctx-link:focus-visible {
  opacity: 1; border-bottom-color: currentColor; text-decoration: none;
}

/**
 * **وسطرُ السياقِ: مفتاحٌ · قيمةٌ · بابٌ.**
 *
 * «موقعك — مدينة نصر — تغيير». التركيبُ ده بيقرا **حقيقةً عن الزائرِ**
 * لا إعدادًا مطبَّقًا؛ والبابُ جنبَها مباشرةً فمافيش حصارٌ.
 */
.vctx--on { gap: var(--sp-3) var(--sp-6); }
.vctx-fact { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vctx-k { opacity: .62; font-size: var(--fs-xs); white-space: nowrap; }
.vctx-v { font-weight: 800; font-size: var(--fs-md); }

.vctx--quiet { padding: 10px 18px; }
.vctx-note { display: inline-flex; align-items: center; gap: 7px; opacity: .8; flex-wrap: wrap; }
.vctx--busy { opacity: .78; }

@media (max-width: 620px) {
  .vctx { padding: 13px 15px; }
  .vctx-acts { width: 100%; }
  .vctx-acts .tyreon-btn { flex: 1; }
  .vctx-ico { display: none; }
}

/**
 * **نقطةُ حالةِ المتجرِ — مرسومةٌ لا مكتوبةٌ.**
 *
 * كانت 🟢 و⚪. والإيموجي بيرسمْها **نظامُ التشغيلِ بلونِه هو**، فبتطلعُ
 * بشكلٍ على أبل وشكلٍ على أندرويد، وسطَ شريحةٍ لونُها محسوبٌ.
 *
 * والنقطةُ دي بتاخدُ `currentColor` — فبتبقى بلونِ الشريحةِ نفسِها،
 * مفتوحةً كانت أو مغلقةً، بلا سطرٍ زيادةٍ.
 */

/* ═══════════════════════════════════════════════════════════════════
   شريحةُ الموقعِ و«أقرب إليك» (٢٠٢٦-٠٨-٢٨)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **شريحةٌ لا زرٌّ مملوءٌ — دي عرضٌ مش أمرٌ.**
 *
 * الفعلُ الأساسيُّ في الهيرو هو **اختيارُ السيّارةِ**. وزرٌّ مملوءٌ تاني
 * كانَ هيتنافسْ معاه. فالشريحةُ بحدٍّ وأرضيّةٍ شبهِ شفّافةٍ: باينةٌ
 * وبتتدوسُ، وبرضُه مش بتنافسُ.
 */

/**
 * **والشريحةُ بتقولُ حالتَها — بلونٍ مش بنصٍّ وحدَه.**
 *
 * «اتحدّدَ» أخضرُ، و«اترفضَ» بلا لونٍ. والزائرُ اللي رفضَ لازم يفضلْ
 * شايفَ الشريحةَ — لأنَّه ممكنٌ يغيّرَ رأيَه، ولأنَّ اختفاءَها بيخلّيه
 * مش عارفٍ ليه النتائجُ مش مرتّبةً بالمسافةِ.
 */

/**
 * **المسافةُ بتاخدُ مكانَ السنةِ — واحدةٌ منهم بس.**
 *
 * لمّا نعرفَ مكانَك، **المسافةُ أهمُّ من سنةِ التأسيسِ**: إنتَ بتدوّرُ
 * على متجرٍ تروحْله دلوقتي. والاتنانِ مع بعضٍ بيزحموا القدمَ.
 */

/**
 * **«في منطقتك» — البديلُ الصادقُ للمسافةِ.**
 *
 * لمّا الإحداثيُّ مايسمحش برقمٍ صادقٍ، الجملةُ بتقولُ الحقيقةَ الأضعفَ
 * بدل رقمٍ أقوى وكاذبٍ. ومكتوبةٌ بوزنِ نصٍّ لا بوزنِ رقمٍ — عشان تقرا
 * **معلومةً** لا **قياسًا**.
 */

/* والقسمُ بيبهتُ وهو بيتحدّثُ — تغييرٌ صامتٌ بيقرا عطلًا. */

/* ═══════════════════════════════════════════════════════════════════
   قسمُ النتيجةِ — بطاقةُ مركزِ الخدمةِ (٢٠٢٦-٠٨-٢٨)
   الاتّجاهُ: docs/product/PUBLIC-DESIGN-DIRECTION-V2.md
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **الخريطةُ والقائمةُ جنبَ بعضٍ — والقائمةُ الأعرضُ.**
 *
 * الخريطةُ بتجاوبُ «فينِ» والقائمةُ بتجاوبُ «مين». و«مين» أهمُّ — الزائرُ
 * محتاجٌ الاسمَ والتليفونَ والمسافةَ، والخريطةُ بتدّي **الإحساسَ بالتغطيةِ**.
 * فالقائمةُ ١٫٤ والخريطةُ ١.
 *
 * وعلى الشاشةِ الضيّقةِ الخريطةُ **فوقَ**: هي اللي بتقولُ «فيه حاجاتٌ
 * حواليك» وبتخلّي القائمةَ تحتَها ليها معنًى.
 */
.hr-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 1040px) {
  .hr-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-6); }
  /* والخريطةُ بتلزقُ وإنتَ بتمرِّرُ القائمةَ — بتفضلْ مرجعَك. */
  .hr-map { position: sticky; top: var(--sp-5); }
}

/**
 * **ارتفاعٌ محجوزٌ — الخريطةُ مابتزقّش الصفحةَ لمّا تحمّلَ.**
 *
 * صندوقٌ بلا ارتفاعٍ بيكبرُ فجأةً لمّا Leaflet يشتغلْ، فالقائمةُ اللي
 * الزائرُ بيقراها بتنطُّ. والارتفاعُ محجوزٌ من الأوّلِ.
 * [[the-page-does-not-jump]]
 */
.hr-map {
  min-height: 340px;
  height: clamp(340px, 46vh, 520px);
  border-radius: var(--rad-xl);
  border: 1px solid var(--c-bor);
  overflow: hidden;
  background: var(--c-sur2, var(--c-sur));
  z-index: 0;
}
.hr-map[hidden] { display: none; }
/* Leaflet بيحطُّ z-index عالٍ على طبقاتِه — والمودالُ لازم يفضلْ فوقَها. */
.hr-map .leaflet-pane, .hr-map .leaflet-control { z-index: 1; }

/* والبطاقةُ بتوضّحُ لمّا نقطتُها تتلمسَ — الاتنانِ نفسُ الشيءِ. */
.hr-card.is-hot { border-color: var(--c-pri); box-shadow: 0 12px 28px -14px var(--c-ink-deep); }
.hr-card.is-hot::before { width: 5px; opacity: 1; }

/**
 * **الشبكةُ بحدٍّ أدنى ٢٩٠px — تلاتةٌ ثمَّ اتنانِ ثمَّ واحدٌ بلا نقطةِ كسرٍ.**
 *
 * `auto-fill` بتتعاملُ مع كلِّ عرضٍ بينَ ٣٦٠ و١٩٢٠ من غيرِ ما أكتبَ ولا
 * `@media` واحدةً — والتابلت (٨٢٠) بياخدُ عمودينِ لوحدَه، مش ديسكتوب
 * مصغَّرًا ولا موبايل مكبَّرًا.
 */

/**
 * **حافّةُ حالةٍ لا حدٌّ عامٌّ — ودي علامةُ «الأداةِ».**
 *
 * البطاقةُ العامّةُ: حدٌّ رماديٌّ من أربعِ جهاتٍ + ظلٌّ خفيفٌ. وده اللي
 * بيخلّي أيَّ موقعٍ يقرا «قالبًا» — لأنَّه الشكلُ الافتراضيُّ لأيِّ إطارٍ
 * في أيِّ مكتبةٍ.
 *
 * والبديلُ: **شريطٌ رفيعٌ على الحافّةِ الأولى** بلونِ الإشارةِ، بيوسعُ
 * عندَ اللمسِ. ده اللسانُ البصريُّ بتاعُ لوحاتِ القيادةِ وأنظمةِ الملاحةِ:
 * الشريطُ **بيقولُ حالةً** لا بيرسمُ صندوقًا.
 *
 * ولا ظلَّ في الراحةِ — الظلُّ بيتولدُ **باللمسِ** وبلونِ الحبرِ لا
 * بالأسودِ، فالعمقُ بيبقى فعلًا لا زخرفةً.
 */
.hr-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: var(--sp-5);
  padding-inline-start: calc(var(--sp-5) + 4px);
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-xl);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.hr-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--c-pri);
  opacity: .45;
  transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hr-card:hover, .hr-card:focus-within {
  border-color: var(--c-pri);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px var(--c-ink-deep);
}
.hr-card:hover::before, .hr-card:focus-within::before { width: 5px; opacity: 1; }
.hr-name { margin: 0; font-size: var(--fs-h3); line-height: 1.35; font-weight: 700; }
.hr-name a { color: inherit; text-decoration: none; }

/**
 * **الاسمُ كلُّه بيدوسُ، مش الكلمةَ بس.**
 *
 * الرابطُ بيتمدُّ على البطاقةِ كلِّها، فالهدفُ بقى ~٢٨٠×١٦٠ بدل سطرٍ.
 * وده فرقٌ حقيقيٌّ على التليفونِ. والأزرارُ في الأسفلِ بتقعدْ فوقَه
 * بـ`z-index` فبتفضلْ شغّالةً. [[anchor-needs-a-box]]
 */
.hr-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/**
 * **شارةُ النشاطِ — علامةٌ لا زرٌّ.**
 *
 * صغيرةٌ، بأرضيّةٍ شفّافةٍ من لونِ الإشارةِ. لو كانت مملوءةً كانت هتنافسُ
 * الاسمَ على العينِ — والاسمُ هو البطلُ.
 */

/**
 * **قدمُ البطاقةِ — والرقمُ هو البطلُ.**
 *
 * «٤٠ سنة في السوق» أقوى إشارةِ ثقةٍ عندَنا، فالرقمُ بحجمِ عنوانٍ
 * فرعيٍّ وبأرقامٍ جدوليّةٍ — والكلمةُ جنبَه صغيرةٌ. المقروءُ الأوّلُ هو
 * **٤٠**، والباقي شرحٌ.
 */

/**
 * **«اتصال» و«الاتجاهات» روابطُ لا أزرارٌ.**
 *
 * قاعدةُ الاتّجاهِ: **فعلٌ أساسيٌّ واحدٌ لكلِّ شاشةٍ**. والفعلُ الأساسيُّ
 * للبطاقةِ هو **فتحُها**. فزرّانِ مملوءانِ في كلِّ بطاقةٍ = اتنعشرَ زرًّا
 * في القسمِ الواحدِ، والعينُ مابتعرفش تبدأْ منينِ.
 */

/**
 * **وعلى الشاشةِ الضيّقةِ الهدفُ بيكبرُ.**
 *
 * ٤٤px هي الحدُّ الأدنى للمسِ الإصبعِ. والرابطُ النصّيُّ ارتفاعُه ~٢٤ —
 * فبيتوسّعُ على التليفونِ وحدَه، والديسكتوب بيفضلْ نضيفًا.
 */
@media (max-width: 600px) {
  .hr-card { padding: var(--sp-4); padding-inline-start: calc(var(--sp-4) + 4px); }
}

/* ═══════════════════════════════════════════════════════════════════
   الرئيسيّةُ — قسمانِ جديدانِ (٢٠٢٦-٠٨-٢٧)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **ترويسةُ القسمِ — عنوانٌ وسطرٌ ورابطٌ في صفٍّ واحدٍ.**
 *
 * الترويسةُ المتوسّطةُ بتخلّي كلَّ قسمٍ يقرا «إعلانًا». والمحاذاةُ من
 * البدايةِ مع الرابطِ في الآخرِ بتقرا **قسمًا في منتجٍ**: العنوانُ بيقولُ
 * إيه، والرابطُ بيقولُ فيه كمان.
 */
.sec-hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sec-hd h2 { margin: 0; }
.sec-hd p { margin: 0; flex: 1 1 300px; color: var(--c-txt2); font-size: var(--fs-sm); max-width: 60ch; }
.sec-more { flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--c-pri); }
.sec-more::after { content: " ←"; }
html[dir="ltr"] .sec-more::after { content: " →"; }

/**
 * **بلاطةُ المقاسِ — متصمّمةٌ على الرقمِ لا مستنّيةٌ صورةً.**
 *
 * مافيش ولا صورةٍ لـ١٧٧ مقاسًا، فبلاطةٌ بمكانِ صورةٍ فاضٍ بتقرا عطلًا.
 * والحلُّ إنَّ **الرقمَ نفسَه هو الصورةُ**: مفكوكٌ بألوانِ الشارحِ، كبيرٌ،
 * وتحتَه سببُ وجودِه («يركبُ على ٣٩ موديلًا»).
 *
 * والشبكةُ `auto-fill` بحدٍّ أدنى ١٦٠px — بتنزلْ لعمودينِ على التليفونِ
 * لوحدَها بلا نقطةِ كسرٍ.
 */
.hs-sizes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.hs-size {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hs-size:hover, .hs-size:focus-visible {
  border-color: var(--c-pri);
  transform: translateY(-2px);
  text-decoration: none;
}
.hs-size-n { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.hs-size-n i { color: var(--c-txt3); font-style: normal; font-weight: 400; margin-inline: 1px; }
.hs-w { color: var(--c-pri); }
.hs-p { color: #0891b2; }
.hs-r { color: #b45309; }
.hs-size-f { font-size: var(--fs-xs); color: var(--c-txt2); }

/**
 * **قسمُ التغطيةِ على أرضيّةِ حبرٍ — الحجّةُ بتتفصلُ عن الاستكشافِ.**
 *
 * نفسُ شبكةِ الرسمِ بتاعةِ الهيرو، فالصفحةُ بتبتدي وبتنتهي بنفسِ اللسانِ
 * والوسطُ ورقٌ. الإيقاعُ ده هو اللي بيبني التراتبَ بدل ما كلُّ قسمٍ يبقى
 * بطاقاتٍ على أبيضَ.
 */
.hs-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-ink-deep);
  color: #fff;
}
.hs-cover-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 900px) {
  .hs-cover-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-8); }
}
.hs-cover-say h2 { color: #fff; margin: 0 0 var(--sp-3); }
.hs-cover-say p { margin: 0 0 var(--sp-5); color: rgb(255 255 255 / .74); font-size: var(--fs-md); line-height: 1.8; max-width: 46ch; }

/**
 * **الأدلّةُ صفوفٌ بعنوانٍ جانبيٍّ — لا بطاقاتٍ ولا خطواتٍ مرقّمةٍ.**
 *
 * دي **مش خطواتٍ** فمالهاش أرقامٌ؛ ومش خياراتٍ فمالهاش بطاقاتٍ. دي
 * تلاتُ حقائقَ بتسندُ ادّعاءً واحدًا — فالشكلُ صفٌّ: **الكلمةُ المفتاحُ**
 * على الحافّةِ، والشرحُ جنبَها.
 *
 * والخطُّ الشعريُّ بينَ الصفوفِ بيربطْهم كقايمةِ حججٍ، ومسافةٌ لا صناديقُ.
 */
.hs-why {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  max-width: 52ch;
}
.hs-why li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-3);
  padding: 11px 0;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.hs-why li:last-child { border-bottom: 1px solid rgb(255 255 255 / .12); }
.hs-why b { color: #fff; font-weight: 700; }
.hs-why span { color: rgb(255 255 255 / .72); }

/* وعلى التليفونِ العمودُ بيقعُ تحتَ — ٨٨px بتاكلْ نصَّ الشرحِ. */
@media (max-width: 560px) {
  .hs-why li { grid-template-columns: 1fr; gap: 2px; }
}

/**
 * **قايمةٌ لا بطاقاتٌ — والقصدُ إنّك تلاقي محافظتَك في تانيةٍ.**
 *
 * اتنعشرَ بطاقةً كانت هتاكلْ شاشةً ونصًّا وتقرا «كتالوجَ محافظاتٍ».
 * والصفُّ بالخطِّ الشعريِّ بيخلّي العينَ تمسحَ الاثنتي عشرةَ في نظرةٍ.
 *
 * وعمودانِ على الشاشةِ الواسعةِ — قايمةٌ واحدةٌ طويلةٌ بتجبرْك تنزلْ.
 */
.hs-govs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 var(--sp-6);
}
.hs-govs a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 9px 0;
  border-bottom: 1px solid rgb(255 255 255 / .12);
  color: rgb(255 255 255 / .86);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hs-govs a:hover, .hs-govs a:focus-visible {
  color: #fff;
  border-bottom-color: var(--c-pri);
  text-decoration: none;
}
.hs-gov-n { font-size: var(--fs-md); font-weight: 600; }
/* الرقمُ هو البطلُ — أتقلُ وزنًا وبلونِ الإشارةِ. */
.hs-gov-c { font-size: var(--fs-sm); font-weight: 800; color: #7aa2ff; font-variant-numeric: tabular-nums; }

/**
 * **الخطواتُ: قايمةٌ مرقّمةٌ بخطٍّ رابطٍ — لا تلاتُ بطاقاتٍ.**
 *
 * البطاقاتُ بتقرا «تلاتَ خياراتٍ»، والزائرُ مالوش خيارٌ — دي **رحلةٌ**.
 * فالخطُّ الشعريُّ بينهم بيقولُ «واحدةٌ بعدَ التانيةِ»، والرقمُ الكبيرُ
 * بيقولُ الترتيبَ. وعلى التليفونِ بينهاروا لعمودٍ والخطُّ بيبقى رأسيًّا.
 */
/* الخطُّ الرابطُ: فوقَ الخطوةِ على الشاشةِ الواسعةِ، وجنبَها على التليفونِ. */
/* سببُ الثقةِ: أهدى من الوصفِ وبعلامةٍ — بيقرا «ملحوظةً» لا «سطرًا تانيًا». */
/* والفاصلُ بينَ العناصرِ منقوطٌ لا خطٌّ: أخفُّ على لافتةٍ ملوّنة. */
/* على التليفونِ بيبقى عمودًا مضغوطًا بدل صفٍّ مكسور. */

.home-answer-sec { padding-block: 22px 6px; }
.home-answer {
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-xl);
  background: var(--c-sur);
  box-shadow: var(--sh);
  padding: clamp(16px, 2.6vw, 24px);
}
.ha-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ha-hd h2 { margin: 0; font-size: clamp(17px, 2.2vw, 21px); }

/* الدعوةُ — الحالةُ الأغلبُ، فليها أكبرُ عنايةٍ لا أقلَّها. */
.ha-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ha-invite-txt { min-width: 260px; flex: 1; }
.ha-invite h2 { margin: 0 0 6px; font-size: clamp(19px, 2.6vw, 24px); }
.ha-invite p  { margin: 0; color: var(--c-txt2); max-width: 56ch; line-height: 1.7; }
.ha-invite .tyreon-btn { min-height: 48px; padding-inline: 26px; font-size: 15px; }

/* المقاساتُ — عمودٌ لا شبكةٌ: القراءةُ من فوقٍ لتحتٍ بتحافظُ على ترتيبِ
   الثقةِ (الأصليُّ الأوّلَ)، والشبكةُ بتخلّيهم يبانوا سواسية. */
.ha-sizes { display: flex; flex-direction: column; gap: 8px; }
.ha-size { display: block; text-decoration: none; }
.ha-size /**
 * **مقاساتُ العربيّةِ في بحثِ المقاس — والشرحُ المطويّ.**
 */
.tsx-veh { border-color: var(--c-pri); }
.tsx-veh-sizes { display: flex; flex-direction: column; gap: 8px; }
.tsx-veh-size { display: block; text-decoration: none; }
.tsx-veh-size .fit { width: 100%; }

.tsx-help { margin: 10px 0 4px; }
.tsx-help summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-pri);
}
.tsx-help-body {
  padding: 12px 14px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  background: var(--c-sur2);
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-txt2);
}
.tsx-help-body ul { margin: 8px 0 0; padding-inline-start: 18px; }
.tsx-help-eg {
  margin: 10px 0;
  padding: 10px;
  border-radius: var(--rad);
  background: var(--c-sur);
  text-align: center;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--c-txt);
}
.tsx-help-alt { margin: 10px 0 0; font-size: 12.5px; opacity: .85; }

/* شارةُ الكارتِ — بتقعدُ فوقَ الصورةِ لا تحتَ الاسمِ: القرارُ بيتاخدُ
   والعينُ لسه على الصورةِ، فالحالةُ لازم تكونُ في نفسِ النظرة. */
.prod-fit { margin-bottom: 2px; }
.prod-fit .fit { width: 100%; }

.fit { width: 100%; transition: transform .12s; }
.ha-size:hover .fit { transform: translateX(-2px); }
html[dir="ltr"] .ha-size:hover .fit { transform: translateX(2px); }
.ha-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ha-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.fit {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: var(--rad);
  font-size: 13.5px;
  line-height: 1.45;
}
.fit-ico { flex: none; font-size: 15px; line-height: 1.3; }
.fit-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fit-txt strong { font-weight: 800; }
.fit-hint { font-size: 12px; opacity: .82; }
/* المقاسُ لاتينيٌّ دايمًا — والاتّجاهُ عليه لوحدِه عشان مايتقلبش. */
.fit-size {
  margin-inline-start: auto;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / .55);
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
}
/* المختصرةُ لكارتٍ — سطرٌ واحدٌ بلا شرح. */
.fit--compact { padding: 5px 9px; font-size: 12.5px; gap: 6px; }
.fit--compact .fit-ico { font-size: 13px; }

.fit--oem     { background: var(--c-grn-l); border-color: var(--c-grn); color: var(--c-grn-d); }
.fit--alt     { background: var(--c-pri-l); border-color: var(--c-pri); color: var(--c-pri-d); }
.fit--unknown { background: var(--c-amb-l); border-color: var(--c-amb); color: var(--c-amb-d); }
.fit--ask     { background: var(--c-sur2);  border-color: var(--c-bor); color: var(--c-txt2); }
/* في الداكنِ الحبّةُ البيضا جوّا الشارةِ بتبقى غامقةً بدل ما تصرخ. */
html[data-tyreon-theme="dark"] .fit-size { background: rgb(0 0 0 / .28); }

.fyc-filter {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1.5px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
  color: var(--c-txt);
  font-family: var(--fnt);
  font-size: 14.5px;
}
.fyc-filter:focus-visible {
  outline: 2px solid var(--c-pri);
  outline-offset: 1px;
  border-color: var(--c-pri);
}

.pubfilter {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: var(--rad);
  background: rgb(255 255 255 / .96);
  color: var(--c-txt);
  font-family: inherit;
  font-size: 14.5px;
}
.pubfilter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pubfilter--search { flex: 1; min-width: 200px; }
.pubfilter--go {
  min-height: 44px;
  padding: 11px 22px;
  border: none;
  border-radius: var(--rad);
  background: #fff;
  color: var(--c-pri);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
}
.pubfilter--go:hover { background: rgb(255 255 255 / .9); }

/**
 * **`.pubcat-hero` اتشالت — بقت لافتةً سادسةً بالفعل.**
 *
 * التعليقُ اللي كان هنا بيقولُ «بتقرا نفسَ وصفةِ باقي اللافتاتِ لا
 * وصفةً سادسة» — وده كان صحيحًا في الشكلِ وغلطًا في التركيبِ: نفسُ
 * التدرّجِ **مكتوبًا تاني** بدل ما يكونَ نفسَ العنصر. فأيُّ تحسينٍ في
 * `.dir-hero` كان بيعدّي من عليها. دلوقتي الكتالوجُ بيستعملُ اللافتةَ
 * الواحدةَ وأدواتُه في فتحتِها.
 */
.dir-hero-after { margin-top: 18px; }

/**
 * **فتّاتُ الخبزِ — كسوةٌ واحدةٌ بدل خمسِ سماتٍ مكتوبةٍ في PHP.**
 *
 * دي أوّلُ حاجةٍ بتجاوبُ «أنا فينِ؟»، فبتقعدُ فوقَ اللافتةِ لا تحتَها،
 * وبتفضلُ هادئةً: لونُ نصٍّ ثانويٍّ ومقاسٌ من السلّمِ.
 */
/**
 * **شارحُ المقاسِ — رسمٌ حيٌّ جنبَ الإدخالِ.**
 *
 * ثلاثُ ملحوظاتٍ من المالكِ غيّرت التركيبَ: يقعدُ **جنبَ** البحثِ لا
 * تحتَه · وأرقامُه **بتتغيّرُ** مع الاختيارِ · والرسمُ **إطارٌ حقيقيٌّ**
 * لا مستطيلاتٌ.
 */
.tse {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3) var(--sp-5);
  align-items: start;
}
.tse-hd { grid-column: 1 / -1; }
.tse-t { margin: 0 0 4px; font-size: var(--fs-h4); }
.tse-s { margin: 0; color: var(--c-txt2); font-size: var(--fs-sm); max-width: 56ch; }

/**
 * **النسخةُ الجانبيّةُ — عمودٌ جوّا بطاقةِ الإدخالِ.**
 *
 * على الشاشةِ الواسعةِ الإدخالُ والشرحُ جنبَ بعضِهما، وعلى التليفونِ
 * الشرحُ بينزلْ تحتَ الإدخالِ: **الفعلُ الأوّلُ، والشرحُ لمّا تحتاجَه**.
 */
/**
 * **البحثُ هو الفعلُ الأساسيُّ — فلازم يكونَ أكبرَ من شرحِه.**
 *
 * أوّلُ تركيبٍ خلّى الشرحَ يقعدُ في عمودٍ بنفسِ وزنِ الإدخالِ، والنتيجةُ
 * إنَّ **الشرحَ بقى أضخمَ عنصرٍ في الصفحةِ والبحثُ أصغرَه** — وده يقلبُ
 * التراتبَ رأسًا على عقبٍ.
 *
 * فالعمودُ بقى ١٫٦ مقابلَ ١، والشرحُ بقى **سطحًا هادئًا** (خلفيّةُ صبغةٍ
 * بلا حدٍّ) بدل بطاقةٍ بارزةٍ. والاختصارُ (المقاساتُ الشائعةُ) نزلَ في
 * عمودِ الإدخالِ فالعمودانِ اتوازنوا بالمحتوى لا بالفراغِ.
 */
.tsx-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 900px) {
  .tsx-entry { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/**
 * **الاختصارُ تحتَ القوائمِ مباشرةً.**
 *
 * فاصلٌ شعريٌّ فوقَه بيقولُ «ده طريقٌ تانٍ لنفسِ الحاجةِ» — لا قسمٌ
 * جديدٌ. والحبّاتُ بحجمِ لمسٍ كاملٍ لأنّها **الطريقُ الأسرعُ** فعلًا.
 */
.tsx-quicks { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-bor); }
.tsx-quicks-t { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-txt2); }
.tsx-quicks-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* الشرحُ سطحٌ هادئٌ لا بطاقةٌ: بيسندُ الفعلَ ومابيزاحمْهوش. */
.tse--side {
  padding: var(--sp-4);
  border-radius: var(--rad-lg);
  background: var(--c-sur2);
}
.tse--side .tse-sample { font-size: clamp(24px, 3.4vw, 32px); }
.tse--side .tse-fig { max-width: 190px; }
.tse--side .tse-t { font-size: var(--fs-h5); }

/**
 * **المثالُ بيتقرا زيَّ ما هو مكتوبٌ على الكاوتشِ.**
 *
 * لاتينيٌّ ومن الشمالِ لليمينِ حتى في صفحةٍ عربيّةٍ، وكلُّ رقمٍ بلونِ
 * قياسِه في الرسمِ وفي القايمةِ — فالعينُ بتربطُ التلاتةَ بلا سهمٍ.
 */
.tse-sample {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin: 0;
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.tse-sep { color: var(--c-txt3); font-weight: 400; margin-inline: 2px; }
.tse-n--w { color: var(--c-pri); }
.tse-n--p { color: #0891b2; }
.tse-n--r { color: #b45309; }

.tse-figwrap { display: grid; place-items: center; }
.tse-fig { width: 100%; max-width: 260px; height: auto; }

/**
 * **وصورةُ الإطارِ الحقيقيّةُ مكانَ الرسمِ** (المالكُ ٢٠٢٦-١٠-١١).
 *
 * نفسُ صندوقِ الرسمِ ونفسُ حدودِه — عشانْ التبديلُ مايزحلقش حاجةً تحتَه.
 */
.tse-figwrap--photo .tse-photo { width: 100%; max-width: 260px; height: auto; display: block; }
.tse--side .tse-figwrap--photo .tse-photo { max-width: 200px; }
@media (max-width: 640px) { .tse-figwrap--photo .tse-photo { max-width: 220px; } }

/**
 * **الرسمُ بيتحرّكُ مع النسبةِ.**
 *
 * `--tse-profile` (٢٠..٩٠) بتشدُّ جسمَ الإطارِ رأسيًّا حوالينَ سطحِ
 * التماسِ — فجانبُ ٣٠ بيقصرُ وجانبُ ٧٠ بيطولُ. **الرسمُ بيعلّمُ لمّا
 * يتحرّكُ**: الزائرُ بيشوفُ إنَّ «النسبةَ» ارتفاعٌ لا رقمٌ عشوائيٌّ.
 *
 * `transform-origin` عندَ سطحِ التماسِ عشانَ التمدّدُ ينزلْ لتحتَ لا
 * يتوسّطَ — الإطارُ بيكبرُ من ناحيةِ الجنطِ زيَّ الحقيقةِ.
 */
/* المحورُ عندَ سطحِ التماسِ — الإطارُ بيعلى من ناحيةِ الجنطِ زيَّ الحقيقةِ.
   والمدى ٢٠..٩٠ بيترجمُ لـ٠٫٦٨..١٫٢٢ — فرقٌ محسوسٌ بلا تشويهٍ. */
#tse-body {
  transform-box: view-box;
  transform-origin: 150px 58px;
  scale: 1 calc(.55 + (var(--tse-profile, 70) / 108));
  transition: scale var(--dur) var(--ease);
}

.tse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tse-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--rad-lg);
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
}
.tse--side .tse-item { background: var(--c-sur); }
.tse-item-n {
  flex: 0 0 auto;
  min-width: 3.4ch;
  font-weight: 800;
  font-size: var(--fs-h4);
  text-align: center;
}
.tse-item--w .tse-item-n { color: var(--c-pri); }
.tse-item--p .tse-item-n { color: #0891b2; }
.tse-item--r .tse-item-n { color: #b45309; }
.tse-item-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.tse-item-b strong { font-size: var(--fs-sm); }
.tse-item-note { font-size: var(--fs-xs); color: var(--c-txt2); }
.tse-item-u { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-txt3); }
.tyreon-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1.9;
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}
.tyreon-breadcrumb a { color: var(--c-pri); text-decoration: none; font-weight: 600; }
.tyreon-breadcrumb a:hover { text-decoration: underline; }
.tyreon-breadcrumb [aria-current="page"] { color: var(--c-txt3); }
.bc-sep { margin: 0 7px; color: var(--c-txt3); }

/* النصُّ التعريفيُّ لـ«عن تايرون» — متغيّرٌ من الإعداداتِ وممكنٌ يطولَ، فنزلَ
   من جوّا اللافتةِ لأرضِ الصفحةِ. و`ch` بتحدُّ السطرَ بالحروفِ لا بالبكسل:
   السطرُ الأطولُ من ٧٥ حرفًا العينُ بتتوهُ في رجوعِها لأوّلِه. */
.about-intro {
  padding-block: clamp(20px, 3vw, 30px);
  text-align: center;
}
.about-intro p {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--fs-lg);
  color: var(--c-txt2);
}
/**
 * بابُ العربيّةِ — بيقعدُ فوقَ الفلاترِ لا وسطَهم.
 *
 * هو مش فلترًا من نفسِ النوع: التلاتةُ التانيةُ بيضيّقوا القايمةَ،
 * وده بيقولُ **«اللي يناسبُ عربيّتي»** — سؤالٌ مختلفٌ ووعدُ المنصّةِ
 * الأساسيُّ، فمكانُه مش في الصفّ.
 */
/**
 * **شريطُ العربيّة.**
 *
 * شريطٌ رفيعٌ تحتَ القايمةِ مباشرةً — مش لافتةً ولا مودالًا. الفكرةُ إنّه
 * **سياقٌ دائمٌ** زيّ سلّةِ التسوّقِ في متجرٍ: موجودٌ وواضحٌ ومابياخدش
 * انتباهًا لمّا يكونَ متملّي.
 *
 * وبيتغيّرُ شكلُه حسبَ الحالة: **سؤالٌ** لمّا مافيش عربيّةٌ (فبياخدُ لونَ
 * العلامةِ عشان يتشاف) و**سياقٌ هادئٌ** لمّا فيه (فبيهدا لسطحٍ محايد).
 */
.veh-bar {
  border-bottom: 1px solid var(--c-bor);
  background: var(--c-pri);
  color: #fff;
  font-size: 13.5px;
}
.veh-bar--set { background: var(--c-sur2); color: var(--c-txt2); }
/* العربيّةُ بيتُها زرُّ الهيدرِ — فالشريطُ لمّا العربيّةُ معروفةٌ مالوش غيرُ الموقعِ، ومن غيرِه مابياخدش سطرًا فاضيًا. */
.veh-bar--set:has(> .veh-bar-in > .vctx[hidden]) { display: none; }
.veh-bar-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding-block: 6px;
}
/* The room the location box will take, kept from the first paint. The head script in
   functions.php mirrors visitor-context.js's boot() and sets `vctx-will-{ask|note|fact}`.
   Measured heights of the bar on /stores/ (2026-11-10):
     prompt: 113px from 800px wide · 153px below · 149px on phones;
     one line («your location» / quiet note): 74px from 800px · 74 / 114px below (the note wraps) · 110px on phones.
   Without this the page jumped 29–108px when the box arrived: CLS 0.10–0.52. */
.vctx-will-ask .veh-bar-in { min-height: 113px; }
.vctx-will-fact .veh-bar-in, .vctx-will-note .veh-bar-in { min-height: 74px; }
@media (max-width: 799px) {
  .vctx-will-ask .veh-bar-in { min-height: 153px; }
  .vctx-will-note .veh-bar-in { min-height: 114px; }
}
@media (max-width: 560px) {
  .vctx-will-ask .veh-bar-in { min-height: 149px; }
  .vctx-will-fact .veh-bar-in, .vctx-will-note .veh-bar-in { min-height: 110px; }
}
/* A bar that hides itself when the box is hidden must stay while the box is coming. */
.vctx-will .veh-bar--set:has(> .veh-bar-in > .vctx[hidden]) { display: block; }
.veh-bar-lbl { opacity: .9; }
.veh-bar--set .veh-bar-lbl { opacity: 1; }
/* الفعلُ في آخرِ الشريطِ — بيتدفعُ للطرفِ المقابلِ باللغتين. */
.veh-bar-act {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  border: 1px solid currentColor;
}
/**
 * **زرُّ الخروجِ أهدى من زرِّ التبديلِ — بس موجودٌ.**
 *
 * التنينِ مخارجُ، بس التبديلَ هو المتوقّعُ أكترَ (الزائرُ عندَه عربيّةٌ
 * وعايزٌ يظبطَها). و«شوفْ كلَّ حاجةٍ» بتبقى نصًّا تحتَه خطٌّ: **موجودةٌ
 * لمّا تدوّرَ عليها، ومش بتزاحمُ**.
 */
/* وعلى التليفونِ بينزلْ سطرًا لوحدَه بدل ما يزقَّ الاسمَ برّه الشاشةِ. */
@media (max-width: 560px) {
  .veh-bar-in { flex-wrap: wrap; row-gap: 4px; }
}
.veh-bar-act:hover { background: rgb(255 255 255 / .16); }
.veh-bar--set .veh-bar-act { color: var(--c-pri); border-color: var(--c-bor); }
.veh-bar--set .veh-bar-act:hover { background: var(--c-sur); }
/* الدعوةُ مملوءةٌ: هي الفعلُ الوحيدُ على الشريطِ وقتَها. */
.veh-bar-act--cta { background: #fff; color: var(--c-pri); border-color: #fff; }
.veh-bar-act--cta:hover { background: rgb(255 255 255 / .88); }

.pubcat-veh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .35);
  background: rgb(255 255 255 / .16);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(6px);
}
.pubcat-veh:hover { background: rgb(255 255 255 / .26); }
/* بلا عربيّةٍ محفوظةٍ الزرُّ دعوةٌ لا اختصارٌ — فوزنُه أخفّ. */
.pubcat-veh--empty { font-weight: 600; background: rgb(255 255 255 / .10); }

.pubcat-tools   { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-i {
  display: block;
  padding: 3px 0;
  font-size: 13px;
  color: var(--c-txt2);
  text-decoration: none;
  /* الاسمُ الطويلُ بيتقصُّ بدل ما يكسرَ العمود. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb-i:hover { color: var(--c-pri); text-decoration: underline; }

.dir-hero {
  position: relative;
  isolation: isolate;
  /**
   * **كانت بتكتبُ التدرّجَ بإيدِها — نفسَ قيمةِ `--grad-hero` حرفًا بحرفٍ.**
   *
   * يعني **لافتةُ خمستاشرَ سطحًا** كانت برّه الوصفةِ الواحدةِ: أيُّ تعديلٍ
   * في التوكِنِ كان بيوصلْ للرئيسيّةِ وصفحاتِ الدخولِ ويعدّي من عليها.
   * والفحصُ ماكانش بيمسكْها لأنّه بيعدُّ **كام قالبٍ بيكتبُ الوصفةَ** —
   * وهو مقياسُ تكرارٍ بينزلْ لمّا التوحيدُ ينجحُ، مش مقياسَ وصولٍ.
   * [[unification-over-duplication]] · [[reading-code-is-not-running-it]]
   */
  background: var(--grad-hero);
  padding: clamp(40px, 7vw, 64px) 16px;
  text-align: center;
  color: #fff;
}
/**
 * **عمودُ الكلامِ في اللافتةِ محدودٌ عن قصدٍ — والفراغُ حوالَه مش خطأً.**
 *
 * اللافتةُ **بتخرجُ للحافّةِ** (اللونُ بيغطّي الشاشةَ كلَّها)، واللي
 * محدودٌ هو **النصُّ** جوّاها. عنوانٌ بيمتدُّ على ١٩٢٠px بيتقرا صفًّا
 * لا بيانًا.
 *
 * بس ٧٦٠ كانت ضيّقةً على شاشةٍ كبيرةٍ — بقت ٨٦٠، والسطرُ بيفضلُ تحتَ
 * ٧٥ حرفًا لأنَّ `--fs-h1` بيكبرُ معاه.
 */
.dir-hero-in { max-width: 860px; margin-inline: auto; }
/* العلامةُ بقت مرافقةً للعنوانِ لا بديلًا عنه. */
.dir-hero-mark { font-size: 40px; margin-bottom: 10px; line-height: 1; opacity: .95; }
/* الشخصيّةُ بتاخدُ مكانَ الإيموجي بنفسِ الإيقاعِ الرأسيّ، فالصفحةُ
   ماتترجّعش لمّا الصورةُ تتركّب. */
.dir-hero-mascot { display: block; margin: 0 auto 8px; height: auto; }
.dir-hero-t {
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
  /* العناوينُ العربيّةُ الكبيرةُ بتتفكُّ من غيرِ ده. */
  line-height: 1.25;
  letter-spacing: -.01em;
}
/**
 * شريحةُ العددِ — زجاجٌ خفيفٌ فوقَ التدرّجِ لا صندوقٌ مصمت.
 *
 * و`min-height` مقصودةٌ: العنصرُ بيبقى موجودًا ومخفيًّا لحدِّ ما الرقمُ
 * يوصل، فالمساحةُ محجوزةٌ والصفحةُ ماتنطّش لمّا يظهر.
 */
.dir-hero-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .18);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(4px);
}
.dir-hero-count[hidden] { display: none; }

.dir-hero-s {
  font-size: clamp(14px, 1.6vw, 16.5px);
  /* `.75` مش `.9`: السطرُ ده شرحٌ، والعنوانُ هو اللي بيتقرا الأوّلَ. */
  opacity: .75;
  margin: 0 auto;
  max-width: 46ch;
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════════════════
   «عن تايرون» — من أنماطٍ بإيدٍ لنظامٍ (٢٠٢٦-٠٨-٢٩)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **الصفحةُ دي كانت أعلى صفحةٍ في الأنماطِ المكتوبةِ بإيدٍ: ١٧.**
 *
 * منهم **تسعةُ أحجامِ خطٍّ** مكتوبةٍ بالبكسلِ (36 · 32 · 22 · 20 · 15
 * · 13). يعني سلّمُ الخطِّ (`--fs-*`) اللي باقي الموقعِ ماشٍ عليه
 * **متجاوَزٌ بالكاملِ** هنا — فالصفحةُ بتقرا كأنّها من موقعٍ تانٍ.
 *
 * والمالك: *«لا أعتقدُ أنَّ ده أفضلُ تجربةٍ وترتيبٍ»*. والترتيبُ
 * مابيتظبطش بترتيبِ الأقسامِ لوحدِه — بيتظبطُ لمّا **كلُّ مسافةٍ وكلُّ
 * حجمٍ يطلعوا من نفسِ السلّمِ**، فالعينُ تلاقي إيقاعًا واحدًا.
 *
 * والفايدةُ التانيةُ إنَّ **الوضعَ الليليَّ بقى شغّالًا**: الأنماطُ
 * القديمةُ كانت بتثبّتُ `#475569` و`#94a3b8` و`#EEF3FF` كقيمٍ ثابتةٍ،
 * فالصفحةُ كانت بتفضلْ فاتحةً جوّا خلفيّةٍ غامقةٍ.
 */
.ab-wrap { margin-block: var(--sp-7); }

/* ── الأرقامُ ── */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.ab-stat {
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
}
.ab-stat-ico { color: var(--c-pri); line-height: 0; margin-bottom: var(--sp-2); }
.ab-stat-ico svg { width: 26px; height: 26px; }
/* الرقمُ لاتينيٌّ دايمًا — فبيتقفلْ على اتّجاهٍ واحدٍ عشان الفاصلةُ */
.ab-stat-n {
  font-size: var(--fs-h1);
  font-weight: 800;
  color: var(--c-pri);
  line-height: 1.1;
  direction: ltr;
  unicode-bidi: isolate;
}
.ab-stat-l { font-size: var(--fs-xs); color: var(--c-mut); margin-top: var(--sp-1); }

/* ── الرؤيةُ ── */
/* الحدُّ على `inline-start` لا `right`: بينقلبْ لوحدِه في الإنجليزيِّ */
.ab-vision {
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--c-bor);
  border-inline-start: 4px solid var(--c-pri);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
}

.ab-h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--c-txt);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ab-h2 svg { width: 20px; height: 20px; color: var(--c-pri); flex: none; }
/* عنوانا القسمِ («قيمنا» · «هل أنت تاجر؟») أعلى في السلّمِ من عنوانِ
   البطاقةِ — ودي الدرجةُ اللي بتخلّي العينَ تعرفْ إنَّ قسمًا جديدًا بدأ. */
.ab-h2--mid { justify-content: center; margin-bottom: var(--sp-4); font-size: var(--fs-h2); }
.ab-h2--flush { margin-bottom: var(--sp-3); }
.ab-lede { margin: 0; font-size: var(--fs-md); line-height: 1.85; color: var(--c-txt2); }

/* ── القيمُ ── */
.ab-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.ab-val {
  padding: var(--sp-4);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
}
.ab-val-ico { color: var(--c-pri); line-height: 0; margin-bottom: var(--sp-3); }
.ab-val-ico svg { width: 22px; height: 22px; }
.ab-val-t { margin: 0 0 var(--sp-1); font-size: var(--fs-md); font-weight: 700; color: var(--c-txt); }
.ab-val-d { margin: 0; font-size: var(--fs-xs); line-height: 1.65; color: var(--c-mut); }

/* ── دعوةُ التاجرِ ── */
.ab-cta {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  border-radius: var(--rad-xl);
  background: var(--c-pri-l, #EEF3FF);
}
.ab-cta-d { margin: 0 0 var(--sp-4); color: var(--c-txt2); }

/* ودي الصفحةُ الوحيدةُ اللي بتلوّنْ خلفيّةً كاملةً بلونِ الهُويّةِ، */
/* فلازم تتعرّفْ في الوضعِ الليليِّ صراحةً وإلا بقت بيضاءَ نافرةً. */
html[data-tyreon-theme="dark"] .ab-cta {
  /* سطحٌ داكنٌ لازمٌ يحدّدَ لونَ نصِّه — وإلّا بيرثُ لونَ سياقٍ فاتحٍ. */
  color: var(--px-on-1, #e9eef7);
  background: color-mix(in srgb, var(--c-pri) 16%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════
   بطاقةُ الدليلِ المرسومةُ من الخادمِ (٢٠٢٦-٠٨-٢٩)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * **بتقعدُ جوّا شبكةِ الدليلِ الموجودةِ زيَّ ما هي.**
 *
 * الشبكةُ نفسُها (`#brands-grid` وإخواتُها) لسه بتايلويند وبنفسِ
 * `minmax(200px,1fr)`. البطاقةُ دي بتملا الخانةَ وبس — عشان لمّا
 * الجافاسكربتُ يعيدْ الرسمَ **مايتحرّكش حاجةً**: نفسُ الشبكةِ، نفسُ
 * عددِ الأعمدةِ، نفسُ الارتفاعِ التقريبيِّ.
 */
.dss-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  height: 100%;
  padding: 20px 14px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  background: var(--c-sur);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dss-card:hover { border-color: var(--c-pri); transform: translateY(-2px); }
.dss-card:focus-visible { outline: 2px solid var(--c-pri); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dss-card { transition: none; }
  .dss-card:hover { transform: none; }
}

/**
 * **المربّعُ محجوزٌ سواءٌ فيه صورةٌ أو حرفٌ.**
 *
 * ٤٨ شعارًا حقيقيًّا من ٥١٩ ماركةً، وصفرُ صورٍ للمقاساتِ. فالمقاسُ ثابتٌ
 * ٧٢×٧٢ في الحالتينِ — يعني لمّا المالكُ يرفعُ صورةً **الصفحةُ
 * ماتتزحلقش**، والحرفُ الملوَّنُ بيقرا كاختيارٍ لا كصورةٍ مكسورةٍ.
 */
.dss-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--rad-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-bor);
}
.dss-img img { width: 100%; height: 100%; object-fit: contain; }
.dss-img--ph {
  border: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.dss-name {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-txt);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dss-meta { font-size: var(--fs-xs); color: var(--c-mut); }

/* المقاسُ اسمٌ لاتينيٌّ (`205/55R16`) — بيتقفلْ على اتّجاهِه جوّا صفحةٍ عربيّةٍ. */
#sizes-grid .dss-name { direction: ltr; unicode-bidi: isolate; }

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **شبكةُ الماركاتِ اللي المحلُّ بيخدمْها** — `.sp-cars-grid`
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * المالك، ٢٠٢٦-١٠-٠٤: *«السيارات المدعومة ليه تكون تحت بعد كده؟ مش هم ماركات
 * ولوجوهات تكون جنب بعض أفضل، في زي شبكة كده»*.
 *
 * وكانتْ قايمةً رأسيّةً: ماركةٌ في كلِّ سطرٍ ومعاها شراتُ موديلاتِها — فمحلٌّ
 * بعشرِ ماركاتٍ بيطوّلُ الكارتَ عشرَ كتلٍ، والسؤالُ («بيخدمْ ماركتي؟»)
 * بيحتاجُ قراءةً بدلَ نظرةٍ. والشعارُ هو اللي العينُ بتعرفُه قبلَ الاسمِ.
 *
 * والسقفُ على المسارِ مقصودٌ زيَّ `.sp-facts` — ماركةٌ واحدةٌ تفضلْ بلاطةً.
 */
.sp-cars-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 132px));
  justify-content: start; gap: 10px;
}
.sp-car-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 14px; text-align: center;
  background: var(--c-sur); border: 1px solid var(--c-bor);
}
.sp-car-tile__n {
  font-size: 13px; font-weight: 700; color: var(--c-txt); line-height: 1.25;
  /* اسمُ ماركةٍ طويلٌ مابيكسرش البلاطةَ. */
  overflow-wrap: anywhere;
}
.sp-car-tile__s { font-size: var(--fs-xs); color: var(--c-txt2); }

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **وشُّ المحلِّ اللي مالوش صورة** — `.store-ph--face`
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * بلاغُ المالكِ ٢٠٢٦-١٠-٠٤: المحلُّ بلا صورةٍ في الدليلِ كانَ بيبانُ **برسمةِ
 * إطارٍ**، والتطبيقُ بيرسمُ الوشَّ المصمَّمَ — حلقةٌ وشخصيّةٌ واسمُ المحلِّ.
 * فنفسُ المحلِّ كانَ ليه وشّانِ حسبَ السطحِ. [[unify-once-not-per-portal]]
 *
 * والمقاساتُ بالنسبةِ للغلافِ (`%`) عشانْ نفسِ الشكلِ يشتغلْ في بطاقةِ الدليلِ
 * وفي شريطِ الرئيسيّةِ، والاتنانِ بارتفاعاتٍ مختلفةٍ.
 */
/**
 * 🔴 **بلاغُ المالكِ ٢٠٢٦-١٠-٠٥**: *«الصورةُ بتاعةُ المتجرِ مش ظاهرةً صحَّ،
 * والمفروضُ الشخصيّةُ تكونَ هي اللي ع اليمينِ، والدائرةُ والكلامُ ع الشمالِ»*
 * — واللقطةُ بتوري الحلقةَ **مقصوصةً** عندَ حافّةِ الصندوقِ.
 *
 * **وحاجتانِ غلطٌ، ميكانيكيّتُهما واحدةٌ:**
 *
 * ① **الترتيبُ مقلوبٌ.** الحلقةُ أوّلًا في الـDOM، و`flex-direction: row` في
 *    صفحةٍ **RTL** بيحطُّ الأوّلَ على **اليمينِ**. فالشخصيّةُ راحتْ شمالًا.
 *    والعلاجُ `order` لا قلبُ الـDOM: الاسمُ جوّه الحلقةِ هو المحتوى، فيفضلُ
 *    أوّلًا للقارئِ الآليِّ، و`order` بيحرّكُ **العرضَ** وحدَه — وبيتمرّى
 *    صحًّا في الإنجليزيِّ (بدايةُ السطرِ = شمالٌ).
 *
 * ② **المقاساتُ كانتْ ثابتةً بالبكسلِ** (٩٦ + ٦ + عرضُ الأصلِ)، والصندوقُ
 *    عرضُه بيتغيّرُ معَ الشبكةِ (`minmax(280px,1fr)`) ومعَ الشريطِ الجانبيِّ.
 *    فأوّلُ ما الصندوقُ يضيقَ، المجموعُ يعدّيه و`overflow:hidden` **يقصُّ** —
 *    نفسُ ميكانيكيّةِ شارةِ «ضمان» بالظبطِ.
 *
 * 🔑 **فالمقاسُ بقى نسبةً من الصندوقِ لا رقمًا مطلقًا** — يعني الشكلُ **مش
 * قادرٌ** يفيضَ مهما ضاقتْ البطاقةُ، بدلَ ما نلاحقَ رقمًا صحَّ عندَ عرضٍ
 * واحدٍ. [[a-fix-has-two-directions]]
 */
.store-ph--face {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: 100%; min-height: 120px;
  padding: 10px; box-sizing: border-box; overflow: hidden;
}
/**
 * 🔴 **الصندوقُ كانَ مستطيلًا، فالاسمُ كانَ بيخرجُ من الدايرةِ.** (٢٠٢٦-١٠-١١)
 *
 * المالكُ بعتَ لقطتينِ: *«شكلُ الصورةِ مش حلوٍ»* — واسمُ المحلِّ ماشٍ فوقَ
 * الحلقةِ وخارجٌ من جنبِها.
 *
 * **والمقيسُ على كلِّ الـ٢٤ كارتًا في الصفحةِ**: صندوقُ الحلقةِ
 * **١٠٤×٥٦**، والدايرةُ المرسومةُ **٥٦** (الـSVG بيحافظُ على النسبةِ
 * فبيقعدْ على الضلعِ الأصغرِ)، والاسمُ **٨٣** عرضًا — يعني أوسعُ من
 * الدايرةِ بـ٢٧ بكسلًا، **في كلِّ بطاقةٍ بلا استثناءٍ**.
 *
 * 🔑 **والسببُ إنّ `width` و`height` بالنسبةِ المئويّةِ بيتحسبوا من**
 * **أساسينِ مختلفينِ** — ٣٤٪ من العرضِ غيرُ ٣٤٪ من الارتفاعِ. فالصندوقُ
 * عمرُه ما كانَ مربّعًا، والتعليقُ فوقُ («المقاسُ نسبةٌ فمش قادرٌ يفيضَ»)
 * كانَ بيوصفُ نيّةً مش نتيجةً. `aspect-ratio` بتقفلُ البابَ ده كلَّه.
 * [[a-fix-has-two-directions]]
 */
.store-ph__ring {
  position: relative; display: inline-flex; flex: 0 0 auto;
  width: clamp(56px, 34%, 104px); aspect-ratio: 1; height: auto;
  max-width: 46%;
}
.store-ph__ring svg { width: 100%; height: 100%; }
/* الشخصيّةُ أوّلَ السطرِ — يمينًا في العربيِّ، شمالًا في الإنجليزيِّ. */
.store-ph__art { order: -1; }
/**
 * الاسمُ جوّه الحلقةِ — هو اللي بيفرّقُ محلًّا عن محلٍّ، فمابيتشالش.
 *
 * 🔴 **وكانَ ١١px — تحتَ أرضيّةِ السلّمِ (٢٠٢٦-١٠-٠٥).** والأرضيّةُ مش تفضيلًا:
 * الحرفُ العربيُّ بيفرّقُه إعجامٌ، والفرقُ بينَ «ب» و«ت» **نقطةٌ**. عندَ ١١px
 * النقطةُ بتبقى بكسلًا على شاشةٍ عاديّةٍ — **فاسمُ المحلِّ يتخمّنُ لا يتقرا**،
 * وهو الحاجةُ الوحيدةُ اللي الوشُّ ده اتعملَ عشانَها.
 *
 * 🔑 **والعلاجُ مساحةٌ لا تصغيرٌ**: الحشوُ ضاقَ (`18%` → `10%`) فالاسمُ أخدَ
 * عرضًا أكبرَ عندَ نفسِ الحلقةِ، وبقى يلفُّ لتلاتةِ سطورٍ وينتهي بثلاثِ نقاطٍ
 * (والقصُّ باقٍ على `overflow` زيَّ ما كانَ — `-webkit-line-clamp` محتاجٌ
 * `display:-webkit-box` اللي بيلغي توسيطَ `flex`، فاسمٌ قصيرٌ كانَ هيلزقْ فوقُ.)
 * [[one-type-scale]]
 */
/**
 * 🔑 **والحشوُ هندسةٌ لا ذوقٌ**: المربّعُ اللي بيدخلُ جوّا دايرةٍ ضلعُه
 * **٧٠٫٧٪** من قطرِها، يعني `inset` **١٤٫٦٪** على الأقلِّ — ومعاها نصفُ
 * سُمكِ الحلقةِ (٣٫٥٪) وهامشٌ يتنفّسُ. `10%` كانتْ **تحتَ** الحدِّ ده،
 * فالأركانُ كانتْ بتقطعْ الحلقةَ حتى لو الصندوقُ مربّعٌ.
 *
 * ⚠️ **والقصُّ بقى سطرينِ**: الاسمُ الكاملُ مكتوبٌ **تحتَ الصورةِ** في
 * البطاقةِ، فتكرارُه كاملًا جوّا الحلقةِ بيملاها لحدِّ حوافِها ومايزوّدش
 * معلومةً. [[comfortable-lies-survive]]
 */
.store-ph__name {
  position: absolute; inset: 20%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  align-items: center; justify-content: center;
  text-align: center; font-size: var(--fs-xs); font-weight: 800; line-height: 1.25;
  color: var(--c-txt); overflow: hidden; overflow-wrap: anywhere;
  align-self: center; margin: auto 0;
}
/* الشخصيّةُ جنبَ الحلقةِ لا فوقَها — ومابتترسمش لو الأصلُ مش موجودٍ.
   والمقاسُ نسبةٌ زيَّ الحلقةِ، فالاتنانِ بيضيقوا معًا بدلَ ما واحدٌ يزقَّ التانِ برّه. */
.store-ph__art {
  flex: 0 1 auto; width: auto; height: auto;
  max-height: 74%; max-width: 40%; object-fit: contain;
}

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **صفُّ تصنيفاتِ الدليلِ** — `.dir-cats`
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * من تصميمِ المالكِ ٢٠٢٦-١٠-٠٥: شريطٌ أفقيٌّ تحتَ اللافتةِ، بلاطةٌ لكلِّ تصنيفٍ
 * بعلامتِه واسمِه وعددِه.
 *
 * **وبيتمرّرُ أفقيًّا لا بيلفُّ**: عشرُ بلاطاتٍ بتلفَّ على الموبايلِ بتاخدْ تلاتَ
 * سطورٍ وتزقَّ النتائجَ تحتَ الطيَّةِ — والنتائجُ هي سببُ الصفحةِ. والتمريرُ
 * بيخلّي الصفَّ **سطرًا واحدًا دايمًا** مهما زادَ عددُ التصنيفاتِ.
 */
.dir-cats {
  background: var(--c-sur);
  border-bottom: 1px solid var(--c-bor);
}
.dir-cats__row {
  display: flex; gap: 8px; align-items: stretch;
  margin: 0; padding: 12px 0; list-style: none;
  overflow-x: auto; scrollbar-width: thin;
  /* الحافّةُ بتوحي إنّ فيه كمانْ — من غيرِها الصفُّ شكلُه منتهٍ عندَ القصِّ. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.dir-cats__row > li { flex: 0 0 auto; scroll-snap-align: start; }
.dir-cat {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--c-bor); background: var(--c-sur);
  color: var(--c-txt2); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.dir-cat:hover { border-color: var(--c-pri); color: var(--c-pri); text-decoration: none; }
/* المختارُ بيتقالْ **بلونٍ وخلفيّةٍ**، لا بلونٍ وحدَه: فرقُ لونٍ بسْ بيضيعُ
   على شاشةٍ بإضاءةٍ عاليةٍ وعندَ اللي مابيفرّقش الألوانَ. */
.dir-cat.is-on {
  border-color: var(--c-pri); background: var(--c-pri);
  color: #fff;
}
.dir-cat__ico { display: inline-flex; flex: 0 0 auto; }
.dir-cat__ico .ti { width: 18px; height: 18px; }
/* واللونُ اللي الأدمنُ اختارَه بيتلغي على البلاطةِ المختارةِ — أزرقُ على أزرقَ
   مابيتقريش. [[a-fix-has-two-directions]] */
.dir-cat.is-on .dir-cat__ico { color: #fff !important; }
.dir-cat__n {
  font-size: var(--fs-xs); font-weight: 700; opacity: .72;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .dir-cat { padding: 8px 12px; font-size: var(--fs-xs); }
  .dir-cat__ico .ti { width: 16px; height: 16px; }
}

/**
 * **وشُّ المحلِّ في صندوقٍ صغيرٍ** — `.store-face-sm`
 *
 * صفحاتُ الماركاتِ والموديلاتِ والخدماتِ والمقاساتِ بتعرضُ محلّاتٍ في صفوفٍ
 * بصورةٍ ٥٦px. كانوا بيرسموا **إيموجي 🏪** للمحلِّ بلا صورةٍ — وده اللي
 * `inc/icons.php` مكتوبٌ في أوّلِه ليه غلطٌ: الإيموجي بيرسمُه **نظامُ التشغيلِ**،
 * فشكلُه بيختلفْ من جهازٍ لجهازٍ ومابيقبلش لونًا. ودلوقتي بيرسموا نفسَ الوشِّ.
 *
 * والاسمُ جوّه الحلقةِ بيتخفي هنا: ٥٦px مش مساحةً لاسمٍ يتقرا، والمربّعُ جنبَه
 * اسمُ المحلِّ مكتوبٌ أصلًا. [[unify-once-not-per-portal]]
 */
.store-face-sm { display: flex; align-items: center; justify-content: center; }
.store-face-sm .store-ph--face { min-height: 0; padding: 4px; gap: 3px; }
.store-face-sm .store-ph__name { display: none; }
/* نفسُ القفلِ في النسخةِ الصغيرةِ — صندوقٌ مربّعٌ دايمًا. */
.store-face-sm .store-ph__ring { width: 56%; height: auto; aspect-ratio: 1; }
.store-face-sm .store-ph__art { max-height: 78%; max-width: 44%; }

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **ترقيمُ نتائجِ الدليلِ** — `.stores-pager`
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * من تصميمِ المالكِ المرجعيِّ ٢٠٢٦-١٠-٠٥.
 *
 * **والأرقامُ بتجاوبْ تلاتَ أسئلةٍ «تحميلُ المزيد» مابيجاوبهاش**: فينَ أنا،
 * وقدَّ إيه فاضلٌ، وإزّاي أبعتْ لحدٍّ المكانَ اللي أنا فيه. ومعَ ٢٬٢٠٦ متجرًا
 * ده الفرقُ بينَ دليلٍ وشريطٍ لانهائيٍّ.
 */
.stores-pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin-top: 22px;
}
.stores-pager:empty { display: none; }
.stores-pg {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-bor); border-radius: 10px;
  background: var(--c-sur); color: var(--c-txt2);
  font-size: var(--fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.stores-pg:hover:not(:disabled) { border-color: var(--c-pri); color: var(--c-pri); }
/* الحاليّةُ بلونٍ **وخلفيّةٍ** — فرقُ لونٍ وحدَه بيضيعْ على شاشةٍ في الشمسِ. */
.stores-pg.is-on {
  background: var(--c-pri); border-color: var(--c-pri); color: #fff; cursor: default;
}
.stores-pg:disabled { opacity: .4; cursor: not-allowed; }
.stores-pg-gap { padding: 0 2px; color: var(--c-txt3); user-select: none; }

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **شريطُ «سجّلْ متجرَك»** — `.dir-cta`
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * من نفسِ التصميمِ. والدليلُ بيتقرا من ناحيتينِ: زائرٌ بيدوّرُ على محلٍّ،
 * **وصاحبُ محلٍّ بيتفرّجْ على منافسينَ**. والتانِ مالوش بابٌ في الصفحةِ كلِّها.
 *
 * ⚠️ **وبيتخفي عن اللي داخلٌ بحسابٍ** — «سجّلْ متجرَك» لتاجرٍ مسجَّلٍ دعوةٌ
 * لحاجةٍ عملَها. [[every-screen-needs-a-door]]
 */
.dir-cta {
  margin-top: 36px; padding: 34px 0;
  background: linear-gradient(135deg, var(--c-pri-l) 0%, var(--c-sur2) 100%);
  border-top: 1px solid var(--c-bor);
}
.dir-cta__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px;
}
.dir-cta__say { flex: 1 1 320px; min-width: 0; }
.dir-cta__h { font-size: var(--fs-h3); font-weight: 800; color: var(--c-txt); margin: 0 0 6px; }
.dir-cta__p { font-size: var(--fs-sm); color: var(--c-txt2); margin: 0; }
.dir-cta__act { flex: 0 0 auto; }
@media (max-width: 560px) {
  .dir-cta { padding: 26px 0; }
  .dir-cta__act, .dir-cta__act .tyreon-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   **رأسُ المحلِّ — بقيّةُ تحويلِ الداكنِ لكارتٍ أبيضَ.** (٢٠٢٦-١٠-٠٨)
   ═══════════════════════════════════════════════════════════════════════════

   القواعدُ فوقُ اتكتبتْ لشريطٍ أزرقَ: شفّافيّاتٌ بيضاءُ على داكنٍ، ونصٌّ أبيضُ.
   على كارتٍ أبيضَ كلُّها بتختفي. والتجاوزُ هنا — في آخرِ الملفِّ — لأنّ
   الترتيبَ هو اللي بيحسمُ في CSS، وتعديلَ كلِّ قاعدةٍ في مكانِها كانَ هيضيّعُ
   التعليقاتِ المكتوبةَ عليها وسببَ وجودِها. [[the-later-sheet-wins-silently]]
   ═══════════════════════════════════════════════════════════════════════════ */

/* الأيقونةُ: مربّعٌ فاتحٌ بحدٍّ، لا زجاجٌ مغبَّشٌ. */
.sp-hero .sp-avatar {
  background: var(--c-sur2, #f4f6fb);
  border: 1px solid var(--c-line, #e6eaf2);
  box-shadow: none;
  backdrop-filter: none;
  color: var(--c-pri);
}
.sp-hero .sp-verified { background: #e7f7ee; color: #0b7a3b; border: 1px solid #b9e7cd; }
.sp-hero .sp-tyreon-dim   { color: var(--c-txt3, #93a0b5); }
.sp-hero .sp-tyreon-label { color: var(--c-txt2); }

/* الأزرارُ: دائريّةٌ ومحدَّدةٌ — والاتّصالُ وحدَه مملوءٌ، زيَّ التصميمِ. */
.sp-hero .sp-act {
  border: 1px solid var(--c-line, #e6eaf2);
  background: var(--c-sur, #fff);
  color: var(--c-txt);
  backdrop-filter: none;
}
.sp-hero .sp-act:hover { background: var(--c-sur2, #f4f6fb); }
.sp-hero .sp-act--main {
  background: var(--c-pri); color: #fff; border-color: var(--c-pri);
  box-shadow: 0 6px 18px rgba(26, 86, 219, .22);
}
.sp-hero .sp-act--main:hover { background: var(--c-pri-d, #163fae); }
.sp-hero .sp-act--wa { background: #25D366; border-color: #25D366; color: #fff; }

/* ── نافذةُ البلاغِ (`assets/js/store-report.js`) — منتصفُ الشاشةِ على الكمبيوترِ، ولوحةٌ من تحتُ على الموبايلِ. ── */
.srp { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.srp-card { background: var(--c-sur, #fff); color: var(--c-txt, #111827); border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.srp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 4px; }
.srp-head h3 { margin: 0; font-size: 17px; }
.srp-x { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--c-txt3, #6b7280); }
.srp-sub { margin: 0; padding: 0 18px 8px; font-size: 13px; color: var(--c-txt3, #6b7280); }
.srp-body { overflow: auto; padding: 4px 18px; }
.srp-set { border: 0; margin: 0 0 12px; padding: 0; }
.srp-set legend, .srp-lbl { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.srp-req { color: var(--c-red-d, #b91c1c); }
.srp-opt-l { color: var(--c-txt3, #6b7280); font-weight: 400; font-size: 12px; }
.srp-opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.srp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.srp-in { width: 100%; border: 1px solid var(--c-line, #e5e7eb); border-radius: 10px; padding: 9px 10px; font: inherit; background: var(--c-sur, #fff); color: inherit; }
.srp-hits { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 180px; overflow: auto; }
.srp-hit { text-align: start; border: 1px solid var(--c-line, #e5e7eb); border-radius: 10px; padding: 8px 10px; background: var(--c-sur, #fff); color: inherit; cursor: pointer; font: inherit; }
.srp-hit small { color: var(--c-txt3, #6b7280); }
.srp-hit.is-on { border-color: var(--c-pri); box-shadow: 0 0 0 2px var(--c-pri); }
.srp-none, .srp-wait { font-size: 13px; color: var(--c-txt3, #6b7280); margin: 6px 0; }
.srp-prev img { margin-top: 8px; max-height: 120px; border-radius: 10px; }
.srp-err { margin: 0 18px; padding: 8px 10px; border-radius: 10px; background: var(--c-red-l, #fee2e2); color: var(--c-red-d, #b91c1c); font-size: 13px; }
.srp-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--c-line, #e5e7eb); margin-top: 8px; }
.srp-send { background: var(--c-red-d, #b91c1c); border-color: var(--c-red-d, #b91c1c); color: #fff; }
.srp-send:disabled { opacity: .6; cursor: progress; }
@media (max-width: 640px) {
  .srp { align-items: flex-end; padding: 0; }
  .srp-card { max-width: none; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .srp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* والصفُّ بيتوسّطْ على الموبايلِ بدلَ ما يتمدّدْ. */
@media (max-width: 640px) {
  .sp-hero .sp-avatar { width: 68px; height: 68px; border-radius: 14px; font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   **الخدماتُ والماركاتُ: بلاطاتٌ لا شرائحُ.** (تصميمُ المالكِ ٢٠٢٦-١٠-٠٨)
   ═══════════════════════════════════════════════════════════════════════════ */
#sp-services, #sp-brands {
  display: grid; gap: 10px; padding: 14px 18px 18px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.sp-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 8px; min-height: 92px;
  border: 1px solid var(--c-bor); border-radius: 14px;
  background: var(--c-sur); color: var(--c-txt);
  text-decoration: none; text-align: center; transition: .15s;
}
a.sp-tile:hover { border-color: var(--c-pri); box-shadow: 0 4px 14px rgba(26,86,219,.10); }
.sp-tile-ico { font-size: 24px; line-height: 1; }
.sp-tile-t   { font-size: 12.5px; font-weight: 700; line-height: 1.3; }

/* الماركةُ: شعارٌ فوقَ الاسمِ، وتحتَه «متوفر». */
.sp-brand-logo { height: 26px; max-width: 86px; object-fit: contain; display: block; }
.sp-brand-logo--txt {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--c-txt2);
}
.sp-brand-ok { font-size: 12px; font-weight: 700; color: #0b7a3b; }

@media (max-width: 640px) {
  #sp-services, #sp-brands {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    padding: 12px 14px 14px; gap: 8px;
  }
  .sp-tile { min-height: 84px; padding: 12px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   **رأسُ المحلِّ — مطابقةُ تصميمِ المالكِ.** (٢٠٢٦-١٠-٠٨)
   ═══════════════════════════════════════════════════════════════════════════
   كارتٌ أبيضُ واحدٌ: معرضٌ على اليمينِ، والاسمُ والشارةُ والتقييمُ والمكانُ
   والأزرارُ على الشمالِ، وعلامةُ الحفظِ في الركنِ.
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-hero-card {
  position: relative;
  background: var(--c-sur, #fff);
  border: 1px solid var(--c-line, #e6eaf2);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}
.sp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px; align-items: center;
}
/* 🔴 كانَ `flex-end` + `text-align: end` — و«النهايةُ» في العربيِّ هي
   **الشمالُ**. فالمعرضُ على اليمينِ والنصُّ متلزّقٌ بالشمالِ، وبينهمْ
   **تلتُ الكارتِ فاضٍ** (مقيسٌ على لقطةٍ ٢٠٢٦-١٠-٠٨: الفراغُ اللي المالكُ
   شافَه). والفقرةُ العربيّةُ بتبتدي من البدايةِ أصلًا، فـ`start` أصحُّ
   طباعيًّا **و** بتلزّقُ النصَّ جنبَ الصورةِ. */
/* 🔴 كانَ `flex-end` + `text-align: end` — و«النهايةُ» في العربيِّ هي
   **الشمالُ**. فالمعرضُ على اليمينِ والنصُّ متلزّقٌ بالشمالِ، وبينهمْ
   **تلتُ الكارتِ فاضٍ** (مقيسٌ على لقطةٍ ٢٠٢٦-١٠-٠٨: الفراغُ اللي المالكُ
   شافَه). والفقرةُ العربيّةُ بتبتدي من البدايةِ أصلًا، فـ`start` أصحُّ
   طباعيًّا **و** بتلزّقُ النصَّ جنبَ الصورةِ.

   وبعدَها الفراغُ اتنقلَ للطرفِ التانِ — فالأفعالُ راحتْ هناكْ: الهُويّةُ
   في عمودٍ، والأزرارُ في عمودٍ مقابلِه، والكارتُ بيتملا من الطرفينِ. */
.sp-hero-txt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-content: center; align-items: center;
  gap: 8px 20px; text-align: start;
}
.sp-hero-txt > * { grid-column: 1; justify-self: start; min-width: 0; }
/**
 * ⚠️ **مدٌّ على صفوفٍ ضمنيّةٍ بيولّدْها.**
 *
 * جرّبتُ `grid-row: 1 / -1` عشانْ الأزرارُ تتوسّطَ العمودَ — ومانفعتش:
 * الصفوفُ كلُّها ضمنيّةٌ و`-1` بتشاورْ على آخرِ خطٍّ في الشبكةِ **الصريحةِ**
 * (الخطِّ ١)، فالمدى بقى صفًّا واحدًا. فجرّبتُ `span 20` — وده **عملَ عشرينَ
 * صفًّا فعلًا**، كلُّ واحدٍ بفجوتِه، فالكارتُ طالَ ١٦٠px فراغًا تحتَ المحتوى.
 * يعني الإصلاحُ زوّدَ المساحةَ اللي المالكُ شاكٍ منها بالظبطِ.
 *
 * 🔑 **فالأزرارُ في صفِّ الاسمِ**: محاذاةٌ مقصودةٌ، وصفرُ صفوفٍ وهميّةٍ.
 * [[a-fix-has-two-directions]]
 */
.sp-hero-txt > .sp-actions { grid-column: 2; grid-row: 1; align-self: center; }
.sp-hero .sp-name { font-size: clamp(24px, 3.2vw, 34px); margin: 0; }
.sp-sub { font-size: 15px; font-weight: 600; color: var(--c-txt2); }
.sp-sub:empty { display: none; }

/* الشارةُ — خضراءُ ممتلئةٌ، ورماديّةٌ لمّا المواعيدُ مش موجودةً. */
.sp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #fff;
}
.sp-pill--open { background: #16a34a; }
.sp-pill--shut { background: #b42318; }
.sp-pill--none { background: var(--c-sur2, #f4f6fb); color: var(--c-txt2); border: 1px solid var(--c-line, #e6eaf2); }

.sp-place { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--c-txt); }
.sp-place svg { width: 18px; height: 18px; color: var(--c-pri); }
.sp-none { color: var(--c-txt3, #93a0b5); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────────────
   🔴 **`font-size: 0` كانَ بيمسحُ زرًّا كاملًا.** (٢٠٢٦-١٠-٠٨، من لقطةٍ)
   ───────────────────────────────────────────────────────────────────────────
   الفكرةُ كانتْ «أيقونةٌ بلا نصٍّ زيَّ التصميمِ»: صفِّرْ حجمَ الخطِّ وسيبْ
   الـ`svg` بحجمِه. وده بيمشي مع الأيقوناتِ المرسومةِ **بس** — وزرُّ
   «مشاركة» أيقونتُه **إيموجي** (`🔗`)، والإيموجي نصٌّ. فالزرُّ طلعَ
   **مربّعًا أبيضَ فاضيًا** في الرأسِ، ومعاهُ أيُّ زرٍّ تانٍ بإيموجي.

   🔑 **فالأزرارُ بقتْ بأسمائِها**: أيقونةٌ + كلمةٌ، عرضٌ تلقائيٌّ. حاجةٌ
   مالهاش اسمٌ بتبقى مربّعًا، والمربّعُ الفاضي أوحشُ من كلمةٍ زيادةً.
   [[a-filename-is-not-a-feature]] · [[anchor-needs-a-box]]
   ─────────────────────────────────────────────────────────────────────────── */
.sp-hero .sp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sp-hero .sp-act,
.sp-hero .sp-actions .tyreon-btn {
  height: 46px; padding: 0 16px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.sp-hero .sp-act svg { width: 19px; height: 19px; flex: none; }
.sp-hero .sp-act--main { padding: 0 22px; }

/* علامةُ الحفظِ — ركنُ الصورةِ، زرٌّ عايمٌ عليها لا بعيدٌ عنها. */
.sp-bookmark {
  position: absolute; z-index: 2;
  inset-block-start: 10px; inset-inline-end: 10px;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--c-line, #e6eaf2); background: rgba(255, 255, 255, .92);
  color: var(--c-txt2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.sp-bookmark svg { width: 19px; height: 19px; }
.sp-bookmark:hover { border-color: var(--c-pri); color: var(--c-pri); }
.sp-bookmark.is-on { color: var(--c-pri); border-color: var(--c-pri); }
.sp-bookmark.is-on svg { fill: currentColor; }

/* المعرضُ. */
.sp-gal { position: relative; display: flex; flex-direction: column; gap: 8px; }
.sp-gal-main {
  aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  background: var(--c-sur2, #f4f6fb);
  display: flex; align-items: center; justify-content: center;
}
.sp-gal-main img, .sp-gal-main a { width: 100%; height: 100%; display: block; }
.sp-gal-main img { object-fit: cover; }
.sp-gal-main .sp-avatar { width: 88px; height: 88px; }
.sp-gal-thumbs { display: grid; grid-auto-flow: column; gap: 8px; overflow-x: auto; }
.sp-gal-thumbs:empty { display: none; }
.sp-gal-th {
  width: 74px; height: 56px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; background: var(--c-sur2, #f4f6fb); cursor: pointer;
}
.sp-gal-th.is-on { border-color: var(--c-pri); }
.sp-gal-th img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ───────────────────────────────────────────────────────────────────────────
   🔴 **اللي مالوش صورٌ مابياخدش نصَّ الكارتِ.** (٢٠٢٦-١٠-٠٨، من لقطةٍ)
   ───────────────────────────────────────────────────────────────────────────
   الخانةُ كانتْ نصَّ الرأسِ بنسبةِ ١٦:١٠ مهما كانَ جوّاها — ولواحدٍ من
   ٢٣٥٩ محلًّا بس فيه صورٌ. يعني الشكلُ الطبيعيُّ للصفحةِ كانَ **فراغًا
   رماديًّا نصَّ الكارتِ** وأيقونةً صغيّرةً سابحةً فيه.

   🔑 **فالفراغُ بيتقلّمْ**: مربّعٌ ١٦٠px جنبَ الاسمِ، والنصُّ بياخدْ الباقي.
   وأوّلُ صورةٍ توصلْ بتشيلُ `is-noimg` والخانةُ بتفتحْ على مساحتِها.
   [[count-is-not-a-condition]]
   ─────────────────────────────────────────────────────────────────────────── */
.sp-hero-grid.is-noimg { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; }
.sp-hero-grid.is-noimg .sp-gal { align-self: start; }
.sp-hero-grid.is-noimg .sp-gal-main { aspect-ratio: 1; border-radius: 16px; }
.sp-hero-grid.is-noimg .sp-gal-main .sp-avatar { width: 64px; height: 64px; }

@media (max-width: 820px) {
  /* على الموبايلِ عمودٌ واحدٌ: العرضُ مابيستحملش عمودَ أزرارٍ جنبَ الاسمِ. */
  .sp-hero-txt { grid-template-columns: 1fr; }
  .sp-hero-txt > .sp-actions { grid-column: 1; grid-row: auto; }
  .sp-hero-grid, .sp-hero-grid.is-noimg { grid-template-columns: 1fr; gap: 16px; }
  .sp-hero-grid.is-noimg .sp-gal { justify-self: start; width: 112px; }
  .sp-hero-card { padding: 14px; }
  .sp-bookmark { width: 40px; height: 40px; inset-block-start: 12px; inset-inline-start: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   **مواعيدُ العملِ: سبعةُ سطورٍ** — مطابقةُ تصميمِ المالكِ ٢٠٢٦-١٠-٠٨.
   كانَ سبعَ مربّعاتٍ متشابهةٍ؛ والتصميمُ جدولٌ: نقطةٌ · اليومُ · الميعادُ.
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-week { display: flex; flex-direction: column; }
.sp-day {
  display: grid; grid-template-columns: 10px 1fr auto;
  align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 14px;
}
.sp-day + .sp-day { margin-top: 2px; }
.sp-day.is-today { background: #eef4ff; }
.sp-day.is-today .sp-day-n, .sp-day.is-today .sp-day-h { color: var(--c-pri); font-weight: 800; }
.sp-day-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c-txt3, #93a0b5); }
.sp-day-dot.is-open { background: #16a34a; }
.sp-day-dot.is-shut { background: #e11d48; }
.sp-day-n { font-weight: 700; color: var(--c-txt); }
.sp-day-h { color: var(--c-txt2); font-weight: 600; }
.sp-day-h.is-shut { color: #e11d48; font-weight: 800; }
.sp-day-h.is-none { color: var(--c-txt3, #93a0b5); }

/* **الحالةُ الفاضيةُ تتقالْ** (المالكُ ٢٠٢٦-١٠-٠٨) — الكارتُ بيظهرُ وبيقولُ
   «غير متوفرة الآن» بدلَ ما يختفي. الغيابُ معلومةٌ. */
.sp-empty {
  margin: 0; padding: 18px 16px; text-align: center;
  color: var(--c-txt3, #93a0b5); font-size: 13.5px; font-weight: 600;
}

/**
 * **وآخرُ الملفِّ عن قصدٍ** — أهدافُ اللمسِ المشترَكةُ.
 *
 * نفسُ الدرسِ اللي اتكرّرَ فوقُ بألفَي سطرٍ: قاعدةٌ بنفسِ الأولويّةِ مكتوبةٌ
 * قبلَ أختِها بتتغلبْ. فالقواعدُ اللي بتضبطُ مقاسَ اللمسِ مكانُها **بعدَ كلِّ
 * تعريفاتِها**، وآخرُ الملفِّ هو المكانُ الوحيدُ اللي مضمونٌ.
 *
 * والمقيسُ ٢٠٢٦-١٠-١٠: زرُّ الإجراءِ الأساسيُّ وشريطُ العربيّةِ أقلُّ من ٤٠px
 * على كلِّ صفحةٍ عامّةٍ. والإصبعُ المتوسّطُ ٤٥–٥٧px، فهدفٌ ٣٦px بيتداسُ غلطًا.
 *
 * ⚠️ `min-height` لا `height`: الزرُّ بسطرينِ لازمْ يفضلْ يكبرْ.
 */
@media (pointer: coarse) {
  .tyreon-btn,
  .veh-bar-act { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * صفحةُ منتجاتِ الكاوتشِ (/tire-search/) — بنيةُ فيجما بهُويّةِ تايرون.
 *
 * 🔑 **ولا لونَ مكتوبًا بالإيدِ**: التصميمُ برتقاليٌّ وتايرون أزرقُ، فكلُّ
 * لونٍ هنا `var(--c-*)`. قيمةٌ ثابتةٌ واحدةٌ بتكسرُ الوضعَ الليليَّ وبتخلّي
 * الصفحةَ تفضلْ على هُويّةٍ قديمةٍ بعدَ أيِّ تغييرٍ. [[canonical-rule-or-you-leak]]
 * ══════════════════════════════════════════════════════════════════════ */
.tyr-plp { margin-top: 18px; }
.tyr-plp-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.tyr-plp-title h2 { margin:0; font-size:22px; font-weight:800; color:var(--c-txt); }
.tyr-plp-title h2 span:last-child { font-size:15px; font-weight:600; color:var(--c-txt2); }
.tyr-plp-title p { margin:4px 0 0; font-size:13px; color:var(--c-txt3); }
.tyr-plp-ctrl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tyr-plp-fbtn { display:none; align-items:center; gap:7px; min-height:44px; padding:8px 14px;
  border:1px solid var(--c-bor); border-radius:var(--rad); background:var(--c-sur,#fff);
  font-family:var(--fnt); font-size:13.5px; font-weight:700; color:var(--c-txt2); cursor:pointer; }
.tyr-plp-fbtn:hover { border-color:var(--c-pri); color:var(--c-pri); }
.tyr-plp-sort { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--c-txt2); }
.tyr-plp-sort select { min-height:40px; padding:7px 10px; border:1px solid var(--c-bor);
  border-radius:var(--rad); background:var(--c-sur,#fff); font-family:var(--fnt); font-size:13.5px; color:var(--c-txt); }
.tyr-plp-view { display:flex; border:1px solid var(--c-bor); border-radius:var(--rad); overflow:hidden; }
.tyr-plp-view button { display:flex; align-items:center; justify-content:center; width:42px; min-height:40px;
  border:0; background:var(--c-sur,#fff); color:var(--c-txt3); cursor:pointer; }
.tyr-plp-view button.is-on { background:var(--c-pri); color:#fff; }
.tyr-plp-applied { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;
  padding:10px 12px; border:1px solid var(--c-bor); border-radius:var(--rad); background:var(--c-sur2,#f8fafc); }
.tyr-plp-body { display:grid; grid-template-columns:248px 1fr; gap:20px; align-items:start; }
.tyr-plp-side { position:sticky; top:84px; border:1px solid var(--c-bor); border-radius:var(--rad-lg,14px);
  background:var(--c-sur,#fff); padding:14px; }
.tyr-plp-side-hd { display:flex; align-items:center; gap:8px; padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid var(--c-bor); font-size:14px; color:var(--c-txt); }
.tyr-plp-side-hd strong { display:flex; align-items:center; gap:7px; }
.tyr-plp-reset { margin-inline-start:auto; min-height:32px; padding:4px 10px; border:0; background:transparent;
  color:var(--c-pri); font-family:var(--fnt); font-size:12.5px; font-weight:700; cursor:pointer; }
.tyr-plp-x { display:none; min-width:40px; min-height:40px; border:0; background:transparent; color:var(--c-txt3); font-size:18px; cursor:pointer; }
.tyr-plp-fsec { padding:12px 0; border-bottom:1px solid var(--c-bor); }
.tyr-plp-fsec:last-child { border-bottom:0; padding-bottom:0; }
.tyr-plp-fsec h3 { margin:0 0 8px; font-size:12.5px; font-weight:800; color:var(--c-txt2); letter-spacing:.2px; }
.tyr-plp-opts { max-height:260px; overflow:auto; }
.tyr-plp-opt { display:flex; align-items:center; gap:9px; min-height:40px; padding:4px 2px;
  font-size:13.5px; color:var(--c-txt); cursor:pointer; }
.tyr-plp-opt input { width:17px; height:17px; accent-color:var(--c-pri); flex:0 0 auto; }
.tyr-plp-opt span:nth-of-type(1) { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tyr-plp-n { font-size:11.5px; color:var(--c-txt3); }
.tyr-plp-price { display:flex; align-items:center; gap:8px; }
.tyr-plp-price input { width:100%; min-width:0; min-height:40px; padding:7px 9px; border:1px solid var(--c-bor);
  border-radius:var(--rad); background:var(--c-sur,#fff); font-family:var(--fnt); font-size:13px; color:var(--c-txt); }
.tyr-plp-hint { margin:8px 0 0; font-size:11.5px; color:var(--c-txt3); line-height:1.5; }
.tyr-plp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:16px; }
.tyr-plp-list { display:flex; flex-direction:column; gap:12px; }

/* ── الكارتُ ───────────────────────────────────────────────────────── */
.tyr-card { display:flex; flex-direction:column; border:1px solid var(--c-bor); border-radius:var(--rad-lg,14px);
  background:var(--c-sur,#fff); overflow:hidden; transition:border-color .14s, box-shadow .14s, transform .14s; }
.tyr-card:hover { border-color:var(--c-pri); box-shadow:0 8px 24px rgb(0 0 0 / .07); transform:translateY(-2px); }
.tyr-card-img { position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:var(--c-sur2,#f8fafc); overflow:hidden; }
.tyr-card-img img { width:100%; height:100%; object-fit:contain; }
.tyr-card-ph { color:var(--c-txt3); opacity:.5; }
/* الشارةُ فوقَ الصورةِ — في أوّلِ السطرِ مهما كانَ الاتّجاهُ. */
.tyr-card-tag { position:absolute; top:10px; inset-inline-start:10px; padding:3px 9px; border-radius:999px;
  background:var(--c-pri); color:#fff; font-size:11px; font-weight:800; }
.tyr-card-stock { position:absolute; bottom:10px; inset-inline-start:10px; display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px; background:var(--c-sur,#fff); border:1px solid var(--c-bor);
  font-size:11px; font-weight:700; color:var(--c-grn-d,#15803d); }
.tyr-card-stock i { width:7px; height:7px; border-radius:50%; background:var(--c-grn,#22c55e); }
.tyr-card-stock.is-out { color:var(--c-txt3); }
.tyr-card-stock.is-out i { background:var(--c-txt3); }
.tyr-card-body { display:flex; flex-direction:column; gap:6px; padding:12px 13px 13px; flex:1; }
.tyr-card-brand { margin:0; font-size:11.5px; font-weight:800; color:var(--c-pri); letter-spacing:.3px; }
.tyr-card-name { font-size:14.5px; font-weight:700; color:var(--c-txt); text-decoration:none; line-height:1.45; }
.tyr-card-name:hover { color:var(--c-pri); }
.tyr-card-size { align-self:flex-start; padding:2px 8px; border-radius:var(--rad-sm,6px);
  background:var(--c-sur2,#f8fafc); border:1px solid var(--c-bor); font-size:11.5px; font-weight:700; color:var(--c-txt2); }
.tyr-card-desc { margin:0; font-size:12.5px; color:var(--c-txt3); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tyr-card-price { margin-top:2px; font-size:16px; font-weight:800; color:var(--c-txt); }
/* «اسأل المحل» مش سعرًا — فمابتاخدش شكلَ السعرِ. [[offer-what-the-server-sent]] */
.tyr-card-price.is-ask { font-size:13px; font-weight:600; color:var(--c-txt3); }
.tyr-card-stores { display:flex; align-items:center; gap:7px; min-height:40px; font-size:12.5px;
  color:var(--c-txt2); text-decoration:none; }
.tyr-card-stores:hover { color:var(--c-pri); }
.tyr-card-stores strong { color:var(--c-txt); }
.tyr-card-cta { margin-top:auto; justify-content:center; min-height:44px; }

/* ── عرضُ القايمةِ ─────────────────────────────────────────────────── */
.tyr-plp-list .tyr-card { flex-direction:row; }
.tyr-plp-list .tyr-card-img { width:190px; flex:0 0 190px; aspect-ratio:auto; }
.tyr-plp-list .tyr-card-body { padding:14px 16px; }

/* ── الموبايلُ: الفلاترُ درجٌ ────────────────────────────────────────── */
@media (max-width: 900px) {
  .tyr-plp-body { grid-template-columns:1fr; }
  .tyr-plp-fbtn { display:inline-flex; }
  .tyr-plp-x { display:inline-flex; }
  .tyr-plp-side { position:fixed; inset-block:0; inset-inline-start:0; z-index:60; width:min(86vw,320px);
    border-radius:0; overflow:auto; transform:translateX(-102%); transition:transform .2s ease; }
  [dir="rtl"] .tyr-plp-side { transform:translateX(102%); }
  .tyr-plp-side.is-open { transform:none; }
  .tyr-plp-backdrop { position:fixed; inset:0; z-index:59; background:rgb(0 0 0 / .4); }
  .tyr-plp-list .tyr-card { flex-direction:column; }
  .tyr-plp-list .tyr-card-img { width:auto; flex:auto; aspect-ratio:4/3; }
}
@media (max-width: 480px) {
  .tyr-plp-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .tyr-card-body { padding:10px; }
  .tyr-card-name { font-size:13.5px; }
}

/* ── قلبُ المفضَّلةِ على كارتِ المحلِّ ───────────────────────────────
 *
 * ⚠️ **٤٤px وفوقَ الصورةِ**: الكارتُ كلُّه رابطٌ، فالزرُّ لازمْ يبقى فوقَه
 * في طبقةٍ أعلى وإلّا الضغطةُ بتفتحُ المحلَّ بدلَ ما تحفظَه.
 */
.store-card-fav {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-width: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .92); color: var(--c-txt3);
  cursor: pointer; transition: color .14s, background .14s, transform .12s;
}
.store-card-fav svg { fill: none; stroke: currentColor; stroke-width: 1.9; }
.store-card-fav:hover { color: var(--c-red-d, #b91c1c); transform: scale(1.06); }
.store-card-fav.is-on { color: var(--c-red, #dc2626); }
/* والممتلئُ بيقولْ «محفوظٌ» من غيرِ ما تقرا — لونٌ وحدَه مابيكفيش. */
.store-card-fav.is-on svg { fill: currentColor; stroke: currentColor; }
.store-card-fav[disabled] { opacity: .55; cursor: default; }
.store-card-fav:focus-visible { outline: 2px solid var(--c-pri); outline-offset: 2px; }

/* صفُّ نُسَخِ المقاسِ — بيظهرْ لمّا الأرقامُ تدّي أكترَ من مقاسٍ. */
.tsx-variants { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin:10px 0 2px; }
.tsx-variants .tsv-lab { font-size:12.5px; color:var(--c-txt3); }
.tsx-variants .tsv-chip { min-height:40px; padding:7px 14px; border:1px solid var(--c-bor); border-radius:999px;
  background:var(--c-sur,#fff); font-family:var(--fnt); font-size:14px; font-weight:700; color:var(--c-txt); cursor:pointer; }
.tsx-variants .tsv-chip:hover { border-color:var(--c-pri); color:var(--c-pri); }
.tsx-variants .tsv-chip.is-on { background:var(--c-pri); border-color:var(--c-pri); color:#fff; }

/* ── تبويبا صفحةِ البحثِ ───────────────────────────────────────────── */
.tsx-tabs { display:flex; gap:6px; margin-bottom:14px; border-bottom:1px solid var(--c-bor); }
.tsx-tab { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 18px;
  border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer;
  font-family:var(--fnt); font-size:14.5px; font-weight:700; color:var(--c-txt3); }
.tsx-tab:hover { color:var(--c-pri); }
.tsx-tab.is-on { color:var(--c-pri); border-bottom-color:var(--c-pri); }
.tsx-tab svg { width:19px; height:19px; }
.tsx-car-row { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:10px; align-items:end; margin-bottom:12px; }
.tsx-car-go { min-height:44px; padding:13px 22px; font-size:15px; border-radius:var(--rad-lg); }
.tsx-car-out { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:24px; }
.tsx-hint { font-size:12.5px; color:var(--c-txt3); margin:0 0 10px; line-height:1.6; }
@media (max-width:640px){
  .tsx-car-row { grid-template-columns:1fr; }
  .tsx-car-go { width:100%; justify-content:center; }
  .tsx-tab { flex:1; justify-content:center; padding:10px 8px; font-size:13.5px; }
}

/* لافتةُ التوافقِ فوقَ النتائجِ. */
.tsx-compat { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:12px 16px; border:1px solid var(--c-bor);
  border-radius:var(--rad-lg,14px); background:var(--c-sur2,#f8fafc); }
/**
 * **و`hidden` بتفضلُ أقوى من الكلاسِ.** (TMB-X-HIDDEN · ١٨-١٠)
 *
 * الماركُ بيرسمُ اللافتةَ مقفولةً (`<div id="ts-compat-note" class="tsx-compat" hidden>`)
 * والجافاسكربت بيفتحُها لمّا النتايجُ تبقى غيرَ مفلترةٍ. و`display:flex` فوقُ
 * قاعدةُ مؤلِّفٍ، و`[hidden] { display:none }` قاعدةُ متصفّحٍ — فالمؤلِّفُ بيغلبُ،
 * والسمةُ بتبقى **تعليقًا على الصفحةِ**.
 *
 * والمقيسُ على التطويرِ قبلَ السطرِ ده: `hidden=true` و**`display: flex`**.
 * (ومافيش `!important` هنا عن قصدٍ — نفسُ النوعِ من القاعدةِ وأخصُّ منها،
 * فالجافاسكربت لسّهْ بيفتحُها بشيلِ السمةِ زيَّ ما كانَ.)
 */
.tsx-compat[hidden] { display:none; }
.tsx-compat > span { display:inline-flex; color:var(--c-pri); flex:0 0 auto; }
.tsx-compat svg { width:20px; height:20px; }
.tsx-compat p { margin:0; flex:1; min-width:200px; font-size:13px; color:var(--c-txt2); line-height:1.6; }
.tsx-compat .tyreon-btn { min-height:40px; flex:0 0 auto; }
@media (max-width:560px){ .tsx-compat .tyreon-btn { width:100%; justify-content:center; } }

/* ── العربيّاتُ المتوافقةُ: كلُّ واحدةٍ بتفتحْ مقاساتِها تحتَها ───────── */
.tsx-cars { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
/* ⚠️ اللوحةُ بتكسرُ السطرَ فبتقعْ تحتَ عربيّتِها بالظبطِ — في الاتّجاهينِ. */
.tsx-car-sizes { flex:1 0 100%; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:2px 0 8px; padding:12px 14px; border:1px solid var(--c-bor);
  border-radius:var(--rad-lg,14px); background:var(--c-sur2,#f8fafc); }
.tsx-car-sizes[hidden] { display:none; }
.tsx-car { cursor:pointer; font-family:var(--fnt); }
.tsx-car-caret { display:inline-block; margin-inline-start:4px; font-size:12px;
  color:var(--c-txt3); transition:transform .15s; }
.tsx-car.is-open { border-color:var(--c-pri); color:var(--c-pri); }
.tsx-car.is-open .tsx-car-caret { transform:rotate(180deg); color:var(--c-pri); }
.tsx-car:focus-visible { outline:2px solid var(--c-pri); outline-offset:2px; }
/* ── شرائحُ الماركاتِ السريعةِ في تبويبِ العربيّةِ ──────────────────── */
.tsx-quickmakes { margin:2px 0 12px; }
.tsx-quickmakes-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tsx-qm { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:6px 14px;
  border:1px solid var(--c-bor); border-radius:999px; background:var(--c-sur,#fff);
  font-family:var(--fnt); font-size:13.5px; font-weight:600; color:var(--c-txt); cursor:pointer; }
.tsx-qm img { width:22px; height:22px; object-fit:contain; flex:0 0 auto; }
.tsx-qm:hover { border-color:var(--c-pri); color:var(--c-pri); }
.tsx-qm.is-on { background:var(--c-pri); border-color:var(--c-pri); color:#fff; }
.tsx-qm:focus-visible { outline:2px solid var(--c-pri); outline-offset:2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   **صفحةُ المحلِّ — الرأسُ من جديدٍ.** (مواصفاتُ المالكِ ٢٠٢٦-١١-٠١ «إعادة تصميم صفحة تفاصيل المتجر»)
   ═══════════════════════════════════════════════════════════════════════════

   ١ · **الصورةُ كاملةٌ — مافيش قصٌّ.** كانتْ `aspect-ratio: 16/10` مع `object-fit: cover`، والصورُ عندَنا أغلبُها
       لافتاتٌ إعلانيّةٌ (أرقامٌ وشعاراتٌ ونصوصٌ) بتتقصّْ من فوقُ وتحتُ. دلوقتي `contain` على خلفيّةٍ محايدةٍ، والارتفاعُ
       من الصورةِ نفسِها بحدٍّ أقصى (`70vh`) — مافيش مطّْ ولا تشويهٌ. والمصغّراتُ تحتَها مش فوقَها.
   ٢ · **البياناتُ عمودٌ واحدٌ بترتيبٍ**: الاسمُ · النوعُ · مفتوح/مقفول · التقييمُ · المكانُ · الحقائقُ · الأزرارُ.
       الأزرارُ كانتْ عمودًا جنبَ الاسمِ — فالاسمُ بيتضغطْ وفيه فراغٌ نصَّ الكارتِ على الكمبيوترِ.
   ٣ · **الأزرارُ شبكةٌ موحّدةٌ**: نفسُ الارتفاعِ (٤٨) ونفسُ الأيقونةِ، اتّصالٌ أزرقُ تايرون، واتسابٌ أخضرُ، والاتّجاهاتُ
       والمشاركةُ بإطارٍ. عمودانِ على الموبايلِ. والخانةُ اللي مالهاش بيانٌ باهتةٌ مش مختفيةً (`is-off`).
   ═══════════════════════════════════════════════════════════════════════════ */
body .sp-hero-grid { align-items: start; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
body .sp-hero-grid.is-noimg { grid-template-columns: 160px minmax(0, 1fr); }

body .sp-hero-grid:not(.is-noimg) .sp-gal-main {
  aspect-ratio: auto; min-height: 220px; max-height: 70vh;
  background: var(--c-sur2, #f4f6fb); border: 1px solid var(--c-line, #e6eaf2); border-radius: 16px;
}
body .sp-hero-grid:not(.is-noimg) .sp-gal-main img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
body .sp-hero-grid:not(.is-noimg) .sp-gal-main a { height: auto; }
body .sp-gal-th { width: 72px; height: 54px; }
body .sp-gal-th img { object-fit: cover; }

body .sp-hero-txt { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
body .sp-hero-txt > * { grid-column: 1; }
body .sp-hero-txt > .sp-actions { grid-column: 1; grid-row: auto; align-self: stretch; }
body .sp-hero .sp-name { line-height: 1.35; overflow-wrap: anywhere; }

body .sp-hero .sp-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 8px; width: 100%;
}
body .sp-hero .sp-act,
body .sp-hero .sp-actions .tyreon-btn {
  height: 48px; width: 100%; border-radius: 14px; justify-content: center; font-size: 14.5px;
}
body .sp-hero .sp-act--main { background: var(--c-pri, #1B4FD8); border-color: var(--c-pri, #1B4FD8); color: #fff; }
body .sp-hero .sp-act--wa { background: #25D366; border-color: #25D366; color: #fff; }
/* «الإبلاغ» (المالك ٢٠٢٦-١١-٠٣): أحمرُ هادئٌ — خلفيّةٌ فاتحةٌ وإطارٌ ونصٌّ أحمرُ، بنفسِ شكلِ الأزرارِ. هنا جنبَ «اتصال» و«واتساب»
   ومستثنًى زيُّهمْ من القاعدةِ البيضاءِ تحتُ — أوّلُ نسخةٍ اتكتبتْ فوقُ في الملفِّ وكانتْ القاعدةُ دي بتغطّيها في صمتٍ.
   والتوكناتُ ليها قيمُها في الوضعِ الداكنِ (`--c-red-l` · `--c-red-d`). [[the-later-sheet-wins-silently]] */
body .sp-hero .sp-act--report { background: var(--c-red-l, #fee2e2); border: 1.5px solid var(--c-red, #ef4444); color: var(--c-red-d, #b91c1c); }
body .sp-hero .sp-act--report:hover { filter: brightness(.96); }
body .sp-hero .sp-act:not(.sp-act--main):not(.sp-act--wa):not(.sp-act--report) {
  background: var(--c-sur, #fff); border: 1.5px solid var(--c-line, #e6eaf2); color: var(--c-txt, #0f172a);
}
body .sp-hero .sp-act.is-off { opacity: .45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 760px) {
  body .sp-hero-grid,
  body .sp-hero-grid.is-noimg { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body .sp-hero-grid.is-noimg .sp-gal { max-width: 140px; }
  body .sp-hero-grid:not(.is-noimg) .sp-gal-main { min-height: 180px; max-height: 60vh; }
  body .sp-hero-grid:not(.is-noimg) .sp-gal-main img { max-height: 60vh; }
  body .sp-hero .sp-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .sp-hero .sp-name { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   **قسمُ «لديك متجر…» والفوترُ — أقصرُ وأوضحُ.** (مواصفاتُ المالكِ ٢٠٢٦-١١-٠١ §٦ · §٧)

   القسمُ: المساحةُ كانتْ كبيرةً والزرُّ بعيدٌ عن عنوانِه — دلوقتي ارتفاعٌ أقلُّ، والعنوانُ والوصفُ والزرُّ قطعةٌ
   واحدةٌ متوسّطةٌ رأسيًّا على الكمبيوترِ، وتحتَ بعضٍ قريبينَ على الموبايلِ والزرُّ بحجمِ الإصبعِ.
   الفوترُ: على الموبايلِ كانَ عمودًا واحدًا طويلًا (`minmax(168px)` مابيدّيش عمودينِ في ٣٥٨ بكسل) — دلوقتي الأقسامُ
   عمودانِ والمسافاتُ أقلُّ، والشعارُ والوصفُ والحقوقُ و«Made in Egypt» زي ما هم.
   ═══════════════════════════════════════════════════════════════════════════ */
body .pxc { padding: 44px 0; }
body .pxc-cols { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
body .pxc-act { justify-content: flex-end; }
@media (max-width: 800px) {
  body .pxc { padding: 28px 0; }
  body .pxc-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body .pxc-lede { margin-top: 6px; }
  body .pxc-act { justify-content: stretch; }
  body .pxc-act > a { width: 100%; min-height: 50px; justify-content: center; }
}

@media (max-width: 760px) {
  body .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-bottom: 24px; }
  body .footer-brand { grid-column: 1 / -1; }
  body .footer-col a { padding-block: 3px; }
  body .site-footer { padding-top: 32px; }
}