/* =========================================================
   (1) الهيدر — كود 20 النهائي + ألوان مليار (100%). مايحتاج جي اس 
   ========================================================= */

/* ✅ 1) خلفية الهيدر الأساسية */
header,
.header,
.header-area,
.header-wrapper,
.navbar,
.navbar-bg,
.navbar-background,
.header-bg,
.header-background {
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* ✅ 2) الهيدر وقت يصير Sticky */
header.is-sticky,
header.sticky,
header.fixed,
.header.is-sticky,
.header.sticky,
.header.fixed,
.navbar.is-sticky,
.navbar.sticky,
.navbar.fixed {
  background: #ffffff !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.10) !important;
}

/* ✅ 3) دمج الهيدر + البحث (بدون خلفية منفصلة تحتهم) */
.search-bg,
.search-wrapper-bg,
.search-container,
.searchbar,
.search-bar,
.header-search,
.header-search * {
  background: transparent !important;
  box-shadow: none !important;
}

/* ✅ 4) نعومة الحواف للهيدر */
header,
.header-area,
.navbar {
  border-radius: 0 0 28px 28px !important;
  overflow: hidden !important;
}

/* ✅ 5) إلغاء أي فراغ/طبقة تحت الهيدر تسبب ثغرة */
.header-space,
.header-spacer,
.header-gap,
.header-offset,
.header-shadow,
.header-underlay,
.header-overlay {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ 6) يمنع ظهور فراغ تحت الهيدر وقت السكرول */
main,
.page-content,
.content,
.store-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ✅ 7) سلاسة التفاعل */
header,
.navbar {
  transition: all 0.25s ease-in-out !important;
}

/* ✅ 8) ضمان الهيدر فوق كل شيء */
header,
.navbar {
  position: relative !important;
  z-index: 9999 !important;
}

/* ✅ الشعار (الحجم النهائي المعتمد) */
header .store-logo img,
header .navbar__brand img,
header .navbar-brand img,
header .header__logo img{
  transform: translateX(-10px) scale(1.49) !important;
  transform-origin: center right !important;
  max-width: 40vw !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
}

/* ✅ حماية زر القائمة ما يختفي */
header .navbar__toggle,
header .menu-toggle,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"]{
  position: relative !important;
  z-index: 9999 !important;
}


/* =========================================================
   (2) تدرّج “سهل” — متغيرات
   ========================================================= */

:root{
  --sahl-g1:#f3a33b;  /* برتقالي */
  --sahl-g2:#c85a8f;  /* موف */
  --sahl-g3:#6a4bdc;  /* بنفسجي */
  --sahl-grad: linear-gradient(135deg,var(--sahl-g1),var(--sahl-g2),var(--sahl-g3));
}


/* =========================================================
   (3) زر القائمة + أيقونات الهيدر (السلة/الحساب) — كما هو
   ========================================================= */

/* ✅ زر القائمة ☰ */
body .store-header .navbar__toggle span,
body .store-header .menu-toggle span,
body .store-header .navbar__toggle .hamburger-inner,
body .store-header .navbar__toggle .hamburger-inner::before,
body .store-header .navbar__toggle .hamburger-inner::after,
body .store-header .menu-toggle .hamburger-inner,
body .store-header .menu-toggle .hamburger-inner::before,
body .store-header .menu-toggle .hamburger-inner::after,
body .store-header .navbar__toggle i,
body .store-header .menu-toggle i{
  background: var(--sahl-grad) !important;
}

/* ✅ لو زر القائمة SVG */
body .store-header .navbar__toggle svg,
body .store-header .menu-toggle svg{
  stroke: var(--sahl-g2) !important;
  fill: var(--sahl-g2) !important;
}

/* ✅ الحساب + السلة (بدون تكبير) */
body .store-header a[href*="cart"] i,
body .store-header a[href*="cart"] svg,
body .store-header a[href*="account"] i,
body .store-header a[href*="account"] svg,
body .store-header a[href*="profile"] i,
body .store-header a[href*="profile"] svg{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* =========================================================
   (4) حواف الدائرة فقط للسلة/الحساب — كما هو
   ========================================================= */

header .header-icons a,
header .nav-icons a,
header .store-header a,
header .navbar a{
  background: transparent !important;
}

header a[href*="cart"] i,
header a[href*="cart"] svg,
header a[href*="account"] i,
header a[href*="account"] svg,
header a[href*="profile"] i,
header a[href*="profile"] svg,
header a[href*="login"] i,
header a[href*="login"] svg{
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--sahl-grad) border-box !important;
  box-shadow: none !important;
}

header a[href*="cart"] i::before,
header a[href*="account"] i::before,
header a[href*="profile"] i::before,
header a[href*="login"] i::before{
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   (5) KILLER GRADIENT (Account only) — كما هو
   ========================================================= */

/* ✅ 0) حماية: لا تلمس السلة/الريال نهائياً */
header a[href*="cart"],
header a[href*="/cart"],
header a[href*="cart"] *,
header a[href*="/cart"] *{
  border: initial !important;
  background: initial !important;
  box-shadow: initial !important;
}

/* ✅ 1) استهداف "زر الحساب" */
header a:has(i[class*="user"]),
header a:has(i[class*="account"]),
header a:has(i[class*="profile"]),
header a:has(svg),
header button:has(i[class*="user"]),
header button:has(i[class*="account"]),
header button:has(i[class*="profile"]),
header button:has(svg){
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ✅ 2) إزالة دائرة الحساب الرمادية */
header a:has(i[class*="user"]) *,
header a:has(i[class*="account"]) *,
header a:has(i[class*="profile"]) *,
header button:has(i[class*="user"]) *,
header button:has(i[class*="account"]) *,
header button:has(i[class*="profile"]) *{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ✅ 3) تدرج شعار سهل على أيقونة الحساب */
header a:has(i[class*="user"]) i,
header a:has(i[class*="account"]) i,
header a:has(i[class*="profile"]) i,
header button:has(i[class*="user"]) i,
header button:has(i[class*="account"]) i,
header button:has(i[class*="profile"]) i{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ✅ 4) SVG للحساب (احتياط) */
header a:has(svg) svg,
header a:has(svg) svg *,
header button:has(svg) svg,
header button:has(svg) svg *{
  fill: var(--sahl-g2) !important;
  stroke: var(--sahl-g2) !important;
}

/* ✅ 5) منع أي إطار مرسوم للحساب */
header a:has(i[class*="user"])::before,
header a:has(i[class*="user"])::after,
header a:has(i[class*="account"])::before,
header a:has(i[class*="account"])::after,
header a:has(i[class*="profile"])::before,
header a:has(i[class*="profile"])::after,
header button:has(i[class*="user"])::before,
header button:has(i[class*="user"])::after{
  display:none !important;
}


/* =========================================================
   (6) KILLER MENU GRADIENT ☰ — كما هو
   ========================================================= */

header .navbar__toggle,
header .menu-toggle,
header .hamburger,
header .burger,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"],
header a[aria-label*="menu"],
header a[aria-label*="Menu"],
header a[aria-label*="القائمة"]{
  position: relative !important;
}

header .navbar__toggle svg,
header .navbar__toggle i,
header .navbar__toggle span,
header .menu-toggle svg,
header .menu-toggle i,
header .menu-toggle span,
header button[aria-label*="menu"] svg,
header button[aria-label*="menu"] i,
header button[aria-label*="menu"] span,
header button[aria-label*="Menu"] svg,
header button[aria-label*="Menu"] i,
header button[aria-label*="Menu"] span,
header button[aria-label*="القائمة"] svg,
header button[aria-label*="القائمة"] i,
header button[aria-label*="القائمة"] span{
  opacity: 0 !important;
}

header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  content: "" !important;
  width: 26px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  background: var(--sahl-grad) !important;
  -webkit-mask: repeating-linear-gradient(
    to bottom,
    #000 0 3px,
    transparent 3px 7px
  ) !important;
  mask: repeating-linear-gradient(
    to bottom,
    #000 0 3px,
    transparent 3px 7px
  ) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}

/* ✅ FIX نهائي: 3 خطوط متساوية + أنحف */
header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  width: 24px !important;
  height: 16px !important;
  border-radius: 0 !important;

  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) !important;

  -webkit-mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  -webkit-mask-position: 0 1px, 0 7px, 0 13px !important;
  -webkit-mask-repeat: no-repeat !important;

  mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) !important;

  mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  mask-position: 0 1px, 0 7px, 0 13px !important;
  mask-repeat: no-repeat !important;
}

/* ✅ FIX نهائي: 3 خطوط متساوية بدون قص */
header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  width: 26px !important;
  height: 18px !important;

  -webkit-mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  -webkit-mask-position: 0 3px, 0 8px, 0 13px !important;
  -webkit-mask-repeat: no-repeat !important;

  mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  mask-position: 0 3px, 0 8px, 0 13px !important;
  mask-repeat: no-repeat !important;

  border-radius: 0 !important;
}

/* ✅ إخفاء زر القائمة الأصلي بالكامل */
header .navbar__toggle,
header .menu-toggle,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"],
header a[aria-label*="menu"],
header a[aria-label*="Menu"],
header a[aria-label*="القائمة"]{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

header .navbar__toggle * ,
header .menu-toggle * ,
header button[aria-label*="menu"] * ,
header button[aria-label*="Menu"] * ,
header button[aria-label*="القائمة"] * ,
header a[aria-label*="menu"] * ,
header a[aria-label*="Menu"] * ,
header a[aria-label*="القائمة"] *{
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

header .navbar__toggle svg,
header .navbar__toggle svg *,
header .menu-toggle svg,
header .menu-toggle svg *,
header button[aria-label*="menu"] svg,
header button[aria-label*="menu"] svg *,
header button[aria-label*="Menu"] svg,
header button[aria-label*="Menu"] svg *,
header button[aria-label*="القائمة"] svg,
header button[aria-label*="القائمة"] svg *{
  fill: transparent !important;
  stroke: transparent !important;
  opacity: 0 !important;
}

header .navbar__toggle::before,
header .menu-toggle::before,
header button[aria-label*="menu"]::before,
header button[aria-label*="Menu"]::before,
header button[aria-label*="القائمة"]::before,
header a[aria-label*="menu"]::before,
header a[aria-label*="Menu"]::before,
header a[aria-label*="القائمة"]::before{
  content: "" !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  z-index: 999999 !important;
  pointer-events: none !important;
}


/* =========================================================
   (7) أرقام/مبلغ الهيدر + البحث
   ========================================================= */

header a[href*="cart"] .price,
header a[href*="cart"] .amount,
header a[href*="cart"] .total,
header a[href*="cart"] .sum,
header a[href*="cart"] strong,
header a[href*="cart"] b,
header a[href*="cart"] span,
header .price,
header .amount,
header .total,
header .sum,
header .currency,
header [class*="price"],
header [class*="amount"],
header [class*="total"],
header [class*="sum"],
header [class*="money"],
header [class*="currency"]{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ✅ البحث كامل (الإطار + مكان الكتابة + المجهر) بتدرّج سهل ضبابي */
:root{
  --sahl-soft: linear-gradient(135deg,
    rgba(243,163,59,0.35),
    rgba(200,90,143,0.35),
    rgba(106,75,220,0.35)
  );
  --sahl-soft-2: linear-gradient(135deg,
    rgba(243,163,59,0.18),
    rgba(200,90,143,0.18),
    rgba(106,75,220,0.18)
  );
}
/* ✅ Search bar colors from Menu icon (soft glass) */
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search input{
  background:
    linear-gradient(135deg,
      rgba(243, 163, 59, 0.16) 0%,
      rgba(200, 90, 143, 0.14) 45%,
      rgba(106, 75, 220, 0.16) 100%
    ) !important;

  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;

  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}

/* placeholder هادي وواضح */
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search input::placeholder{
  color: rgba(255,255,255,0.55) !important;
}
/* =========================================================
   (8) القائمة الجانبية + الهوفر
   ========================================================= */

:root{
  --sahlls-grad: linear-gradient(90deg,
    rgba(245, 204, 164, 0.35) 0%,
    rgba(186, 155, 214, 0.35) 55%,
    rgba(153, 122, 207, 0.35) 100%
  );

  --sahlls-hover: linear-gradient(90deg,
    rgba(245, 204, 164, 0.18) 0%,
    rgba(186, 155, 214, 0.16) 55%,
    rgba(153, 122, 207, 0.18) 100%
  );
}

aside,
.sidebar,
.side-menu,
.drawer,
.drawer-content,
.offcanvas,
.offcanvas-body,
.menu-drawer,
.mobile-menu,
.nav-drawer,
.nav__drawer,
.header-drawer,
[class*="drawer"],
[class*="offcanvas"],
[class*="sidebar"],
[class*="side-menu"]{
  background: var(--sahlls-grad) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  border: none !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.10) !important;
}

aside * ,
.sidebar * ,
.side-menu * ,
.drawer * ,
.drawer-content * ,
.offcanvas * ,
.menu-drawer * ,
.mobile-menu * ,
.nav-drawer * ,
[class*="drawer"] * ,
[class*="offcanvas"] * ,
[class*="sidebar"] * ,
[class*="side-menu"] *{
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.modal-backdrop,
.overlay,
.drawer-overlay,
.offcanvas-backdrop,
.sidebar-overlay,
[class*="overlay"],
[class*="backdrop"]{
  background: rgba(0,0,0,0.25) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
}

aside a,
.sidebar a,
.side-menu a,
.drawer a,
.offcanvas a,
.menu-drawer a,
.mobile-menu a,
.nav-drawer a{
  color: rgba(17,17,17,0.92) !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

aside a:hover,
.sidebar a:hover,
.side-menu a:hover,
.drawer a:hover,
.offcanvas a:hover,
.menu-drawer a:hover,
.mobile-menu a:hover,
.nav-drawer a:hover{
  background: var(--sahlls-hover) !important;
  color: rgba(17,17,17,0.98) !important;
}


/* =========================================================
   (9) خلفية مثل مليار
   ========================================================= */

body{
  background:
    radial-gradient(900px 500px at 85% 15%, rgba(170, 90, 255, 0.16), transparent 60%),
    radial-gradient(700px 450px at 10% 35%, rgba(70, 150, 255, 0.14), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(255, 160, 70, 0.06), transparent 55%),
    linear-gradient(180deg, #050814 0%, #070B1E 35%, #050817 100%) !important;
  background-attachment: fixed;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05), transparent 45%),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,0.04), transparent 55%),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,0.03), transparent 55%);
  filter: blur(6px);
  opacity: 0.9;
}


/* =========================================================
   (10) شريطين أبيض يمين/يسار صورة المنتج
   ========================================================= */

:root{ --sideStripe: 12px; }

.product .product-image,
.product .product-thumb,
.product .product-img,
.product-card .product-image,
.product-card .product-thumb,
.product-card .product-img,
.product-item .product-image,
.product-item .product-thumb,
.product-item .product-img,
.product__image,
.product__img,
.product__thumb,
.s-product-card-image,
.s-product-card__image,
.s-product-card__image-wrapper{
  position: relative !important;
  overflow: hidden !important;
}

.product .product-image::after,
.product .product-thumb::after,
.product .product-img::after,
.product-card .product-image::after,
.product-card .product-thumb::after,
.product-card .product-img::after,
.product-item .product-image::after,
.product-item .product-thumb::after,
.product-item .product-img::after,
.product__image::after,
.product__img::after,
.product__thumb::after,
.s-product-card-image::after,
.s-product-card__image::after,
.s-product-card__image-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: linear-gradient(to right,
    #fff 0, #fff var(--sideStripe),
    transparent var(--sideStripe), transparent calc(100% - var(--sideStripe)),
    #fff calc(100% - var(--sideStripe)), #fff 100%
  );
}
/* =========================
   FEATURES (Milyar Style)
   Mobile-first / No conflicts
   ========================= */

/* 0) تأكيد إلغاء أي span يخرب الصف */
section.s-block.s-block--features .s-block--features__item,
section.s-block.s-block--features .s-block--features__item:first-child{
  grid-column: auto !important;
  min-width: 0 !important;
}

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

/* احتياط للشاشات الصغيرة جدًا */
@media (max-width: 360px){
  section.s-block.s-block--features .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2) الكرت: زجاجي */
section.s-block.s-block--features .s-block--features__item{
  position: relative !important;
  overflow: visible !important;
  padding: 18px 14px 14px !important;
  padding-top: 30px !important; /* مساحة للأيقونة فوق */
  border-radius: 18px !important;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.28) !important;
}

/* 3) النص مناسب للجوال 3 أعمدة */
section.s-block.s-block--features .s-block--features__item h2{
  font-size: 15px !important;
  margin-top: 8px !important;
}
section.s-block.s-block--features .s-block--features__item p{
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  opacity: .92 !important;
}

/* 4) الدائرة (أصغر شوي) */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 46px !important;
  height: 46px !important;
  border-radius: 9999px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  /* حلقة خفيفة بدون ما تطلع مربعة */
  box-shadow: 0 0 0 7px rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.30) !important;

  z-index: 3 !important;
}

/* حجم الأيقونة */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 22px !important;
  color: #fff !important;
  opacity: .96 !important;
}

/* 5) Glow دائري ضبابي أصغر + متدرج */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 9999px !important;
  filter: blur(12px) !important;
  opacity: .85 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ألوان الـ Glow لكل كرت */
section.s-block.s-block--features .s-block--features__item:nth-child(1) .feature-icon::after{
  background: radial-gradient(circle, rgba(77,102,255,.60) 0%, rgba(77,102,255,.18) 45%, rgba(77,102,255,0) 72%) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(2) .feature-icon::after{
  background: radial-gradient(circle, rgba(255,77,170,.58) 0%, rgba(255,77,170,.17) 45%, rgba(255,77,170,0) 72%) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(3) .feature-icon::after{
  background: radial-gradient(circle, rgba(255,196,77,.62) 0%, rgba(255,196,77,.18) 45%, rgba(255,196,77,0) 72%) !important;
}
section.s-block.s-block--features.container .features-real-title{
  text-align: center !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 0 0 18px 0 !important;
}
/* =========================
   PATCH: Fix square glow + stronger white text
   Put this at the VERY END of CSS
   ========================= */

/* 1) نصوص أوضح (العنوان + النص) */
section.s-block.s-block--features .s-block--features__item h2{
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.35) !important;
}
section.s-block.s-block--features .s-block--features__item p{
  color: rgba(255,255,255,.86) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.30) !important;
}

/* 2) خلّ كل الكروت زجاجية لطيفة */
section.s-block.s-block--features .s-block--features__item{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* 3) تصغير الأيقونة الدائرية شوي + إصلاح glow (دائري 100% بدون مربعات) */
/* ✅ FIX: تبديل ألوان الـ glow (الأزرق للسلة + الذهبي للصح) */
section.s-block.s-block--features .s-block--features__item:nth-child(1){
  --glow: rgba(77,102,255,.75) !important;   /* أزرق = السلة */
  --iconbg: rgba(77,102,255,.22) !important;
}

section.s-block.s-block--features .s-block--features__item:nth-child(2){
  --glow: rgba(255,77,170,.70) !important;  /* وردي = واتساب */
  --iconbg: rgba(255,77,170,.20) !important;
}

section.s-block.s-block--features .s-block--features__item:nth-child(3){
  --glow: rgba(255,196,77,.75) !important;  /* ذهبي = الصح */
  --iconbg: rgba(255,196,77,.22) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(2){
  --glow: rgba(255,77,170,.70);   /* وردي */
  --iconbg: rgba(255,77,170,.20);
}
section.s-block.s-block--features .s-block--features__item:nth-child(3){
  --glow: rgba(77,102,255,.75);   /* أزرق */
  --iconbg: rgba(77,102,255,.22);
}

/* دائرة الأيقونة */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  width: 50px !important;
  height: 50px !important;
  top: -22px !important;

  border-radius: 9999px !important;
  background: var(--iconbg) !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  /* مهم جداً لتجنب شكل المربع في بعض الأجهزة */
  box-shadow: none !important;
  overflow: visible !important;
  transform: translateX(-50%) translateZ(0) !important;
  backface-visibility: hidden !important;
  isolation: isolate !important;
}

/* الأيقونة نفسها */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 24px !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* glow دائري ومتدرّج وضبابي */
section.s-block.s-block--features .s-block--features__item .feature-icon::before{
  content: "" !important;
  position: absolute !important;
  inset: -16px !important;
  border-radius: 9999px !important;
  background: radial-gradient(circle at 50% 50%, var(--glow) 0%, rgba(0,0,0,0) 72%) !important;
  filter: blur(12px) !important;
  opacity: .85 !important;
  z-index: -1 !important;
}

/* حلقة خفيفة (تعطي نفس إحساس مليار) */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: "" !important;
  position: absolute !important;
  inset: -9px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
  filter: blur(.3px) !important;
  z-index: -1 !important;
}
/* FINAL PATCH: remove faint ring + shrink icon circle 30% (keep original icon circle) */

/* 1) إزالة الدائرة/الحلقة الخفيفة فقط */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: none !important;
}

/* 2) تصغير دائرة الأيقونة 30% + ضبط مكانها */
section.s-block.s-block--features .s-block--features__item{
  --iconSize: 35px;   /* 50px -> 35px (تقريباً -30%) */
  --iconTop: -16px;   /* تعديل بسيط للتموضع بعد التصغير */
}

section.s-block.s-block--features .s-block--features__item .feature-icon{
  width: var(--iconSize) !important;
  height: var(--iconSize) !important;
  top: var(--iconTop) !important;
}

/* تصغير حجم الأيقونة داخل الدائرة بشكل متناسق */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 18px !important;
}

/* تصغير الهالة بما يناسب الدائرة الجديدة */
section.s-block.s-block--features .s-block--features__item .feature-icon::before{
  inset: -12px !important;
  filter: blur(10px) !important;
  opacity: .82 !important;
}
/* ===== Features Title (لماذا تختار سهل) ===== */
section.s-block.s-block--features [data-feature-title]{
  color:#fff !important;
  text-align:center !important;

  /* مثل عناوين المميزات */
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  margin: 6px 0 16px !important;
  padding: 0 !important;
}

@media (max-width: 380px){
  section.s-block.s-block--features [data-feature-title]{
    font-size: 22px !important;
  }
}

/* نزّل شبكة المميزات تحت العنوان */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}

/* احتياط: لو طلع يمين بسبب RTL/float */
section.s-block.s-block--features [data-features-heading="true"]{
  width: 100% !important;
  display: block !important;
}
/* عنوان المميزات */
section.s-block.s-block--features .s-features-title{
  color:#fff !important;
  text-align:center !important;
  font-weight:900 !important;
  font-size:28px !important;
  line-height:1.2 !important;
  margin: 0 0 18px 0 !important; /* يبعده عن الأيقونات */
  width:100% !important;
  display:block !important;
}

/* نزّل الشبكة تحت العنوان زيادة بسيطة */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}
/* ===== Features Title (لماذا تختار سهل) ===== */
section.s-block.s-block--features [data-feature-title],
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .s-block__title h2{
  color:#fff !important;
  opacity:1 !important;
  font-size: 26px !important;   /* نفس إحساس عنوان كروت المميزات */
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
  margin: 14px 0 22px !important; /* يبعده عن الايقونات */
  padding: 0 !important;
}

/* نزّل شبكة المميزات لتحت زيادة (مسافة بين العنوان والكروت) */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}

/* ✅ 2) جعل عناوين الصفحة أبيض (بدون ما نخرب ألوان الأزرار/الروابط) */
body .s-block__title,
body h1, body h2, body h3{
  color: #fff !important;
}

/* (اختياري) لو فيه عنوان داخل بلوكات يطلع غامق */
body .s-block__subtitle,
body .s-block__header{
  color: rgba(255,255,255,.9) !important;
}
/* ===== Features Title Styling ===== */
.sahll-features-title{
  color:#fff !important;
  text-align:center !important;
  margin: 28px 16px 22px !important;   /* فوق 28 / يمين-يسار 16 / تحت 22 */
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* ✅ ابعاد المميزات عن العنوان (نزّل الشبكة تحت) */
section.s-block.s-block--features .grid{
  margin-top: 38px !important; /* يزيد المسافة بين العنوان والكروت */
}

/* ===== Footer: اجعل العناوين فقط بالأسود ===== */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.s-footer h1, .s-footer h2, .s-footer h3, .s-footer h4, .s-footer h5, .s-footer h6,
.store-footer h1, .store-footer h2, .store-footer h3, .store-footer h4, .store-footer h5, .store-footer h6{
  color:#000 !important;
}
/* ✅ FIX: تبديل ألوان الـ Glow حسب نوع الأيقونة (بدون ما نغير الأيقونة نفسها) */

/* السلة = أزرق */
section.s-block.s-block--features .feature-icon:has(i.sicon-cart2){
  background: rgba(77,102,255,.22) !important;
  box-shadow:
    0 0 0 10px rgba(77,102,255,.10),
    0 0 40px rgba(77,102,255,.55),
    0 12px 35px rgba(0,0,0,.35) !important;
}

/* الصح/التسليم = أصفر/ذهبي */
section.s-block.s-block--features .feature-icon:has(i.sicon-special-check){
  background: rgba(255,196,77,.20) !important;
  box-shadow:
    0 0 0 10px rgba(255,196,77,.12),
    0 0 45px rgba(255,196,77,.55),
    0 12px 35px rgba(0,0,0,.35) !important;
}

/* واتساب = وردي (ثابت) */
section.s-block.s-block--features .feature-icon:has(i.sicon-whatsapp){
  background: rgba(255,77,170,.20) !important;
  box-shadow:
    0 0 0 10px rgba(255,77,170,.10),
    0 0 40px rgba(255,77,170,.50),
    0 12px 35px rgba(0,0,0,.35) !important;
}
/* ✅ FIX نهائي: توزيع ألوان الإضاءة حسب نوع الأيقونة (بدون اعتماد على nth-child) */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  /* نعوّم الإضاءة ونلغي الدائرة الخفيفة الزايدة */
  box-shadow:
    0 0 26px rgba(0,0,0,.30) !important;
}

/* 🛒 السلة = أزرق */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-cart2) .feature-icon{
  background: rgba(77,102,255,.22) !important;
  box-shadow:
    0 0 28px rgba(77,102,255,.55),
    0 0 52px rgba(77,102,255,.28),
    0 12px 30px rgba(0,0,0,.32) !important;
}

/* ✅ الصح = أصفر/ذهبي */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-special-check) .feature-icon{
  background: rgba(255,196,77,.20) !important;
  box-shadow:
    0 0 30px rgba(255,196,77,.55),
    0 0 58px rgba(255,196,77,.26),
    0 12px 30px rgba(0,0,0,.32) !important;
}

/* 💬 واتساب = وردي */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-whatsapp) .feature-icon{
  background: rgba(255,77,170,.20) !important;
  box-shadow:
    0 0 30px rgba(255,77,170,.50),
    0 0 58px rgba(255,77,170,.24),
    0 12px 30px rgba(0,0,0,.32) !important;
}
/* ✅ Spacing for (لماذا تختار سهل) + push icons down */
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .s-block__title h1,
section.s-block.s-block--features .s-block__title h2,
section.s-block.s-block--features [data-feature-title],
.sahll-features-title{
  display: block !important;
  margin: 22px 0 22px 0 !important;   /* تباعد فوق وتحت العنوان */
  padding: 0 !important;
}

/* ✅ Extra space between title and the features cards (icons block) */
section.s-block.s-block--features .grid{
  margin-top: 22px !important;        /* نزّل المميزات تحت العنوان */
}
/* ✅ تباعد أكثر 5% بين عنوان المميزات والكروت */
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .sahll-features-title,
section.s-block.s-block--features h1,
section.s-block.s-block--features h2{
  margin: 50px 0 40px !important; /* فوق / يمين-يسار / تحت */
}

section.s-block.s-block--features .grid{
  margin-top: 59px !important; /* نزّل الكروت أكثر */
}
/* FIX: يلغي أي تحريك/خط غريب ويعطي تباعد نظيف لعنوان "لماذا تختار سهل" */
section.s-block.s-block--features .sahll-features-title,
section.s-block.s-block--features .s-block__title{
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin: 22px 0 32px !important; /* ↑ تباعد فوق/تحت */
  padding: 0 !important;
}

/* نزّل المميزات تحت العنوان (زيادة تباعد) */
section.s-block.s-block--features .grid{
  margin-top: 34px !important;
}
/* توحيد نفس المسافة فوق وتحت سطر "خطة + تطبيق..." */
:root{
--same-gap: 40px; /* غيّرها لو تبي أكثر/أقل */
}




/* (2) نزود فراغ بعد سطر "خطة + تطبيق..." (قبل المنتجات) */
section.s-block.s-block--products .s-block__content,
section.s-block.s-block--products .s-block__body,
section.s-block.s-block--products .s-products-grid,
section.s-block.s-block--products .products-grid,
section.s-block.s-block--products .swiper,
section.s-block.s-block--products .s-slider{
  margin-top: var(--same-gap) !important;
}
@media (min-width: 992px){
  nav#mobile-menu{
    display: none !important;
  }
}
/* =========================================
   ✅ FOOTER + PAYMENTS "مسمار" (Stable Fix)
   - يوحد اللون والتدرج
   - يمنع الزوايا البيضاء
   - يحافظ على النصوص بدون تخريب
========================================= */

/* 1) الفوتر كامل بتدرج واحد + قص الزوايا */
#app footer.store-footer{
  position: relative !important;
  background: linear-gradient(135deg,
    rgba(237,207,178,0.98) 0%,
    rgba(205,190,244,0.98) 55%,
    rgba(173,152,250,0.98) 100%
  ) !important;

  border-radius: 32px !important;
  overflow: hidden !important;

  margin: 0 !important;
  padding: 28px 18px 18px !important;
}

/* 2) نخلي أي خلفيات داخلية شفافة عشان يبان التدرج */
#app footer.store-footer .store-footer__inner,
#app footer.store-footer .container,
#app footer.store-footer .row,
#app footer.store-footer .col,
#app footer.store-footer .links,
#app footer.store-footer .contacts,
#app footer.store-footer > div{
  background: transparent !important;
  background-image: none !important;
}

/* 3) نخفي أي فواصل/خطوط متقطعة مزعجة بالفوتر */
#app footer.store-footer hr,
#app footer.store-footer .separator,
#app footer.store-footer .divider,
#app footer.store-footer [style*="dashed"],
#app footer.store-footer [style*="dotted"]{
  border: 0 !important;
  background: transparent !important;
  height: 0 !important;
}

/* 4) صندوق طرق الدفع (كبير + يعبّي + بدون زوايا بيضاء) */
#app footer.store-footer .lis-payments,
#app footer.store-footer .s-payments{
  width: 100% !important;
  max-width: 100% !important;

  margin: 18px 0 0 !important;
  padding: 18px 16px !important;

  border-radius: 28px !important;

  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow: 0 18px 55px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
}

/* 5) ترتيب أيقونات الدفع */
#app footer.store-footer .lis-payments-list,
#app footer.store-footer .s-payments-list{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* 6) كبسولة كل شعار */
#app footer.store-footer .lis-payments-list-item,
#app footer.store-footer .s-payments-list-item{
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;

  border-radius: 18px !important;
  padding: 12px 16px !important;

  min-width: 92px !important;
  min-height: 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 14px 34px rgba(0,0,0,0.10),
              inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

/* 7) حجم الشعار داخل الكبسولة */
#app footer.store-footer .lis-payments-list-item img,
#app footer.store-footer .s-payments-list-item img{
  height: 28px !important;
  width: auto !important;
  max-width: 70px !important;
  object-fit: contain !important;
  display: block !important;
}
/* ✅ تثبيت ألوان شعارات الدفع الأصلية + خلفية المربعات نفس تدرّج الحاوية */

#app footer.store-footer .lis-payments-list-item img,
#app footer.store-footer .s-payments-list-item img{
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* مربعات الأيقونات نفسها */
#app footer.store-footer .lis-payments-list-item,
#app footer.store-footer .s-payments-list-item{
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* ✅ خلفية داخل كل مربع = نفس تدرّج الحاوية */
#app footer.store-footer .lis-payments-list-item::before,
#app footer.store-footer .s-payments-list-item::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  /* نفس تدرّج الحاوية */
  background: linear-gradient(135deg,
    rgba(237,207,178,0.55) 0%,
    rgba(205,190,244,0.55) 55%,
    rgba(173,152,250,0.55) 100%
  ) !important;

  backdrop-filter: blur(10px) !important;
}

/* نخلي الشعار فوق التدرّج */
#app footer.store-footer .lis-payments-list-item > *,
#app footer.store-footer .s-payments-list-item > *{
  position: relative !important;
  z-index: 1 !important;
}

/* ✅ لو فيه خلفية بيضاء جاية من رابط/عنصر داخل المربع */
#app footer.store-footer .lis-payments-list-item a,
#app footer.store-footer .s-payments-list-item a{
  background: transparent !important;
}
/* تثبيت عنوان: خطة + تطبيق = نتائج من أول أسبوع بالمنتصف + زحزحة يسار + مسافات */
section.s-block.container .s-block__title{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

section.s-block.container .s-block__title .right-side{
  width: 100% !important;
}

section.s-block.container .s-block__title h2{
  width: 100% !important;
  text-align: center !important;
  margin: 34px 0 !important;        /* فوق وتحت */
  transform: translateX(-22px) !important; /* زحزحة يسار حبتين */
}
/* =========================
   ✅ VIP REAL GLASS - Reviews
   class: div.s-reviews-testimonial
   ========================= */

/* 1) تصغير السلايدر وتوسيطه */
.s-reviews-swiper{
  transform: scale(0.65) !important;
  transform-origin: top center !important;
  margin: 0 auto !important;
}

/* 2) كرت زجاجي حقيقي + حدود فخمة */
div.s-reviews-testimonial{
  position: relative !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;

  /* ظل فاخر */
  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* 3) إطار خارجي فاخر (Border Glow) */
div.s-reviews-testimonial::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 1px !important;
  border-radius: 18px !important;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.35)
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;

  pointer-events: none !important;
  opacity: 0.9 !important;
}

/* 4) لمعة زجاج “حقيقية” تمر من الأعلى */
div.s-reviews-testimonial::after{
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -60% !important;
  width: 220% !important;
  height: 140% !important;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.30),
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.00) 70%
  ) !important;

  transform: rotate(12deg) !important;
  filter: blur(1px) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

/* 5) خط لمعان متحرك (اختياري وفخم جداً) */
div.s-reviews-testimonial .glass-shine{
  display: none !important;
}
div.s-reviews-testimonial{
  animation: none !important;
}
div.s-reviews-testimonial{
  /* خط لمعان */
}
div.s-reviews-testimonial::marker{
  content: "" !important;
}

div.s-reviews-testimonial{
  /* نضيف لمعة تمر مرور خفيف */
}
div.s-reviews-testimonial::after{
  animation: vipGlassShine 5.5s ease-in-out infinite !important;
}

@keyframes vipGlassShine{
  0%   { transform: translateX(-6%) rotate(12deg); opacity: 0.65; }
  50%  { transform: translateX(6%)  rotate(12deg); opacity: 0.95; }
  100% { transform: translateX(-6%) rotate(12deg); opacity: 0.65; }
}

/* 6) كل النصوص والأيقونات والنجوم أبيض */
div.s-reviews-testimonial *{
  color: #fff !important;
}
div.s-reviews-testimonial i,
div.s-reviews-testimonial svg{
  color: #fff !important;
  fill: #fff !important;
}

/* 7) توازن للموبايل */
@media (max-width: 768px){
  .s-reviews-swiper{
    transform: scale(0.72) !important;
  }
}
/* تصغير مربع آراء العملاء إلى 83% */
.s-reviews-testimonial{
  transform: scale(0.83) !important;
  transform-origin: top center !important;
  margin: 0 auto !important;
}
/* ✅ مسافة بين آراء العملاء والفوتر (بالسلكتور حقك) */
#app > div.app-inner.flex.flex-col.min-h-full > footer{
  margin-top: 45px !important;
}
/* =========================================================
   ✅ PRODUCT + CART ONLY (Clean & Safe)
   - لا يلمس الهيدر ولا الفوتر
   - الرئيسية تبقى مثل ما هي
   - سعر الخصم يرجع أحمر
========================================================= */


/* =========================
   ✅ PRODUCT PAGE ONLY
========================= */

/* خلفية صفحة المنتج */
body.product-single,
body.page-product{
  background:#fff !important;
}

/* نخلي محتوى المنتج طبيعي بدون طبقات داكنة */
body.product-single main#main-content,
body.page-product  main#main-content,
body.product-single main#main-content > .container,
body.page-product  main#main-content > .container{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* لون النصوص داخل محتوى المنتج فقط (بدون لمس الأسعار) */
body.product-single main#main-content :where(h1,h2,h3,h4,h5,h6,p,small,li,strong,em,label){
  color:#111 !important;
}

/* الروابط داخل المنتج فقط */
body.product-single main#main-content a:not(.btn):not(.button):not([class*="btn"]),
body.page-product  main#main-content a:not(.btn):not(.button):not([class*="btn"]){
  color:#1f4b99 !important;
}




/* =========================
   ✅ CART PAGE ONLY
========================= */

/* خلفية صفحة السلة فقط */
body.page-cart,
body.page-cart #app,
body.page-cart .app-inner,
body.page-cart main#main-content{
  background:#fff !important;
  background-image:none !important;
}

/* إزالة أي طبقة داكنة داخل السلة فقط */
body.page-cart #main-content,
body.page-cart #main-content > div,
body.page-cart #main-content > div > div{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* لون النصوص داخل محتوى السلة فقط */
body.page-cart main#main-content :where(h1,h2,h3,h4,h5,h6,p,span,small,li,strong,b,label){
  color:#111 !important;
}

/* ✅ أيقونة السلة الفاضية فقط — بدون لمس أيقونات الهيدر */
body.page-cart #main-content .no-content-placeholder i.sicon-shopping-bag.icon{
  display:inline-block !important;
  transform: translate(-10px, 12px) scale(1) !important;
}

/* ✅ تكبير الأيقونة */
body.page-cart #main-content .no-content-placeholder i.sicon-shopping-bag.icon::before{
  font-size:86px !important;
  line-height:1 !important;
}
/* =========================================================
   🔒 PRICE LOCK (HOME + PRODUCT + CART) — RAED 1 KILLER
   شروط نايف:
   - السعر بعد الخصم: أحمر (لون سلة) + نحيف + أصغر
   - السعر قبل الخصم: رمادي باهت + غليض + خط عليها
   - يطبق على كل مكان فيه سعر قبل/بعد الخصم
========================================================= */

/* ✅ 1) صفحة عرض المنتج — خانة السعر (تحت التقييم) */
body main#main-content div.container div#product-1788820519
div.flex.whitespace-nowrap p.text-red-800.font-bold.text-xl.inline-block,
body main#main-content div.container div[id^="product-"]
div.flex.whitespace-nowrap p.text-red-800.font-bold.text-xl.inline-block,
body main#main-content p.text-red-800.font-bold.text-xl.inline-block{
  color: var(--color-danger, #d81b29) !important;   /* أحمر سلة */
  font-weight: 300 !important;                      /* نحيف */
  font-size: 16px !important;                       /* أصغر */
  line-height: 1.2 !important;
}

/* السعر قبل الخصم (تحت التقييم) */
body main#main-content div.container div#product-1788820519
div.flex.whitespace-nowrap span.text-gray-500.line-through,
body main#main-content div.container div[id^="product-"]
div.flex.whitespace-nowrap span.text-gray-500.line-through,
body main#main-content span.text-gray-500.line-through{
  color: #b8b8b8 !important;        /* رمادي باهت */
  opacity: .95 !important;
  font-weight: 800 !important;      /* غليض */
  font-size: 15px !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 2) صفحة عرض المنتج — خانة السعر الثانية (بجوار كلمة "السعر") */
body main#main-content div.container div[id^="product-"]
div.price_is_on_sale h2.total-price.text-red-800.font-bold.text-xl.inline-block,
body main#main-content h2.total-price.text-red-800.font-bold.text-xl.inline-block{
  color: var(--color-danger, #d81b29) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* السعر قبل الخصم للخانة الثانية */
body main#main-content div.container div[id^="product-"]
div.price_is_on_sale span.before-price.text-gray-500.line-through,
body main#main-content span.before-price.text-gray-500.line-through{
  color: #b8b8b8 !important;
  opacity: .95 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 3) “أي مكان” في الموقع فيه خصم (حماية ضد الثيم)
   نخلي الأحمر أصغر/أنحف + الرمادي أغلط */
body main#main-content :is(p,h2,div,span).text-red-800{
  color: var(--color-danger, #d81b29) !important;
  font-weight: 300 !important;
}

body main#main-content :is(span,del,s).text-gray-500{
  font-weight: 800 !important;
}

/* ✅ 4) الصفحة الرئيسية / كروت المنتجات (تصغير الأحمر شوي) */
body :is(.product-card,.product-item,.products-list,.product)
:is(p,h2,span).text-red-800{
  font-size: 15px !important;   /* أصغر شوي من قبل */
  font-weight: 300 !important;
  color: var(--color-danger, #d81b29) !important;
}

body :is(.product-card,.product-item,.products-list,.product)
:is(span,del,s).text-gray-500{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #b8b8b8 !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 5) السلة / الكارت (أي سعر أحمر يصير نحيف وصغير) */
body.page-cart main#main-content :is(p,h2,span,div).text-red-800{
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--color-danger, #d81b29) !important;
}

body.page-cart main#main-content :is(span,del,s).text-gray-500{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #b8b8b8 !important;
  text-decoration-thickness: 2px !important;
}
/* ===============================
   🔒 PRICE LOCK — HOME + LISTINGS (RAED 1 KILLER)
   - New price: RED + smaller + thin
   - Old price: GREY + BOLD + line-through
================================= */

body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) h4{
  color:#b91c1c !important;        /* أحمر */
  font-size:12px !important;       /* أصغر */
  font-weight:500 !important;      /* نحيف */
  line-height:1.1 !important;
  letter-spacing:0 !important;
}

body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) span{
  color:#9ca3af !important;        /* رمادي باهت */
  font-size:13px !important;       /* واضح */
  font-weight:800 !important;      /* غليض */
  text-decoration:line-through !important;
  text-decoration-thickness:2px !important;
  opacity:1 !important;
}

/* احتياط قوي: لو الثيم حاط السعر الجديد داخل span أو عنصر ثاني */
body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) :is(b,strong){
  color:#b91c1c !important;
  font-size:12px !important;
  font-weight:500 !important;
}
/* =========================
   CART PAGE ONLY ✅
   Fix background to default + keep cart icon size unchanged
   ========================= */

/* 1) Make cart page background "basic" (white) */
body.cart,
body.cart #app,
body.cart .app-inner,
body.cart main#main-content,
body.cart main#main-content > .container {
  background: #ffffff !important;
  background-image: none !important;
}

/* 2) Kill any overlay/gradient layers فقط بالسلة */
body.cart::before,
body.cart::after,
body.cart #app::before,
body.cart #app::after,
body.cart .app-inner::before,
body.cart .app-inner::after,
body.cart main#main-content::before,
body.cart main#main-content::after {
  content: none !important;
  background: none !important;
}

/* 3) Keep empty-cart circle clean (no changes to size) */
body.cart .no-content-placeholder {
  background: transparent !important;
}

/* دائرة السلة (نفس المقاس الحالي تماماً ✅) */
body.cart .no-content-placeholder .icon {
  background-color: #F3F4F6 !important; /* نفس اللي ظهر عندك بالـ inspect */
  border-radius: 9999px !important;
}

/* 4) Icon itself — بدون تغيير حجمها إطلاقاً */
body.cart .no-content-placeholder .icon i.sicon-shopping-bag.icon::before {
  font-size: inherit !important; /* يثبت الحجم كما هو */
}
body.cart .no-content-placeholder .sicon-shopping-bag.icon::before{
  background: linear-gradient(90deg, #e1468b 0%, #ffd08a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* ✅ Cart Empty Icon – Soft blended (Purple + Pink + Gold) */
body.cart .no-content-placeholder i.sicon-shopping-bag.icon::before{
  background: linear-gradient(135deg,
    #6D28D9 0%,
    #8B5CF6 22%,
    #EC4899 45%,
    #F472B6 58%,
    #FBBF24 74%,
    #F59E0B 84%,
    #7C3AED 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  /* امتزاج ناعم وواضح */
  background-size: 240% 240% !important;
  background-position: 50% 50% !important;
  opacity: 0.95 !important;
}
/* ✅ Darker +5% + Shine +5% + Soft Glass */
.s-product-card-content-footer .s-button-element.s-button-btn,
.s-product-card-content-footer .s-button-btn{
  background: linear-gradient(135deg,
    rgba(198, 158, 132, 0.99) 0%,
    rgba(170, 148, 202, 0.99) 50%,
    rgba(130, 156, 204, 0.99) 100%
  ) !important;

  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.42) !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* ✅ Soft Glass shine (very calm) */
.s-product-card-content-footer .s-button-btn::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 22%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.06) 100%
  ) !important;

  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.80 !important;
}

/* ✅ Subtle glow spot */
.s-product-card-content-footer .s-button-btn::after{
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;

  background: radial-gradient(circle at 20% 18%,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.00) 70%
  ) !important;

  pointer-events: none !important;
  filter: blur(1.2px) !important;
}

/* ✅ White text + icon */
.s-product-card-content-footer .s-button-btn svg,
.s-product-card-content-footer .s-button-btn i,
.s-product-card-content-footer .s-button-btn span{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}
/* ✅ Darken Search Bar قليلاً (فقط تغميق بسيط) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.34),
    rgba(153, 122, 207, 0.22)
  ) !important;
}
/* ✅ إزالة الهالة/المستطيل المحيط بشريط البحث بالكامل */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-input-wrapper,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  box-shadow: none !important;
  filter: none !important;
}

#app header .header-search::before,
#app header .header-search::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ✅ REMOVE THE RECTANGLE HALO around search bar (wrapper + parents) */
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline,
#app header .header-search .s-search-modal,
#app header .header-search .s-search-input-wrapper{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* ✅ kill any pseudo-elements making a rectangle glow */
#app header .header-search .s-search-container::before,
#app header .header-search .s-search-container::after,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* ✅ extra: remove glow when input focused */
#app header .header-search input:focus,
#app header .header-search input:focus-visible{
  box-shadow: none !important;
  outline: none !important;
}
/* ✅ Darker Search Bar (same style) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.32),
    rgba(153, 122, 207, 0.22)
  ) !important;

  border: 1px solid rgba(255,255,255,0.42) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
}
/* ✅ REMOVE the "halo rectangle" behind the search bar (final fix) */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline,
#app header .header-search .s-search-modal,
#app header .header-search .s-search-input-wrapper{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ✅ kill any pseudo halo layers */
#app header .header-search::before,
#app header .header-search::after,
#app header .header-search .s-search-container::before,
#app header .header-search .s-search-container::after,
#app header .header-search .s-search-inline::before,
#app header .header-search .s-search-inline::after,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* ✅ keep your bar color (re-apply it) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.32),
    rgba(153, 122, 207, 0.22)
  ) !important;
}
/* ✅ FINAL FIX: remove rectangular halo around search bar on iPhone */
#app header .header-search .s-search-input-wrapper{
  overflow: hidden !important;                 /* أهم سطر = يقص الهالة */
  border-radius: 18px !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important; /* قصّ آيفون */
  background-clip: padding-box !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;         /* يثبت الرندر */
}

/* ✅ تأكيد إزالة أي ظل خارجي من الحاويات */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ✅ Search bar: MORE GLASS + Soft GOLD touch (no halo) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(255,255,255,0.20),
    rgba(210,170,90,0.10),
    rgba(180,130,255,0.14)
  ) !important;

  border: 1px solid rgba(255,255,255,0.42) !important;

  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 8px 22px rgba(0,0,0,0.06) !important;
}

/* ✅ Golden glow very soft (inside only) */
#app header .header-search .s-search-input-wrapper::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  pointer-events: none !important;

  background: radial-gradient(circle at 30% 40%,
    rgba(210,170,90,0.18),
    rgba(210,170,90,0.00) 60%
  ) !important;

  mix-blend-mode: screen !important;
  opacity: 0.8 !important;
}

/* ✅ عنوان فوق مميزات المتجر (يلتقط كل احتمالات قسم why-us) */
/* ✅ (لماذا تختار سهل) فوق مميزات المتجر — الصفحة الرئيسية فقط */
body.index #app main#main-content{
  display: flex !important;
  flex-direction: column !important;
}

/* ✅ خله يجي قبل مميزات المتجر مباشرة */
body.index #app main#main-content salla-why-us,
body.index #app main#main-content .s-why-us,
body.index #app main#main-content section.why-us,
body.index #app main#main-content .why-us{
  order: 1 !important;
}

/* ✅ مميزات المتجر بعدها */
body.index #app main#main-content .s-block--features,
body.index #app main#main-content section.s-block.s-block--features{
  order: 2 !important;
}

/* ✅ توسيط العنوان + مسافة مثل اللي تبي */
body.index #app salla-why-us h2,
body.index #app .s-why-us h2,
body.index #app section.why-us h2,
body.index #app .why-us h2{
  text-align: center !important;
  margin: 14px auto 12px !important;
  width: 100% !important;
}
/* ---------- عنوان لماذا تختار سهل فوق مميزات المتجر ---------- */

body.index #app section.s-block--features,
body.index #app section.s-block.s-block--features{
  position: relative !important;
  padding-top: 52px !important; /* مساحة للعنوان فوق البطاقات */
}

body.index #app section.s-block--features::before,
body.index #app section.s-block.s-block--features::before{
  content: "لماذا تختار سهل" !important;

  position: absolute !important;
  top: 10px !important;
  left: 0 !important;
  right: 0 !important;

  text-align: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  color: rgba(255,255,255,0.92) !important;
  z-index: 99 !important;
}
/* عنوان لماذا تختار سهل فوق مميزات المتجر */

#app.index section.s-block.s-block--features{
  position: relative !important;
  padding-top: 55px !important;
}

#app.index section.s-block.s-block--features::before{
  content: "لماذا تختار سهل" !important;
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.92) !important;
  z-index: 999 !important;
}

/* VIP - Glassy Gold Gradient */
p.s-product-card-content-subtitle,
.s-product-card-content-subtitle{
  background: linear-gradient(90deg, #F6E7B2 0%, #E7C36A 45%, #C67B2B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}
 /* الى هنا تمام مراجع مع نايف */:root{
  --sahl-g1:#f3a33b;  /* برتقالي */
  --sahl-g2:#c85a8f;  /* موف */
  --sahl-g3:#6a4bdc;  /* بنفسجي */
  --sahl-grad: linear-gradient(135deg,var(--sahl-g1),var(--sahl-g2),var(--sahl-g3));
}


/* =========================================================
   (3) زر القائمة + أيقونات الهيدر (السلة/الحساب) — كما هو
   ========================================================= */

/* ✅ زر القائمة ☰ */
body .store-header .navbar__toggle span,
body .store-header .menu-toggle span,
body .store-header .navbar__toggle .hamburger-inner,
body .store-header .navbar__toggle .hamburger-inner::before,
body .store-header .navbar__toggle .hamburger-inner::after,
body .store-header .menu-toggle .hamburger-inner,
body .store-header .menu-toggle .hamburger-inner::before,
body .store-header .menu-toggle .hamburger-inner::after,
body .store-header .navbar__toggle i,
body .store-header .menu-toggle i{
  background: var(--sahl-grad) !important;
}

/* ✅ لو زر القائمة SVG */
body .store-header .navbar__toggle svg,
body .store-header .menu-toggle svg{
  stroke: var(--sahl-g2) !important;
  fill: var(--sahl-g2) !important;
}

/* ✅ الحساب + السلة (بدون تكبير) */
body .store-header a[href*="cart"] i,
body .store-header a[href*="cart"] svg,
body .store-header a[href*="account"] i,
body .store-header a[href*="account"] svg,
body .store-header a[href*="profile"] i,
body .store-header a[href*="profile"] svg{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* =========================================================
   (4) حواف الدائرة فقط للسلة/الحساب — كما هو
   ========================================================= */

header .header-icons a,
header .nav-icons a,
header .store-header a,
header .navbar a{
  background: transparent !important;
}

header a[href*="cart"] i,
header a[href*="cart"] svg,
header a[href*="account"] i,
header a[href*="account"] svg,
header a[href*="profile"] i,
header a[href*="profile"] svg,
header a[href*="login"] i,
header a[href*="login"] svg{
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--sahl-grad) border-box !important;
  box-shadow: none !important;
}

header a[href*="cart"] i::before,
header a[href*="account"] i::before,
header a[href*="profile"] i::before,
header a[href*="login"] i::before{
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   (5) KILLER GRADIENT (Account only) — كما هو
   ========================================================= */

/* ✅ 0) حماية: لا تلمس السلة/الريال نهائياً */
header a[href*="cart"],
header a[href*="/cart"],
header a[href*="cart"] *,
header a[href*="/cart"] *{
  border: initial !important;
  background: initial !important;
  box-shadow: initial !important;
}

/* ✅ 1) استهداف "زر الحساب" */
header a:has(i[class*="user"]),
header a:has(i[class*="account"]),
header a:has(i[class*="profile"]),
header a:has(svg),
header button:has(i[class*="user"]),
header button:has(i[class*="account"]),
header button:has(i[class*="profile"]),
header button:has(svg){
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ✅ 2) إزالة دائرة الحساب الرمادية */
header a:has(i[class*="user"]) *,
header a:has(i[class*="account"]) *,
header a:has(i[class*="profile"]) *,
header button:has(i[class*="user"]) *,
header button:has(i[class*="account"]) *,
header button:has(i[class*="profile"]) *{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ✅ 3) تدرج شعار سهل على أيقونة الحساب */
header a:has(i[class*="user"]) i,
header a:has(i[class*="account"]) i,
header a:has(i[class*="profile"]) i,
header button:has(i[class*="user"]) i,
header button:has(i[class*="account"]) i,
header button:has(i[class*="profile"]) i{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ✅ 4) SVG للحساب (احتياط) */
header a:has(svg) svg,
header a:has(svg) svg *,
header button:has(svg) svg,
header button:has(svg) svg *{
  fill: var(--sahl-g2) !important;
  stroke: var(--sahl-g2) !important;
}

/* ✅ 5) منع أي إطار مرسوم للحساب */
header a:has(i[class*="user"])::before,
header a:has(i[class*="user"])::after,
header a:has(i[class*="account"])::before,
header a:has(i[class*="account"])::after,
header a:has(i[class*="profile"])::before,
header a:has(i[class*="profile"])::after,
header button:has(i[class*="user"])::before,
header button:has(i[class*="user"])::after{
  display:none !important;
}


/* =========================================================
   (6) KILLER MENU GRADIENT ☰ — كما هو
   ========================================================= */

header .navbar__toggle,
header .menu-toggle,
header .hamburger,
header .burger,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"],
header a[aria-label*="menu"],
header a[aria-label*="Menu"],
header a[aria-label*="القائمة"]{
  position: relative !important;
}

header .navbar__toggle svg,
header .navbar__toggle i,
header .navbar__toggle span,
header .menu-toggle svg,
header .menu-toggle i,
header .menu-toggle span,
header button[aria-label*="menu"] svg,
header button[aria-label*="menu"] i,
header button[aria-label*="menu"] span,
header button[aria-label*="Menu"] svg,
header button[aria-label*="Menu"] i,
header button[aria-label*="Menu"] span,
header button[aria-label*="القائمة"] svg,
header button[aria-label*="القائمة"] i,
header button[aria-label*="القائمة"] span{
  opacity: 0 !important;
}

header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  content: "" !important;
  width: 26px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  background: var(--sahl-grad) !important;
  -webkit-mask: repeating-linear-gradient(
    to bottom,
    #000 0 3px,
    transparent 3px 7px
  ) !important;
  mask: repeating-linear-gradient(
    to bottom,
    #000 0 3px,
    transparent 3px 7px
  ) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}

/* ✅ FIX نهائي: 3 خطوط متساوية + أنحف */
header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  width: 24px !important;
  height: 16px !important;
  border-radius: 0 !important;

  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) !important;

  -webkit-mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  -webkit-mask-position: 0 1px, 0 7px, 0 13px !important;
  -webkit-mask-repeat: no-repeat !important;

  mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) !important;

  mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  mask-position: 0 1px, 0 7px, 0 13px !important;
  mask-repeat: no-repeat !important;
}

/* ✅ FIX نهائي: 3 خطوط متساوية بدون قص */
header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  width: 26px !important;
  height: 18px !important;

  -webkit-mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  -webkit-mask-position: 0 3px, 0 8px, 0 13px !important;
  -webkit-mask-repeat: no-repeat !important;

  mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  mask-position: 0 3px, 0 8px, 0 13px !important;
  mask-repeat: no-repeat !important;

  border-radius: 0 !important;
}

/* ✅ إخفاء زر القائمة الأصلي بالكامل */
header .navbar__toggle,
header .menu-toggle,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"],
header a[aria-label*="menu"],
header a[aria-label*="Menu"],
header a[aria-label*="القائمة"]{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

header .navbar__toggle * ,
header .menu-toggle * ,
header button[aria-label*="menu"] * ,
header button[aria-label*="Menu"] * ,
header button[aria-label*="القائمة"] * ,
header a[aria-label*="menu"] * ,
header a[aria-label*="Menu"] * ,
header a[aria-label*="القائمة"] *{
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

header .navbar__toggle svg,
header .navbar__toggle svg *,
header .menu-toggle svg,
header .menu-toggle svg *,
header button[aria-label*="menu"] svg,
header button[aria-label*="menu"] svg *,
header button[aria-label*="Menu"] svg,
header button[aria-label*="Menu"] svg *,
header button[aria-label*="القائمة"] svg,
header button[aria-label*="القائمة"] svg *{
  fill: transparent !important;
  stroke: transparent !important;
  opacity: 0 !important;
}

header .navbar__toggle::before,
header .menu-toggle::before,
header button[aria-label*="menu"]::before,
header button[aria-label*="Menu"]::before,
header button[aria-label*="القائمة"]::before,
header a[aria-label*="menu"]::before,
header a[aria-label*="Menu"]::before,
header a[aria-label*="القائمة"]::before{
  content: "" !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  z-index: 999999 !important;
  pointer-events: none !important;
}


/* =========================================================
   (7) أرقام/مبلغ الهيدر + البحث
   ========================================================= */

header a[href*="cart"] .price,
header a[href*="cart"] .amount,
header a[href*="cart"] .total,
header a[href*="cart"] .sum,
header a[href*="cart"] strong,
header a[href*="cart"] b,
header a[href*="cart"] span,
header .price,
header .amount,
header .total,
header .sum,
header .currency,
header [class*="price"],
header [class*="amount"],
header [class*="total"],
header [class*="sum"],
header [class*="money"],
header [class*="currency"]{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ✅ البحث كامل (الإطار + مكان الكتابة + المجهر) بتدرّج سهل ضبابي */
:root{
  --sahl-soft: linear-gradient(135deg,
    rgba(243,163,59,0.35),
    rgba(200,90,143,0.35),
    rgba(106,75,220,0.35)
  );
  --sahl-soft-2: linear-gradient(135deg,
    rgba(243,163,59,0.18),
    rgba(200,90,143,0.18),
    rgba(106,75,220,0.18)
  );
}
/* ✅ Search bar colors from Menu icon (soft glass) */
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search input{
  background:
    linear-gradient(135deg,
      rgba(243, 163, 59, 0.16) 0%,
      rgba(200, 90, 143, 0.14) 45%,
      rgba(106, 75, 220, 0.16) 100%
    ) !important;

  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;

  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}

/* placeholder هادي وواضح */
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search input::placeholder{
  color: rgba(255,255,255,0.55) !important;
}
/* =========================================================
   (8) القائمة الجانبية + الهوفر
   ========================================================= */

:root{
  --sahlls-grad: linear-gradient(90deg,
    rgba(245, 204, 164, 0.35) 0%,
    rgba(186, 155, 214, 0.35) 55%,
    rgba(153, 122, 207, 0.35) 100%
  );

  --sahlls-hover: linear-gradient(90deg,
    rgba(245, 204, 164, 0.18) 0%,
    rgba(186, 155, 214, 0.16) 55%,
    rgba(153, 122, 207, 0.18) 100%
  );
}

aside,
.sidebar,
.side-menu,
.drawer,
.drawer-content,
.offcanvas,
.offcanvas-body,
.menu-drawer,
.mobile-menu,
.nav-drawer,
.nav__drawer,
.header-drawer,
[class*="drawer"],
[class*="offcanvas"],
[class*="sidebar"],
[class*="side-menu"]{
  background: var(--sahlls-grad) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  border: none !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.10) !important;
}

aside * ,
.sidebar * ,
.side-menu * ,
.drawer * ,
.drawer-content * ,
.offcanvas * ,
.menu-drawer * ,
.mobile-menu * ,
.nav-drawer * ,
[class*="drawer"] * ,
[class*="offcanvas"] * ,
[class*="sidebar"] * ,
[class*="side-menu"] *{
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.modal-backdrop,
.overlay,
.drawer-overlay,
.offcanvas-backdrop,
.sidebar-overlay,
[class*="overlay"],
[class*="backdrop"]{
  background: rgba(0,0,0,0.25) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
}

aside a,
.sidebar a,
.side-menu a,
.drawer a,
.offcanvas a,
.menu-drawer a,
.mobile-menu a,
.nav-drawer a{
  color: rgba(17,17,17,0.92) !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

aside a:hover,
.sidebar a:hover,
.side-menu a:hover,
.drawer a:hover,
.offcanvas a:hover,
.menu-drawer a:hover,
.mobile-menu a:hover,
.nav-drawer a:hover{
  background: var(--sahlls-hover) !important;
  color: rgba(17,17,17,0.98) !important;
}


/* =========================================================
   (9) خلفية مثل مليار
   ========================================================= */

body{
  background:
    radial-gradient(900px 500px at 85% 15%, rgba(170, 90, 255, 0.16), transparent 60%),
    radial-gradient(700px 450px at 10% 35%, rgba(70, 150, 255, 0.14), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(255, 160, 70, 0.06), transparent 55%),
    linear-gradient(180deg, #050814 0%, #070B1E 35%, #050817 100%) !important;
  background-attachment: fixed;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05), transparent 45%),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,0.04), transparent 55%),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,0.03), transparent 55%);
  filter: blur(6px);
  opacity: 0.9;
}


/* =========================================================
   (10) شريطين أبيض يمين/يسار صورة المنتج
   ========================================================= */

:root{ --sideStripe: 12px; }

.product .product-image,
.product .product-thumb,
.product .product-img,
.product-card .product-image,
.product-card .product-thumb,
.product-card .product-img,
.product-item .product-image,
.product-item .product-thumb,
.product-item .product-img,
.product__image,
.product__img,
.product__thumb,
.s-product-card-image,
.s-product-card__image,
.s-product-card__image-wrapper{
  position: relative !important;
  overflow: hidden !important;
}

.product .product-image::after,
.product .product-thumb::after,
.product .product-img::after,
.product-card .product-image::after,
.product-card .product-thumb::after,
.product-card .product-img::after,
.product-item .product-image::after,
.product-item .product-thumb::after,
.product-item .product-img::after,
.product__image::after,
.product__img::after,
.product__thumb::after,
.s-product-card-image::after,
.s-product-card__image::after,
.s-product-card__image-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: linear-gradient(to right,
    #fff 0, #fff var(--sideStripe),
    transparent var(--sideStripe), transparent calc(100% - var(--sideStripe)),
    #fff calc(100% - var(--sideStripe)), #fff 100%
  );
}
/* =========================
   FEATURES (Milyar Style)
   Mobile-first / No conflicts
   ========================= */

/* 0) تأكيد إلغاء أي span يخرب الصف */
section.s-block.s-block--features .s-block--features__item,
section.s-block.s-block--features .s-block--features__item:first-child{
  grid-column: auto !important;
  min-width: 0 !important;
}

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

/* احتياط للشاشات الصغيرة جدًا */
@media (max-width: 360px){
  section.s-block.s-block--features .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2) الكرت: زجاجي */
section.s-block.s-block--features .s-block--features__item{
  position: relative !important;
  overflow: visible !important;
  padding: 18px 14px 14px !important;
  padding-top: 30px !important; /* مساحة للأيقونة فوق */
  border-radius: 18px !important;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.28) !important;
}

/* 3) النص مناسب للجوال 3 أعمدة */
section.s-block.s-block--features .s-block--features__item h2{
  font-size: 15px !important;
  margin-top: 8px !important;
}
section.s-block.s-block--features .s-block--features__item p{
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  opacity: .92 !important;
}

/* 4) الدائرة (أصغر شوي) */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 46px !important;
  height: 46px !important;
  border-radius: 9999px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  /* حلقة خفيفة بدون ما تطلع مربعة */
  box-shadow: 0 0 0 7px rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.30) !important;

  z-index: 3 !important;
}

/* حجم الأيقونة */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 22px !important;
  color: #fff !important;
  opacity: .96 !important;
}

/* 5) Glow دائري ضبابي أصغر + متدرج */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 9999px !important;
  filter: blur(12px) !important;
  opacity: .85 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ألوان الـ Glow لكل كرت */
section.s-block.s-block--features .s-block--features__item:nth-child(1) .feature-icon::after{
  background: radial-gradient(circle, rgba(77,102,255,.60) 0%, rgba(77,102,255,.18) 45%, rgba(77,102,255,0) 72%) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(2) .feature-icon::after{
  background: radial-gradient(circle, rgba(255,77,170,.58) 0%, rgba(255,77,170,.17) 45%, rgba(255,77,170,0) 72%) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(3) .feature-icon::after{
  background: radial-gradient(circle, rgba(255,196,77,.62) 0%, rgba(255,196,77,.18) 45%, rgba(255,196,77,0) 72%) !important;
}
section.s-block.s-block--features.container .features-real-title{
  text-align: center !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 0 0 18px 0 !important;
}
/* =========================
   PATCH: Fix square glow + stronger white text
   Put this at the VERY END of CSS
   ========================= */

/* 1) نصوص أوضح (العنوان + النص) */
section.s-block.s-block--features .s-block--features__item h2{
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.35) !important;
}
section.s-block.s-block--features .s-block--features__item p{
  color: rgba(255,255,255,.86) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.30) !important;
}

/* 2) خلّ كل الكروت زجاجية لطيفة */
section.s-block.s-block--features .s-block--features__item{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* 3) تصغير الأيقونة الدائرية شوي + إصلاح glow (دائري 100% بدون مربعات) */
/* ✅ FIX: تبديل ألوان الـ glow (الأزرق للسلة + الذهبي للصح) */
section.s-block.s-block--features .s-block--features__item:nth-child(1){
  --glow: rgba(77,102,255,.75) !important;   /* أزرق = السلة */
  --iconbg: rgba(77,102,255,.22) !important;
}

section.s-block.s-block--features .s-block--features__item:nth-child(2){
  --glow: rgba(255,77,170,.70) !important;  /* وردي = واتساب */
  --iconbg: rgba(255,77,170,.20) !important;
}

section.s-block.s-block--features .s-block--features__item:nth-child(3){
  --glow: rgba(255,196,77,.75) !important;  /* ذهبي = الصح */
  --iconbg: rgba(255,196,77,.22) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(2){
  --glow: rgba(255,77,170,.70);   /* وردي */
  --iconbg: rgba(255,77,170,.20);
}
section.s-block.s-block--features .s-block--features__item:nth-child(3){
  --glow: rgba(77,102,255,.75);   /* أزرق */
  --iconbg: rgba(77,102,255,.22);
}

/* دائرة الأيقونة */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  width: 50px !important;
  height: 50px !important;
  top: -22px !important;

  border-radius: 9999px !important;
  background: var(--iconbg) !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  /* مهم جداً لتجنب شكل المربع في بعض الأجهزة */
  box-shadow: none !important;
  overflow: visible !important;
  transform: translateX(-50%) translateZ(0) !important;
  backface-visibility: hidden !important;
  isolation: isolate !important;
}

/* الأيقونة نفسها */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 24px !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* glow دائري ومتدرّج وضبابي */
section.s-block.s-block--features .s-block--features__item .feature-icon::before{
  content: "" !important;
  position: absolute !important;
  inset: -16px !important;
  border-radius: 9999px !important;
  background: radial-gradient(circle at 50% 50%, var(--glow) 0%, rgba(0,0,0,0) 72%) !important;
  filter: blur(12px) !important;
  opacity: .85 !important;
  z-index: -1 !important;
}

/* حلقة خفيفة (تعطي نفس إحساس مليار) */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: "" !important;
  position: absolute !important;
  inset: -9px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
  filter: blur(.3px) !important;
  z-index: -1 !important;
}
/* FINAL PATCH: remove faint ring + shrink icon circle 30% (keep original icon circle) */

/* 1) إزالة الدائرة/الحلقة الخفيفة فقط */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: none !important;
}

/* 2) تصغير دائرة الأيقونة 30% + ضبط مكانها */
section.s-block.s-block--features .s-block--features__item{
  --iconSize: 35px;   /* 50px -> 35px (تقريباً -30%) */
  --iconTop: -16px;   /* تعديل بسيط للتموضع بعد التصغير */
}

section.s-block.s-block--features .s-block--features__item .feature-icon{
  width: var(--iconSize) !important;
  height: var(--iconSize) !important;
  top: var(--iconTop) !important;
}

/* تصغير حجم الأيقونة داخل الدائرة بشكل متناسق */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 18px !important;
}

/* تصغير الهالة بما يناسب الدائرة الجديدة */
section.s-block.s-block--features .s-block--features__item .feature-icon::before{
  inset: -12px !important;
  filter: blur(10px) !important;
  opacity: .82 !important;
}
/* ===== Features Title (لماذا تختار سهل) ===== */
section.s-block.s-block--features [data-feature-title]{
  color:#fff !important;
  text-align:center !important;

  /* مثل عناوين المميزات */
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  margin: 6px 0 16px !important;
  padding: 0 !important;
}

@media (max-width: 380px){
  section.s-block.s-block--features [data-feature-title]{
    font-size: 22px !important;
  }
}

/* نزّل شبكة المميزات تحت العنوان */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}

/* احتياط: لو طلع يمين بسبب RTL/float */
section.s-block.s-block--features [data-features-heading="true"]{
  width: 100% !important;
  display: block !important;
}
/* عنوان المميزات */
section.s-block.s-block--features .s-features-title{
  color:#fff !important;
  text-align:center !important;
  font-weight:900 !important;
  font-size:28px !important;
  line-height:1.2 !important;
  margin: 0 0 18px 0 !important; /* يبعده عن الأيقونات */
  width:100% !important;
  display:block !important;
}

/* نزّل الشبكة تحت العنوان زيادة بسيطة */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}
/* ===== Features Title (لماذا تختار سهل) ===== */
section.s-block.s-block--features [data-feature-title],
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .s-block__title h2{
  color:#fff !important;
  opacity:1 !important;
  font-size: 26px !important;   /* نفس إحساس عنوان كروت المميزات */
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
  margin: 14px 0 22px !important; /* يبعده عن الايقونات */
  padding: 0 !important;
}

/* نزّل شبكة المميزات لتحت زيادة (مسافة بين العنوان والكروت) */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}

/* ✅ 2) جعل عناوين الصفحة أبيض (بدون ما نخرب ألوان الأزرار/الروابط) */
body .s-block__title,
body h1, body h2, body h3{
  color: #fff !important;
}

/* (اختياري) لو فيه عنوان داخل بلوكات يطلع غامق */
body .s-block__subtitle,
body .s-block__header{
  color: rgba(255,255,255,.9) !important;
}
/* ===== Features Title Styling ===== */
.sahll-features-title{
  color:#fff !important;
  text-align:center !important;
  margin: 28px 16px 22px !important;   /* فوق 28 / يمين-يسار 16 / تحت 22 */
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* ✅ ابعاد المميزات عن العنوان (نزّل الشبكة تحت) */
section.s-block.s-block--features .grid{
  margin-top: 38px !important; /* يزيد المسافة بين العنوان والكروت */
}

/* ===== Footer: اجعل العناوين فقط بالأسود ===== */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.s-footer h1, .s-footer h2, .s-footer h3, .s-footer h4, .s-footer h5, .s-footer h6,
.store-footer h1, .store-footer h2, .store-footer h3, .store-footer h4, .store-footer h5, .store-footer h6{
  color:#000 !important;
}
/* ✅ FIX: تبديل ألوان الـ Glow حسب نوع الأيقونة (بدون ما نغير الأيقونة نفسها) */

/* السلة = أزرق */
section.s-block.s-block--features .feature-icon:has(i.sicon-cart2){
  background: rgba(77,102,255,.22) !important;
  box-shadow:
    0 0 0 10px rgba(77,102,255,.10),
    0 0 40px rgba(77,102,255,.55),
    0 12px 35px rgba(0,0,0,.35) !important;
}

/* الصح/التسليم = أصفر/ذهبي */
section.s-block.s-block--features .feature-icon:has(i.sicon-special-check){
  background: rgba(255,196,77,.20) !important;
  box-shadow:
    0 0 0 10px rgba(255,196,77,.12),
    0 0 45px rgba(255,196,77,.55),
    0 12px 35px rgba(0,0,0,.35) !important;
}

/* واتساب = وردي (ثابت) */
section.s-block.s-block--features .feature-icon:has(i.sicon-whatsapp){
  background: rgba(255,77,170,.20) !important;
  box-shadow:
    0 0 0 10px rgba(255,77,170,.10),
    0 0 40px rgba(255,77,170,.50),
    0 12px 35px rgba(0,0,0,.35) !important;
}
/* ✅ FIX نهائي: توزيع ألوان الإضاءة حسب نوع الأيقونة (بدون اعتماد على nth-child) */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  /* نعوّم الإضاءة ونلغي الدائرة الخفيفة الزايدة */
  box-shadow:
    0 0 26px rgba(0,0,0,.30) !important;
}

/* 🛒 السلة = أزرق */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-cart2) .feature-icon{
  background: rgba(77,102,255,.22) !important;
  box-shadow:
    0 0 28px rgba(77,102,255,.55),
    0 0 52px rgba(77,102,255,.28),
    0 12px 30px rgba(0,0,0,.32) !important;
}

/* ✅ الصح = أصفر/ذهبي */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-special-check) .feature-icon{
  background: rgba(255,196,77,.20) !important;
  box-shadow:
    0 0 30px rgba(255,196,77,.55),
    0 0 58px rgba(255,196,77,.26),
    0 12px 30px rgba(0,0,0,.32) !important;
}

/* 💬 واتساب = وردي */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-whatsapp) .feature-icon{
  background: rgba(255,77,170,.20) !important;
  box-shadow:
    0 0 30px rgba(255,77,170,.50),
    0 0 58px rgba(255,77,170,.24),
    0 12px 30px rgba(0,0,0,.32) !important;
}
/* ✅ Spacing for (لماذا تختار سهل) + push icons down */
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .s-block__title h1,
section.s-block.s-block--features .s-block__title h2,
section.s-block.s-block--features [data-feature-title],
.sahll-features-title{
  display: block !important;
  margin: 22px 0 22px 0 !important;   /* تباعد فوق وتحت العنوان */
  padding: 0 !important;
}

/* ✅ Extra space between title and the features cards (icons block) */
section.s-block.s-block--features .grid{
  margin-top: 22px !important;        /* نزّل المميزات تحت العنوان */
}
/* ✅ تباعد أكثر 5% بين عنوان المميزات والكروت */
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .sahll-features-title,
section.s-block.s-block--features h1,
section.s-block.s-block--features h2{
  margin: 50px 0 40px !important; /* فوق / يمين-يسار / تحت */
}

section.s-block.s-block--features .grid{
  margin-top: 59px !important; /* نزّل الكروت أكثر */
}
/* FIX: يلغي أي تحريك/خط غريب ويعطي تباعد نظيف لعنوان "لماذا تختار سهل" */
section.s-block.s-block--features .sahll-features-title,
section.s-block.s-block--features .s-block__title{
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin: 22px 0 32px !important; /* ↑ تباعد فوق/تحت */
  padding: 0 !important;
}

/* نزّل المميزات تحت العنوان (زيادة تباعد) */
section.s-block.s-block--features .grid{
  margin-top: 34px !important;
}
/* توحيد نفس المسافة فوق وتحت سطر "خطة + تطبيق..." */
:root{
--same-gap: 40px; /* غيّرها لو تبي أكثر/أقل */
}




/* (2) نزود فراغ بعد سطر "خطة + تطبيق..." (قبل المنتجات) */
section.s-block.s-block--products .s-block__content,
section.s-block.s-block--products .s-block__body,
section.s-block.s-block--products .s-products-grid,
section.s-block.s-block--products .products-grid,
section.s-block.s-block--products .swiper,
section.s-block.s-block--products .s-slider{
  margin-top: var(--same-gap) !important;
}
@media (min-width: 992px){
  nav#mobile-menu{
    display: none !important;
  }
}
/* =========================================
   ✅ FOOTER + PAYMENTS "مسمار" (Stable Fix)
   - يوحد اللون والتدرج
   - يمنع الزوايا البيضاء
   - يحافظ على النصوص بدون تخريب
========================================= */

/* 1) الفوتر كامل بتدرج واحد + قص الزوايا */
#app footer.store-footer{
  position: relative !important;
  background: linear-gradient(135deg,
    rgba(237,207,178,0.98) 0%,
    rgba(205,190,244,0.98) 55%,
    rgba(173,152,250,0.98) 100%
  ) !important;

  border-radius: 32px !important;
  overflow: hidden !important;

  margin: 0 !important;
  padding: 28px 18px 18px !important;
}

/* 2) نخلي أي خلفيات داخلية شفافة عشان يبان التدرج */
#app footer.store-footer .store-footer__inner,
#app footer.store-footer .container,
#app footer.store-footer .row,
#app footer.store-footer .col,
#app footer.store-footer .links,
#app footer.store-footer .contacts,
#app footer.store-footer > div{
  background: transparent !important;
  background-image: none !important;
}

/* 3) نخفي أي فواصل/خطوط متقطعة مزعجة بالفوتر */
#app footer.store-footer hr,
#app footer.store-footer .separator,
#app footer.store-footer .divider,
#app footer.store-footer [style*="dashed"],
#app footer.store-footer [style*="dotted"]{
  border: 0 !important;
  background: transparent !important;
  height: 0 !important;
}

/* 4) صندوق طرق الدفع (كبير + يعبّي + بدون زوايا بيضاء) */
#app footer.store-footer .lis-payments,
#app footer.store-footer .s-payments{
  width: 100% !important;
  max-width: 100% !important;

  margin: 18px 0 0 !important;
  padding: 18px 16px !important;

  border-radius: 28px !important;

  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow: 0 18px 55px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
}

/* 5) ترتيب أيقونات الدفع */
#app footer.store-footer .lis-payments-list,
#app footer.store-footer .s-payments-list{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* 6) كبسولة كل شعار */
#app footer.store-footer .lis-payments-list-item,
#app footer.store-footer .s-payments-list-item{
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;

  border-radius: 18px !important;
  padding: 12px 16px !important;

  min-width: 92px !important;
  min-height: 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 14px 34px rgba(0,0,0,0.10),
              inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

/* 7) حجم الشعار داخل الكبسولة */
#app footer.store-footer .lis-payments-list-item img,
#app footer.store-footer .s-payments-list-item img{
  height: 28px !important;
  width: auto !important;
  max-width: 70px !important;
  object-fit: contain !important;
  display: block !important;
}
/* ✅ تثبيت ألوان شعارات الدفع الأصلية + خلفية المربعات نفس تدرّج الحاوية */

#app footer.store-footer .lis-payments-list-item img,
#app footer.store-footer .s-payments-list-item img{
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* مربعات الأيقونات نفسها */
#app footer.store-footer .lis-payments-list-item,
#app footer.store-footer .s-payments-list-item{
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* ✅ خلفية داخل كل مربع = نفس تدرّج الحاوية */
#app footer.store-footer .lis-payments-list-item::before,
#app footer.store-footer .s-payments-list-item::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  /* نفس تدرّج الحاوية */
  background: linear-gradient(135deg,
    rgba(237,207,178,0.55) 0%,
    rgba(205,190,244,0.55) 55%,
    rgba(173,152,250,0.55) 100%
  ) !important;

  backdrop-filter: blur(10px) !important;
}

/* نخلي الشعار فوق التدرّج */
#app footer.store-footer .lis-payments-list-item > *,
#app footer.store-footer .s-payments-list-item > *{
  position: relative !important;
  z-index: 1 !important;
}

/* ✅ لو فيه خلفية بيضاء جاية من رابط/عنصر داخل المربع */
#app footer.store-footer .lis-payments-list-item a,
#app footer.store-footer .s-payments-list-item a{
  background: transparent !important;
}
/* تثبيت عنوان: خطة + تطبيق = نتائج من أول أسبوع بالمنتصف + زحزحة يسار + مسافات */
section.s-block.container .s-block__title{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

section.s-block.container .s-block__title .right-side{
  width: 100% !important;
}

section.s-block.container .s-block__title h2{
  width: 100% !important;
  text-align: center !important;
  margin: 34px 0 !important;        /* فوق وتحت */
  transform: translateX(-22px) !important; /* زحزحة يسار حبتين */
}
/* =========================
   ✅ VIP REAL GLASS - Reviews
   class: div.s-reviews-testimonial
   ========================= */

/* 1) تصغير السلايدر وتوسيطه */
.s-reviews-swiper{
  transform: scale(0.65) !important;
  transform-origin: top center !important;
  margin: 0 auto !important;
}

/* 2) كرت زجاجي حقيقي + حدود فخمة */
div.s-reviews-testimonial{
  position: relative !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;

  /* ظل فاخر */
  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* 3) إطار خارجي فاخر (Border Glow) */
div.s-reviews-testimonial::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 1px !important;
  border-radius: 18px !important;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.35)
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;

  pointer-events: none !important;
  opacity: 0.9 !important;
}

/* 4) لمعة زجاج “حقيقية” تمر من الأعلى */
div.s-reviews-testimonial::after{
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -60% !important;
  width: 220% !important;
  height: 140% !important;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.30),
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.00) 70%
  ) !important;

  transform: rotate(12deg) !important;
  filter: blur(1px) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

/* 5) خط لمعان متحرك (اختياري وفخم جداً) */
div.s-reviews-testimonial .glass-shine{
  display: none !important;
}
div.s-reviews-testimonial{
  animation: none !important;
}
div.s-reviews-testimonial{
  /* خط لمعان */
}
div.s-reviews-testimonial::marker{
  content: "" !important;
}

div.s-reviews-testimonial{
  /* نضيف لمعة تمر مرور خفيف */
}
div.s-reviews-testimonial::after{
  animation: vipGlassShine 5.5s ease-in-out infinite !important;
}

@keyframes vipGlassShine{
  0%   { transform: translateX(-6%) rotate(12deg); opacity: 0.65; }
  50%  { transform: translateX(6%)  rotate(12deg); opacity: 0.95; }
  100% { transform: translateX(-6%) rotate(12deg); opacity: 0.65; }
}

/* 6) كل النصوص والأيقونات والنجوم أبيض */
div.s-reviews-testimonial *{
  color: #fff !important;
}
div.s-reviews-testimonial i,
div.s-reviews-testimonial svg{
  color: #fff !important;
  fill: #fff !important;
}

/* 7) توازن للموبايل */
@media (max-width: 768px){
  .s-reviews-swiper{
    transform: scale(0.72) !important;
  }
}
/* تصغير مربع آراء العملاء إلى 83% */
.s-reviews-testimonial{
  transform: scale(0.83) !important;
  transform-origin: top center !important;
  margin: 0 auto !important;
}
/* ✅ مسافة بين آراء العملاء والفوتر (بالسلكتور حقك) */
#app > div.app-inner.flex.flex-col.min-h-full > footer{
  margin-top: 45px !important;
}
/* =========================================================
   ✅ PRODUCT + CART ONLY (Clean & Safe)
   - لا يلمس الهيدر ولا الفوتر
   - الرئيسية تبقى مثل ما هي
   - سعر الخصم يرجع أحمر
========================================================= */


/* =========================
   ✅ PRODUCT PAGE ONLY
========================= */

/* خلفية صفحة المنتج */
body.product-single,
body.page-product{
  background:#fff !important;
}

/* نخلي محتوى المنتج طبيعي بدون طبقات داكنة */
body.product-single main#main-content,
body.page-product  main#main-content,
body.product-single main#main-content > .container,
body.page-product  main#main-content > .container{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* لون النصوص داخل محتوى المنتج فقط (بدون لمس الأسعار) */
body.product-single main#main-content :where(h1,h2,h3,h4,h5,h6,p,small,li,strong,em,label){
  color:#111 !important;
}

/* الروابط داخل المنتج فقط */
body.product-single main#main-content a:not(.btn):not(.button):not([class*="btn"]),
body.page-product  main#main-content a:not(.btn):not(.button):not([class*="btn"]){
  color:#1f4b99 !important;
}




/* =========================
   ✅ CART PAGE ONLY
========================= */

/* خلفية صفحة السلة فقط */
body.page-cart,
body.page-cart #app,
body.page-cart .app-inner,
body.page-cart main#main-content{
  background:#fff !important;
  background-image:none !important;
}

/* إزالة أي طبقة داكنة داخل السلة فقط */
body.page-cart #main-content,
body.page-cart #main-content > div,
body.page-cart #main-content > div > div{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* لون النصوص داخل محتوى السلة فقط */
body.page-cart main#main-content :where(h1,h2,h3,h4,h5,h6,p,span,small,li,strong,b,label){
  color:#111 !important;
}

/* ✅ أيقونة السلة الفاضية فقط — بدون لمس أيقونات الهيدر */
body.page-cart #main-content .no-content-placeholder i.sicon-shopping-bag.icon{
  display:inline-block !important;
  transform: translate(-10px, 12px) scale(1) !important;
}

/* ✅ تكبير الأيقونة */
body.page-cart #main-content .no-content-placeholder i.sicon-shopping-bag.icon::before{
  font-size:86px !important;
  line-height:1 !important;
}
/* =========================================================
   🔒 PRICE LOCK (HOME + PRODUCT + CART) — RAED 1 KILLER
   شروط نايف:
   - السعر بعد الخصم: أحمر (لون سلة) + نحيف + أصغر
   - السعر قبل الخصم: رمادي باهت + غليض + خط عليها
   - يطبق على كل مكان فيه سعر قبل/بعد الخصم
========================================================= */

/* ✅ 1) صفحة عرض المنتج — خانة السعر (تحت التقييم) */
body main#main-content div.container div#product-1788820519
div.flex.whitespace-nowrap p.text-red-800.font-bold.text-xl.inline-block,
body main#main-content div.container div[id^="product-"]
div.flex.whitespace-nowrap p.text-red-800.font-bold.text-xl.inline-block,
body main#main-content p.text-red-800.font-bold.text-xl.inline-block{
  color: var(--color-danger, #d81b29) !important;   /* أحمر سلة */
  font-weight: 300 !important;                      /* نحيف */
  font-size: 16px !important;                       /* أصغر */
  line-height: 1.2 !important;
}

/* السعر قبل الخصم (تحت التقييم) */
body main#main-content div.container div#product-1788820519
div.flex.whitespace-nowrap span.text-gray-500.line-through,
body main#main-content div.container div[id^="product-"]
div.flex.whitespace-nowrap span.text-gray-500.line-through,
body main#main-content span.text-gray-500.line-through{
  color: #b8b8b8 !important;        /* رمادي باهت */
  opacity: .95 !important;
  font-weight: 800 !important;      /* غليض */
  font-size: 15px !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 2) صفحة عرض المنتج — خانة السعر الثانية (بجوار كلمة "السعر") */
body main#main-content div.container div[id^="product-"]
div.price_is_on_sale h2.total-price.text-red-800.font-bold.text-xl.inline-block,
body main#main-content h2.total-price.text-red-800.font-bold.text-xl.inline-block{
  color: var(--color-danger, #d81b29) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* السعر قبل الخصم للخانة الثانية */
body main#main-content div.container div[id^="product-"]
div.price_is_on_sale span.before-price.text-gray-500.line-through,
body main#main-content span.before-price.text-gray-500.line-through{
  color: #b8b8b8 !important;
  opacity: .95 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 3) “أي مكان” في الموقع فيه خصم (حماية ضد الثيم)
   نخلي الأحمر أصغر/أنحف + الرمادي أغلط */
body main#main-content :is(p,h2,div,span).text-red-800{
  color: var(--color-danger, #d81b29) !important;
  font-weight: 300 !important;
}

body main#main-content :is(span,del,s).text-gray-500{
  font-weight: 800 !important;
}

/* ✅ 4) الصفحة الرئيسية / كروت المنتجات (تصغير الأحمر شوي) */
body :is(.product-card,.product-item,.products-list,.product)
:is(p,h2,span).text-red-800{
  font-size: 15px !important;   /* أصغر شوي من قبل */
  font-weight: 300 !important;
  color: var(--color-danger, #d81b29) !important;
}

body :is(.product-card,.product-item,.products-list,.product)
:is(span,del,s).text-gray-500{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #b8b8b8 !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 5) السلة / الكارت (أي سعر أحمر يصير نحيف وصغير) */
body.page-cart main#main-content :is(p,h2,span,div).text-red-800{
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--color-danger, #d81b29) !important;
}

body.page-cart main#main-content :is(span,del,s).text-gray-500{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #b8b8b8 !important;
  text-decoration-thickness: 2px !important;
}
/* ===============================
   🔒 PRICE LOCK — HOME + LISTINGS (RAED 1 KILLER)
   - New price: RED + smaller + thin
   - Old price: GREY + BOLD + line-through
================================= */

body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) h4{
  color:#b91c1c !important;        /* أحمر */
  font-size:12px !important;       /* أصغر */
  font-weight:500 !important;      /* نحيف */
  line-height:1.1 !important;
  letter-spacing:0 !important;
}

body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) span{
  color:#9ca3af !important;        /* رمادي باهت */
  font-size:13px !important;       /* واضح */
  font-weight:800 !important;      /* غليض */
  text-decoration:line-through !important;
  text-decoration-thickness:2px !important;
  opacity:1 !important;
}

/* احتياط قوي: لو الثيم حاط السعر الجديد داخل span أو عنصر ثاني */
body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) :is(b,strong){
  color:#b91c1c !important;
  font-size:12px !important;
  font-weight:500 !important;
}
/* =========================
   CART PAGE ONLY ✅
   Fix background to default + keep cart icon size unchanged
   ========================= */

/* 1) Make cart page background "basic" (white) */
body.cart,
body.cart #app,
body.cart .app-inner,
body.cart main#main-content,
body.cart main#main-content > .container {
  background: #ffffff !important;
  background-image: none !important;
}

/* 2) Kill any overlay/gradient layers فقط بالسلة */
body.cart::before,
body.cart::after,
body.cart #app::before,
body.cart #app::after,
body.cart .app-inner::before,
body.cart .app-inner::after,
body.cart main#main-content::before,
body.cart main#main-content::after {
  content: none !important;
  background: none !important;
}

/* 3) Keep empty-cart circle clean (no changes to size) */
body.cart .no-content-placeholder {
  background: transparent !important;
}

/* دائرة السلة (نفس المقاس الحالي تماماً ✅) */
body.cart .no-content-placeholder .icon {
  background-color: #F3F4F6 !important; /* نفس اللي ظهر عندك بالـ inspect */
  border-radius: 9999px !important;
}

/* 4) Icon itself — بدون تغيير حجمها إطلاقاً */
body.cart .no-content-placeholder .icon i.sicon-shopping-bag.icon::before {
  font-size: inherit !important; /* يثبت الحجم كما هو */
}
body.cart .no-content-placeholder .sicon-shopping-bag.icon::before{
  background: linear-gradient(90deg, #e1468b 0%, #ffd08a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* ✅ Cart Empty Icon – Soft blended (Purple + Pink + Gold) */
body.cart .no-content-placeholder i.sicon-shopping-bag.icon::before{
  background: linear-gradient(135deg,
    #6D28D9 0%,
    #8B5CF6 22%,
    #EC4899 45%,
    #F472B6 58%,
    #FBBF24 74%,
    #F59E0B 84%,
    #7C3AED 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  /* امتزاج ناعم وواضح */
  background-size: 240% 240% !important;
  background-position: 50% 50% !important;
  opacity: 0.95 !important;
}
/* ✅ Darker +5% + Shine +5% + Soft Glass */
.s-product-card-content-footer .s-button-element.s-button-btn,
.s-product-card-content-footer .s-button-btn{
  background: linear-gradient(135deg,
    rgba(198, 158, 132, 0.99) 0%,
    rgba(170, 148, 202, 0.99) 50%,
    rgba(130, 156, 204, 0.99) 100%
  ) !important;

  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.42) !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* ✅ Soft Glass shine (very calm) */
.s-product-card-content-footer .s-button-btn::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 22%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.06) 100%
  ) !important;

  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.80 !important;
}

/* ✅ Subtle glow spot */
.s-product-card-content-footer .s-button-btn::after{
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;

  background: radial-gradient(circle at 20% 18%,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.00) 70%
  ) !important;

  pointer-events: none !important;
  filter: blur(1.2px) !important;
}

/* ✅ White text + icon */
.s-product-card-content-footer .s-button-btn svg,
.s-product-card-content-footer .s-button-btn i,
.s-product-card-content-footer .s-button-btn span{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}
/* ✅ Darken Search Bar قليلاً (فقط تغميق بسيط) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.34),
    rgba(153, 122, 207, 0.22)
  ) !important;
}
/* ✅ إزالة الهالة/المستطيل المحيط بشريط البحث بالكامل */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-input-wrapper,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  box-shadow: none !important;
  filter: none !important;
}

#app header .header-search::before,
#app header .header-search::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ✅ REMOVE THE RECTANGLE HALO around search bar (wrapper + parents) */
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline,
#app header .header-search .s-search-modal,
#app header .header-search .s-search-input-wrapper{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* ✅ kill any pseudo-elements making a rectangle glow */
#app header .header-search .s-search-container::before,
#app header .header-search .s-search-container::after,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* ✅ extra: remove glow when input focused */
#app header .header-search input:focus,
#app header .header-search input:focus-visible{
  box-shadow: none !important;
  outline: none !important;
}
/* ✅ Darker Search Bar (same style) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.32),
    rgba(153, 122, 207, 0.22)
  ) !important;

  border: 1px solid rgba(255,255,255,0.42) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
}
/* ✅ REMOVE the "halo rectangle" behind the search bar (final fix) */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline,
#app header .header-search .s-search-modal,
#app header .header-search .s-search-input-wrapper{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ✅ kill any pseudo halo layers */
#app header .header-search::before,
#app header .header-search::after,
#app header .header-search .s-search-container::before,
#app header .header-search .s-search-container::after,
#app header .header-search .s-search-inline::before,
#app header .header-search .s-search-inline::after,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* ✅ keep your bar color (re-apply it) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.32),
    rgba(153, 122, 207, 0.22)
  ) !important;
}
/* ✅ FINAL FIX: remove rectangular halo around search bar on iPhone */
#app header .header-search .s-search-input-wrapper{
  overflow: hidden !important;                 /* أهم سطر = يقص الهالة */
  border-radius: 18px !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important; /* قصّ آيفون */
  background-clip: padding-box !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;         /* يثبت الرندر */
}

/* ✅ تأكيد إزالة أي ظل خارجي من الحاويات */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ✅ Search bar: MORE GLASS + Soft GOLD touch (no halo) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(255,255,255,0.20),
    rgba(210,170,90,0.10),
    rgba(180,130,255,0.14)
  ) !important;

  border: 1px solid rgba(255,255,255,0.42) !important;

  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 8px 22px rgba(0,0,0,0.06) !important;
}

/* ✅ Golden glow very soft (inside only) */
#app header .header-search .s-search-input-wrapper::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  pointer-events: none !important;

  background: radial-gradient(circle at 30% 40%,
    rgba(210,170,90,0.18),
    rgba(210,170,90,0.00) 60%
  ) !important;

  mix-blend-mode: screen !important;
  opacity: 0.8 !important;
}

/* ✅ عنوان فوق مميزات المتجر (يلتقط كل احتمالات قسم why-us) */
/* ✅ (لماذا تختار سهل) فوق مميزات المتجر — الصفحة الرئيسية فقط */
body.index #app main#main-content{
  display: flex !important;
  flex-direction: column !important;
}

/* ✅ خله يجي قبل مميزات المتجر مباشرة */
body.index #app main#main-content salla-why-us,
body.index #app main#main-content .s-why-us,
body.index #app main#main-content section.why-us,
body.index #app main#main-content .why-us{
  order: 1 !important;
}

/* ✅ مميزات المتجر بعدها */
body.index #app main#main-content .s-block--features,
body.index #app main#main-content section.s-block.s-block--features{
  order: 2 !important;
}

/* ✅ توسيط العنوان + مسافة مثل اللي تبي */
body.index #app salla-why-us h2,
body.index #app .s-why-us h2,
body.index #app section.why-us h2,
body.index #app .why-us h2{
  text-align: center !important;
  margin: 14px auto 12px !important;
  width: 100% !important;
}
/* ---------- عنوان لماذا تختار سهل فوق مميزات المتجر ---------- */

body.index #app section.s-block--features,
body.index #app section.s-block.s-block--features{
  position: relative !important;
  padding-top: 52px !important; /* مساحة للعنوان فوق البطاقات */
}

body.index #app section.s-block--features::before,
body.index #app section.s-block.s-block--features::before{
  content: "لماذا تختار سهل" !important;

  position: absolute !important;
  top: 10px !important;
  left: 0 !important;
  right: 0 !important;

  text-align: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  color: rgba(255,255,255,0.92) !important;
  z-index: 99 !important;
}
/* عنوان لماذا تختار سهل فوق مميزات المتجر */

#app.index section.s-block.s-block--features{
  position: relative !important;
  padding-top: 55px !important;
}

#app.index section.s-block.s-block--features::before{
  content: "لماذا تختار سهل" !important;
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.92) !important;
  z-index: 999 !important;
}

/* VIP - Glassy Gold Gradient */
p.s-product-card-content-subtitle,
.s-product-card-content-subtitle{
  background: linear-gradient(90deg, #F6E7B2 0%, #E7C36A 45%, #C67B2B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}
 /* الى هنا تمام مراجع مع نايف */main,
.page-content,
.content,
.store-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ✅ 7) سلاسة التفاعل */
header,
.navbar {
  transition: all 0.25s ease-in-out !important;
}

/* ✅ 8) ضمان الهيدر فوق كل شيء */
header,
.navbar {
  position: relative !important;
  z-index: 9999 !important;
}

/* ✅ الشعار (الحجم النهائي المعتمد) */
header .store-logo img,
header .navbar__brand img,
header .navbar-brand img,
header .header__logo img{
  transform: translateX(-10px) scale(1.49) !important;
  transform-origin: center right !important;
  max-width: 40vw !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
}

/* ✅ حماية زر القائمة ما يختفي */
header .navbar__toggle,
header .menu-toggle,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"]{
  position: relative !important;
  z-index: 9999 !important;
}


/* =========================================================
   (2) تدرّج “سهل” — متغيرات
   ========================================================= */

:root{
  --sahl-g1:#f3a33b;  /* برتقالي */
  --sahl-g2:#c85a8f;  /* موف */
  --sahl-g3:#6a4bdc;  /* بنفسجي */
  --sahl-grad: linear-gradient(135deg,var(--sahl-g1),var(--sahl-g2),var(--sahl-g3));
}


/* =========================================================
   (3) زر القائمة + أيقونات الهيدر (السلة/الحساب) — كما هو
   ========================================================= */

/* ✅ زر القائمة ☰ */
body .store-header .navbar__toggle span,
body .store-header .menu-toggle span,
body .store-header .navbar__toggle .hamburger-inner,
body .store-header .navbar__toggle .hamburger-inner::before,
body .store-header .navbar__toggle .hamburger-inner::after,
body .store-header .menu-toggle .hamburger-inner,
body .store-header .menu-toggle .hamburger-inner::before,
body .store-header .menu-toggle .hamburger-inner::after,
body .store-header .navbar__toggle i,
body .store-header .menu-toggle i{
  background: var(--sahl-grad) !important;
}

/* ✅ لو زر القائمة SVG */
body .store-header .navbar__toggle svg,
body .store-header .menu-toggle svg{
  stroke: var(--sahl-g2) !important;
  fill: var(--sahl-g2) !important;
}

/* ✅ الحساب + السلة (بدون تكبير) */
body .store-header a[href*="cart"] i,
body .store-header a[href*="cart"] svg,
body .store-header a[href*="account"] i,
body .store-header a[href*="account"] svg,
body .store-header a[href*="profile"] i,
body .store-header a[href*="profile"] svg{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* =========================================================
   (4) حواف الدائرة فقط للسلة/الحساب — كما هو
   ========================================================= */

header .header-icons a,
header .nav-icons a,
header .store-header a,
header .navbar a{
  background: transparent !important;
}

header a[href*="cart"] i,
header a[href*="cart"] svg,
header a[href*="account"] i,
header a[href*="account"] svg,
header a[href*="profile"] i,
header a[href*="profile"] svg,
header a[href*="login"] i,
header a[href*="login"] svg{
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--sahl-grad) border-box !important;
  box-shadow: none !important;
}

header a[href*="cart"] i::before,
header a[href*="account"] i::before,
header a[href*="profile"] i::before,
header a[href*="login"] i::before{
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   (5) KILLER GRADIENT (Account only) — كما هو
   ========================================================= */

/* ✅ 0) حماية: لا تلمس السلة/الريال نهائياً */
header a[href*="cart"],
header a[href*="/cart"],
header a[href*="cart"] *,
header a[href*="/cart"] *{
  border: initial !important;
  background: initial !important;
  box-shadow: initial !important;
}

/* ✅ 1) استهداف "زر الحساب" */
header a:has(i[class*="user"]),
header a:has(i[class*="account"]),
header a:has(i[class*="profile"]),
header a:has(svg),
header button:has(i[class*="user"]),
header button:has(i[class*="account"]),
header button:has(i[class*="profile"]),
header button:has(svg){
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ✅ 2) إزالة دائرة الحساب الرمادية */
header a:has(i[class*="user"]) *,
header a:has(i[class*="account"]) *,
header a:has(i[class*="profile"]) *,
header button:has(i[class*="user"]) *,
header button:has(i[class*="account"]) *,
header button:has(i[class*="profile"]) *{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ✅ 3) تدرج شعار سهل على أيقونة الحساب */
header a:has(i[class*="user"]) i,
header a:has(i[class*="account"]) i,
header a:has(i[class*="profile"]) i,
header button:has(i[class*="user"]) i,
header button:has(i[class*="account"]) i,
header button:has(i[class*="profile"]) i{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ✅ 4) SVG للحساب (احتياط) */
header a:has(svg) svg,
header a:has(svg) svg *,
header button:has(svg) svg,
header button:has(svg) svg *{
  fill: var(--sahl-g2) !important;
  stroke: var(--sahl-g2) !important;
}

/* ✅ 5) منع أي إطار مرسوم للحساب */
header a:has(i[class*="user"])::before,
header a:has(i[class*="user"])::after,
header a:has(i[class*="account"])::before,
header a:has(i[class*="account"])::after,
header a:has(i[class*="profile"])::before,
header a:has(i[class*="profile"])::after,
header button:has(i[class*="user"])::before,
header button:has(i[class*="user"])::after{
  display:none !important;
}


/* =========================================================
   (6) KILLER MENU GRADIENT ☰ — كما هو
   ========================================================= */

header .navbar__toggle,
header .menu-toggle,
header .hamburger,
header .burger,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"],
header a[aria-label*="menu"],
header a[aria-label*="Menu"],
header a[aria-label*="القائمة"]{
  position: relative !important;
}

header .navbar__toggle svg,
header .navbar__toggle i,
header .navbar__toggle span,
header .menu-toggle svg,
header .menu-toggle i,
header .menu-toggle span,
header button[aria-label*="menu"] svg,
header button[aria-label*="menu"] i,
header button[aria-label*="menu"] span,
header button[aria-label*="Menu"] svg,
header button[aria-label*="Menu"] i,
header button[aria-label*="Menu"] span,
header button[aria-label*="القائمة"] svg,
header button[aria-label*="القائمة"] i,
header button[aria-label*="القائمة"] span{
  opacity: 0 !important;
}

header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  content: "" !important;
  width: 26px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  background: var(--sahl-grad) !important;
  -webkit-mask: repeating-linear-gradient(
    to bottom,
    #000 0 3px,
    transparent 3px 7px
  ) !important;
  mask: repeating-linear-gradient(
    to bottom,
    #000 0 3px,
    transparent 3px 7px
  ) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}

/* ✅ FIX نهائي: 3 خطوط متساوية + أنحف */
header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  width: 24px !important;
  height: 16px !important;
  border-radius: 0 !important;

  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) !important;

  -webkit-mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  -webkit-mask-position: 0 1px, 0 7px, 0 13px !important;
  -webkit-mask-repeat: no-repeat !important;

  mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) !important;

  mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  mask-position: 0 1px, 0 7px, 0 13px !important;
  mask-repeat: no-repeat !important;
}

/* ✅ FIX نهائي: 3 خطوط متساوية بدون قص */
header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  width: 26px !important;
  height: 18px !important;

  -webkit-mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  -webkit-mask-position: 0 3px, 0 8px, 0 13px !important;
  -webkit-mask-repeat: no-repeat !important;

  mask-size: 100% 2px, 100% 2px, 100% 2px !important;
  mask-position: 0 3px, 0 8px, 0 13px !important;
  mask-repeat: no-repeat !important;

  border-radius: 0 !important;
}

/* ✅ إخفاء زر القائمة الأصلي بالكامل */
header .navbar__toggle,
header .menu-toggle,
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*="القائمة"],
header a[aria-label*="menu"],
header a[aria-label*="Menu"],
header a[aria-label*="القائمة"]{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

header .navbar__toggle * ,
header .menu-toggle * ,
header button[aria-label*="menu"] * ,
header button[aria-label*="Menu"] * ,
header button[aria-label*="القائمة"] * ,
header a[aria-label*="menu"] * ,
header a[aria-label*="Menu"] * ,
header a[aria-label*="القائمة"] *{
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

header .navbar__toggle svg,
header .navbar__toggle svg *,
header .menu-toggle svg,
header .menu-toggle svg *,
header button[aria-label*="menu"] svg,
header button[aria-label*="menu"] svg *,
header button[aria-label*="Menu"] svg,
header button[aria-label*="Menu"] svg *,
header button[aria-label*="القائمة"] svg,
header button[aria-label*="القائمة"] svg *{
  fill: transparent !important;
  stroke: transparent !important;
  opacity: 0 !important;
}

header .navbar__toggle::before,
header .menu-toggle::before,
header button[aria-label*="menu"]::before,
header button[aria-label*="Menu"]::before,
header button[aria-label*="القائمة"]::before,
header a[aria-label*="menu"]::before,
header a[aria-label*="Menu"]::before,
header a[aria-label*="القائمة"]::before{
  content: "" !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

header .navbar__toggle::after,
header .menu-toggle::after,
header button[aria-label*="menu"]::after,
header button[aria-label*="Menu"]::after,
header button[aria-label*="القائمة"]::after,
header a[aria-label*="menu"]::after,
header a[aria-label*="Menu"]::after,
header a[aria-label*="القائمة"]::after{
  z-index: 999999 !important;
  pointer-events: none !important;
}


/* =========================================================
   (7) أرقام/مبلغ الهيدر + البحث
   ========================================================= */

header a[href*="cart"] .price,
header a[href*="cart"] .amount,
header a[href*="cart"] .total,
header a[href*="cart"] .sum,
header a[href*="cart"] strong,
header a[href*="cart"] b,
header a[href*="cart"] span,
header .price,
header .amount,
header .total,
header .sum,
header .currency,
header [class*="price"],
header [class*="amount"],
header [class*="total"],
header [class*="sum"],
header [class*="money"],
header [class*="currency"]{
  background: var(--sahl-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ✅ البحث كامل (الإطار + مكان الكتابة + المجهر) بتدرّج سهل ضبابي */
:root{
  --sahl-soft: linear-gradient(135deg,
    rgba(243,163,59,0.35),
    rgba(200,90,143,0.35),
    rgba(106,75,220,0.35)
  );
  --sahl-soft-2: linear-gradient(135deg,
    rgba(243,163,59,0.18),
    rgba(200,90,143,0.18),
    rgba(106,75,220,0.18)
  );
}
/* ✅ Search bar colors from Menu icon (soft glass) */
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search input{
  background:
    linear-gradient(135deg,
      rgba(243, 163, 59, 0.16) 0%,
      rgba(200, 90, 143, 0.14) 45%,
      rgba(106, 75, 220, 0.16) 100%
    ) !important;

  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;

  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}

/* placeholder هادي وواضح */
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search input::placeholder{
  color: rgba(255,255,255,0.55) !important;
}
/* =========================================================
   (8) القائمة الجانبية + الهوفر
   ========================================================= */

:root{
  --sahlls-grad: linear-gradient(90deg,
    rgba(245, 204, 164, 0.35) 0%,
    rgba(186, 155, 214, 0.35) 55%,
    rgba(153, 122, 207, 0.35) 100%
  );

  --sahlls-hover: linear-gradient(90deg,
    rgba(245, 204, 164, 0.18) 0%,
    rgba(186, 155, 214, 0.16) 55%,
    rgba(153, 122, 207, 0.18) 100%
  );
}

aside,
.sidebar,
.side-menu,
.drawer,
.drawer-content,
.offcanvas,
.offcanvas-body,
.menu-drawer,
.mobile-menu,
.nav-drawer,
.nav__drawer,
.header-drawer,
[class*="drawer"],
[class*="offcanvas"],
[class*="sidebar"],
[class*="side-menu"]{
  background: var(--sahlls-grad) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  border: none !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.10) !important;
}

aside * ,
.sidebar * ,
.side-menu * ,
.drawer * ,
.drawer-content * ,
.offcanvas * ,
.menu-drawer * ,
.mobile-menu * ,
.nav-drawer * ,
[class*="drawer"] * ,
[class*="offcanvas"] * ,
[class*="sidebar"] * ,
[class*="side-menu"] *{
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.modal-backdrop,
.overlay,
.drawer-overlay,
.offcanvas-backdrop,
.sidebar-overlay,
[class*="overlay"],
[class*="backdrop"]{
  background: rgba(0,0,0,0.25) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
}

aside a,
.sidebar a,
.side-menu a,
.drawer a,
.offcanvas a,
.menu-drawer a,
.mobile-menu a,
.nav-drawer a{
  color: rgba(17,17,17,0.92) !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

aside a:hover,
.sidebar a:hover,
.side-menu a:hover,
.drawer a:hover,
.offcanvas a:hover,
.menu-drawer a:hover,
.mobile-menu a:hover,
.nav-drawer a:hover{
  background: var(--sahlls-hover) !important;
  color: rgba(17,17,17,0.98) !important;
}


/* =========================================================
   (9) خلفية مثل مليار
   ========================================================= */

body{
  background:
    radial-gradient(900px 500px at 85% 15%, rgba(170, 90, 255, 0.16), transparent 60%),
    radial-gradient(700px 450px at 10% 35%, rgba(70, 150, 255, 0.14), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(255, 160, 70, 0.06), transparent 55%),
    linear-gradient(180deg, #050814 0%, #070B1E 35%, #050817 100%) !important;
  background-attachment: fixed;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05), transparent 45%),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,0.04), transparent 55%),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,0.03), transparent 55%);
  filter: blur(6px);
  opacity: 0.9;
}


/* =========================================================
   (10) شريطين أبيض يمين/يسار صورة المنتج
   ========================================================= */

:root{ --sideStripe: 12px; }

.product .product-image,
.product .product-thumb,
.product .product-img,
.product-card .product-image,
.product-card .product-thumb,
.product-card .product-img,
.product-item .product-image,
.product-item .product-thumb,
.product-item .product-img,
.product__image,
.product__img,
.product__thumb,
.s-product-card-image,
.s-product-card__image,
.s-product-card__image-wrapper{
  position: relative !important;
  overflow: hidden !important;
}

.product .product-image::after,
.product .product-thumb::after,
.product .product-img::after,
.product-card .product-image::after,
.product-card .product-thumb::after,
.product-card .product-img::after,
.product-item .product-image::after,
.product-item .product-thumb::after,
.product-item .product-img::after,
.product__image::after,
.product__img::after,
.product__thumb::after,
.s-product-card-image::after,
.s-product-card__image::after,
.s-product-card__image-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: linear-gradient(to right,
    #fff 0, #fff var(--sideStripe),
    transparent var(--sideStripe), transparent calc(100% - var(--sideStripe)),
    #fff calc(100% - var(--sideStripe)), #fff 100%
  );
}
/* =========================
   FEATURES (Milyar Style)
   Mobile-first / No conflicts
   ========================= */

/* 0) تأكيد إلغاء أي span يخرب الصف */
section.s-block.s-block--features .s-block--features__item,
section.s-block.s-block--features .s-block--features__item:first-child{
  grid-column: auto !important;
  min-width: 0 !important;
}

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

/* احتياط للشاشات الصغيرة جدًا */
@media (max-width: 360px){
  section.s-block.s-block--features .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2) الكرت: زجاجي */
section.s-block.s-block--features .s-block--features__item{
  position: relative !important;
  overflow: visible !important;
  padding: 18px 14px 14px !important;
  padding-top: 30px !important; /* مساحة للأيقونة فوق */
  border-radius: 18px !important;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.28) !important;
}

/* 3) النص مناسب للجوال 3 أعمدة */
section.s-block.s-block--features .s-block--features__item h2{
  font-size: 15px !important;
  margin-top: 8px !important;
}
section.s-block.s-block--features .s-block--features__item p{
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  opacity: .92 !important;
}

/* 4) الدائرة (أصغر شوي) */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 46px !important;
  height: 46px !important;
  border-radius: 9999px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  /* حلقة خفيفة بدون ما تطلع مربعة */
  box-shadow: 0 0 0 7px rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.30) !important;

  z-index: 3 !important;
}

/* حجم الأيقونة */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 22px !important;
  color: #fff !important;
  opacity: .96 !important;
}

/* 5) Glow دائري ضبابي أصغر + متدرج */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 9999px !important;
  filter: blur(12px) !important;
  opacity: .85 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ألوان الـ Glow لكل كرت */
section.s-block.s-block--features .s-block--features__item:nth-child(1) .feature-icon::after{
  background: radial-gradient(circle, rgba(77,102,255,.60) 0%, rgba(77,102,255,.18) 45%, rgba(77,102,255,0) 72%) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(2) .feature-icon::after{
  background: radial-gradient(circle, rgba(255,77,170,.58) 0%, rgba(255,77,170,.17) 45%, rgba(255,77,170,0) 72%) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(3) .feature-icon::after{
  background: radial-gradient(circle, rgba(255,196,77,.62) 0%, rgba(255,196,77,.18) 45%, rgba(255,196,77,0) 72%) !important;
}
section.s-block.s-block--features.container .features-real-title{
  text-align: center !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 0 0 18px 0 !important;
}
/* =========================
   PATCH: Fix square glow + stronger white text
   Put this at the VERY END of CSS
   ========================= */

/* 1) نصوص أوضح (العنوان + النص) */
section.s-block.s-block--features .s-block--features__item h2{
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.35) !important;
}
section.s-block.s-block--features .s-block--features__item p{
  color: rgba(255,255,255,.86) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.30) !important;
}

/* 2) خلّ كل الكروت زجاجية لطيفة */
section.s-block.s-block--features .s-block--features__item{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* 3) تصغير الأيقونة الدائرية شوي + إصلاح glow (دائري 100% بدون مربعات) */
/* ✅ FIX: تبديل ألوان الـ glow (الأزرق للسلة + الذهبي للصح) */
section.s-block.s-block--features .s-block--features__item:nth-child(1){
  --glow: rgba(77,102,255,.75) !important;   /* أزرق = السلة */
  --iconbg: rgba(77,102,255,.22) !important;
}

section.s-block.s-block--features .s-block--features__item:nth-child(2){
  --glow: rgba(255,77,170,.70) !important;  /* وردي = واتساب */
  --iconbg: rgba(255,77,170,.20) !important;
}

section.s-block.s-block--features .s-block--features__item:nth-child(3){
  --glow: rgba(255,196,77,.75) !important;  /* ذهبي = الصح */
  --iconbg: rgba(255,196,77,.22) !important;
}
section.s-block.s-block--features .s-block--features__item:nth-child(2){
  --glow: rgba(255,77,170,.70);   /* وردي */
  --iconbg: rgba(255,77,170,.20);
}
section.s-block.s-block--features .s-block--features__item:nth-child(3){
  --glow: rgba(77,102,255,.75);   /* أزرق */
  --iconbg: rgba(77,102,255,.22);
}

/* دائرة الأيقونة */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  width: 50px !important;
  height: 50px !important;
  top: -22px !important;

  border-radius: 9999px !important;
  background: var(--iconbg) !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  /* مهم جداً لتجنب شكل المربع في بعض الأجهزة */
  box-shadow: none !important;
  overflow: visible !important;
  transform: translateX(-50%) translateZ(0) !important;
  backface-visibility: hidden !important;
  isolation: isolate !important;
}

/* الأيقونة نفسها */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 24px !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* glow دائري ومتدرّج وضبابي */
section.s-block.s-block--features .s-block--features__item .feature-icon::before{
  content: "" !important;
  position: absolute !important;
  inset: -16px !important;
  border-radius: 9999px !important;
  background: radial-gradient(circle at 50% 50%, var(--glow) 0%, rgba(0,0,0,0) 72%) !important;
  filter: blur(12px) !important;
  opacity: .85 !important;
  z-index: -1 !important;
}

/* حلقة خفيفة (تعطي نفس إحساس مليار) */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: "" !important;
  position: absolute !important;
  inset: -9px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
  filter: blur(.3px) !important;
  z-index: -1 !important;
}
/* FINAL PATCH: remove faint ring + shrink icon circle 30% (keep original icon circle) */

/* 1) إزالة الدائرة/الحلقة الخفيفة فقط */
section.s-block.s-block--features .s-block--features__item .feature-icon::after{
  content: none !important;
}

/* 2) تصغير دائرة الأيقونة 30% + ضبط مكانها */
section.s-block.s-block--features .s-block--features__item{
  --iconSize: 35px;   /* 50px -> 35px (تقريباً -30%) */
  --iconTop: -16px;   /* تعديل بسيط للتموضع بعد التصغير */
}

section.s-block.s-block--features .s-block--features__item .feature-icon{
  width: var(--iconSize) !important;
  height: var(--iconSize) !important;
  top: var(--iconTop) !important;
}

/* تصغير حجم الأيقونة داخل الدائرة بشكل متناسق */
section.s-block.s-block--features .s-block--features__item .feature-icon i{
  font-size: 18px !important;
}

/* تصغير الهالة بما يناسب الدائرة الجديدة */
section.s-block.s-block--features .s-block--features__item .feature-icon::before{
  inset: -12px !important;
  filter: blur(10px) !important;
  opacity: .82 !important;
}
/* ===== Features Title (لماذا تختار سهل) ===== */
section.s-block.s-block--features [data-feature-title]{
  color:#fff !important;
  text-align:center !important;

  /* مثل عناوين المميزات */
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  margin: 6px 0 16px !important;
  padding: 0 !important;
}

@media (max-width: 380px){
  section.s-block.s-block--features [data-feature-title]{
    font-size: 22px !important;
  }
}

/* نزّل شبكة المميزات تحت العنوان */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}

/* احتياط: لو طلع يمين بسبب RTL/float */
section.s-block.s-block--features [data-features-heading="true"]{
  width: 100% !important;
  display: block !important;
}
/* عنوان المميزات */
section.s-block.s-block--features .s-features-title{
  color:#fff !important;
  text-align:center !important;
  font-weight:900 !important;
  font-size:28px !important;
  line-height:1.2 !important;
  margin: 0 0 18px 0 !important; /* يبعده عن الأيقونات */
  width:100% !important;
  display:block !important;
}

/* نزّل الشبكة تحت العنوان زيادة بسيطة */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}
/* ===== Features Title (لماذا تختار سهل) ===== */
section.s-block.s-block--features [data-feature-title],
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .s-block__title h2{
  color:#fff !important;
  opacity:1 !important;
  font-size: 26px !important;   /* نفس إحساس عنوان كروت المميزات */
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
  margin: 14px 0 22px !important; /* يبعده عن الايقونات */
  padding: 0 !important;
}

/* نزّل شبكة المميزات لتحت زيادة (مسافة بين العنوان والكروت) */
section.s-block.s-block--features .grid{
  margin-top: 18px !important;
}

/* ✅ 2) جعل عناوين الصفحة أبيض (بدون ما نخرب ألوان الأزرار/الروابط) */
body .s-block__title,
body h1, body h2, body h3{
  color: #fff !important;
}

/* (اختياري) لو فيه عنوان داخل بلوكات يطلع غامق */
body .s-block__subtitle,
body .s-block__header{
  color: rgba(255,255,255,.9) !important;
}
/* ===== Features Title Styling ===== */
.sahll-features-title{
  color:#fff !important;
  text-align:center !important;
  margin: 28px 16px 22px !important;   /* فوق 28 / يمين-يسار 16 / تحت 22 */
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* ✅ ابعاد المميزات عن العنوان (نزّل الشبكة تحت) */
section.s-block.s-block--features .grid{
  margin-top: 38px !important; /* يزيد المسافة بين العنوان والكروت */
}

/* ===== Footer: اجعل العناوين فقط بالأسود ===== */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.s-footer h1, .s-footer h2, .s-footer h3, .s-footer h4, .s-footer h5, .s-footer h6,
.store-footer h1, .store-footer h2, .store-footer h3, .store-footer h4, .store-footer h5, .store-footer h6{
  color:#000 !important;
}
/* ✅ FIX: تبديل ألوان الـ Glow حسب نوع الأيقونة (بدون ما نغير الأيقونة نفسها) */

/* السلة = أزرق */
section.s-block.s-block--features .feature-icon:has(i.sicon-cart2){
  background: rgba(77,102,255,.22) !important;
  box-shadow:
    0 0 0 10px rgba(77,102,255,.10),
    0 0 40px rgba(77,102,255,.55),
    0 12px 35px rgba(0,0,0,.35) !important;
}

/* الصح/التسليم = أصفر/ذهبي */
section.s-block.s-block--features .feature-icon:has(i.sicon-special-check){
  background: rgba(255,196,77,.20) !important;
  box-shadow:
    0 0 0 10px rgba(255,196,77,.12),
    0 0 45px rgba(255,196,77,.55),
    0 12px 35px rgba(0,0,0,.35) !important;
}

/* واتساب = وردي (ثابت) */
section.s-block.s-block--features .feature-icon:has(i.sicon-whatsapp){
  background: rgba(255,77,170,.20) !important;
  box-shadow:
    0 0 0 10px rgba(255,77,170,.10),
    0 0 40px rgba(255,77,170,.50),
    0 12px 35px rgba(0,0,0,.35) !important;
}
/* ✅ FIX نهائي: توزيع ألوان الإضاءة حسب نوع الأيقونة (بدون اعتماد على nth-child) */
section.s-block.s-block--features .s-block--features__item .feature-icon{
  /* نعوّم الإضاءة ونلغي الدائرة الخفيفة الزايدة */
  box-shadow:
    0 0 26px rgba(0,0,0,.30) !important;
}

/* 🛒 السلة = أزرق */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-cart2) .feature-icon{
  background: rgba(77,102,255,.22) !important;
  box-shadow:
    0 0 28px rgba(77,102,255,.55),
    0 0 52px rgba(77,102,255,.28),
    0 12px 30px rgba(0,0,0,.32) !important;
}

/* ✅ الصح = أصفر/ذهبي */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-special-check) .feature-icon{
  background: rgba(255,196,77,.20) !important;
  box-shadow:
    0 0 30px rgba(255,196,77,.55),
    0 0 58px rgba(255,196,77,.26),
    0 12px 30px rgba(0,0,0,.32) !important;
}

/* 💬 واتساب = وردي */
section.s-block.s-block--features .s-block--features__item:has(i.sicon-whatsapp) .feature-icon{
  background: rgba(255,77,170,.20) !important;
  box-shadow:
    0 0 30px rgba(255,77,170,.50),
    0 0 58px rgba(255,77,170,.24),
    0 12px 30px rgba(0,0,0,.32) !important;
}
/* ✅ Spacing for (لماذا تختار سهل) + push icons down */
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .s-block__title h1,
section.s-block.s-block--features .s-block__title h2,
section.s-block.s-block--features [data-feature-title],
.sahll-features-title{
  display: block !important;
  margin: 22px 0 22px 0 !important;   /* تباعد فوق وتحت العنوان */
  padding: 0 !important;
}

/* ✅ Extra space between title and the features cards (icons block) */
section.s-block.s-block--features .grid{
  margin-top: 22px !important;        /* نزّل المميزات تحت العنوان */
}
/* ✅ تباعد أكثر 5% بين عنوان المميزات والكروت */
section.s-block.s-block--features .s-block__title,
section.s-block.s-block--features .sahll-features-title,
section.s-block.s-block--features h1,
section.s-block.s-block--features h2{
  margin: 50px 0 40px !important; /* فوق / يمين-يسار / تحت */
}

section.s-block.s-block--features .grid{
  margin-top: 59px !important; /* نزّل الكروت أكثر */
}
/* FIX: يلغي أي تحريك/خط غريب ويعطي تباعد نظيف لعنوان "لماذا تختار سهل" */
section.s-block.s-block--features .sahll-features-title,
section.s-block.s-block--features .s-block__title{
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin: 22px 0 32px !important; /* ↑ تباعد فوق/تحت */
  padding: 0 !important;
}

/* نزّل المميزات تحت العنوان (زيادة تباعد) */
section.s-block.s-block--features .grid{
  margin-top: 34px !important;
}
/* توحيد نفس المسافة فوق وتحت سطر "خطة + تطبيق..." */
:root{
--same-gap: 40px; /* غيّرها لو تبي أكثر/أقل */
}




/* (2) نزود فراغ بعد سطر "خطة + تطبيق..." (قبل المنتجات) */
section.s-block.s-block--products .s-block__content,
section.s-block.s-block--products .s-block__body,
section.s-block.s-block--products .s-products-grid,
section.s-block.s-block--products .products-grid,
section.s-block.s-block--products .swiper,
section.s-block.s-block--products .s-slider{
  margin-top: var(--same-gap) !important;
}
@media (min-width: 992px){
  nav#mobile-menu{
    display: none !important;
  }
}
/* =========================================
   ✅ FOOTER + PAYMENTS "مسمار" (Stable Fix)
   - يوحد اللون والتدرج
   - يمنع الزوايا البيضاء
   - يحافظ على النصوص بدون تخريب
========================================= */

/* 1) الفوتر كامل بتدرج واحد + قص الزوايا */
#app footer.store-footer{
  position: relative !important;
  background: linear-gradient(135deg,
    rgba(237,207,178,0.98) 0%,
    rgba(205,190,244,0.98) 55%,
    rgba(173,152,250,0.98) 100%
  ) !important;

  border-radius: 32px !important;
  overflow: hidden !important;

  margin: 0 !important;
  padding: 28px 18px 18px !important;
}

/* 2) نخلي أي خلفيات داخلية شفافة عشان يبان التدرج */
#app footer.store-footer .store-footer__inner,
#app footer.store-footer .container,
#app footer.store-footer .row,
#app footer.store-footer .col,
#app footer.store-footer .links,
#app footer.store-footer .contacts,
#app footer.store-footer > div{
  background: transparent !important;
  background-image: none !important;
}

/* 3) نخفي أي فواصل/خطوط متقطعة مزعجة بالفوتر */
#app footer.store-footer hr,
#app footer.store-footer .separator,
#app footer.store-footer .divider,
#app footer.store-footer [style*="dashed"],
#app footer.store-footer [style*="dotted"]{
  border: 0 !important;
  background: transparent !important;
  height: 0 !important;
}

/* 4) صندوق طرق الدفع (كبير + يعبّي + بدون زوايا بيضاء) */
#app footer.store-footer .lis-payments,
#app footer.store-footer .s-payments{
  width: 100% !important;
  max-width: 100% !important;

  margin: 18px 0 0 !important;
  padding: 18px 16px !important;

  border-radius: 28px !important;

  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow: 0 18px 55px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
}

/* 5) ترتيب أيقونات الدفع */
#app footer.store-footer .lis-payments-list,
#app footer.store-footer .s-payments-list{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* 6) كبسولة كل شعار */
#app footer.store-footer .lis-payments-list-item,
#app footer.store-footer .s-payments-list-item{
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;

  border-radius: 18px !important;
  padding: 12px 16px !important;

  min-width: 92px !important;
  min-height: 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 14px 34px rgba(0,0,0,0.10),
              inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

/* 7) حجم الشعار داخل الكبسولة */
#app footer.store-footer .lis-payments-list-item img,
#app footer.store-footer .s-payments-list-item img{
  height: 28px !important;
  width: auto !important;
  max-width: 70px !important;
  object-fit: contain !important;
  display: block !important;
}
/* ✅ تثبيت ألوان شعارات الدفع الأصلية + خلفية المربعات نفس تدرّج الحاوية */

#app footer.store-footer .lis-payments-list-item img,
#app footer.store-footer .s-payments-list-item img{
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* مربعات الأيقونات نفسها */
#app footer.store-footer .lis-payments-list-item,
#app footer.store-footer .s-payments-list-item{
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* ✅ خلفية داخل كل مربع = نفس تدرّج الحاوية */
#app footer.store-footer .lis-payments-list-item::before,
#app footer.store-footer .s-payments-list-item::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  /* نفس تدرّج الحاوية */
  background: linear-gradient(135deg,
    rgba(237,207,178,0.55) 0%,
    rgba(205,190,244,0.55) 55%,
    rgba(173,152,250,0.55) 100%
  ) !important;

  backdrop-filter: blur(10px) !important;
}

/* نخلي الشعار فوق التدرّج */
#app footer.store-footer .lis-payments-list-item > *,
#app footer.store-footer .s-payments-list-item > *{
  position: relative !important;
  z-index: 1 !important;
}

/* ✅ لو فيه خلفية بيضاء جاية من رابط/عنصر داخل المربع */
#app footer.store-footer .lis-payments-list-item a,
#app footer.store-footer .s-payments-list-item a{
  background: transparent !important;
}
/* تثبيت عنوان: خطة + تطبيق = نتائج من أول أسبوع بالمنتصف + زحزحة يسار + مسافات */
section.s-block.container .s-block__title{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

section.s-block.container .s-block__title .right-side{
  width: 100% !important;
}

section.s-block.container .s-block__title h2{
  width: 100% !important;
  text-align: center !important;
  margin: 34px 0 !important;        /* فوق وتحت */
  transform: translateX(-22px) !important; /* زحزحة يسار حبتين */
}
/* =========================
   ✅ VIP REAL GLASS - Reviews
   class: div.s-reviews-testimonial
   ========================= */

/* 1) تصغير السلايدر وتوسيطه */
.s-reviews-swiper{
  transform: scale(0.65) !important;
  transform-origin: top center !important;
  margin: 0 auto !important;
}

/* 2) كرت زجاجي حقيقي + حدود فخمة */
div.s-reviews-testimonial{
  position: relative !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;

  /* ظل فاخر */
  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* 3) إطار خارجي فاخر (Border Glow) */
div.s-reviews-testimonial::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 1px !important;
  border-radius: 18px !important;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.35)
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;

  pointer-events: none !important;
  opacity: 0.9 !important;
}

/* 4) لمعة زجاج “حقيقية” تمر من الأعلى */
div.s-reviews-testimonial::after{
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -60% !important;
  width: 220% !important;
  height: 140% !important;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.30),
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.00) 70%
  ) !important;

  transform: rotate(12deg) !important;
  filter: blur(1px) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

/* 5) خط لمعان متحرك (اختياري وفخم جداً) */
div.s-reviews-testimonial .glass-shine{
  display: none !important;
}
div.s-reviews-testimonial{
  animation: none !important;
}
div.s-reviews-testimonial{
  /* خط لمعان */
}
div.s-reviews-testimonial::marker{
  content: "" !important;
}

div.s-reviews-testimonial{
  /* نضيف لمعة تمر مرور خفيف */
}
div.s-reviews-testimonial::after{
  animation: vipGlassShine 5.5s ease-in-out infinite !important;
}

@keyframes vipGlassShine{
  0%   { transform: translateX(-6%) rotate(12deg); opacity: 0.65; }
  50%  { transform: translateX(6%)  rotate(12deg); opacity: 0.95; }
  100% { transform: translateX(-6%) rotate(12deg); opacity: 0.65; }
}

/* 6) كل النصوص والأيقونات والنجوم أبيض */
div.s-reviews-testimonial *{
  color: #fff !important;
}
div.s-reviews-testimonial i,
div.s-reviews-testimonial svg{
  color: #fff !important;
  fill: #fff !important;
}

/* 7) توازن للموبايل */
@media (max-width: 768px){
  .s-reviews-swiper{
    transform: scale(0.72) !important;
  }
}
/* تصغير مربع آراء العملاء إلى 83% */
.s-reviews-testimonial{
  transform: scale(0.83) !important;
  transform-origin: top center !important;
  margin: 0 auto !important;
}
/* ✅ مسافة بين آراء العملاء والفوتر (بالسلكتور حقك) */
#app > div.app-inner.flex.flex-col.min-h-full > footer{
  margin-top: 45px !important;
}
/* =========================================================
   ✅ PRODUCT + CART ONLY (Clean & Safe)
   - لا يلمس الهيدر ولا الفوتر
   - الرئيسية تبقى مثل ما هي
   - سعر الخصم يرجع أحمر
========================================================= */


/* =========================
   ✅ PRODUCT PAGE ONLY
========================= */

/* خلفية صفحة المنتج */
body.product-single,
body.page-product{
  background:#fff !important;
}

/* نخلي محتوى المنتج طبيعي بدون طبقات داكنة */
body.product-single main#main-content,
body.page-product  main#main-content,
body.product-single main#main-content > .container,
body.page-product  main#main-content > .container{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* لون النصوص داخل محتوى المنتج فقط (بدون لمس الأسعار) */
body.product-single main#main-content :where(h1,h2,h3,h4,h5,h6,p,small,li,strong,em,label){
  color:#111 !important;
}

/* الروابط داخل المنتج فقط */
body.product-single main#main-content a:not(.btn):not(.button):not([class*="btn"]),
body.page-product  main#main-content a:not(.btn):not(.button):not([class*="btn"]){
  color:#1f4b99 !important;
}




/* =========================
   ✅ CART PAGE ONLY
========================= */

/* خلفية صفحة السلة فقط */
body.page-cart,
body.page-cart #app,
body.page-cart .app-inner,
body.page-cart main#main-content{
  background:#fff !important;
  background-image:none !important;
}

/* إزالة أي طبقة داكنة داخل السلة فقط */
body.page-cart #main-content,
body.page-cart #main-content > div,
body.page-cart #main-content > div > div{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* لون النصوص داخل محتوى السلة فقط */
body.page-cart main#main-content :where(h1,h2,h3,h4,h5,h6,p,span,small,li,strong,b,label){
  color:#111 !important;
}

/* ✅ أيقونة السلة الفاضية فقط — بدون لمس أيقونات الهيدر */
body.page-cart #main-content .no-content-placeholder i.sicon-shopping-bag.icon{
  display:inline-block !important;
  transform: translate(-10px, 12px) scale(1) !important;
}

/* ✅ تكبير الأيقونة */
body.page-cart #main-content .no-content-placeholder i.sicon-shopping-bag.icon::before{
  font-size:86px !important;
  line-height:1 !important;
}
/* =========================================================
   🔒 PRICE LOCK (HOME + PRODUCT + CART) — RAED 1 KILLER
   شروط نايف:
   - السعر بعد الخصم: أحمر (لون سلة) + نحيف + أصغر
   - السعر قبل الخصم: رمادي باهت + غليض + خط عليها
   - يطبق على كل مكان فيه سعر قبل/بعد الخصم
========================================================= */

/* ✅ 1) صفحة عرض المنتج — خانة السعر (تحت التقييم) */
body main#main-content div.container div#product-1788820519
div.flex.whitespace-nowrap p.text-red-800.font-bold.text-xl.inline-block,
body main#main-content div.container div[id^="product-"]
div.flex.whitespace-nowrap p.text-red-800.font-bold.text-xl.inline-block,
body main#main-content p.text-red-800.font-bold.text-xl.inline-block{
  color: var(--color-danger, #d81b29) !important;   /* أحمر سلة */
  font-weight: 300 !important;                      /* نحيف */
  font-size: 16px !important;                       /* أصغر */
  line-height: 1.2 !important;
}

/* السعر قبل الخصم (تحت التقييم) */
body main#main-content div.container div#product-1788820519
div.flex.whitespace-nowrap span.text-gray-500.line-through,
body main#main-content div.container div[id^="product-"]
div.flex.whitespace-nowrap span.text-gray-500.line-through,
body main#main-content span.text-gray-500.line-through{
  color: #b8b8b8 !important;        /* رمادي باهت */
  opacity: .95 !important;
  font-weight: 800 !important;      /* غليض */
  font-size: 15px !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 2) صفحة عرض المنتج — خانة السعر الثانية (بجوار كلمة "السعر") */
body main#main-content div.container div[id^="product-"]
div.price_is_on_sale h2.total-price.text-red-800.font-bold.text-xl.inline-block,
body main#main-content h2.total-price.text-red-800.font-bold.text-xl.inline-block{
  color: var(--color-danger, #d81b29) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* السعر قبل الخصم للخانة الثانية */
body main#main-content div.container div[id^="product-"]
div.price_is_on_sale span.before-price.text-gray-500.line-through,
body main#main-content span.before-price.text-gray-500.line-through{
  color: #b8b8b8 !important;
  opacity: .95 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 3) “أي مكان” في الموقع فيه خصم (حماية ضد الثيم)
   نخلي الأحمر أصغر/أنحف + الرمادي أغلط */
body main#main-content :is(p,h2,div,span).text-red-800{
  color: var(--color-danger, #d81b29) !important;
  font-weight: 300 !important;
}

body main#main-content :is(span,del,s).text-gray-500{
  font-weight: 800 !important;
}

/* ✅ 4) الصفحة الرئيسية / كروت المنتجات (تصغير الأحمر شوي) */
body :is(.product-card,.product-item,.products-list,.product)
:is(p,h2,span).text-red-800{
  font-size: 15px !important;   /* أصغر شوي من قبل */
  font-weight: 300 !important;
  color: var(--color-danger, #d81b29) !important;
}

body :is(.product-card,.product-item,.products-list,.product)
:is(span,del,s).text-gray-500{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #b8b8b8 !important;
  text-decoration-thickness: 2px !important;
}

/* ✅ 5) السلة / الكارت (أي سعر أحمر يصير نحيف وصغير) */
body.page-cart main#main-content :is(p,h2,span,div).text-red-800{
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--color-danger, #d81b29) !important;
}

body.page-cart main#main-content :is(span,del,s).text-gray-500{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #b8b8b8 !important;
  text-decoration-thickness: 2px !important;
}
/* ===============================
   🔒 PRICE LOCK — HOME + LISTINGS (RAED 1 KILLER)
   - New price: RED + smaller + thin
   - Old price: GREY + BOLD + line-through
================================= */

body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) h4{
  color:#b91c1c !important;        /* أحمر */
  font-size:12px !important;       /* أصغر */
  font-weight:500 !important;      /* نحيف */
  line-height:1.1 !important;
  letter-spacing:0 !important;
}

body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) span{
  color:#9ca3af !important;        /* رمادي باهت */
  font-size:13px !important;       /* واضح */
  font-weight:800 !important;      /* غليض */
  text-decoration:line-through !important;
  text-decoration-thickness:2px !important;
  opacity:1 !important;
}

/* احتياط قوي: لو الثيم حاط السعر الجديد داخل span أو عنصر ثاني */
body.theme-raed main#main-content :where(
  custom-salla-product-card .s-product-card-sale-price
) :is(b,strong){
  color:#b91c1c !important;
  font-size:12px !important;
  font-weight:500 !important;
}
/* =========================
   CART PAGE ONLY ✅
   Fix background to default + keep cart icon size unchanged
   ========================= */

/* 1) Make cart page background "basic" (white) */
body.cart,
body.cart #app,
body.cart .app-inner,
body.cart main#main-content,
body.cart main#main-content > .container {
  background: #ffffff !important;
  background-image: none !important;
}

/* 2) Kill any overlay/gradient layers فقط بالسلة */
body.cart::before,
body.cart::after,
body.cart #app::before,
body.cart #app::after,
body.cart .app-inner::before,
body.cart .app-inner::after,
body.cart main#main-content::before,
body.cart main#main-content::after {
  content: none !important;
  background: none !important;
}

/* 3) Keep empty-cart circle clean (no changes to size) */
body.cart .no-content-placeholder {
  background: transparent !important;
}

/* دائرة السلة (نفس المقاس الحالي تماماً ✅) */
body.cart .no-content-placeholder .icon {
  background-color: #F3F4F6 !important; /* نفس اللي ظهر عندك بالـ inspect */
  border-radius: 9999px !important;
}

/* 4) Icon itself — بدون تغيير حجمها إطلاقاً */
body.cart .no-content-placeholder .icon i.sicon-shopping-bag.icon::before {
  font-size: inherit !important; /* يثبت الحجم كما هو */
}
body.cart .no-content-placeholder .sicon-shopping-bag.icon::before{
  background: linear-gradient(90deg, #e1468b 0%, #ffd08a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* ✅ Cart Empty Icon – Soft blended (Purple + Pink + Gold) */
body.cart .no-content-placeholder i.sicon-shopping-bag.icon::before{
  background: linear-gradient(135deg,
    #6D28D9 0%,
    #8B5CF6 22%,
    #EC4899 45%,
    #F472B6 58%,
    #FBBF24 74%,
    #F59E0B 84%,
    #7C3AED 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  /* امتزاج ناعم وواضح */
  background-size: 240% 240% !important;
  background-position: 50% 50% !important;
  opacity: 0.95 !important;
}
/* ✅ Darker +5% + Shine +5% + Soft Glass */
.s-product-card-content-footer .s-button-element.s-button-btn,
.s-product-card-content-footer .s-button-btn{
  background: linear-gradient(135deg,
    rgba(198, 158, 132, 0.99) 0%,
    rgba(170, 148, 202, 0.99) 50%,
    rgba(130, 156, 204, 0.99) 100%
  ) !important;

  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.42) !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* ✅ Soft Glass shine (very calm) */
.s-product-card-content-footer .s-button-btn::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 22%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.06) 100%
  ) !important;

  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.80 !important;
}

/* ✅ Subtle glow spot */
.s-product-card-content-footer .s-button-btn::after{
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;

  background: radial-gradient(circle at 20% 18%,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.00) 70%
  ) !important;

  pointer-events: none !important;
  filter: blur(1.2px) !important;
}

/* ✅ White text + icon */
.s-product-card-content-footer .s-button-btn svg,
.s-product-card-content-footer .s-button-btn i,
.s-product-card-content-footer .s-button-btn span{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}
/* ✅ Darken Search Bar قليلاً (فقط تغميق بسيط) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.34),
    rgba(153, 122, 207, 0.22)
  ) !important;
}
/* ✅ إزالة الهالة/المستطيل المحيط بشريط البحث بالكامل */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-input-wrapper,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  box-shadow: none !important;
  filter: none !important;
}

#app header .header-search::before,
#app header .header-search::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ✅ REMOVE THE RECTANGLE HALO around search bar (wrapper + parents) */
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline,
#app header .header-search .s-search-modal,
#app header .header-search .s-search-input-wrapper{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* ✅ kill any pseudo-elements making a rectangle glow */
#app header .header-search .s-search-container::before,
#app header .header-search .s-search-container::after,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* ✅ extra: remove glow when input focused */
#app header .header-search input:focus,
#app header .header-search input:focus-visible{
  box-shadow: none !important;
  outline: none !important;
}
/* ✅ Darker Search Bar (same style) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.32),
    rgba(153, 122, 207, 0.22)
  ) !important;

  border: 1px solid rgba(255,255,255,0.42) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
}
/* ✅ REMOVE the "halo rectangle" behind the search bar (final fix) */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline,
#app header .header-search .s-search-modal,
#app header .header-search .s-search-input-wrapper{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ✅ kill any pseudo halo layers */
#app header .header-search::before,
#app header .header-search::after,
#app header .header-search .s-search-container::before,
#app header .header-search .s-search-container::after,
#app header .header-search .s-search-inline::before,
#app header .header-search .s-search-inline::after,
#app header .header-search .s-search-input-wrapper::before,
#app header .header-search .s-search-input-wrapper::after{
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* ✅ keep your bar color (re-apply it) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(186, 155, 214, 0.32),
    rgba(153, 122, 207, 0.22)
  ) !important;
}
/* ✅ FINAL FIX: remove rectangular halo around search bar on iPhone */
#app header .header-search .s-search-input-wrapper{
  overflow: hidden !important;                 /* أهم سطر = يقص الهالة */
  border-radius: 18px !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important; /* قصّ آيفون */
  background-clip: padding-box !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;         /* يثبت الرندر */
}

/* ✅ تأكيد إزالة أي ظل خارجي من الحاويات */
#app header .header-search,
#app header .header-search salla-search,
#app header .header-search .s-search-container,
#app header .header-search .s-search-inline{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ✅ Search bar: MORE GLASS + Soft GOLD touch (no halo) */
#app header .header-search .s-search-input-wrapper{
  background: linear-gradient(135deg,
    rgba(255,255,255,0.20),
    rgba(210,170,90,0.10),
    rgba(180,130,255,0.14)
  ) !important;

  border: 1px solid rgba(255,255,255,0.42) !important;

  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 8px 22px rgba(0,0,0,0.06) !important;
}

/* ✅ Golden glow very soft (inside only) */
#app header .header-search .s-search-input-wrapper::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  pointer-events: none !important;

  background: radial-gradient(circle at 30% 40%,
    rgba(210,170,90,0.18),
    rgba(210,170,90,0.00) 60%
  ) !important;

  mix-blend-mode: screen !important;
  opacity: 0.8 !important;
}

/* ✅ عنوان فوق مميزات المتجر (يلتقط كل احتمالات قسم why-us) */
/* ✅ (لماذا تختار سهل) فوق مميزات المتجر — الصفحة الرئيسية فقط */
body.index #app main#main-content{
  display: flex !important;
  flex-direction: column !important;
}

/* ✅ خله يجي قبل مميزات المتجر مباشرة */
body.index #app main#main-content salla-why-us,
body.index #app main#main-content .s-why-us,
body.index #app main#main-content section.why-us,
body.index #app main#main-content .why-us{
  order: 1 !important;
}

/* ✅ مميزات المتجر بعدها */
body.index #app main#main-content .s-block--features,
body.index #app main#main-content section.s-block.s-block--features{
  order: 2 !important;
}

/* ✅ توسيط العنوان + مسافة مثل اللي تبي */
body.index #app salla-why-us h2,
body.index #app .s-why-us h2,
body.index #app section.why-us h2,
body.index #app .why-us h2{
  text-align: center !important;
  margin: 14px auto 12px !important;
  width: 100% !important;
}
/* ---------- عنوان لماذا تختار سهل فوق مميزات المتجر ---------- */

body.index #app section.s-block--features,
body.index #app section.s-block.s-block--features{
  position: relative !important;
  padding-top: 52px !important; /* مساحة للعنوان فوق البطاقات */
}

body.index #app section.s-block--features::before,
body.index #app section.s-block.s-block--features::before{
  content: "لماذا تختار سهل" !important;

  position: absolute !important;
  top: 10px !important;
  left: 0 !important;
  right: 0 !important;

  text-align: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  color: rgba(255,255,255,0.92) !important;
  z-index: 99 !important;
}
/* عنوان لماذا تختار سهل فوق مميزات المتجر */

#app.index section.s-block.s-block--features{
  position: relative !important;
  padding-top: 55px !important;
}

#app.index section.s-block.s-block--features::before{
  content: "لماذا تختار سهل" !important;
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.92) !important;
  z-index: 999 !important;
}

/* ✅ VIP: إلغاء الجريدينت والشفافية وتثبيت اللون الأحمر */
#app .s-product-card-content-main > p.s-product-card-content-subtitle{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #B91C1C !important;
  color: #B91C1C !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* ✅ Hide search bar on ALL pages EXCEPT Home */
#app:not(.index) input[placeholder="ادخل كلمة البحث"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
}
/* الى هنا تمام مراجع مع نايف */

/* ===============================
   ✅ SAHLLS Safe Mobile Interactions Pack
   - Touch feedback
   - Scroll reveal
   - Progress bar
   - Back to top
   - Toast
   - Price shine
   - Image fullscreen modal (style)
   =============================== */

:root{
  --sahl-ease: cubic-bezier(.2,.8,.2,1);
  --sahl-shadow: 0 18px 45px rgba(0,0,0,.14);
  --sahl-soft-shadow: 0 10px 25px rgba(0,0,0,.12);
  --sahl-press: .985;
  --sahl-rise: translateY(-2px);
}

/* ✅ (1) Touch Feedback - cards + buttons */
.s-product-card,
.s-product-card *{
  -webkit-tap-highlight-color: transparent !important;
}

.s-product-card:active{
  transform: scale(var(--sahl-press)) !important;
}

button:active,
a:active,
.s-button:active{
  transform: scale(.98) !important;
}

/* JS will add this class while pressing */
.sahl-tap-active{
  transform: scale(.985) !important;
  filter: brightness(1.02);
}

/* ✅ (3) Scroll Reveal (lightweight) */
.sahl-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--sahl-ease), transform .55s var(--sahl-ease);
  will-change: opacity, transform;
}

.sahl-reveal.sahl-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ✅ (6) Top Progress Bar */
#sahl-progressbar{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 99999;
  background: var(--sahl-grad, linear-gradient(135deg,#f3a33b,#c85a8f,#6a4bdc));
  border-radius: 0 999px 999px 0;
  pointer-events: none;
  transform: translateZ(0);
}

/* ✅ (7) Back to Top */
#sahl-backtotop{
  position: fixed;
  bottom: 18px;
  right: 16px;
  z-index: 99998;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s var(--sahl-ease), transform .25s var(--sahl-ease);
  background: rgba(20, 16, 35, .65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sahl-soft-shadow);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  user-select: none;
}

#sahl-backtotop.sahl-show{
  opacity: 1;
  transform: translateY(0);
}

/* ✅ (2) Toast (Added to cart) */
#sahl-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(12px);
  z-index: 99997;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(20, 16, 35, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sahl-soft-shadow);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  opacity: 0;
  transition: opacity .25s var(--sahl-ease), transform .25s var(--sahl-ease);
  pointer-events: none;
  white-space: nowrap;
}

#sahl-toast.sahl-on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ✅ (9) Price Shine (subtle) */
@keyframes sahlPriceShine{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(1.12); }
  100%{ filter: brightness(1); }
}

.sahl-price-shine{
  animation: sahlPriceShine 1.2s var(--sahl-ease) 1;
}

/* ✅ (5) Fullscreen Image Modal */
#sahl-img-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

#sahl-img-modal.sahl-open{
  display: flex;
}

#sahl-img-modal img{
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 16px;
  box-shadow: var(--sahl-shadow);
  background: rgba(255,255,255,.02);
}

/* reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .sahl-reveal{ transition: none !important; }
  #sahl-toast{ transition: none !important; }
  #sahl-backtotop{ transition: none !important; }
}
/* =========================
   SAFE Micro-Interactions (CSS)
   1,2,3,5,6,7,9
   ========================= */

:root{
  --mi-ease: cubic-bezier(.2,.8,.2,1);
  --mi-shadow: 0 14px 32px rgba(0,0,0,.14);
  --mi-soft: 0 10px 24px rgba(0,0,0,.12);
}

/* (1) Touch feedback */
.mi-tap{
  transform: scale(.985);
  filter: brightness(1.02);
}

/* cards transition */
custom-salla-product-card,
.s-product-card-entry,
.s-product-card{
  transition: transform .18s var(--mi-ease), box-shadow .18s var(--mi-ease), filter .18s var(--mi-ease);
  will-change: transform;
}

@media (hover:hover){
  custom-salla-product-card:hover,
  .s-product-card-entry:hover,
  .s-product-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--mi-soft);
    filter: saturate(1.03);
  }
}

@media (hover:none){
  custom-salla-product-card:active,
  .s-product-card-entry:active,
  .s-product-card:active{
    transform: scale(.992);
  }
}

/* (3) Scroll reveal */
.mi-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--mi-ease), transform .55s var(--mi-ease);
  will-change: opacity, transform;
}
.mi-reveal.mi-in{
  opacity: 1;
  transform: translateY(0);
}

/* (6) Progress bar */
#mi-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 99999;
  background: var(--sahl-grad, linear-gradient(135deg,#f3a33b,#c85a8f,#6a4bdc));
  border-radius: 0 999px 999px 0;
  pointer-events: none;
}

/* (7) Back to top */
#mi-top{
  position: fixed;
  bottom: 18px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s var(--mi-ease), transform .22s var(--mi-ease);
  z-index: 99998;
  background: rgba(20,16,35,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--mi-shadow);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  user-select:none;
}
#mi-top.mi-show{
  opacity: 1;
  transform: translateY(0);
}

/* (2) Toast */
#mi-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(12px);
  z-index: 99997;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(20,16,35,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--mi-shadow);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:800;
  font-size: 13px;
  opacity: 0;
  transition: opacity .22s var(--mi-ease), transform .22s var(--mi-ease);
  pointer-events:none;
  white-space: nowrap;
}
#mi-toast.mi-on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* (9) Price shine */
@keyframes miShine{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(1.12); }
  100%{ filter: brightness(1); }
}
.mi-shine{ animation: miShine 1.1s var(--mi-ease) 1; }

/* (5) Fullscreen image */
#mi-img{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
#mi-img.mi-open{ display:flex; }
#mi-img img{
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 16px;
  box-shadow: var(--mi-shadow);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mi-reveal, #mi-toast, #mi-top { transition: none !important; }
  .mi-shine{ animation: none !important; }
}
/* =========================
   (3) Reveal + (9) Price Shine
   ✅ CSS-only fallback (safe & light)
   ========================= */

/* دخول الكروت */
@keyframes miEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* لمعة السعر */
@keyframes miPriceShine {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.14); }
  100% { filter: brightness(1); }
}

/* طبّق على كروت المنتجات */
#app custom-salla-product-card,
#app .s-product-card-entry,
#app .s-product-card{
  animation: miEnter .55s cubic-bezier(.2,.8,.2,1) both;
}

/* تدرّج بسيط (ستايل دخول مرتب) */
#app custom-salla-product-card:nth-child(1),
#app .s-product-card-entry:nth-child(1),
#app .s-product-card:nth-child(1){ animation-delay: .02s; }
#app custom-salla-product-card:nth-child(2),
#app .s-product-card-entry:nth-child(2),
#app .s-product-card:nth-child(2){ animation-delay: .06s; }
#app custom-salla-product-card:nth-child(3),
#app .s-product-card-entry:nth-child(3),
#app .s-product-card:nth-child(3){ animation-delay: .10s; }
#app custom-salla-product-card:nth-child(4),
#app .s-product-card-entry:nth-child(4),
#app .s-product-card:nth-child(4){ animation-delay: .14s; }
#app custom-salla-product-card:nth-child(5),
#app .s-product-card-entry:nth-child(5),
#app .s-product-card:nth-child(5){ animation-delay: .18s; }
#app custom-salla-product-card:nth-child(6),
#app .s-product-card-entry:nth-child(6),
#app .s-product-card:nth-child(6){ animation-delay: .22s; }
#app custom-salla-product-card:nth-child(7),
#app .s-product-card-entry:nth-child(7),
#app .s-product-card:nth-child(7){ animation-delay: .26s; }
#app custom-salla-product-card:nth-child(8),
#app .s-product-card-entry:nth-child(8),
#app .s-product-card:nth-child(8){ animation-delay: .30s; }

/* لمعة السعر (مرة خفيفة عند تحميل الكرت) */
#app .s-product-card-sale-price h4,
#app .s-product-card-sale-price,
#app .s-product-card-price{
  animation: miPriceShine 1.1s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: .25s;
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  #app custom-salla-product-card,
  #app .s-product-card-entry,
  #app .s-product-card,
  #app .s-product-card-sale-price h4,
  #app .s-product-card-sale-price,
  #app .s-product-card-price{
    animation: none !important;
  }
}
/* =========================================
   DESKTOP ONLY – 8 Premium Hover Interactions
   ✅ Won't run on mobile (hover:hover + pointer:fine)
   ========================================= */

@media (hover:hover) and (pointer:fine){

  :root{
    --d-ease: cubic-bezier(.2,.8,.2,1);
    --d-shadow-1: 0 10px 22px rgba(0,0,0,.10);
    --d-shadow-2: 0 18px 44px rgba(0,0,0,.14);
    --d-accent: rgba(44,19,118,.10); /* متناسق مع لونك */
  }

  /* 1) Card lift + premium shadow */
  custom-salla-product-card,
  .s-product-card-entry,
  .s-product-card{
    transition: transform .18s var(--d-ease), box-shadow .18s var(--d-ease), filter .18s var(--d-ease);
    will-change: transform;
  }

  custom-salla-product-card:hover,
  .s-product-card-entry:hover,
  .s-product-card:hover{
    transform: translateY(-7px);
    box-shadow: var(--d-shadow-2);
    filter: saturate(1.02);
  }

  /* 2) Image micro-zoom */
  .s-product-card-image img,
  .s-product-card-image picture img{
    transition: transform .22s var(--d-ease), filter .22s var(--d-ease);
    will-change: transform;
  }

  custom-salla-product-card:hover .s-product-card-image img,
  custom-salla-product-card:hover .s-product-card-image picture img,
  .s-product-card-entry:hover .s-product-card-image img,
  .s-product-card-entry:hover .s-product-card-image picture img{
    transform: scale(1.05);
    filter: contrast(1.02);
  }

  /* 3) Soft border highlight */
  custom-salla-product-card:hover,
  .s-product-card-entry:hover,
  .s-product-card:hover{
    outline: 1px solid rgba(255,255,255,.0);
    box-shadow: var(--d-shadow-2), 0 0 0 1px rgba(44,19,118,.10);
  }

  /* 4) Title underline reveal */
  .s-product-card-content-title a{
    position: relative;
    text-decoration: none;
  }

  .s-product-card-content-title a::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:-4px;
    height:2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s var(--d-ease);
    background: linear-gradient(90deg, transparent, rgba(44,19,118,.45), transparent);
    border-radius: 99px;
  }

  .s-product-card-content-title a:hover::after{
    transform: scaleX(1);
    transform-origin: left;
  }

  /* 5) Button premium hover (lift + shadow) */
  .s-product-card-content-footer button,
  .s-product-card-content-footer .s-button,
  salla-add-product-button button{
    transition: transform .14s var(--d-ease), box-shadow .14s var(--d-ease), filter .14s var(--d-ease);
    will-change: transform;
  }

  .s-product-card-content-footer button:hover,
  .s-product-card-content-footer .s-button:hover,
  salla-add-product-button button:hover{
    transform: translateY(-2px);
    box-shadow: var(--d-shadow-1);
    filter: brightness(1.03);
  }

  /* 6) Price emphasis on hover */
  @keyframes dPricePulse{
    0%{ filter: brightness(1); }
    50%{ filter: brightness(1.14); }
    100%{ filter: brightness(1); }
  }

  custom-salla-product-card:hover .s-product-card-sale-price,
  .s-product-card-entry:hover .s-product-card-sale-price,
  custom-salla-product-card:hover .s-product-card-price,
  .s-product-card-entry:hover .s-product-card-price{
    animation: dPricePulse .9s var(--d-ease) 1;
  }

  /* 7) Wishlist icon micro-pop */
  .s-product-card-wishlist-btn,
  .s-product-card-wishlist-btn .sicon-heart{
    transition: transform .16s var(--d-ease), filter .16s var(--d-ease);
  }

  .s-product-card-wishlist-btn:hover,
  .s-product-card-wishlist-btn:hover .sicon-heart{
    transform: scale(1.08);
    filter: brightness(1.06);
  }

  /* 8) Content “soft tint” */
  .s-product-card-content{
    transition: background-color .18s var(--d-ease);
  }

  custom-salla-product-card:hover .s-product-card-content,
  .s-product-card-entry:hover .s-product-card-content{
    background-color: rgba(44,19,118,.03);
    border-radius: 14px;
  }
}
/* FIX: Desktop hover effects not visible (z-index + stronger priority)
   Updated: higher card lift + stronger button shadow
*/
@media (hover:hover) and (pointer:fine){

  /* خلي الكرت يقدر يطلع فوق اللي حوله */
  custom-salla-product-card,
  .s-product-card-entry{
    position: relative !important;
    z-index: 0 !important;
    transition: transform .18s cubic-bezier(.2,.8,.2,1),
                box-shadow .18s cubic-bezier(.2,.8,.2,1),
                filter .18s cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform;
  }

  /* رفع الكرت + ظل أقوى */
  custom-salla-product-card:hover,
  .s-product-card-entry:hover{
    z-index: 9 !important;
    transform: translateY(-16px) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.22) !important;
    filter: saturate(1.02) !important;
  }

  /* زر إضافة للسلة (ظل أقوى) */
  salla-add-product-button button.s-button-element:hover,
  .s-product-card-content-footer button.s-button-element:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
    filter: brightness(1.04) !important;
  }

  /* خط تحت عنوان المنتج */
  .s-product-card-content-title a{
    position: relative !important;
    text-decoration: none !important;
  }
  .s-product-card-content-title a::after{
    content:"" !important;
    position:absolute !important;
    left:0; right:0; bottom:-4px !important;
    height:2px !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;
    background: linear-gradient(90deg, transparent, rgba(44,19,118,.55), transparent) !important;
    border-radius: 99px !important;
  }
  .s-product-card-content-title a:hover::after{
    transform: scaleX(1) !important;
    transform-origin: left !important;
  }
}

/* الى هنا تمام مراجع مع نايف */
/* الى هنا تمام مراجع مع نايف */

/* =========================
   SAHLLS Wide Banner UI (Naif)
   - Adds title + subtitle + CTA button styling
   - Safe scope: only the fixed wide banner
========================= */

:root{
  --nb-radius: 22px;
  --nb-pad: 16px;
  --nb-title: #ffffff;
  --nb-sub: rgba(255,255,255,.86);

  --nb-btn-bg: rgba(255,255,255,.12);
  --nb-btn-border: rgba(255,255,255,.20);
  --nb-btn-shadow: 0 12px 30px rgba(0,0,0,.28);
}

#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner{
  position: relative !important;
  display: block !important;
  border-radius: var(--nb-radius) !important;
  overflow: hidden !important;
}

#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius: var(--nb-radius) !important;
}

/* طبقة تغميق خفيفة جدًا للقراءة (مو زجاج) */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.22) 55%,
    rgba(0,0,0,0) 100%
  );
}

/* صندوق النص + الزر */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-ui{
  position:absolute;
  right: var(--nb-pad);
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, calc(100% - (var(--nb-pad) * 2)));
  z-index: 2;
  direction: rtl;
  text-align: right;
  pointer-events: none; /* نخلي الضغط على الصندوق ما يأثر إلا على الزر */
}

/* العنوان */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-title{
  margin: 0 0 10px 0;
  color: var(--nb-title);
  font-weight: 900;
  line-height: 1.15;
  font-size: 28px;
  text-shadow: 0 10px 26px rgba(0,0,0,.60);
}

/* الوصف */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-desc{
  margin: 0 0 14px 0;
  color: var(--nb-sub);
  font-weight: 750;
  line-height: 1.5;
  font-size: 15px;
  text-shadow: 0 10px 26px rgba(0,0,0,.60);
}

/* زر CTA */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-btn{
  pointer-events: auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;

  background: var(--nb-btn-bg);
  border: 1px solid var(--nb-btn-border);
  box-shadow: var(--nb-btn-shadow);

  color:#fff;
  font-weight: 900;
  cursor: pointer;
  user-select:none;

  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-btn:active{
  transform: translateY(1px);
}

#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-btn .naif-dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

/* جوال */
@media (max-width: 520px){
  :root{ --nb-radius: 18px; --nb-pad: 12px; }

  #main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner::after{
    background: linear-gradient(180deg,
      rgba(0,0,0,.48) 0%,
      rgba(0,0,0,.22) 55%,
      rgba(0,0,0,0) 100%
    );
  }

  #main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-ui{
    right: var(--nb-pad);
    left: var(--nb-pad);
    top: auto;
    bottom: var(--nb-pad);
    transform: none;
    width: auto;
  }

  #main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-title{
    font-size: 18px;
  }
  #main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-desc{
    font-size: 13px;
  }
}

/* === PRO TOUCH (Mobile-first) === */

/* Overlay أقوى شوي لقراءة أفضل */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner::after{
  background: linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.28) 58%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* مساحة أريح للنص */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-ui{
  padding: 2px 0 !important;
}

/* عنوان/وصف أنعم */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-title{
  letter-spacing: .2px !important;
}
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-desc{
  opacity: .92 !important;
}

/* زر CTA أوضح (بدون زجاج) */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-btn{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.32) !important;
}
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner .naif-banner-btn .naif-dot{
  background: rgba(255,255,255,.12) !important;
}
/* === FULL WIDTH Wide Banner + Soft Corners === */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder{
  overflow: visible !important;
}

#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* البنر نفسه */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner{
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* الصورة تغطي كامل البنر */
#main-content > section.s-block.s-block--fixed-banner.wide-placeholder > div > a.naif-wide-banner::before{
  background-size: cover !important;
  background-position: center !important;
}