/* =====================================================
   GLOBAL DESIGN SYSTEM (الهوية العامة)
   ===================================================== */

/* 🎨 الألوان الأساسية */
:root{
  --lux-bg: #ffffff;              /* خلفية الموقع */
  --lux-text: #111111;            /* النص الأساسي */
  --lux-muted: rgba(17,17,17,.65);/* نص ثانوي */
  --lux-border: rgba(0,0,0,.08);  /* حدود ناعمة */
  --lux-soft: rgba(0,0,0,.06);    /* خلفيات خفيفة */

  --lux-accent: #b08d57;          /* لون فخم (ذهبي ناعم) */

  --lux-radius: 18px;             /* زوايا عامة */
  --lux-radius-sm: 14px;

  --lux-shadow: 0 12px 28px rgba(0,0,0,.06);
  --lux-shadow-hover: 0 18px 40px rgba(0,0,0,.10);
}

/* تأكيد الخلفية البيضاء (حل مشكلة السواد) */
html, body,
section,
.s-block,
.s-products-slider-wrapper,
.s-slider-wrapper{
  background: var(--lux-bg) !important;
  color: var(--lux-text) !important;
}

/* =====================================================
   SLIDER TITLES (عناوين الأقسام)
   ===================================================== */

.s-slider-block__title{
  margin-bottom: 14px !important;
  align-items: center;
}

.s-slider-block__title h2{
  font-size: 20px !important;
  font-weight: 900 !important;
  position: relative;
}

/* خط فخم بسيط تحت العنوان */
.s-slider-block__title h2::after{
  content:"";
  display:block;
  width: 32px;
  height: 3px;
  margin-top: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--lux-accent), transparent);
}

/* زر "عرض الكل" */
.s-slider-block__display-all{
  font-size: 14px !important;
  font-weight: 700;
  opacity: .7;
  border: 1px solid var(--lux-border);
  padding: 6px 12px;
  border-radius: 999px;
}

.s-slider-block__display-all:hover{
  opacity: 1;
}

/* =====================================================
   SLIDER ARROWS (أسهم السلايدر)
   ===================================================== */

.s-slider-nav-arrow{
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid var(--lux-border) !important;
  box-shadow: var(--lux-shadow);
}

/* إخفاء الأسهم في الجوال (السحب أفضل UX) */
@media (max-width: 767px){
  .s-slider-nav-arrow{
    display: none !important;
  }
}

/* =====================================================
   PRODUCT CARD (كرت المنتج)
   ===================================================== */

.s-product-card-entry{
  background: #fff !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  overflow: hidden;
  box-shadow: var(--lux-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover للكمبيوتر */
@media (hover:hover){
  .s-product-card-entry:hover{
    transform: translateY(-2px);
    box-shadow: var(--lux-shadow-hover);
  }
}

/* -----------------------------------------------------
   صورة المنتج
   ----------------------------------------------------- */

.s-product-card-image{
  background: #fff;
  padding: 2px;
}

.s-product-card-image a{
  display: block;
  border-radius: var(--lux-radius-sm);
  overflow: hidden;
}

.s-product-card-image img{
  width: 100%;
  aspect-ratio: 1 / 1;     /* صورة مربعة */
  object-fit: contain;
}

/* -----------------------------------------------------
   محتوى الكرت
   ----------------------------------------------------- */

.s-product-card-content{
  padding: 12px;
}

/* عنوان المنتج (سطرين) */
.s-product-card-content-title a{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* اسم البراند (إن وجد) */
.s-product-card-content-subtitle{
  font-size: 12px;
  margin-top: 6px;
  color: var(--lux-muted);
}

/* -----------------------------------------------------
   السعر
   ----------------------------------------------------- */

.s-product-card-content-sub{
  margin-top: 1px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.s-product-card-price{
  font-size: 18px;
  font-weight: 900;
}

.s-product-card-price-before{
  font-size: 13px;
  color: rgba(0,0,0,.45);
  text-decoration: line-through;
}

/* -----------------------------------------------------
   أزرار (السلة + المفضلة)
   ----------------------------------------------------- */

.s-product-card-content-footer{
  margin-top: 10px;
  gap: 10px;
}

/* زر أضف للسلة */
.s-product-card-content-footer .s-button-element{
  border-radius: var(--lux-radius-sm);
  font-weight: 800;
  padding: 12px;
}

/* زر المفضلة */
.s-product-card-wishlist-btn .s-button-element{
  width: 42px;
  height: 42px;
  border-radius: var(--lux-radius-sm);
  border: 1px solid var(--lux-border);
}

/* =====================================================
   MOBILE TUNING (الجوال)
   ===================================================== */

@media (max-width: 767px){

  /* 🔧 أهم تعديل: عرض كرتين في الشاشة */
  .s-products-slider-card{
    width: 50% !important;  /* ← عدّلها لو حبيت (48% أو 55%) */
    max-width: 50% !important;
  }

  /* تصغير الخط قليلاً */
  .s-product-card-content-title a{
    font-size: 13.5px;
  }

  .s-product-card-price{
    font-size: 15px;
  }

  /* زر أصغر */
  .s-product-card-content-footer .s-button-element{
    padding: 11px;
    font-size: 13px;
  }
}

/* =====================================================
   FOOTER — Luxury Soft Dark
   ===================================================== */

.store-footer{
  background: linear-gradient(180deg, #0f0f0f, #141414);
  color: #eaeaea;
}

/* عناوين الفوتر */
.store-footer h3{
  color: #fff;
  font-weight: 900;
}

.store-footer h3::after{
  content:"";
  display:block;
  width: 26px;
  height: 3px;
  margin-top: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--lux-accent), transparent);
}

/* أيقونات التواصل */
.store-footer .s-social-link a{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* =====================================================
   SECTION SPACING – تحسين المسافات بين الأقسام
   ===================================================== */

/* المسافة العامة بين كل بلوك أقسام */
.s-block,
.s-products-slider-wrapper{
  margin-bottom: 60px !important; /* ← المسافة بين الأقسام */
}

/* مسافة أعلى أول قسم */
.s-block:first-of-type,
.s-products-slider-wrapper:first-of-type{
  margin-top: 40px !important;
}

/* =====================================================
   SLIDER INTERNAL SPACING
   ===================================================== */

/* مسافة العنوان عن المنتجات */
.s-slider-block__title{
  margin-bottom: 24px !important;
}

/* مسافة بين كروت المنتجات داخل السلايدر */
.s-slider-container{
  padding-bottom: 6px;
}

/* =====================================================
   PRODUCT CARD SPACING
   ===================================================== */

/* مسافة داخلية أريح للكرت */
.s-product-card-content{
  padding: 14px !important;
}

/* مسافة بين العنوان والسعر */
.s-product-card-content-main{
  margin-bottom: 1px;
  margin-top: 1px;
}

/* مسافة زر السلة */
.s-product-card-content-footer{
  margin-top: 4px;
}

/* =====================================================
   MOBILE SPACING (الجوال)
   ===================================================== */

@media (max-width: 767px){

  /* تقليل المسافة بين الأقسام في الجوال */
  .s-block,
  .s-products-slider-wrapper{
    margin-bottom: 36px !important;
  }

  /* مسافة العنوان */
  .s-slider-block__title{
    margin-bottom: 18px !important;
  }

  /* مسافة جانبية خفيفة */
  .swiper{
    padding-inline: 6px;
  }
}
/* =====================================================
   STEP 3 – تحسين هيدر أقسام المنتجات (Title / View All / Arrows)
   ===================================================== */

/* توزيع العنوان + عرض الكل + الأسهم */
.s-slider-block__title{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
}

/* العنوان */
.s-slider-block__title h2{
  font-size: 22px !important;     /* ← حجم العنوان */
  font-weight: 700 !important;    /* ← سماكة */
  letter-spacing: 0.2px;
  margin: 0 !important;
}

/* زر عرض الكل */
.s-slider-block__display-all{
  font-size: 14px !important;
  font-weight: 600 !important;
  opacity: .85;
  text-decoration: none !important;
  transition: .2s ease;
}

.s-slider-block__display-all:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* مجموعة الأسهم */
.s-slider-block__title-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* زر السهم */
.s-slider-nav-arrow{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.06) !important;
  transition: .2s ease;
}

/* أيقونة السهم */
.s-slider-nav-arrow svg{
  width: 22px !important;
  height: 22px !important;
}

/* Hover */
.s-slider-nav-arrow:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.09) !important;
}

/* Disabled */
.s-slider-nav-arrow.swiper-button-disabled,
.s-slider-nav-arrow[disabled]{
  opacity: .35 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 767px){
  .s-slider-block__title h2{
    font-size: 18px !important;
  }

  .s-slider-nav-arrow{
    width: 36px !important;
    height: 36px !important;
  }

  .s-slider-nav-arrow svg{
    width: 20px !important;
    height: 20px !important;
  }
}
/* =====================================================
   STORE FEATURES – Mobile 3 Icons in One Row
   خاص بقسم s-block--features
   ===================================================== */

/* ===== الشكل العام للقسم ===== */
.s-block--features{
  margin-top: 40px;
  margin-bottom: 40px;
}

/* عنصر الميزة */
.s-block--features__item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover:hover){
  .s-block--features__item:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,.08);
  }
}

/* ===== الأيقونة ===== */
.feature-icon{
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: rgba(64,33,39,.08); /* لون الهوية */
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon i{
  font-size: 22px;
  color: #402127; /* لون الهوية */
}

/* ===== العنوان ===== */
.s-block--features__item h2{
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}

/* ===== الوصف ===== */
.s-block--features__item p{
  font-size: 12.5px;
  color: rgba(0,0,0,.65);
  line-height: 1.5;
}

/* =====================================================
   MOBILE – 3 ICONS IN ONE ROW
   ===================================================== */

@media (max-width: 767px){

  /* نجبر الشبكة تكون 3 أعمدة */
  .s-block--features .grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  /* تصغير الكرت */
  .s-block--features__item{
    padding: 12px 12px;
  }

  /* تصغير الأيقونة */
  .feature-icon{
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
  }

  .feature-icon i{
    font-size: 18px;
  }

  /* تصغير النص */
  .s-block--features__item h2{
    font-size: 12.5px;
  }

  .s-block--features__item p{
    font-size: 11.5px;
    line-height: 1.4;
  }

/* =====================================================
   FIX: features first item spanning 2 columns
   (make all features equal width)
   ===================================================== */

/* على الجوال: امنع أول عنصر من التمدد */
@media (max-width: 767px){
  .s-block--features__item:first-child{
    grid-column: auto !important; /* يلغي span 2 */
  }

  /* خلي الشبكة 3 أعمدة في الجوال */
  .s-block--features .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =====================================================
   PAYMENTS (تكبير أيقونات الدفع)
   ===================================================== */