/* ============================================================
   MSV CULT GYM WEAR — STORM EDITION · Salla Theme CSS
   ------------------------------------------------------------
   المسار في سلة:
   تصميم المتجر ← تخصيص النسخة ← أيقونة "تخصيص الثيم" ← تبويب CSS
   الصق هذا الملف كاملاً ثم احفظ.
   ملاحظة: أسماء الكلاسات تختلف قليلاً بين الثيمات (رائد، فريد..)
   إذا لم يتأثر عنصر معيّن، افحصه بـ Inspect وأضف السيلكتور.
   ============================================================ */

/* ---------- 1) الخطوط ---------- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ---------- 2) متغيرات الهوية ---------- */
:root{
  --msv-black:#050506;
  --msv-surface:#0D0D10;
  --msv-surface-2:#141419;
  --msv-white:#F5F5F4;
  --msv-silver:#A9AEB6;
  --msv-silver-dim:#7C8087;
  --msv-volt:#E8F0FF;
  --msv-volt-glow:rgba(160,190,255,.55);
  --msv-chrome:linear-gradient(180deg,#FFFFFF 0%,#C9CDD3 38%,#7E838B 52%,#EDF2FA 66%,#9FA3AA 100%);
  --msv-line:rgba(245,245,244,.10);
  --msv-line-strong:rgba(245,245,244,.24);
  --msv-display:'Anton','IBM Plex Sans Arabic',sans-serif;
  --msv-body:'IBM Plex Sans Arabic','Inter',sans-serif;

  /* ربط ألوان سلة الافتراضية بالهوية */
  --color-primary:#F5F5F4 !important;
  --color-primary-dark:#C9CDD3 !important;
  --color-primary-light:#FFFFFF !important;
  --font-main:var(--msv-body) !important;
}

/* ---------- 3) الأساس: خلفية سوداء + حبيبات ---------- */
body{
  background-color:var(--msv-black) !important;
  color:var(--msv-white) !important;
  font-family:var(--msv-body) !important;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,.section-title,.s-block__title h2{color:var(--msv-white) !important}
.section-title h2,.s-block__title h2{
  font-family:var(--msv-display) !important;
  text-transform:uppercase;letter-spacing:.02em;
}

/* ---------- 4) الهيدر ---------- */
header,.store-header,.s-header,.main-nav-container{
  background:rgba(5,5,6,.85) !important;
  border-bottom:1px solid var(--msv-line) !important;
  backdrop-filter:blur(14px);
}
header a,.store-header a,.main-nav a{color:var(--msv-white) !important}
header a:hover,.main-nav a:hover{color:var(--msv-white) !important;text-shadow:0 0 14px var(--msv-volt-glow)}

/* ---------- 5) الأزرار ---------- */
.s-button-primary,.btn--primary,button[type="submit"],.add-to-cart-btn{
  background:var(--msv-white) !important;
  border:1px solid var(--msv-white) !important;
  color:var(--msv-black) !important;
  border-radius:3px !important;
  font-weight:700 !important;
  transition:box-shadow .25s ease,transform .15s ease !important;
}
.s-button-primary:hover,.btn--primary:hover,.add-to-cart-btn:hover{
  box-shadow:0 0 34px var(--msv-volt-glow),0 6px 22px rgba(0,0,0,.5) !important;
}
.s-button-primary:active,.add-to-cart-btn:active{transform:scale(.98)}
.s-button-outline,.btn--outline{
  background:rgba(245,245,244,.02) !important;
  border:1px solid var(--msv-line-strong) !important;
  color:var(--msv-white) !important;
  border-radius:3px !important;
}
.s-button-outline:hover{border-color:var(--msv-white) !important;box-shadow:0 0 22px rgba(160,190,255,.25) !important}

/* ---------- 6) بطاقات المنتجات ---------- */
.s-product-card-entry,.product-entry,custom-salla-product-card,.product-card{
  background:var(--msv-surface) !important;
  border:1px solid var(--msv-line) !important;
  border-radius:6px !important;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease !important;
}
.s-product-card-entry:hover,.product-entry:hover,.product-card:hover{
  transform:translateY(-5px);
  border-color:var(--msv-line-strong) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 40px rgba(140,170,255,.07) !important;
}
.s-product-card-content h3,.product-title,.s-product-card-content-title a{
  color:var(--msv-white) !important;font-weight:700 !important;
}
.s-product-card-price,.product-price,.price{
  color:var(--msv-white) !important;
  font-family:'Inter',sans-serif !important;font-weight:700 !important;
}
.s-product-card-sale-price,.before-price,.price del{color:var(--msv-silver-dim) !important}
.s-product-card-promotion-title,.product-badge,.sale-badge{
  background:var(--msv-white) !important;color:var(--msv-black) !important;
  border-radius:3px !important;font-size:11px !important;font-weight:700 !important;
}

/* ---------- 7) الشريط الترويجي ---------- */
.s-announcement,.top-navbar,.announcement-bar{
  background:var(--msv-white) !important;color:var(--msv-black) !important;font-weight:600;
}

/* ---------- 8) الحقول ---------- */
input,select,textarea,.s-form-control{
  background:var(--msv-surface) !important;
  border:1px solid var(--msv-line-strong) !important;
  color:var(--msv-white) !important;
  border-radius:3px !important;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--msv-volt) !important;outline-offset:-1px;
  border-color:var(--msv-volt) !important;
}
input::placeholder{color:var(--msv-silver-dim) !important}

/* ---------- 9) الفوتر ---------- */
footer,.store-footer,.s-footer{
  background:var(--msv-surface) !important;
  border-top:1px solid var(--msv-line) !important;
  color:var(--msv-silver) !important;
}
footer a{color:var(--msv-silver) !important}
footer a:hover{color:var(--msv-white) !important}
footer h3,footer h4,.footer-title{
  color:var(--msv-silver-dim) !important;
  text-transform:uppercase;letter-spacing:.26em;font-size:11px !important;
}

/* ============================================================
   العناصر التي يحقنها ملف JS — لا تحذف هذا الجزء
   ============================================================ */

/* ---------- 10) وميض العاصفة ---------- */
.msv-flash{
  position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:0;
  background:radial-gradient(1200px 700px at 70% -10%,rgba(200,220,255,.28),rgba(150,180,255,.06) 45%,transparent 70%);
  animation:msvFlash 11s infinite;
}
.msv-flash.f2{
  animation-delay:5.4s;animation-duration:13s;
  background:radial-gradient(1000px 640px at 18% -10%,rgba(200,220,255,.22),transparent 65%);
}
@keyframes msvFlash{
  0%,86%,100%{opacity:0}
  87%{opacity:1}88%{opacity:.15}89%{opacity:.9}90.5%{opacity:0}
  91%{opacity:.5}93%{opacity:0}
}

/* ---------- 11) الهيرو ---------- */
.msv-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--msv-line);background:var(--msv-black)}
.msv-hero-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 600px at 72% -8%,rgba(120,150,210,.16),transparent 60%),
    radial-gradient(800px 500px at 8% 108%,rgba(169,174,182,.07),transparent 60%),
    linear-gradient(180deg,#08080B 0%,var(--msv-black) 55%);
}
.msv-hero-sky::before{
  content:"";position:absolute;inset:-20%;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.009' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.07 0 0 0 0 0.1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:cover;animation:msvDrift 60s linear infinite alternate;
}
@keyframes msvDrift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,1%,0)}}
.msv-ghost{
  position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--msv-display);font-size:clamp(240px,46vw,680px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(200,215,255,.08);
  user-select:none;pointer-events:none;direction:ltr;white-space:nowrap;
  animation:msvGhost 11s infinite;
}
@keyframes msvGhost{
  0%,86%,100%{-webkit-text-stroke-color:rgba(200,215,255,.08)}
  87%,89%{-webkit-text-stroke-color:rgba(220,235,255,.3)}
  90.5%{-webkit-text-stroke-color:rgba(200,215,255,.08)}
}
.msv-bolts{position:absolute;inset:0;pointer-events:none}
.msv-bolt{position:absolute;top:0;height:100%;opacity:0}
.msv-bolt path{
  fill:none;stroke:var(--msv-volt);stroke-width:2.2;stroke-linejoin:miter;
  filter:drop-shadow(0 0 6px rgba(190,210,255,.9)) drop-shadow(0 0 22px rgba(140,170,255,.55));
}
.msv-bolt .branch{stroke-width:1.1;opacity:.7}
.msv-bolt.b1{right:12%;animation:msvStrike 11s infinite}
.msv-bolt.b2{left:8%;animation:msvStrike 13s infinite;animation-delay:5.4s;transform:scaleX(-1)}
.msv-bolt.b3{right:38%;animation:msvStrike 17s infinite;animation-delay:9s;transform:scale(.7)}
@keyframes msvStrike{
  0%,86.6%,100%{opacity:0}
  87%{opacity:1}88%{opacity:.1}88.6%{opacity:.95}90%{opacity:.25}91%{opacity:0}
}
.msv-hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:80px 22px 90px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:920px){.msv-hero-in{grid-template-columns:1fr;padding:56px 22px 64px}}
.msv-badge{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--msv-line-strong);
  border-radius:100px;padding:7px 16px;font-size:12.5px;font-weight:600;color:var(--msv-silver);
  margin-bottom:22px;background:rgba(245,245,244,.03);
}
.msv-badge .dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 10px #4ADE80}
.msv-hero-in h1{
  font-family:var(--msv-display) !important;font-size:clamp(54px,7.8vw,108px) !important;
  line-height:.94 !important;letter-spacing:.015em;text-transform:uppercase;
  direction:ltr;text-align:left;color:var(--msv-white) !important;margin:0 !important;
}
.msv-chrome{
  background:var(--msv-chrome);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.msv-hero-sub{margin-top:24px;font-size:17px;line-height:1.9;color:var(--msv-silver);max-width:520px}
.msv-hero-sub b{color:var(--msv-white);font-weight:600}
.msv-ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.msv-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 36px;cursor:pointer;border-radius:3px;
  font-weight:700;font-size:15px;text-decoration:none;
  transition:transform .15s ease,box-shadow .25s ease,border-color .2s ease;
}
.msv-btn:active{transform:scale(.98)}
.msv-btn-primary{background:var(--msv-white);color:var(--msv-black);border:1px solid var(--msv-white)}
.msv-btn-primary:hover{box-shadow:0 0 34px var(--msv-volt-glow),0 6px 22px rgba(0,0,0,.5)}
.msv-btn-ghost{background:rgba(245,245,244,.02);color:var(--msv-white);border:1px solid var(--msv-line-strong)}
.msv-btn-ghost:hover{border-color:var(--msv-white);box-shadow:0 0 22px rgba(160,190,255,.25)}
.msv-trust{margin-top:38px;display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--msv-silver)}
.msv-trust span::before{content:"✓";margin-inline-end:8px;color:var(--msv-silver)}
.msv-hero-visual{position:relative}
.msv-hero-visual .frame{
  border:1px solid var(--msv-line-strong);border-radius:6px;overflow:hidden;background:var(--msv-surface);
  box-shadow:0 0 0 1px rgba(200,215,255,.05),0 30px 90px rgba(0,0,0,.6),0 0 80px rgba(140,170,255,.08);
  transform:rotate(1.6deg);
}
.msv-hero-visual img{width:100%;aspect-ratio:1/1.05;object-fit:cover;display:block}
.msv-hero-visual .float{
  position:absolute;bottom:18px;inset-inline-start:18px;background:rgba(5,5,6,.85);
  backdrop-filter:blur(8px);border:1px solid var(--msv-line-strong);border-radius:5px;padding:12px 16px;font-size:13px;
}
.msv-hero-visual .float b{display:block;direction:ltr;text-align:left;font-size:14px;color:var(--msv-white)}
.msv-hero-visual .float span{color:var(--msv-silver);font-size:12px}

/* ---------- 12) الشريط المائل ---------- */
.msv-marquee{
  background:var(--msv-white);color:var(--msv-black);overflow:hidden;white-space:nowrap;
  transform:rotate(-1.3deg) scale(1.03);border-block:3px solid var(--msv-black);
  padding:12px 0;margin:30px 0;position:relative;z-index:3;
}
.msv-marquee-track{display:inline-flex;animation:msvMv 28s linear infinite;direction:ltr}
.msv-marquee span{
  font-family:var(--msv-display);font-size:24px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 26px;display:inline-flex;align-items:center;gap:24px;
}
.msv-marquee svg{width:15px;height:22px;fill:var(--msv-black)}
@keyframes msvMv{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 13) قسم NO RESTOCKS ---------- */
.msv-final{text-align:center;padding:120px 22px;position:relative;overflow:hidden;border-top:1px solid var(--msv-line);background:var(--msv-black)}
.msv-final .msv-ghost{animation-delay:3s;animation-duration:13s}
.msv-final h2{
  position:relative;font-family:var(--msv-display) !important;
  font-size:clamp(44px,6.6vw,88px) !important;line-height:.98 !important;
  text-transform:uppercase;direction:ltr;color:var(--msv-white) !important;margin:0 !important;
}
.msv-final p{position:relative;color:var(--msv-silver);margin:20px auto 0;max-width:480px;font-size:16px;line-height:1.9}
.msv-final .msv-btn{position:relative;margin-top:32px}

/* ---------- 14) ظهور عند التمرير + تقليل الحركة ---------- */
.msv-rv{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.msv-rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .msv-flash,.msv-bolt{animation:none !important;opacity:0 !important}
  .msv-ghost,.msv-hero-sky::before,.msv-marquee-track{animation:none !important}
  .msv-rv{opacity:1;transform:none;transition:none}
}