/* ===============================
   COLOR SYSTEM
================================*/
:root{
  --bg:#F9F4F4;
  --card:#ffffff;
  --text:#1b1b1b;
  --soft:#7d7d7d;
  --primary:#E58B4E;
  --primary-dark:#C96F33;
  --shadow:rgba(0,0,0,.06);
}

/* ===============================
   GLOBAL BACKGROUND
================================*/
body,.app,.main-content,.store-container{
  background:var(--bg)!important;
}

/* ===============================
   HERO FULL WIDTH
================================*/
.s-slider,
.s-slider-wrapper,
.s-slider .swiper,
.s-slider .swiper-slide{
  width:100vw!important;
  max-width:100vw!important;
  margin:0!important;
  border-radius:0!important;
}

/* ===============================
   PRODUCT GRID
================================*/
.s-products-grid{
  gap:28px!important;
}

/* ===============================
   PRODUCT CARD
================================*/
.s-product-card{
  background:var(--card)!important;
  border-radius:22px!important;
  padding:16px!important;
  box-shadow:0 12px 30px var(--shadow)!important;
  border:none!important;
  transition:.35s ease;
}
.s-product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/* ===============================
   PRODUCT IMAGE
================================*/
.s-product-card-image{
  background:#f3f3f3;
  border-radius:16px;
  padding:12px;
}
.s-product-card-image img{
  object-fit:contain;
  max-height:180px;
}

/* ===============================
   PRODUCT TEXT
================================*/
.s-product-card-title{
  color:var(--text)!important;
  font-weight:800;
  font-size:18px;
  margin-top:10px;
}

.s-product-card-subtitle{
  color:var(--soft)!important;
  font-size:14px;
}

/* ===============================
   PRICE
================================*/
.s-product-card-price{
  color:var(--text)!important;
  font-size:22px;
  font-weight:900;
}
.s-product-card-regular-price{
  color:#a8a8a8!important;
}

/* ===============================
   ADD TO CART
================================*/
.s-product-card-add-btn{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important;
  border-radius:16px!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:700;
  padding:14px!important;
  width:100%;
  border:none!important;
  box-shadow:0 8px 22px rgba(229,139,78,.4);
}

/* ===============================
   DISCOUNT BADGE
================================*/
.s-product-card-discount{
  background:var(--primary);
  color:#fff;
  border-radius:30px;
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
}

/* ===============================
   WISHLIST
================================*/
.s-product-card-wishlist{
  background:#fff;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* ===============================
   MOBILE SLIDER
================================*/
@media(max-width:768px){
  .s-products-grid{
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory;
  }
  .s-product-card{
    min-width:80%;
    scroll-snap-align:start;
  }
}



/* ===== FORCE HERO FULL WIDTH - SA-LOOTS FIX ===== */

/* شيل أي كونتينر محيط بالهيدر */
.store-home .container,
.store-home .container-fluid,
.store-home .row,
.store-home .col-12 {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* السلايدر نفسه */
.store-home .s-slider {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* السوايبر الداخلي */
.store-home .s-slider .swiper,
.store-home .s-slider .swiper-wrapper,
.store-home .s-slider .swiper-slide {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* امنع أي انحراف */
body {
    overflow-x: hidden !important;
}

/* اجعل حاضنة صورة المنتج بيضاء */
.s-product-card-image,
.s-product-card-image a,
.s-product-card-image .s-product-image {
    background: #ffffff !important;
    border-radius: 16px;
}

/* الصورة نفسها */
.s-product-card-image img {
    background: #ffffff !important;
    object-fit: contain;
}


/* ==== REMOVE CONTAINER LIMIT ==== */
.store-home .container,
.store-home .container-fluid,
.store-home .row,
.store-home .col-12 {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* ==== HERO FULL WIDTH ==== */
.store-home .s-slider {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* ==== SWIPER CORE ==== */
.store-home .s-slider .swiper,
.store-home .store-home .s-slider .swiper-wrapper,
.store-home .s-slider .swiper-slide {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* منع أي سكرول أفقي */
body {
    overflow-x: hidden !important;
}


/* ===== REMOVE ALL WIDTH LIMITERS ===== */
body, html {
  overflow-x: hidden !important;
}

.store-home .salla-home-sections,
.store-home .container,
.store-home .container-fluid,
.store-home .row,
.store-home .col-12,
.store-home .s-block {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== HERO FULL WIDTH TRUE FIX ===== */
.store-home .s-slider {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* ===== SWIPER INTERNAL ===== */
.store-home .s-slider .swiper,
.store-home .s-slider .swiper-wrapper,
.store-home .s-slider .swiper-slide {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* ===== ENSURE IMAGES STRETCH ===== */
.store-home .s-slider img {
    width: 100%;
    object-fit: cover;
}


/* ===========================================
   FULL WIDTH HERO SLIDER (FIRST BANNER ONLY)
   Raed Theme
=========================================== */

/* السكشن نفسه */
.index section.s-block--photos-slider {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* السلايدر الداخلي */
.index section.s-block--photos-slider .swiper,
.index section.s-block--photos-slider .swiper-wrapper,
.index section.s-block--photos-slider .swiper-slide {
  width: 100vw !important;
  max-width: 100vw !important;
}

/* الصور نفسها */
.index section.s-block--photos-slider img {
  width: 100vw !important;
  height: auto !important;
  object-fit: cover !important;
}

/* منع أي حواف من الثيم */
.index section.s-block--photos-slider .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===============================
   Raed Theme - True Full Width Hero Slider
   =============================== */

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

/* شيل قيود الكونتينر */
.index section.s-block--photos-slider > .container,
.index section.s-block--photos-slider .s-slider-container,
.index section.s-block--photos-slider .swiper{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* السلايد */
.index section.s-block--photos-slider .swiper-slide{
  width:100% !important;
}

/* الصورة */
.index section.s-block--photos-slider img{
  width:100% !important;
  height: auto !important;
  object-fit: cover;
}


/* ===========================================
   Custom Banners (العناصر المخصصة)
   =========================================== */

.index section.s-block--banners .grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
}

/* كل عنصر */
.index section.s-block--banners .banner-entry{
    flex: 0 0 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
    scroll-snap-align: start;
    background: transparent !important;
}

/* الصندوق اللي فيه الصورة (ده اللي سلة بتحط فيه الخلفية) */
.index section.s-block--banners .banner-entry .lazy_bg{
    width: 100% !important;
    height: 160px !important;              /* ده أهم سطر */
    min-height: 160px !important;          /* يمنع collapse */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 50% !important;
    display: block !important;
}

/* إزالة أي خلفية رمادي */
.index section.s-block--banners .banner-entry,
.index section.s-block--banners .banner-entry [data-bg],
.index section.s-block--banners .banner-entry .lazy_bg{
    background-color: transparent !important;
}

/* اسم القسم تحت الصورة */
.index section.s-block--banners .banner-entry span,
.index section.s-block--banners .banner-entry h3{
    text-align: center;
    font-weight: 700;
    margin-top: 8px;
}


/* Disable Raed theme first banner override */
.index section.s-block--banners .two-row .banner-entry:first-child{
    padding: 0 !important;
}

/* Force all banner cards same size */
.index section.s-block--banners .banner-entry{
    padding: 0 !important;
}

/* Normalize image container */
.index section.s-block--banners .banner-entry .lazy_bg{
    width: 160px !important;
    height: 160px !important;
    min-width: 160px !important;
    min-height: 160px !important;
    border-radius: 50%;
    background-size: cover !important;
    background-position: center !important;
}

/* === Fix Raed banner collapse === */
body.theme-raed section.s-block--banners .two-row > a.banner-entry{
    padding: 0 !important;
    height: 180px !important;
    min-height: 180px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Kill the oversized first item */
body.theme-raed section.s-block--banners .two-row > a.banner-entry:first-child{
    height: 180px !important;
    min-height: 180px !important;
}

/* Force image container to fill */
body.theme-raed section.s-block--banners .two-row > a.banner-entry .lazy_bg{
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}
/* Center custom banners row on desktop */
@media (min-width: 1024px){
  body.theme-raed section.s-block--banners .two-row{
      justify-content: center !important;
  }
}

/* Enlarge custom category circles on desktop only */
@media (min-width: 1024px){
  body.theme-raed section.s-block--banners .two-row a.banner-entry{
      transform: scale(1.12);   /* ≈ 30px زيادة حسب الحجم الحالي */
  }
}



/* ===============================
   Section Titles – Responsive
================================ */

/* الشكل العام لكل الشاشات */
.s-slider-block__title{
  display: flex !important;
  margin-bottom: 28px;
}

.s-slider-block__title h2{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 36px;
  font-weight: 700;
  font-size: 20px;
  color: #ff8a00;
  background: rgba(255,138,0,.12);
  border-radius: 999px;
  line-height: 1.4;
}

/* الخط الجمالي تحت العنوان */
.s-slider-block__title h2::after{
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent,
    #ff8a00,
    transparent
  );
  border-radius: 10px;
}


/* ===============================
   Mobile & Tablet (يمين)
================================ */
@media (max-width: 1023px){

  .s-slider-block__title{
    justify-content: flex-start !important; /* RTL → يمين */
    text-align: right !important;
    padding-right: 12px;
  }

  .s-slider-block__title h2{
    font-size: 18px;
    padding: 10px 28px;
    margin-right: 0;
  }

}


/* ===============================
   Desktop (وسط)
================================ */
@media (min-width: 1024px){

  .s-slider-block__title{
    justify-content: center !important;
    text-align: center !important;
  }

  .s-slider-block__title h2{
    font-size: 22px;
    padding: 14px 44px;
    margin: 0 auto;
  }

}