/* ====================================
   متغيرات الألوان (CSS Variables)
==================================== */
:root {
  /* الألوان الأساسية */
  --color-primary-bg: #e4e5e6;        /* خلفية الصفحة الرئيسية */
  --color-secondary-bg: #d9d9d9;      /* خلفية العناصر الثانوية */
  --color-tertiary-bg: #b3b1b1;       /* خلفية رمادية متوسطة */
  
  /* ألوان النصوص والحدود */
  --color-text-dark: #000000;         /* نص أسود */
  --color-text-light: #ffffff;        /* نص أبيض */
  --color-border-light: #dddddd;      /* حدود فاتحة */
  --color-border-dark: #707070;       /* حدود غامقة */
  --color-border-black: #000000;      /* حدود سوداء */
  
  /* ألوان التدرج */
  --color-gradient-start: #8f8f8f;    /* بداية التدرج */
  --color-gradient-end: #6e6e6e;      /* نهاية التدرج */
  
  /* ألوان الظل */
  --color-shadow: #dddddd;            /* لون الظل */
}
#\31 83108417 *{color:red}
/* ====================================
   تنسيقات CSS مخصصة
==================================== */

/* ====================================
   1. تنسيقات عامة للصفحة
==================================== */
body{
  background-color: var(--color-primary-bg);
}

/* ====================================
   2. تنسيقات شريط التنقل (Navigation)
==================================== */
/* أيقونات المستخدم وسلة التسوق */
.main-nav-container i.header-btn__icon.sicon-user-circle,
.main-nav-container i.header-btn__icon.icon.sicon-shopping-bag{
    background-color: var(--color-secondary-bg) !important;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-black);
}

/* أيقونة القائمة (Menu) */
i.sicon-menu.text-primary.text-2xl {
    color: var(--color-text-dark);
    padding: 6px;
    border-radius: 50px;
}

/* شريط التنقل العلوي */
.top-navbar {
    background-color: var(--color-secondary-bg) !important;
    color: var(--color-text-dark);
}

/* حقل البحث */
input.s-search-input {
    background-color: var(--color-text-light) !important;
}

/* ====================================
   3. تنسيقات السلايدر (Slider Block)
==================================== */
section.s-block.s-block--photos-slider {
    margin-top: 0;
}

section.s-block.s-block--photos-slider .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

section.s-block.s-block--photos-slider .swiper-slide,
section.s-block.s-block--photos-slider .swiper-slide img {
    border-radius: 0 !important;
}

section.s-block.s-block--photos-slider .swiper.s-slider-container {
    padding: 0 !important;
}

.home-slider.photos-slider .s-slider-block__title-nav {
    display: none !important;
}

/* ====================================
   4. تنسيقات الشبكات (Grid Layouts)
==================================== */
/* القسم الثالث - شبكة 4 أعمدة */
body.index section:nth-child(3) .md\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* تنسيق البانر الأول في الصف */
.two-row .banner-entry:first-child {
    grid-column: span 1 / span 1;
    grid-row: span 1 / span 1;
}

/* البانرات المربعة */
section.s-block.s-block--banners a.banner-entry.square-photos {
    height: 100%;
    background-color: transparent;
    padding: 0 !important;
    z-index: 5;
}

/* ====================================
   5. تنسيقات القسم السادس - شبكة مخصصة
==================================== */
body.index section:nth-child(6) .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

body.index section:nth-child(6) > div > a:nth-child(1){
    grid-row: span 2 / span 2;
}

body.index section:nth-child(6) > div > a:nth-child(3) {
    grid-column-start: 2;
    grid-row-start: 2;
}

body.index section:nth-child(6) > div > a:nth-child(4) {
    grid-column-start: 3;
    grid-row-start: 1;
}

body.index section:nth-child(6) > div > a:nth-child(5) {
    grid-column-start: 3;
}

/* ====================================
   6. تنسيقات الأقسام الأخرى
==================================== */
/* القسم الثامن - عمودين */
body.index section:nth-child(8) .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* القسمين 12 و 13 - 5 أعمدة */
body.index section:nth-child(12) .md\:grid-cols-3,
body.index section:nth-child(13) .md\:grid-cols-3 {
    grid-template-columns: repeat(5, minmax(0px, 1fr)) !important;
}

/* ====================================
   7. تنسيقات الأزرار وبطاقات المنتجات
==================================== */
/* زر الإضافة للسلة */
button.s-button-element.s-button-btn {
    background: linear-gradient(to right, var(--color-gradient-start), var(--color-gradient-end)) !important;
    color: var(--color-text-light) !important;
    border: 2px solid var(--color-text-light);
}

/* محتوى بطاقة المنتج */
.s-product-card-content {
    background-color: var(--color-secondary-bg);
}

/* بطاقة المنتج */
custom-salla-product-card {
    border: 1px solid var(--color-border-light) !important;
    transition: 0.5s !important;
    overflow: hidden;
}

/* تأثير الـ Hover على البطاقة في الصفحة الرئيسية */
body.index custom-salla-product-card:has(button.s-button-element.s-button-btn:hover){
    transform: translateY(-10px);
    box-shadow: 3px 3px 5px 4px var(--color-shadow) !important;
    border: 1px solid var(--color-border-dark) !important;
}

/* تأثير الـ Hover على البطاقة في جميع الصفحات */
custom-salla-product-card:has(button.s-button-element.s-button-btn:hover){
    box-shadow: 3px 3px 5px 4px var(--color-shadow) !important;
    border: 1px solid var(--color-border-dark) !important;
}

/* ====================================
   8. تنسيقات القسم السادس - خلفية
==================================== */
body.index section:nth-child(6) {
    background-color: var(--color-tertiary-bg);
    padding-block: 2rem;
}

/* صور البانر */
a.banner.banner--fixed.overflow-hidden img {
    background-color: transparent !important;
}

.s-product-card-image img {
  opacity: 1!important; 
}

body.index section:nth-child(17) .md\:grid-cols-3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

/* ====================================
   9. Media Queries - للشاشات الكبيرة
==================================== */
@media(min-width:992px){
    body.index section:nth-child(3){
        margin-top: -60px;
    }
}

/* ====================================
   10. Media Queries - للشاشات الصغيرة
==================================== */
@media(max-width:992px){
    /* القسم الثالث - عمودين على الموبايل */
    body.index section:nth-child(3) .md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
    }
    
    /* القسم السادس على الموبايل */
    body.index section:nth-child(6) .md\:grid-cols-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 5px;
    }
    
    /* تقليل المسافات على الموبايل */
    body.index section:nth-child(6) {
        background-color: var(--color-tertiary-bg);
        padding-block: 1.5rem;
    }
    
    /* محاذاة عناصر الفوتر في المنتصف على الموبايل */
    footer *{
        justify-content: center;
        text-align: center;
        align-items: center;
    }
  body.index section:nth-child(17) .md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}