:root{

  /* ── سُلّم الأسطح — كحلي غامق ── */
  --bg-main:        #071B2E;   /* كحلي — يطابق أرضية السكشنات فما يظهر أي شريط أسود */
  --bg-secondary:   #08304F;
  --surface:        #0A3A63;
  --surface-hover:  #0F5FA6;
  --surface-sunken: #041A2B;

  /* ── النصوص ── */
  --text-main:      #FFFFFF;
  --text-secondary: #C5E0E3;
  --text-muted:     #A3BFC2;
  --text-on-accent: #04282C;

  /* ── التركوازي والأزرق ── */
  --primary:        #8FD3D8;   /* لون الفعل = التركوازي — هوية كلاود */
  --primary-dark:   #52A0A7;
  --primary-vivid:  #C5E0E3;
  --primary-light:  #8FD3D8;
  --primary-bright: #C5E0E3;
  --cyan:           #8FD3D8;
  --ice:            #E5F4F5;   /* أفتح درجة — للتحويم */

  /* ── العاجي كعنصر ── */
  --ivory:          #F7F4EC;
  --ivory-2:        #EDE8DA;

  /* ── التدرّجات ── */
  --grad-primary: linear-gradient(115deg,#52A0A7 0%,#8FD3D8 52%,#C5E0E3 100%);
  --grad-accent:  linear-gradient(135deg,#08304F 0%,#0A3A63 52%,#0F5FA6 100%);
  --grad-text:    linear-gradient(90deg,#8FD3D8 0%,#C5E0E3 34%,#FFFFFF 50%,#C5E0E3 66%,#8FD3D8 100%);
  --grad-rule:    linear-gradient(90deg,transparent,#0F5FA6,#8FD3D8,#8FD3D8,transparent);
  --glass:        linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.03));

  /* ── الحدود ── */
  --border-subtle: rgba(255,255,255,.08);
  --border:        rgba(143,211,216,.20);
  --border-strong: rgba(143,211,216,.40);
  --rim-on-accent: rgba(255,255,255,.50);
  --focus-ring:    rgba(197,224,227,.80);

  /* ── الظلال والتوهج ── */
  --shadow-card:    0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(2,8,14,.55);
  --shadow-raise:   0 1px 0 rgba(255,255,255,.07) inset, 0 14px 34px rgba(2,8,14,.62), 0 0 0 1px rgba(143,211,216,.14);
  --glow-cta:       0 8px 22px rgba(143,211,216,.26), inset 0 1px 0 rgba(255,255,255,.35);
  --glow-cta-hover: 0 12px 30px rgba(143,211,216,.36), inset 0 1px 0 rgba(255,255,255,.40);
  --glow:           rgba(143,211,216,.45);
  --glow-soft:      rgba(143,211,216,.18);

  /* ── دلالية ── */
  --success: #22C55E;   /* الأخضر الوطني — لمسة */
  --danger:  #F2607A;
  --warning: #C5E0E3;


  /* ═══ جسور التوافق — لا تحذفها ═══ */

  --bp-bg:            var(--bg-main);
  --bp-bg-secondary:  var(--bg-secondary);
  --bp-surface:       var(--surface);
  --bp-blue-dark:     var(--primary-dark);
  --bp-blue:          var(--primary);
  --bp-electric:      var(--primary-light);
  --bp-ice:           var(--ice);
  --bp-white:         var(--text-main);
  --bp-text:          var(--text-secondary);
  --bp-muted:         var(--text-muted);
  --bp-border:        var(--border);
  --bp-border-strong: var(--border-strong);

  --bp-main:            var(--primary);
  --bp-main-light:      var(--primary-light);
  --bp-main-dark:       var(--primary-dark);
  --bp-main-glow:       var(--glow);
  --bp-main-glow-soft:  var(--glow-soft);

  --dark-bg-main:  var(--bg-main);
  --dark-text-main:var(--text-main);
  --dark-text-sec: var(--text-secondary);
  /* شامل: سلة تستعمل --dark-grey لكل عنصر .da-bgg — وصف المنتج، شريط
     «أضف للسلة»، شرائط المزايا، مسار التنقّل. كان #041A2B بلمعان 0.38
     أي أغمق من أرضية الصفحة (0.63) فيُقرأ الصندوق حفرةً لا بطاقة،
     ويبتلع زرّ آبل باي الأسود (تباين 1.08). و#0A3A63 لمعانه 3.60
     فيصير الصندوق أفتح من الصفحة — وهو ما اخترتَه في إعدادات الثيم أصلاً. */
  --dark-grey:     var(--surface);

  --header-bg: var(--surface-sunken);
  --menu-bg:   var(--bg-secondary);
  --footer-bg: var(--surface-sunken);

  /* متغيرات سلة */
  --color-primary:         var(--primary);
  --color-primary-dark:    var(--primary-dark);
  --color-primary-light:   var(--primary-light);
  --color-primary-reverse: #04282C;
  --s-color-primary:       var(--primary);
  --bg-color:              #071B2E;

  /* سلة تستعمل أيضاً -d و -l وهما غير الاسمين أعلاه.
     كانا رماديين (#272628 و #676668) فأي حالة hover تعتمد عليهما
     كانت تخرج رمادية لا ذهبية. */
  --color-primary-d:       var(--primary-dark);
  --color-primary-l:       var(--primary-vivid);
  --color-secondary:       var(--primary-light);
  --s-color-secondary:     var(--primary-light);
}

html,
body,
#app,
.app-inner{
  background:var(--bg-main) !important;
  color:var(--text-main);
}

body{
  background-image:
    radial-gradient(1100px 620px at 12% 0,     rgba(15,95,166,.16), transparent 60%),
    radial-gradient(900px  560px at 88% 420px, rgba(143,211,216,.06), transparent 58%) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-attachment:scroll !important;
}

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

.store-header{
  position:relative;
  z-index:50;
}

/* الهامش السالب للرئيسية وحدها — كان يُطبَّق على كل الصفحات فيسحب
   مسار التنقّل بصفحة المنتج تحت حافة الهيدر. جسم الرئيسية كلاسه
   .index وجسم صفحة المنتج .product-single */
body.index .store-header{
  margin-bottom:-14px;
}

.store-header .da-bgm,
.dark .store-header .da-bgm{
  position:relative;
  background:
    radial-gradient(circle at 50% -40%, rgba(143,211,216,.20), transparent 58%),
    linear-gradient(180deg, var(--bg-secondary) 0%, var(--surface-sunken) 100%) !important;
  color:var(--text-main) !important;
  border-radius:0 0 20px 20px;
  border-bottom:1px solid var(--border);
  box-shadow:
    0 10px 30px rgba(2,8,14,.40),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.navbar-brand img,
.dark .navbar-brand img{
  max-height:6.5rem;
  max-width:165px;
  width:auto;
  /* هالة ذهبية خفيفة حول اللوقو الذهبي */
  filter:drop-shadow(0 0 12px rgba(143,211,216,.25));
}

.shadow-default{
  box-shadow:none !important;
}

.store-header,
.store-header a,
.store-header button,
.store-header .da-tm,
.store-header .da-ts{
  color:var(--text-main);
}

.store-header .da-ts{
  color:var(--text-muted) !important;
}

.header-btn{
  padding:5px 5px 0 8px;
  color:var(--text-main) !important;
  transition:transform .22s ease, color .22s ease, filter .22s ease;
}

.header-btn:hover{
  opacity:1;
  color:var(--ice) !important;
  transform:translateY(-1px);
}

.text-2xl,
.dark .text-2xl{
  font-size:20px;
  color:var(--text-main) !important;
}

.btn.lang,
.btn.currency{
  padding-top:15px;
  color:var(--text-main) !important;
}

.sicon-search::before,
.dark .sicon-search::before{
  content:"\ef09" !important;
  background-image:none !important;
  font-size:22px;
}

.sicon-user::before,
.dark .sicon-user::before{
  content:"\f078" !important;
  background-image:none !important;
  font-size:22px;
}

.header-btn .sicon-shopping::before,
.dark .header-btn .sicon-shopping::before{
  content:"\ef39" !important;
  background-image:none !important;
  font-size:22px;
  display:block !important;
  position:relative;
  bottom:0;
}

.sicon-menu::before{
  content:"\ed7f" !important;
  background-image:none !important;
  padding-bottom:0;
  font-size:22px;
  display:block !important;
}

.sicon-menu::before,
.sicon-search::before,
.dark .sicon-search::before,
.sicon-user::before,
.dark .sicon-user::before,
.header-btn .sicon-shopping::before,
.dark .header-btn .sicon-shopping::before{
  color:var(--primary-light) !important;
  text-shadow:
    0 0 6px var(--glow),
    0 0 14px var(--glow-soft) !important;
}

.header-btn:hover .sicon-search::before,
.header-btn:hover .sicon-user::before,
.header-btn:hover .sicon-shopping::before,
.header-btn:hover .sicon-menu::before{
  color:var(--ice) !important;
  filter:drop-shadow(0 0 8px var(--glow)) !important;
}

.s-cart-summary-total{
  display:none;
}

.s-cart-summary-wrapper{
  align-items:center;
}

.s-cart-summary-wrapper .btn{
  padding:6px 8px 2px 8px !important;
}

.store-header .s-user-menu-trigger img{
  border:1px solid var(--border-strong);
}

.s-user-menu-login-btn{
  border-color:var(--border-strong) !important;
  background:var(--glass) !important;
}

.s-user-menu-login-btn svg{
  fill:var(--primary-light) !important;
  filter:drop-shadow(0 0 6px var(--glow-soft));
}

.store-header .s-user-menu-dropdown,
.s-user-menu-dropdown{
  background:var(--surface) !important;
  color:var(--text-main) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-raise);
}

.s-user-menu-dropdown-header{
  border-color:var(--border-subtle) !important;
}

.s-user-menu-dropdown-header-content p{
  color:var(--text-main) !important;
}

.s-user-menu-dropdown-header-content span{
  color:var(--text-muted) !important;
}

.s-user-menu-dropdown-item{
  color:var(--text-secondary) !important;
  border-color:var(--border-subtle) !important;
}

.s-user-menu-dropdown-item:hover{
  background:var(--surface-hover) !important;
  color:var(--text-main) !important;
}

.s-user-menu-dropdown-item-suffix svg{
  fill:var(--primary-light) !important;
}

.s-search-input,
.s-search-modal .s-search-input{
  background:var(--surface) !important;
  color:var(--text-main) !important;
  border:1px solid var(--border) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.s-search-input::placeholder{
  color:var(--text-muted) !important;
}

.s-search-input:focus{
  border-color:var(--border-strong) !important;
  box-shadow:
    0 0 0 2px rgba(143,211,216,.25),
    0 0 18px var(--glow-soft) !important;
}

.s-search-results,
.s-search-modal .s-search-results,
.s-search-no-results-placeholder,
.s-modal-body{
  background:var(--bg-secondary) !important;
  color:var(--text-main) !important;
  border:1px solid var(--border) !important;
}

.s-search-product{
  border-color:var(--border-subtle) !important;
}

.s-search-product:hover{
  background:var(--surface-hover) !important;
}

.mm-ocd--open{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(2,8,14,.66) !important;
}

.mm-ocd__content{
  background:var(--bg-secondary) !important;
  border-left:1px solid var(--border);
  box-shadow:
    -18px 0 45px rgba(2,8,14,.50),
    -4px 0 25px rgba(143,211,216,.08);
}

.mm-ocd__content::before,
.mm-ocd__content::after{
  content:"";
  position:absolute;
  bottom:-10px;
  z-index:99;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--primary-light);
  opacity:0;
  pointer-events:none;
  animation:bpMenuDots 7s ease-out infinite;
}

.mm-ocd__content::before{
  right:10%;
  box-shadow:
    -46px 8px 5px -1px rgba(143,211,216,.75),
    -104px -6px 4px -1px rgba(255,255,255,.75),
    -168px 5px 5px -1px rgba(143,211,216,.75),
    -232px -3px 4px -2px rgba(143,211,216,.60);
}

.mm-ocd__content::after{
  left:10%;
  animation-delay:3.4s;
  animation-duration:8s;
  box-shadow:
    52px 6px 5px -1px rgba(143,211,216,.75),
    118px -5px 4px -1px rgba(255,255,255,.75),
    190px 4px 5px -1px rgba(82,160,167,.75);
}

@keyframes bpMenuDots{
  0%{ transform:translateY(0); opacity:0; }
  8%{ opacity:.75; }
  60%{ opacity:.35; }
  88%{ opacity:0; }
  100%{ transform:translateY(-88vh); opacity:0; }
}

/* ملاحظة: ختم ذيل القائمة الجانبية أُزيل لأن صورته من CDN متجر آخر.
   لو تبي ختماً لكلاود: ارفع صورة بسلة وأعد هذي الكتلة برابطها. */

.mobile-menu,
.dark.mobile-menu,
.mm-spn.mm-spn--light,
.dark .mm-spn.mm-spn--light{
  background:
    radial-gradient(circle at 50% 0%, rgba(143,211,216,.14), transparent 28%),
    var(--bg-secondary) !important;
  color:var(--text-main) !important;
}

#mobile-menu > ul > li{
  position:relative;
  background:transparent !important;
  border-bottom:1px solid var(--border-subtle) !important;
}

#mobile-menu > ul > li > ul,
.mm-spn ul ul{
  background:var(--surface) !important;
  border-bottom:1px solid var(--border) !important;
}

.mm-spn a,
.mm-spn span:not(.s-user-menu-dropdown-item-badge){
  color:var(--text-main) !important;
  transition:color .2s ease, background .2s ease;
}

.mm-spn li:hover > a,
.mm-spn li:hover > span{
  color:var(--ice) !important;
}

.mm-spn li::after{
  content:"";
  position:absolute;
  width:5px;
  height:30px;
  left:0;
  bottom:50%;
  transform:translateY(50%);
  border:0;
  border-radius:0 10px 10px 0;
  background:linear-gradient(180deg, #52A0A7, #8FD3D8, #C5E0E3) !important;
  box-shadow:0 0 8px var(--glow);
  opacity:.75;
  z-index:0;
  transition:width .22s ease, opacity .22s ease, box-shadow .22s ease;
}

.mm-spn li:hover::after{
  width:34px !important;
  opacity:1;
  box-shadow:0 0 14px rgba(143,211,216,.60);
}

.mm-spn li::before{
  border-color:var(--ice) !important;
  opacity:.65 !important;
}

.lazy__bg.lazy_menu{
  position:relative;
  height:2.5rem;
  width:2.5rem;
  flex-shrink:0;
  background-color:var(--surface);
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:11px;
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.rounded-lg{
  border-radius:14px;
}

.main-menu .gap-2{
  gap:12px;
}

.main-menu .contact-links a,
.main-menu .contact-links span{
  background:var(--surface) !important;
  color:var(--text-main) !important;
  border:1px solid var(--border);
  border-radius:12px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.main-menu .contact-links a:hover{
  background:var(--primary) !important;
  border-color:var(--rim-on-accent) !important;
  transform:translateY(-2px);
}

.main-menu .contact-links a i::before,
.main-menu .contact-links span i::before{
  font-size:1.125rem;
  line-height:1.75rem;
  height:25px;
  width:25px;
  color:var(--ice) !important;
}

/* خلفية الفوتر شفافة تماماً: تكشف أرضية الصفحة وإشعاعاتها بدل أن تحجبها،
   فيصير الفوتر امتداداً للصفحة لا صندوقاً مركّباً عليها. */
.store-footer,
.dark .store-footer{
  position:relative;
  margin-top:60px;
  color:var(--text-main) !important;
  background:transparent !important;
  border-radius:20px 20px 0 0;
  border-top:1px solid var(--border);
  box-shadow:0 -12px 34px rgba(2,8,14,.35);
}

/* ── سدو على كامل الفوتر ──
   يسكن على .store-footer__inner لا على .store-footer، لأن footer و
   .store-footer عنصر واحد و ::after عنده مشغول بفاصل القاع. */
.store-footer__inner{ position:relative; }
.store-footer__inner::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(15,95,166,.9) 10px 13px),
    repeating-linear-gradient(-45deg,transparent 0 10px,rgba(143,211,216,.95) 10px 13px);
  background-size:26px 26px;
  opacity:.07;
}

/* ── القوس التركوازي بقاع الفوتر ──
   كان على .footer-top::after فيقع فوق أيقونات الدفع، أي أعلى السطر
   بـ176px مقيسة. صار على footer::before بتموضع مطلق عند قاع الفوتر،
   ويحتضن فاصل القاع فيبدو ختاماً نظيفاً للفوتر. */
footer.store-footer::before{
  content:""; position:absolute; right:0; left:0; bottom:0;
  height:74px; z-index:0; pointer-events:none;
  background:transparent;
  border-bottom:5px solid var(--primary);
  border-radius:0 0 50px 50px;
  box-shadow:0 10px 25px -15px var(--glow);
}
.store-footer .footer-container .logo-footer .foo{ margin-bottom:.5rem; }
.store-footer .store-footer__inner,
.store-footer .store-footer__inner.da-bgm,
.store-footer .footer-middle,
.store-footer .footer-top{
  background-color:transparent !important;
  background-image:none !important;
}
.store-footer__inner .container{ padding-left:0; padding-right:0; }
.footer-middle{
  order:1; overflow:hidden; position:relative;
  border:0 !important; row-gap:2.5rem !important;
  border-radius:20px 20px 0 0; z-index:0;
}
.footer-middle::before{
  content:""; position:absolute; top:0; right:0; left:0; height:1px;
  background:var(--grad-rule); box-shadow:0 0 10px var(--glow-soft);
}
.store-footer h3,
.dark .store-footer h3{
  margin-inline:15px; width:calc(100% - 30px); height:34px; line-height:34px;
  color:var(--text-main) !important; font-weight:700 !important; border-radius:11px;
  background:var(--glass) !important; border:1px solid var(--border-strong);
  box-shadow:0 0 12px var(--glow-soft), inset 0 1px 0 rgba(255,255,255,.05);
}
.footer-profile p{
  max-width:100%; padding-left:2.75rem; padding-right:2.75rem; margin-top:12px;
  font-size:18px; line-height:1.9; font-weight:600 !important;
  color:var(--text-secondary) !important;
}
.store-footer .store-links-items{ columns:2; margin-inline:20px; color:var(--text-main) !important; }
.store-footer .footer-list a,
.store-footer .store-links-items a{
  color:var(--text-secondary) !important; transition:color .2s ease, transform .2s ease;
}
.store-footer .footer-list a:hover,
.store-footer .store-links-items a:hover,
.footer-bottom a:hover{
  color:var(--primary-bright) !important; text-shadow:0 0 8px var(--glow-soft);
}
.bubble-show,
.contact-links a,
.dark .bubble-show,
.dark .contact-links a{
  background:var(--surface) !important; color:var(--text-main) !important;
  border:1px solid var(--border); border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bubble-show{ cursor:pointer; position:relative; width:36px; height:36px; display:flex; }
.contact-links a{ min-width:.5rem; padding:8px; font-size:20px; }
.contact-links a:hover,
.dark .contact-links a:hover,
.bubble-show:hover{
  transform:translateY(-2px) scale(1.04);
  background:var(--primary) !important;
  border-color:var(--rim-on-accent) !important;
  box-shadow:0 0 18px var(--glow);
}
.social-links .icon{ margin:auto !important; width:36px !important; font-size:20px; }
.sicon-whatsapp2::before,
.sicon-iphone::before,
.sicon-paper-plane-o::before,
.sicon-instagram2::before,
.sicon-snapchat::before,
.sicon-tiktok::before{
  background-image:none !important; color:var(--ice) !important; background-size:initial !important;
}
.footer-social::after,
.dark .footer-social::after{ display:none !important; }
.footer-top{
  order:2; position:relative; z-index:0; background-color:transparent !important;
  border:0; border-radius:0 0 25px 25px; padding-top:0 !important; padding-bottom:0 !important;
}
/* الشريط الذهبي كان مختبئاً خلف القوس طوال الوقت — حين نُقل القوس
   إلى قاع الفوتر انكشف، ولم تعد له وظيفة. */
.footer-top::before{ display:none !important; }
/* القوس القديم أُلغي — انتقل إلى قاع الفوتر */
.footer-top::after,
.dark .footer-top::after{ display:none !important; }
.footer-bottom{
  order:3; padding-top:32px; color:var(--text-main) !important;
  background:transparent !important;
  border-top:1px solid var(--border);
}
.footer-bottom .copyrights p,
.dark .footer-bottom .copyrights p,
.footer-bottom a{ color:var(--text-secondary) !important; }
.store-footer .text-gray-400,
.store-footer .opacity-75{ color:var(--text-muted) !important; opacity:1 !important; }

@media (min-width:768px){
  .da-brdr{ border-color:var(--border) !important; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-middle{ padding-inline:100px; }
  [dir="rtl"] .md\:text-start{ text-align:right; display:none; }
  .social-links .social-links{ width:61%; display:flex; flex-direction:row; }
  .footer-top{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); }
  .footer-middle .contact-links{ flex-wrap:wrap; justify-content:center; max-width:33rem; }
  [dir="rtl"] .footer-middle h3{ text-align:center; }
  .store-footer__inner .container{ max-width:none; }
  .md\:max-w-xs{ max-width:none; display:grid; grid-column:span 3 / span 3; }
  .social-links{ width:calc(33.33333% - 86px) !important; display:flex; flex-direction:column; }
  .footer-bottom{ padding-inline:130px; }
}

@media (max-width:767px){
  .store-header .da-bgm{ border-radius:0 0 16px 16px; }
  .mm-ocd__content{ width:84%; }
  .store-footer,
  .dark .store-footer{ border-radius:18px 18px 0 0; }
  .footer-profile p{ padding-left:1.25rem; padding-right:1.25rem; font-size:15px; }
  .footer-bottom{ padding-top:25px; }
}

.btn--primary,
.btn-primary,
.s-button-primary,
button[class*="primary"],
a[class*="btn-primary"],
salla-add-product-button button,
.s-add-product-button-btn,
.s-add-to-cart-button{
  background:var(--grad-primary) !important;
  border-color:var(--rim-on-accent) !important;
  color:var(--text-on-accent) !important;
  box-shadow:var(--glow-cta) !important;
  transition:box-shadow .3s ease, transform .25s ease !important;
}
.btn--primary:hover,
.btn-primary:hover,
.s-button-primary:hover,
button[class*="primary"]:hover,
a[class*="btn-primary"]:hover,
salla-add-product-button button:hover,
.s-add-product-button-btn:hover,
.s-add-to-cart-button:hover{
  box-shadow:var(--glow-cta-hover) !important;
  filter:brightness(1.06);
  transform:translateY(-1px);
}
a:hover{ color:var(--primary-bright); }
[class*="price"]{ text-shadow:0 0 10px rgba(232,192,112,.28); }
/* الأسعار تُترك للون سلة الأصلي #F87171 (صنفها text-red-400) في كل
   الصفحات. كان كودنا يفرض الأبيض بـ!important فيدهسه.
   والمشطوب وحده يخفت. */
.s-product-card-price-before{ color:var(--text-muted) !important; }
.s-product-card-entry{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-card);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media(hover:hover){
  .s-product-card-entry:hover{
    background:var(--surface-hover) !important;
    border-color:var(--border-strong) !important;
  }
}
.s-button-success,
.bg-green-500{ background:var(--success) !important; }
salla-product-availability,
.s-product-availability{ color:var(--success) !important; }
.s-localization-modal-trigger-btn:hover{ background:var(--surface-hover) !important; }
input,
select,
textarea,
.s-form-control,
.form-control{
  background:var(--surface) !important;
  color:var(--text-main) !important;
  border-color:var(--border) !important;
}
input::placeholder,
textarea::placeholder{ color:var(--text-muted) !important; }
input:focus,
select:focus,
textarea:focus,
.s-form-control:focus,
.form-control:focus{
  border-color:var(--border-strong) !important;
  box-shadow:0 0 0 2px rgba(143,211,216,.25) !important;
}

.nav-header{ position:relative; overflow:hidden; }
.nav-header::after{
  content:""; position:absolute; right:0; left:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--border) 15%,var(--border-strong) 50%,var(--border) 85%,transparent);
  pointer-events:none; z-index:5;
}
.nav-header::before{
  content:""; position:absolute; bottom:0; right:-30%; width:30%; height:1.5px;
  border-radius:999px;
  background:linear-gradient(270deg,transparent,#52A0A7,#8FD3D8,#FFFFFF,#8FD3D8,#52A0A7,transparent);
  box-shadow:0 0 5px rgba(143,211,216,.90),0 0 12px rgba(143,211,216,.70),0 0 22px var(--glow-soft);
  pointer-events:none; z-index:6;
  animation:bpCatScan 4.5s ease-in-out infinite;
}
@keyframes bpCatScan{
  0%{ right:-30%; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ right:130%; opacity:0; }
}

html,
body{ overflow-x:clip !important; }
#app,
.app-inner,
.app-wrapper,
main{ overflow-x:clip !important; overflow-y:visible !important; }
header.store-header,
.store-header,
body > header,
#app > header,
.app-inner > header{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
}

salla-gifting{
  position:relative !important; display:block !important; overflow:hidden !important;
  isolation:isolate !important; margin:18px 0 !important; border-radius:20px !important;
  background:linear-gradient(115deg,rgba(143,211,216,.70) 0%,rgba(255,255,255,.36) 25%,rgba(143,211,216,.62) 50%,rgba(143,211,216,.70) 75%,rgba(255,255,255,.36) 100%) !important;
  background-size:260% 260% !important;
  animation:bpGiftBorderFlow 7s linear infinite !important;
  box-shadow:0 0 22px var(--glow-soft),0 0 50px rgba(143,211,216,.10),0 14px 32px rgba(2,8,14,.45) !important;
}
@keyframes bpGiftBorderFlow{
  0%{ background-position:0% 50%; }
  100%{ background-position:260% 50%; }
}
salla-gifting::after{
  content:"" !important; position:absolute !important; inset:1.5px !important;
  z-index:1 !important; pointer-events:none !important; border-radius:18.5px !important;
  background:
    radial-gradient(circle at 85% -10%, rgba(143,211,216,.22), transparent 50%),
    radial-gradient(circle at 10% 110%, rgba(143,211,216,.14), transparent 45%),
    linear-gradient(160deg, var(--surface-hover) 0%, var(--surface) 80%) !important;
}
salla-gifting > div{ position:relative !important; z-index:2 !important; }
salla-gifting .s-gifting-widget,
salla-gifting .s-list-tile-item{ background:transparent !important; border:0 !important; box-shadow:none !important; }
salla-gifting .s-list-tile-item{ position:relative !important; overflow:hidden !important; padding:22px 20px !important; }
salla-gifting .s-list-tile-item-icon{ display:none !important; }
salla-gifting .s-list-tile-item::before,
salla-gifting .s-list-tile-item::after{
  content:"" !important; position:absolute !important; bottom:-10px !important;
  z-index:0 !important; width:4px !important; height:4px !important; border-radius:50% !important;
  background:var(--primary-light) !important; opacity:0; pointer-events:none !important;
  animation:bpGiftDots 6.5s ease-out infinite;
}
salla-gifting .s-list-tile-item::before{
  left:6% !important;
  box-shadow:52px 6px 5px -1px rgba(82,160,167,.85),118px -5px 4px -1px rgba(255,255,255,.85),186px 4px 5px -1px rgba(143,211,216,.85),258px -2px 4px -2px rgba(143,211,216,.70);
}
salla-gifting .s-list-tile-item::after{
  right:6% !important; animation-delay:3.2s; animation-duration:7.5s;
  box-shadow:-60px 5px 5px -1px rgba(143,211,216,.85),-132px -4px 4px -1px rgba(255,255,255,.85),-204px 3px 5px -1px rgba(82,160,167,.85);
}
@keyframes bpGiftDots{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.8; }
  65%{ opacity:.35; }
  100%{ transform:translateY(-160px); opacity:0; }
}
salla-gifting .s-list-tile-item-content,
salla-gifting .s-list-tile-item-action{ position:relative !important; z-index:1 !important; }
salla-gifting h3{ color:var(--text-main) !important; font-size:17px !important; font-weight:900 !important; margin-bottom:4px !important; }
salla-gifting .s-list-tile-item-subtitle,
salla-gifting .s-list-tile-item-subtitle div{
  color:var(--text-secondary) !important; font-size:12.5px !important; line-height:1.8 !important; font-weight:600 !important;
}
salla-gifting salla-button button,
salla-gifting .s-gifting-widget-action.s-button-element{
  background:var(--grad-primary) !important; border:1px solid var(--rim-on-accent) !important;
  border-radius:13px !important; color:var(--text-on-accent) !important; font-weight:800 !important;
  box-shadow:var(--glow-cta) !important; transition:transform .22s ease, box-shadow .22s ease !important;
}
salla-gifting salla-button button:hover{ transform:translateY(-2px) !important; box-shadow:var(--glow-cta-hover) !important; }
salla-gifting salla-button button span{ color:var(--text-on-accent) !important; }
salla-gifting salla-button svg{ width:20px !important; height:20px !important; fill:var(--text-on-accent) !important; }
@media (max-width:640px){
  salla-gifting .s-list-tile-item{ padding:18px 15px !important; }
  salla-gifting h3{ font-size:15.5px !important; }
  salla-gifting .s-list-tile-item-subtitle div{ font-size:11.8px !important; }
}

.tabs.tabs__product .tab-trigger.is-active{
  background:var(--primary) !important; color:var(--text-on-accent) !important;
  border:1px solid var(--rim-on-accent) !important; box-shadow:var(--glow-cta) !important;
}
.tabs.tabs__product .tab-trigger.is-active i{ color:var(--text-on-accent) !important; }
.tabs.tabs__product .tab-trigger:not(.is-active){
  background:var(--surface) !important; color:var(--text-secondary) !important;
  box-shadow:none !important; transition:background .25s ease, color .25s ease !important;
}
.tabs.tabs__product .tab-trigger:not(.is-active):hover{
  background:var(--surface-hover) !important; color:var(--text-main) !important;
}
.product-single{ background:transparent !important; }

/* ── تضييق حقل البريد ──
   كان 298px أي 76% من عرض الفوتر — شريطاً أفقياً ممتدّاً.
   :has(> .mail-input) يستهدف أبا الحقل مباشرة فلا يصيب غيره. */
.store-footer div:has(> .mail-input){
  max-width:340px;
  margin-inline:auto;
}

/* فاصل فاضي بقاع الفوتر — يعطي القوس التركوازي مساحته */
footer::after{
  content:"";
  display:block;
  width:100%;
  height:46px;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .mm-ocd__content::before,
  .mm-ocd__content::after,
  .nav-header::before,
  salla-gifting,
  salla-gifting .s-list-tile-item::before,
  salla-gifting .s-list-tile-item::after{ animation:none !important; }
  .nav-header::before{ opacity:0; }
}


/* ═══════════════════════════════════════════════════
   لمسات كلاود اللاكجري
═══════════════════════════════════════════════════ */

/* ── تحديد النص بالتركوازي ── */
::selection{
  background:rgba(143,211,216,.32);
  color:#FFFFFF;
}

/* ── سكرول بار ملكي: خيط تركوازي شفاف بلا مجرى ظاهر ── */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(143,211,216,.4);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(197,224,227,.65);
  background-clip:content-box;
}

/* ── خيط تركوازي حي أسفل الهيدر — توقيع كلاود ── */
.store-header .da-bgm::after{
  content:""; position:absolute; right:8%; left:8%; bottom:-1px; height:1.5px;
  background:linear-gradient(90deg,transparent,#0F5FA6 18%,#8FD3D8 38%,#8FD3D8 50%,#8FD3D8 62%,#0F5FA6 82%,transparent);
  box-shadow:0 0 12px rgba(143,211,216,.35), 0 0 26px rgba(143,211,216,.18);
  pointer-events:none;
  animation:cpHeaderBreath 4s ease-in-out infinite;
}
@keyframes cpHeaderBreath{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

/* ── بطاقات المنتجات: إطار يشتعل تركوازي عند اللمس ── */
@media(hover:hover){
  .s-product-card-entry{
    will-change:transform;
  }
  .s-product-card-entry:hover{
    transform:translateY(-5px);
    box-shadow:
      0 18px 40px rgba(2,8,14,.55),
      0 0 0 1px rgba(143,211,216,.45),
      0 0 24px rgba(143,211,216,.12),
      0 0 40px rgba(143,211,216,.08) !important;
  }
}

/* ── أزرار الشراء: تركوازي حي يتنفس بدل التدرج الجامد ── */
.btn--primary,
.btn-primary,
.s-button-primary,
salla-add-product-button button,
.s-add-product-button-btn,
.s-add-to-cart-button{
  background-size:220% 100% !important;
  animation:cpActionBreath 6s ease-in-out infinite !important;
}
@keyframes cpActionBreath{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* ── صور المنتجات تتقرب بنعومة داخل البطاقة ── */
.s-product-card-entry{ overflow:hidden; }
.s-product-card-entry img{
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
@media(hover:hover){
  .s-product-card-entry:hover img{
    transform:scale(1.045);
  }
}

/* ── العناوين الكبيرة بلمسة عاجية بدل الأبيض المسطح ── */
h1, h2{
  color:#F2FAFB;
}

/* ── زر الواتساب العائم — كحلي بحافة نيون تركوازية ──
   يندمج بالهوية ويلمع بهدوء (ستيلث لاكجري). لا حركة فيه إطلاقاً. */
#wa-angel, .wa-angel{
  background:linear-gradient(160deg, var(--surface) 0%, #061B2C 100%) !important;
  border:1.5px solid rgba(143,211,216,.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 24px rgba(2,8,14,.55),
    0 0 22px rgba(143,211,216,.55) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* الأيقونة تركوازية متوهجة — قاعدة .sicon-whatsapp2 أعلاه تخصّ أيقونات
   الفوتر، وهنا نخصّ الزر العائم وحده. */
#wa-angel .sicon-whatsapp2::before{
  color:var(--primary) !important;
  text-shadow:0 0 10px rgba(143,211,216,.8), 0 0 20px rgba(143,211,216,.4);
}

@media(hover:hover){
  #wa-angel:hover{
    transform:translateY(-2px);
    border-color:var(--ice) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 12px 30px rgba(2,8,14,.6),
      0 0 32px rgba(143,211,216,.85) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .store-header .da-bgm::after,
  .btn--primary, .btn-primary, .s-button-primary,
  salla-add-product-button button,
  .s-add-product-button-btn,
  .s-add-to-cart-button{ animation:none !important; }
}


/* ═══════════════════════════════════════════════════
   إزالة فراغات سلة حول سكشناتنا — مقيسة من الصفحة الحية:
   سلة تلفّ كل سكشن HTML بعنصر مخصّص <salla-html-content-…>
   صنفه s-block-html-content وفيه padding:12px فوق وتحت،
   وفوقه <section class="s-block s-block--bundle-html-content">.
   ⚠️ الشجرة ما فيها <main> إطلاقاً — تروح مباشرة لـ div.app-inner،
   فأي قاعدة تبدأ بـ main تضرب بالفاضي.
═══════════════════════════════════════════════════ */

/* الغلاف المباشر (العنصر المخصّص) — هنا الحشوة الحقيقية */
.s-block-html-content:has(.cp-nat),
.s-block-html-content:has(.cpk),
.s-block-html-content:has(.cdv),
.s-block-html-content:has(.cts),
.s-block-html-content:has(.cpr),
.s-block-html-content:has(.stp),
.s-block-html-content:has(.cfq),
.s-block-html-content:has(.cth),
*:has(> .cp-nat),
*:has(> .cpk),
*:has(> .cdv),
*:has(> .cts),
*:has(> .cpr),
*:has(> .stp),
*:has(> .cfq),
*:has(> .cth){
  margin:0 !important;
  padding:0 !important;
}

/* الغلاف الخارجي */
section.s-block:has(.cp-nat),
section.s-block:has(.cpk),
section.s-block:has(.cdv),
section.s-block:has(.cts),
section.s-block:has(.cpr),
section.s-block:has(.stp),
section.s-block:has(.cfq),
section.s-block:has(.cth),
.s-block--bundle-html-content:has(.cp-nat),
.s-block--bundle-html-content:has(.cpk),
.s-block--bundle-html-content:has(.cdv),
.s-block--bundle-html-content:has(.cts),
.s-block--bundle-html-content:has(.cpr),
.s-block--bundle-html-content:has(.stp),
.s-block--bundle-html-content:has(.cfq),
.s-block--bundle-html-content:has(.cth){
  margin:0 !important;
  padding:0 !important;
}

/* حاوية سلة الداخلية */
section.s-block:has(.cp-nat) .container,
section.s-block:has(.cpk) .container{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
}

/* السكشنان نفسهما بلا هوامش */
.cp-nat, .cpk, .cdv, .cts, .cpr, .stp, .cfq, .cth{ margin:0 !important; }

/* أول عنصر بعد الهيدر ما ياخذ حشوة علوية */
.app-inner > *:first-child,
.app-inner section.s-block:first-of-type{ margin-top:0 !important; }