/* ============================================================
   بدلة سليم — تصميم المتجر (سلة)
   الصقي هذا الملف كامل في: تخصيص باستخدام CSS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;900&display=swap');

.slim-root, .slim-root * { box-sizing: border-box; }
.slim-root { direction: rtl; font-family: 'Cairo', system-ui, sans-serif; color: #14100F; background: #FFF7FA; }
.slim-root a { text-decoration: none; }
.slim-root img { max-width: 100%; }
.slim-root input, .slim-root button { font-family: inherit; }

  
  a { color:#E8207F; text-decoration:none; }
  a:hover { color:#B81462; }
  @keyframes slimMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes slimUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes slimIn { from { opacity: 0; transform: translateX(-28px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes slimFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes slimPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .35; } }
  @keyframes slimGlow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }
  [data-hero] { opacity: 0; animation: slimUp .85s cubic-bezier(.22,.9,.3,1) forwards; }
  [data-hero="1"] { animation-delay: .05s; }
  [data-hero="2"] { animation-delay: .16s; }
  [data-hero="3"] { animation-delay: .27s; }
  [data-hero="4"] { animation-delay: .38s; }
  [data-hero="5"] { animation-delay: .49s; }
  [data-hero="img"] { animation: slimIn 1s cubic-bezier(.22,.9,.3,1) .1s forwards; }
  [data-float] { animation: slimFloat 5.5s ease-in-out infinite; }
  [data-float="b"] { animation-delay: -2.6s; }
  [data-reveal] { transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1); }
  .slim-js [data-reveal] { opacity: 0; transform: translateY(28px); }
  .slim-js [data-reveal].slim-in, [data-reveal].slim-in { opacity: 1; transform: none; }
  .slim-js [data-r~="prods"] > article, .slim-js [data-r~="cats"] > a { opacity: 0; transform: translateY(30px) scale(.94); }
  [data-r~="prods"] > article, [data-r~="cats"] > a { transform: none; transition: opacity .66s cubic-bezier(.22,1.2,.36,1), transform .66s cubic-bezier(.22,1.2,.36,1), box-shadow .28s ease; }
  [data-reveal].slim-in > article, [data-reveal].slim-in > a { opacity: 1; transform: none; }
  [data-reveal].slim-in > *:nth-child(2) { transition-delay: .1s; }
  [data-reveal].slim-in > *:nth-child(3) { transition-delay: .2s; }
  [data-reveal].slim-in > *:nth-child(4) { transition-delay: .3s; }
  [data-reveal].slim-in > *:nth-child(5) { transition-delay: .4s; }
  [data-reveal].slim-in > *:nth-child(6) { transition-delay: .5s; }
  @keyframes slimSheen { 0% { transform: translateX(-120%) skewX(-18deg); } 55%, 100% { transform: translateX(320%) skewX(-18deg); } }
  [data-r~="prods"] > article > div:first-child::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 55%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
    animation: slimSheen 4.6s ease-in-out infinite; pointer-events: none;
  }
  [data-r~="prods"] > article:nth-child(2) > div:first-child::after { animation-delay: .5s; }
  [data-r~="prods"] > article:nth-child(3) > div:first-child::after { animation-delay: 1s; }
  [data-r~="prods"] > article:nth-child(4) > div:first-child::after { animation-delay: 1.5s; }
  [data-r~="prods"] > article > div:first-child > span { animation: slimFloat 3.4s ease-in-out infinite; }
  [data-r~="prods"] > article:active { transform: scale(.985); }
  [data-r~="grid4"] > *, [data-r~="grid3"] > * { transition: transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease; }
  @media (prefers-reduced-motion: reduce) {
    [data-hero], [data-float], [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  }
  @media (max-width: 1100px) {
    [data-r="nav"] { display: none !important; }
    [data-r="hero"] { grid-template-columns: 1fr !important; }
    [data-r="hero-copy"] { padding-bottom: 24px !important; align-items: center !important; text-align: center !important; }
    [data-r="hero-title"] { font-size: 46px !important; }
    [data-r~="grid4"], [data-r~="prods"] { grid-template-columns: repeat(2, 1fr) !important; }
    [data-r~="cats"] { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
    [data-r~="grid3"], [data-r~="revs"] { grid-template-columns: repeat(2, 1fr) !important; }
    [data-r~="split"] { grid-template-columns: 1fr !important; }
    [data-r~="foot"] { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 1100px) {
    [data-r="burger"] { display: flex !important; }
  }
  @media (max-width: 680px) {
    [data-r="loginbtn"] { display: none !important; }
    [data-r~="prods"] {
      display: flex !important; grid-template-columns: none !important;
      gap: 14px !important; overflow-x: auto !important; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; padding: 4px 4px 14px !important; margin: 0 -16px !important;
      padding-right: 16px !important; padding-left: 16px !important; scrollbar-width: none;
    }
    [data-r~="prods"] > article { flex: 0 0 66% !important; scroll-snap-align: center; }
    [data-r~="prods"] > article > div:first-child { height: 190px !important; }
    [data-r~="prods"] > article > div:last-child { padding: 12px !important; gap: 8px !important; }
    [data-r~="prods"] h3 { font-size: 14px !important; }
    [data-r~="prods"] > article > div:last-child > div:last-child { flex-direction: column !important; align-items: stretch !important; gap: 9px !important; }
    [data-r~="prods"] > article > div:last-child > div:last-child button { justify-content: center !important; width: 100% !important; padding: 9px 10px !important; }
    [data-r~="cats"] {
      display: flex !important; grid-template-columns: none !important; gap: 14px !important;
      overflow-x: auto !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
      margin: 0 -16px !important; padding: 4px 16px 12px !important; scrollbar-width: none;
    }
    [data-r~="cats"] > a { flex: 0 0 108px !important; gap: 9px !important; scroll-snap-align: center; }
    [data-r~="cats"] > a > div:first-child { padding: 5px !important; }
    [data-r~="cats"] > a > div:first-child > div { border-width: 1.5px !important; }
    [data-r~="cats"] > a > div:first-child > span { bottom: 6px !important; font-size: 9.5px !important; padding: 3px 9px !important; }
    [data-r~="cats"] > a > div:last-child { gap: 1px !important; }
    [data-r~="cats"] > a > div:last-child > div:first-child { font-size: 14px !important; }
    [data-r~="cats"] > a > div:last-child > div:last-child { font-size: 11.5px !important; }
    [data-r="hero-visual"] { min-height: 380px !important; }
    [data-r="hero"] { padding-top: 30px !important; gap: 4px !important; }
    [data-r="hero-copy"] { gap: 14px !important; padding-bottom: 10px !important; }
    [data-r="hero-title"] { line-height: 1.18 !important; }
    [data-r="hero-copy"] p { font-size: 15.5px !important; line-height: 1.85 !important; max-width: 320px !important; text-wrap: balance; }
    [data-r="hero-copy"] > div[data-hero="4"] { width: 100%; max-width: 330px; margin: 2px auto 0; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; }
    [data-r="hero-copy"] > div[data-hero="4"] > a { flex: 1; justify-content: center; font-size: 15px !important; padding: 13px 10px !important; white-space: nowrap; box-shadow: none !important; }
    [data-hero="5"] { flex-direction: row !important; justify-content: center; gap: 12px !important; background: #fff; border-radius: 999px; padding: 8px 16px 8px 10px; box-shadow: 0 6px 20px rgba(190,110,150,.14); }
    [data-hero="5"] > div:first-child > span { width: 26px !important; height: 26px !important; }
    [data-hero="5"] > div:first-child > span + span { margin-right: -9px !important; }
    [data-hero="5"] > div:last-child > span { font-size: 11.5px !important; }
    [data-hero-copy-p] { }
    [data-r~="hero-copy"] p { max-width: 300px !important; font-size: 15px !important; line-height: 1.8 !important; }
    [data-r="float"] { display: none !important; }


    [data-r="hero-visual"] img { max-width: 320px !important; margin: 0 auto; }
    [data-r="hero-visual"] > div:first-child { width: 280px !important; height: 280px !important; }
    [data-r="secthead"] { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    [data-r="modal-pad"] { padding: 24px 20px 26px !important; }
    [data-r="modal-media"] { min-height: 260px !important; }
    [data-r="cart"] { max-width: 100% !important; }
    [data-r="chips"] { overflow-x: auto !important; }
  }
  @media (max-width: 680px) {
    [data-r="search"] { display: none !important; }
    [data-r="hero-title"] { font-size: 34px !important; }
    [data-r~="grid4"], [data-r~="grid3"] { grid-template-columns: 1fr !important; }
    [data-r~="foot"] { grid-template-columns: repeat(2, 1fr) !important; gap: 26px 20px !important; text-align: right; }
    [data-r~="foot"] > div:first-child { grid-column: 1 / -1; }
    [data-r~="foot"] > div:last-child { grid-column: 1 / -1; }
    [data-r~="foot"] a { font-size: 13.5px !important; }
    [data-r~="foot"] > div > div:first-child { font-size: 14.5px !important; }
    [data-r~="footbar"] { flex-direction: column !important; align-items: center !important; gap: 12px !important; text-align: center; }
    [data-r~="revs"] {
      display: flex !important; grid-template-columns: none !important; gap: 14px !important;
      overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      margin: 0 -16px !important; padding: 4px 16px 14px !important; scrollbar-width: none;
    }
    [data-r~="revs"] > div { flex: 0 0 82% !important; scroll-snap-align: center; padding: 20px !important; gap: 12px !important; }
    [data-r~="revs"] p { font-size: 14px !important; line-height: 1.85 !important; }
    [data-r~="feats"] { grid-template-columns: repeat(2, 1fr) !important; padding: 22px 16px !important; gap: 18px 0 !important; }
    [data-r~="feat"] { padding: 6px 10px !important; gap: 9px !important; }
    [data-r~="feats"] > [data-r~="feat"]:nth-child(3) { border-right: 0 !important; }
    [data-r~="feats"] > [data-r~="feat"]:nth-child(3), [data-r~="feats"] > [data-r~="feat"]:nth-child(4) { border-top: 1px solid #F4E2EA; padding-top: 20px !important; }
    [data-r~="feat"] > div:first-child { width: 46px !important; height: 46px !important; border-radius: 15px !important; }
    [data-r~="feat"] > div:first-child svg { width: 21px; height: 21px; }
    [data-r~="feat"] > div:nth-child(2) { font-size: 14.5px !important; }
    [data-r~="feat"] > div:last-child { font-size: 12px !important; line-height: 1.75 !important; }
    [data-r="pct"] { font-size: 62px !important; }
    [data-r="offer-media"] { min-height: 300px !important; }
    [data-r="banner-media"] { order: -1; min-height: 0 !important; padding: 0 !important; }
    [data-r="banner-media"] > div { inset: 0 !important; border-radius: 0 !important; }
    [data-r="banner-media"] img { max-height: none !important; height: auto !important; width: 100% !important; }
    [data-r="offer-media"] img { object-position: 50% 22% !important; }
    [data-r="seal"] { width: 84px !important; height: 84px !important; top: auto !important; bottom: 18px !important; left: 18px !important; font-size: 12px !important; line-height: 1.6 !important; }
    [data-r~="split"] > [data-r~="pad"] { align-items: center !important; text-align: center !important; gap: 12px !important; }
    [data-r~="split"] > [data-r~="pad"] p { max-width: 300px !important; font-size: 14.5px !important; }
    [data-r~="split"] > [data-r~="pad"] > a { width: 100%; justify-content: center; }
    [data-r~="pad"] { padding: 28px 20px !important; }
    [data-r~="split"][data-r~="pad"] { text-align: center; }
    [data-r~="split"][data-r~="pad"] > div:first-child { align-items: center !important; }
    [data-r~="split"][data-r~="pad"] p { max-width: 100% !important; font-size: 14.5px !important; }
    [data-r~="split"][data-r~="pad"] h2 { font-size: 24px !important; }
    [data-r="h2"] { font-size: 27px !important; }
  }

.slim-h1:hover { color:#E8207F !important; }
.slim-h2:hover { color:#E8207F !important; }
.slim-h3:hover { color:#E8207F !important; }
.slim-h4:hover { color:#E8207F !important; }
.slim-h5:hover { border-color:#E8207F !important; color:#E8207F !important; }
.slim-h6:hover { border-color:#E8207F !important; color:#E8207F !important; }
.slim-h7:hover { background:#E8207F !important; }
.slim-h8:hover { background:#C4156A !important; }
.slim-h9:hover { border-color:#14100F !important; }
.slim-h10:hover { color:#E8207F !important; }
.slim-h11:hover { color:#E8207F !important; }
.slim-h12:hover { color:#E8207F !important; }
.slim-h13:hover { color:#E8207F !important; }
.slim-h14:hover { background:#fff !important; color:#14100F !important; }
.slim-h15:hover { border-color:#E8207F !important; color:#E8207F !important; }
.slim-h16:hover { border-color:#E8207F !important; color:#E8207F !important; }
.slim-h17:hover { box-shadow:0 18px 40px rgba(190,110,150,.18) !important; transform:translateY(-5px) !important; }
.slim-h18:hover { background:#E8207F !important; color:#fff !important; }
.slim-h19:hover { background:#E8207F !important; color:#fff !important; }
.slim-h20:hover { box-shadow:0 18px 40px rgba(190,110,150,.18) !important; transform:translateY(-5px) !important; }
.slim-h21:hover { background:#E8207F !important; color:#fff !important; }
.slim-h22:hover { background:#E8207F !important; color:#fff !important; }
.slim-h23:hover { box-shadow:0 18px 40px rgba(190,110,150,.18) !important; transform:translateY(-5px) !important; }
.slim-h24:hover { background:#E8207F !important; color:#fff !important; }
.slim-h25:hover { background:#E8207F !important; color:#fff !important; }
.slim-h26:hover { box-shadow:0 18px 40px rgba(190,110,150,.18) !important; transform:translateY(-5px) !important; }
.slim-h27:hover { background:#E8207F !important; color:#fff !important; }
.slim-h28:hover { background:#E8207F !important; color:#fff !important; }
.slim-h29:hover { background:#fff !important; color:#14100F !important; }
.slim-h30:hover { background:#C4156A !important; }
.slim-h31:hover { background:#E8207F !important; }
.slim-h32:hover { background:#E8207F !important; }
.slim-h33:hover { background:#E8207F !important; }
.slim-h34:hover { color:#fff !important; }
.slim-h35:hover { color:#fff !important; }
.slim-h36:hover { color:#fff !important; }
.slim-h37:hover { color:#fff !important; }
.slim-h38:hover { color:#fff !important; }
.slim-h39:hover { color:#fff !important; }
.slim-h40:hover { color:#fff !important; }
.slim-h41:hover { color:#fff !important; }
.slim-h42:hover { background:#fff !important; color:#14100F !important; }
.slim-h43:hover { color:#fff !important; }
.slim-h44:hover { color:#fff !important; }
.slim-h45:hover { color:#fff !important; }
.slim-h46:hover { background:#C4156A !important; }
.slim-h47:hover { background:#E8207F !important; }
.slim-h48:hover { color:#E8207F !important; }

/* ============================================================
   شبكة المنتجات + اتساق الصفحات الداخلية مع التصميم الجديد
   ============================================================ */

/* ---------- المنتجات: شبكة مرتبة بدل التمرير الأفقي ---------- */
.slim-body [data-r="grid4 prods"],
.slim-body [data-r="grid4"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  overflow: visible !important;
  width: auto !important;
}
.slim-body [data-r="grid4 prods"] > * { min-width: 0 !important; scroll-snap-align: none !important; }

@media (max-width: 1080px) {
  .slim-body [data-r="grid4 prods"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
  .slim-body [data-r="grid4 prods"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .slim-body [data-r="grid4 prods"] article > div:first-child { height: 220px !important; }
}
@media (max-width: 420px) {
  .slim-body [data-r="grid4 prods"] { gap: 10px !important; }
  .slim-body [data-r="grid4 prods"] article > div:first-child { height: 180px !important; }
  .slim-body [data-r="grid4 prods"] h3 { font-size: 14px !important; }
  .slim-body [data-r="grid4 prods"] [style*="font-size:19px"] { font-size: 16px !important; }
}

/* الفئات الدائرية: نفس المنطق */
.slim-body #categories [style*="grid-template-columns"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 820px) {
  .slim-body #categories [style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ============================================================
   منع وميض الثيم القديم عند التحديث
   CSS يُحمَّل في <head> قبل أي رسم، بينما JavaScript يُركّب التصميم
   بعد ~١٧٠٠ مللي ثانية — فالإخفاء لازم يتم هنا لا هناك.
   ============================================================ */
/* ترويسة الثيم تبقى مُهيّأة لكنها غير مرئية.
   إخفاؤها بـ display:none يمنع سلة من بناء مكوّناتها — وأهمها
   <salla-login-modal> — فيصبح زر تسجيل الدخول معطّلاً. */
body > header:not(.slim-chrome),
.store-header, #header {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* نافذة الدخول نفسها يجب أن تظهر فوق كل شيء عند فتحها */
salla-login-modal, .s-login-modal { pointer-events: auto !important; }

/* التذييل والإعلان لا يحتويان مكوّنات نحتاجها */
body > footer:not(.slim-chrome),
.store-footer, #footer,
salla-advertisement, .s-advertisement { display: none !important; }

/* الصفحة الرئيسية: سلة تضع الصنف index على <body> في HTML الخادم،
   فنستطيع إخفاء أقسام الثيم من أول إطار */
body.index main > *:not(.slim-body):not(.slim-chrome) { display: none !important; }

/* شبكة أمان: لو تعطّل السكربت ولم يُركّب شيء، أعِد إظهار محتوى الثيم
   بعد ٦ ثوانٍ بدل ترك الزائر أمام صفحة فارغة */
@keyframes slim-failsafe { to { visibility: visible; } }
body.index:not(.slim-has-root) main > *:not(.slim-body) {
  animation: slim-failsafe 0s linear 6s forwards;
}
body.index.slim-has-root main > *:not(.slim-body):not(.slim-chrome) { animation: none !important; }

/* ---------- الصفحات الداخلية ---------- */
/* الترويسة والتذييل الجديدان يظهران في كل صفحة، فنمنح محتوى الثيم
   نفس الخلفية والمسافات حتى لا يبدو غريبًا بينهما */
body.slim-has-root { background: #FFF7FA !important; }
body.slim-has-root main { background: #FFF7FA; padding-top: 8px; }

/* الترويسة الجديدة لاصقة أعلى الصفحة في كل الصفحات */
.slim-chrome--head { position: sticky; top: 0; z-index: 9999; }
.slim-chrome--foot { margin-top: 0; }

/* الثيم يضيف حشوات علوية تفترض ترويسته المخفية */
body.slim-has-root .main-content,
body.slim-has-root .app-inner > *:first-child { margin-top: 0 !important; }

/* لا يظهر شريط الإعلان مع التصميم الجديد */
body.slim-has-root salla-advertisement,
body.slim-has-root .s-advertisement { display: none !important; }

/* منع أي تجاوز أفقي.
   لا نستخدم overflow-x:hidden لأنه يُعطّل position:sticky على الترويسة —
   وclip يمنع التجاوز دون أن يكسر الالتصاق. */
body.slim-has-root { overflow-x: clip; }
.slim-root img, .slim-body img { max-width: 100%; }


/* ============================================================
   توحيد مكوّنات سلة مع هوية التصميم الجديد
   نُنسّق مكوّنات الثيم ولا نستبدلها — فتبقى قابلة للإضافة
   والترتيب من محرر الثيم اليدوي.
   ============================================================ */

:root {
  --slim-pink: #E8207F;
  --slim-pink-d: #C4156A;
  --slim-ink: #14100F;
  --slim-soft: #FBEFF5;
  --slim-line: #F6E3EC;
  --slim-muted: #8A7681;
  --slim-bg: #FFF7FA;
}

/* ---------- بطاقة المنتج في كل صفحات القوائم ---------- */
body.slim-has-root .s-product-card-entry {
  background: #fff !important;
  border: 1px solid var(--slim-line) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.slim-has-root .s-product-card-entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(200, 120, 160, .16) !important;
}

body.slim-has-root .s-product-card-image { background: var(--slim-soft) !important; }
body.slim-has-root .s-product-card-image img { border-radius: 0 !important; }

body.slim-has-root .s-product-card-content-title,
body.slim-has-root .s-product-card-content-title a {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--slim-ink) !important;
}
body.slim-has-root .s-product-card-content-subtitle {
  font-size: 13px !important;
  color: var(--slim-muted) !important;
  opacity: 1 !important;
}
body.slim-has-root .s-product-card-price {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: var(--slim-ink) !important;
}
body.slim-has-root .s-product-card-price .sicon-sar { color: var(--slim-pink) !important; }
body.slim-has-root .s-product-card-price del,
body.slim-has-root .s-product-card-price .s-product-card-sale-price {
  color: #B0919F !important; font-weight: 600 !important; font-size: 13px !important;
}

/* زر الإضافة للسلة — وردي دائري كما في التصميم */
body.slim-has-root .s-product-card-content-footer .s-button-element,
body.slim-has-root salla-add-product-button .s-button-element {
  background: var(--slim-pink) !important;
  border-color: var(--slim-pink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
body.slim-has-root .s-product-card-content-footer .s-button-element:hover,
body.slim-has-root salla-add-product-button .s-button-element:hover {
  background: var(--slim-pink-d) !important;
  border-color: var(--slim-pink-d) !important;
}

/* أزرار المفضلة والعرض السريع */
body.slim-has-root .s-product-card-wishlist-btn,
body.slim-has-root .s-product-card-quick-btn {
  background: rgba(255, 255, 255, .94) !important;
  color: var(--slim-ink) !important;
  border: 0 !important;
}
body.slim-has-root .s-product-card-wishlist-btn.is-added,
body.slim-has-root .s-product-card-wishlist-btn.favorited { color: var(--slim-pink) !important; }

/* شارات الخصم / الجديد */
body.slim-has-root .s-product-card-promotion-title,
body.slim-has-root [class*="product-card-badge"] {
  background: var(--slim-pink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ---------- أزرار المتجر العامة ---------- */
body.slim-has-root .s-button-primary,
body.slim-has-root .btn--primary,
body.slim-has-root button[class*="primary"]:not(.slim-topbar__ico) {
  background: var(--slim-pink) !important;
  border-color: var(--slim-pink) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* ---------- صفحة المنتج ---------- */
body.slim-has-root .s-block,
body.slim-has-root .product-single,
body.slim-has-root [class*="product-detail"] { background: transparent !important; }

body.slim-has-root .product-single .s-button-element,
body.slim-has-root salla-add-product-button.s-product-button .s-button-element {
  border-radius: 999px !important;
}

/* حقول الإدخال بهوية موحّدة */
body.slim-has-root input:not([type=checkbox]):not([type=radio]),
body.slim-has-root select,
body.slim-has-root textarea {
  border-radius: 14px !important;
  border-color: var(--slim-line) !important;
}

/* ---------- الشريط السفلي في الجوال ---------- */
body.slim-has-root .navbar_bottom,
body.slim-has-root .s-mobile-menu,
body.slim-has-root [class*="mobile-nav"],
body.slim-has-root [class*="bottom-nav"] {
  background: #fff !important;
  border-top: 1px solid var(--slim-line) !important;
  box-shadow: 0 -6px 20px rgba(200, 120, 160, .10) !important;
}
body.slim-has-root .navbar_bottom a,
body.slim-has-root .navbar_bottom button { color: var(--slim-ink) !important; }
body.slim-has-root .navbar_bottom .active,
body.slim-has-root .navbar_bottom [class*="active"],
body.slim-has-root .s-mobile-menu a.active { color: var(--slim-pink) !important; }
/* التذييل يجب ألا يختفي تحت الشريط السفلي */
@media (max-width: 1023px) {
  body.slim-has-root .slim-chrome--foot { padding-bottom: 90px !important; }
}

/* ---------- شرائح الأقسام في سلايدر الثيم ---------- */
/* كانت تستخدم لون الثيم الأرجواني (bg-secondary) فبدت غريبة وسط الهوية الوردية.
   العناصر خارج الإطار مقصوصة أصلًا بـ overflow الخاص بالسلايدر — لا تسرّب فعلي. */
body.slim-has-root #index-product-categories a.bg-secondary,
body.slim-has-root .s-slider-wrapper a.bg-secondary {
  background: #fff !important;
  color: var(--slim-ink) !important;
  border: 1px solid var(--slim-line) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(200, 120, 160, .10) !important;
}
body.slim-has-root #index-product-categories a.bg-secondary:hover,
body.slim-has-root .s-slider-wrapper a.bg-secondary:hover {
  background: var(--slim-pink) !important;
  border-color: var(--slim-pink) !important;
  color: #fff !important;
}
body.slim-has-root #index-product-categories a.bg-secondary * ,
body.slim-has-root .s-slider-wrapper a.bg-secondary * { color: inherit !important; }

/* لا شيء يتجاوز عرض الشاشة */
@media (max-width: 820px) {
  body.slim-has-root main { overflow-x: clip; }
}

/* ---------- عناوين الأقسام التي يضيفها المحرر ---------- */
body.slim-has-root .s-block__title,
body.slim-has-root .section-title h2 {
  font-weight: 900 !important;
  color: var(--slim-ink) !important;
  letter-spacing: -.02em;
}

/* أي قسم يضيفه التاجر من المحرر يرث الخلفية الوردية */
body.slim-has-root main > section,
body.slim-has-root main > div > section { background: transparent !important; }

/* ---- سعر صفحة المنتج ----
   ثيم سلة يلوّنه بأحمر داكن (text-red-800) وهو غريب عن لوحة سليم؛
   نجعل الرقم أسود كبقية الأرقام في التصميم، ونُبقي رمز الريال ورديًا
   كما هو في بطاقات المنتجات، والسعر القديم بلون خافت موحّد */
body.slim-has-root h2.total-price,
body.slim-has-root .total-price {
  color: var(--slim-ink) !important;
}
body.slim-has-root h2.total-price .sicon-sar,
body.slim-has-root .total-price .sicon-sar {
  color: var(--slim-pink) !important;
}
body.slim-has-root .before-price,
body.slim-has-root .before-price .sicon-sar {
  color: #B0919F !important;
}


/* ============================================================
   القائمة الجانبية · زر السلة · الترويسة اللاصقة · إخفاء الشريط السفلي
   ============================================================ */

/* ---------- إخفاء شريط الثيم السفلي في الجوال ---------- */
body.slim-has-root .navbar_bottom,
body.slim-has-root .s-mobile-menu,
body.slim-has-root [class*="mobile-nav"],
body.slim-has-root [class*="bottom-nav"] { display: none !important; }
@media (max-width: 1023px) {
  body.slim-has-root .slim-chrome--foot { padding-bottom: 0 !important; }
}

/* ---------- الترويسة اللاصقة ---------- */
.slim-chrome--head {
  position: sticky !important;
  top: 0; z-index: 9999;
  transition: padding .25s ease, background .25s ease;
}
.slim-chrome--head #slim-bar {
  transition: max-width .25s ease, border-radius .25s ease,
              box-shadow .25s ease, padding .25s ease, background .25s ease;
}
.slim-chrome--head.is-stuck { padding: 10px 16px 0; }
.slim-chrome--head.is-stuck #slim-bar {
  border-radius: 999px !important;
  box-shadow: 0 12px 32px rgba(190, 110, 150, .18) !important;
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid #F6DDE9 !important;
}
@media (prefers-reduced-motion: reduce) {
  .slim-chrome--head, .slim-chrome--head #slim-bar { transition: none !important; }
}

/* ---------- زر السلة في الترويسة ---------- */
.slim-cartbtn {
  position: relative !important;
  background: #14100F !important;
  color: #fff !important;
  border-radius: 999px !important;
  width: 44px !important; height: 44px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(20, 16, 15, .22);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.slim-cartbtn:hover {
  background: #E8207F !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(232, 32, 127, .32);
}
.slim-cartbtn svg {
  width: 21px; height: 21px;
  stroke: #fff; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.slim-cartbtn svg circle { fill: #fff; stroke: none; }

/* ---------- زر «أضيفي» في بطاقات المنتجات ---------- */
.slim-body article button {
  background: #E8207F !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 11px 18px !important;
  box-shadow: 0 6px 16px rgba(232, 32, 127, .26);
  transition: background .16s ease, transform .16s ease;
  white-space: nowrap;
}
.slim-body article button:hover { background: #C4156A !important; transform: translateY(-1px); }
.slim-body article button svg {
  stroke: #fff !important; fill: none !important;
  stroke-width: 1.9 !important; width: 16px !important; height: 16px !important;
}
.slim-body article button svg circle { fill: #fff !important; stroke: none !important; }
/* زر القلب أعلى البطاقة يبقى أبيض دائريًا */
.slim-body article > div:first-child button {
  background: rgba(255, 255, 255, .94) !important;
  color: #14100F !important;
  box-shadow: 0 2px 8px rgba(20, 16, 15, .12) !important;
  padding: 0 !important;
}
.slim-body article > div:first-child button svg { stroke: #14100F !important; }
.slim-cartbtn__n {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #14100F; color: #fff; font-size: 11.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; line-height: 1;
  border: 2px solid #fff;
}
.slim-cartbtn__n[hidden] { display: none !important; }

/* ---------- القائمة الجانبية ---------- */
.slim-drawer { position: fixed; inset: 0; z-index: 100000; }
.slim-drawer[hidden] { display: none !important; }
.slim-drawer__mask {
  position: absolute; inset: 0;
  background: rgba(20, 16, 15, .48);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: slim-fade .2s ease;
}
/* تفتح من اليمين — الاتجاه الطبيعي للعربية.
   نستخدم right الصريحة لا inset-inline لأن الأخيرة تنقلب مع RTL. */
.slim-drawer__panel {
  position: absolute; top: 0; bottom: 0; right: 0; left: auto;
  width: min(86vw, 340px);
  background: #fff;
  display: flex; flex-direction: column;
  padding: 16px 18px 22px;
  box-shadow: -20px 0 50px rgba(190, 110, 150, .26);
  animation: slim-slide-in .28s cubic-bezier(.2, .8, .2, 1);
  font-family: 'Cairo', system-ui, sans-serif;
}
@keyframes slim-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slim-slide-in { from { transform: translateX(100%); } to { transform: none; } }

.slim-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid #F6E3EC; margin-bottom: 6px;
}
.slim-drawer__logo { display: inline-flex; align-items: center; text-decoration: none; }
.slim-drawer__logo img { height: 34px; width: auto; display: block; }
.slim-drawer__x {
  border: 0; background: #FBEFF5; color: #14100F; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background .16s ease, color .16s ease;
}
.slim-drawer__x:hover { background: #E8207F; color: #fff; }

.slim-drawer__nav { display: flex; flex-direction: column; }
.slim-drawer__nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 8px; font-size: 15.5px; font-weight: 700; color: #14100F;
  text-decoration: none; border-bottom: 1px solid #F9EDF3;
  border-radius: 10px;
  transition: background .14s ease, color .14s ease, padding-inline-start .14s ease;
}
.slim-drawer__nav a svg { color: #E8207F; flex: 0 0 auto; }
.slim-drawer__nav a:last-child { border-bottom: 0; }
.slim-drawer__nav a:hover,
.slim-drawer__nav a:focus-visible {
  background: #FDF2F7; color: #E8207F; padding-inline-start: 14px;
}

.slim-drawer__login {
  margin-top: auto; text-align: center; text-decoration: none;
  background: #E8207F; color: #fff; font-weight: 800; font-size: 15.5px;
  padding: 15px 20px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(232, 32, 127, .26);
  transition: background .16s ease;
}
.slim-drawer__login:hover { background: #C4156A; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .slim-drawer__panel, .slim-drawer__mask { animation: none !important; }
}

/* ---------- الهيرو الجديد ---------- */
@media (max-width: 1080px) {
  .slimhero__title { font-size: 44px !important; }
  .slimhero__script { font-size: 36px !important; }
  .slimhero__feats { gap: 18px 0 !important; }
  .slimhero__feat { padding: 0 8px !important; }
}
@media (max-width: 900px) {
  .slimhero__in { grid-template-columns: 1fr !important; }
  .slimhero__fig { order: 2; min-height: 420px !important; }
  .slimhero__copy { order: 1; padding: 44px 0 18px !important; text-align: center; align-items: center; }
  .slimhero__body { margin-inline: auto !important; }
  .slimhero__cta { justify-content: center; }
  .slimhero__feats { grid-template-columns: repeat(2, 1fr) !important; gap: 26px 0 !important; }
}
@media (max-width: 520px) {
  .slimhero__title { font-size: 33px !important; }
  .slimhero__script { font-size: 29px !important; }
  .slimhero__body { font-size: 15px !important; line-height: 1.95 !important; }
  .slimhero__fig { min-height: 340px !important; }
  .slimhero__cta a { font-size: 15px !important; padding: 13px 24px !important; }
  .slimhero__feat p { font-size: 12px !important; }
}

/* ---------- بانر العرض بعرض الصفحة ---------- */
@media (max-width: 900px) {
  .slim-offerbanner { grid-template-columns: 1fr !important; }
  .slim-offerbanner__art { min-height: 340px; order: 2; }
  .slim-offerbanner__deal { order: 1; padding: 34px 24px !important; }
  .slim-offerbanner__pct { font-size: 74px !important; }
  .slim-offerbanner__words { inset-inline-end: 18px !important; }
}
@media (max-width: 560px) {
  .slim-offerbanner__art { min-height: 300px; }
  .slim-offerbanner__words { transform: translateY(-50%) scale(.82) !important; }
  .slim-offerbanner__pct { font-size: 62px !important; }
  .slim-offerbanner__deal { padding: 28px 18px !important; }
  .slim-offerbanner__deal [style*="font-size:34px"] { font-size: 26px !important; }
}

/* ---------- قسم المزايا المُعاد بناؤه ---------- */
@media (max-width: 1080px) {
  .slim33__cards { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 0 !important; padding: 46px 20px 38px !important; }
  /* الفواصل الرأسية تفقد معناها في شبكة من صفّين */
  .slim33__card { border-left: 0 !important; }
  .slim33__card:nth-child(odd) { border-left: 1px solid #F0DCE6 !important; }
}
@media (max-width: 860px) {
  .slim33__grid { grid-template-columns: 1fr !important; }
  .slim33__figure { min-height: 420px !important; }
  .slim33__figure img { object-position: center 22% !important; }
}
@media (max-width: 520px) {
  .slim33__cards { grid-template-columns: 1fr !important; gap: 34px 0 !important; padding: 36px 18px 30px !important; }
  .slim33__card { border-left: 0 !important; padding: 0 8px !important; }
  .slim33__card:nth-child(odd) { border-left: 0 !important; }
  .slim33__card + .slim33__card { border-top: 1px solid #F0DCE6; padding-top: 30px !important; }
  .slim33__figure { min-height: 340px !important; }
  .slim33__strip { gap: 14px !important; font-size: 14px !important; letter-spacing: .18em !important; }
}

/* زر القائمة يظهر في الجوال فقط */
@media (min-width: 981px) { .slim-chrome--head [data-r="burger"] { display: none !important; } }

/* ---------- عنصر حساب سلة بعد نقله إلى ترويستنا ---------- */
.slim-usermenu {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  position: relative; z-index: 10;
}
.slim-usermenu salla-user-menu { display: inline-flex !important; }
.slim-usermenu .s-user-menu-trigger {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: #E8207F !important; color: #fff !important;
  border-radius: 999px !important;
  padding: 7px 8px 7px 16px !important;
  cursor: pointer;
  transition: background .16s ease;
  white-space: nowrap;
}
.slim-usermenu .s-user-menu-trigger:hover { background: #C4156A !important; }
.slim-usermenu .s-user-menu-trigger-avatar {
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  background: #fff; padding: 2px;
}
.slim-usermenu .s-user-menu-trigger-hello,
.slim-usermenu .s-user-menu-trigger-content * { color: #fff !important; font-size: 13.5px !important; }
.slim-usermenu .s-user-menu-trigger-content {
  display: flex !important; flex-direction: column; line-height: 1.25; text-align: start;
}
/* القائمة المنسدلة يجب أن تظهر فوق الترويسة اللاصقة */
.slim-usermenu .s-user-menu-dropdown,
.s-user-menu-dropdown { z-index: 100001 !important; }

@media (max-width: 560px) {
  .slim-usermenu .s-user-menu-trigger { padding: 6px !important; }
  .slim-usermenu .s-user-menu-trigger-content { display: none !important; }
}

/* ---- مساحات لمس مريحة في التذييل على الجوال ----
   الروابط كانت 17px ارتفاعًا والأيقونات 17×17؛ نكبّر منطقة اللمس
   دون تغيير الحجم البصري للنص أو الأيقونة */
@media (max-width: 767px) {
  .slim-chrome--foot a {
    padding-block: 7px;
    display: inline-block;
  }
  .slim-chrome--foot a:has(> svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }
}

/* ---- بانر العرض على الجوال ----
   كلمات Shape YOUR BODY كانت في منتصف الصورة فتركب على جسم العارضة، وأي
   موضع بديل يحجب نص «راحة ثقة نتائج» المرسوم داخل الصورة نفسها — والصورة
   تحمل الرسالة أصلًا، فنُخفي الطبقة على الشاشات الضيقة */
@media (max-width: 900px) {
  .slim-offerbanner__words { display: none !important; }
  .slim-offerbanner__art { min-height: 360px; }
}

/* ---- صفحة جدول المقاسات ----
   الجدول صورة عريضة (1600px)؛ على الجوال تنكمش إلى ~295px فتصير أرقامها
   غير مقروءة. نُبقيها بعرض يكفي للقراءة داخل فقرتها ونجعلها تُمرَّر أفقيًا. */
@media (max-width: 767px) {
  body.slim-has-root p:has(> img[src*="mAQvOfx7FaPg"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.slim-has-root img[src*="mAQvOfx7FaPg"] {
    width: 760px !important;   /* auto took the intrinsic 1600px and dwarfed the phone */
    max-width: none !important;
    height: auto !important;
  }
}


/* ---- الشريط المتحرك ----
   الأصل: نسختان بعرض 1807px داخل شريط 1425px تتحركان يسارًا حتى -50%،
   فلا شيء يملأ خلفهما — القياس أظهر فراغًا من 122 إلى 865 بكسل طوال الدورة.
   الآن نقيس عرض النسخة الواحدة ونستنسخ ما يكفي لتغطية الشريط مرتين، ثم
   نحرّك بمقدار نسخة واحدة بالضبط فتحل التالية محلها بلا قفزة ولا فراغ. */
@keyframes slimMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--slim-unit, 50%))); }
}
.slim-ticker__track {
  direction: ltr;          /* النسخ تتوالى يمينًا فتدخل من اليمين وتخرج يسارًا */
  display: flex;
  width: max-content;
  gap: 0 !important;
  will-change: transform;
}
.slim-ticker__unit {
  display: flex;
  gap: 56px;
  padding-right: 56px;     /* المسافة الفاصلة تُحسب ضمن عرض النسخة */
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .slim-ticker__track { animation: none !important; }
}