:root{
  --pl-bg1: #050508;
  --pl-bg2: #0b0b12;

  --pl-accent: 255, 40, 60;        /* ✅ توهج أحمر (RGB) */
  --pl-accent2: 255, 255, 255;     /* ✅ توهج أبيض خفيف (RGB) */

  --pl-logo: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/embDp/hhFtUXvNogL7eWsQ2G5W9o9vBNnlFpZpAYoc7SEx.png");

  --pl-size: 160px;                /* ✅ حجم الشعار */
  --pl-ring: 250px;                /* ✅ حجم الحلقة */
}

/* اخفاء لودر الثيم الافتراضي */
html:not(.is-loaded) #preloader,
html:not(.is-loaded) .preloader,
html:not(.is-loaded) .page-preloader,
html:not(.is-loaded) .loading-screen,
html:not(.is-loaded) .initial-loader{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* منع السكرول وقت التحميل */
html:not(.is-loaded) body{ overflow:hidden !important; }




/* 🧱 إصلاح البانر في ثيم قصص - عرض كامل الصفحة */
[data-widget-type="image_slider"],
[data-widget-type="image_slider"] .swiper,
[data-widget-type="image_slider"] .swiper-wrapper,
[data-widget-type="image_slider"] .swiper-slide,
[data-widget-type="image_slider"] img {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* إزالة حدود الحاوية الافتراضية في ثيم قصص */
.container,
.section-container {
  max-width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 🧨 إزالة أي عنوان أو نقطة داخل عناصر الأقسام بالكامل */
html body [data-widget-type] h1,
html body [data-widget-type] h2,
html body [data-widget-type] h3,
html body [data-widget-type] .title,
html body [data-widget-type] .widget-title {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  display: block !important; /* نحافظ على الهيكل بدون فراغ */
}

/* إزالة أي محتوى نصي أو رموز داخل العناوين (حتى النقطة) */
html body [data-widget-type] h1::before,
html body [data-widget-type] h1::after,
html body [data-widget-type] h2::before,
html body [data-widget-type] h2::after,
html body [data-widget-type] h3::before,
html body [data-widget-type] h3::after,
html body [data-widget-type] .title::before,
html body [data-widget-type] .title::after,
html body [data-widget-type] .widget-title::before,
html body [data-widget-type] .widget-title::after {
  content: none !important;
  display: none !important;
}

/* تنسيق المسافات بين الأقسام بعد الإخفاء */
html body [data-widget-type] {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
}

/* إخفاء أزرار التنقل الخاصة بالسلايدر */
.s-slider-prev,
.s-slider-next {
  display: none !important;
}

/* جعل عنوان قسم الأسئلة الشائعة أبيض بالكامل */
[data-widget-type="faqs"] h2,
[data-widget-type="faqs"] .widget-title,
[data-widget-type="faqs"] .title,
.widget-faqs .widget-title,
.widget-faqs h2 {
  color: #ffffff !important;
}

/* ====== توسيط قسم الأسئلة الشائعة بالكامل ====== */
section.question .container{
  /* نخلي محتويات القسم تتوسّط */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  /* احتياط لو فيه انحراف بسبب فلوت/مارجن */
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* توسيط عنوان "الأسئلة الشائعة" */
section.question .block_title{
  width: 100% !important;
  justify-content: center !important;  /* بدل space-between */
  text-align: center !important;
}

/* توسيط شبكة الأسئلة (صفّين زي ما هي على الديسكتوب) */
section.question .accordion{
  width: min(1100px, 100%) !important; /* عدّل 1100 إذا تبيها أوسع/أضيق */
  margin-inline: auto !important;       /* توسيط RTL/LTR */
}

/* (اختياري) لو تبي الخطوط/العناصر تصير متساوية داخل العمودين */
section.question .accordion .accordion__item{
  width: 100% !important;
}

/* ====== 1) الخلفية (سينمائية + نجوم خفيفة + scanlines) ====== */
html:not(.is-loaded)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483646;

  /* نجوم خفيفة + فينييت + توهج أحمر بالوسط */
  background:
    radial-gradient(900px 520px at 50% 45%, rgba(var(--pl-accent),.18), transparent 62%),
    radial-gradient(700px 420px at 45% 55%, rgba(var(--pl-accent2),.06), transparent 65%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--pl-bg2), var(--pl-bg1));
}

/* ====== 2) طبقة “حركة رقمية” (scanlines + sheen متحرك) ====== */
html:not(.is-loaded)::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483647;
  pointer-events:none;
  opacity:.8;

  background:
    /* scanlines */
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 7px
    ),
    /* sheen sweep */
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.10) 45%,
      transparent 60%
    );

  background-size: auto, 220% 220%;
  animation: pl-sheen 1.25s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ====== 3) الشعار بالوسط + نبضة توهج ====== */
html:not(.is-loaded) body::before{
  content:"";
  position:fixed;
  left:50%;
  top:50%;
  width:var(--pl-size);
  height:var(--pl-size);
  transform:translate(-50%,-50%);
  z-index:2147483647;

  background-image:var(--pl-logo);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  filter:
    drop-shadow(0 18px 50px rgba(0,0,0,.65))
    drop-shadow(0 0 26px rgba(var(--pl-accent), .22));
  animation: pl-pop 1.15s ease-in-out infinite;
}

/* ====== 4) حلقة نيون + نقطة تدور (Orbit) ====== */
html:not(.is-loaded) body::after{
  content:"";
  position:fixed;
  left:50%;
  top:50%;
  width:var(--pl-ring);
  height:var(--pl-ring);
  transform:translate(-50%,-50%);
  z-index:2147483647;
  border-radius:999px;

  /* الحلقة + نقطة orbit داخل نفس العنصر */
  background:
    /* orbit dot */
    radial-gradient(circle at 50% 0%,
      rgba(255,255,255,.75) 0 5px,
      rgba(var(--pl-accent),.65) 6px 10px,
      transparent 11px
    ),
    /* ring */
    conic-gradient(
      rgba(var(--pl-accent), .00) 0deg,
      rgba(var(--pl-accent), .95) 55deg,
      rgba(255,255,255,.18) 85deg,
      rgba(var(--pl-accent), .35) 160deg,
      rgba(255,255,255,.10) 210deg,
      rgba(var(--pl-accent), .95) 320deg,
      rgba(var(--pl-accent), .00) 360deg
    );

  /* نخليها Ring (تفريغ الوسط) */
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%);
          mask: radial-gradient(circle, transparent 61%, #000 63%);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 40px rgba(var(--pl-accent), .22),
    0 0 110px rgba(var(--pl-accent2), .07);

  animation: pl-rotate .85s linear infinite;
}

/* اخفاء كل شي بعد التحميل */
html.is-loaded::before,
html.is-loaded::after,
html.is-loaded body::before,
html.is-loaded body::after{
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

/* Animations */
@keyframes pl-rotate{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes pl-pop{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.045); }
}
@keyframes pl-sheen{
  0%{ background-position: 0 0, 0% 0%; opacity:.30; }
  50%{ background-position: 0 0, 100% 100%; opacity:.65; }
  100%{ background-position: 0 0, 0% 0%; opacity:.30; }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  html:not(.is-loaded)::after,
  html:not(.is-loaded) body::before,
  html:not(.is-loaded) body::after{ animation:none !important; }
}



/* ===== Header: Desktop MENU style ===== */
@media (min-width: 1024px){

  /* كسر الارتفاع الثابت 148px */
  .store-header #mainnav.main-nav-container{
    height: auto !important; /* يكسر inline height */
  }

  /* تقليل سماكة الهيدر */
  .store-header #mainnav .inner{
    padding: 10px 0 !important;
    backdrop-filter: none !important;          /* شيل الضبابية */
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,.55) !important;    /* خلفية نظيفة */
  }

  /* اخفاء قائمة الأقسام الأفقية */
  .store-header #mainnav .menu-links{
    display: none !important;
  }

  /* إظهار زر المنيو على الديسكتوب (كان lg:hidden) */
  .store-header #mainnav a.mburger{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.06) !important;
  }

  /* كلمة MENU جنب الأيقونة */
  .store-header #mainnav a.mburger::after{
    content: "MENU"; /* تقدر تخليها: "القائمة" */
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .10em;
    color: #fff;
    opacity: .9;
  }

  /* تخفيف pb-3 اللي كان نافخ ارتفاع عناصر المنيو */
  .store-header #mainnav .main-menu .pb-3{
    padding-bottom: 0 !important;
  }

  /* ترتيب الهيدر */
  .store-header #mainnav .main-links-logo{
    position: relative !important;
    justify-content: space-between !important;
  }

  /* خلي اللوقو في النص (حتى لو RTL) */
  .store-header #mainnav .navbar-brand{
    position: absolute !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  /* حجم اللوقو */
  .store-header #mainnav .navbar-brand img{
    max-height: 34px !important;
    height: 34px !important;
    width: auto !important;
  }

  /* توازن مساحات اليمين/اليسار عشان ما يتزاحم مع اللوقو */
  .store-header #mainnav .main-links-logo > div:first-child{
    min-width: 220px !important;
  }
  .store-header #mainnav .btn_form-icons{
    min-width: 220px !important;
  }

  /* تقليل تباعد الأيقونات */
  .store-header #mainnav .sammery_icons{
    gap: 16px !important;
  }
}




/* زر العملة يقلللهه
/* ديسكتوب: اخفاء الشريط العلوي لأنه صار فاضي/غير مهم بعد نقل زر العملة */
@media (min-width: 768px){
  .store-header .top-navbar{ display: none !important; }
}

/* شكل زر العملة بعد نقله لصف الأيقونات */
.store-header #mainnav .currency-in-mainnav{
  display: flex !important;
  align-items: center !important;
}

.store-header #mainnav .currency-in-mainnav button{
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* تصغير العلم + حذف الفاصل | اللي مكبره */
.store-header #mainnav .currency-in-mainnav .iti__flag{
  transform: scale(.85);
  transform-origin: center;
}
.store-header #mainnav .currency-in-mainnav .mx-1\\.5{
  display: none !important;
}

/* توحيد مقاس أيقونة SAR */
.store-header #mainnav .currency-in-mainnav .sicon-sar{
  font-size: 18px !important;
  line-height: 1 !important;
}

/* ==============================
   RZ CLEAN HEADER + DESKTOP MENU
   ============================== */

/* اقفل بقايا أي محاولات قديمة */
#rz-menu-overlay, #rz-menu-drawer, #rzDesktopMenuBtn { display:none !important; }

/* --- تصغير الهيدر + إزالة الفراغ --- */
@media (min-width:1024px){
  header.store-header #mainnav.main-nav-container{
    height:72px !important;           /* كان 148px inline */
    min-height:72px !important;
  }
  header.store-header #mainnav .inner{
    padding:0 !important;             /* كان py-[5px] */
  }
  header.store-header #mainnav .main-links-logo{
    min-height:72px !important;
    justify-content:space-between !important;
    position:relative !important;
  }

  /* نخفي مكان القائمة الأفقي (كان w-[60%]) */
  header.store-header #mainnav .menu-links{
    display:none !important;
    width:0 !important;
  }

  /* نخلي البرجر يظهر بالدسكتوب ويتحوّل لزر MENU */
  header.store-header #mainnav a.mburger{
    display:inline-flex !important;   /* كان lg:hidden */
    align-items:center;
    gap:10px;
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  header.store-header #mainnav a.mburger i{
    font-size:18px !important;
  }
  header.store-header #mainnav a.mburger::after{
    content:"MENU";
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    color:#fff;
    opacity:.95;
  }

  /* توسيط الشعار */
  header.store-header #mainnav .navbar-brand{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    margin:0 !important;
  }
}

/* =========================
   DESKTOP DRAWER MENU STYLE
   ========================= */
@media (min-width:1024px){
  #rzDeskMenuOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:99998;
  }
  body.rz-desk-open #rzDeskMenuOverlay{
    opacity:1;
    pointer-events:auto;
  }

  #rzDeskMenu{
    position:fixed;
    top:0; bottom:0;
    right:0; left:auto;

    width:min(420px, 92vw);
    background:rgba(10,10,12,.96);
    color:#fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform:translateX(110%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    z-index:99999;

    overflow:auto;
    direction:rtl;
  }
  body.rz-desk-open #rzDeskMenu{
    transform:translateX(0);
  }

  #rzDeskMenu .rz-head{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px 10px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:rgba(10,10,12,.92);
  }
  #rzDeskMenu .rz-title{
    font-weight:900;
    font-size:18px;
    letter-spacing:.02em;
  }
  #rzDeskMenu .rz-close{
    width:40px;height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:22px;
    cursor:pointer;
  }

  #rzDeskMenu .rz-body{ padding:8px 10px 18px; }

  /* القائمة */
  #rzDeskMenu ul{ list-style:none; margin:0; padding:0; }
  #rzDeskMenu li{ border-bottom:1px solid rgba(255,255,255,.08); }

  #rzDeskMenu li > a,
  #rzDeskMenu li > span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 10px;
    color:#fff !important;
    font-weight:800;
    cursor:pointer;
    user-select:none;
  }

  /* أسهم للأقسام اللي لها أطفال */
  #rzDeskMenu li > span::after{
    content:"▾";
    opacity:.85;
    transform:translateY(-1px);
  }
  #rzDeskMenu li.rz-open > span::after{
    content:"▴";
  }

  /* الروابط داخل submenu */
  #rzDeskMenu li ul{
    display:none;
    padding:0 10px 10px;
  }
  #rzDeskMenu li.rz-open > ul{
    display:block;
  }
  #rzDeskMenu li ul li{
    border-bottom:0;
  }
  #rzDeskMenu li ul a{
    display:block;
    padding:10px 8px;
    font-weight:700;
    opacity:.92;
    color:#fff !important;
  }
}

/*------------------------ كود تعديل الهيدر */
/* =========================================
   RZ PATCH - Header / Menu / Banner (Desktop)
   الصقه آخر شيء بعد كودك الحالي
   ========================================= */

/* 1) تصغير زر "تسجيل الدخول" بالهيدر */
@media (min-width:1024px){
  header.store-header a[href*="login"],
  header.store-header a[href*="customer/login"],
  header.store-header a[href*="auth"],
  header.store-header .login,
  header.store-header .login-btn{
    font-size:13px !important;
    padding:8px 12px !important;
    line-height:1 !important;
    height:36px !important;
    display:inline-flex !important;
    align-items:center !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  /* إذا كان الزر داخل عنصر يحطه كبير (نخفف) */
  header.store-header .header-actions,
  header.store-header .actions,
  header.store-header .user-actions{
    gap:10px !important;
  }
}

/* 2) منع "المنيو الثانية الفاضية" لو انحط عليها كلاس من JS */
.rz-ghost-menu{ display:none !important; }

/* 3) إصلاح تداخل القوائم داخل المنيو (نجبرها عمود واحد) */
.rz-real-menu,
.rz-real-menu *{
  box-sizing:border-box !important;
}

/* أي أعمدة/columns داخل المنيو نخليها 1 */
.rz-real-menu [style*="column-count"],
.rz-real-menu [class*="columns"],
.rz-real-menu ul,
.rz-real-menu ol{
  column-count:1 !important;
  columns:1 !important;
}

/* إذا المنيو تستخدم grid/flex أعمدة نخليها بلوك */
.rz-real-menu [class*="grid"],
.rz-real-menu [class*="row"],
.rz-real-menu [class*="col"],
.rz-real-menu [class*="flex"]{
  display:block !important;
  grid-template-columns:1fr !important;
  flex-wrap:nowrap !important;
}

/* عناصر القائمة عرض كامل */
.rz-real-menu li,
.rz-real-menu .menu-item,
.rz-real-menu a{
  width:100% !important;
  float:none !important;
}

/* القوائم الفرعية: نخليها ستاتيك عشان تدفع المحتوى وما تتداخل */
.rz-real-menu ul ul,
.rz-real-menu .submenu,
.rz-real-menu .sub-menu{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:6px 0 10px !important;
  padding-inline-start:14px !important;
}

/* 4) لصق البانر بالهيدر (إزالة المسافة) */
@media (min-width:1024px){
  header.store-header{ margin-bottom:0 !important; }

  /* أول عنصر بعد الهيدر */
  header.store-header + main,
  header.store-header + #app,
  header.store-header + .app,
  header.store-header + .app-content,
  header.store-header + .content{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* أول سكشن داخل الصفحة */
  main > :first-child,
  #app > :first-child{
    margin-top:0 !important;
    padding-top:0 !important;
  }
}

/* منع ظهور الخلفية البيضاء حق mmenu لو انوجدت */
@media (min-width:1024px){
  .mm-ocd__content{ background: transparent !important; }
  .mm-ocd__content:empty{ display:none !important; } /* لو فعلاً فاضي */
}

/* =========================================
   RZ FIX - Inside #rzDeskMenu (No HTML edits)
   يحول القائمة لعمود واحد ويمنع تداخل الأعمدة
   ========================================= */
@media (min-width:1024px){

  /* صفّر أي Flex/Grid/Columns جاي من الثيم على main-menu */
  #rzDeskMenu .rz-body > ul.main-menu{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    column-count:1 !important;
    columns:1 !important;
  }

  #rzDeskMenu .main-menu,
  #rzDeskMenu .main-menu ul{
    display:block !important;
    flex:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    width:100% !important;
    float:none !important;
    column-count:1 !important;
    columns:1 !important;
  }

  #rzDeskMenu .main-menu > li,
  #rzDeskMenu .main-menu li{
    display:block !important;
    width:100% !important;
    float:none !important;
    clear:both !important;
  }

  /* نخلي الساب منيو تدفع المحتوى تحتها (بدون absolute) */
  #rzDeskMenu .main-menu ul{
    display:none !important;              /* افتراضيًا مقفلة */
    position:static !important;
    transform:none !important;
    inset:auto !important;
    margin:6px 0 10px !important;
    padding:0 10px 10px !important;
    border:0 !important;
  }
  #rzDeskMenu .main-menu li.rz-open > ul{
    display:block !important;             /* تفتح لما يجيها كلاس */
  }

  /* احتياط: لو تسلل mega-menu حق الديسكتوب */
  #rzDeskMenu .sub-menu,
  #rzDeskMenu .desk-menu{
    display:none !important;
  }
}

/* =========================
   RZ FIX - Search Modal Size (Desktop)
   ========================= */
:root{
  --rz-search-w: 520px;     /* ✅ عرض البحث */
  --rz-search-h: 48px;      /* ✅ ارتفاع البحث */
  --rz-search-radius: 16px; /* ✅ تدوير */
}

@media (min-width:1024px){
  body.rz-search-open .rz-search-layer{
    padding:18px 14px 0 !important;
  }

  /* الحقل نفسه */
  body.rz-search-open .rz-search-layer input[type="search"],
  body.rz-search-open .rz-search-layer input[placeholder*="بحث"],
  body.rz-search-open .rz-search-layer input[placeholder*="أدخل"]{
    width:min(var(--rz-search-w), 92vw) !important;
    max-width:var(--rz-search-w) !important;
    height:var(--rz-search-h) !important;

    display:block !important;
    margin:0 auto !important;

    padding:0 16px !important;
    font-size:16px !important;
    border-radius:var(--rz-search-radius) !important;

    background:rgba(0,0,0,.55) !important;          /* ✅ خلفية داكنة */
    color:#fff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    outline:none !important;
  }

  body.rz-search-open .rz-search-layer input::placeholder{
    color:rgba(255,255,255,.65) !important;
  }

  /* زر الإغلاق داخل البحث (لو موجود) */
  body.rz-search-open .rz-search-layer button,
  body.rz-search-open .rz-search-layer .btn-close,
  body.rz-search-open .rz-search-layer .close{
    border-radius:12px !important;
  }
}


/*
header img[alt*="logo" i]{
  transform-origin: 50% 50%;
  will-change: transform, filter;
  animation: logoFloat3D 3.8s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255,0,0,.1));
}

@keyframes logoFloat3D{
  0%,100%{
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1.35);
  }
  50%{
    transform: perspective(900px) rotateX(6deg) rotateY(-8deg) translateY(-2px) scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce){
  header img[alt*="logo" i]{
    animation: none !important;
    transform: scale(200.35) !important;
  }
}
/*


/* ===== Logo Wrapper: 3D stays + Light Sweep ===== */
.rz-logo-wrap{
  position: relative;
  display: inline-block;
  line-height: 0;
  transform-origin: 50% 50%;
  will-change: transform, filter;

  /* 3D effect (بديل ثابت وآمن بدل ما يتعارك مع transform على img) */
  animation: rzLogoFloat3D 3.8s ease-in-out infinite;

  /* Glow خفيف على اللوقو (اختياري) */
  filter:
    drop-shadow(0 0 12px rgba(255,0,0,.12))
    drop-shadow(0 0 22px rgba(255,80,0,.08));
}

@keyframes rzLogoFloat3D{
  0%,100%{ transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1.0); }
  50%{    transform: perspective(900px) rotateX(6deg) rotateY(-8deg) translateY(-2px) scale(1.0); }
}

/* نخلي صورة اللوقو نفسها طبيعية بدون transform عشان ما تتعارك */
.rz-logo-wrap img,
.rz-logo-wrap svg,
.rz-logo-wrap picture{
  display: block;
  transform: none !important;
  animation: none !important;
}

/* طبقة اللمعة */
.rz-logo-wrap .rz-logo-sweep{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.75;          /* قوة اللمعة */
  mix-blend-mode: screen;

  /* قصّ اللمعة على شكل اللوقو باستخدام mask من نفس صورة اللوقو */
  -webkit-mask-image: var(--rzLogoMask);
  mask-image: var(--rzLogoMask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.rz-logo-wrap .rz-logo-sweep::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-85%;
  width: 65%;
  height: 230%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.35),
    rgba(255,210,160,.20),
    rgba(255,255,255,0)
  );
  transform: rotate(18deg);
  filter: blur(1.2px);
  animation: rzLogoSweep 2.0s ease-in-out infinite;
}

@keyframes rzLogoSweep{
  0%   { transform: translateX(0) rotate(18deg); opacity: 0; }
  12%  { opacity: 1; }
  50%  { opacity: .75; }
  88%  { opacity: 1; }
  100% { transform: translateX(310%) rotate(18deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .rz-logo-wrap{ animation: none !important; }
  .rz-logo-wrap .rz-logo-sweep::after{ animation: none !important; }
}

/* ===== FIX: تحكم مضمون بقوة اللمعة (بدون تعديل كودك) ===== */

/* 1) مكان التحكم (غير الأرقام هنا) */
header .rz-logo-wrap{
  --rzSweepLayerOpacity: 0.90;   /* قوة اللمعة العامة (0.15 إلى 1) */
  --rzSweepWhiteA: 0.80;         /* لمعان الأبيض داخل اللمعة (0.2 إلى 1) */
  --rzSweepGoldA: 0.70;          /* لمعان الذهبي داخل اللمعة (0.2 إلى 1) */
  --rzSweepBoost: 2;          /* تضخيم الوضوح (1 إلى 3) */
  --rzSweepBlur: 0.2px;          /* نعومة اللمعة (0 إلى 2px) */
}

/* 2) نفرض الأوبسيتي الصح على الطبقة نفسها */
header .rz-logo-wrap .rz-logo-sweep{
  opacity: var(--rzSweepLayerOpacity) !important;
}

/* 3) هذا الأهم: نغيّر “قوة اللمعة” بتغيير ألفا الألوان داخل الـ gradient نفسه */
header .rz-logo-wrap .rz-logo-sweep::after{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,var(--rzSweepWhiteA)),
    rgba(255,210,160,var(--rzSweepGoldA)),
    rgba(255,255,255,0)
  ) !important;

  /* نخليها تبان بقوة حتى مع screen/mask */
  filter: blur(var(--rzSweepBlur)) brightness(var(--rzSweepBoost)) saturate(var(--rzSweepBoost)) !important;
}

/* 4) إذا تبغى يبان الفرق أكيد جدًا: فك الـ screen (اختياري) */
header .rz-logo-wrap .rz-logo-sweep{
  mix-blend-mode: normal !important;
}

:root{ --rzLogoScale: 1.8; } /* غيّرها: 1.0 / 1.2 / 1.5 / 1.8 */

@keyframes rzLogoFloat3D{
  0%,100%{
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0)
      scale(var(--rzLogoScale));
  }
  50%{
    transform: perspective(900px) rotateX(6deg) rotateY(-8deg) translateY(-2px)
      scale(var(--rzLogoScale));
  }
}



/* --------------- ايفكت الماوس يولد */
/* =========================================================
   RZ CSS-Only Cursor (NO JS) ✅
   - ما يسبب قفز بالسكرول نهائيًا لأنه بدون عناصر/بدون سكربت
   - 3 حالات: عادي / Hover على قابل للنقر / ضغط (Active)
   ========================================================= */

/* 🟩 Cursor عادي */
:root{
  --rz-cur-normal: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%2212%22%20fill=%22white%22%20opacity=%220.08%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%229%22%20fill=%22white%22%20opacity=%220.10%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%229%22%20fill=%22none%22%20stroke=%22%23ff2b2b%22%20stroke-width=%222%22%20opacity=%220.95%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%223%22%20fill=%22%23ff2b2b%22/%3E%3C/svg%3E") 16 16, auto;

  /* 🟨 Hover على عناصر قابلة للنقر (الدائرة تصير بيضاء وتكبر شوي) */
  --rz-cur-hover: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%2213%22%20fill=%22white%22%20opacity=%220.10%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%2211%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%222%22%20opacity=%220.95%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%223%22%20fill=%22%23ff2b2b%22/%3E%3C/svg%3E") 16 16, pointer;

  /* 🟥 ضغط (Active) */
  --rz-cur-active: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%2212%22%20fill=%22white%22%20opacity=%220.10%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%229%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%222%22%20opacity=%220.95%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%223%22%20fill=%22%23ff2b2b%22/%3E%3C/svg%3E") 16 16, pointer;
}

/* يشتغل فقط على الكمبيوتر */
@media (pointer:fine) and (hover:hover){

  /* الحالة العادية */
  body { cursor: var(--rz-cur-normal); }

  /* عناصر قابلة للنقر */
  a[href],
  button,
  [role="button"],
  summary,
  label[for],
  [onclick],
  input[type="button"],
  input[type="submit"],
  .btn,
  .button,
  .salla-btn,
  .s-button,
  .add-to-cart{
    cursor: var(--rz-cur-hover);
  }

  /* عند الضغط */
  a[href]:active,
  button:active,
  [role="button"]:active,
  summary:active,
  [onclick]:active,
  .btn:active,
  .button:active,
  .salla-btn:active,
  .s-button:active,
  .add-to-cart:active{
    cursor: var(--rz-cur-active);
  }

  /* حقول الكتابة خليها طبيعي */
  input, textarea, [contenteditable="true"]{
    cursor: text;
  }
}


/*------------- حل مسافة البانر ------- */
/* =========================================
   RZ - FIX GAP: Header <-> Fixed Banner
   (يلصق البانر بالهيدر + يمنع التكرار)
   ========================================= */

/* 1) تأكد ما فيه مسافة تحت الهيدر */
header.store-header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) هذا هو بلوك البانر اللي بعد الهيدر مباشرة */
header.store-header + section.s-block.s-block--fixed-banner.wide-placeholder{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* أحيانًا المسافة تكون على .s-block نفسه أو على .container */
header.store-header + section.s-block.s-block--fixed-banner{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
header.store-header + section.s-block.s-block--fixed-banner > .container{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) احتياط: لو الصورة نفسها عليها مسافة */
header.store-header + section.s-block.s-block--fixed-banner .banner{
  margin-top: 0 !important;
}

/* 4) عندك بانر مكرر خارج الـ section (container ثاني) — نخفيه */
header.store-header + section.s-block.s-block--fixed-banner + .container{
  display: none !important;
}

/*--------------- تعديل الاقسام والمنتجات -- */
/* =========================================
   RZ Category Cards - Style A (Neon + Sweep)
   Targets: .catCard .image_cat img.image_after  :contentReference[oaicite:1]{index=1}
   ========================================= */
:root{
  --rz-red: #ad0000;                 /* ✅ لون الإطار */
  --rz-red-soft: rgba(255,43,43,.45);/* ✅ توهج أحمر خفيف */
  --rz-glow-white: rgba(255,255,255,.14); /* ✅ Glow أبيض خفيف */
  --rz-lift: 8px;                    /* ✅ ارتفاع الكارد عند hover */
}

/* على الدسكتوب فقط */
@media (hover:hover) and (pointer:fine){

  /* الكارد */
  .catCard{
    display:block;
    transform: translateZ(0);
  }

  /* صندوق الصورة */
  .catCard .image_cat{
    position: relative;
    border: 2px solid var(--rz-red) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  }

  /* توهج داخلي (Glow) */
  .catCard .image_cat::before{
    content:"";
    position:absolute;
    inset:-2px;
    pointer-events:none;
    opacity:0;
    transition: opacity .25s ease;
    background:
      radial-gradient(60% 60% at 50% 35%, var(--rz-glow-white), transparent 65%),
      radial-gradient(90% 80% at 50% 120%, var(--rz-red-soft), transparent 70%);
  }

  /* موجة ضوء تمر على الصورة (Shine Sweep) */
  .catCard .image_cat::after{
    content:"";
    position:absolute;
    top:-20%;
    left:-140%;
    width: 80%;
    height: 140%;
    pointer-events:none;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 50%);
    transform: rotate(8deg);
    opacity:0;
  }

  /* الصورة نفسها */
  .catCard img.image_after{
    display:block;
    width:100%;
    height: auto;
    transform: scale(1.0);
    transition: transform .35s ease, filter .35s ease;
    will-change: transform;
  }

  /* Hover */
  .catCard:hover .image_cat{
    transform: translateY(calc(-1 * var(--rz-lift)));
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 16px 45px rgba(0,0,0,.55),
      0 0 22px var(--rz-red-soft);
    border-color: rgba(255,43,43,.95) !important;
  }
  .catCard:hover .image_cat::before{ opacity:1; }
  .catCard:hover img.image_after{
    transform: scale(1.045);
    filter: saturate(1.06) contrast(1.04);
  }
  .catCard:hover .image_cat::after{
    opacity:1;
    animation: rzSweep .75s ease forwards;
  }

  @keyframes rzSweep{
    from{ left:-140%; }
    to{ left:140%; }
  }

  /* (اختياري) إذا الخطوط الذهبية عندك معمولة بـ pseudo-elements على الكارد:
     فعل هذا السطر فقط لو تبي تلغيها نهائيًا */
  /* .catCard::before, .catCard::after{ content:none !important; display:none !important; } */
}

/* =========================================
   RZ LOADER PATCH - Remove white flash layer
   ========================================= */
/* =========================================
   RZ LOADER PATCH v2
   - يرجّع scanlines بشكل هادي
   - دائرة stroke واضحة + نقطة + ذيل يلحقها
   ========================================= */

/* 1) رجّع الخطوط الخفيفة (بدون فلاش/لمعة كبيرة) */
html:not(.is-loaded)::after{
  animation: none !important;
  mix-blend-mode: normal !important;
  opacity: .28 !important; /* وضوح الخطوط */
  pointer-events: none !important;

  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.05) 0,
    rgba(255,255,255,.05) 1px,
    transparent 1px,
    transparent 8px
  ) !important;
}

/* 2) دائرة stroke + dot + tail (بدون ما تختفي) */
html:not(.is-loaded) body::after{
  content:"" !important;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--pl-ring, 250px) !important;
  height: var(--pl-ring, 250px) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483647 !important;
  border-radius: 999px !important;

  /* ترتيب الطبقات: dot فوق / tail / base stroke */
  background:
    /* DOT (فوق) */
    radial-gradient(circle at 50% 0%,
      rgba(255,255,255,.95) 0 4px,
      rgba(var(--pl-accent), .95) 5px 10px,
      transparent 11px
    ),
    /* TAIL (يلحق النقطة) — رأس قوي قريب من الأعلى */
    conic-gradient(from 0deg,
      rgba(var(--pl-accent), 0.00) 0deg 250deg,
      rgba(var(--pl-accent), 0.10) 250deg 305deg,
      rgba(var(--pl-accent), 0.28) 305deg 338deg,
      rgba(var(--pl-accent), 0.85) 338deg 355deg,
      rgba(255,255,255,.35) 355deg 360deg
    ),
    /* BASE STROKE (خفيف حول الدائرة) */
    conic-gradient(from 0deg,
      rgba(255,255,255,.12) 0 360deg
    ) !important;

  /* ✅ هذا أهم شيء: نخليها "حلقة" واضحة (أسمك من قبل عشان ما تختفي) */
  -webkit-mask: radial-gradient(circle, transparent 86%, #000 88%) !important;
          mask: radial-gradient(circle, transparent 86%, #000 88%) !important;

  /* توهج لطيف */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 18px rgba(var(--pl-accent), .20),
    0 0 55px rgba(var(--pl-accent), .12) !important;

  filter: drop-shadow(0 0 10px rgba(var(--pl-accent), .22)) !important;

  /* دوران أهدى */
  animation: pl-rotate 1.05s linear infinite !important;
}

/* =========================================
   إزالة الفراغ بين FAQ والفوتر
   ========================================= */

/* 1) شيل أي margin/padding تحت سكشن الأسئلة الشائعة */
section.question.space{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) شيل أي مسافة فوق العنصر اللي بعده مباشرة (غالباً الفوتر) */
section.question.space + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) احتياط: بعض الثيمات تحط margin-top على الفوتر نفسه */
footer.store-footer,
.store-footer,
footer{
  margin-top: 0 !important;
}


/* ================================
   تصغير الشعار (الجوال)
   ================================ */

/* التحكم بالمقاسات */
@media (max-width: 768px){

  /* كان عندك :root --rzLogoScale: 1.8  (يكبر الشعار)، هنا نصغره شوي */
  :root{
    --rzLogoScale: 1.15; /* جرّب 1.25 ~ 1.45 حسب ذوقك */
  }

  /* نحد ارتفاع صورة الشعار داخل الهيدر */
  header .navbar-brand img,
  .store-header .navbar-brand img{
    height: 44px !important;      /* عدّلها 40 - 48 */
    max-height: 44px !important;
    width: auto !important;
  }

  /* (اختياري) ترتيب الرابر حق شعارك */
  header .navbar-brand .rz-logo-wrap,
  .store-header .navbar-brand .rz-logo-wrap{
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ================================
   تصحيح (اختياري) لو مفعّل Reduce Motion
   لأن عندك scale(200.35) يضخم الشعار بشكل جنوني
   ================================ */
@media (prefers-reduced-motion: reduce){
  header img[alt*="logo" i]{
    transform: scale(1) !important;
  }
}

/* ================================
   العملة: نقل + تنسيق (الجوال)
   ================================ */

/* التحكم بالمقاسات */
@media (max-width: 768px){

  /* حذف الهيدر المنفصل (اللي كان فيه الريال) */
  header.store-header .top-navbar{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* تنسيق زر العملة لما ينقل جنب الأيقونات */
  header.store-header .btn_form-icons .sammery_icons .rz-currency-icon .btn--rounded-gray{
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* إخفاء الفاصل | داخل الزر عشان يصير شكله أيقونة */
  header.store-header .btn_form-icons .sammery_icons .rz-currency-icon .btn--rounded-gray .mx-1\.5{
    display: none !important;
  }

  /* (اختياري) إذا تبي تخفي العلم بعد النقل */
  /* 
  header.store-header .btn_form-icons .sammery_icons .rz-currency-icon .btn--rounded-gray .iti__flag{
    display:none !important;
  }
  */
}


/* =========================
/* إظهار تصنيفات المتجر
/* ========================= */

/* هذا Override للسطر اللي كان يخفي أول container بعد البانر */
header.store-header + section.s-block.s-block--fixed-banner + section.categores{
  display: block !important;
}


/* ================================
/* تقليل المسافة بين البانر والتصنيفات (جوال)
/* ================================ */
@media (max-width: 767px) {

  /* البانر الأول (Fixed Banner) */
  .s-block--fixed-banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 6px !important; /* قلّلها زي ما تبي */
  }

  .s-block--fixed-banner .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .s-block--fixed-banner .banner {
    margin-bottom: 0 !important;
  }

  /* قسم التصنيفات اللي بعد البانر مباشرة */
  .s-block--fixed-banner + .categores {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* ================================
/* (جوال) تصغير كروت الأقسام + ترتيب 3 فوق و 2 بالوسط
/* ================================ */
@media (max-width: 767px) {

  /* شبكة الأقسام: 6 أعمدة (كل كرت ياخذ 2) = 3 كروت بالصف */
  .categores .grid{
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;                 /* المسافة بين الكروت */
    justify-content: center !important;
    align-items: start !important;
  }

  /* كل كرت ياخذ 2 أعمدة */
  .categores .grid > *{
    grid-column: span 2 !important;
  }

  /* نخلي صف ثاني (عنصرين) بالوسط: 4 يبدأ من 2 و 5 يبدأ من 4 */
  .categores .grid > :nth-child(4){
    grid-column: 2 / span 2 !important;
  }
  .categores .grid > :nth-child(5){
    grid-column: 4 / span 2 !important;
  }

  /* تصغير حجم الكروت نفسها */
  .categores .grid > *{
    max-width: 165px !important;          /* صغّر/كبّر حسب ذوقك */
    width: 100% !important;
  }

  /* لو داخل الكرت فيه صورة/رابط كبير، خففه */
  .categores .grid > * img{
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* ================================
/* (جوال) تقليل المسافات بشكل عام بين البلوكات
/* ================================ */
@media (max-width: 767px) {

  /* أي بلوك بالصفحة الرئيسية */
  .s-block{
    margin-bottom: 8px !important;       /* كان كبير غالباً */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .s-block .container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* البانر/السلايدر فوق */
  .s-block--fixed-banner{
    margin-bottom: 2px !important;
  }
}


/* =========================================================
   الجوال: تقليل المسافات + ترتيب/تصغير التصنيفات (3 فوق + 2 وسط)
   ========================================================= */

@media (max-width: 767px) {

  /* ---------------------------
     تقليل المسافة فوق الأقسام (mt-[100px])
     --------------------------- */
  .mt-\[100px\]{
    margin-top: 10px !important;  /* كان 100px */
  }

  /* ---------------------------
     تقليل مسافات الأقسام بشكل عام داخل الصفحة
     (إذا عندك Sections عليها class="space" أو data-widget-type)
     --------------------------- */
  section.space{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  [data-widget-type]{
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  /* ---------------------------
     التصنيفات: نخليها Flex عشان آخر صف (2) يجي بالنص
     --------------------------- */
  section.categores .grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 10px !important; /* قلل/زود حسب ذوقك */
  }

  /* ---------------------------
     التصنيفات: تصغير الكروت (يناسب 3 فوق + 2 بالنص)
     --------------------------- */
  section.categores .grid > a.catCard{
    width: calc(33.333% - 10px) !important; /* 3 في الصف */
    max-width: 118px !important;            /* تصغير واضح */
    margin: 0 !important;
  }

  /* ---------------------------
     إزالة الفراغ الداخلي داخل الكرت (mb-3 كان يكبر ارتفاع الصف)
     --------------------------- */
  section.categores .image_cat{
    max-width: 118px !important;
    margin-bottom: 0 !important;  /* يلغي mb-3 */
  }

  /* لو عنوان التصنيف فاضي (زي عندك)، نخفيه نهائياً عشان ما يحجز مساحة */
  section.categores .full_title{
    display: none !important;
  }

}


/* ====== MOBILE: tighten spacing + resize yellow side bars ====== */
@media (max-width: 767px) {

  /* (A) قلّل المسافة تحت البانر الثابت */
  .s-block.s-block--fixed-banner{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .s-block.s-block--fixed-banner .container{
    padding-bottom: 0 !important;
  }
  .s-block.s-block--fixed-banner img{
    display: block !important; /* يزيل فراغ بسيط تحت الصور */
  }

  /* (B) قلّل المسافات بين بلوكات المتجر بشكل عام */
  .s-block{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 6px !important; /* نزّلها لو تبي أكثر: 4px أو 2px */
  }
  .s-block .container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* (C) الأقسام نفسها: لصّقها أكثر + قلّل الفراغات داخلها */
  section.categores{
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 8px !important;
  }
  section.categores .grid{
    gap: 10px 8px !important; /* مسافة بين الكروت (عمودي/أفقي) */
    margin-top: 0 !important;
  }

  /* يقلّل المسافة تحت صورة التصنيف (بدل mb-3) */
  section.categores .image_cat{
    margin-bottom: 6px !important;
  }

  /* (D) الأصفر يمين/يسار كل تصنيف (تصغيره) */
  section.categores a.catCard::before,
  section.categores a.catCard::after{
    width: 8px !important;
    height: 42px !important;
    border-radius: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* مكانه يمين ويسار */
  section.categores a.catCard::before{ right: -4px !important; left: auto !important; }
  section.categores a.catCard::after{ left: -4px !important; right: auto !important; }

}


/* =========================================
   (جوال) تصنيفات المتجر - النسخة النهائية
   3 فوق + 2 بالنص + أصفر يمين/يسار بدون تكرار
========================================= */
@media (max-width: 767px){

  /* 0) متغيرات تحكم سريعة */
  section.categores{
    --rz-mt: 2px;       /* المسافة فوق التصنيفات */
    --rz-mb: 2px;       /* المسافة تحت التصنيفات */
    --rz-gap: 2px;     /* المسافة بين الكروت */
    --rz-max: 122px;    /* أقصى عرض للكرت */

    --rz-yellow-w: 4px;   /* سماكة الأصفر */
    --rz-yellow-h: 60px;  /* طول الأصفر */
    --rz-yellow-off-start: -0.25px;  /* ✅ جهة اليسار (start) */
    --rz-yellow-off-end:   -4px;  /* ✅ جهة اليمين  (end)  */

  }

  /* 1) تقليل الفراغات الكبيرة (بدال mt-[100px]) */
  section.categores{
    margin-top: var(--rz-mt) !important;
    margin-bottom: var(--rz-mb) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2) مهم: إلغاء أي أصفر قديم مرسوم على عناصر ثانية (سبب الخطين) */
  section.categores .parent-div-img::before,
  section.categores .parent-div-img::after,
  section.categores .image_cat::before,
  section.categores .image_cat::after{
    content: none !important;
    display: none !important;
  }

  /* 3) شبكة 6 أعمدة = 3 فوق + 2 بالنص (قريبين) */
  section.categores .grid{
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--rz-gap) !important;
    justify-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* كل كرت span 2 => 3 في الصف */
  section.categores .grid > a.catCard{
    grid-column: span 2 !important;
    width: 100% !important;
    max-width: var(--rz-max) !important;
    margin: 0 !important;
    position: relative !important;  /* مهم للأصفر */
    overflow: visible !important;
    display: block !important;
  }

  /* آخر عنصرين يتوسطنون ويقربون (عندك 5 تصنيفات) */
  section.categores .grid > a.catCard:nth-last-child(2){
    grid-column: 2 / span 2 !important;  /* أعمدة 2-3 */
  }
  section.categores .grid > a.catCard:last-child{
    grid-column: 4 / span 2 !important;  /* أعمدة 4-5 */
  }

  /* 4) خفف المسافة داخل الكرت */
  section.categores .image_cat{
    margin-bottom: 0 !important;
  }

  /* 5) الأصفر: مرّة وحدة فقط على catCard يمين ويسار */
  section.categores .grid > a.catCard::before,
  section.categores .grid > a.catCard::after{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: var(--rz-yellow-w) !important;
    height: var(--rz-yellow-h) !important;
    border-radius: 999px !important;
    background: #f6b300 !important;

    z-index: 9999 !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* يسار/يمين مضبوطين (RTL safe) */
section.categores .grid > a.catCard::before{
  inset-inline-start: calc(var(--rz-yellow-off-start) * -1) !important;
}
section.categores .grid > a.catCard::after{
  inset-inline-end: calc(var(--rz-yellow-off-end) * -1) !important;
}

}


@media (max-width: 767px){

  /* إظهار FAQ بأي اسم يجي من سلة */
  .s-block--faq,
  .s-faq,
  section[data-block-type="faq"],
  section[data-widget-type="faq"]{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

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

  /* الفراغ الضخم غالبًا من wide-placeholder */
  .wide-placeholder{
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ولو البانر الفكسد يسوي فراغ */
  .s-block--fixed-banner.wide-placeholder{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ------------- (جوال) توسيط الأقسام بين البانرات ------------- */
/*
  ✅ عدّل الأرقام هنا فقط:
  6px  = المسافة تحت البانر اللي فوق (كل ما قلّ الرقم الأقسام تطلع لفوق)
  4px  = المسافة فوق الأقسام
  16px = المسافة تحت الأقسام (كل ما زاد الرقم تبعد عن البانر اللي تحت)
*/

@media (max-width: 767px){

  body.index{
    --rz-m-banner-mb: -30px;   /* عدّل هذا: مسافة تحت كل بانر */
    --rz-m-cats-mt:   1px;   /* عدّل هذا: مسافة فوق الأقسام */
    --rz-m-cats-mb:  10px;   /* عدّل هذا: مسافة تحت الأقسام */
  }

  /* 1) تقليل الفراغ تحت البانر (علشان الأقسام تقرب منه) */
  body.index section.s-block.s-block--fixed-banner{
    margin-top: 0 !important;                          /* يمنع أي دفع لتحت */
    margin-bottom: var(--rz-m-banner-mb) !important;   /* ✅ يتحكم بمسافة تحت البانر */
    padding-top: 0 !important;                         /* يشيل padding الثيم */
    padding-bottom: 0 !important;                      /* يشيل padding الثيم */
  }

  body.index section.s-block.s-block--fixed-banner > .container{
    padding-top: 0 !important;                         /* يشيل padding داخل container */
    padding-bottom: 0 !important;
  }

  body.index section.s-block.s-block--fixed-banner .banner{
    margin-bottom: 0 !important;                       /* يمنع أي فراغ تحت صورة البانر */
  }

  /* 2) نستخدم متغيراتك الموجودة للأقسام بدون ما نلمس كود الأصفر */
  body.index section.categores{
    --rz-mt: var(--rz-m-cats-mt);  /* ✅ يغيّر المسافة فوق الأقسام */
    --rz-mb: var(--rz-m-cats-mb);  /* ✅ يغيّر المسافة تحت الأقسام */
  }
}



/* ===================================================================
   (Desktop) RZ - Search Popover (Fix كل المشاكل)
   - يخفي لوحة المودال الكبيرة
   - يظهر فقط صندوق صغير (Popover)
   - إطار واحد للبحث
   - يعرض 3 نتائج + سكرول رفيع يسار
   =================================================================== */

/* ------------- تحكم سريع ----------- */
/*
  360px  : عرض البوبوفر
  44px   : ارتفاع حقل البحث
  240px  : ارتفاع النتائج (يعرض 3 تقريباً)
  0.08   : شفافية البوبوفر (خففها أكثر إذا تبغاه شبه بدون خلفية)
*/
:root{
  --rz-pop-w: 360px;       /* عدّل هذا: عرض الصندوق */
  --rz-pop-input-h: 44px;  /* عدّل هذا: ارتفاع حقل البحث */
  --rz-pop-results-h: 240px;/* عدّل هذا: ارتفاع النتائج (3 نتائج) */
  --rz-pop-bg: 0.08;       /* عدّل هذا: شفافية خلفية الصندوق */
}

@media (min-width:1024px){

  /* ✅ نخلي الـ Overlay حق سلة "غير مرئي" (عشان ما يغمّق الخلفية)
     لكن يظل موجود عشان نقدر نسكر بالضغط خارج */
  body.rz-search-open .s-modal-overlay,
  body.rz-search-open .s-modal-backdrop,
  body.rz-search-open .modal-backdrop{
    background: rgba(0,0,0,0) !important; /* ✅ بدون خلفية */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ✅ نخفي اللوحة الكبيرة (حاوية المودال) نهائياً */
  body.rz-search-open .rz-search-layer.rz-search-host-hidden{
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.rz-search-open .rz-search-layer.rz-search-host-hidden .s-modal-header{
    display: none !important; /* ✅ يمنع زر X الإضافي (أول أكس) */
  }

  /* ✅ صندوق البوبوفر اللي ننقله بجافا سكربت */
  #rzSearchPopoverShell{
    position: fixed;
    z-index: 999999;
    width: var(--rz-pop-w);
    max-width: calc(100vw - 24px);

    padding: 10px;
    border-radius: 14px;

    background: rgba(10,10,12,var(--rz-pop-bg)); /* ✅ شفافية خفيفة */
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
  }

  /* ✅ نضمن إن محتوى البحث داخل الصندوق ياخذ العرض كامل */
  #rzSearchPopoverShell .s-search-container{
    width: 100% !important;
  }

  /* =========================
     ✅ إطار واحد للبحث (حل الإطارين)
     ========================= */
  #rzSearchPopoverShell .s-search-input-wrapper{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  #rzSearchPopoverShell .s-search-input{
    height: var(--rz-pop-input-h) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important; /* ✅ إطار واحد */
    color: #fff !important;

    padding: 0 44px 0 12px !important; /* RTL */
    outline: none !important;
    font-size: 14px !important;
  }

  #rzSearchPopoverShell .s-search-input::placeholder{
    color: rgba(255,255,255,.55) !important;
  }

  #rzSearchPopoverShell .s-search-icon-wrap{
    right: 12px !important;
    opacity: .85 !important;
  }
  #rzSearchPopoverShell .s-search-icon svg{
    fill: #fff !important;
    opacity: .85 !important;
  }

  /* ✅ النتائج: 3 عناصر + سكرول يسار */
  #rzSearchPopoverShell .s-search-results{
    margin-top: 10px !important;
    padding: 6px !important;
    border-radius: 12px !important;

    background: rgba(0,0,0,.10) !important;
    border: 1px solid rgba(255,255,255,.08) !important;

    max-height: var(--rz-pop-results-h) !important; /* ✅ أهم سطر لعرض 3 */
    overflow: auto !important;

    direction: rtl !important; /* يساعد ظهور السكرول يسار غالباً */
  }

  #rzSearchPopoverShell .s-search-results::-webkit-scrollbar{
    width: 6px;
  }
  #rzSearchPopoverShell .s-search-results::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.18);
    border-radius: 999px;
  }

  /* ✅ كل نتيجة */
  #rzSearchPopoverShell a.s-search-product{
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 9px 10px !important;
    border-radius: 12px !important;

    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    text-decoration: none !important;

    margin: 0 0 8px !important;
  }
  #rzSearchPopoverShell a.s-search-product:last-child{
    margin-bottom: 0 !important;
  }

  #rzSearchPopoverShell .s-search-product-image-container{
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.25) !important;
  }

  #rzSearchPopoverShell .s-search-product-title{
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  #rzSearchPopoverShell .s-search-product-price{
    margin-top: 4px !important;
    color: #ffbb02 !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
  }

  /* ✅ نخلي زر X اللي داخل input (clear) اختياري:
     إذا تبغى تشيله نهائي، فعّل السطرين تحت */
  /*
  #rzSearchPopoverShell input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
  }
  */
}



/* ✅ Fix: منع rzDeskMenu من حجز مساحة على الجوال (لأنه مخصص للديسكتوب) */
#rzDeskMenu,
#rzDeskMenuOverlay{
  display: none !important;
}

/* الديسكتوب فقط */
@media (min-width:1024px){
  #rzDeskMenu,
  #rzDeskMenuOverlay{
    display: block !important;
  }
}





/* =========================================================
   RZ — PRODUCT CARDS (V3) ✅  (انسخ/الصق بدل القديم بالكامل)
   - الصورة تاخذ المساحة العلوية
   - المحتوى تحت مباشرة
   - 5 بالصف + نفس طول الكرت
   - السعر أبيض + إخفاء الترويج + إزالة الخطوط الصفراء
   - زر السلة مضبوط
   - NEW: إلغاء تكبير الصورة عند hover (فقط صفحات الأقسام/التصنيفات/العروض)
   - NEW: تجهيز مكان أيقونة العين بعد نقلها بالـ JS (تحت عند السعر)
========================================================= */

:root{
  --rz-red:#ad0000;
  --rz-card-radius:18px;

  --rz-card-minh: 580px;     /* طول الكرت */
  --rz-gap: 18px;            /* المسافة بين الكروت */
  --rz-img-minh: 340px;      /* أقل ارتفاع للصورة */
}

/* ====== 0) GRID: 5 بالصف ====== */
.s-products-list .s-products-list-wrapper.s-products-list-vertical-cards{
  display:grid !important;
  gap: var(--rz-gap) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 768px){
  .s-products-list .s-products-list-wrapper.s-products-list-vertical-cards{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px){
  .s-products-list .s-products-list-wrapper.s-products-list-vertical-cards{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1280px){
  .s-products-list .s-products-list-wrapper.s-products-list-vertical-cards{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ====== 1) الكرت ====== */
.s-products-list .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry{
  position: relative !important;
  border: 2px solid var(--rz-red) !important;
  border-radius: var(--rz-card-radius) !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.18) !important;

  min-height: var(--rz-card-minh) !important;

  display: flex !important;
  flex-direction: column !important;
}

/* ====== 2) إزالة الخطوط الصفراء ====== */
.s-products-list .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry::before,
.s-products-list .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry::after{
  content: none !important;
  display: none !important;
}

/* ====== 3) إخفاء العنوان الترويجي ====== */
.s-products-list custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title{
  display: none !important;
}

/* ====== 4) الصورة تاخذ المساحة العلوية ====== */
.s-products-list custom-salla-product-card.s-product-card-entry .s-product-card-image{
  padding: 0 !important;
  margin: 0 !important;

  flex: 1 1 auto !important;
  min-height: var(--rz-img-minh) !important;

  overflow: hidden !important;
  display: block !important;
}

.s-products-list custom-salla-product-card.s-product-card-entry a.fix-max-height{
  display: block !important;
  height: 100% !important;
  max-height: none !important;
}

.s-products-list custom-salla-product-card.s-product-card-entry .images-container{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.s-products-list custom-salla-product-card.s-product-card-entry .images-container img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: block !important;

  object-fit: cover !important;   /* صورك 214×214 = تملى بدون فراغات */
  object-position: center !important;
}

/* ====== 5) المحتوى تحت مباشرة (بدون فراغات) ====== */
.s-products-list custom-salla-product-card.s-product-card-entry .s-product-card-content.h-\[40\%\]{
  height: auto !important;
}
.s-products-list custom-salla-product-card.s-product-card-entry .s-product-card-content{
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;

  flex: 0 0 auto !important;
  display: block !important;

  padding: 14px 14px 14px !important;
  margin: 0 !important;
}
.s-products-list custom-salla-product-card.s-product-card-entry .s-product-card-content-footer{
  margin-top: 12px !important;
}

/* ====== 6) السعر أبيض ====== */
.s-products-list custom-salla-product-card.s-product-card-entry .s-product-card-sale-price h4{
  color: #fff !important;
}
.s-products-list custom-salla-product-card.s-product-card-entry .s-product-card-sale-price span{
  color: rgba(255,255,255,.55) !important;
}

/* ====== 7) زر السلة ====== */
.s-products-list custom-salla-product-card.s-product-card-entry salla-add-product-button .s-button-element{
  border-radius: 12px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}



/* =========================================================
   /* موبايل: خله ستاك (فوق/تحت) وبعرض كامل */



/* 1) حذف التقييمات/التعليقات بالكامل من صفحة المنتج (الزر + المحتوى) */
#product-tabs a.tab-trigger.reveiws-tab[data-target="product-tabs-faqs"],
#product-tabs [data-target="product-tabs-faqs"],
#product-tabs-faqs,
#product-tabs-faqs salla-comments,
#product-tabs-faqs .s-comments.s-comments-product {
  display: none !important;
}

/* 2) "اشتري الآن" خليها أبيض (زر الشراء السريع/mini checkout) */
salla-mini-checkout-widget,
salla-mini-checkout-widget * {
  color: #fff !important;
}

/* 3) عنوان "منتجات قد تعجبك" أبيض */
.s-slider-block__title,
.s-slider-block__title * {
  color: #fff !important;
}


/* اخفاء عنوان "التعليقات" والسكشن اللي تحته بالكامل */
h2.mb-2.sm\:mb-5.text-\[var\(--b-color\)\]:is(:where(*)):not([hidden]) {
  display: none !important;
}

/* اخفاء البلوك اللي يجي مباشرة بعد عنوان التعليقات */
h2.mb-2.sm\:mb-5.text-\[var\(--b-color\)\] + div {
  display: none !important;
}

/* احتياط: اخفاء السكشن لو كان داخل تبويب/منطقة المنتج */
#product-tabs-faqs h2.mb-2.sm\:mb-5.text-\[var\(--b-color\)\],
#product-tabs-faqs h2.mb-2.sm\:mb-5.text-\[var\(--b-color\)\] + div {
  display: none !important;
}

/* اخفاء سكشن التعليقات بالكامل + إزالة الفراغ */
.s-comments.s-comments-product{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* احتياط لو فيه مسافات من الكونتينر */
.s-comments.s-comments-product .container{
  padding: 0 !important;
  margin: 0 !important;
}

/* صفحة التصنيفات/المنتجات: تكبير السعر وتخليه أبيض */
.s-product-card-price{
  color: #fff !important;
  font-size: 18px !important; /* عدّلها: 17-20 حسب اللي يعجبك */
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* أيقونة الريال */
.s-product-card-price i,
.s-product-card-price .sicon-sar{
  color: #fff !important;
  font-size: 0.95em !important;
}



/* =========================================================
   RZ - Currency button inside header icons (Mobile+Desktop)
   ========================================================= */
.store-header .rz-currency-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline: 8px !important;
  order: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

/* خليه نفس مقاس الأيقونات */
.store-header .rz-currency-icon,
.store-header .rz-currency-icon *{
  box-sizing: border-box !important;
}

.store-header .rz-currency-icon button,
.store-header .rz-currency-icon a,
.store-header .rz-currency-icon .s-button-element,
.store-header .rz-currency-icon .s-button-wrap{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* لو رمز الريال داخل span/i */
.store-header .rz-currency-icon i,
.store-header .rz-currency-icon svg{
  font-size: 18px !important;
}

/* ضمان اندماجه مع مجموعة الأيقونات */
.store-header .btn_form-icons .sammery_icons,
.store-header .s-header__icons,
.store-header .store-header__actions{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* على الديسكتوب ممكن تكبير بسيط */
@media (min-width: 1024px){
  .store-header .rz-currency-icon button,
  .store-header .rz-currency-icon a,
  .store-header .rz-currency-icon .s-button-element,
  .store-header .rz-currency-icon .s-button-wrap{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}


/* ✅ RELATED Desktop: خل الصف يلزق يمين */




/* =========================================================
   RZ — MOBILE FIX (صفحة المنتج فقط) ✅
   RELATED "منتجات قد تعجبك" = نفس صفحة التصنيفات بالجوال 1:1
   - عمودين
   - صورة كاملة بدون قص (مربع)
   - شدّ الفراغ بين الصورة والمحتوى
   - ما يؤثر على أي مكان ثاني
========================================================= */




/* اخفاء قسم اطلبها مجدداً بالكامل */
#reorder-section,
salla-products-list[source="reorder"]{
  display: none !important;
}

/* PRODUCT PAGE — RELATED PRODUCTS (منتجات قد تعجبك) ✅ FINAL
   - Desktop: سطر واحد + سحب + 5 منتجات + زر السلة بمحاذاة ثابتة
   - Mobile: 2 منتجات + سحب + كرت أقصر (مثل صفحة التصنيف)
   - CSS ONLY / لا يمس سلايدر صور+يوتيوب المنتج
========================================================= */

:root{
  --rz-related-gap-desktop: 18px;
  --rz-related-gap-mobile: 12px;

  --rz-card-radius: 22px;
  --rz-card-border: 2px;
  --rz-card-border-color: #ff1a1a;

  /* Desktop sizing */
  --rz-card-minh-desktop: 470px;
  --rz-img-minh-desktop: 340px;

  /* Mobile sizing (أقصر) */
  --rz-card-minh-mobile: 360px;
  --rz-img-minh-mobile: 220px;
}

/* =========================
   1) السلايدر: سطر واحد + سحب
========================= */
salla-products-slider[source="related"] .s-slider-container .swiper-wrapper{
  display: flex !important;
  flex-wrap: nowrap !important; /* يمنع سطرين */
  gap: var(--rz-related-gap-desktop) !important;
}

salla-products-slider[source="related"] .s-slider-container .swiper-slide{
  flex: 0 0 auto !important;
}

/* نخلي الأسهم شغالة */
salla-products-slider[source="related"] .s-slider-nav{
  display: flex !important;
}

/* =========================
   2) المقاسات: Desktop 5 / Tablet 4 / Mobile 2
========================= */
@media (min-width: 1024px){
  salla-products-slider[source="related"] .s-slider-container .swiper-slide{
    width: calc((100% - (var(--rz-related-gap-desktop) * 4)) / 5) !important; /* 5 */
  }
}

@media (min-width: 768px) and (max-width: 1023.98px){
  salla-products-slider[source="related"] .s-slider-container .swiper-slide{
    width: calc((100% - (var(--rz-related-gap-desktop) * 3)) / 4) !important; /* 4 */
  }
}

@media (max-width: 767.98px){
  salla-products-slider[source="related"] .s-slider-container .swiper-wrapper{
    gap: var(--rz-related-gap-mobile) !important;
  }
  salla-products-slider[source="related"] .s-slider-container .swiper-slide{
    width: calc((100% - var(--rz-related-gap-mobile)) / 2) !important; /* 2 */
  }
}

/* =========================
   3) شكل الكرت (RELATED فقط)
========================= */
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry{
  position: relative !important;
  border: var(--rz-card-border) solid var(--rz-card-border-color) !important;
  border-radius: var(--rz-card-radius) !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.18) !important;

  display: flex !important;
  flex-direction: column !important;

  min-height: var(--rz-card-minh-desktop) !important;
}

salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry::before,
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry::after{
  content: none !important;
  display: none !important;
}

salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title{
  display: none !important;
}

/* =========================
   4) الصورة (تحتكمها + ما فيه فراغ)
========================= */
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-image{
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;

  flex: 0 0 auto !important;
  min-height: var(--rz-img-minh-desktop) !important;
}

salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry a.fix-max-height{
  display: block !important;
  height: 100% !important;
  max-height: none !important;
}

salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .images-container{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .images-container img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: block !important;

  object-fit: cover !important;
  object-position: center !important;
}

/* =========================
   5) المحتوى + محاذاة زر السلة (Fix العشوائية)
   - نخلي المحتوى Flex Column
   - نخلي الفوتر دايم تحت بـ margin-top:auto
========================= */
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-content{
  display: flex !important;
  flex-direction: column !important;

  padding: 12px 14px 14px !important;
  margin: 0 !important;
  background: transparent !important;

  flex: 1 1 auto !important; /* هذا مهم لتثبيت الفوتر */
}

/* عنوان المنتج: سطرين كحد أقصى (عشان ما يطوّل الكرت) */
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry h3,
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-title{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* الوصف (لو موجود) نقلله/نخفيه بالجوال تحت */
@media (max-width: 767.98px){
  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry p,
  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-description{
    display: none !important;
  }
}

/* الفوتر ينزل تحت دايم */
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-content-footer{
  margin-top: auto !important;   /* ✅ هذا يحل “زر السلة غير محاذى” */
  padding-top: 10px !important;
}

/* السعر أبيض */
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-sale-price h4{
  color: #fff !important;
}

/* زر السلة: ثابت، بعرض مناسب، وما يتحرك */
salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry salla-add-product-button{
  display: block !important;
}

salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry salla-add-product-button .s-button-element{
  width: 100% !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* =========================
   6) الجوال: كرت أقصر (مثل صفحة التصنيف)
========================= */
@media (max-width: 767.98px){
  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry{
    min-height: var(--rz-card-minh-mobile) !important;
  }

  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-image{
    min-height: var(--rz-img-minh-mobile) !important;
  }

  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-content{
    padding: 10px 12px 12px !important;
  }

  /* تصغير بسيط للتايتل والسعر عشان يضبط الطول */
  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry h3,
  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-title{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  salla-products-slider[source="related"] custom-salla-product-card.s-product-card-entry .s-product-card-sale-price h4{
    font-size: 16px !important;
  }
}


/* =========================================================
   PRODUCT PAGE — TOP ONLY (SAFE)
   ✅ يستهدف الكونتينر الأول فقط داخل #single-product
   ✅ ما يلمس "منتجات قد تعجبك" (لأنها في container ثاني)
========================================================= */

/* 1) الكونتينر العلوي فقط: توسيع خفيف + بادينق أنعم */
@media (min-width: 1024px){
  body.product-single #single-product > .container:first-of-type{
    max-width: 1280px !important;   /* تقدر ترفعها 1320 لو تبغى */
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 2) الصف العلوي (الصور يمين + التفاصيل يسار) */
@media (min-width: 1024px){

  body.product-single #single-product > .container:first-of-type > #product-1169310839{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 22px !important; /* بدل المسافة الكبيرة */
  }

  /* 3) عمود الوسائط (يمين) */
  body.product-single #single-product > .container:first-of-type > #product-1169310839 > .sidebar{
    width: 54% !important;
    flex: 0 0 54% !important;

    /* نلغي الإزاحة اللي كانت سبب فراغ كبير */
    margin-left: 0 !important;      /* يلغي rtl:ml-8 */
    margin-right: 0 !important;

    /* مهم: لا تقص السلايدر */
    overflow: visible !important;
  }

  /* 4) عمود التفاصيل (يسار) — تعريض خفيف مثل طلبك */
  body.product-single #single-product > .container:first-of-type > #product-1169310839 > .main-content{
    width: 46% !important;
    flex: 0 0 46% !important;

    overflow: visible !important;   /* لا تخنق المحتوى */
  }
}

/* 5) موبايل/تابلت: نخليها طبيعية بدون لعب */
@media (max-width: 1023.98px){
  body.product-single #single-product > .container:first-of-type > #product-1169310839{
    display: block !important;
  }
  body.product-single #single-product > .container:first-of-type > #product-1169310839 > .sidebar,
  body.product-single #single-product > .container:first-of-type > #product-1169310839 > .main-content{
    width: 100% !important;
    margin: 0 !important;
  }
}

/* =========================================================
   6) تصغير لطيف للمقاسات (نفس روح سلة الافتراضي)
========================================================= */

/* العنوان */
body.product-single #single-product > .container:first-of-type > #product-1169310839 .main-content h1{
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}
@media (min-width: 1024px){
  body.product-single #single-product > .container:first-of-type > #product-1169310839 .main-content h1{
    font-size: 22px !important;
  }
}

/* الوصف */
body.product-single #single-product > .container:first-of-type > #product-1169310839 .main-content .product-entry__sub-title{
  font-size: 13px !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
}

/* السعر */
body.product-single #single-product > .container:first-of-type > #product-1169310839 .main-content h4.total-price{
  font-size: 22px !important;
  line-height: 1.2 !important;
}

/* الأزرار */
body.product-single #single-product > .container:first-of-type > #product-1169310839 .main-content .s-button-element{
  min-height: 46px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

/* =========================================================
   PRODUCT PAGE — TOP ONLY: Center ✅
   ✅ يؤثر على الكونتينر الأول فقط
   ✅ ما يلمس "منتجات قد تعجبك"
========================================================= */

body.product-single #single-product > .container:first-of-type{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1024px){
  body.product-single #single-product > .container:first-of-type > [id^="product-"]{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* ===============================
   CLEAN PRODUCT MEDIA (NO BLOCK) ✅
   - No bottom block box
   - Thumbs centered under main media
   - Main: white border + white glow
   - Thumbs: white border + soft red glow
=============================== */

/* 1) اجبار السلايدر يكون عمودي: (الصورة فوق + thumbs تحت) */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider.s-slider-vertical{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}

/* 2) الصورة/الفيديو الأساسي */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-container{
  width: 100% !important;
  max-width: 760px !important;          /* غيّرها لو تبي أكبر */
  margin: 0 auto !important;

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

  border: 1px solid rgba(255,255,255,.18) !important;     /* ✅ اطار ابيض */
  box-shadow: 0 0 22px rgba(255,255,255,.12) !important;  /* ✅ قلو ابيض */
}

/* 3) إلغاء "البلوك" السفلي بالكامل (بدون خلفية/بوكس) */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;

  padding: 0 !important;                /* ✅ بدون بلوك */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 4) نخليها صف تحت + سحب يمين/يسار */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs .swiper{
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding: 10px 6px !important;         /* مسافة خفيفة حول الصف */
  box-sizing: border-box !important;
}

/* 5) الصف نفسه متوسط */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs .swiper-wrapper{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;

  gap: 12px !important;
  justify-content: center !important;   /* ✅ توسيط تحت الصورة */
}

/* 6) مقاس الثمبنيل + إطار أبيض + قلو أحمر خفيف */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs .swiper-slide{
  flex: 0 0 auto !important;
  width: 140px !important;
  height: 88px !important;

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

  border: 1px solid rgba(255,255,255,.22) !important;     /* ✅ اطار ابيض */
  box-shadow: 0 0 14px rgba(255,0,0,.14) !important;      /* ✅ قلو احمر خفيف */
  opacity: .92 !important;
  transition: .18s ease !important;
}

/* قص محتوى الثمبنيل (صورة/فيديو/آيفريم) */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs .swiper-slide img,
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs .swiper-slide video,
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs .swiper-slide iframe{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* النشط: تعزيز خفيف */
body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
salla-slider .s-slider-thumbs .swiper-slide-thumb-active{
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: 0 0 18px rgba(255,0,0,.22) !important;
  opacity: 1 !important;
}

/* موبايل */
@media (max-width: 767.98px){
  body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
  salla-slider .s-slider-container,
  body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
  salla-slider .s-slider-thumbs{
    max-width: 100% !important;
  }

  body.product-single #single-product > .container:first-of-type > [id^="product-"] > .sidebar
  salla-slider .s-slider-thumbs .swiper-slide{
    width: 112px !important;
    height: 72px !important;
    border-radius: 12px !important;
  }
}

/* ===============================
   DISABLE IMAGE ZOOM LENS ✅
=============================== */

/* أغلب ثيمات سلة تستخدم هذي الكلاسات/العناصر */
body.product-single .zoomImg,
body.product-single .zoomContainer,
body.product-single .zoomLens,
body.product-single .zoomWindowContainer,
body.product-single .zoomWindow,
body.product-single .zoomLensContainer,
body.product-single .s-product-image-zoom,
body.product-single .product-image-zoom,
body.product-single [class*="zoom"],
body.product-single [id*="zoom"]{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* احتياط: لو العدسة تتولد داخل السلايدر كـ overlay */
body.product-single #single-product salla-slider .s-slider-container *[style*="cursor: zoom-in"],
body.product-single #single-product salla-slider .s-slider-container *[style*="zoom"]{
  cursor: default !important;
}



/* رفع زر الواتس نفسه */
a.whatsapp-info{
  bottom: 140px !important;  /* ارفع الزر (زوّد/قلل) */
  right: 2rem !important;
  left: auto !important;
  position: fixed !important; /* إذا كان أصلاً fixed */
  z-index: 2147483647 !important;
}

/* إخفاء زر "العرض السريع" (أيقونة العين) في بطاقات المنتجات */
.quike-view,
.quike-view .sicon-eye{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ===============================
   Disable Product Image Lens / Zoom (Salla)
=============================== */
body.product-single #single-product .sidebar{
  /* احتياط: يمنع أي شيء يطلع برا */
  overflow: visible;
}

/* اخفاء كل عناصر العدسة/التكبير الشائعة */
body.product-single #single-product .sidebar
.zoomContainer,
body.product-single #single-product .sidebar
.zoomWindow,
body.product-single #single-product .sidebar
.zoomLens,
body.product-single #single-product .sidebar
.zoom-lens,
body.product-single #single-product .sidebar
.zoom-img,
body.product-single #single-product .sidebar
.zoomImg,
body.product-single #single-product .sidebar
.magnifier,
body.product-single #single-product .sidebar
.magnify,
body.product-single #single-product .sidebar
.magnify-lens,
body.product-single #single-product .sidebar
.magnify-large,
body.product-single #single-product .sidebar
.drift-bounding-box,
body.product-single #single-product .sidebar
.drift-zoom-pane,
body.product-single #single-product .sidebar
.drift-zoom-pane-container,
body.product-single #single-product .sidebar
[class*="zoom"][style*="position:"],
body.product-single #single-product .sidebar
[id*="zoom"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* يلغي شكل المؤشر حق التكبير */
body.product-single #single-product .sidebar img,
body.product-single #single-product .sidebar picture,
body.product-single #single-product .sidebar .s-slider-container{
  cursor: default !important;
}

/* =========================================================
   RZ — CATEGORY LISTING (product.index) ✅
   - نحافظ على ستايل الكروت + عدد الأعمدة (5 ديسكتوب / 2 جوال)
   - نحذف عناصر صفحة التصنيف الزايدة (البلوك القديم + أيقونات العرض + البلوك اللي تحت الكروت)
========================================================= */

/* اخفاء بلوك الروابط/التجميع اللي يظهر كبلوك قديم */
#catigory-page .categoryLinks{ display:none !important; }

/* اخفاء أيقونات تغيير العرض (المربع الأحمر) */
#catigory-page .icone-selector .icons-parent,
#catigory-page .icone-selector i.sicon-list,
#catigory-page .icone-selector i.sicon-keypad{
  display:none !important;
}

/* اخفاء البلوك اللي تحت الكروت (Pagination / Load more) */
.s-products-list[source^="product.index"] .s-pagination,
.s-products-list[source^="product.index"] .s-pagination-wrapper,
.s-products-list[source^="product.index"] salla-pagination,
.s-products-list[source^="product.index"] .s-load-more,
.s-products-list[source^="product.index"] .load-more{
  display:none !important;
}

/* ====== (Moved) Category card tuning kept as-is ====== */

/* =========================================================
   RZ — MOBILE FIX (صفحة التصنيفات/الأقسام فقط) ✅
   - نفس ستايل البي سي لكن للجوال: صورتك كاملة + محاذاة ممتازة
   - لا يؤثر على الدسكتوب نهائياً
========================================================= */

@media (max-width: 767px){

  /* 1) نعدل المتغيرات "داخل صفحة التصنيفات فقط" */
  .s-products-list[source^="product.index"]{
    --rz-gap: 12px;          /* مسافة أنعم للجوال */
    --rz-card-minh: 460px;   /* طول الكرت للجوال (خففناه عشان ما يصير مط */
    --rz-img-minh: 0px;      /* أهم شي: نلغي min-height حق الصورة */
  }

  /* 2) الشبكة: تثبيت وتوسيط + منع الزحف يسار/برا */
  .s-products-list[source^="product.index"]
  .s-products-list-wrapper.s-products-list-vertical-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rz-gap) !important;

    padding-inline: 12px !important;   /* توازن يمين/يسار */
    margin: 0 !important;
    width: 100% !important;

    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 3) الكروت: خلي البوردر ما يطلعها برا */
  .s-products-list[source^="product.index"]
  .s-products-list-wrapper.s-products-list-vertical-cards
  > custom-salla-product-card.s-product-card-entry{
    box-sizing: border-box !important;
  }

  /* 4) الصورة: "مربّع" زي صورك عشان ما تنقص + ما تتمدد بالطول */
  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry .s-product-card-image{
    flex: 0 0 auto !important;          /* يلغي تمدد flex اللي كان يقص الصورة */
    aspect-ratio: 1 / 1 !important;     /* ✅ هذا اللي يخلي الصورة كاملة */
    min-height: 0 !important;
  }

  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry a.fix-max-height,
  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry .images-container{
    height: 100% !important;
  }

  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry .images-container img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;       /* نفس ستايل البي سي */
    object-position: center !important;
  }
}



/* =========================================================
   RZ — MOBILE TIGHTEN (CATEGORIES/LISTING ONLY) ✅
   - يشيل الفراغ بين الصورة والعنوان
   - يقصر طول الكرت على الجوال
   - بدون أي تأثير على الدسكتوب
========================================================= */

@media (max-width: 767px){

  /* 1) قصّر الكرت: الغِ min-height حق النسخة الكبيرة */
  .s-products-list[source^="product.index"]
  .s-products-list-wrapper.s-products-list-vertical-cards
  > custom-salla-product-card.s-product-card-entry{
    min-height: unset !important;
    height: auto !important;
  }

  /* 2) شدّ المسافة بين الصورة والمحتوى */
  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry .s-product-card-image{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3) صغّر المحتوى وخفّف البادينق (هذا اللي يختصر الطول كثير) */
  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry .s-product-card-content{
    padding: 10px 12px 12px !important;
  }

  /* 4) قلّل المسافة قبل منطقة السعر/الزر */
  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry .s-product-card-content-footer{
    margin-top: 8px !important;
  }

  /* 5) (اختياري) صغّر زر السلة شوي عشان الكرت يطلع “رايق” */
  .s-products-list[source^="product.index"]
  custom-salla-product-card.s-product-card-entry salla-add-product-button .s-button-element{
    min-height: 42px !important;
    padding: 9px 12px !important;
  }
}






/* =========================================================
   8) NEW: إلغاء تكبير الصورة عند hover (فقط الأقسام/التصنيفات/العروض)
   نعتمد على source="product.index...." الموجود في الانسبكت
========================================================= */
.s-products-list[source^="product.index"] custom-salla-product-card.s-product-card-entry .images-container img,
.s-products-list[source^="product.index"] custom-salla-product-card.s-product-card-entry .images-container img:hover,
.s-products-list[source^="product.index"] custom-salla-product-card.s-product-card-entry img.scale-hover,
.s-products-list[source^="product.index"] custom-salla-product-card.s-product-card-entry img.scale-hover:hover{
  transform: none !important;
}


/* Hide quick view eye icon (categories/listing only) */
.s-products-list[source^="product.index"] .quike-view{
  display: none !important;
}

/* Hide grid/list toggle icons (keypad + list) */
.icons-parent,
.icons-parent .sicon-keypad,
.icons-parent .sicon-list {
  display: none !important;
}

/* Remove the whole top bar above category products (sort/title/view-toggle) */
.icone-selector{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}


/* Breadcrumbs area (category page) */
#catigory-page nav.breadcrumbs{
  padding: 16px 0 10px !important;   /* يزيل المسافة الكبيرة */
  margin: 0 !important;
  background: transparent !important;
}

#catigory-page nav.breadcrumbs .rz-bc-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#catigory-page nav.breadcrumbs .rz-bc-line{
  color: #fff;
  font-size: 14px;
  opacity: .95;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end; /* يمين */
}

#catigory-page nav.breadcrumbs .rz-bc-line a{
  color: #fff !important;
  text-decoration: none !important;
  opacity: .9;
}

#catigory-page nav.breadcrumbs .rz-bc-sep{
  opacity: .6;
}

#catigory-page nav.breadcrumbs .rz-bc-title{
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  text-align: right;
}

#catigory-page nav.breadcrumbs .rz-bc-count{
  color: #fff;
  opacity: .8;
  font-size: 14px;
  text-align: right;
}


/* ===== Category Breadcrumb Header (Right + Big) ===== */
#catigory-page nav.breadcrumbs{
  padding: 14px 0 10px !important;
  margin: 0 !important;
  width: 100% !important;
}

#catigory-page nav.breadcrumbs .rz-bc-wrap{
  width: 100% !important;
  direction: rtl !important;
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;  /* يمين */
  gap: 10px !important;
}

#catigory-page nav.breadcrumbs .rz-bc-line{
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important; /* يمين */
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #fff !important;
  opacity: .9 !important;
}

#catigory-page nav.breadcrumbs .rz-bc-line a{
  color: #fff !important;
  text-decoration: none !important;
  opacity: .85 !important;
}

#catigory-page nav.breadcrumbs .rz-bc-sep{
  opacity: .6 !important;
}

/* Title (big) */
#catigory-page nav.breadcrumbs .rz-bc-title{
  width: 100% !important;
  text-align: right !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
}

/* Count (bigger) */
#catigory-page nav.breadcrumbs .rz-bc-count{
  width: 100% !important;
  text-align: right !important;
  color: #fff !important;
  opacity: .8 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Remove category big title block completely */
#catigory-page nav.breadcrumbs .rz-bc-title{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* (Optional) in case there's extra spacing caused by wrapper gap */
#catigory-page nav.breadcrumbs .rz-bc-wrap{
  gap: 6px !important;
}


/* Force breadcrumb line to the RIGHT + bigger text */
#catigory-page nav.breadcrumbs .rz-bc-line{
  width: 100% !important;
  direction: rtl !important;
  justify-content: flex-start !important; /* RTL + flex-start = يمين */
  text-align: right !important;
  font-size: 16px !important;            /* كبر الخط */
  gap: 10px !important;
}

/* Make sure inner items don't flip */
#catigory-page nav.breadcrumbs .rz-bc-line a,
#catigory-page nav.breadcrumbs .rz-bc-line span{
  direction: rtl !important;
  text-align: right !important;
}

/* Optional: slightly bigger name */
#catigory-page nav.breadcrumbs .rz-bc-name{
  font-weight: 800 !important;
  font-size: 16px !important;
}


/* ===== Breadcrumbs: not too tight to the right ===== */
#catigory-page nav.breadcrumbs{
  padding: 14px 14px 10px !important; /* يمين ويسار نفس الشي */
  margin: 0 !important;
}

/* Wrapper: keep RTL but don't force flex-end */
#catigory-page nav.breadcrumbs .rz-bc-wrap{
  align-items: stretch !important;   /* بدل flex-end */
}

/* Line + count: right aligned but with breathing room */
#catigory-page nav.breadcrumbs .rz-bc-line,
#catigory-page nav.breadcrumbs .rz-bc-count{
  text-align: right !important;
  justify-content: flex-start !important; /* RTL => يمين */
  padding-right: 6px !important;          /* فاصل بسيط */
}

/* Count a bit smaller/softer if لازم */
#catigory-page nav.breadcrumbs .rz-bc-count{
  font-size: 14px !important;
  opacity: .75 !important;
}


/* ===== Category page background ===== */
#catigory-page{
  background: #1d191a !important;
}

/* لو تبغاه يغطي كامل العرض حتى لو فيه parent */
#catigory-page,
#catigory-page > .container{
  background: #1d191a !important;
}