/* =========================================================
   Silver Store - أقسام الصفحة الرئيسية: الفئات والعلامات التجارية
   كل القواعد مقيّدة بـ .sc-home-cats / .sc-home-brands،
   فلا يتأثر أي قسم أو صفحة أخرى.
   بطاقات مربّعة بحدود ناعمة بدل الدوائر + حركة خفيفة.
   ========================================================= */

.sc-home-cats,
.sc-home-brands {
    --sch-primary: #1455AC;
    --sch-accent: #1B7FED;
    --sch-ink: #15284D;
    --sch-line: #E7ECF4;
}

/* ---------- البطاقة المربّعة ---------- */
.sc-home-cats .__cate-item .__img {
    width: 100%;
    max-width: 106px;
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 14px;
    border: 1px solid var(--sch-line);
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(21, 40, 77, .04);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.sc-home-cats .__cate-item .__img.circle {
    width: 100%;
    max-width: 106px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 14px;
}

.sc-home-cats .__cate-item .__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
    transition: transform .35s ease;
}

.sc-home-cats .__cate-item .__img .temporary-closed {
    border-radius: 14px;
}

/* ---------- الحركة الخفيفة ---------- */
.sc-home-cats .__cate-item a:hover .__img,
.sc-home-cats .__cate-item a:focus-visible .__img {
    border-color: var(--sch-accent);
    box-shadow: 0 8px 18px rgba(20, 85, 172, .12);
    transform: translateY(-4px);
}

/* الصورة كانت تصغُر عند المرور (scale .88) — الآن تكبر قليلا داخل الإطار */
.sc-home-cats .__cate-item:hover img,
.sc-home-cats .__cate-item a:hover .__img img {
    transform: scale(1.06);
}

.sc-home-cats .__cate-item h3 {
    color: var(--sch-ink);
    transition: color .25s ease;
}

.sc-home-cats .__cate-item a:hover h3 {
    color: var(--sch-primary);
}

/* ---------- استجابة الشاشات ---------- */
@media (max-width: 1199.98px) {
    .sc-home-cats .__cate-item .__img,
    .sc-home-cats .__cate-item .__img.circle {
        max-width: 96px;
    }
}

@media (max-width: 991.98px) {
    .sc-home-cats .__cate-item .__img,
    .sc-home-cats .__cate-item .__img.circle {
        max-width: 100%;
        border-radius: 12px;
    }

    .sc-home-cats .__cate-item .__img img {
        border-radius: 11px;
    }

    .sc-home-cats .__cate-item a:hover .__img {
        transform: translateY(-2px);
    }
}

/* من يفضّل تقليل الحركة لا يرى أي انتقال */
@media (prefers-reduced-motion: reduce) {
    .sc-home-cats .__cate-item .__img,
    .sc-home-cats .__cate-item .__img img,
    .sc-home-cats .__cate-item h3 {
        transition: none;
    }

    .sc-home-cats .__cate-item a:hover .__img {
        transform: none;
    }

    .sc-home-cats .__cate-item:hover img,
    .sc-home-cats .__cate-item a:hover .__img img {
        transform: none;
    }
}

/* =========================================================
   متنفّس رأسي داخل السلايدر
   owl يضع overflow:hidden على .owl-stage-outer، فحافة البطاقة
   العلوية كانت تُقصّ لحظة ارتفاعها 4px عند المرور. الحشوة توسّع
   منطقة القصّ، والهامش السالب يعيد التخطيط إلى مكانه تمامًا.
   الحشوة رأسية فقط: أي حشوة أفقية تغيّر حساب owl لعرض العناصر.
   ========================================================= */

.sc-home-brands .owl-stage-outer,
.sc-home-cats .owl-stage-outer {
    padding-block: 10px;
    margin-block: -10px;
}

/* =========================================================
   قسم العلامات التجارية — بطاقات مربّعة بدل الدوائر
   ========================================================= */

.sc-home-brands .__brand-item {
    max-width: 88px;
    width: 100%;
    margin-inline: auto;
    aspect-ratio: 1;
    border-radius: 14px;
    border: 1px solid var(--sch-line);
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(21, 40, 77, .04);
    padding: 10px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* الشعارات عريضة: contain يُظهرها كاملة، وcover كان يقصّ أطرافها */
.sc-home-brands .__brand-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    transition: transform .35s ease;
}

.sc-home-brands .__brand-item:hover,
.sc-home-brands .__brand-item:focus-visible {
    border-color: var(--sch-accent);
    box-shadow: 0 8px 18px rgba(20, 85, 172, .12);
    transform: translateY(-4px);
}

/* التكبير كان 1.2 فيقصّ الشعار داخل الإطار — خفّضناه */
.sc-home-brands .__brand-item:hover img {
    transform: scale(1.06);
}

@media (max-width: 991.98px) {
    .sc-home-brands .__brand-item {
        max-width: 76px;
        border-radius: 12px;
        padding: 8px;
    }

    .sc-home-brands .__brand-item:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-home-brands .__brand-item,
    .sc-home-brands .__brand-item img {
        transition: none;
    }

    .sc-home-brands .__brand-item:hover,
    .sc-home-brands .__brand-item:hover img {
        transform: none;
    }
}

/* =========================================================
   توحيد أقسام الرئيسية: العناوين، زر «عرض الكل»، البطاقات، أسهم السلايدر
   الجذر .__inline-61.sc-home مركّب عمدًا ليسبق style.css و home.css
   اللذين يُحمَّلان بعد هذا الملف.
   ========================================================= */

.__inline-61.sc-home {
    --shs-primary: #1455AC;
    --shs-accent: #1B7FED;
    --shs-ink: #15284D;
    --shs-line: #E7ECF4;
    --shs-soft: #EFF6FF;
    --shs-soft-line: #D9E8FC;
}

/* ---------- 1. عنوان القسم ---------- */
.__inline-61.sc-home .sc-section-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-inline-start: 13px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--shs-ink);
    text-align: start;
    text-transform: none;
}

/* العناوين القديمة تضع الحجم واللون على span داخلي */
.__inline-61.sc-home .sc-section-title * {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-transform: inherit;
}

.__inline-61.sc-home .sc-section-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .22em;
    bottom: .22em;
    width: 4px;
    border-radius: 4px;
    background: var(--shs-accent);
}

/* ---------- 1. زر «عرض الكل» ---------- */
/* :not(.sc-menu__all) يستثني زر القائمة الجانبية الذي له تنسيقه الخاص */
.__inline-61.sc-home :not(.sc-menu__all) > .view-all-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--shs-soft-line);
    background: var(--shs-soft);
    color: var(--shs-primary) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.__inline-61.sc-home :not(.sc-menu__all) > .view-all-btn-text i {
    font-size: 10px;
}

.__inline-61.sc-home :not(.sc-menu__all) > .view-all-btn-text:hover {
    background: var(--shs-accent);
    border-color: var(--shs-accent);
    color: #FFFFFF !important;
    font-weight: 600;
}

/* على خلفيتي «الصفقة المميزة» و«عروض الفلاش» الملوّنتين يحتاج الزر أرضية بيضاء */
.__inline-61.sc-home .__featured-deal-wrap :not(.sc-menu__all) > .view-all-btn-text:not(:hover),
.__inline-61.sc-home .flash-deals-wrapper :not(.sc-menu__all) > .view-all-btn-text:not(:hover) {
    background: #FFFFFF;
}

/* ---------- عنوان عروض الفلاش ---------- */
/* كان lh-1 (ارتفاع سطر = 1) مع line--limit-3 (overflow:hidden) يقصّ
   أسفل الحروف العربية. ارتفاع سطر 1.5 يُبقي الحروف داخل صندوقها. */
.__inline-61.sc-home .sc-flash-title,
.__inline-61.sc-home .sc-flash-title span {
    line-height: 1.5;
}

/* ---------- 2. بطاقات الأقسام ---------- */
.__inline-61.sc-home .__inline-62,
.__inline-61.sc-home .card.__shadow,
.__inline-61.sc-home .__shadow-2,
.__inline-61.sc-home .sc-home-card {
    background: #FFFFFF;
    border: 1px solid var(--shs-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 40, 77, .04);
}

/* قسم الفئات بطاقة داخل بطاقة: الإطار للخارجية فقط */
.__inline-61.sc-home .__inline-62 .card.__shadow {
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    background: transparent;
}

/* الغلاف الداخلي يحمل .rounded (4px !important)، فالقصّ على الغلاف الخارجي */
.__inline-61.sc-home .__shadow-2 {
    overflow: hidden;
}

.__inline-61.sc-home .sc-home-card {
    padding: 20px;
}

.__inline-61.sc-home .__featured-deal-wrap {
    border: 1px solid var(--shs-soft-line);
    border-radius: 14px;
}

/* ---------- 4. أسهم السلايدر ---------- */
/* قائمة بيضاء صريحة بالسلايدرات، فلا يتأثر البانر الرئيسي ولا بانرات العروض */
.__inline-61.sc-home :is(.featured_products_listSlide, .new-arrivals-product, .category-wise-product-slider, .brands-slider, .flash-deal-slider) .owl-nav button.owl-prev,
.__inline-61.sc-home :is(.featured_products_listSlide, .new-arrivals-product, .category-wise-product-slider, .brands-slider, .flash-deal-slider) .owl-nav button.owl-next {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid var(--shs-line);
    color: var(--shs-primary);
    box-shadow: 0 4px 12px rgba(21, 40, 77, .12);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .3s ease, transform .3s ease;
}

.__inline-61.sc-home :is(.featured_products_listSlide, .new-arrivals-product, .category-wise-product-slider, .brands-slider, .flash-deal-slider) .owl-nav button i {
    font-size: 12px;
    color: inherit;
}

.__inline-61.sc-home :is(.featured_products_listSlide, .new-arrivals-product, .category-wise-product-slider, .brands-slider, .flash-deal-slider) .owl-nav button.owl-prev:hover,
.__inline-61.sc-home :is(.featured_products_listSlide, .new-arrivals-product, .category-wise-product-slider, .brands-slider, .flash-deal-slider) .owl-nav button.owl-next:hover {
    background: var(--shs-accent);
    border-color: var(--shs-accent);
    color: #FFFFFF;
}

.__inline-61.sc-home :is(.featured_products_listSlide, .new-arrivals-product, .category-wise-product-slider, .brands-slider, .flash-deal-slider) .owl-nav button.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* ---------- الاستجابة ---------- */
@media (max-width: 767.98px) {
    .__inline-61.sc-home .sc-section-title {
        font-size: 17px;
        padding-inline-start: 11px;
    }

    .__inline-61.sc-home .sc-home-card {
        padding: 14px;
    }

    .__inline-61.sc-home .__inline-62,
    .__inline-61.sc-home .card.__shadow,
    .__inline-61.sc-home .__shadow-2,
    .__inline-61.sc-home .sc-home-card,
    .__inline-61.sc-home .__featured-deal-wrap {
        border-radius: 12px;
    }

    .__inline-61.sc-home :not(.sc-menu__all) > .view-all-btn-text {
        padding: 5px 11px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .__inline-61.sc-home :not(.sc-menu__all) > .view-all-btn-text,
    .__inline-61.sc-home :is(.featured_products_listSlide, .new-arrivals-product, .category-wise-product-slider, .brands-slider, .flash-deal-slider) .owl-nav button {
        transition: none;
    }
}
