/* ==========================================================================
   تاعـبيـر الجمـال | Taabeer Al-Jamal - Custom Premium CSS
   Platform: Salla (ثيم رائد - Raed Theme)
   Designed by: Senior UI/UX & Conversion Rate Optimization (CRO) Expert
   Target Audience: Saudi Arabia (KSA) - Premium & Luxury Feel
   ========================================================================== 
*/

/* تصغير عرض سلايدر الأقسام فقط */
/* 1. احتواء الحاوية الرئيسية لمنع أي عناصر من الخروج عن الإطار */
salla-slider[type="carousel"] {
  display: block;
  position: relative;
  overflow: hidden !important;
}

/* 2. تثبيت حاوية النقاط وجعلها تأخذ سطراً كاملاً بمفردها في الأسفل */
.custom-slider-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 25px !important;
  position: relative !important;
  z-index: 10;
}

/* 3. منع الـ Swiper من تجاوز الحدود ومطابقة العرض */
.s-slider-container {
  overflow: hidden !important;
  width: 100%;
}
/* منع أي عنصر من الخروج خارج الكونتينر */
.s-block--categories .container{
    overflow: hidden !important;
    position: relative;
}
.s-block--categories .s-slider-block__title-right h2::after{
    content: "اكتشفي كل ما تحتاجينه في مكان واحد";
    display:block;
    margin-top:8px;

    font-size:15px;
    font-weight:400;
    color:#7d7d7d;

    line-height:1.8;
}

@media (max-width:768px){
    .s-block--categories .s-slider-block__title-right h2::after{
        font-size:13px;
    }
}
/* ====== سلايدر الأقسام ====== */

.s-block--categories{
    padding:40px 0 !important;
    background:#faf8fd;
}

.s-block--categories .swiper-slide{
    height:auto !important;
    display:flex !important;
    justify-content:center !important;
}

.s-block--categories .slide--cat-entry{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:150px !important;
    min-height:185px !important;

    background:#fff !important;
    border:1px solid #ece6f6 !important;
    border-radius:22px !important;

    padding:20px 14px !important;

    box-shadow:0 10px 30px rgba(111,78,162,.08) !important;

    transition:.35s !important;
}

.s-block--categories .slide--cat-entry:hover{
    transform:translateY(-8px) !important;
    border-color:#6f4ea2 !important;
    box-shadow:0 20px 45px rgba(111,78,162,.18) !important;
}

.s-block--categories .slide--cat-entry img{
    width:92px !important;
    height:92px !important;

    border-radius:50% !important;
    object-fit:cover !important;

    border:4px solid #fff !important;
    box-shadow:0 6px 18px rgba(111,78,162,.18) !important;

    margin-bottom:14px !important;
}

.s-block--categories .slide--cat-entry h2{
    font-size:15px !important;
    font-weight:700 !important;
    color:#222 !important;
    line-height:1.7 !important;
    text-align:center !important;
    margin:0 !important;
}

.s-block--categories .swiper{
    overflow:visible !important;
}

@media(max-width:768px){

.s-block--categories .slide--cat-entry{
    width:120px !important;
    min-height:165px !important;
    padding:16px 10px !important;
}

.s-block--categories .slide--cat-entry img{
    width:72px !important;
    height:72px !important;
}

.s-block--categories .slide--cat-entry h2{
    font-size:13px !important;
}

}


/* Pagination */
.custom-slider-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:22px;
}

.custom-slider-pagination .dot{
    width:12px;
    height:12px;
    background:#d7c7ef;
    border-radius:50%;
    cursor:pointer;
    transition:.35s;
}

.custom-slider-pagination .dot.active{
    width:34px;
    border-radius:30px;
    background:linear-gradient(90deg,#6f42c1,#9b6bff);
}

/* زر إضافة للسلة */
.s-button-primary-outline {
    background: linear-gradient(135deg,#6f4aa8,#8b5fd3) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: all .35s ease;
    box-shadow: 0 8px 20px rgba(111,74,168,.25);
}

/* Hover */
.s-button-primary-outline:hover{
    transform: translateY(-3px);
    background: linear-gradient(135deg,#5f3d95,#7b4fc2) !important;
    box-shadow:0 12px 28px rgba(111,74,168,.35);
}

/* الأيقونة */
.s-button-primary-outline i{
    margin-inline-start:8px;
    font-size:18px;
}

/* النص */
.s-button-primary-outline .s-button-text{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
      color: #fff !important;

}}
.s-block--features-products .s-block__title h2{
    color: #ffffff !important;
    font-size: 2rem;
    font-weight: 800;
    text-shadow: 0 3px 12px rgba(0,0,0,.45);
    margin-bottom: 10px;
}

.s-block--features-products .s-block__title{
    text-align: center;
    margin-bottom: 25px;
}

.s-block--features-products .s-block__title::after{
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    background: linear-gradient(90deg,#d4af37,#f7d774,#d4af37);
    margin: 12px auto 0;
    border-radius: 50px;
}
/* --- 1. الألوان الأساسية والهوية البصرية (Custom Palette) --- */
:root {
    --primary-color: #6C529E !important;        /* البنفسجي الملكي الأساسي */
    --primary-hover: #553D80 !important;        /* البنفسجي الداكن للتفاعل */
    --primary-light: #F4EFFC !important;        /* خلفية بنفسجية ناعمة جداً */
    --primary-light-hover: #EBE5F7 !important;  /* درجة تفاعلية للخلفيات الفاتحة */
    --accent-gold: #D4AF37 !important;          /* الذهبي الفاخر الكلاسيكي */
    --accent-gold-light: #FDF9EC !important;    /* خلفية ذهبية ناعمة */
    --text-dark: #2D2D2D !important;            /* لون النصوص الأساسية المريح للعين */
    --text-muted: #7A7A7A !important;           /* النصوص الثانوية */
    --border-color: #ECEAEF !important;         /* الحواف الناعمة المتناسقة */
    --white: #ffffff !important;
    --shadow-sm: 0 2px 8px rgba(108, 82, 158, 0.04) !important;
    --shadow-md: 0 8px 24px rgba(108, 82, 158, 0.08) !important;
    --shadow-lg: 0 16px 36px rgba(108, 82, 158, 0.12) !important;
    --radius-sm: 8px !important;
    --radius-md: 12px !important;
    --radius-lg: 20px !important;
}

/* --- 2. الخطوط العامة والتهيئة الفاخرة --- */
body, #app, .font-pingarlt, h1, h2,
h3, h4, h5, h6, p, a, button, input,
select, textarea, .s-btn {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}






/*=========================================
   تحسين بانرات الأقسام - تعابير الجمال
=========================================*/

.banner-entry{
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

/* طبقة داكنة خفيفة فوق الصورة */
.banner-entry::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.35) 60%,
        rgba(0,0,0,.55) 100%
    );
    z-index:1;
    transition:.3s;
}

.banner-entry:hover::before{
    background:linear-gradient(
        180deg,
        rgba(108,82,158,.15),
        rgba(108,82,158,.45)
    );
}

/* إبقاء النص فوق الطبقة */
.banner-entry__text{
    position:absolute;
    z-index:2;
    inset:auto 20px 20px 20px;
}

/* عنوان القسم */
.banner-entry .banner__title{
    color:#fff !important;
    font-size:22px;
    font-weight:800;
    line-height:1.5;
    text-shadow:
        0 2px 8px rgba(0,0,0,.55),
        0 0 20px rgba(0,0,0,.25);
}

.s-block--features-products .s-block__title h2{
    color: #ffffff !important;
    font-size: 2rem;
    font-weight: 800;
    text-shadow: 0 3px 12px rgba(0,0,0,.45);
    margin-bottom: 10px;
}

.s-block--features-products .s-block__title{
    text-align: center;
    margin-bottom: 25px;
}

.s-block--features-products .s-block__title::after{
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    background: linear-gradient(90deg,#d4af37,#f7d774,#d4af37);
    margin: 12px auto 0;
    border-radius: 50px;
}
/* الوصف */
.banner-entry .banner__description{
    color:#F6F6F6 !important;
    text-shadow:0 2px 8px rgba(0,0,0,.45);
}

/* حركة بسيطة */
.banner-entry{
    transition:.35s;
}

.banner-entry:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}
/* تحسين انسيابية التمرير وتجربة المستخدم */
html {
    scroll-behavior: smooth;
}

/* --- 3. تنظيف وتجميل الهيدر (Header Polish) --- */
salla-contacts, 
.s-contacts-header,
salla-menu[source="footer"] {
    display: none !important; /* إخفاء العناصر المزدحمة لزيادة التركيز على الشراء */
}

.store-header {
    background-color: var(--white) !important;
    box-shadow: var(--shadow-sm) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 0 !important;
}

/* تحسين البانر العلوي الترويجي */
.top-navbar {
    background: linear-gradient(90deg, #6C529E 0%, #8569BA 100%) !important;
    color: var(--white) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    padding: 8px 0 !important;
}

/* --- 4. شريط البحث الذكي (Search Bar Redesign) --- */
.header-search {
    width: 100% !important;
    max-width: 550px !important;
    margin: 0 auto !important;
    position: relative !important;
}

.header-search .s-search-input, 
.header-search input[type="search"] {
    border: 1px solid var(--border-color) !important;
    background-color: #F8F7FA !important;
    color: var(--text-dark) !important;
    border-radius: var(--radius-lg) !important;
    height: 44px !important;
    padding-right: 48px !important;
    font-size: 14px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-search .s-search-input:focus,
.header-search input[type="search"]:focus {
    border-color: var(--primary-color) !important;
    background-color: var(--white) !important;
    box-shadow: 0 0 0 4px rgba(108, 82, 158, 0.1) !important;
}

/* محاذاة وتلوين أيقونة البحث */
.header-search .s-search-icon {
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.header-search .s-search-icon svg {
    fill: var(--primary-color) !important;
    width: 20px !important;
    height: 20px !important;
}

/* --- 5. أيقونات الحساب والسلة الفاخرة --- */
#mainnav .flex.items-center.justify-end {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

/* أيقونة الحساب */
.s-user-menu-login-btn {
    background: var(--primary-light) !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.s-user-menu-login-btn:hover {
    background: var(--primary-light-hover) !important;
    transform: translateY(-2px);
}

.s-user-menu-login-btn svg {
    fill: var(--primary-color) !important;
    width: 22px !important;
    height: 22px !important;
}

/* أيقونة السلة المحسنة بالكامل */
#s-cart-icon {
    background-color: var(--primary-color) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(108, 82, 158, 0.25) !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#s-cart-icon:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 82, 158, 0.35) !important;
}

#s-cart-icon i,
#s-cart-icon svg,
.header-btn__icon {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--white) !important;
    fill: var(--white) !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    display: inline-block !important;
}

/* عداد السلة الذهبي الفاخر */
.s-cart-summary-count {
    background-color: var(--accent-gold) !important;
    color: #1A1A1A !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    border-radius: 50% !important;
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--white) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

.s-cart-summary-content,
.s-cart-summary-wrapper > b {
    display: none !important; /* إخفاء النص لجمالية التصميم */
}

/* --- 6. التصنيفات الدائرية الفخمة (Circular Categories) --- */
.slide--cat-entry {
    background-color: var(--primary-light) !important;
    border: 1px solid rgba(108, 82, 158, 0.08) !important;
    border-radius: 50% !important;
    width: 90px !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px auto !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.slide--cat-entry:hover {
    transform: translateY(-5px);
    background-color: var(--white) !important;
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-md) !important;
}

.slide--cat-entry i, 
.slide--cat-entry svg {
    color: var(--primary-color) !important;
    fill: var(--primary-color) !important;
    font-size: 1.8rem !important;
    transition: transform 0.3s ease !important;
}

.slide--cat-entry:hover i {
    transform: scale(1.1);
}

/* تحسين خطوط أسماء التصنيفات */
.slide--cat-entry-title,
.slide--cat-entry h2 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    text-align: center;
    margin-top: 8px;
    transition: color 0.3s ease;
}

.slide--cat-entry:hover + h2,
.slide--cat-entry:hover .slide--cat-entry-title {
    color: var(--primary-color) !important;
}

/* --- 7. بطاقات المنتجات الفاخرة (Premium Product Cards) --- */
custom-salla-product-card,
.s-product-card {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    background: var(--white) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

custom-salla-product-card:hover,
.s-product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: rgba(108, 82, 158, 0.15) !important;
}

/* ضبط صور المنتجات لتكون فخمة ومقصوصة بشكل مثالي */
.s-product-card-image {
    background-color: #FAF9FC !important;
    transition: transform 0.5s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

custom-salla-product-card:hover .s-product-card-image img,
.s-product-card:hover .s-product-card-image img {
    transform: scale(1.04) !important;
}

/* تاغ التميز والتسويق الفاخر للجمهور السعودي */
.s-product-card-image::after {
    content: "✨ الأكثر طلباً في السعودية";
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: rgba(253, 249, 236, 0.95) !important; /* خلفية كريمية فاخرة */
    color: #A37F1A !important; /* ذهبي غامق ملكي */
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 5;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ضبط العنوان والسعر داخل البطاقة */
.s-product-card-title a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    line-height: 1.5 !important;
    height: 42px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.s-product-card-title a:hover {
    color: var(--primary-color) !important;
}

/* تحسين عرض السعر */
.s-product-card-price {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    font-size: 15px !important;
}

/* زر المفضلة الدائري الأنيق */
.s-product-card-wishlist-btn button {
    background-color: var(--white) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    color: var(--text-muted) !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.s-product-card-wishlist-btn button:hover {
    color: #e74c3c !important; /* اللون الأحمر الفاخر عند التفضيل */
    transform: scale(1.1);
}

/* --- 8. زر الإضافة للسلة الاحترافي (Add to Cart Button) --- */
.s-product-card-content-footer button {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 3px 10px rgba(108, 82, 158, 0.15) !important;
}

.s-product-card-content-footer button:hover {
    background-color: var(--primary-hover) !important;
    box-shadow: 0 4px 14px rgba(108, 82, 158, 0.3) !important;
    transform: translateY(-1px);
}

/* --- 9. تحسين البانرات الإعلانية وسلايدر الصور الرئيسي --- */
.swiper-container, 
.main-slider {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
}

/* --- 10. تحسين الفوتر لإعطاء ثقة ومصداقية (Footer & Trust Elements) --- */
.store-footer {
    background-color: #1E1A26 !important; /* فوتر داكن فاخر ومتناسق مع البنفسجي */
    color: #D6D2E0 !important;
    padding-top: 40px !important;
}

.store-footer h3, 
.store-footer h4, 
.store-footer .footer-title {
    color: var(--white) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    display: inline-block;
    margin-bottom: 15px;
}

.store-footer a {
    color: #B2ADC2 !important;
    transition: color 0.3s ease !important;
}

.store-footer a:hover {
    color: var(--accent-gold) !important;
}

/* تحسين عرض شعارات الدفع والأمان */
.footer-payment-methods {
    opacity: 0.9;
    filter: grayscale(0%) contrast(100%);
    transition: opacity 0.3s ease;
}

.footer-payment-methods:hover {
    opacity: 1;
}

/* --- 11. تحسين الهواتف المحمولة (Responsive Mobile Adjustments) --- */
@media (max-width: 768px) {
    .header-search {
        padding: 0 10px !important;
    }
    
    .slide--cat-entry {
        width: 75px !important;
        height: 75px !important;
    }
    
    .slide--cat-entry-title,
    .slide--cat-entry h2 {
        font-size: 11px !important;
    }
    
    /* تاغ التميز للهاتف */
    .s-product-card-image::after {
        font-size: 9px !important;
        padding: 3px 8px !important;
        bottom: 8px !important;
        right: 8px !important;
    }
    
    /* جعل أزرار السلة مريحة للمس بالهاتف */
    .s-product-card-content-footer button {
        padding: 12px 10px !important;
        font-size: 12px !important;
    }
}



.s-button-text {
  color: white;
}


/* ==========================================================================
   حل مشكلة خلفية وألوان فوتر متجر تعابير الجمال - قالب رائد
   ========================================================================== */

/* 1. إجبار الخلفية الكلية للفوتر على اللون الداكن الفخم */
.store-footer,
footer.store-footer,
.store-footer__inner,
.store-footer .footer-inner,
.footer-main {
    background-color: #1a1622 !important; /* لون داكن عميق */
    background: #1a1622 !important;
    border-top: 5px solid #6C529E !important; /* الخط العلوي البنفسجي */
    color: #e0daec !important; /* لون الخطوط الافتراضية */
}

/* 2. تلوين وضبط العناوين الرئيسية في الفوتر باللون الأبيض */
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer .footer-title,
.store-footer .footer-title span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    display: inline-block !important;
}

/* 3. الخط الذهبي الجمالي تحت العناوين */
.store-footer .footer-title::after,
.store-footer h3::after {
    content: "" !important;
    position: absolute !important;
    bottom: -6px !important;
    right: 0 !important;
    width: 35px !important;
    height: 3px !important;
    background-color: #D4AF37 !important; /* لمسة ذهبية */
    border-radius: 2px !important;
}

/* 4. تلوين نصوص الوصف والفقرات العامة */
.store-footer p,
.store-footer .footer-description,
.store-footer .store-info__description {
    color: #d1cae2 !important; /* ليكون النص واضحاً ومريحاً للقراءة */
    line-height: 1.8 !important;
    font-size: 14px !important;
}

/* 5. تنسيق الروابط وتأثير المرور الفاخر */
.store-footer a,
.store-footer .footer-links a,
.store-footer .footer-menu a {
    color: #b2a8cc !important; /* لون الروابط قبل التمرير */
    font-size: 14px !important;
    display: block !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.store-footer a:hover,
.store-footer .footer-links a:hover,
.store-footer .footer-menu a:hover {
    color: #D4AF37 !important; /* يتحول للذهبي الأنيق */
    padding-right: 6px !important; /* حركة إزاحة ناعمة لليسار تفاعلية */
}

/* 6. تنسيق السجل التجاري والشهادات لتتناسب مع الخلفية */
.store-footer .commercial-registration,
.store-footer .tax-number,
.store-footer .footer-certificate-text {
    color: #b2a8cc !important;
    font-size: 13px !important;
}

/* 7. تلوين وتوضيح أيقونات التواصل الاجتماعي الدائرية */
.store-footer .social-media a,
.store-footer .social-icons a,
.store-footer a[href*="instagram"],
.store-footer a[href*="snapchat"],
.store-footer a[href*="tiktok"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #2b2438 !important; /* خلفية أغمق قليلاً للأيقونات */
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    margin-left: 8px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.store-footer .social-media a:hover,
.store-footer .social-icons a:hover {
    background-color: #6C529E !important; /* تتحول للبنفسجي الملكي */
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 10px rgba(108, 82, 158, 0.3) !important;
}

/* 8. تلوين شريط الحقوق السفلي وتثبيت لونه الداكن المنسجم */
.footer-copyright,
.store-footer .copyrights,
.store-footer-sub {
    background-color: #110e17 !important; /* أغمق درجة لمزيد من الأناقة */
    border-top: 1px solid #282235 !important;
    padding: 20px 0 !important;
    color: #7b748c !important;
    font-size: 13px !important;
}



custom-salla-product-card .s-product-card-image::after,
.s-product-card .s-product-card-image::after,
.s-product-card-image::after {
    content: "✨ الأكثر مبيعًا" !important;
}


/* ==========================================================================
   الحل النهائي والجذري لمشكلة نقاط سلايدر الأقسام - متجر تعابير الجمال
   ========================================================================== */

.s-block--categories {
    padding: 40px 0 60px 0 !important; /* مساحة إضافية بالأسفل لاستيعاب النقاط بأمان */
    background: #faf8fd !important;
    overflow: hidden !important;
    position: relative !important;
}

.s-block--categories .container {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

/* ضبط الـ Swiper الأساسي وجعله حاوية نسبية */
.s-block--categories .swiper,
.s-block--categories salla-slider {
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
    padding-bottom: 30px !important;
}

.s-block--categories .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

.s-block--categories .swiper-slide {
    width: 170px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
}

/* تثبيت كرت القسم ومنع أي حركة غير مقصودة */
.s-block--categories .slide--cat-entry {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 150px !important;
    min-height: 185px !important;
    background: #fff !important;
    border: 1px solid #ece6f6 !important;
    border-radius: 22px !important;
    padding: 20px 14px !important;
    box-shadow: 0 10px 30px rgba(111,78,162,.08) !important;
    transition: border-color .35s ease, box-shadow .35s ease !important;
    margin: 0 auto !important;
    transform: none !important;
}

.s-block--categories .slide--cat-entry:hover {
    border-color: #6f4ea2 !important;
    box-shadow: 0 20px 45px rgba(111,78,162,.18) !important;
    transform: none !important;
}

.s-block--categories .slide--cat-entry img {
    width: 92px !important;
    height: 92px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 4px solid #fff !important;
    box-shadow: 0 6px 18px rgba(111,78,162,.18) !important;
    margin-bottom: 14px !important;
}

.s-block--categories .slide--cat-entry h2,
.s-block--categories .slide--cat-entry-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #222 !important;
    line-height: 1.7 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* العنوان الترويجي الفرعي لسلايدر الأقسام */
.s-block--categories .s-slider-block__title-right h2::after {
    content: "اكتشفي كل ما تحتاجينه في مكان واحد";
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #7d7d7d;
    line-height: 1.8;
}

/* تثبيت نقاط التنقل في أسفل السلايدر تماماً وبعيداً عن الكروت */
.s-block--categories .custom-slider-pagination,
.custom-slider-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    position: absolute !important;
    bottom: 0px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 20 !important;
}

.custom-slider-pagination .dot {
    width: 12px !important;
    height: 12px !important;
    background: #d7c7ef !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all .35s ease !important;
}

.custom-slider-pagination .dot.active {
    width: 34px !important;
    border-radius: 30px !important;
    background: linear-gradient(90deg, #6f42c1, #9b6bff) !important;
}