/* ==========================================================================
   هوية القالب المنقول — `site1/`

   تُحمَّل حين يكون هذا التصميم فعّالًا وحده (‏`layout.blade.php`‏)، فلا تحمل
   بقيّةُ التصاميم وزنَ ما لا تستعمله. وكلّها مقيَّدة بـ`[data-design="site1"]`
   فلا تتسرّب قاعدة إلى غيرها.

   **ولا Bootstrap ولا jQuery**: القالب الأصل يستوردهما ومعهما owl-carousel
   وflexslider وfont-awesome — نحو ميغابايت لأجل شكل. الشكل منقولٌ هنا بـCSS
   خالص على بنية المتجر القائمة، فلا تُعاد كتابة واجهةٍ تعمل.

   الألوان تأتي من متغيّرات التصميم (`_theme.blade.php`)، فما هنا شكلٌ لا لون:
   حوافّ حادّة، ورؤوس أقسام مخطَّطة، وشريط علويّ، وبحثٌ عريض.
   ========================================================================== */

/* ----------------------------- الشريط العلويّ ----------------------------- */

/* شريطٌ رفيع فوق الترويسة يحمل روابط الخدمة — أوّل ما يميّز القالب.
   `--site1-dark` مشتقّ من لون العناوين، فيتبع التصميم ولا يُثبَّت. */
[data-design="site1"] {
    --site1-dark: var(--heading, #314555);
    --site1-accent: var(--primary-btn, #2ed87b);
}

[data-design="site1"] .shop-topbar {
    background: #e9ebee;
    border-bottom: 1px solid var(--line, #e9ebee);
    font-size: 12.5px;
}

[data-design="site1"] .shop-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
}

[data-design="site1"] .shop-topbar ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-design="site1"] .shop-topbar a {
    color: var(--muted, #717f86);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-design="site1"] .shop-topbar a:hover { color: var(--site1-accent); }

[data-design="site1"] .shop-topbar svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* على الجوّال يبقى نصف واحد: الشريط زينةٌ لا تستحقّ سطرين من شاشة صغيرة */
@media (max-width: 700px) {
    [data-design="site1"] .shop-topbar-secondary { display: none; }
}

/* ------------------------------- الترويسة ------------------------------- */

/* حوافّ حادّة في كل شيء: `--radius` يأتي من محور «الاستدارة» في التصميم
   (`sharp`)، فما هنا تشديدٌ على مواضع لا تقرؤه. */
[data-design="site1"] .shop-header { border-bottom: 2px solid var(--site1-accent); }

[data-design="site1"] .shop-search input,
[data-design="site1"] .shop-search button { border-radius: 3px; }

[data-design="site1"] .shop-search button {
    background: var(--site1-accent);
    color: #fff;
    font-weight: 600;
}

/* --------------------------- رؤوس الأقسام --------------------------- */

/* **رأس القسم لوحةٌ لا سطر**: هذا أظهر ما يميّز القالب — عنوانٌ داخل لوحة
   بيضاء بشريط لون على طرفها، وزرّ «عرض الكل» حبّةً في الطرف المقابل. */
[data-design="site1"] .section-head {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e9ebee);
    border-inline-start: 3px solid var(--site1-accent);
    border-radius: 3px;
    padding: 13px 18px;
    margin-bottom: 22px;
}

[data-design="site1"] .section-head h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .2px;
}

[data-design="site1"] .section-head a {
    border: 1px solid var(--line, #e9ebee);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: .78rem;
    color: var(--muted, #717f86);
    transition: all .16s ease;
}

[data-design="site1"] .section-head a:hover {
    background: var(--site1-accent);
    border-color: var(--site1-accent);
    color: #fff;
}

/* رأس متوسّط بلا شريط جانبيّ: الشريط يدلّ على «ابدأ من هنا»، ولا معنى له
   حين يكون العنوان في الوسط */
[data-design="site1"] .section-head--center {
    border-inline-start: 1px solid var(--line, #e9ebee);
    border-top: 3px solid var(--site1-accent);
}

/* ---------------------------- بطاقة المنتج ---------------------------- */

[data-design="site1"] .product-card {
    border-radius: 3px;
    border: 1px solid var(--line, #e9ebee);
    background: var(--surface, #fff);
    transition: box-shadow .18s ease, transform .18s ease;
}

[data-design="site1"] .product-card:hover {
    box-shadow: 0 6px 22px rgba(49, 69, 85, .12);
    transform: translateY(-2px);
}

/* **شارة الخصم مربّعة في الزاوية** كما في القالب: كانت حبّة مستديرة.
   والأخضر للعرض، والأحمر لنفاد المخزون — اللون يحمل المعنى لا الشكل. */
[data-design="site1"] .product-tag {
    border-radius: 2px;
    background: var(--site1-accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 4px 9px;
}

[data-design="site1"] .product-tag--out { background: #ff3100; }

[data-design="site1"] .product-card-name {
    font-weight: 600;
    color: var(--site1-dark);
}

[data-design="site1"] .price-now {
    color: var(--site1-dark);
    font-weight: 700;
}

/* ------------------------------ الأزرار ------------------------------ */

[data-design="site1"] .btn-shop,
[data-design="site1"] .btn.btn-primary {
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* ------------------------ شريط «كيف يعمل المتجر» ------------------------ */

/* ثلاث خطوات بأيقونات القالب نفسها — الصور من `public/assets/site1/images`.
   **نصّها من ترجماتنا لا من القالب**: عبارات القالب عن كوبونات وصفقات، وهي
   كذبٌ في متجر منتجات. */
[data-design="site1"] .site1-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

[data-design="site1"] .site1-process-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e9ebee);
    border-radius: 3px;
    padding: 16px 18px;
}

[data-design="site1"] .site1-process-item img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 auto;
}

[data-design="site1"] .site1-process-title {
    display: block;
    font-weight: 700;
    color: var(--site1-dark);
    font-size: .95rem;
    margin-bottom: 2px;
}

[data-design="site1"] .site1-process-note {
    font-size: .8rem;
    color: var(--muted, #717f86);
    line-height: 1.6;
}

/* --------------------------- شريط الاشتراك --------------------------- */

/* في القالب لوحةٌ رماديّة تتوسّط عنوانها ونموذجها. ونموذج النشرة عندنا في
   التذييل — والتذييل تذييلنا بقرار المالك — فهذا الشريط دعوةٌ تقود إليه لا
   نموذج ثانٍ: نموذجان لشيء واحد يفترقان يومًا. */
[data-design="site1"] .site1-subscribe {
    background: #e9ebee;
    border-radius: 3px;
    padding: 34px 20px;
    text-align: center;
    margin: 8px 0 26px;
}

[data-design="site1"] .site1-subscribe h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--site1-dark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

[data-design="site1"] .site1-subscribe svg {
    width: 20px;
    height: 20px;
    color: var(--site1-accent);
}

[data-design="site1"] .site1-subscribe p {
    margin: 0 0 16px;
    color: var(--muted, #717f86);
    font-size: .88rem;
}

[data-design="site1"] .site1-subscribe .btn-shop { border-radius: 3px; }

/* ==========================================================================
   الترويسة والقوائم والواجهة — بنية القالب المنقول
   ========================================================================== */

/* ------------------------------ الترويسة ------------------------------ */

/* الشعار كبير إلى طرف البداية، والبحث يملأ ما بينه وبين الأيقونات. */
[data-design="site1"] .shop-header-row {
    gap: 20px;
    padding-block: 14px;
}

[data-design="site1"] .shop-logo img { height: 46px; }

[data-design="site1"] .shop-logo-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--site1-dark);
}

/* البحث صندوق واحد: حقل + منتقي فئة + زرّ أخضر، بلا فواصل بينها */
[data-design="site1"] .shop-search {
    flex: 1 1 420px;
    max-width: 620px;
    border: 1px solid var(--line, #e9ebee);
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}

[data-design="site1"] .shop-search input {
    border: 0;
    background: transparent;
    padding: 12px 14px;
}

[data-design="site1"] .site1-search-cat {
    border: 0;
    border-inline-start: 1px solid var(--line, #e9ebee);
    background: #fff;
    color: var(--muted, #717f86);
    font: inherit;
    font-size: .85rem;
    padding: 0 30px 0 12px;
    max-width: 170px;
    cursor: pointer;
    /* سهم القالب نفسه بدل سهم النظام */
    appearance: none;
    background-image: url('../site1/images/icons/select-arrow.png');
    background-repeat: no-repeat;
    background-position: left 12px center;
}

[dir="ltr"] [data-design="site1"] .site1-search-cat {
    padding: 0 12px 0 30px;
    background-position: right 12px center;
}

[data-design="site1"] .shop-search button {
    border-radius: 0;
    padding-inline: 22px;
    align-self: stretch;
}

@media (max-width: 860px) {
    [data-design="site1"] .site1-search-cat { display: none; }
}

/* -------------------------- شريط القوائم -------------------------- */

/* **شريط داكن بعرض الصفحة** والبند الفعّال أخضر مصمت — هذا ما يميّز
   القالب أكثر من لونه. والامتداد بالطريقة نفسها التي يمتدّ بها شريط
   العلامات: `100vw` منقوصًا منه شريط التمرير. */
[data-design="site1"] .shop-nav {
    --band: calc(100vw - var(--sbw, 0px));
    width: var(--band);
    margin-inline: calc(50% - (var(--band) / 2));
    background: var(--site1-dark);
    border: 0;
}

[data-design="site1"] .shop-nav > .shop-container {
    display: flex;
    align-items: stretch;
}

[data-design="site1"] .shop-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-design="site1"] .shop-nav a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0;
    transition: background .15s ease;
}

[data-design="site1"] .shop-nav a:hover { background: rgba(255, 255, 255, .08); }

[data-design="site1"] .shop-nav a.is-active {
    background: var(--site1-accent);
    color: #fff;
}

@media (max-width: 700px) {
    [data-design="site1"] .shop-nav a { padding: 12px 14px; font-size: .85rem; }
}

/* ---------------------- الواجهة: فئات + شريحة ---------------------- */

[data-design="site1"] .site1-hero {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

[data-design="site1"] .site1-cats {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e9ebee);
    border-radius: 3px;
    overflow: hidden;
}

[data-design="site1"] .site1-cats ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-design="site1"] .site1-cats li + li { border-top: 1px solid var(--line, #e9ebee); }

[data-design="site1"] .site1-cats a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: var(--text, #495c68);
    text-decoration: none;
    font-size: .9rem;
    transition: color .15s ease;
}

[data-design="site1"] .site1-cats a:hover { color: var(--site1-accent); }

/* حرف الاسم في مربّع أخضر باهت — بديلٌ صادق عن أيقونةٍ لا نعرفها */
[data-design="site1"] .site1-cat-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    background: rgba(46, 216, 123, .12);
    color: var(--site1-accent);
    font-weight: 800;
    font-size: .8rem;
}

[data-design="site1"] .site1-cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-design="site1"] .site1-cat-count {
    color: var(--muted, #717f86);
    font-size: .78rem;
}

[data-design="site1"] .site1-cats-all a {
    justify-content: center;
    background: #f7f8f9;
    font-weight: 700;
    color: var(--site1-dark);
}

[data-design="site1"] .site1-hero-main .banner-main {
    border-radius: 3px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

/* على الجوّال: الشريحة أوّلًا والفئات تحتها — الصورة تبيع لا القائمة */
@media (max-width: 900px) {
    [data-design="site1"] .site1-hero { grid-template-columns: minmax(0, 1fr); }
    [data-design="site1"] .site1-cats { order: 2; }
    [data-design="site1"] .site1-hero-main { order: 1; }
}

/* ==========================================================================
   تنقيح بعد ملاحظات المالك على الشاشة الحيّة
   ========================================================================== */

/* ------------------------- البحث: صفٌّ واحد ------------------------- */

/* كان الصندوق ينكسر سطرين والزرّ يطفو فوق الحقل: `.shop-search` في
   `shop.css` مبنيّ على موضع مطلق للزرّ، وإضافة منتقي الفئة أفسدته.
   هنا يُعاد بناؤه صفًّا مرنًا صريحًا — حقلٌ يتمدّد، ومنتقٍ بعرضه، وزرّ. */
[data-design="site1"] .shop-search {
    display: flex;
    align-items: stretch;
    position: static;
    padding: 0;
    height: 46px;
}

[data-design="site1"] .shop-search input {
    flex: 1 1 auto;
    min-width: 0;
    position: static;
    height: auto;
    padding: 0 14px;
    border: 0;
    background: transparent;
    font: inherit;
}

[data-design="site1"] .shop-search input:focus { outline: none; }

[data-design="site1"] .shop-search button {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding-inline: 20px;
    border: 0;
    border-radius: 0;
    display: grid;
    place-items: center;
}

[data-design="site1"] .shop-search button svg { width: 18px; height: 18px; }

[data-design="site1"] .site1-search-cat {
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
}

/* ------------------------- الشريط العلويّ ------------------------- */

[data-design="site1"] .shop-topbar-start b { color: var(--site1-dark); font-weight: 700; }

/* الطرفان يتبادلان الموضع حين يخلو أحدهما، فلا يترك الاسمُ الغائب فجوة */
[data-design="site1"] .shop-topbar-start:empty { display: none; }

/* ---------------------- بندا العروض والأكثر مبيعًا ---------------------- */

/* **لونان مختلفان عن بقيّة القائمة**: هذان ما يُقصد قصدًا، وبندٌ يشبه ما حوله
   لا يُلمَح. البرتقاليّ للعروض والأزرق للأكثر مبيعًا — لونان لا يتشابهان
   ولا يزاحمان أخضر البند الفعّال. */
[data-design="site1"] .shop-nav a.shop-nav-hot,
[data-design="site1"] .shop-nav a.shop-nav-top {
    gap: 7px;
    font-weight: 700;
}

[data-design="site1"] .shop-nav a.shop-nav-hot { background: #ff6a00; }
[data-design="site1"] .shop-nav a.shop-nav-hot:hover { background: #e65f00; }

[data-design="site1"] .shop-nav a.shop-nav-top { background: #0398db; }
[data-design="site1"] .shop-nav a.shop-nav-top:hover { background: #0286c3; }

[data-design="site1"] .shop-nav a.shop-nav-hot svg,
[data-design="site1"] .shop-nav a.shop-nav-top svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* ------------------------- لوحة الفئات ------------------------- */

/* صورة التصنيف تحلّ محلّ الحرف بالمقاس نفسه، فلا يتراقص الصفّ بين الاثنين */
[data-design="site1"] .site1-cat-icon--img {
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--line, #e9ebee);
}

/* «جميع التصنيفات» فعلٌ لا بندُ قائمة: خلفية داكنة تفصله عمّا فوقه */
[data-design="site1"] .site1-cats-all a {
    background: var(--site1-dark);
    color: #fff;
    font-weight: 700;
    padding-block: 13px;
}

[data-design="site1"] .site1-cats-all a:hover {
    background: var(--site1-accent);
    color: #fff;
}

/* ==========================================================================
   جولة تنقيح ثانية على الشاشة الحيّة
   ========================================================================== */

/* ---------------------------- زرّ البحث ---------------------------- */

/* **`transform` هو ما أزاح الزرّ**: النمط الأصلي يضعه بموضع مطلق ويرفعه
   `translateY(-50%)`، فإلغاء `position` وحده يترك الرفع قائمًا — فيطفو
   الزرّ فوق الصندوق ويبدو أصغر ممّا هو. يُلغى الرفع صراحةً. */
[data-design="site1"] .shop-search button {
    transform: none;
    top: auto;
    inset-inline-start: auto;
    min-width: 62px;
}

[data-design="site1"] .shop-search svg { width: 19px; height: 19px; }

/* ------------------------- حجم الأيقونات ------------------------- */

/* أكبر كما في القالب: أيقوناته نحو 30px بخطٍّ رفيع. والزرّ بلا خلفية
   دائرية — القالب يعرضها مجرّدة. */
[data-design="site1"] .shop-actions { gap: 14px; }

[data-design="site1"] .shop-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    color: var(--site1-dark);
}

[data-design="site1"] .shop-icon-btn svg { width: 27px; height: 27px; }
[data-design="site1"] .shop-icon-btn svg.icon-bag { width: 30px; height: 30px; }

[data-design="site1"] .shop-icon-btn:hover {
    background: transparent;
    color: var(--site1-accent);
}

/* --------------------- فاصل بين العروض والأكثر مبيعًا --------------------- */

/* بندان ملوّنان متلاصقان يُقرآن زرًّا واحدًا بلونين. فاصلٌ يسير يفصلهما
   ويُبقيهما مجموعةً واحدة أمام بقيّة القائمة. */
[data-design="site1"] .shop-nav a.shop-nav-hot { margin-inline-start: 8px; }
[data-design="site1"] .shop-nav a.shop-nav-top { margin-inline-start: 6px; }

/* ------------------------ روابط الشريط العلويّ ------------------------ */

/* على نمط القالب: أيقونة صغيرة ملوّنة قبل النصّ، ومسافة أوسع بين البنود. */
[data-design="site1"] .shop-topbar ul { gap: 22px; }

[data-design="site1"] .shop-topbar a {
    gap: 7px;
    font-weight: 500;
}

[data-design="site1"] .shop-topbar svg {
    width: 15px;
    height: 15px;
    color: var(--site1-accent);
}

[data-design="site1"] .shop-topbar-start svg { color: var(--site1-accent); }

@media (max-width: 700px) {
    [data-design="site1"] .shop-icon-btn { width: 38px; height: 38px; }
    [data-design="site1"] .shop-icon-btn svg { width: 23px; height: 23px; }
}

/* سهم اللغة الصغير: القالب يضعه بعد الاسم إشارةً إلى قائمة تُفتح. وعندنا
   لغتان فالضغطة تبدّل مباشرةً — يبقى السهم علامةً بصرية لا وعدًا بقائمة. */
[data-design="site1"] .shop-topbar-caret {
    width: 10px;
    height: 10px;
    color: var(--muted, #717f86);
    opacity: .7;
}

[data-design="site1"] .shop-topbar-lang { gap: 6px; }

/* ==========================================================================
   جولة تنقيح ثالثة: توزيع الترويسة والقائمة، وموضع شريط الخطوات
   ========================================================================== */

/* ------------------------ توزيع الترويسة ------------------------ */

/* **ثلاث كتل تملأ العرض**: الشعار في طرف البداية، والبحث يتمدّد بينهما،
   والأيقونات ملتصقة بطرف النهاية — كما في القالب. وبلا `margin-inline-start:auto`
   تتجمّع الثلاث في طرف واحد ويبقى نصف الشريط فارغًا. */
[data-design="site1"] .shop-header-row {
    gap: 26px;
    padding-block: 18px;
}

[data-design="site1"] .shop-actions { margin-inline-start: auto; }

/* الشعار أكبر قليلًا كما في القالب، والاسم بجانبه لا تحته */
[data-design="site1"] .shop-logo { gap: 12px; }
[data-design="site1"] .shop-logo img { height: 52px; }

[data-design="site1"] .shop-search { margin-inline: 8px; }

/* على الجوّال يعود الترتيب سطرين: شعار وأيقونات، ثمّ بحثٌ بعرض كامل */
@media (max-width: 820px) {
    [data-design="site1"] .shop-header-row { flex-wrap: wrap; gap: 12px; }
    [data-design="site1"] .shop-search { order: 3; flex-basis: 100%; margin-inline: 0; }
}

/* ------------------------- توزيع القائمة ------------------------- */

/* **العروض والأكثر مبيعًا في طرف النهاية**: القالب يضع زرّه الملوّن هناك
   وحده، فيقرأ القارئ التصنيفات في طرف والدعوتين في الطرف المقابل — ولا
   تزاحمان بنود التصفّح. */
[data-design="site1"] .shop-nav ul { gap: 0; }

[data-design="site1"] .shop-nav a.shop-nav-hot {
    margin-inline-start: auto;
}

[data-design="site1"] .shop-nav li:has(.shop-nav-hot) { margin-inline-start: auto; }

[data-design="site1"] .shop-nav a.shop-nav-top { margin-inline-start: 6px; }

/* متصفّح بلا `:has` يبقى سليمًا: الفاصل يقع على الرابط نفسه، والنتيجة
   دفعُه إلى الطرف داخل عنصره — أضيق قليلًا لا مكسورًا. */

/* ---------------------- شريط الخطوات تحت الشريحة ---------------------- */

/* **تحت الشريحة لا فوقها**: في القالب تأتي الخطوات بعد واجهة الصفقات،
   فيرى الزائر المنتج أوّلًا ثمّ يقرأ كيف يشتريه. وكان أعلاها فيفصل القائمةَ
   عن الشريحة بكتلة نصّ. */
[data-design="site1"] .site1-process {
    margin-top: 24px;
    margin-bottom: 30px;
}

/* ==========================================================================
   تصحيح: دفع البندين إلى الطرف، ومسافات بين الأقسام
   ========================================================================== */

/* **الفاصل على عنصر القائمة لا على الرابط**: الرابط يملأ عنصره، فهامشٌ
   تلقائيّ عليه لا يدفع شيئًا. والصنف صريح لا `:has()` — قاعدةٌ لا تعتمد
   على دعم المتصفّح لمُحدِّدٍ حديث.

   وفي RTL يقابل `margin-inline-start` الهامشَ الأيمن، فيدفع البند بعيدًا
   عن بداية السطر أي إلى اليسار. */
[data-design="site1"] .shop-nav li.shop-nav-item--push { margin-inline-start: auto; }
[data-design="site1"] .shop-nav li.shop-nav-item--pair { margin-inline-start: 6px; }

/* الهامش التلقائي لا يعمل داخل حاوية تفيض، فيُلغى الفيض على الشاشات
   الواسعة ويُعاد على الضيّقة حيث تحتاج القائمة تمريرًا */
@media (min-width: 861px) {
    [data-design="site1"] .shop-nav ul { overflow-x: visible; }
}

/* ------------------------- مسافات بين الأقسام ------------------------- */

/* **المحتوى لا يلتصق بالقائمة**: شريط القوائم داكن ممتدّ، وأوّل قسم يبدأ
   تحته مباشرةً فيبدوان كتلة واحدة. مسافةٌ تفصل الترويسة عن المتجر. */
[data-design="site1"] main.shop-container { padding-top: 26px; }

/* ومسافة موحّدة بين الأقسام: القالب يباعد بينها بـ`ptb-30`، وأقسامنا كانت
   تتلاصق بفواصل مختلفة فيبدو بعضها امتدادًا لبعض. */
[data-design="site1"] .site1-hero { margin-bottom: 32px; }
[data-design="site1"] .site1-process { margin: 8px 0 34px; }
[data-design="site1"] .section-head { margin-top: 34px; }
[data-design="site1"] .site1-hero + * .section-head:first-child { margin-top: 0; }
[data-design="site1"] .site1-subscribe { margin: 34px 0 30px; }
[data-design="site1"] .product-grid { margin-bottom: 34px; }
[data-design="site1"] .brand-band { padding-block: 18px 26px; }

/* ==========================================================================
   تصحيح الدفع إلى الطرف — السبب الحقيقيّ
   ==========================================================================

   الهامش التلقائي يدفع داخل **الفراغ المتبقّي**، ولا فراغ إن لم يكن للحاوية
   عرضٌ زائد عن بنودها.

   و`.shop-nav > .shop-container` جُعل `flex`، فصارت `ul` بندًا فيه ينكمش إلى
   عرض محتواه (`flex: 0 1 auto`) — فلا فراغ في القائمة أصلًا، ولا يدفع
   `margin-inline-start: auto` شيئًا مهما كُتب. جرّبتُه على الرابط ثمّ على
   عنصر القائمة، وكلاهما لا يعمل ما دامت `ul` بعرض بنودها.

   العلاج: تمديد `ul` على عرض الحاوية. */
[data-design="site1"] .shop-nav > .shop-container > ul {
    flex: 1 1 auto;
    width: 100%;
}

/* **ويبقيان في الطرف مهما صغرت القائمة**.

   الهامش التلقائي يدفع ما دام في `ul` فراغ. فإن قلّت البنود (‏متجرٌ بتصنيف
   واحد‏) بقي الفراغ أكبر ودُفعا إلى الطرف كما هما. وإن كثرت حتى ضاق العرض
   **تلتفّ القائمة سطرًا ثانيًا** بدل أن تفيض وتُخفيهما خلف تمرير أفقيّ لا
   يلحظه أحد — والبندان يبقيان في طرف السطر الذي يقعان فيه.

   `flex-basis: 100%` على الدافع يضمن أنّه يبدأ سطرًا جديدًا حين لا يتّسع
   السطر الأوّل، فلا ينقسم البندان الملوّنان على سطرين. */
[data-design="site1"] .shop-nav > .shop-container > ul {
    flex-wrap: wrap;
    overflow-x: visible;
}

[data-design="site1"] .shop-nav li.shop-nav-item--push,
[data-design="site1"] .shop-nav li.shop-nav-item--pair { flex: 0 0 auto; }

@media (max-width: 860px) {
    /* على الضيّق: البندان في سطرٍ خاصٍّ بهما، ملتصقين بطرف النهاية */
    [data-design="site1"] .shop-nav li.shop-nav-item--push {
        margin-inline-start: auto;
        margin-top: 2px;
    }
}

/* نجمة التصنيف المميَّز في اللوحة الجانبية.

   **بلونها لا بلون اللهجة**: الأخضر لهجة الموقع كلّه، ونجمةٌ خضراء تذوب فيما
   حولها ولا تُميّز شيئًا. والذهبيّ يقول «مميَّز» بلا كلمة. */
[data-design="site1"] .site1-cat-star {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    color: #f5a623;
}

[data-design="site1"] .site1-cat-star svg { width: 14px; height: 14px; }

/* النار بلون العروض نفسه لا بلونٍ ثالث: الرمز واحد في الموضعين، فيقرؤه
   الزائر معنى واحدًا — «هنا ما يستحقّ النظر». وحجمها أكبر قليلًا من النجمة
   لأنّ شكلها أنحف. */
[data-design="site1"] .site1-cat-star { color: #ff6a00; }
[data-design="site1"] .site1-cat-star svg { width: 16px; height: 16px; }

/* ==========================================================================
   شارة الخصم: دائرة حمراء بحدٍّ متقطّع — منقولة من `label-discount`
   ==========================================================================

   حيلة القالب: حدٌّ أبيض **متقطّع** داخل الدائرة، وظلٌّ خارجيّ بلون الخلفية
   نفسه (`box-shadow: 0 0 0 2px`) يحيط بالحدّ فيبدو خيطًا مخيطًا لا إطارًا.
   بلا الظلّ يظهر الحدّ حافّةً بيضاء على الصورة.

   **وللخصم وحده**: نفاد المخزون ليس عرضًا يُغرى به، فيبقى شارةً مستطيلة
   يقرؤها الزائر نصًّا لا رقمًا. */
[data-design="site1"] .product-card-media .product-tag:not(.product-tag--out) {
    width: 52px;
    height: 52px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ff3100;
    border: 1px dashed #fff;
    box-shadow: 0 0 0 2px #ff3100;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

/* **في اليسار دائمًا، بخاصّية فيزيائية لا منطقية**.

   القالب يكتبها `left` في نسختيه العربية والإنجليزية معًا، فموضعها ثابت لا
   يتبع اتجاه القراءة. و`inset-inline-start` كانت تضعها يمينًا في العربية
   ويسارًا في الإنجليزية — فتتنقّل بتبديل اللغة، وهو ما لا يفعله الأصل.

   ويبتعد عن الحافّة 12: الظلّ يزيد القطر أربعة بكسلات، فبلا إزاحة يلامس
   حدّ البطاقة. */
[data-design="site1"] .product-card-media .product-tag:not(.product-tag--out) {
    top: 12px;
    left: 12px;
    right: auto;
    inset-inline-start: auto;
}

/* على الجوّال أصغر قليلًا كي لا تبتلع صورة بطاقة ضيّقة */
@media (max-width: 560px) {
    [data-design="site1"] .product-card-media .product-tag:not(.product-tag--out) {
        width: 44px;
        height: 44px;
        font-size: 12px;
    }
}

/* ==========================================================================
   بطاقة المنتج: حجم واحد للجميع، وترتيب واحد
   ========================================================================== */

/* **البطاقات بارتفاع واحد**: الشبكة `grid`، فبمدّ البطاقة على ارتفاع خانتها
   (`height: 100%`) تتساوى الصفوف مهما اختلفت أسماء المنتجات وبياناتها.
   وبلا ذلك تعلو بطاقةٌ لها تقييم على جارتها بلا تقييم. */
[data-design="site1"] .product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* **والصورة بنسبة واحدة للجميع**: `1 / 1` مربّعة كما في بطاقات القالب،
   و`contain` لا `cover` — منتج القرطاسية طويل أو عريض، و`cover` يقصّ
   أطرافه فيرى المشتري نصف قلم. */
[data-design="site1"] .product-card-media {
    aspect-ratio: 1 / 1;
    background: #fff;
    padding: 8px;
}

[data-design="site1"] .product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[data-design="site1"] .product-card-body {
    flex: 1;
    gap: 7px;
    padding: 12px 14px 14px;
}

/* الاسم سطران دائمًا: سطرٌ واحد يرفع ما تحته فتتفاوت مواضع الأسعار */
[data-design="site1"] .product-card-name {
    min-height: 2.8em;
    font-size: .9rem;
}

/* ------------------------- سطر العلم والتقييم ------------------------- */

/* **ارتفاعٌ محجوز ولو خلا**: منتجٌ بلا تقييم يترك السطر فارغًا لا يحذفه،
   فتبقى الأسعار على خطٍّ واحد عبر الشبكة كلّها — وهو لبّ «حجم واحد». */
[data-design="site1"] .product-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}

[data-design="site1"] .product-card-flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
    display: block;
    flex: 0 0 auto;
}

[data-design="site1"] .product-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

[data-design="site1"] .product-card-rating svg {
    width: 13px;
    height: 13px;
    color: #d9d4cd;
}

[data-design="site1"] .product-card-rating svg.is-filled { color: #f5a623; }

[data-design="site1"] .product-card-rating small {
    margin-inline-start: 4px;
    color: var(--muted, #717f86);
    font-size: .72rem;
}

/* --------------------------- المخزون --------------------------- */

[data-design="site1"] .product-card-stock {
    font-size: .74rem;
    color: var(--muted, #717f86);
}

[data-design="site1"] .product-card-stock b { color: var(--site1-dark); }

/* السعر يُدفع إلى أسفل البطاقة، فيستوي عبر الصفّ مهما طال الاسم */
[data-design="site1"] .product-card-price { margin-top: auto; }

/* ------------------------ شارة العرض والصدارة ------------------------ */

/* في الطرف المقابل لشارة الخصم — تلك يسارًا دائمًا، فهذه يمينًا دائمًا،
   ولا تتزاحمان على منتجٍ يحمل الاثنتين. */
[data-design="site1"] .product-mark {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 1;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(49, 69, 85, .18);
}

[data-design="site1"] .product-mark svg { width: 17px; height: 17px; }
[data-design="site1"] .product-mark--fire { color: #ff6a00; }
[data-design="site1"] .product-mark--star { color: #f5a623; }

/* --------------------------- عدّاد البطاقة --------------------------- */

/* **بترتيب القراءة**: أيامٌ في طرف البداية وثوانٍ في النهاية — الأكبر أوّلًا.
   ولا `direction` مفروض هنا: الصفّ يرث اتجاه الصفحة، وفرضُه كان يقلب
   الخانات في العربية فتُقرأ من الأصغر إلى الأكبر. */
[data-design="site1"] .product-card-countdown {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

[data-design="site1"] .product-card-countdown span {
    flex: 1;
    text-align: center;
    background: #fdf1e8;
    border: 1px solid #f6d9c2;
    border-radius: 3px;
    padding: 3px 2px;
    font-size: .62rem;
    color: #a85a20;
    line-height: 1.3;
}

[data-design="site1"] .product-card-countdown b {
    display: block;
    font-size: .82rem;
    color: #ff6a00;
}

/* ==========================================================================
   توحيد البطاقة: ما تبقّى
   ==========================================================================

   نسبة الصورة تأتي الآن من محور «الوسيط» في التصميم (`square`)، فلا تُفرض
   هنا — قاعدةٌ في `shop.css` أعلى تخصيصًا (`body.shop[data-media]`) كانت
   تغلب فرضنا على أي حال. */

/* **وكل سطر يحجز ارتفاعه**: البطاقات تتساوى بالارتفاع، فسطرٌ يغيب من إحداها
   يترك فراغًا في أسفلها بدل أن يرفع ما فوقه — وهذا ما بدا «أحجامًا مختلفة».
   بحجز الأسطر تستوي المواضع لا الأطوال وحدها. */
[data-design="site1"] .product-card-stock { min-height: 16px; }

[data-design="site1"] .product-card-price { min-height: 26px; align-items: baseline; }

/* الفيديو يملأ خانة الصورة نفسها، ولا يُبطل نقر البطاقة إلّا فوقه هو */
[data-design="site1"] .product-card-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

/* ==========================================================================
   شريط العرض المحدود: بطاقاتٌ بعرض واحد
   ==========================================================================

   `.flash-track > *` مضبوطة `flex: 1 0 196px`، و**`min-width` الافتراضيّ في
   بند فليكس هو `auto` لا صفر**: أي أنّ البند لا ينزل عن عرض محتواه الأدنى
   مهما قيل له. فبطاقةٌ فيها عدّاد بأربع خانات يصير أدنى عرضها أكبر من 196،
   فتتمدّد وحدها — ويكبر مربّع صورتها معها لأنّ نسبته ثابتة.

   وهذا ما بدا «صورًا بأحجام مختلفة»: العرض هو المختلف، والنسبة تتبعه. */
[data-design="site1"] .flash-track > * { min-width: 0; }

/* والعدّاد يقبل الانضغاط: خاناته الأربع في سطر واحد لا سطرين، وكلٌّ تنزل
   إلى ما يسع رقمين — فلا تفرض على البطاقة عرضًا. */
[data-design="site1"] .product-card-countdown {
    flex-wrap: nowrap;
    gap: 3px;
}

[data-design="site1"] .product-card-countdown span {
    min-width: 0;
    padding-inline: 1px;
    font-size: .58rem;
}

[data-design="site1"] .product-card-countdown b { font-size: .76rem; }

/* والاسم لا يفرض عرضًا كذلك: كلمةٌ طويلة بلا فاصل توسّع البطاقة */
[data-design="site1"] .product-card-name { overflow-wrap: anywhere; }

/* ==========================================================================
   الصور على خطٍّ واحد: ارتفاعٌ ثابت لا نسبةٌ ثابتة
   ==========================================================================

   النسبة (`aspect-ratio`) تعطي ارتفاعًا يتبع العرض. فما دامت البطاقات
   متساوية العرض تستوي الصور — وأيّ فرقٍ في العرض (‏شريط منزلق، عمودٌ أخير
   في شبكة، شاشةٌ بمقاس غريب‏) يُترجَم فرقًا في الارتفاع فتتموّج الصور.

   **الارتفاع الثابت يقطع هذا التبعية**: كل خانة صورةٍ بالطول نفسه في كل
   موضع من الموقع، فتقع أسماء المنتجات وأسعارها على خطٍّ واحد — وهو ما
   يُرى «موحَّدًا». والصورة `contain` داخلها فلا تُقصّ. */
[data-design="site1"] .product-card-media {
    aspect-ratio: auto;
    height: 210px;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    [data-design="site1"] .product-card-media { height: 180px; }
}

@media (max-width: 560px) {
    [data-design="site1"] .product-card-media { height: 150px; }
}

/* الفيديو غلافٌ لا مشغّل: النقر عليه يفتح المنتج كأيّ موضع من البطاقة */
[data-design="site1"] .product-card-video { pointer-events: none; }

/* النجمة ذهبية لا برتقالية: البرتقاليّ لون العروض في هذا الموقع (‏زرّ العروض
   وشارة البطاقة‏)، ونجمةٌ برتقالية تُقرأ عرضًا. والذهبيّ لون التمييز والتقييم
   معًا — وهما معنى واحد: «هذا ما يستحقّ النظر». */
[data-design="site1"] .site1-cat-star { color: #f5a623; }
[data-design="site1"] .site1-cat-star svg { width: 14px; height: 14px; }

/* ==========================================================================
   قسم «منتج مخفَّض واحد» — لوحة عريضة تتبدّل مع كل فتح
   ========================================================================== */

[data-design="site1"] .deal-spot {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: #2f3336;
    border-radius: 3px;
    overflow: hidden;
    margin: 34px 0;
    min-height: 300px;
}

/* الصورة في طرف البداية والنصّ في المقابل — بترتيب المستند لا بخاصّية
   فيزيائية، فينعكس مع اتجاه القراءة في الإنجليزية */
[data-design="site1"] .deal-spot-media {
    position: relative;
    order: 2;
    min-height: 300px;
}

[data-design="site1"] .deal-spot-media img,
[data-design="site1"] .deal-spot-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

[data-design="site1"] .deal-spot-body {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 40px 44px;
    color: #fff;
}

[data-design="site1"] .deal-spot-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--site1-accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
}

[data-design="site1"] .deal-spot-badge-note { font-weight: 500; opacity: .85; }

[data-design="site1"] .deal-spot-body h2 {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #fff;
}

[data-design="site1"] .deal-spot-body p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, .72);
}

[data-design="site1"] .deal-spot-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

[data-design="site1"] .deal-spot-price .price-now {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}

[data-design="site1"] .deal-spot-price .price-was {
    color: rgba(255, 255, 255, .5);
    text-decoration: line-through;
    font-size: .9rem;
}

/* الزرّ أبيض على الداكن كما في المرجع: نداءٌ يُرى من طرف الصفحة */
[data-design="site1"] .deal-spot-btn {
    background: #fff;
    color: #2f3336;
    font-weight: 700;
    font-size: .9rem;
    padding: 12px 30px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

[data-design="site1"] .deal-spot-btn:hover {
    background: var(--site1-accent);
    color: #fff;
}

/* على الضيّق: الصورة فوق والنصّ تحتها — الصورة تبيع، فتُرى أوّلًا */
@media (max-width: 820px) {
    [data-design="site1"] .deal-spot { grid-template-columns: minmax(0, 1fr); }
    [data-design="site1"] .deal-spot-media { order: 1; min-height: 220px; }
    [data-design="site1"] .deal-spot-body { order: 2; padding: 26px 22px; }
    [data-design="site1"] .deal-spot-body h2 { font-size: 1.25rem; }
}

/* ==========================================================================
   جدار العلامات: عنوانٌ متوسّط وشبكة بطاقات هادئة
   ========================================================================== */

[data-design="site1"] .brand-wall {
    text-align: center;
    margin: 44px 0;
}

/* لاصقة صغيرة فوق العنوان — تقول «هذا قسم» بلا خطٍّ فاصل */
[data-design="site1"] .brand-wall-tag {
    display: inline-block;
    background: #f1f2f4;
    color: var(--muted, #717f86);
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

[data-design="site1"] .brand-wall h2 {
    margin: 0 0 10px;
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--site1-dark);
}

[data-design="site1"] .brand-wall-note {
    max-width: 620px;
    margin: 0 auto 28px;
    font-size: .9rem;
    line-height: 1.9;
    color: var(--muted, #717f86);
}

/* شبكة تتوسّط ولا تتمدّد: `auto-fit` مع `justify-content: center` يجعل
   الصفّ الأخير الناقص يتوسّط بدل أن يلتصق بطرف — وهو ما يميّز الشكل. */
[data-design="site1"] .brand-wall-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* **بلا خلفية ولا حدّ**: الشعار وحده على أرضية الصفحة. الحدّ يرسم صندوقًا
   حول كل شعار فتصير الشبكة جدولًا، والخلفية البيضاء تقطع الشعار عن الصفحة
   بمربّعٍ لا معنى له — وأكثر الشعارات شفّافة أو بيضاء أصلًا. */
[data-design="site1"] .brand-wall-item {
    flex: 0 0 auto;
    width: 168px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-decoration: none;
}

/* **مقاسٌ واحد للجميع**: خانةٌ ثابتة والشعار `contain` داخلها، فشعارٌ عريض
   وآخر مربّع يظهران بالحجم البصريّ نفسه ولا يتفاوت الصفّ. */
[data-design="site1"] .brand-wall-logo {
    height: 92px;
    display: block;
    padding: 6px;
}

/* **`width`+`height` صريحان لا `max-*` وحدهما**: مع `max-width` و`max-height`
   معًا يبقى للصورة أبعادها الأصلية ما دامت تسع، فتفيض عن الخانة وتُقصّ عند
   حافّتها — وهو ما بدا «شعارًا مقطوعًا». والأبعاد الصريحة تُسلّم المقاس إلى
   `object-fit: contain` فيدخل الشعار كاملًا مهما كانت نسبته. */
[data-design="site1"] .brand-wall-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* **رماديّ حتى يمرّ المؤشّر** — والقيد `hover: hover` ليس زينة: الجوّال بلا
   مؤشّر، فبلا هذا القيد يبقى الشعار رماديًّا على الهاتف إلى الأبد ولا يرى
   المشتري لونه أبدًا. وهو الدرس نفسه الذي جعلنا نُزيل الترميد من الشريط
   المتحرّك — هنا يبقى لأنّه مطلوب، ويُلغى حيث لا مؤشّر. */
@media (hover: hover) {
    [data-design="site1"] .brand-wall-item img {
        filter: grayscale(1);
        opacity: .55;
        transition: filter .2s ease, opacity .2s ease;
    }

    [data-design="site1"] .brand-wall-item:hover img {
        filter: grayscale(0);
        opacity: 1;
    }

    /* بلا خلفيةٍ عند المرور: اللون وحده هو ما يتبدّل، والمربّع الرمادي
       يعيد الصندوق الذي أُزيل */
    [data-design="site1"] .brand-wall-item { transition: transform .18s ease; }
    [data-design="site1"] .brand-wall-item:hover { transform: translateY(-2px); }
}

[data-design="site1"] .brand-wall-name {
    border-top: 1px solid var(--line, #e9ebee);
    padding: 10px 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--site1-dark);
    text-align: center;
}

[data-design="site1"] .brand-wall-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--site1-dark);
    text-decoration: none;
}

[data-design="site1"] .brand-wall-more:hover { color: var(--site1-accent); }
[data-design="site1"] .brand-wall-more svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
    [data-design="site1"] .brand-wall h2 { font-size: 1.25rem; }
    [data-design="site1"] .brand-wall-item { width: 120px; height: 54px; }
}

/* ==========================================================================
   شريط الرسالة المتحرّك بين الأقسام
   ==========================================================================

   **غير شريط الإعلان العلويّ**: ذاك فوق الترويسة بعرض الصفحة ويُغلق مرّة
   فلا يعود. وهذا لوحةٌ داخل عرض المحتوى بحوافّ مستديرة ولونٍ آخر، تبقى
   في موضعها بين الأقسام. */
/* اللونان من شاشة هوية الموقع لا مطبوعين هنا: المالك يغيّرهما،
   والقيمة الاحتياطية هي البرتقاليّ الذي كان مطبوعًا فلا يتغيّر شكل متجرٍ قائم. */
[data-design="site1"] .promo-ticker {
    margin: 30px 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ticker-bg, #ff8a5c);
    color: var(--ticker-text, #fff);
}

[data-design="site1"] .promo-ticker-viewport {
    overflow: hidden;
    width: auto;
    padding: 14px 0;
}

[data-design="site1"] .promo-ticker-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: promo-ticker-move 38s linear infinite;
}

[data-design="site1"] .promo-ticker-group { display: flex; flex: 0 0 auto; }

[data-design="site1"] .promo-ticker-item {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 700;
    font-size: .95rem;
    /* الفاصل جزء من العنصر فيبقى منتظمًا عند الالتفاف */
    padding-inline-end: 60px;
}

/* الوقوف عند المرور ليقرأ الزائر رسالةً طويلة */
[data-design="site1"] .promo-ticker:hover .promo-ticker-track {
    animation-play-state: paused;
}

/* **تبدأ من الصفر في الاتجاهين**: في RTL يقف المسار بحافته اليمنى عند يمين
   الشاشة، فبدءُ الحركة من ‎-50%‎ يدفعه كلّه خارجها فلا يظهر نصّ حتى تتقدّم
   الحركة — وهو الدرس نفسه المدفوع في شريط الإعلان. */
@keyframes promo-ticker-move {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

[dir="rtl"] [data-design="site1"] .promo-ticker-track,
[data-design="site1"][dir="rtl"] .promo-ticker-track { animation-name: promo-ticker-move-rtl; }

@keyframes promo-ticker-move-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
    [data-design="site1"] .promo-ticker-track { animation: none; }
    [data-design="site1"] .promo-ticker-viewport { text-align: center; }
}

/* ==========================================================================
   التصنيفات المميّزة: دوائر بلا صور
   ========================================================================== */

[data-design="site1"] .cat-bubbles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-bottom: 32px;
}

/* الدائرة قطرٌ ثابت لا نسبة: أسماء التصنيفات تتفاوت طولًا، ونسبةٌ تتبع
   المحتوى تعطي بيضاتٍ لا دوائر. */
[data-design="site1"] .cat-bubble {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 14px;
    text-align: center;
    text-decoration: none;
    background: var(--bubble, #eef4f8);
    color: var(--bubble-ink, #314555);
    transition: transform .18s ease, box-shadow .18s ease;
}

[data-design="site1"] .cat-bubble:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(49, 69, 85, .14);
}

[data-design="site1"] .cat-bubble span {
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.5;
    /* ثلاثة أسطر كحدّ: اسمٌ طويل يفيض من الدائرة فيبدو مكسورًا */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    [data-design="site1"] .cat-bubbles { gap: 14px; }
    [data-design="site1"] .cat-bubble { width: 104px; height: 104px; padding: 10px; }
    [data-design="site1"] .cat-bubble span { font-size: .76rem; }
}

/* ==========================================================================
   فصل الأقسام بعضها عن بعض
   ==========================================================================

   الأقسام كانت تتلاصق بفواصل متفاوتة، فيُقرأ آخرُ قسمٍ وأوّلُ التالي كتلةً
   واحدة — ويظهر شريط الرسالة كأنّه ذيلٌ لما فوقه أو رأسٌ لما تحته.

   **فاصلٌ واحد بين كل قسمين**: يُطبَّق على أوّل عنصر في كل قسم (‏رأسه أو
   لوحته‏) بدل جمع هوامش متفاوتة، فتستوي المسافات مهما تبدّل الترتيب. */
[data-design="site1"] main.shop-container > .section-head,
[data-design="site1"] main.shop-container > .brand-wall,
[data-design="site1"] main.shop-container > .deal-spot,
[data-design="site1"] main.shop-container > .promo-ticker,
[data-design="site1"] main.shop-container > .flash-sale,
[data-design="site1"] main.shop-container > .cat-bubbles {
    margin-top: 46px;
}

/* أوّل قسمٍ في الصفحة لا يحتاج فاصلًا فوقه: الترويسة فوقه لا قسم */
[data-design="site1"] main.shop-container > *:first-child { margin-top: 0; }

/* والشريط يتنفّس من الطرفين: هو الأنحف، فيبتلعه جاراه بلا هامش أوسع */
[data-design="site1"] .promo-ticker { margin-block: 46px 40px; }

/* ودوائر التصنيفات تلتصق برأسها لا بما قبله */
[data-design="site1"] .section-head + .cat-bubbles { margin-top: 0; }

/* ==========================================================================
   رأسٌ واحد لكل الأقسام
   ========================================================================== */

/* جدار العلامات صار تحت رأسٍ عاديّ، فلا يحتاج توسيطًا ولا هامشًا خاصًّا */
[data-design="site1"] .brand-wall { text-align: center; margin: 0 0 10px; }

/* رأس «مزايا متجرنا» يتبع بقيّة الرؤوس: لوحة بشريط لون وعنوانٌ في الطرف.
   والعلامة المرسومة تحته تُخفى — هي بديلُ الشريط في التصاميم الأخرى. */
[data-design="site1"] .store-features-head .store-features-mark { display: none; }

[data-design="site1"] .store-features-head {
    justify-content: flex-start;
    text-align: start;
}

[data-design="site1"] .store-features-head h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

/* والقسم كلّه يتنفّس كبقيّة الأقسام */
[data-design="site1"] .store-features { padding-block: 10px 40px; }