/* Add custom CSS styles below */ 
/* ============================================================
   المتغيرات الجذرية - Root Variables
   ============================================================ */
:root {
    --color-primary:        #223c1d;
    --color-primary-dark:   #213b1e;
    --color-bg-header:      #cdb496;
    --color-border-light:   #fff;
    --color-shadow:         #ddd;
    --color-text-light:     #fff;
    --border-icon:          1px solid var(--color-border-light);
    --border-product-hover: 1px solid var(--color-primary);
    --transition-card:      0.4s;
    --shadow-card-hover:    3px 3px 5px 4px var(--color-shadow);
    --icon-padding:         8px;
}


/* ============================================================
   البانرات - Banners
   ============================================================ */

/* إزالة الهامش السفلي عن أول سلايدر */
section#IRT__photos-slider-0 {
    margin-bottom: 0 !important;
}

/* تمديد البانر الثابت ليملأ العرض الكامل */
section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    padding:   0 !important;
    margin:    0 !important;
    max-width: unset !important;
}

/* إزالة الحواف الدائرية عن صور البانر */
.banner--fixed img {
    border-radius: 0 !important;
}


/* ============================================================
   بطاقات المنتجات - Product Cards
   ============================================================ */

/* الإعدادات الأساسية للبطاقة */
custom-salla-product-card {
    overflow:   hidden;
    transition: var(--transition-card) !important;
}

/* تأثير الرفع والظل عند hover على زر البطاقة (عام) */
custom-salla-product-card:has(button.s-button-element.s-button-btn.s-button-outline:hover) {
    
    box-shadow: var(--shadow-card-hover) !important;
    border:     var(--border-product-hover);
}

/* نفس التأثير مخصصًا لصفحة الرئيسية فقط - بدون رفع */
body.index custom-salla-product-card:has(button.s-button-element.s-button-btn.s-button-outline:hover) {
    box-shadow: var(--shadow-card-hover) !important;
    border:     var(--border-product-hover);
  transform:  translateY(-10px) !important;
  
}


/* ============================================================
   سلايدر المنتجات - Products Slider
   ============================================================ */

/* إضافة padding علوي للسلايدر في الصفحة الرئيسية */
body.index salla-products-slider.s-products-slider-wrapper.hydrated .swiper.s-slider-container {
    padding: 30px 0 0 !important;
}


/* ============================================================
   زر إضافة للسلة - Add to Cart Button
   ============================================================ */

/* تلوين الزر بلون العلامة التجارية */
button.s-button-element.s-button-btn.s-button-outline.s-button-sm.s-button-wide.s-button-primary-outline.s-button-loader-center {
    background-color: var(--color-primary) !important;
    color:            var(--color-text-light) !important;
}


/* ============================================================
   الهيدر الثابت (Desktop) - Fixed Header Icons
   ============================================================ */

/* أيقونات البحث والسلة والمستخدم */
  span.header-btn__icon.icon.sicon-search,
  i.header-btn__icon.icon.sicon-cart,
  i.header-btn__icon.sicon-user {
    border-radius:    50px !important;
    border:           var(--border-icon);
    background-color: var(--color-primary-dark);
    color:            var(--color-text-light);
}

/* أيقونة القائمة الجانبية */
 i.sicon-menu.text-2xl {
    border-radius:    50px !important;
    border:           var(--border-icon);
    background-color: var(--color-primary-dark);
    color:            var(--color-text-light);
    padding:          var(--icon-padding);
}


header span.s-cart-summary-count {
    background-color:#fff;
    border:1px solid #223c1d  !important;
    color:#223c1d;
}
/* ============================================================
   الموبايل - Mobile (max-width: 992px)
   ============================================================ */
@media (max-width: 992px) {

    /* خلفية الهيدر وإزالة الحدود */
    header.store-header.centered_logo {
        position:         relative;
        background-color: var(--color-bg-header);
        border:           transparent !important;
    }

    /* حجم وشكل أيقونات الهيدر */
    .centered_logo .header-btn__icon {
        width:         2.5rem;
        border-radius: 50px !important;
    }

    /* تنسيق أيقونات البحث والسلة والمستخدم */
    span.header-btn__icon.icon.sicon-search,
    i.header-btn__icon.icon.sicon-cart,
    i.header-btn__icon.sicon-user {
        border-radius:    50px !important;
        border:           var(--border-icon);
        background-color: var(--color-primary-dark);
        color:            var(--color-text-light);
    }

    /* أيقونة القائمة الجانبية */
    header i.sicon-menu.text-2xl {
        border-radius:    50px !important;
        border:           var(--border-icon);
        background-color: var(--color-primary-dark);
        color:            var(--color-text-light);
        padding:          var(--icon-padding);
    }

  section.s-block.s-block--special-products-slider--3.sl-bg.s-block--special-products-slider > div > div.lg\:w-1\/3.flex.items-center.justify-center.bg-cover.bg-no-repeat.text-center.relative.min-h-\[250px\].max-h-\[350px\].md\:max-h-\[700px\].has-overlay--opacity-option.has-overlay--opacity-0 > img ,
section.s-block.s-block--special-products-slider--4.sl-bg.s-block--special-products-slider.reversed > div > div.lg\:w-1\/3.flex.items-center.justify-center.bg-cover.bg-no-repeat.text-center.relative.min-h-\[250px\].max-h-\[350px\].md\:max-h-\[700px\].has-overlay--opacity-option.has-overlay--opacity-0 > img{
    object-fit:contain;
}
}