/* ============================================================================
 * RONIX THEME — ملف مولَّد. لا تعدّله يدوياً.
 * المصدر: public/css/rx/*.css   |   إعادة البناء: npm run build:css
 * ============================================================================ */

/* ── branches.css ────────────────────────────────────────────── */
/* ==========================================================================
   RX / BRANCHES  —  .rx-branches
   قسم «فروعنا»: بطاقة لكل معرض على الأرض. القيم الحقيقية مأخوذة من:

     _component3columnimageadresslink.min.css
        • ثلاثة أعمدة، وحشوة القسم 32px عمودياً و16px أفقياً
        • صورة البطاقة 434×244 وحوافّها العليا 16px (‎--r-lg‎)
        • كتلة النص بيضاء بحشوة 16px وحوافّها السفلية 16px
        • ‎.item img{transition:.5s}‎ و‎.item:hover img{transform:scale(1.03)}‎
        • ‎.item{border-bottom:1px solid #fff0}‎ يصير ‎#a30000‎ عند التحويم
          (‎--brand-darker‎) — أُعيد هنا بحدّ سفلي ثابت السماكة يتلوّن، فلا
          تقفز البطاقة عند المرور
        • زر «Open in Map»: ‎btn-sm btn-secondary-3break‎

     _componentaddress.min.css
        • أرضية القسم ‎#f9f9f9‎ (‎--bg-soft‎) وحشوته 32/16
        • سطر لكل معلومة: أيقونة صغيرة ثم النص، وتباعد رأسي 11px
          (‎.tel-add{padding-top:11px}‎) وأول سطر بلا تباعد
        • نص المعلومة 12px/16 ولون خافت ‎#717171‎ (‎--ink-3‎)

     _componenttitlea.min.css / typo-3break.min.css
        • ترويسة القسم: وزن 700 ولون ‎#3d3d3d‎ (‎--ink-2‎)، وحشوة سفلية 16px
        • سلّم h2: ‎24 → 26 (768px) → 32 (1200px)‎ — مُنفَّذ بـ clamp()

   الاتجاه: لا خاصية فيزيائية واحدة هنا. الشارة والملاحظة والأيقونات كلّها
   بخصائص منطقية، وسهم زرّ الخريطة يُقلب في القالب من isRTL لا هنا.
   ========================================================================== */

.rx-branches {
    /* عدد الأعمدة والفاصل بينها — يتغيّران عند نقاط التوقّف */
    --rx-br-cols: 1;
    --rx-br-gap: var(--sp-3);

    background: var(--bg-soft);
    padding-block: var(--sp-6);
    font-family: var(--font);
}

/* داخل صفحة لها قسمها وأرضيتها (اتصل بنا) — بلا أرضية ولا حشوة سفلية */
.rx-branches--plain {
    background: transparent;
    padding-block-end: 0;
}

.rx-branches__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* داخل ‎.container‎ جاهزة — لا يتضاعف الحاوي ولا الحشوة الأفقية */
.rx-branches--flush .rx-branches__inner {
    max-width: none;
    padding-inline: 0;
}

/* ── ترويسة القسم ─────────────────────────────────────────────────────── */

.rx-branches__head {
    padding-block-end: var(--sp-4);
}

.rx-branches__title {
    margin: 0;
    /* h2: 24px ← 26px عند 768px ← 32px عند 1200px */
    font-size: clamp(24px, 15.33px + 1.39vw, 32px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink-2);
    text-align: start;
}

.rx-branches__sub {
    margin: var(--sp-1) 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
    text-align: start;
}

/* ── الشبكة ───────────────────────────────────────────────────────────── */

/* flex لا grid: فرع واحد يبقى بعرض عمود واحد في وسط الصفحة بدل أن يتمدّد
   على 1320px، والصفّ الأخير الناقص يتوازن من نفسه. */
.rx-branches__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rx-br-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rx-branches__item {
    display: flex;
    min-width: 0;
    flex: 0 1 calc(
        (100% - (var(--rx-br-cols) - 1) * var(--rx-br-gap)) / var(--rx-br-cols)
    );
}

/* ── البطاقة ──────────────────────────────────────────────────────────── */

.rx-branches__card {
    box-sizing: border-box;   /* الحدّ داخل عرض العمود المحسوب */
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
    /* الحدّ السفلي ثابت السماكة ويتلوّن عند التحويم — لا قفزة في الارتفاع */
    border-block-end: 3px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color var(--t), box-shadow var(--t);
}

/* ── الصورة أو لوحة الدبّوس ───────────────────────────────────────────── */

.rx-branches__media {
    position: relative;
    aspect-ratio: 434 / 244;   /* مقاس صورة البطاقة في رونكس */
    overflow: hidden;
    background: var(--bg-soft);
    border-block-end: 1px solid var(--line);
}

.rx-branches__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* لا صورة في المعرض: دبّوس على أرضية بلون العلامة، بلا مسار صورة مكتوب */
.rx-branches__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    background:
        radial-gradient(circle at 50% 38%, rgba(237, 28, 36, .12), rgba(237, 28, 36, 0) 62%),
        var(--brand-light);
    color: var(--brand);
}

.rx-branches__ph .mdi {
    font-size: 56px;
    line-height: 1;
    opacity: .5;
    transition: transform .5s ease, opacity var(--t);
}

/* شارة الفرع الرئيسي فوق الصورة */
.rx-branches__chip {
    position: absolute;
    inset-block-start: var(--sp-2);
    inset-inline-start: var(--sp-2);
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

/* ── جسم البطاقة ──────────────────────────────────────────────────────── */

.rx-branches__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
}

.rx-branches__name {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
    text-align: start;
}

/* سطور المعلومات — تباعد 11px كما في component-footer-Address */
.rx-branches__facts {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rx-branches__fact {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    min-width: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-3);
    text-align: start;
}

.rx-branches__fact > .mdi {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 20px;
    color: var(--ink-4);
}

.rx-branches__fact > span {
    min-width: 0;
    overflow-wrap: break-word;
}

.rx-branches__link {
    color: var(--ink-2);
    text-decoration: none;
    overflow-wrap: break-word;
    transition: color var(--t-fast);
}

.rx-branches__link:hover,
.rx-branches__link:focus-visible {
    color: var(--brand-darker);
    text-decoration: underline;
}

.rx-branches__note {
    margin: 0;
    padding-inline-start: var(--sp-3);
    border-inline-start: 2px solid var(--line);
    font-size: 12px;
    line-height: 18px;
    color: var(--ink-4);
    text-align: start;
}

/* ── زرّ الخريطة ──────────────────────────────────────────────────────── */

/* ‎margin-block-start:auto‎ يثبّت الأزرار على سطر واحد مهما اختلف طول
   المعلومات بين الفروع */
.rx-branches__actions {
    margin-block-start: auto;
    padding-block-start: var(--sp-1);
}

.rx-branches__map {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px 16px;          /* btn-sm في رونكس */
    border: 1px solid var(--brand-darker);
    border-radius: var(--r);
    background: transparent;
    color: var(--brand-darker);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease,
                border-color .3s ease, box-shadow .3s ease;
}

.rx-branches__map .mdi {
    font-size: 18px;
    line-height: 20px;
}

.rx-branches__mapgo {
    opacity: .75;
}

.rx-branches__map:hover,
.rx-branches__map:focus-visible {
    background: var(--brand-darker);
    border-color: var(--brand-darker);
    color: #fff;
    /* ظلّ التحويم الأصلي في button-3break */
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
}

.rx-branches__map:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── تفاعل المرور ─────────────────────────────────────────────────────── */

@media (hover: hover) {
    .rx-branches__card:hover {
        border-color: var(--line-strong);
        border-block-end-color: var(--brand-darker);
        box-shadow: var(--shadow);
    }

    .rx-branches__card:hover .rx-branches__img {
        transform: scale(1.03);
    }

    .rx-branches__card:hover .rx-branches__ph .mdi {
        transform: scale(1.03);
        opacity: .68;
    }
}

/* ── نقاط التوقّف ─────────────────────────────────────────────────────── */

@media (min-width: 576px) {
    .rx-branches {
        --rx-br-gap: var(--sp-4);
    }
}

@media (min-width: 768px) {
    .rx-branches {
        --rx-br-cols: 2;
    }

    .rx-branches__sub {
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    .rx-branches {
        --rx-br-cols: 3;
    }

    .rx-branches__body {
        padding: var(--sp-5) var(--sp-4);
    }

    .rx-branches__name {
        font-size: 20px;
    }

    .rx-branches__fact {
        font-size: 14px;
    }
}

/* ── تقليل الحركة ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rx-branches__card,
    .rx-branches__img,
    .rx-branches__ph .mdi,
    .rx-branches__link,
    .rx-branches__map {
        transition: none;
    }

    .rx-branches__card:hover .rx-branches__img,
    .rx-branches__card:hover .rx-branches__ph .mdi {
        transform: none;
    }
}


/* ── catalog-grid.css ────────────────────────────────────────────── */
/* ==========================================================================
   RX / CATALOG GRID  —  .rx-catalog
   الفلاتر + شبكة المنتجات + الترقيم، مبنيّة على قيم رونكس الحقيقية من
   _componentproductpaginationwithfilter.min.css و category.min.css:

     .componentProductpaginationWithFilter{padding:32px 16px}     شريحة القسم
     cf2f2f2                       → أرضية #f2f2f2               (‎--bg-soft‎)
     .header-menu{border-bottom:1px solid #d9d9d9;               شريط الأدوات
                  margin-bottom:16px}
                 ‎@992: border-top:1px solid #d9d9d9‎
     .button-switch p{font-size:14px;line-height:24px;padding:8px 0}
     .button-filter-mobile button{font-size:12px;line-height:16px;height:28px}
     ‎@992‎ .product-and-filter{display:flex}                       العمودان
            .filter{width:258px;position:sticky;top:70px;overflow:auto}
            .cards{هامش بدء 8px; width:calc(100% - 258px)}        فاصل 8px
     ‎<992‎ .filter{position:fixed;top:85px;                        لوح منزلق
            بدء السطر ‎-100%‎;
            width:100%;height:calc(100vh - 82px);transition:ease}
     .filter{padding:16px}
     .title-filter-box{padding-bottom:16px;font-size:16px;font-weight:700}
     .filter .button-switch{border-bottom:2px solid #525252;      عنوان مجموعة
                            padding:4px 0}
     .filter-box .checkmark{width:20px;height:20px;background:#fff;
                            border:1px solid #ccc;border-radius:3px}
     input:checked~.checkmark{background:#fca79a;border:1px solid #fe6262}
                                                     ← هنا ‎--brand-light/--brand‎
     .container-checkbox-label{هامش بدء 8px; color:#3d3d3d}
     .cards div[class^='col']{padding-bottom:16px}  ‎@992: 8px‎    فاصل البطاقات
     col-12 / col-sm-6 / col-md-4 / col-xxl-3                     سلّم الأعمدة
     .item-pagination{border:.710976px solid #e5e5e5;margin:0 3px;   (category)
                      font-weight:700;font-size:12px;color:#5e5e5e;
                      width:26px;height:26px;min-width:25px}
     .pagination a .item-pagination{border:0;background:transparent;
                                    color:#bf0000}                 ← ‎--brand‎
     .pagination .item-pagination{background:#bf0000;color:#fff;
                                  border-radius:4px;height:28px}    الصفحة الحالية

   ثلاثة فروق مقصودة عن الأصل:
     • نقطة انهيار العمودين 1080px لا 992px: عمودُنا 258px وشبكةُ أربعة أعمدة
       تحتاج مدى أوسع، وعند 992px تصير البطاقة أضيق من صورتها.
     • رونكس تلصق البطاقات (تُلغي حدّ جهة البدء) فتتقاسم حدودها؛ وبطاقتنا
       المشتركة ‎.product-card‎ لها حدّ ونصف قطر وظلّ عند المرور فاللصق يشوّهها.
       والفاصل هنا 16px ثم 8px من 1080 فما فوق — وهو فاصل رونكس الرأسي نفسه.
     • مدّة الانزلاق ‎.25s‎ (‎--t‎) بدل ‎.8s‎ عند رونكس: ثمانية أعشار الثانية تُشعر
       الزائر أنّ اللوح عالق.

   الاتجاه: كل الخصائص منطقية. اللوح المنزلق يتحرّك بـ‎inset-inline-start‎ لا
   بـ‎transform‎ لأنّ ‎transform‎ لا يعرف اتجاه الكتابة — وهي حيلة رونكس نفسها
   (من خارج الشاشة إلى الصفر) لكن بصيغتها المنطقية. وأسهم الترقيم يختارها القالب
   من ‎isRTL‎، فلا قاعدة اتجاه واحدة في هذا الملف.
   ========================================================================== */

.rx-catalog {
    /* عرض عمود الفلاتر — قيمة رونكس نفسها */
    --rx-catalog-side: 258px;
    /* الفاصل بين العمودين: 8px عند رونكس */
    --rx-catalog-gutter: var(--sp-2);
    /* أعمدة الشبكة وفاصلها — يتغيّران عند نقاط التوقّف وحدها */
    --rx-catalog-cols: 2;
    --rx-catalog-cardgap: var(--sp-4);
    /* عرض اللوح المنزلق: يقرأه العرضُ ومسافةُ الانزلاق معاً فلا يفترقان */
    --rx-catalog-panel: min(320px, 88vw);

    background: var(--bg-soft);      /* شريحة #f2f2f2 عند رونكس */
    padding-block: var(--sp-6);      /* 32px */
    font-family: var(--font);
    /* حتى لا يختفي أوّل صفّ تحت الترويسة اللاصقة عند القفز إلى #products */
    scroll-margin-block-start: calc(var(--header-h) + var(--sp-5));
}

.rx-catalog__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* ══ شريط الأدوات (header-menu) ═══════════════════════════════════════════ */

.rx-catalog__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-block: var(--sp-1);
    border-block-end: 1px solid var(--line);
    margin-block-end: var(--sp-4);
}

.rx-catalog__count {
    margin: 0;
    padding-block: var(--sp-2);
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: var(--ink-3);
}

.rx-catalog__count b {
    font-weight: 700;
    color: var(--ink);
}

/* على الهواتف الضيّقة يتقاسم الزرّ والترتيب سطراً واحداً؛ القائمة هي التي
   تنكمش (‎flex: 0 1‎) فلا يفيض الشريط عن الشاشة أبداً. */
.rx-catalog__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex: 1 1 auto;
    min-width: 0;
}

/* زرّ فتح الفلاتر — يظهر دون 1080px وحدها */
.rx-catalog__open {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 28px;
    padding-inline: var(--sp-3);
    border: 0;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
    transition: background var(--t-fast);
}

.rx-catalog__open:hover { background: #000; }

.rx-catalog__open:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.rx-catalog__open i { font-size: 14px; }

/* الترتيب */
.rx-catalog__sort {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.rx-catalog__sort-label {
    font-size: 14px;
    line-height: 24px;
    color: var(--ink-3);
    white-space: nowrap;
}

.rx-catalog__select {
    height: 32px;
    flex: 0 1 190px;
    min-width: 0;
    padding-inline: var(--sp-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.rx-catalog__select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* ══ العمودان (product-and-filter) ════════════════════════════════════════ */

.rx-catalog__body { position: relative; }

.rx-catalog__main { min-width: 0; }

/* ══ لوح الفلاتر ══════════════════════════════════════════════════════════ */

/* دون 1080px: لوح منزلق من جهة بداية السطر، مثل filter-mobile عند رونكس */
.rx-catalog__filters {
    position: fixed;
    inset-block: 0;
    /* رونكس تُخفيه بـ‎-100%‎ لأنّ لوحها بعرض الشاشة؛ ولوحُنا 320px فالمسافة
       عرضُه وحده زائد 24px تبتلع الظلّ — فلا يقطع اللوح الشاشة عرضاً عند فتحه. */
    inset-inline-start: calc(-1 * (var(--rx-catalog-panel) + 24px));
    z-index: 150;                    /* فوق الترويسة اللاصقة (60) ودون قائمة الهاتف (200) */
    width: var(--rx-catalog-panel);
    background: #fff;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;              /* يُخرجه من ترتيب الجدولة وهو مغلق */
    transition: inset-inline-start var(--t), visibility var(--t);
}

.rx-catalog.is-open .rx-catalog__filters {
    inset-inline-start: 0;
    visibility: visible;
}

.rx-catalog__scrim {
    position: fixed;
    inset: 0;
    z-index: 149;
    border: 0;
    padding: 0;
    background: rgba(16, 18, 22, .45);
    cursor: pointer;
}

.rx-catalog__form { padding: var(--sp-4); }   /* .filter{padding:16px} */

.rx-catalog__filters-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block-end: var(--sp-4);
}

.rx-catalog__filters-title {
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    color: var(--ink);
}

.rx-catalog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-block-start: -4px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-3);
    font-size: 20px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.rx-catalog__close:hover { background: var(--bg-soft); color: var(--ink); }

/* ── مجموعة فلترة ─────────────────────────────────────────────────────── */

.rx-catalog__group { padding-block-end: var(--sp-4); }

.rx-catalog__group-title {
    margin: 0 0 var(--sp-3);
    padding-block: var(--sp-1);
    /* الخطّ السفلي الغامق هو توقيع .button-switch عند رونكس */
    border-block-end: 2px solid var(--ink-2);
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
}

/* ── نطاق السعر ───────────────────────────────────────────────────────── */

.rx-catalog__price {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.rx-catalog__num {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding-inline: var(--sp-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
}

.rx-catalog__num::placeholder { color: var(--ink-4); }

.rx-catalog__num:focus {
    outline: 0;
    border-color: var(--brand);
}

.rx-catalog__dash {
    color: var(--ink-4);
    flex: none;
}

/* ── مربّع اختيار مطابق لـ container-checkbox ─────────────────────────── */

.rx-catalog__check {
    position: relative;          /* مرجع الصندوق الأصلي المخفيّ */
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-block: var(--sp-2);
    cursor: pointer;
    user-select: none;
}

.rx-catalog__check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rx-catalog__box {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: #fff;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.rx-catalog__check:hover .rx-catalog__box { background: var(--bg-soft); }

.rx-catalog__check input:checked ~ .rx-catalog__box {
    background: var(--brand-light);
    border-color: var(--brand);
}

/* علامة الصحّ. رونكس ترسمها بضلعَي مربّع مُدار (‎border-width:0 2px 2px 0‎)، وهي
   خاصية فيزيائية؛ وعلامة الصحّ لا تُقلب في العربية أصلاً. فالرسم هنا قناعٌ
   متجهٌ فوق أرضية ‎--brand‎: لا خاصية اتجاه، ولون العلامة من الرمز لا من رقم. */
.rx-catalog__box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.4l3 3 5.8-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.4l3 3 5.8-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    opacity: 0;
    transition: opacity var(--t-fast);
}

.rx-catalog__check input:checked ~ .rx-catalog__box::after { opacity: 1; }

.rx-catalog__check input:focus-visible ~ .rx-catalog__box {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.rx-catalog__check-text {
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-2);
}

/* ── الأزرار ──────────────────────────────────────────────────────────── */

.rx-catalog__actions {
    display: flex;
    gap: var(--sp-2);
    padding-block-start: var(--sp-2);
}

.rx-catalog__actions .btn { flex: 1; }

/* ══ شبكة المنتجات ════════════════════════════════════════════════════════ */

.rx-catalog__grid {
    display: grid;
    grid-template-columns: repeat(var(--rx-catalog-cols), minmax(0, 1fr));
    gap: var(--rx-catalog-cardgap);
}

/* ══ لا نتائج ═════════════════════════════════════════════════════════════ */

.rx-catalog__empty {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
}

.rx-catalog__empty-icon {
    font-size: 56px;
    line-height: 1;
    color: var(--line-strong);
}

.rx-catalog__empty-text {
    margin: var(--sp-3) 0 var(--sp-4);
    font-size: 16px;
    color: var(--ink-3);
}

/* ══ الترقيم ══════════════════════════════════════════════════════════════ */

.rx-catalog__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-block: var(--sp-5);
}

.rx-catalog__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    margin-inline: 3px;
    padding-inline: 5px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    transition: color var(--t-fast), border-color var(--t-fast);
}

a.rx-catalog__page:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.rx-catalog__page.is-current {
    height: 28px;
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.rx-catalog__page.is-gap {
    border-color: transparent;
    background: transparent;
    font-weight: 400;
    color: var(--ink-4);
}

/* الأسهم بلا إطار ولا أرضية، بلون العلامة — كما في .pagination a .item-pagination */
.rx-catalog__nav {
    border-color: transparent;
    background: transparent;
    color: var(--brand);
    font-size: 16px;
}

a.rx-catalog__nav:hover {
    border-color: transparent;
    color: var(--brand-dark);
}

.rx-catalog__nav.is-off {
    color: var(--line-strong);
    cursor: default;
}

/* ══ نقاط التوقّف ═════════════════════════════════════════════════════════ */

/* col-sm-6 → عمودان، وهما عندنا الأساس؛ من 768 ثلاثة (col-md-4) */
@media (min-width: 768px) {
    .rx-catalog { --rx-catalog-cols: 3; }
}

/* العمودان جنباً إلى جنب: هنا يعود اللوح عموداً لاصقاً ويختفي زرّ الفتح */
@media (min-width: 1080px) {
    .rx-catalog { --rx-catalog-cardgap: var(--sp-2); }

    .rx-catalog__bar { border-block-start: 1px solid var(--line); }

    .rx-catalog__open { display: none; }

    .rx-catalog__body {
        display: flex;
        align-items: flex-start;
        gap: var(--rx-catalog-gutter);
    }

    .rx-catalog__filters {
        position: sticky;
        inset-block-start: calc(var(--header-h) + var(--sp-2));
        inset-block-end: auto;
        inset-inline-start: auto;
        z-index: 1;
        flex: 0 0 var(--rx-catalog-side);
        width: var(--rx-catalog-side);
        max-height: calc(100vh - var(--header-h) - var(--sp-4));
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: none;
        visibility: visible;
        transition: none;
    }

    .rx-catalog__main { flex: 1 1 auto; }

    .rx-catalog__scrim,
    .rx-catalog__close { display: none; }
}

/* col-xxl-3 → أربعة أعمدة. عند رونكس 1400px، وهنا 1320px لأنّ السعة القصوى
   عندنا 1320 فالشبكة تبلغ عرضها الكامل هناك (‎1320 − 32 − 266 = 1022px‎). */
@media (min-width: 1320px) {
    .rx-catalog { --rx-catalog-cols: 4; }
}

@media (prefers-reduced-motion: reduce) {
    .rx-catalog__filters { transition: none; }
}


/* ── category-cards.css ────────────────────────────────────────────── */
/* ==========================================================================
   RX / CATEGORY CARDS  —  .rx-cats
   قسم بطاقات التصنيفات، مبني على قيم رونكس الحقيقية:
     _component10cardsproduct.min.css  → حشوة 32px/16px، فواصل 6→8→12→16px،
        عمودان ثم خمسة أعمدة، عنوان 16px/700 (18px على العريض)، تكبير
        الصورة عند المرور scale(1.03) بانتقال قصير.
     _componenttitlea.min.css          → ترويسة القسم: وزن 700، لون 3d3d3d،
        محاذاة البداية على الهاتف ومنتصف الصفحة من 577px، حشوة سفلية 16px،
        ورابط بلون a30000 (‎--brand-darker‎).
     custom.min.css                    → نصف قطر البطاقة (4/8px ← ‎--r‎).
   كل الخصائص منطقية (inline-start/end) فتعمل مع rtl وltr بلا تعديل.
   ========================================================================== */

.rx-cats {
    /* أعمدة الشبكة وفواصلها — تُضبط عند كل نقطة توقّف */
    --rx-cats-cols: 2;
    --rx-cats-gap: var(--sp-2);

    background: var(--bg);
    padding-block: var(--sp-6);
    font-family: var(--font);
}

.rx-cats__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* ── ترويسة القسم ─────────────────────────────────────────────────────── */

.rx-cats__head {
    display: grid;
    gap: var(--sp-2);
    padding-block-end: var(--sp-4);
}

.rx-cats__headtext {
    min-width: 0;
}

.rx-cats__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink-2);
    text-align: start;
}

.rx-cats__sub {
    margin: var(--sp-1) 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
    text-align: start;
}

.rx-cats__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    justify-self: start;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--brand-darker);
    transition: color var(--t);
}

.rx-cats__more .mdi {
    font-size: 18px;
    line-height: 1;
}

.rx-cats__more:hover,
.rx-cats__more:focus-visible {
    color: var(--brand);
    text-decoration: underline;
}

/* ── الشبكة ───────────────────────────────────────────────────────────── */

.rx-cats__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* الصف الأخير الناقص يبقى متوازناً */
    gap: var(--rx-cats-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rx-cats__item {
    display: flex;
    min-width: 0;
    flex: 0 1 calc(
        (100% - (var(--rx-cats-cols) - 1) * var(--rx-cats-gap)) / var(--rx-cats-cols)
    );
}

/* ── البطاقة ──────────────────────────────────────────────────────────── */

.rx-cats__card {
    box-sizing: border-box;   /* الحدّ 1px داخل عرض العمود المحسوب */
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.rx-cats__card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* أرضية الأيقونة الفاتحة */
.rx-cats__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 4;
    background: var(--bg-soft);
    border-block-end: 1px solid var(--line);
    transition: background-color var(--t);
}

/* الأيقونة الخطّية: نحدّد المربّع فقط، ولا نمدّ الصورة أبداً */
.rx-cats__icon {
    inline-size: clamp(52px, 46%, 96px);
    block-size: auto;
    max-block-size: 96px;
    object-fit: contain;
    transition: transform var(--t);
}

.rx-cats__fallback {
    font-size: 44px;
    line-height: 1;
    color: var(--ink-2);
    transition: transform var(--t), color var(--t);
}

.rx-cats__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
}

.rx-cats__name {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink-2);
    /* البطاقة overflow:hidden — بلا كسر الكلمة يُقصّ الاسم الطويل بلا أثر */
    overflow-wrap: break-word;
    transition: color var(--t);
}

/* رونكس تكتب عناوين البطاقات الإنجليزية بحروف كبيرة */
.rx-cats__name:lang(en) {
    text-transform: uppercase;
    letter-spacing: .01em;
}

.rx-cats__count {
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink-3);
}

/* ── تفاعل المرور ─────────────────────────────────────────────────────── */

@media (hover: hover) {
    .rx-cats__card:hover {
        border-color: var(--brand);
        box-shadow: var(--shadow);
    }

    .rx-cats__card:hover .rx-cats__plate {
        background: var(--brand-light);
    }

    .rx-cats__card:hover .rx-cats__icon,
    .rx-cats__card:hover .rx-cats__fallback {
        transform: scale(1.03);
    }

    .rx-cats__card:hover .rx-cats__name {
        color: var(--brand-dark);
    }

    .rx-cats__card:hover .rx-cats__fallback {
        color: var(--brand-dark);
    }
}

.rx-cats__card:focus-visible .rx-cats__plate {
    background: var(--brand-light);
}

/* ── نقاط التوقّف ─────────────────────────────────────────────────────── */

/* من 577px يتوسّط العنوان تماماً كما في component-title-A، ويبقى رابط
   «عرض الكل» في نهاية السطر. العمود الفارغ الأول يوازن عمود الرابط. */
@media (min-width: 576px) {
    .rx-cats__head {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--sp-4);
    }

    .rx-cats__head::before {
        content: "";
        display: block;
    }

    .rx-cats__title,
    .rx-cats__sub {
        text-align: center;
    }

    .rx-cats__more {
        justify-self: end;
    }
}

@media (min-width: 768px) {
    .rx-cats {
        --rx-cats-cols: 3;
        --rx-cats-gap: var(--sp-3);
    }

    .rx-cats__title {
        /* 26px عند 768 ← 32px عند 1200، تماماً كسلّم رونكس */
        font-size: clamp(26px, 15.33px + 1.39vw, 32px);
    }

    .rx-cats__sub {
        font-size: 16px;
    }

    .rx-cats__more {
        font-size: 16px;
    }

    .rx-cats__fallback {
        font-size: 52px;
    }
}

@media (min-width: 992px) {
    .rx-cats {
        --rx-cats-cols: 4;
    }

    .rx-cats__body {
        padding: var(--sp-4) var(--sp-3);
    }
}

@media (min-width: 1200px) {
    .rx-cats {
        --rx-cats-cols: 5;
        --rx-cats-gap: var(--sp-4);
    }

    .rx-cats__name {
        font-size: 18px;
        line-height: 1.22;
    }

    .rx-cats__fallback {
        font-size: 60px;
    }
}

/* ── تقليل الحركة ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rx-cats__card,
    .rx-cats__plate,
    .rx-cats__icon,
    .rx-cats__fallback,
    .rx-cats__name,
    .rx-cats__more {
        transition: none;
    }

    .rx-cats__card:hover .rx-cats__icon,
    .rx-cats__card:hover .rx-cats__fallback {
        transform: none;
    }
}


/* ── category-header.css ────────────────────────────────────────────── */
/* ==========================================================================
   RX / CATEGORY HEADER  —  .rx-cathead
   ترويسة صفحة التصنيف: ثلاثة أقسام من ronixtools.com مدموجة في مكوّن واحد
   بالترتيب نفسه الذي تعرضه الصفحة الأصلية /en/power-tools/:

     1) breadcrumbs-productPage
        _componentbreadcrumb-productpage.min.css
          .breadcrumbs-productPage{padding:16px}
          .page-bread-crumb-item{display:inline-block;font-size:12px}
          a{transition:all .5s}  a:hover{color:#ed1c24}   ← ‎--brand‎
        الفاصل عند رونكس شرطة مائلة، وهنا سهم يختاره القالب من isRTL حتى
        يشير إلى جهة القراءة الصحيحة في اللغتين.

     2) component-banner-full-width
        _componentbannerfullwidth.min.css
          .component-banner-full-width{padding:32px 0}
          picture{overflow:hidden}  picture img{transition:.3s}
          :hover picture img{transform:scale(1.03)}
          @media(min-width:576px){.curveImg img{border-radius:8px}}  ← ‎--r‎
        نسبة صورة رونكس 1920×822 (‎2.34:1‎) وهي المعتمدة من 1200px فما فوق،
        وتحتها نسب أهدأ حتى لا تصير الصورة شريطاً على الهاتف. سقف 70vh يمنع
        ابتلاع الشاشة على الشاشات العملاقة.

     3) component-title-text-button-background
        _componenttitletextbuttonbackground.min.css
          section{padding:32px 16px}   .box{padding:16px→32px عند ≥576}
          h1{font-weight:700;font-size:34/40}  ‎@1400: 40/44‎
          .box .description p{font-size:16px;line-height:22px;color:#5e5e5e}
                              ‎@1400: 18/24‎   ← ‎--ink-3‎
        وفي الصفحة الأصلية تُسحب هذه البطاقة فوق البانر ‎margin-top:-64px‎،
        وهنا السحب في متغيّر واحد ‎--rx-cathead-lift‎ يقرأه الطرفان: البطاقة
        ترتفع به والعنوان فوق الصورة يزيد حشوته السفلية بالقدر نفسه، فلا
        يتلامسان أبداً مهما تغيّر المقاس.

   سلّم العناوين (typo-3break.min.css): h1 = 28 ← 32 عند 768 ← 40 عند 1200.

   الاتجاه: كل الخصائص منطقية. إشارة زاوية التدرّج تأتي من القالب عبر
   ‎--rx-cathead-sign‎ (‎1‎ للإنجليزية و‎-1‎ للعربية)، وأيقونة الفاصل يختارها
   القالب من isRTL — لا قاعدة اتجاه واحدة في هذا الملف.
   ========================================================================== */

.rx-cathead {
    /* إشارة الاتجاه — يضبطها القالب من isRTL */
    --rx-cathead-sign: 1;
    /* سحب بطاقة النص فوق البانر — صفر على الشاشات الضيّقة حيث لا متّسع */
    --rx-cathead-lift: 0px;

    font-family: var(--font);
}

.rx-cathead__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* ══ 1. فتات الخبز ═══════════════════════════════════════════════════════ */

.rx-cathead__crumbs {
    padding-block: var(--sp-4);
}

.rx-cathead__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 18px;
    color: var(--ink-3);
}

.rx-cathead__crumb {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
}

.rx-cathead__crumb a {
    color: var(--ink-3);
    text-decoration: none;
    transition: color var(--t);
}

.rx-cathead__crumb a:hover {
    color: var(--brand);
}

.rx-cathead__crumb a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* العنصر الأخير — الصفحة الحالية: نص عادي أغمق بلا رابط */
.rx-cathead__crumb[aria-current] {
    color: var(--ink-2);
    font-weight: 600;
}

/* الفاصل: أيقونة يختار جهتها القالب، فلا تنقلب في اللغة الأخرى */
.rx-cathead__sep {
    font-size: 14px;
    line-height: 1;
    color: var(--line-strong);
}

/* ══ 2. البانر ═══════════════════════════════════════════════════════════ */

.rx-cathead__banner {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    /* فسحة رونكس بين فتات الخبز والصورة (‎padding:32px 0‎ على قسم البانر)،
       ومنها 16px آتية أصلاً من حشوة فتات الخبز السفلية */
    margin-block-start: var(--sp-4);
    /* نسبة الهاتف: مربّعة تقريباً حتى تبقى الصورة مفهومة لا شريطاً */
    aspect-ratio: 4 / 3;
    background: var(--ink);
}

.rx-cathead__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform .3s ease;
}

/* تكبير خفيف عند المرور — القيمة من رونكس نفسها */
@media (hover: hover) {
    .rx-cathead__banner:hover .rx-cathead__img {
        transform: scale(1.03);
    }
}

/* تعتيم متدرّج من جهة البداية ومن الأسفل: العنوان الأبيض يبقى مقروءاً فوق
   أي غلاف يرفعه صاحب المتجر، فاتحاً كان أو داكناً */
.rx-cathead__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(15, 15, 17, .72) 0%,
            rgba(15, 15, 17, .28) 46%,
            rgba(15, 15, 17, 0) 76%),
        linear-gradient(calc(var(--rx-cathead-sign, 1) * 90deg),
            rgba(15, 15, 17, .82) 0%,
            rgba(15, 15, 17, .46) 38%,
            rgba(15, 15, 17, 0) 72%);
}

.rx-cathead__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    /* الحشوة السفلية تحسب مكان البطاقة المسحوبة فوق الصورة */
    padding-block: var(--sp-5) calc(var(--sp-5) + var(--rx-cathead-lift));
}

.rx-cathead__overlay .rx-cathead__inner {
    width: 100%;
}

/* اللوحة تمرّر المؤشّر إلى الصورة تحتها، والعنوان وحده يستردّه ليبقى
   قابلاً للتحديد والنسخ */
.rx-cathead__title--over {
    pointer-events: auto;
    margin: 0;
    max-width: 20ch;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.16;
    text-align: start;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

/* ══ 3. العنوان والوصف ═══════════════════════════════════════════════════ */

.rx-cathead__intro {
    position: relative;
    z-index: 3;
    padding-block: var(--sp-6);
}

/* بلا غلاف: كتلة عنوان نظيفة على أرضية فاتحة مع أيقونة التصنيف */
.rx-cathead__intro--plain {
    background: var(--bg-soft);
    border-block-end: 1px solid var(--line);
}

/* مع غلاف: بطاقة بيضاء تُسحب فوق حافة الصورة السفلية، تماماً كصفحة رونكس */
.rx-cathead__intro--over {
    margin-block-start: calc(-1 * var(--rx-cathead-lift));
    padding-block-start: 0;
}

.rx-cathead__box {
    max-width: var(--container);
    margin-inline: auto;
}

.rx-cathead__intro--over .rx-cathead__box {
    padding: var(--sp-4);
    background: var(--bg);
    border-radius: var(--r);
}

/* أول سطر في البطاقة لا هامش علوي له: الحشوة وحدها تحدّد الفراغ سواء بدأت
   بالعنوان أو بعدّاد النتائج أو بالوصف */
.rx-cathead__box > :first-child {
    margin-block-start: 0;
}

/* ── سطر العنوان: أيقونة التصنيف بجانب H1 (حالة انعدام الغلاف) ────────── */

.rx-cathead__idhead {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.rx-cathead__plate {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.rx-cathead__icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.rx-cathead__glyph {
    font-size: 30px;
    line-height: 1;
    color: var(--brand);
}

.rx-cathead__title {
    margin: 0;
    min-width: 0;
    color: var(--ink-2);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.16;
    text-align: start;
    overflow-wrap: break-word;
}

/* ── سطر عدد النتائج ─────────────────────────────────────────────────── */

.rx-cathead__count {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-3);
    text-align: start;
}

.rx-cathead__count .mdi {
    font-size: 16px;
    line-height: 1;
    color: var(--ink-4);
}

/* ── الوصف والقصّ ────────────────────────────────────────────────────── */

.rx-cathead__desc {
    margin: var(--sp-3) 0 0;
    max-width: 92ch;
    color: var(--ink-3);
    font-size: 16px;
    line-height: 22px;
    text-align: start;
}

/* القصّ يضيفه السكربت لا الورقة: بلا جافاسكربت يظهر النصّ كاملاً بدل أن
   يُقصّ إلى ثلاثة أسطر بلا زرّ يفتحها */
.rx-cathead__desc.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.rx-cathead__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-block-start: var(--sp-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-darker);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
    transition: color var(--t);
}

/* ‎display‎ الصنف يتغلّب على ‎[hidden]‎ في ورقة المتصفّح، فلولا هذه القاعدة
   لظهر الزرّ قبل أن يقرّر السكربت أن النصّ يفيض — أو أبداً لو عُطّل السكربت */
.rx-cathead__more[hidden] {
    display: none;
}

.rx-cathead__more:hover {
    color: var(--brand);
    text-decoration: underline;
}

.rx-cathead__more:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.rx-cathead__more .mdi {
    font-size: 18px;
    line-height: 1;
    transition: transform var(--t);
}

.rx-cathead__more[aria-expanded="true"] .mdi {
    transform: rotate(180deg);
}

/* ══ نقاط التوقّف ════════════════════════════════════════════════════════ */

@media (min-width: 576px) {
    .rx-cathead__banner {
        aspect-ratio: 3 / 2;
        border-radius: var(--r);
    }

    .rx-cathead__intro--over .rx-cathead__box {
        padding: var(--sp-5);
    }
}

@media (min-width: 768px) {
    .rx-cathead__banner {
        aspect-ratio: 16 / 9;
    }

    .rx-cathead__overlay {
        padding-block: var(--sp-6) calc(var(--sp-6) + var(--rx-cathead-lift));
    }

    .rx-cathead__inner {
        padding-inline: var(--sp-6);
    }

    .rx-cathead__title,
    .rx-cathead__title--over {
        font-size: 32px;
        line-height: 1.15;
    }

    .rx-cathead__plate {
        width: 64px;
        height: 64px;
    }

    .rx-cathead__icon {
        width: 42px;
        height: 42px;
    }

    .rx-cathead__glyph {
        font-size: 34px;
    }

    .rx-cathead__count {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    /* من هنا يتّسع البانر لسحب البطاقة فوقه بلا تلامس مع العنوان */
    .rx-cathead {
        --rx-cathead-lift: 48px;
    }

    .rx-cathead__intro--over .rx-cathead__box {
        padding: var(--sp-6);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .rx-cathead__idhead {
        gap: var(--sp-4);
    }
}

@media (min-width: 1200px) {
    .rx-cathead__banner {
        /* نسبة بانر رونكس نفسها 1920×822، مع سقف يمنع ابتلاع الشاشة */
        aspect-ratio: 1920 / 822;
        max-block-size: 70vh;
    }

    .rx-cathead__inner {
        padding-inline: var(--sp-8);
    }

    .rx-cathead__title,
    .rx-cathead__title--over {
        font-size: 40px;
        line-height: 1.12;
    }

    .rx-cathead__title--over {
        max-width: 24ch;
    }
}

@media (min-width: 1400px) {
    .rx-cathead__desc {
        font-size: 18px;
        line-height: 24px;
    }
}

/* ══ تقليل الحركة ════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .rx-cathead__img,
    .rx-cathead__more,
    .rx-cathead__more .mdi,
    .rx-cathead__crumb a {
        transition: none;
    }

    .rx-cathead__banner:hover .rx-cathead__img {
        transform: none;
    }
}


/* ── footer.css ────────────────────────────────────────────── */
/* ==========================================================================
   rx/footer.css — فوتر رونكس متعدّد الأعمدة مع كتلة المكتب

   القيم مأخوذة حرفياً من ثلاثة ملفات في data/theme-assets/reference/css:

     • _componentfooter.min.css   (section "componen-footer-form-links")
         حشوة القسم        64px 16px 32px → 64px 24px 32px ≥768 → 64px 0 34px ≥1400
         صفّ الشعار        flex + space-between، حشوة سفلية 32px،
                           حدّ سفلي 1px solid rgba(94,94,94,.3) وهامش 32px ≥992
         رأس الأكورديون    ارتفاع 76px، وحدّ 1px solid #3d3d3d لكل عنصر
         علامة + / −       24px و27px بانتقال .5s
         عنوان العمود      700 وزن، 14px/20px، تباعد .1px، هامش سفلي 16px ≥992
         الروابط           400 وزن، 12px، تباعد .18px، حشوة سفلية 5px ≥992
         كتلة الروابط      حدّ علوي 2px solid #cdcccc وحشوة علوية 32px ≥992
         الزرّ الداكن       #313131 → #484848 عند التحويم، حشوة 8px 16px،
                           انتقال .3s، وظل 0 1px 3px 1px rgba(0,0,0,.15),
                           0 1px 2px 0 rgba(0,0,0,.3)

     • _componentaddress.min.css  (section "component-footer-Address")
         حشوة القسم        32px 16px، وكتلة العنوان الداخلية 34px 0
         عنوان الكتلة      700 وزن 14px/20px بحشوة سفلية 19px
         .address          حشوة 21px 0
         .tel-add          حشوة علوية 25px → 11px ≥768، والأول صفر
         نصّ العنوان        400 وزن 12px/16px بهامش علوي 9px
         الأيقونة          14px بهامش داخلي 17.8px بعدها
         أيقونات التواصل    40×40 وانتقال .3s (المرجع: filter رمادي يزول بالتحويم)
         الشريط السفلي     حدّ علوي 2px، ونصّه 400 وزن 12px/22px

     • _component3columnimageadresslink.min.css  (بطاقات المكاتب)
         نصف القطر 4px (‎.custom-border-radius من custom.min.css)
         والحدّ السفلي الأحمر ‎#a30000 = ‎--brand-darker عند التحويم

   القياسات كلها من المرجع كما هي؛ التبديل الوحيد هو الخلفية الداكنة
   ‎--bg-dark بدل الأبيض، فكل رمادي فاتح فيه بُدّل بمقابله على الداكن:
     نصّ الروابط ‎#3d3d3d → rgba(255,255,255,.72)   الحدود ‎#3d3d3d → rgba(255,255,255,.12)
     نصّ الشريط ‎#717171 → ‎--ink-4                  خلفية الشريط ‎#f9f9f9 → ‎#161616

   الاتجاه: كل الخصائص منطقية (inline-start/end و text-align:start)، ولا
   transform أفقي بإشارة ثابتة — الدوران في علامة + / − عمودي ومحايد الاتجاه.
   ========================================================================== */

.rx-footer {
    --rx-ft-radius: 4px;                        /* .custom-border-radius */
    --rx-ft-link: rgba(255, 255, 255, .72);
    --rx-ft-rule: rgba(255, 255, 255, .12);     /* بديل #3d3d3d على الداكن */
    --rx-ft-rule-soft: rgba(255, 255, 255, .08);/* بديل rgba(94,94,94,.3) */
    --rx-ft-bottom-bg: #161616;                 /* بديل #f9f9f9 */

    margin-block-start: var(--sp-6);
    background: var(--bg-dark);
    color: var(--rx-ft-link);
    font-family: var(--font);
    font-size: 14px;
    line-height: 22px;
}

.rx-footer a {
    color: inherit;
    text-decoration: none;
}

/* ── الحاوية وحشوة القسم — _componentfooter.min.css ───────────────────── */

.rx-footer__inner {
    max-width: var(--container);
    margin-inline: auto;
}

.rx-footer__main {
    padding-block: 64px 32px;
    padding-inline: var(--sp-4);
}

/* ── الشبكة ───────────────────────────────────────────────────────────── */
/* المرجع يبقي الأعمدة مكدّسة (col-12) حتى 992px ثم يفتحها (col-lg)، ونسبها
   هناك: عمود النموذج ‎col-lg-4 وثلاثة أعمدة روابط متساوية. عندنا عمود الهوية
   وعمود المكتب هما العريضان لأن العنوان ودوام العمل نصّ طويل. */

.rx-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* ── العمود ١: الهوية ─────────────────────────────────────────────────── */

.rx-footer__brand {
    padding-block-end: var(--sp-5);
}

/* الشعار على لوح أبيض: شعار الوكيل قد يحمل نصاً داكناً فيختفي على الداكن.
   نصف القطر 4px هو نفسه ‎.custom-border-radius في custom.min.css. */
.rx-footer__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 150px;             /* يحجز مكان الشعار: أبعاده من اللوحة */
    background: #fff;
    border-radius: var(--rx-ft-radius);
    padding: 10px var(--sp-3);
    transition: box-shadow .3s ease;
}

.rx-footer__logo:hover {
    /* ظلّ الزرّ الداكن نفسه في _componentfooter.min.css */
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
}

.rx-footer__logo img {
    display: block;
    inline-size: auto;
    block-size: 40px;
    max-inline-size: 100%;
    object-fit: contain;
}

.rx-footer__tagline {
    margin: 0;
    padding-block-start: var(--sp-4);
    max-inline-size: 46ch;
    color: var(--rx-ft-link);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: start;
}

/* عنوان «تابعنا»: نفس معالجة عنوان العمود في المرجع (700 وزن، 14px/20px) */
.rx-footer__sociallabel {
    margin: 0;
    padding-block: var(--sp-5) var(--sp-3);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .1px;
}

/* ── أيقونات التواصل — 40×40 وانتقال .3s كما في _componentaddress ─────── */

.rx-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.rx-footer__socialbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--rx-ft-rule);
    border-radius: var(--rx-ft-radius);
    color: var(--rx-ft-link);
    font-size: 20px;
    line-height: 1;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

/* المرجع يلوّن الأيقونة عند التحويم (filter يزول)؛ هنا اللون هو لون العلامة */
.rx-footer__socialbtn:hover,
.rx-footer__socialbtn:focus-visible {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.rx-footer__socialbtn--wa:hover,
.rx-footer__socialbtn--wa:focus-visible {
    background: #25d366;
    border-color: #25d366;
    color: #0b2f19;
}

/* ── الأعمدة ٢-٤: رأس أكورديون + لوح ──────────────────────────────────── */
/* تحت 992px يتحوّل كل عمود إلى عنصر أكورديون: حدّ سفلي 1px، رأس بارتفاع 76px.
   المرجع يضع الحدّ العلوي على الأول فقط (first-class) — نفعل ذلك بـ:first-of-type
   على الأعمدة، فيظهر خطّ واحد بين كل عنصرين. */

.rx-footer__col {
    border-block-start: 1px solid var(--rx-ft-rule);
}

/* المرجع يغلق آخر عنصر أكورديون بحدّ سفلي أيضاً (accordion-item) */
.rx-footer__col:last-of-type {
    border-block-end: 1px solid var(--rx-ft-rule);
}

.rx-footer__coltitle {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
}

.rx-footer__colbtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    inline-size: 100%;
    min-block-size: 76px;               /* ارتفاع رأس الأكورديون في المرجع */
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .1px;
    text-align: start;
    cursor: pointer;
}

.rx-footer__colbtntext {
    display: block;
}

/* علامة + / − : خطّان متعامدان، ويختفي العمودي عند الفتح بانتقال .5s كالمرجع.
   الدوران عمودي فلا علاقة له باتجاه الصفحة. */
.rx-footer__pm {
    position: relative;
    display: none;
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
    color: currentColor;
}

.rx-footer__pm::before,
.rx-footer__pm::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform .5s ease, opacity .5s ease;
}

.rx-footer__pm::after {
    transform: translateY(-50%) rotate(90deg);
}

.rx-footer__col.is-open .rx-footer__pm::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
}

.rx-footer__panel {
    padding-block-end: var(--sp-5);
}

/* ── قوائم الروابط — 12px وتباعد .18px كما في المرجع ──────────────────── */

.rx-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rx-footer__link {
    display: block;
    padding-block: 6px;
    color: var(--rx-ft-link);
    font-weight: 400;
    font-size: 13px;                    /* المرجع 12px — رُفع درجة لوضوح العربية */
    line-height: 20px;
    letter-spacing: .18px;
    text-align: start;
    transition: color .3s ease;
}

.rx-footer__link:hover,
.rx-footer__link:focus-visible {
    color: #fff;
}

/* ── كتلة المكتب — _componentaddress.min.css ──────────────────────────── */

.rx-footer__office {
    padding-block: 0;
}

.rx-footer__officename {
    margin: 0;
    padding-block-end: 19px;            /* حشوة عنوان الكتلة في المرجع */
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
}

/* .tel-add : حشوة علوية 25px على الجوال و11px من 768px، والأول صفر */
.rx-footer__addr {
    display: flex;
    align-items: flex-start;
    padding-block-start: 25px;
}

.rx-footer__addr:first-of-type {
    padding-block-start: 0;
}

/* الأيقونة 14px والهامش بعدها 17.8px — القيمتان من المرجع حرفياً */
.rx-footer__addricon {
    flex: 0 0 auto;
    margin-inline-end: 17.8px;
    color: var(--brand);
    font-size: 14px;
    line-height: 16px;
    margin-block-start: 2px;
}

.rx-footer__addrbody {
    display: block;
    min-inline-size: 0;
}

.rx-footer__addrlabel {
    display: block;
    color: var(--ink-4);
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .18px;
}

.rx-footer__addrval,
.rx-footer__addrtext {
    display: block;
    margin-block-start: 3px;
    color: var(--rx-ft-link);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    overflow-wrap: anywhere;
}

/* أرقام الهاتف تحمل dir="ltr" في القالب حتى تُقرأ بترتيبها الصحيح. لكن
   text-align:start داخل عنصرٍ اتجاهه ltr يعني «يسار» — أي الطرف البعيد في
   الصفحة العربية، وهو عكس المقصود (وهو أصلاً القيمة الابتدائية فلا يفعل
   شيئاً). match-parent يحسب start على اتجاه الأب: يمين في rtl ويسار في ltr،
   فتلتصق القيمة ببداية العمود بينما تبقى أرقامها ltr. القيمة الأولى احتياط
   للمتصفحات التي لا تعرف match-parent. */
.rx-footer__addrval[dir="ltr"] {
    text-align: start;
    text-align: match-parent;
}

.rx-footer__addrval:hover,
.rx-footer__addrval:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── الشريط السفلي — border-top 2px ونصّ 12px/22px كما في المرجع ───────── */

.rx-footer__bottom {
    background: var(--rx-ft-bottom-bg);
    border-block-start: 2px solid var(--rx-ft-rule);
}

.rx-footer__bottominner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
    padding-inline: var(--sp-4);
}

.rx-footer__copy,
.rx-footer__legal {
    margin: 0;
    color: var(--ink-4);
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    text-align: start;
}

.rx-footer__mark {
    color: #fff;
    font-weight: 700;
}

.rx-footer__mark sup {
    font-size: .65em;
    vertical-align: super;
    line-height: 0;
}

/* ==========================================================================
   الأكورديون: يعمل فقط بعد أن يضيف السكربت rx-footer--acc على الجذر، فبلا
   جافاسكربت تبقى كل الألواح مفتوحة ولا يظهر زرّ + / − أصلاً.
   ========================================================================== */

@media (max-width: 991.98px) {
    .rx-footer--acc .rx-footer__pm {
        display: block;
    }

    /* اللوح المطويّ صفر الارتفاع لكنه يبقى في الصفحة: بلا visibility تظلّ
       روابطه قابلة للتركيز بالمفتاح ويقرؤها قارئ الشاشة داخل قسم «مغلق».
       التأخير 0.35s يبقيها مرئية طوال زمن الطيّ فلا تختفي فجأة. */
    .rx-footer--acc .rx-footer__panel {
        display: grid;
        grid-template-rows: 0fr;
        padding-block-end: 0;
        visibility: hidden;
        transition: grid-template-rows .35s ease, padding-block-end .35s ease,
                    visibility 0s linear .35s;
    }

    .rx-footer--acc .rx-footer__panel > * {
        min-block-size: 0;
        overflow: hidden;
    }

    .rx-footer--acc .rx-footer__col.is-open > .rx-footer__panel {
        grid-template-rows: 1fr;
        padding-block-end: var(--sp-5);
        visibility: visible;
        transition-delay: 0s;
    }
}

/* ==========================================================================
   ≥768px — حشوة القسم 24px، و.tel-add تنزل إلى 11px كما في المرجع
   ========================================================================== */

@media (min-width: 768px) {
    .rx-footer__main {
        padding-inline: var(--sp-5);
    }

    .rx-footer__bottominner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: var(--sp-5);
        padding-inline: var(--sp-5);
    }

    .rx-footer__addr {
        padding-block-start: 11px;
    }
}

/* ==========================================================================
   ≥992px — المرجع يفكّ الأكورديون هنا: تُلغى الحدود، ويصير الرأس عنواناً لا
   زرّاً (pointer-events:none)، وتظهر الأعمدة الأربعة جنباً إلى جنب.
   ========================================================================== */

@media (min-width: 992px) {
    .rx-footer__grid {
        grid-template-columns:
            minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
        column-gap: var(--sp-6);
        align-items: start;
    }

    /* عمود التصنيفات يسقط كلّه حين تكون شجرة القائمة فارغة، فتبقى ثلاثة
       أبناء في شبكةٍ من أربعة مسارات: المسار الرابع يظلّ فارغاً فينزوي
       الفوتر كلّه إلى جهة واحدة. المتصفحات التي لا تعرف :has تتجاهل
       القاعدة وتبقى على السلوك السابق. */
    .rx-footer__grid:not(:has(> :nth-child(4))) {
        grid-template-columns:
            minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.5fr);
    }

    .rx-footer__brand {
        padding-block-end: 0;
        padding-inline-end: var(--sp-5);
    }

    .rx-footer__col,
    .rx-footer__col:last-of-type {
        border-block-start: 0;
        border-block-end: 0;
    }

    .rx-footer__colbtn {
        min-block-size: 0;
        margin-block-end: var(--sp-4);   /* هامش عنوان العمود في المرجع */
        pointer-events: none;
        cursor: default;
    }

    .rx-footer__panel {
        padding-block-end: 0;
    }

    .rx-footer__link {
        padding-block: 0 5px;            /* حشوة الرابط السفلية في المرجع */
    }

    /* المرجع يفصل كتلة روابط الفوتر بحدّ علوي 2px — هنا يفصل عمود المكتب
       عن باقي الأعمدة بخطّ رفيع رأسي بدل الأفقي، بنفس منطق الفصل البصري */
    .rx-footer__col--office {
        padding-inline-start: var(--sp-5);
        border-inline-start: 1px solid var(--rx-ft-rule-soft);
    }
}

/* ==========================================================================
   ≥1200px — الحاوية تبلغ عرضها الأقصى فتُلغى حشوة الجوانب تدريجياً
   (المرجع: 64px 30px ثم 64px 0 عند 1400px)
   ========================================================================== */

@media (min-width: 1200px) {
    .rx-footer__main {
        padding-inline: var(--sp-6);
        padding-block: 64px 34px;
    }

    .rx-footer__bottominner {
        padding-inline: var(--sp-6);
    }

    .rx-footer__grid {
        column-gap: var(--sp-7);
    }
}

/* ── إبراز التركيز: حلقة فاتحة تُرى على الخلفية الداكنة ──────────────── */

.rx-footer a:focus-visible,
.rx-footer button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: var(--rx-ft-radius);
}

/* ── تقليل الحركة ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rx-footer__panel,
    .rx-footer__pm::before,
    .rx-footer__pm::after,
    .rx-footer__link,
    .rx-footer__logo,
    .rx-footer__socialbtn {
        transition: none;
    }
}

/* ── الطباعة: الفوتر الداكن يستهلك الحبر بلا فائدة ────────────────────── */

@media print {
    .rx-footer {
        display: none;
    }
}


/* ── hero.css ────────────────────────────────────────────── */
/* ==========================================================================
   rx/hero.css — سلايدر الواجهة الرئيسية
   المرجع: ronixtools.com — section.componentHomeSliderStream.curveBtn
   والقيم من data/theme-assets/reference/css/_componenthomesliderstream.min.css
     • صورة الشريحة 1920×720
     • كتلة النص padding 32/16 → 32/32 عند ≥992px
     • العنوان 700 وزن، 26/28 → 34/40 عند ≥1400px
     • الوصف 16/22 وهامش علوي 16px
     • الزر padding 8px → 8px 16px عند ≥576px، خط 14/20، انتقال .3s
       وظل التحويم 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px 0 rgba(0,0,0,.3)
     • أسهم التنقّل 40×40 خلفية بيضاء ونصف قطر 4px (صنف curveBtn)
       بإزاحة 16px عن الحافة → 64px عند ≥1200px
     • النقاط 10×10 دائرية (owl.theme.default)

   الاتجاه: كل الخصائص منطقية. إشارة الإزاحة الأفقية وزاوية التدرّج تُشتقّان
   من المتغيّر --rx-hero-sign الذي يضبطه القالب من isRTL (‎1 للـ LTR و‎-1 للـ RTL).
   ========================================================================== */

.rx-hero {
    --rx-hero-sign: 1;
    --rx-hero-i: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg-dark);
    font-family: var(--font);
}

/* ── المسار والشرائح ──────────────────────────────────────────────────── */

.rx-hero__viewport {
    position: relative;
    overflow: hidden;
}

.rx-hero__track {
    display: flex;
    align-items: stretch;
    will-change: transform;
    /* السحب الأفقي لنا والتمرير العمودي للصفحة — بدونها يلتقط المتصفّح
       الإيماءة ويُطلق pointercancel فلا يعمل السحب على الهاتف إطلاقاً */
    touch-action: pan-y pinch-zoom;
    /* الإشارة تأتي من القالب، فلا اتجاه مثبّت هنا */
    transform: translateX(calc(var(--rx-hero-i, 0) * var(--rx-hero-sign, 1) * -100%));
    transition: transform .6s cubic-bezier(.25, .46, .45, .94);
}

.rx-hero__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
}

.rx-hero__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--ink);
    overflow: hidden;
}

.rx-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* تعتيم متدرّج من جهة البداية ومن الأسفل ليبقى النص مقروءاً فوق أي صورة */
.rx-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(15, 15, 17, .74) 0%,
            rgba(15, 15, 17, .30) 44%,
            rgba(15, 15, 17, 0) 74%),
        linear-gradient(calc(var(--rx-hero-sign, 1) * 90deg),
            rgba(15, 15, 17, .80) 0%,
            rgba(15, 15, 17, .46) 36%,
            rgba(15, 15, 17, 0) 70%);
}

/* ── كتلة النص ────────────────────────────────────────────────────────── */

.rx-hero .rx-hero__panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    padding-block: var(--sp-5) var(--sp-7);
    padding-inline: var(--sp-4);
}

.rx-hero__box {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    text-align: start;
}

.rx-hero__eyebrow,
.rx-hero__title,
.rx-hero__text,
.rx-hero__cta {
    pointer-events: auto;
}

.rx-hero__eyebrow {
    display: inline-block;
    margin-block-end: var(--sp-3);
    padding-block: var(--sp-1);
    padding-inline: var(--sp-3);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .02em;
}

.rx-hero__title {
    margin: 0;
    max-width: 22ch;
    color: #fff;
    font-weight: 700;
    font-size: clamp(26px, 1.1rem + 2vw, 40px);
    line-height: 1.18;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

.rx-hero__text {
    margin-block: var(--sp-4) 0;
    max-width: 56ch;
    color: rgba(255, 255, 255, .90);
    font-size: clamp(15px, .82rem + .38vw, 18px);
    line-height: 1.5;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* الزر المنحني — curveBtn */
.rx-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-start: var(--sp-5);
    padding-block: var(--sp-2);
    padding-inline: var(--sp-4);
    border-radius: var(--r);
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: background .3s ease, box-shadow .3s ease;
}

.rx-hero__cta .mdi {
    font-size: 18px;
    line-height: 1;
}

.rx-hero__cta:hover {
    background: var(--brand-dark);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
}

.rx-hero__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ── الأسهم ───────────────────────────────────────────────────────────── */

.rx-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--ink-3);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: .92;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.rx-hero__nav:hover {
    background: var(--brand);
    color: #fff;
    opacity: 1;
}

.rx-hero__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.rx-hero__nav--prev { inset-inline-start: var(--sp-4); }
.rx-hero__nav--next { inset-inline-end: var(--sp-4); }

/* ── النقاط ───────────────────────────────────────────────────────────── */

.rx-hero__dots {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--sp-4);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    pointer-events: none;
}

.rx-hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    cursor: pointer;
    pointer-events: auto;
    transition: width .25s ease, background .25s ease;
}

.rx-hero__dot:hover { background: rgba(255, 255, 255, .85); }

.rx-hero__dot.is-active {
    width: 28px;
    background: var(--brand);
}

.rx-hero__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ── اللوحة البديلة قبل رفع البانرات ──────────────────────────────────── */

.rx-hero--fallback {
    background:
        radial-gradient(120% 130% at 50% 0%,
            rgba(237, 28, 36, .34) 0%,
            rgba(237, 28, 36, 0) 58%),
        linear-gradient(calc(var(--rx-hero-sign, 1) * 135deg),
            var(--ink) 0%,
            #2b0e11 46%,
            var(--brand-darker) 100%);
}

/* خصوصية أعلى من قواعد اللوحة داخل نقاط التوقّف حتى لا تُلغى حشواتها */
.rx-hero .rx-hero__panel.rx-hero__panel--solo {
    position: relative;
    inset: auto;
    align-items: center;
    min-height: clamp(300px, 40vw, 480px);
    pointer-events: auto;
    padding-block: var(--sp-7);
}

/* ── نقاط التوقّف ─────────────────────────────────────────────────────── */

@media (min-width: 576px) {
    .rx-hero__cta {
        padding-inline: var(--sp-5);
    }
}

@media (min-width: 768px) {
    .rx-hero__media { aspect-ratio: 16 / 9; }

    .rx-hero .rx-hero__panel {
        align-items: center;
        padding-block: var(--sp-6);
        padding-inline: var(--sp-6);
    }

    .rx-hero__dots { inset-block-end: var(--sp-5); }
}

@media (min-width: 1200px) {
    .rx-hero__media { aspect-ratio: 1920 / 720; }

    .rx-hero .rx-hero__panel { padding-inline: var(--sp-8); }

    .rx-hero__nav--prev { inset-inline-start: var(--sp-8); }
    .rx-hero__nav--next { inset-inline-end: var(--sp-8); }
}

/* ── تقليل الحركة ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rx-hero__track,
    .rx-hero__cta,
    .rx-hero__nav,
    .rx-hero__dot {
        transition: none;
    }
}


/* ── product-rail.css ────────────────────────────────────────────── */
/* ==========================================================================
   RX / PRODUCT RAIL  —  .rx-rail
   شريط المنتجات الأفقي، بديل owl.carousel في قسم رونكس
   "componentProductSlider4Col". القيم الحقيقية مأخوذة من:

     _componentproductslider4col.min.css
        • حشوة القسم 32px عمودياً و16px أفقياً (‎padding:32px 0 32px 16px‎
          ثم ‎32px 16px‎ من 576px)
        • ترويسة القسم: وزن 700 وحشوة سفلية 16px، ومحاذاة سفلية للأدوات
          (‎.title-btn.active-nav .component-header{align-items:end}‎)
        • عنوان h2: سلّم typo-3break هو المطبَّق هنا (انظر أسفله)،
          لا الزوج ‎26/34‎ الخاصّ بهذا الملف
        • مسار المنتجات ‎.products-wrap{padding:10px 0}‎
        • البطاقة: إطار ‎1px solid rgba(94,94,94,.15)‎، انتقال ‎.6s‎،
          وعند المرور يتلوّن الحدّ السفلي بالأحمر ‎#bf0000‎ (‎--brand-dark‎)
        • حشوة الصورة/المعلومات 8px ثم 16px من 576px
          (نصف قطر البطاقة يأتي من ‎.product-card‎ في shop.css، لا من هنا)
        • الأسهم: مربّع 40×40 بخلفية بيضاء، وترتيبها في نهاية السطر
          (في الأصل ‎.owl-nav‎ مثبّتة بإزاحة 16px عن حافة النهاية ومحاذاة
          إلى النهاية — أُعيدت هنا بخصائص منطقية داخل ترويسة القسم)
     custom.min.css
        • ‎.curvebtn‎ يجعل نصف قطر زرّ السهم 4px، والمسافة بين السهمين 10px
     owl.theme.default.min.css
        • السهم المعطّل ‎opacity:.5;cursor:default‎
     _componenttitlea.min.css
        • لون العنوان الرمادي الداكن ورابط القسم بلون ‎#a30000‎ (‎--brand-darker‎)
     typo-3break.min.css
        • سلّم h2: ‎24 → 26 (768px) → 32 (1200px)‎ — مُنفَّذ بـ clamp()

   الاتجاه: لا خاصية فيزيائية واحدة هنا. التمرير الأفقي أصلي (‎overflow-x‎)
   فيعمل في rtl وltr بلا انعكاس، وإشارة scrollBy تأتي من القالب.
   ========================================================================== */

.rx-rail {
    /* عدد البطاقات الظاهرة والفاصل بينها — يتغيّران عند نقاط التوقّف */
    --rx-rail-cols: 1.65;
    --rx-rail-gap: var(--sp-3);

    background: var(--bg);
    padding-block: var(--sp-6);
    font-family: var(--font);
}

.rx-rail--soft { background: var(--bg-soft); }

.rx-rail__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* ── ترويسة القسم ─────────────────────────────────────────────────────── */

.rx-rail__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-block-end: var(--sp-4);
}

.rx-rail__headtext { min-width: 0; }

.rx-rail__title {
    margin: 0;
    /* h2: 24px ← 26px عند 768px ← 32px عند 1200px */
    font-size: clamp(24px, 15.33px + 1.39vw, 32px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink-2);
    text-align: start;
}

.rx-rail__sub {
    margin: var(--sp-1) 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
    text-align: start;
}

.rx-rail__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-inline-start: auto;
}

/* رابط «عرض الكل» — لون رونكس ‎#a30000‎ */
.rx-rail__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--brand-darker);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t-fast);
}

.rx-rail__more:hover,
.rx-rail__more:focus-visible { color: var(--brand); }

.rx-rail__more .mdi { font-size: 18px; line-height: 1; }

/* ── الأسهم ───────────────────────────────────────────────────────────── */

.rx-rail__nav {
    display: flex;
    align-items: center;
    gap: 10px;                       /* المسافة بين السهمين في الأصل 10px */
}

.rx-rail__nav[hidden] { display: none; }

.rx-rail__arrow {
    width: 40px;                     /* ‎.owl-nav button{width:40px;height:40px}‎ */
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);      /* ‎.curvebtn‎ يستدير 4px؛ هنا رمز النظام ‎--r-sm‎ (3px) */
    color: var(--ink-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.rx-rail__arrow:hover:not(:disabled) {
    color: var(--brand);
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.rx-rail__arrow:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.rx-rail__arrow:disabled {
    opacity: .5;                     /* ‎.owl-nav .disabled{opacity:.5}‎ */
    cursor: default;
}

.rx-rail__arrow .mdi { display: block; }

/* ── المسار ───────────────────────────────────────────────────────────── */

.rx-rail__scroller {
    display: flex;
    gap: var(--rx-rail-gap);
    padding-block: 10px;             /* ‎.products-wrap{padding:10px 0}‎ */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    /* إخفاء شريط التمرير مع بقاء التمرير بالعجلة ولوحة المفاتيح */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rx-rail__scroller::-webkit-scrollbar { width: 0; height: 0; display: none; }

.rx-rail__scroller:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.rx-rail__item {
    flex: 0 0 calc(
        (100% - (var(--rx-rail-cols) - 1) * var(--rx-rail-gap)) / var(--rx-rail-cols)
    );
    min-width: 0;
    scroll-snap-align: start;
}

/* البطاقة المشتركة داخل الشريط: ارتفاع موحّد + لمسة رونكس عند المرور */
.rx-rail__item > .product-card {
    height: 100%;
    border-color: rgba(94, 94, 94, .15);
    transition: border-color .6s ease, box-shadow var(--t);
}

.rx-rail__item > .product-card:hover {
    border-block-end-color: var(--brand-dark);
}

/* ── نقاط التوقّف ─────────────────────────────────────────────────────── */

@media (min-width: 576px) {
    .rx-rail { --rx-rail-cols: 2.4; --rx-rail-gap: var(--sp-4); }
}

@media (min-width: 768px) {
    .rx-rail { --rx-rail-cols: 3.2; }
    .rx-rail__head { flex-wrap: nowrap; }
    .rx-rail__sub { font-size: 16px; }
}

@media (min-width: 992px) {
    .rx-rail { --rx-rail-cols: 4; }   /* أربعة أعمدة كما في قسم رونكس الأصلي */
}

@media (prefers-reduced-motion: reduce) {
    .rx-rail__scroller { scroll-behavior: auto; }
    .rx-rail__item > .product-card { transition: none; }
}


/* ── showcase.css ────────────────────────────────────────────── */
/* ==========================================================================
   RX / SHOWCASE  —  .rx-showcase
   أشرطة العرض: صورة كبيرة وعمود نص بالتناوب. القيم من رونكس الحقيقية:

     _componenthalftextimageslide.min.css
        • حشوة القسم 32px/16px
        • عمود واحد مقلوب على الهاتف (الصورة فوق) وصفّ من 992px
        • حشوة عمود النص 32px 16px ← 32px من 768px ← 64px من 1400px
        • العنوان 20px/24px وزن 700 تباعد .03px ← 24px/26px تباعد .036px
        • النص 16px/22px تباعد .024px ← 18px/24px من 1400px
        • مسافة الرابط عن النص 16px، وانتقال .3s
        • تكبير الصورة عند المرور scale(1.03) بانتقال .3s
        • حركة الظهور owl-fade-zoom-in: شفافية 0→1 مع scale .98→1 في .5s
        • ظل المرور 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)

     _componentfullwidthimgtexttabslider.min.css
        • بطاقة الصورة+النص: overflow مقصوص على حاوية الصورة
        • عمود النص flex عمودي بتوزيع space-between والزر أسفله
        • مسافة الزر 16px ← 32px من 576px

     button-3break.min.css  (btn-lg + btn-filled-3break)
        • حشوة 8px 16px، نصف قطر 4px، وزن 600، حد 1px، انتقال .3s
        • قياس 14px ← 16px من 768px ← 18px من 1200px، والأيقونة 18px ← 22px
        • خلفية #a30000 (‎--brand-darker‎)، مرور #850000، ضغط #700000
          وهما درجتان بلا رمز في tokens.css فتُشتقّان بـ color-mix لا بلون مكتوب

     custom.min.css → نصف قطر البطاقة 4px (‎--r‎ الأقرب في النظام)

   الاتجاه: كل الخصائص منطقية. التناوب نفسه يتم بـ row-reverse وهو يتبع
   اتجاه العنصر، فينعكس صحيحاً في rtl بلا قاعدة مقابلة.
   ========================================================================== */

.rx-showcase {
    /* ارتفاع أدنى للصورة على الشاشة العريضة كي لا تنهار مع نصّ قصير */
    --rx-showcase-media-h: 340px;
    /* نسبة الصورة على الهاتف حيث تعلو النص */
    --rx-showcase-ratio: 16 / 10;

    background: var(--bg-soft);
    padding-block: var(--sp-6);
    font-family: var(--font);
}

.rx-showcase__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);

    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* ── الشريط الواحد ────────────────────────────────────────────────────── */

/* column-reverse: العنوان أولاً في شجرة المستند وقارئ الشاشة، والصورة
   أعلاه بصرياً — تماماً كما في parent-HalfTextImageSlide. */
.rx-showcase__row {
    display: flex;
    flex-direction: column-reverse;

    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

/* ── الصورة ───────────────────────────────────────────────────────────── */

.rx-showcase__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--rx-showcase-ratio);
    background: var(--bg-soft);
}

.rx-showcase__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.rx-showcase__row:hover .rx-showcase__img,
.rx-showcase__row:focus-within .rx-showcase__img {
    transform: scale(1.03);
}

/* لوحة بديلة حين لا صورة في المعرض: تدرّج شعاعي متمركز (لا يتغيّر بانعكاس
   الاتجاه) بلون العلامة، وأيقونة عدّة في وسطه. */
.rx-showcase__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 42%,
            var(--brand-light) 0%,
            var(--bg-soft) 58%,
            var(--bg-softer) 100%);
}

.rx-showcase__ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(237, 28, 36, .05) 0 1px,
        transparent 1px 14px);
}

.rx-showcase__ph .mdi {
    position: relative;
    font-size: 64px;
    line-height: 1;
    color: var(--brand);
    opacity: .5;
}

/* ── عمود النص ────────────────────────────────────────────────────────── */

.rx-showcase__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-4);

    padding-block: var(--sp-6);
    padding-inline: var(--sp-4);
}

.rx-showcase__body {
    min-width: 0;
}

.rx-showcase__title {
    margin: 0;
    /* 20px حتى 768px ثم يتدرّج إلى 24px عند 1400px — قيم المكوّن نفسه */
    font-size: clamp(20px, 15.14px + .633vw, 24px);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: .03px;
    color: var(--ink);
    text-align: start;
}

.rx-showcase__desc {
    margin: var(--sp-3) 0 0;
    /* 16px ← 18px عند 1400px، بارتفاع سطر 22/24 كما في النسخة الأصلية */
    font-size: clamp(16px, 13.57px + .316vw, 18px);
    line-height: 1.38;
    letter-spacing: .024px;
    color: var(--ink-2);
    text-align: start;
}

.rx-showcase__actions {
    display: flex;
}

/* ── الزر: btn-lg + btn-filled-3break ─────────────────────────────────── */

.rx-showcase__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);

    /* btn-lg-withIcon: الحشوة أضيق من جهة الأيقونة، والأيقونة تلي النص */
    padding-block: var(--sp-2);
    padding-inline-start: var(--sp-4);
    padding-inline-end: var(--sp-2);

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    text-align: center;

    color: #fff;
    background: var(--brand-darker);
    border: 1px solid var(--brand-darker);
    border-radius: var(--r-sm);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.rx-showcase__cta .mdi {
    font-size: 18px;
    line-height: 1;
}

.rx-showcase__cta:hover {
    /* #850000 في رونكس = ‎--brand-darker‎ بنسبة 82% فوق الأسود */
    background: color-mix(in srgb, var(--brand-darker) 82%, #000);
    border-color: color-mix(in srgb, var(--brand-darker) 82%, #000);
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
}

.rx-showcase__cta:active {
    /* #700000 = 69% */
    background: color-mix(in srgb, var(--brand-darker) 69%, #000);
    border-color: color-mix(in srgb, var(--brand-darker) 69%, #000);
    box-shadow: none;
}

.rx-showcase__cta:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── حركة الظهور (تُفعَّل من الجافاسكربت فقط) ─────────────────────────── */

.rx-showcase[data-rx-anim] .rx-showcase__row {
    opacity: 0;
    transform: scale(.98);
}

.rx-showcase[data-rx-anim] .rx-showcase__row.is-in {
    opacity: 1;
    transform: scale(1);
    transition: opacity .5s ease, transform .5s ease;
}

/* ══ 576px — مسافة الزر تتّسع كما في valueText-FullWidthImgTextTabSlider ══ */

@media (min-width: 576px) {
    .rx-showcase__text {
        gap: var(--sp-6);
    }
}

/* ══ 768px — حشوة عمود النص 32px من الجهتين ══════════════════════════════ */

@media (min-width: 768px) {
    .rx-showcase__inner {
        gap: var(--sp-6);
    }

    .rx-showcase__text {
        padding-inline: var(--sp-6);
    }

    .rx-showcase__cta {
        font-size: 16px;
    }
}

/* ══ 992px — العمودان جنباً إلى جنب، والتناوب يبدأ من هنا ════════════════ */

@media (min-width: 992px) {
    .rx-showcase__row {
        flex-direction: row;
        align-items: stretch;
    }

    /* row-reverse يتبع اتجاه العنصر، فيقلب الجهتين في ltr وrtl معاً */
    .rx-showcase__row--flip {
        flex-direction: row-reverse;
    }

    .rx-showcase__media,
    .rx-showcase__text {
        flex: 1 1 50%;
        min-width: 0;
    }

    .rx-showcase__media {
        aspect-ratio: auto;
        min-height: var(--rx-showcase-media-h);
    }
}

/* ══ 1200px ══════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
    .rx-showcase {
        --rx-showcase-media-h: 380px;
        padding-block: var(--sp-7);
    }

    .rx-showcase__cta {
        font-size: 18px;
    }

    .rx-showcase__cta .mdi {
        font-size: 22px;
    }
}

/* ══ 1400px — حشوة عمود النص 64px كما في النسخة الأصلية ══════════════════ */

@media (min-width: 1400px) {
    .rx-showcase__text {
        padding-block: var(--sp-8);
        padding-inline: var(--sp-8);
    }
}

/* ── تفضيل تقليل الحركة ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rx-showcase__img,
    .rx-showcase__cta {
        transition: none;
    }

    .rx-showcase__row:hover .rx-showcase__img,
    .rx-showcase__row:focus-within .rx-showcase__img {
        transform: none;
    }

    .rx-showcase[data-rx-anim] .rx-showcase__row {
        opacity: 1;
        transform: none;
    }
}


/* ── subcategory-list.css ────────────────────────────────────────────── */
/* ==========================================================================
   RX / SUBCATEGORY LIST  —  .rx-subcats
   شريط التصنيفات الفرعية في صفحة التصنيف، مبني على قيم رونكس الحقيقية من
   _componentnewsubcategorylist.min.css:

     .componentNewSubCategoryList{padding:32px 16px}      شريحة القسم
     .cf2f2f2                    → أرضية #f2f2f2          (‎--bg-soft‎)
     .row{margin:-4px} + .tool-box{padding:4px}           فاصل 8px (‎--sp-2‎)
     .inner-tool-box{background:#fff;padding:8px;
                     border-bottom:1px #fff → #bf0000}    الحدّ السفلي يحمرّ
     .img-wrap .tool-image{width:96px;height:96px;
                           margin-bottom:8px}
     .box-title p{color:#3d3d3d;font-size:16px;
                  line-height:20px;font-weight:400;
                  text-align:center}
     row-cols-2 / md-3 / lg-4 / xxl-5                     سلّم الأعمدة
     br-*-4 (custom.min.css)     → نصف قطر 4px            (‎--r-sm‎)
     الهاتف: .main-boxes-wrap{display:flex;overflow-x:auto}
             .tool-box{width:160px}                       شريط تمرير أفقي
             mobile-box-9/10 → صفّان ملفوفان

   كل الخصائص منطقية (inline-start/end) فيعمل القسم في rtl وltr بلا نسخة ثانية،
   والأعمدة والسعة القصوى معلنتان كمتغيّرين يقرأ السكربت أحدهما.
   ========================================================================== */

.rx-subcats {
    --rx-subcats-cols: 2;
    --rx-subcats-gap: var(--sp-2);   /* 8px — فاصل رونكس نفسه في كل المقاسات */
    --rx-subcats-cap: 0;             /* 0 = بلا قصّ (شريط تمرير أفقي) */

    background: var(--bg-soft);      /* شريحة #f2f2f2 عند رونكس */
    padding-block: var(--sp-6);      /* 32px */
    font-family: var(--font);
}

.rx-subcats__inner {
    position: relative;              /* مرجع مربّع الاختيار المخفيّ بصرياً */
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* ── ترويسة القسم ─────────────────────────────────────────────────────── */

.rx-subcats__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-block-end: var(--sp-4);
}

.rx-subcats__title {
    margin: 0;
    /* عنوان ثانوي تحت h1 الصفحة: 20px ← 24px عند 768 ← 26px عند 1200،
       أي بين سلّم h3 وسطر searchtitle (16/18px) عند رونكس. */
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink-2);
    text-align: start;
}

/* ── مفتاح «عرض الكل» ─────────────────────────────────────────────────────
   مربّع اختيار مخفيّ بصرياً + label: يعمل بلوحة المفاتيح وبلا جافاسكربت.
   ‎pointer-events:none‎ كي لا يلتقط النقر بدل الـ label، مع بقائه قابلاً
   للوصول بـ Tab. */

.rx-subcats__state {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.rx-subcats__more {
    display: none;                   /* يظهر من 768px فقط — انظر أدناه */
    align-items: center;
    gap: var(--sp-1);
    padding-block: 6px;
    padding-inline: var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--ink-2);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: border-color var(--t), color var(--t), background-color var(--t);
}

/* السكربت يُخفي المفتاح حين لا شيء مخفيّ — والسمة تسبق أي إظهار. */
.rx-subcats__more[hidden] { display: none; }

.rx-subcats__chev {
    font-size: 18px;
    line-height: 1;
    transition: transform var(--t);
}

.rx-subcats__more-close { display: none; }

.rx-subcats__state:checked ~ .rx-subcats__head .rx-subcats__more-open  { display: none; }
.rx-subcats__state:checked ~ .rx-subcats__head .rx-subcats__more-close { display: inline; }
.rx-subcats__state:checked ~ .rx-subcats__head .rx-subcats__chev { transform: rotate(180deg); }

.rx-subcats__state:focus-visible ~ .rx-subcats__head .rx-subcats__more {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (hover: hover) {
    .rx-subcats__more:hover {
        border-color: var(--brand);
        color: var(--brand-dark);
        background: var(--brand-light);
    }
}

/* ── الشبكة: على الهاتف شريط تمرير أفقي كما عند رونكس ──────────────────── */

.rx-subcats__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 160px;        /* .tool-box{width:160px} */
    gap: var(--rx-subcats-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    /* إخفاء شريط التمرير مع بقاء التمرير بالعجلة ولوحة المفاتيح — كما في
       ‎.componentNewSubCategoryList ::-webkit-scrollbar{height:0;width:0}‎ */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rx-subcats__grid::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* أكثر من ستّ بطاقات ⇒ صفّان ملفوفان أفقياً (mobile-box-9/10 عند رونكس) */
.rx-subcats--rows2 .rx-subcats__grid { grid-template-rows: repeat(2, 1fr); }

.rx-subcats__item {
    display: flex;
    min-width: 0;
    scroll-snap-align: start;
}

/* ── البطاقة ──────────────────────────────────────────────────────────── */

.rx-subcats__card {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    inline-size: 100%;
    padding: var(--sp-2);            /* .inner-tool-box{padding:8px} */
    background: var(--bg);
    border-radius: var(--r-sm);      /* رونكس: 4px */
    /* الحدّ موجود دائماً بلون الأرضية، فلا يتحرّك شيء عند المرور */
    border-block-end: 1px solid var(--bg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t), box-shadow var(--t);
}

.rx-subcats__card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.rx-subcats__media {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 96px;
    block-size: 96px;
    max-inline-size: 100%;
    margin-block-end: var(--sp-2);
}

.rx-subcats__icon {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    transition: transform var(--t);
}

.rx-subcats__fallback {
    font-size: 44px;
    line-height: 1;
    color: var(--ink-2);
    transition: transform var(--t), color var(--t);
}

.rx-subcats__name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: var(--ink-2);
    text-align: center;
    overflow-wrap: break-word;
    transition: color var(--t);
}

@media (hover: hover) {
    .rx-subcats__card:hover {
        border-block-end-color: var(--brand-dark);   /* رونكس: #bf0000 */
        box-shadow: var(--shadow-sm);
    }

    .rx-subcats__card:hover .rx-subcats__name,
    .rx-subcats__card:hover .rx-subcats__fallback {
        color: var(--brand-dark);
    }

    .rx-subcats__card:hover .rx-subcats__icon,
    .rx-subcats__card:hover .rx-subcats__fallback {
        transform: scale(1.03);
    }
}

/* ── الهاتف: القسم ينزلق حتى حافة الشاشة كما عند رونكس ─────────────────── */
/* .componentNewSubCategoryList{padding:32px 0 32px 16px} في نسخة الهاتف */

@media (max-width: 767.98px) {
    .rx-subcats__inner { padding-inline-end: 0; }
    .rx-subcats__head  { padding-inline-end: var(--sp-4); }
    .rx-subcats__grid  { padding-inline-end: var(--sp-4); }
}

/* ── من 768px: شبكة ملفوفة مقصوصة على ثلاثة صفوف ──────────────────────── */

@media (min-width: 768px) {
    .rx-subcats {
        --rx-subcats-cols: 3;
        --rx-subcats-cap: 9;         /* 3 أعمدة × 3 صفوف — يقرأها السكربت */
    }

    .rx-subcats__title { font-size: 24px; }

    .rx-subcats__more { display: inline-flex; }

    .rx-subcats__grid,
    .rx-subcats--rows2 .rx-subcats__grid {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-rows: none;
        grid-template-columns: repeat(var(--rx-subcats-cols), minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
        padding-inline-end: 0;
    }
}

/* القصّ: نطاق مغلق لكل مقاس كي لا يحتاج المقاس الأكبر إلى إلغاء ما قبله.
   الرقم في nth-child يساوي ‎--rx-subcats-cap‎ + 1 دائماً. */

@media (min-width: 768px) and (max-width: 991.98px) {
    .rx-subcats__state:not(:checked) ~ .rx-subcats__grid > .rx-subcats__item:nth-child(n + 10) {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .rx-subcats { --rx-subcats-cols: 4; --rx-subcats-cap: 12; }

    .rx-subcats__state:not(:checked) ~ .rx-subcats__grid > .rx-subcats__item:nth-child(n + 13) {
        display: none;
    }
}

@media (min-width: 1200px) {
    .rx-subcats { --rx-subcats-cols: 5; --rx-subcats-cap: 15; }

    .rx-subcats__title { font-size: 26px; }

    .rx-subcats__state:not(:checked) ~ .rx-subcats__grid > .rx-subcats__item:nth-child(n + 16) {
        display: none;
    }
}

/* ── تقليل الحركة ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rx-subcats__card,
    .rx-subcats__icon,
    .rx-subcats__fallback,
    .rx-subcats__name,
    .rx-subcats__more,
    .rx-subcats__chev {
        transition: none;
    }

    .rx-subcats__card:hover .rx-subcats__icon,
    .rx-subcats__card:hover .rx-subcats__fallback {
        transform: none;
    }
}


/* ── values.css ────────────────────────────────────────────── */
/* ==========================================================================
   rx/values.css — شريط الثقة (لماذا تشتري منّا) + الشريط الداكن

   المرجع: ronixtools.com
     • section-coreValues5Cards  →  css/_componentcorevalues5cards.min.css
         padding القسم 32px 16px
         نصف قطر البطاقة 4px، حشوتها 16/16/32 → 16/32/32 عند ≥1400px
         card-content حشوة علوية 16px
         العنوان 700 وزن 20px/24px → 24px/26px عند ≥1400px، حشوة سفلية 16px
         الوصف 16px/22px → 18px/24px عند ≥1400px
         تحويم: transform: scale(1.03) بانتقال .3s
         الفواصل: 4.5px لكل جهة (‎9px بين الأعمدة) و8px بين الصفوف
     • component-title-A  →  css/_componenttitlea.min.css
         h2 ‎26px/28px → 34px/40px عند ≥1400px، حشوة سفلية 16px،
         ومحاذاة وسطية عند ≥577px
     • component-technology-boxes  →  css/_componenttechnologyboxes.min.css
         padding القسم 32px 16px — والحشوة الأفقية 16px ثابتة كبقيّة مكوّنات
         rx حتى يصطفّ نصّ الشريط مع البطاقات فوقه
         كتلة النص padding 32px، العنوان 700 وزن 24px، الوصف 16px/22px
         الزر: خلفية #f9f9f9 وحشوة 8px 16px وانتقال .3s ونصف قطر 4px
         وظل التحويم 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px 0 rgba(0,0,0,.3)
     • مقياس الخط من typo-3break.min.css (h2 ‎24→26→32، h3 ‎20→24→28)

   الاتجاه: كل الخصائص منطقية (inline-start/end وtext-align:start)، ولا يوجد
   أي تحويل أفقي، فالتصميم نفسه يعمل في rtl وltr بلا قاعدة مقلوبة واحدة.
   ========================================================================== */

.rx-values {
    font-family: var(--font);
    background: var(--bg);
}

/* ── الحاوية ──────────────────────────────────────────────────────────── */

.rx-values__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-block: var(--sp-6);
    padding-inline: var(--sp-4);
}

/* ── ترويسة القسم — component-title-A ─────────────────────────────────── */

.rx-values__head {
    text-align: start;
    padding-block-end: var(--sp-5);
}

.rx-values__title {
    margin: 0;
    padding-block-end: var(--sp-4);
    color: var(--ink-2);
    font-weight: 700;
    font-size: clamp(24px, 1.1rem + 1.1vw, 32px);
    line-height: 1.15;
}

.rx-values__sub {
    margin: 0;
    max-width: 68ch;
    color: var(--ink-3);
    font-size: clamp(14px, .82rem + .25vw, 16px);
    line-height: 22px;
}

/* ── الشبكة — صفّ بطاقتين عريضتين + صفّ ثلاث بطاقات ───────────────────── */

.rx-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 8px بين الصفوف و9px بين الأعمدة، تماماً كهوامش 4.5px في الأصل */
    gap: var(--sp-2) 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── البطاقة — card-box ───────────────────────────────────────────────── */

.rx-values__card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding-block: var(--sp-4) var(--sp-6);
    padding-inline: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg);
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.rx-values__card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
}

/* البطاقتان الأعرض تحملان في الأصل صورة؛ وبلا مصدر صورة من اللوحة نستعيض
   عنها بتدرّج أحمر خفيف من ألوان العلامة نفسها. */
.rx-values__card--lead {
    background:
        radial-gradient(120% 160% at 50% 0%,
            var(--brand-light) 0%,
            var(--bg) 62%);
}

.rx-values__card--lead:hover {
    border-color: var(--brand);
}

/* ── الأيقونة — بديل icon-card ‎128×128 ───────────────────────────────── */

.rx-values__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    background: var(--brand-light);
    color: var(--brand);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.rx-values__icon .mdi {
    font-size: 30px;
    line-height: 1;
}

.rx-values__card:hover .rx-values__icon {
    transform: scale(1.03);
    background: var(--brand);
    color: #fff;
}

.rx-values__card--lead .rx-values__icon {
    width: 64px;
    height: 64px;
}

.rx-values__card--lead .rx-values__icon .mdi {
    font-size: 36px;
}

/* ── نصّ البطاقة — card-content ───────────────────────────────────────── */

.rx-values__body {
    min-width: 0;
    text-align: start;
}

.rx-values__cardtitle {
    margin: 0;
    padding-block-end: var(--sp-4);
    color: var(--ink-2);
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
}

.rx-values__cardtext {
    margin: 0;
    color: var(--ink-3);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: start;
}

/* ==========================================================================
   الشريط الداكن — component-technology-boxes
   ========================================================================== */

.rx-values__band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block-start: 3px solid var(--brand);
    background: var(--bg-dark);
    color: #fff;
}

/* لمعة حمراء متماثلة حول المحور، فلا تتعلّق بجهة النصّ */
.rx-values__band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 140% at 50% 0%,
            rgba(237, 28, 36, .30) 0%,
            rgba(237, 28, 36, 0) 62%);
}

/* الحشوة الأفقية على الكتلة الداخلية لا على الشريط، فتصطفّ سطور النصّ تماماً
   مع البطاقات فوقها (نفس max-width ونفس padding-inline في كل مكوّنات rx). */
.rx-values__bandinner {
    max-width: var(--container);
    margin-inline: auto;
    padding-block: var(--sp-6);
    padding-inline: var(--sp-4);
    text-align: start;
}

.rx-values__kicker {
    display: inline-block;
    margin-block-end: var(--sp-3);
    padding-block: var(--sp-1);
    padding-inline: var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .02em;
}

.rx-values__bandtitle {
    margin: 0;
    max-width: 24ch;
    color: #fff;
    font-weight: 700;
    font-size: clamp(20px, 1rem + .95vw, 28px);
    line-height: 1.22;
}

.rx-values__bandtext {
    margin-block: var(--sp-4) 0;
    max-width: 62ch;
    color: rgba(255, 255, 255, .82);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
}

/* ── الأزرار — performanceBtn ─────────────────────────────────────────── */

.rx-values__btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-block-start: var(--sp-5);
}

.rx-values__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding-block: var(--sp-2);
    padding-inline: var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.rx-values__btn .mdi {
    font-size: 18px;
    line-height: 1;
}

.rx-values__btn:hover {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
}

.rx-values__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.rx-values__btn--brand {
    background: var(--brand);
    color: #fff;
}

.rx-values__btn--brand:hover {
    background: var(--brand-dark);
}

.rx-values__btn--light {
    background: var(--bg-soft);
    color: var(--ink);
}

.rx-values__btn--light:hover {
    background: var(--bg);
}

/* ==========================================================================
   نقاط التوقّف
   ========================================================================== */

@media (min-width: 576px) {
    .rx-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rx-values__head {
        text-align: center;
    }

    .rx-values__sub {
        margin-inline: auto;
    }
}

@media (min-width: 768px) {
    /* ستّة أعمدة: بطاقتان بعرض 3 ثمّ ثلاث بطاقات بعرض 2 — وهو ما تفعله
       أعمدة col-sm-6 وcol-md-4 في الأصل. */
    .rx-values__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .rx-values__card {
        grid-column: span 2;
    }

    .rx-values__card--lead {
        grid-column: span 3;
    }
}

@media (min-width: 992px) {
    .rx-values__bandinner {
        padding-block: var(--sp-7);
    }
}

@media (min-width: 1200px) {
    .rx-values__inner {
        padding-block: var(--sp-7);
    }
}

@media (min-width: 1400px) {
    .rx-values__card {
        padding-block: var(--sp-4) var(--sp-6);
        padding-inline: var(--sp-6);
    }

    .rx-values__cardtitle {
        font-size: 24px;
        line-height: 26px;
    }

    .rx-values__cardtext {
        font-size: 18px;
        line-height: 24px;
    }
}

/* ── تقليل الحركة ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .rx-values__card,
    .rx-values__icon,
    .rx-values__btn {
        transition: none;
    }

    .rx-values__card:hover .rx-values__icon {
        transform: none;
    }
}