/* =========================================
   1. تنسيقات عامة (للكمبيوتر والجوال)
   ========================================= */
/* =========================================
   تعديل الشعار مع السكرول (حل شامل)
 ========================================= */
h2, h3 {
    font-size: 1.75rem;
}

  #V_multi_slider-0 .text-content {
      transform: translateY(-110px) !important; /* يرفع النص للأعلى في سطح المكتب فقط */
  }


@media (max-width: 1024px) {
    salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *) {
        padding-right: 0.4rem;
    }
}
salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *) {
    padding-left: 0.5rem;
}
.V__marquee salla-slider .itemmarq {
  font-weight: 600;
}
/* 1. إخفاء الصورة الأصلية تماماً */
header.store-header .navbar-brand img {
    display: none !important;
    opacity: 0 !important;
}

/* 2. الحالة الافتراضية (أعلى الصفحة) = الشعار الداكن */
/* هذا الشعار سيظهر عندما تكون الخلفية شفافة في البداية */
header.store-header .navbar-brand {
    background-image: url('https://i.ibb.co/V4ybz9V/logo-green.png') !important;
    
    /* تنسيقات الموضع والحجم */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 50px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    transition: background-image 0.2s ease-in-out; /* نعومة في التبديل */
}

/* 3. حالة السكرول (عند النزول) = الشعار العادي */
/* قمت بإضافة عدة محددات (Selectors) لضمان التقاط حالة السكرول مهما كان اسم الكلاس */
header.store-header.is-sticky .navbar-brand,
.fixed-header .navbar-brand,
.sticky-header .navbar-brand,
#mainnav.fixed-header .navbar-brand {
    background-image: url('https://i.ibb.co/Tq7PrmXt/Logo.png') !important;
}
/* إخفاء صورة الشعار القديمة تماماً */



header.store-header .flex.items-center.justify-between {
    position: relative;
    min-height: 50px; /* مساحة كافية لعدم تداخل الشعار مع العناصر */
}

header.store-header .navbar-brand img {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* وضع الصورة الجديدة وتوسيطها في منتصف الهيدر */
header.store-header .navbar-brand {

    /* ضبط العرض */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px; 
    height: 40px; /* قمت بزيادته قليلاً ليكون الشعار أوضح */
    display: block;

    /* التوسيط المطلق */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

/* ضبط الحاوية لضمان عمل التوسيط */

/* إخفاء الأزرار (عملة، لغة، ثيم) */
button[tooltip="تغيير العملة"],
button[tooltip="تغيير اللغة"],
#theme-toggle-btn {
    display: none !important;
}

/* تقليل ارتفاع البار السفلي */

.text-content {
    transform: translateY(-170px) !important; /* كلما زاد الرقم بالسالب، ارتفع العنصر أكثر */
}
.text-content > div {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}


/* =========================================
   2. تنسيقات خاصة بالجوال فقط (أقل من 1024px)
   ========================================= */
@media (max-width: 1024px) {
    .main-nav-container.fixed-header .inner {
        border-radius: 0px 0px 15px 15px;
    }
}

.s-product-card-content {
    margin: 15px 0px 0px 0px;
}
.s-product-card-content-main {
  align-items: center;
}
.s-product-card-content-sub {
    justify-content: center;
    margin-bottom: 15px;
}
.s-product-card-content-title a {
    font-size: 0.9rem;
    font-weight: 700;
    padding-bottom: 5px;
}
.s-button-primary.s-button-element .s-button-text .btn-text-one, .s-button-primary.s-button-element .s-button-text .btn-text-two {
    color: #073005 !important;
}
.s-button-btn, .s-button-primary.s-button-element, .s-payments-list-item, .s-price-range-number-input {
  background-color: #d3e9d6;
}

.s-product-card-entry .s-button-btn, .s-product-card-entry .s-button-primary.s-button-element {
    border-color: #d3e9d6;
    border-radius: 0;
}
.s-product-card-price .sicon-sar {
  color: #c18f4f;
}
.s-product-card-price, .s-product-card-starting-price h4 {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: #c18f4f;
}
.s-count-down-boxed .s-count-down-item {
    border-radius: 0rem;
  }
/* =========================================
   تعديل قسم المميزات: صورة في الأعلى + شبكة 2x2 في الأسفل
   ========================================= */

/* 1. تحويل الحاوية الرئيسية إلى شبكة (Grid) */
/* هذا الصندوق يحتوي على القائمة اليمنى، الصورة الوسطى، والقائمة اليسرى */
#V_group_features-7 .container > div {
    display: grid !important;
    /* تقسيم المساحة إلى عمودين متساويين للمميزات */
    grid-template-columns: repeat(2, 1fr) !important;
    
    align-items: start !important;
}

/* 2. تنسيق حاوية الصورة الوسطى (Slider) */
#V_group_features-7 .relative.mx-auto.flex-1 {
    display: block !important;       /* التأكد من ظهور الصورة */
    grid-column: 1 / -1 !important;  /* جعل الصورة تمتد على كامل عرض العمودين (صف كامل لوحدها) */
    order: -1 !important;            /* إجبار الصورة لتكون أول عنصر في الأعلى */
  /* مسافة كبيرة بين الصورة والمميزات تحتها */
    width: 100% !important;
    margin-top: 50px;
    max-width: 600px !important;     /* تحديد عرض أقصى للصورة حتى لا تكون ضخمة جداً (اختياري) */
}

/* 3. إلغاء أغلفة القوائم (ul) لدمج العناصر */
/* هذه الخطوة السحرية تفرغ محتويات القائمتين لتصبح 4 عناصر منفصلة تحت الصورة */
#V_group_features-7 ul {
    display: contents !important;
}

/* --- تنسيق شكل الميزة الواحدة (مأخوذ من طلباتك السابقة) --- */

/* 4. جعل الميزة عمودية (صورة فوق ونص تحت) وفي المنتصف */
#V_group_features-7 ul li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 10px !important;
}

/* 5. ضبط مسافة أيقونة الميزة وتوسيطها */
#V_group_features-7 ul li img {
    margin: 0 auto 15px auto !important;
    display: block !important;
}

/* 6. ضمان توسيط النصوص الداخلية */
#V_group_features-7 ul li div,
#V_group_features-7 ul li div p {
    text-align: center !important;
    width: 100% !important;
}
.s-block__title {
    justify-content: center;
}
.s-block__title h2 {
      color: #083004;
  padding-top: 15px;
      font-size: 1.35rem;
}
.s-block__title .right-side:where([dir=rtl],[dir=rtl] *) {
    padding-left: 0rem;
}
.s-product-card-special .s-product-card-content-main:where([dir=rtl],[dir=rtl] *), special .s-product-card-content-sub:where([dir=rtl],[dir=rtl] *) {
    padding-left: 0rem;
}
.s-count-down-boxed .s-count-down-item {
  background-color: rgb(210 233 214);
}
.s-block--special-products .tabs {
    display: none;
}
#V_countdown_banner-2 .absolute.inset-0 {
    background-color: white !important;
}
/* استهداف الزر داخل بانر العد التنازلي وإخفاؤه */
#V_countdown_banner-2 a.fancy {
    display: none !important;
}
.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: 350px;
}

salla-slider.details-slider .swiper-slide {
    background-color: #ffffff;
}

/* استهداف الشرائح داخل هذا القسم تحديداً */
#V_styled_categories-3 .swiper-slide {
    width: 100px !important; /* ضع العرض الذي تريده هنا */
    max-width: 100% !important; /* لضمان عدم الخروج عن الشاشة في الجوال */
}
.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: 200px;
}
.-translate-y-1\/2 {
  display: none;
}