/* =========================================================
   WENBEL STORE — CLEAN BASE V1
   Foundation + Header + Background + Dark Components
   ========================================================= */


/* =========================================================
   1) FOUNDATION
   ========================================================= */

:root{
  --wb-bg:#08090d;
  --wb-bg-soft:#0b0d12;
  --wb-surface:#111319;
  --wb-card:#16181f;
  --wb-card-2:#1b1e26;

  --wb-text:#f5f5f7;
  --wb-muted:#9ca3af;

  --wb-line:#292d36;
  --wb-border:rgba(255,255,255,.10);

  --wb-red:#dc2626;
  --wb-red-light:#ef4444;

  --wb-gold:#d4af37;
  --wb-gold-light:#f0d27a;
}

html,
body{
  background-color:var(--wb-bg);
  color:var(--wb-text);
}

.app-inner,
main#main-content{
  background-color:transparent;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

a{
  text-decoration:none;
}


/* =========================================================
   2) HEADER
   ========================================================= */

#mainnav{
  background:#08090d !important;
  color:#f5f5f7 !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;

  box-shadow:none !important;
}

#mainnav .container{
  position:relative !important;
  background:transparent !important;
}


/* الشعار الرسمي */

#mainnav .navbar-brand{
  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

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

  background:transparent !important;

  border:0 !important;
  box-shadow:none !important;

  pointer-events:auto !important;

  z-index:2 !important;
}

#mainnav .navbar-brand img{
  display:block !important;

  width:118px !important;
  max-width:118px !important;

  height:auto !important;
  max-height:44px !important;

  object-fit:contain !important;

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

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* حسابي */

#mainnav salla-user-menu{
  position:relative !important;

  width:44px !important;
  height:44px !important;

  min-width:44px !important;
  max-width:44px !important;

  min-height:44px !important;
  max-height:44px !important;

  margin:0 7px !important;
  padding:0 !important;

  overflow:hidden !important;

  background:#16181f !important;

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

  border-radius:50% !important;

  box-shadow:none !important;

  pointer-events:auto !important;

  z-index:5 !important;
}

#mainnav salla-user-menu img{
  max-width:100% !important;
  max-height:100% !important;

  object-fit:cover !important;
  border-radius:50% !important;

  opacity:1 !important;
  visibility:visible !important;
}


/* السلة */

#mainnav salla-cart-summary{
  position:relative !important;

  color:#f5f5f7 !important;

  pointer-events:auto !important;

  z-index:5 !important;
}

#mainnav salla-cart-summary,
#mainnav salla-cart-summary *{
  color:#f5f5f7 !important;
}


/* القائمة */

#mainnav .sicon-menu{
  color:#f5f5f7 !important;
  opacity:1 !important;
  visibility:visible !important;
}


/* روابط وأيقونات الهيدر */

#mainnav a,
#mainnav button,
#mainnav i{
  color:#f5f5f7 !important;
}

#mainnav svg{
  color:#f5f5f7 !important;
}


/* البحث */

#mainnav input[type="search"],
#mainnav input[type="text"]{
  background:#111319 !important;

  color:#f5f5f7 !important;

  border:1px solid #292d36 !important;

  box-shadow:none !important;
}

#mainnav input::placeholder{
  color:#8f96a3 !important;
}


/* تمركز الشعار على الجوال */

@media(max-width:767px){

  #mainnav .navbar-brand{
    transform:translateX(-86px) !important;
  }

  #mainnav .navbar-brand img{
    width:116px !important;
    max-width:116px !important;
    max-height:43px !important;
  }

}

@media(max-width:390px){

  #mainnav .navbar-brand{
    transform:translateX(-72px) !important;
  }

  #mainnav .navbar-brand img{
    width:106px !important;
    max-width:106px !important;
  }

}


/* =========================================================
   3) GLOBAL BACKGROUND
   ========================================================= */

body{
  background-color:#08090d !important;

  background-image:

    radial-gradient(
      circle at 12% 18%,
      rgba(220,38,38,.10) 0,
      rgba(220,38,38,.045) 18%,
      transparent 38%
    ),

    radial-gradient(
      circle at 88% 46%,
      rgba(239,68,68,.065) 0,
      transparent 34%
    ),

    radial-gradient(
      circle at 22% 86%,
      rgba(212,175,55,.035) 0,
      transparent 30%
    ),

    repeating-linear-gradient(
      128deg,
      transparent 0,
      transparent 118px,
      rgba(255,255,255,.018) 119px,
      rgba(255,255,255,.018) 120px,
      transparent 121px,
      transparent 245px
    ),

    repeating-linear-gradient(
      52deg,
      transparent 0,
      transparent 165px,
      rgba(220,38,38,.014) 166px,
      rgba(220,38,38,.014) 167px,
      transparent 168px,
      transparent 330px
    ),

    linear-gradient(
      180deg,
      #08090d 0%,
      #0a0c11 45%,
      #08090d 100%
    ) !important;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    no-repeat !important;

  background-size:
    900px 900px,
    850px 850px,
    800px 800px,
    auto,
    auto,
    100% 100% !important;

  background-attachment:
    fixed,
    fixed,
    fixed,
    fixed,
    fixed,
    fixed !important;
}

.app-inner,
main#main-content{
  background-color:transparent !important;
}

@media(max-width:767px){

  body{
    background-image:

      radial-gradient(
        circle at 10% 18%,
        rgba(220,38,38,.075) 0,
        transparent 34%
      ),

      radial-gradient(
        circle at 90% 55%,
        rgba(239,68,68,.045) 0,
        transparent 32%
      ),

      repeating-linear-gradient(
        128deg,
        transparent 0,
        transparent 145px,
        rgba(255,255,255,.014) 146px,
        rgba(255,255,255,.014) 147px,
        transparent 148px,
        transparent 300px
      ),

      linear-gradient(
        180deg,
        #08090d 0%,
        #0a0c11 50%,
        #08090d 100%
      ) !important;

    background-attachment:
      scroll,
      scroll,
      scroll,
      scroll !important;
  }

}


/* =========================================================
   4) PRODUCT PAGE
   ========================================================= */

.container--product-details .product-form,
.container--product-details .product-form > div,
.container--product-details .product-summary,
.container--product-details .product-price,
.container--product-details [class*="price-wrapper"],
.container--product-details [class*="product-option"]{
  background-color:var(--wb-card) !important;
  color:var(--wb-text) !important;
  border-color:var(--wb-border) !important;
}

.theme-raed
.container--product-details
.product-form
> section.flex.bg-white{
  background:#16181f !important;

  color:#f5f5f7 !important;

  border:
    1px solid rgba(255,255,255,.10) !important;
}

.theme-raed
.container--product-details
.product-form
> section.flex.bg-white
.form-label,

.theme-raed
.container--product-details
.product-form
> section.flex.bg-white
.total-price{
  color:#f5f5f7 !important;
}

.theme-raed
.container--product-details
.product-form
> section.flex.bg-white
.before-price{
  color:#8f96a3 !important;
}

.theme-raed
.container--product-details
.product-form
> section.flex.bg-white
.price_is_on_sale
.total-price{
  color:#ef4444 !important;
}


/* =========================================================
   5) STICKY PRODUCT BAR
   ========================================================= */

.theme-raed
.container--product-details
.sticky-product-bar.bg-white{
  background:#16181f !important;

  color:#f5f5f7 !important;

  border:
    1px solid rgba(255,255,255,.10) !important;
}

.theme-raed
.container--product-details
.sticky-product-bar
.form-label{
  color:#f5f5f7 !important;
}


/* =========================================================
   6) RELATED PRODUCTS
   ========================================================= */

.s-block--related-products .s-product-card-entry,
.s-block--related-products .product-entry,
.s-block--related-products .product-card,
[class*="related-products"] .s-product-card-entry,
[class*="related-products"] .product-entry{
  background:var(--wb-card) !important;

  color:var(--wb-text) !important;

  border:
    1px solid var(--wb-border) !important;

  border-radius:18px !important;

  overflow:hidden !important;
}

.s-block--related-products .s-product-card-content,
[class*="related-products"] .s-product-card-content{
  background:var(--wb-card) !important;
}

.s-block--related-products
.s-product-card-content-title,

.s-block--related-products
.s-product-card-content-title a,

[class*="related-products"]
.s-product-card-content-title,

[class*="related-products"]
.s-product-card-content-title a{
  color:var(--wb-text) !important;
}


/* =========================================================
   7) CART PAGE
   ========================================================= */

.cart-page,
.cart-page .cart-item,
.cart-page [class*="cart-item"],
.cart [class*="cart-item"],
[data-testid*="cart-item"]{
  background:var(--wb-card) !important;

  color:var(--wb-text) !important;

  border-color:var(--wb-border) !important;
}

.cart-page h1,
.cart-page h2,
.cart-page h3,
.cart-page p,
.cart-page strong,
.cart-page label,
.cart-page span,

.cart h1,
.cart h2,
.cart h3,
.cart p,
.cart strong,
.cart label{
  color:var(--wb-text);
}


/* =========================================================
   8) CART QUANTITY
   ========================================================= */

.cart-page salla-quantity-input,
.cart salla-quantity-input{
  background:var(--wb-card-2) !important;

  color:var(--wb-text) !important;

  border-color:var(--wb-border) !important;
}

.cart-page input[type="number"],
.cart input[type="number"]{
  background:var(--wb-card-2) !important;

  color:var(--wb-text) !important;

  border-color:var(--wb-border) !important;

  -webkit-text-fill-color:
    var(--wb-text) !important;
}


/* =========================================================
   9) CART COUPON
   ========================================================= */

.theme-raed
main#main-content
.shadow-default.bg-white:has(
  salla-cart-coupons[data-testid="store-cart-coupons"]
){
  background:#16181f !important;

  color:#f5f5f7 !important;

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

  box-shadow:none !important;
}

.cart-page input[placeholder*="الكوبون"],
.cart-page input[placeholder*="قسيمة"],
.cart input[placeholder*="الكوبون"],
.cart input[placeholder*="قسيمة"]{
  background:var(--wb-card-2) !important;

  color:var(--wb-text) !important;

  border:
    1px solid var(--wb-border) !important;

  -webkit-text-fill-color:
    var(--wb-text) !important;
}

.cart-page input::placeholder,
.cart input::placeholder{
  color:var(--wb-muted) !important;
  opacity:1 !important;
}


/* =========================================================
   10) CART CHECKOUT
   ========================================================= */

.cart-page .cart-summary,
.cart-page .cart-footer,
.cart-page .checkout-footer,
.cart-page .checkout-actions,

.cart .cart-summary,
.cart .cart-footer,
.cart .checkout-footer{
  background:var(--wb-card) !important;

  color:var(--wb-text) !important;

  border-color:var(--wb-border) !important;
}

.cart-page a[href*="checkout"],
.cart-page button[class*="checkout"],

.cart a[href*="checkout"],
.cart button[class*="checkout"]{
  background:var(--wb-red) !important;

  color:#fff !important;

  border-color:var(--wb-red) !important;
}


/* =========================================================
   11) SIDE MENU
   ========================================================= */

.s-drawer-wrapper,
.s-drawer-container,
.s-drawer-body,
salla-menu,
.main-menu,
.mobile-menu,
.sidebar-menu{
  background:var(--wb-bg) !important;
  color:var(--wb-text) !important;
}

.s-drawer-wrapper a,
.s-drawer-container a,
.s-drawer-body a,
salla-menu a,
.main-menu a,
.mobile-menu a,
.sidebar-menu a{
  color:var(--wb-text) !important;
}

.s-drawer-wrapper li,
.s-drawer-container li,
.main-menu li,
.mobile-menu li{
  border-color:
    rgba(255,255,255,.07) !important;
}


/* =========================================================
   12) LOGIN / MODALS
   ========================================================= */

salla-modal .s-modal-wrapper,
salla-modal .s-modal-body,
salla-modal .s-modal-content,

salla-login-modal .s-modal-wrapper,
salla-login-modal .s-modal-body,
salla-login-modal [class*="content"]{
  background:var(--wb-card) !important;

  color:var(--wb-text) !important;

  border-color:var(--wb-border) !important;
}

salla-modal h1,
salla-modal h2,
salla-modal h3,
salla-modal p,
salla-modal label,
salla-modal strong,

salla-login-modal h1,
salla-login-modal h2,
salla-login-modal h3,
salla-login-modal p,
salla-login-modal label{
  color:var(--wb-text) !important;
}

salla-modal input,
salla-login-modal input{
  background:var(--wb-card-2) !important;

  color:var(--wb-text) !important;

  border:
    1px solid var(--wb-border) !important;

  -webkit-text-fill-color:
    var(--wb-text) !important;
}

salla-modal input::placeholder,
salla-login-modal input::placeholder{
  color:var(--wb-muted) !important;
  opacity:1 !important;
}

salla-modal button[type="submit"],
salla-login-modal button[type="submit"]{
  background:var(--wb-red) !important;

  color:#fff !important;

  border-color:var(--wb-red) !important;
}


/* =========================================================
   13) SOLD COUNT
   ========================================================= */

.wb-sold-count-fixed{
  background:#16181f !important;

  color:#fca5a5 !important;

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

  border-radius:16px !important;

  padding:10px 14px !important;

  display:inline-flex !important;
  align-items:center !important;

  gap:8px !important;

  box-shadow:none !important;

  opacity:1 !important;
}

.wb-sold-count-fixed *{
  color:inherit !important;
  opacity:1 !important;
}


/* =========================================================
   14) SALLA HOSTS
   ========================================================= */

salla-quantity-input,
salla-social-share,
salla-products-slider[data-testid="store-product-related"],
salla-cart-summary-card[data-testid="store-cart-summary"]{
  color:#f5f5f7 !important;
}


/* =========================================================
   15) MOBILE
   ========================================================= */

@media(max-width:767px){

  .cart-page .cart-item,
  .cart [class*="cart-item"],
  [data-testid*="cart-item"]{
    border-radius:16px !important;
  }

  salla-modal .s-modal-wrapper,
  salla-login-modal .s-modal-wrapper{
    border-radius:
      24px 24px 0 0 !important;
  }

}


/* =========================================================
   16) ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;

    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

}

/* =========================================================
   WENBEL — FOOTER CLEAN V1
   الفوتر فقط
   ========================================================= */

body.theme-raed.footer-is-dark .store-footer{
  position:relative !important;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(220,38,38,.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #0b0d12 0%,
      #08090d 100%
    ) !important;

  color:var(--wb-text) !important;

  border-top:
    1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    0 -18px 50px rgba(0,0,0,.18) !important;

  overflow:hidden !important;
}


/* خط أحمر خفيف أعلى الفوتر */
body.theme-raed.footer-is-dark
.store-footer::before{
  content:"";
  position:absolute;

  top:0;
  right:0;
  left:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(220,38,38,.65),
      rgba(239,68,68,.9),
      rgba(220,38,38,.65),
      transparent
    );

  pointer-events:none;
}


/* الحاويات داخل الفوتر */
body.theme-raed.footer-is-dark
.store-footer .container{
  position:relative;
  z-index:1;
}


/* العناوين */
body.theme-raed.footer-is-dark
.store-footer h2,

body.theme-raed.footer-is-dark
.store-footer h3,

body.theme-raed.footer-is-dark
.store-footer h4,

body.theme-raed.footer-is-dark
.store-footer .footer-list-title{
  color:#f5f5f7 !important;
  font-weight:700 !important;
}


/* النصوص */
body.theme-raed.footer-is-dark
.store-footer p,

body.theme-raed.footer-is-dark
.store-footer span,

body.theme-raed.footer-is-dark
.store-footer li{
  color:#9ca3af;
}


/* الروابط */
body.theme-raed.footer-is-dark
.store-footer a{
  color:#d7dae0 !important;

  transition:
    color .2s ease,
    opacity .2s ease,
    transform .2s ease !important;
}

body.theme-raed.footer-is-dark
.store-footer a:hover{
  color:#fff !important;
}


/* روابط القوائم */
body.theme-raed.footer-is-dark
.store-footer ul li a{
  display:inline-flex;
  align-items:center;

  padding-block:4px;
}


/* أيقونات التواصل والاتصال */
body.theme-raed.footer-is-dark
.store-footer salla-social a,

body.theme-raed.footer-is-dark
.store-footer salla-contacts a{
  background:#14161c !important;

  color:#f5f5f7 !important;

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

  border-radius:12px !important;

  box-shadow:none !important;
}

body.theme-raed.footer-is-dark
.store-footer salla-social a:hover,

body.theme-raed.footer-is-dark
.store-footer salla-contacts a:hover{
  background:#1a1d24 !important;

  border-color:
    rgba(220,38,38,.35) !important;
}


/* أيقونات الدفع */
body.theme-raed.footer-is-dark
.store-footer salla-payments{
  opacity:.94;
}


/* البطاقات أو الصناديق الموجودة داخل الفوتر */
body.theme-raed.footer-is-dark
.store-footer [class*="certificate"],

body.theme-raed.footer-is-dark
.store-footer [class*="tax"],

body.theme-raed.footer-is-dark
.store-footer [class*="vat"]{
  background:#14161c !important;

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

  border-radius:14px !important;

  box-shadow:none !important;
}


/* المنطقة السفلية للفوتر */
body.theme-raed.footer-is-dark
.store-footer [class*="copyright"]{
  color:#8f96a3 !important;

  border-top:
    1px solid rgba(255,255,255,.07) !important;
}


/* الشعار داخل الفوتر لو موجود */
body.theme-raed.footer-is-dark
.store-footer .store-logo img,

body.theme-raed.footer-is-dark
.store-footer .footer-logo img{
  max-height:52px !important;
  width:auto !important;

  object-fit:contain !important;

  filter:none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

  body.theme-raed.footer-is-dark
  .store-footer{
    text-align:center;
  }

  body.theme-raed.footer-is-dark
  .store-footer ul{
    padding:0;
  }

  body.theme-raed.footer-is-dark
  .store-footer salla-social,

  body.theme-raed.footer-is-dark
  .store-footer salla-contacts{
    justify-content:center;
  }

}
/* =========================================================
   WENBEL — CONTACT ROW FINAL
   ========================================================= */

.store-footer .wb-contact-final{
  width:100%;
  text-align:center;
  margin:10px auto 24px;
}

.store-footer .wb-contact-final__title{
  margin:0 0 16px;
  color:#f5f5f7;
  font-size:25px;
  font-weight:700;
  text-align:center;
}

.store-footer .wb-contact-final__row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:10px;
}

.store-footer .wb-contact-final__row a{
  width:48px;
  height:48px;
  min-width:48px;

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

  padding:0;
  margin:0;

  background:#10131b;

  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;

  color:#fff !important;

  box-shadow:0 5px 18px rgba(0,0,0,.18);

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.store-footer .wb-contact-final__row a:hover{
  transform:translateY(-2px);
  background:#181c26;
  border-color:rgba(239,68,68,.5);
}

.store-footer .wb-contact-final__row svg{
  width:23px;
  height:23px;
  display:block;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;

  color:#fff;
}


/* واتساب وتيليجرام وتيك توك تعبئة */
.store-footer
.wb-contact-final__row
.wb-icon-fill{
  fill:currentColor;
  stroke:none;
}


/* بعد نجاح إنشاء الصف الجديد فقط */
.store-footer.wb-contact-final-ready
salla-contacts[data-testid="store-footer-contacts"],

.store-footer.wb-contact-final-ready
salla-social[data-testid="store-footer-social"],

.store-footer.wb-contact-final-ready
salla-social[data-testid="store-footer-social-mobile"]{
  display:none !important;
}


/* إزالة الفراغ من حاوية التواصل القديمة */
.store-footer.wb-contact-final-ready
.contact-social{
  display:none !important;
}


@media(max-width:390px){

  .store-footer .wb-contact-final__row{
    gap:8px;
  }

  .store-footer .wb-contact-final__row a{
    width:44px;
    height:44px;
    min-width:44px;
  }

  .store-footer .wb-contact-final__row svg{
    width:21px;
    height:21px;
  }

}
/* =========================================================
   WENBEL — UNIFIED PREMIUM BUTTONS
   جميع الصفحات
   ========================================================= */

/* ---------------------------------------------------------
   1) إضافة للسلة في صفحات المنتجات والبطاقات
   --------------------------------------------------------- */

salla-add-product-button::part(button){
  position:relative !important;
  overflow:hidden !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 28%,
      rgba(255,255,255,0) 48%
    ),
    linear-gradient(
      180deg,
      #171920 0%,
      #090b11 100%
    ) !important;

  color:#f7f7f8 !important;

  border:
    1.5px solid rgba(145,30,38,.96) !important;

  border-radius:16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.58),
    0 0 0 3px rgba(105,16,22,.15),
    0 10px 24px rgba(0,0,0,.32),
    0 0 18px rgba(150,26,34,.14) !important;

  font-weight:900 !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,.38) !important;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease !important;
}

salla-add-product-button::part(button):hover{
  transform:translateY(-1px) !important;

  border-color:
    rgba(190,42,50,.98) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.60),
    0 0 0 3px rgba(125,20,27,.20),
    0 12px 28px rgba(0,0,0,.36),
    0 0 22px rgba(170,30,38,.18) !important;
}


/* ---------------------------------------------------------
   2) أزرار Salla الأساسية
   --------------------------------------------------------- */

.s-button-primary,
button.s-button-primary,
a.s-button-primary{
  position:relative !important;
  overflow:hidden !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 28%,
      rgba(255,255,255,0) 48%
    ),
    linear-gradient(
      180deg,
      #171920 0%,
      #090b11 100%
    ) !important;

  color:#f7f7f8 !important;

  border:
    1.5px solid rgba(145,30,38,.96) !important;

  border-radius:16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.58),
    0 0 0 3px rgba(105,16,22,.15),
    0 10px 24px rgba(0,0,0,.32),
    0 0 18px rgba(150,26,34,.14) !important;

  font-weight:900 !important;
}


/* ---------------------------------------------------------
   3) صفحة السلة — إتمام الطلب
   --------------------------------------------------------- */

.cart-page a[href*="checkout"],
.cart-page button[class*="checkout"],
.cart a[href*="checkout"],
.cart button[class*="checkout"]{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 28%,
      rgba(255,255,255,0) 48%
    ),
    linear-gradient(
      180deg,
      #171920 0%,
      #090b11 100%
    ) !important;

  color:#fff !important;

  border:
    1.5px solid rgba(145,30,38,.96) !important;

  border-radius:16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 3px rgba(105,16,22,.15),
    0 10px 24px rgba(0,0,0,.32) !important;

  font-weight:900 !important;
}


/* ---------------------------------------------------------
   4) تسجيل الدخول والنوافذ
   --------------------------------------------------------- */

salla-login-modal button[type="submit"],
salla-modal button[type="submit"]{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 28%,
      rgba(255,255,255,0) 48%
    ),
    linear-gradient(
      180deg,
      #171920 0%,
      #090b11 100%
    ) !important;

  color:#fff !important;

  border:
    1.5px solid rgba(145,30,38,.96) !important;

  border-radius:16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 3px rgba(105,16,22,.15),
    0 10px 24px rgba(0,0,0,.32) !important;

  font-weight:900 !important;
}


/* ---------------------------------------------------------
   5) Sticky bar في صفحة المنتج
   --------------------------------------------------------- */

.container--product-details
.sticky-product-bar
salla-add-product-button::part(button){
  min-height:52px !important;
  border-radius:15px !important;
}


/* ---------------------------------------------------------
   6) Hover موحد
   --------------------------------------------------------- */

.s-button-primary:hover,
.cart-page a[href*="checkout"]:hover,
.cart-page button[class*="checkout"]:hover,
.cart a[href*="checkout"]:hover,
.cart button[class*="checkout"]:hover,
salla-login-modal button[type="submit"]:hover,
salla-modal button[type="submit"]:hover{
  transform:translateY(-1px) !important;

  border-color:
    rgba(190,42,50,.98) !important;
}


/* ---------------------------------------------------------
   7) الجوال
   --------------------------------------------------------- */

@media(max-width:767px){

  .s-button-primary,
  .cart-page a[href*="checkout"],
  .cart-page button[class*="checkout"],
  .cart a[href*="checkout"],
  .cart button[class*="checkout"],
  salla-login-modal button[type="submit"],
  salla-modal button[type="submit"]{
    min-height:50px !important;
    border-radius:14px !important;
  }

}
/* =========================================================
   WENBEL — PRODUCT CATEGORY PAGES V1
   Office + Windows + Apps + Codes + All Products
   ========================================================= */


/* الصفحة */
.container--products-list{
  padding-top:8px !important;
  padding-bottom:58px !important;
  color:var(--wb-text) !important;
}

.container--products-list .main-content{
  background:transparent !important;
}


/* =========================================================
   عنوان القسم + الفرز
   ========================================================= */

.container--products-list
.main-content > .mb-4{
  min-height:72px;

  margin-bottom:20px !important;
  padding:14px 16px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    ),
    #111319 !important;

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

  border-radius:18px !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.18) !important;
}


/* عنوان التصنيف */
.container--products-list
#page-main-title{
  position:relative;

  margin:0 !important;
  padding-right:13px !important;

  color:#f5f5f7 !important;

  font-size:22px !important;
  font-weight:900 !important;
  line-height:1.4 !important;
}


/* العلامة الحمراء بجانب العنوان */
.container--products-list
#page-main-title::before{
  content:"";

  position:absolute;

  right:0;
  top:50%;

  width:4px;
  height:28px;

  transform:translateY(-50%);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #ef4444,
      #991b1b
    );

  box-shadow:
    0 0 14px rgba(220,38,38,.35);
}


/* كلمة ترتيب حسب */
.container--products-list label[for="product-filter"]{
  color:#9ca3af !important;
  font-weight:700 !important;
}


/* قائمة الفرز */
.container--products-list
#product-filter{
  min-height:44px !important;

  padding-inline:14px 36px !important;

  background:#16181f !important;

  color:#f5f5f7 !important;

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

  border-radius:12px !important;

  box-shadow:none !important;
}

.container--products-list
#product-filter option{
  background:#16181f !important;
  color:#f5f5f7 !important;
}


/* زر الفلاتر على الجوال */
.container--products-list
.filters-trigger{
  width:44px !important;
  height:44px !important;

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

  padding:0 !important;

  background:#16181f !important;

  color:#f5f5f7 !important;

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

  border-radius:12px !important;
}

.container--products-list
.filters-trigger i{
  margin:0 !important;
  color:#f5f5f7 !important;
}


/* =========================================================
   الفلاتر
   ========================================================= */

.container--products-list
salla-filters{
  color:#f5f5f7 !important;

  border-radius:18px !important;
}


/* =========================================================
   قائمة المنتجات — host
   ========================================================= */

.container--products-list
salla-products-list[
  data-testid="store-products-list"
]{
  display:block;

  color:#f5f5f7 !important;

  background:transparent !important;
}


/* بطاقات المنتج إذا كانت في Light DOM */
.container--products-list
salla-products-list
.s-product-card-entry,

.container--products-list
salla-products-list
[class*="product-card"]{
  background:#16181f !important;

  color:#f5f5f7 !important;

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

  border-radius:18px !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.22) !important;

  overflow:hidden !important;
}


/* محتوى البطاقة */
.container--products-list
salla-products-list
.s-product-card-content{
  background:#16181f !important;
}


/* اسم المنتج */
.container--products-list
salla-products-list
.s-product-card-content-title,

.container--products-list
salla-products-list
.s-product-card-content-title a{
  color:#f5f5f7 !important;

  font-weight:800 !important;
}


/* السعر */
.container--products-list
salla-products-list
.s-product-card-price{
  color:#ef4444 !important;

  font-weight:900 !important;
}


/* وصف أو نصوص ثانوية */
.container--products-list
salla-products-list
.s-product-card-content-sub{
  color:#9ca3af !important;
}


/* صورة المنتج */
.container--products-list
salla-products-list
.s-product-card-image{
  background:#0d0f14 !important;
}


/* =========================================================
   Breadcrumbs
   ========================================================= */

.container--breadcrumbs{
  color:#9ca3af !important;
}

.container--breadcrumbs a{
  color:#b9bec8 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

  .container--products-list{
    padding-inline:10px !important;
    padding-bottom:42px !important;
  }

  .container--products-list
  .main-content > .mb-4{
    min-height:62px;

    padding:11px 12px !important;

    border-radius:15px !important;
  }

  .container--products-list
  #page-main-title{
    font-size:18px !important;
  }

  .container--products-list
  #page-main-title::before{
    height:23px;
  }

  .container--products-list
  #product-filter{
    max-width:145px;
    min-height:40px !important;

    font-size:12px !important;
  }

}