:root{--bg:#080614;--card:#120d25;--text:#f8f4ff;--muted:#c9bee6;--line:rgba(211,196,255,.18);--p1:#d7cbff;--p2:#a884ff;--p3:#7b5cff;--cyan:#7de8ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 0%,rgba(168,132,255,.35),transparent 35%),radial-gradient(circle at 90% 10%,rgba(125,232,255,.12),transparent 28%),linear-gradient(180deg,#080614,#0c0718 55%,#05030c);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}a{text-decoration:none;color:inherit}button{font:inherit}
.topbar{position:sticky;top:0;z-index:30;max-width:1180px;margin:14px auto 0;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:22px;background:rgba(12,7,25,.76);backdrop-filter:blur(18px);box-shadow:0 14px 55px rgba(0,0,0,.22)}.brand{display:flex;align-items:center;gap:10px;font-weight:950}.brand img{width:42px;height:42px;border-radius:13px;object-fit:cover;box-shadow:0 0 30px rgba(168,132,255,.32)}.brand span{background:linear-gradient(90deg,#fff,#d7cbff,#a884ff);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:8px}nav a{padding:10px 12px;border-radius:14px;color:var(--muted);font-weight:800}nav a:hover{background:rgba(255,255,255,.06);color:white}.menu{display:none}.cart-btn,.menu{border:1px solid var(--line);background:linear-gradient(135deg,rgba(168,132,255,.22),rgba(255,255,255,.06));color:white;padding:10px 14px;border-radius:16px;cursor:pointer;font-weight:950}.cart-btn b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:99px;background:var(--p3);margin-inline-start:6px}
main{max-width:1180px;margin:auto;padding:34px 18px 0}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;min-height:620px}.hero-copy,.hero-card,.section,.how,.contact{border:1px solid var(--line);border-radius:34px;background:linear-gradient(145deg,rgba(28,18,58,.88),rgba(7,5,16,.8));box-shadow:0 24px 90px rgba(111,70,255,.22);overflow:hidden}.hero-copy{padding:46px}.hero-copy h1{font-size:clamp(38px,6vw,74px);line-height:1.04;letter-spacing:-1px;margin:0 0 16px}.hero-copy p,.section-head p,.contact p,.why p,.steps p{color:var(--muted);line-height:1.85}.eyebrow{display:inline-flex;padding:8px 14px;border:1px solid rgba(215,203,255,.24);border-radius:999px;background:rgba(168,132,255,.18);font-weight:950;margin-bottom:14px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.primary,.secondary,.checkout{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:14px 22px;border-radius:18px;font-weight:950}.primary,.checkout{color:white;background:linear-gradient(135deg,#d7cbff,#a884ff,#7b5cff);box-shadow:0 14px 45px rgba(168,132,255,.35)}.secondary{border:1px solid var(--line);background:rgba(255,255,255,.06)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.stats div{padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}.stats strong{display:block;font-size:22px}.stats span{color:var(--muted);font-size:13px}.hero-card{min-height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px}.hero-card img{width:min(280px,72vw);border-radius:28px;box-shadow:0 0 80px rgba(168,132,255,.32)}.hero-card h2{font-size:34px;margin:24px 0 8px;letter-spacing:2px}.hero-card p{color:var(--muted)}
.section,.how{padding:32px;margin:24px 0}.section-head{text-align:center;max-width:760px;margin:0 auto 24px}.section-head h2{font-size:clamp(30px,4vw,48px);margin:0 0 10px}.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}.filters button{border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.045);padding:10px 16px;border-radius:999px;cursor:pointer;font-weight:850}.filters .active{color:white;background:rgba(168,132,255,.25)}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product{position:relative;border:1px solid var(--line);border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025));padding:14px;overflow:hidden;transition:.2s}.product:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(168,132,255,.2)}.badge{position:absolute;top:14px;right:14px;z-index:2;font-size:12px;font-weight:950;background:rgba(168,132,255,.78);padding:6px 10px;border-radius:999px}.product img{width:100%;aspect-ratio:1.12/1;object-fit:cover;border-radius:20px;background:#0b0718;border:1px solid rgba(255,255,255,.08)}.product h3{font-size:19px;margin:14px 0 6px}.product p{min-height:76px;color:var(--muted);line-height:1.65;font-size:14px}.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.price{font-size:22px;font-weight:950}.add{border:none;color:white;background:linear-gradient(135deg,#d7cbff,#7b5cff);border-radius:15px;padding:10px 14px;cursor:pointer;font-weight:950}
.why,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.why div,.steps div{border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.045);padding:24px}.why b{font-size:34px}.steps b{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:rgba(168,132,255,.24);border-radius:14px;margin-bottom:12px}.contact{margin:24px 0;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}footer{text-align:center;color:var(--muted);padding:24px 18px 40px}footer img{width:54px;border-radius:14px;margin-bottom:8px}
.drawer{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;transition:.2s}.drawer.open{opacity:1;visibility:visible}.panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(420px,94vw);background:#0b0718;border-inline-start:1px solid var(--line);box-shadow:-20px 0 80px rgba(0,0,0,.4);padding:20px;display:flex;flex-direction:column}.cart-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}.cart-head button{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;font-size:26px;cursor:pointer}#cartItems{flex:1;overflow:auto;padding:14px 0}.cart-item{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;margin-bottom:10px;background:rgba(255,255,255,.04)}.cart-item img{width:58px;height:58px;border-radius:14px;object-fit:cover}.cart-item h4{margin:0 0 5px;font-size:14px}.cart-item p{margin:0;color:var(--muted);font-size:13px}.qty{display:flex;align-items:center;gap:7px}.qty button,.clear{border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;border-radius:12px;cursor:pointer;padding:8px 10px}.cart-footer{border-top:1px solid var(--line);padding-top:14px}.total{display:flex;justify-content:space-between;margin-bottom:12px;font-size:18px}.checkout,.clear{width:100%;margin-top:8px}.clear{color:var(--muted)}
@media(max-width:980px){.topbar{margin:10px 10px 0;border-radius:18px}.menu{display:inline-flex}nav{position:absolute;top:72px;left:0;right:0;margin:0 10px;padding:10px;border:1px solid var(--line);border-radius:18px;background:#0c0719;display:none;flex-direction:column}nav.open{display:flex}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:28px}.hero-card{min-height:360px}.products-grid{grid-template-columns:repeat(2,1fr)}.why,.steps{grid-template-columns:1fr}.contact{flex-direction:column;align-items:flex-start}}@media(max-width:560px){main{padding:20px 10px 0}.brand span{font-size:14px}.brand img{width:38px;height:38px}.hero-copy,.section,.how,.contact{border-radius:24px;padding:22px}h1{font-size:38px}.stats{grid-template-columns:1fr}.products-grid{grid-template-columns:1fr}.product p{min-height:auto}.hero-actions{width:100%}.primary,.secondary{width:100%}}


/* Updated professional hero visual */
.hero{
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
}
.hero-copy{
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-copy h1{
  font-size:clamp(42px,5.8vw,82px);
}
.hero-visual{
  position:relative;
  min-height:560px;
  border:1px solid var(--line);
  border-radius:34px;
  background:
    radial-gradient(circle at 62% 74%,rgba(168,132,255,.36),transparent 22%),
    radial-gradient(circle at 72% 22%,rgba(215,203,255,.18),transparent 30%),
    linear-gradient(145deg,rgba(18,12,40,.86),rgba(7,5,16,.78));
  box-shadow:0 24px 90px rgba(111,70,255,.22);
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,rgba(168,132,255,.14),transparent 48%),
    linear-gradient(120deg,transparent,rgba(255,255,255,.055),transparent);
  opacity:.9;
}
.brand-mini{
  position:absolute;
  top:32px;
  inset-inline-start:32px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mini img{
  width:54px;
  height:54px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 0 32px rgba(168,132,255,.34);
}
.brand-mini strong{
  font-size:26px;
  letter-spacing:.4px;
  background:linear-gradient(90deg,#fff,#d7cbff,#a884ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.orbit{
  position:absolute;
  border:1px solid rgba(215,203,255,.28);
  border-radius:50%;
  transform:rotate(-14deg);
  filter:drop-shadow(0 0 16px rgba(168,132,255,.28));
}
.orbit-a{
  width:560px;
  height:210px;
  right:18px;
  top:150px;
}
.orbit-b{
  width:600px;
  height:250px;
  right:-8px;
  top:276px;
  opacity:.72;
}
.glow-platform{
  position:absolute;
  width:390px;
  height:95px;
  right:58px;
  bottom:82px;
  border:1px solid rgba(215,203,255,.28);
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,132,255,.5),rgba(168,132,255,.16) 38%,transparent 72%);
  box-shadow:0 0 70px rgba(168,132,255,.34);
}
.float-card{
  position:absolute;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:168px;
  min-height:94px;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(35,27,72,.96),rgba(16,12,34,.96));
  box-shadow:0 24px 55px rgba(0,0,0,.32),0 0 35px rgba(168,132,255,.16);
  transform:perspective(800px) rotateY(-10deg) rotateZ(3deg);
}
.float-card span{
  color:#e8e1ff;
  font-size:16px;
  font-weight:850;
}
.float-card b{
  font-size:28px;
  color:white;
  letter-spacing:.4px;
}
.card-nitro{
  right:126px;
  top:112px;
  background:linear-gradient(145deg,#7d55ff,#4a2f9f);
}
.card-netflix{
  right:258px;
  top:230px;
  min-width:220px;
  min-height:116px;
  transform:perspective(800px) rotateY(-10deg) rotateZ(5deg);
}
.netflix-text{
  color:#ff2626 !important;
  font-size:34px !important;
  font-family:Arial Black,Arial,sans-serif;
}
.card-osn{
  right:36px;
  top:214px;
  background:linear-gradient(145deg,#8366ff,#4b319d);
}
.card-shahid{
  right:134px;
  top:342px;
  min-width:185px;
}
.card-youtube{
  right:330px;
  top:356px;
}
.card-youtube b{
  color:#fff;
  font-size:24px;
}
.card-fasel{
  right:98px;
  bottom:96px;
  min-width:210px;
}
.card-fasel b{
  font-size:30px;
}
@media(max-width:980px){
  .hero{
    grid-template-columns:1fr;
  }
  .hero-copy{
    min-height:auto;
  }
  .hero-visual{
    min-height:520px;
  }
  .orbit-a,.orbit-b{
    right:50%;
    transform:translateX(50%) rotate(-14deg);
  }
  .glow-platform{
    right:50%;
    transform:translateX(50%);
  }
}
@media(max-width:560px){
  .hero-visual{
    min-height:460px;
    border-radius:24px;
  }
  .brand-mini{
    top:22px;
    inset-inline-start:22px;
  }
  .brand-mini img{
    width:44px;
    height:44px;
  }
  .brand-mini strong{
    font-size:20px;
  }
  .float-card{
    min-width:128px;
    min-height:74px;
    padding:14px 16px;
    border-radius:18px;
  }
  .float-card b{
    font-size:20px;
  }
  .float-card span{
    font-size:13px;
  }
  .card-nitro{right:44px;top:96px}
  .card-netflix{right:126px;top:190px;min-width:165px;min-height:86px}
  .netflix-text{font-size:25px!important}
  .card-osn{right:24px;top:202px}
  .card-shahid{right:66px;top:306px;min-width:140px}
  .card-youtube{right:178px;top:302px}
  .card-youtube b{font-size:18px}
  .card-fasel{right:52px;bottom:60px;min-width:150px}
  .orbit-a{width:360px;height:150px;top:150px}
  .orbit-b{width:390px;height:170px;top:250px}
  .glow-platform{width:280px;height:75px;bottom:48px}
}


/* Exact image hero */
.hero-image-section{
  max-width:1180px;
  margin:34px auto 24px;
  padding:0 18px;
}
.hero-image-wrap{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(211,196,255,.18);
  border-radius:34px;
  background:#080614;
  box-shadow:0 24px 90px rgba(111,70,255,.22);
}
.hero-image-wrap img{
  display:block;
  width:100%;
  height:auto;
  border-radius:34px;
}
.hero-hotspot{
  position:absolute;
  display:block;
  z-index:5;
  border-radius:18px;
}
.hero-products{
  left:26.3%;
  top:64.8%;
  width:19.7%;
  height:7.7%;
}
.hero-discord{
  left:4.7%;
  top:64.8%;
  width:19.8%;
  height:7.7%;
}
@media(max-width:760px){
  .hero-image-section{
    margin:18px auto 16px;
    padding:0 10px;
  }
  .hero-image-wrap,
  .hero-image-wrap img{
    border-radius:22px;
  }
}


/* Payment and final description additions */
.how .section-head .eyebrow{
  display:none!important;
}

.payment-section{
  max-width:1180px;
  margin:24px auto;
  padding:0 18px;
}

.payment-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(28,18,58,.78),rgba(7,5,16,.76));
  box-shadow:0 18px 70px rgba(111,70,255,.16);
  padding:30px;
}

.payment-card h2{
  font-size:clamp(28px,3.6vw,46px);
  margin:0 0 10px;
}

.payment-card p{
  color:var(--muted);
  line-height:1.9;
  margin:0;
}

.iban-box{
  min-width:min(460px,100%);
  border:1px solid rgba(211,196,255,.22);
  border-radius:24px;
  padding:22px;
  background:rgba(255,255,255,.055);
  direction:ltr;
  text-align:left;
}

.iban-box span{
  display:block;
  color:#d8cffd;
  font-weight:900;
  margin-bottom:8px;
}

.iban-box strong{
  display:block;
  font-size:clamp(18px,2vw,26px);
  color:#fff;
  letter-spacing:.5px;
  word-break:break-all;
}

.iban-box button{
  margin-top:16px;
  border:none;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#d7cbff,#a884ff,#7b5cff);
  border-radius:14px;
  padding:11px 16px;
  font-weight:950;
}

.store-description{
  max-width:1180px;
  margin:24px auto;
  padding:0 18px;
}

.store-description-card{
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(28,18,58,.72),rgba(7,5,16,.74));
  box-shadow:0 18px 70px rgba(111,70,255,.16);
  padding:30px;
  text-align:center;
}

.store-description-card h2{
  font-size:clamp(26px,3vw,42px);
  margin:0 0 12px;
}

.store-description-card p{
  max-width:850px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.9;
  font-size:18px;
}

@media(max-width:760px){
  .payment-section,
  .store-description{
    padding:0 10px;
  }

  .payment-card{
    flex-direction:column;
    align-items:stretch;
    padding:22px;
    border-radius:24px;
  }

  .store-description-card{
    padding:22px;
    border-radius:24px;
  }

  .store-description-card p{
    font-size:16px;
  }
}


/* Final cleanup */
.why{
  display:none!important;
}

nav a[href="#why"]{
  display:none!important;
}

.brand span{
  display:inline-block!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff!important;
  white-space:nowrap!important;
  max-width:none!important;
  overflow:visible!important;
}

.how .section-head .eyebrow{
  display:none!important;
}

.how .section-head h2{
  margin:0!important;
  font-size:clamp(30px,4vw,48px)!important;
}

.store-description{
  max-width:1180px!important;
  margin:24px auto!important;
  padding:0 18px!important;
}

.store-description-card{
  border:1px solid var(--line)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(28,18,58,.72),rgba(7,5,16,.74))!important;
  box-shadow:0 18px 70px rgba(111,70,255,.16)!important;
  padding:30px!important;
  text-align:center!important;
}

.store-description-card h2{
  font-size:clamp(26px,3vw,42px)!important;
  margin:0 0 12px!important;
}

.store-description-card p{
  max-width:850px!important;
  margin:0 auto!important;
  color:var(--muted)!important;
  line-height:1.9!important;
  font-size:18px!important;
}

@media(max-width:560px){
  .store-description{
    padding:0 10px!important;
  }
  .store-description-card{
    padding:22px!important;
    border-radius:24px!important;
  }
  .store-description-card p{
    font-size:16px!important;
  }
}


/* Final requested cleanup */
.payment-section,
.why{
  display:none!important;
}

nav a[href="#payment"],
nav a[href="#why"]{
  display:none!important;
}

.brand span{
  display:inline-block!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff!important;
  white-space:nowrap!important;
  max-width:none!important;
  overflow:visible!important;
}

.how .section-head .eyebrow{
  display:none!important;
}

.store-description{
  max-width:1180px!important;
  margin:24px auto!important;
  padding:0 18px!important;
}

.store-description-card{
  border:1px solid var(--line)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(28,18,58,.72),rgba(7,5,16,.74))!important;
  box-shadow:0 18px 70px rgba(111,70,255,.16)!important;
  padding:30px!important;
  text-align:center!important;
}

.store-description-card h2{
  font-size:clamp(26px,3vw,42px)!important;
  margin:0 0 12px!important;
}

.store-description-card p{
  max-width:850px!important;
  margin:0 auto!important;
  color:var(--muted)!important;
  line-height:1.9!important;
  font-size:18px!important;
}

@media(max-width:560px){
  .store-description{
    padding:0 10px!important;
  }
  .store-description-card{
    padding:22px!important;
    border-radius:24px!important;
  }
  .store-description-card p{
    font-size:16px!important;
  }
}


/* Premium polish: product glow, shine, and professional button states */
.product{
  isolation:isolate!important;
  position:relative!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.22)!important;
  background:
    linear-gradient(160deg,rgba(255,255,255,.105),rgba(255,255,255,.028)),
    radial-gradient(circle at 20% 0%,rgba(168,132,255,.16),transparent 45%)!important;
  box-shadow:0 16px 48px rgba(0,0,0,.22)!important;
}

.product::before{
  content:""!important;
  position:absolute!important;
  inset:-40% auto -40% -75%!important;
  width:42%!important;
  z-index:2!important;
  pointer-events:none!important;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.10) 62%,transparent 100%)!important;
  transform:skewX(-18deg)!important;
  opacity:0!important;
}

.product::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:26px!important;
  background:radial-gradient(circle at 50% 0%,rgba(215,203,255,.18),transparent 38%)!important;
  opacity:.55!important;
}

.product:hover{
  transform:translateY(-8px) scale(1.012)!important;
  border-color:rgba(215,203,255,.46)!important;
  box-shadow:
    0 24px 75px rgba(0,0,0,.36),
    0 0 42px rgba(168,132,255,.24)!important;
}

.product:hover::before{
  opacity:1!important;
  animation:shineSweep 1.05s ease forwards!important;
}

@keyframes shineSweep{
  from{left:-75%}
  to{left:135%}
}

.product img{
  position:relative!important;
  z-index:2!important;
  transition:transform .28s ease,filter .28s ease,box-shadow .28s ease!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
}

.product:hover img{
  transform:scale(1.035)!important;
  filter:saturate(1.16) contrast(1.08) brightness(1.04)!important;
  box-shadow:0 0 30px rgba(168,132,255,.18)!important;
}

.product h3,
.product p,
.product .price-row,
.product .badge{
  position:relative!important;
  z-index:3!important;
}

.badge{
  box-shadow:0 0 20px rgba(168,132,255,.28)!important;
}

.primary,
.secondary,
.checkout,
.add,
.cart-btn,
.menu,
.filters button,
.iban-box button,
.qty button,
.clear{
  position:relative!important;
  overflow:hidden!important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    filter .18s ease!important;
  -webkit-tap-highlight-color:transparent!important;
}

.primary::before,
.secondary::before,
.checkout::before,
.add::before,
.cart-btn::before,
.menu::before,
.filters button::before,
.iban-box button::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.24),transparent)!important;
  transform:translateX(-130%) skewX(-16deg)!important;
  transition:transform .48s ease!important;
}

.primary:hover::before,
.secondary:hover::before,
.checkout:hover::before,
.add:hover::before,
.cart-btn:hover::before,
.menu:hover::before,
.filters button:hover::before,
.iban-box button:hover::before{
  transform:translateX(130%) skewX(-16deg)!important;
}

.primary:hover,
.checkout:hover,
.add:hover,
.iban-box button:hover{
  transform:translateY(-3px)!important;
  filter:brightness(1.08) saturate(1.1)!important;
  box-shadow:
    0 18px 50px rgba(168,132,255,.38),
    0 0 26px rgba(215,203,255,.18)!important;
}

.secondary:hover,
.cart-btn:hover,
.menu:hover,
.filters button:hover{
  transform:translateY(-2px)!important;
  color:#fff!important;
  border-color:rgba(215,203,255,.42)!important;
  background:rgba(168,132,255,.16)!important;
  box-shadow:0 12px 34px rgba(168,132,255,.18)!important;
}

.primary:active,
.secondary:active,
.checkout:active,
.add:active,
.cart-btn:active,
.menu:active,
.filters button:active,
.iban-box button:active{
  transform:translateY(0) scale(.975)!important;
}

.primary:focus-visible,
.secondary:focus-visible,
.checkout:focus-visible,
.add:focus-visible,
.cart-btn:focus-visible,
.menu:focus-visible,
.filters button:focus-visible,
.iban-box button:focus-visible,
.qty button:focus-visible,
.clear:focus-visible{
  outline:none!important;
  box-shadow:
    0 0 0 3px rgba(8,6,20,.92),
    0 0 0 6px rgba(168,132,255,.72),
    0 14px 45px rgba(168,132,255,.25)!important;
}

.filters button.active{
  border-color:rgba(215,203,255,.58)!important;
  background:linear-gradient(135deg,rgba(215,203,255,.24),rgba(168,132,255,.28))!important;
  box-shadow:0 12px 34px rgba(168,132,255,.18)!important;
}

.section,
.how,
.contact,
.store-description-card{
  box-shadow:
    0 22px 78px rgba(0,0,0,.22),
    0 0 55px rgba(111,70,255,.10)!important;
}

.products-grid{
  perspective:1200px!important;
}

@media(max-width:560px){
  .product:hover{
    transform:translateY(-4px) scale(1.006)!important;
  }
}


/* Product uploaded images fit */
.product img{
  object-fit:contain!important;
  padding:12px!important;
  background:
    radial-gradient(circle at 50% 35%,rgba(168,132,255,.18),transparent 48%),
    #080614!important;
}


/* Final product image fit fix */
.product{
  overflow:hidden!important;
}

.product img{
  width:100%!important;
  height:230px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:16px!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(168,132,255,.18),transparent 48%),
    linear-gradient(145deg,#080614,#100a22)!important;
  border-radius:20px!important;
}

@media(max-width:980px){
  .product img{
    height:220px!important;
  }
}

@media(max-width:560px){
  .product img{
    height:210px!important;
    padding:14px!important;
  }
}


/* v1 fixes: clean hero logo area + larger product images */
.product{
  padding:12px!important;
}

.product img{
  width:100%!important;
  height:260px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:2px!important;
  background:
    radial-gradient(circle at 50% 40%,rgba(168,132,255,.16),transparent 46%),
    linear-gradient(145deg,#080614,#100a22)!important;
  border-radius:20px!important;
}

.product:hover img{
  transform:scale(1.055)!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product img{
    height:245px!important;
    padding:2px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product img{
    height:235px!important;
    padding:2px!important;
  }
}


/* v2 premium cleanup: remove unwanted subtitle feel and upgrade product backgrounds */

.hero-image-wrap{
  background:
    radial-gradient(circle at 12% 10%,rgba(168,132,255,.10),transparent 24%),
    linear-gradient(180deg,#080614,#0b0718)!important;
}

.section#products{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 15% 0%,rgba(168,132,255,.10),transparent 28%),
    radial-gradient(circle at 85% 15%,rgba(125,232,255,.08),transparent 20%),
    linear-gradient(145deg,rgba(26,18,54,.92),rgba(7,5,16,.88))!important;
}
.section#products::before{
  content:""!important;
  position:absolute!important;
  inset:auto -10% -70px -10%!important;
  height:220px!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 18% 40%,rgba(168,132,255,.16),transparent 22%),
    radial-gradient(circle at 50% 65%,rgba(125,232,255,.08),transparent 20%),
    radial-gradient(circle at 82% 35%,rgba(168,132,255,.16),transparent 22%)!important;
  filter:blur(24px)!important;
  opacity:.95!important;
}
.section#products::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px)!important;
  background-size:72px 72px!important;
  mask-image:linear-gradient(to bottom,transparent 14%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.95) 100%)!important;
  opacity:.28!important;
}
.section#products > *{position:relative!important;z-index:2!important;}

.product{
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.03) 45%,rgba(11,8,24,.96) 100%),
    radial-gradient(circle at 50% -12%,rgba(168,132,255,.22),transparent 42%),
    radial-gradient(circle at 50% 115%,rgba(90,64,198,.24),transparent 38%)!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.product::after{
  content:""!important;
  position:absolute!important;
  inset:54% 10px 10px 10px!important;
  z-index:1!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),
    radial-gradient(circle at 50% 0%,rgba(168,132,255,.08),transparent 44%)!important;
  border:1px solid rgba(211,196,255,.08)!important;
}
.product img{
  background:
    radial-gradient(circle at 50% 34%,rgba(168,132,255,.22),transparent 42%),
    radial-gradient(circle at 50% 100%,rgba(125,232,255,.08),transparent 24%),
    linear-gradient(145deg,#090614 0%,#130c26 56%,#0a0716 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 30px rgba(0,0,0,.20),
    0 0 24px rgba(168,132,255,.10)!important;
}
.product h3{
  margin-top:16px!important;
  font-size:20px!important;
}
.product p{
  color:#d7cff1!important;
}


/* v3 professional product image background */
.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.26)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 45%,rgba(7,5,16,.92)),
    radial-gradient(circle at 50% -18%,rgba(168,132,255,.18),transparent 44%)!important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.product::before{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  right:12px!important;
  height:270px!important;
  z-index:1!important;
  border-radius:22px!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 24% 22%,rgba(255,255,255,.12),transparent 16%),
    radial-gradient(circle at 74% 28%,rgba(168,132,255,.35),transparent 20%),
    radial-gradient(circle at 50% 82%,rgba(125,232,255,.11),transparent 22%),
    conic-gradient(from 180deg at 50% 50%,rgba(123,92,255,.05),rgba(168,132,255,.28),rgba(125,232,255,.07),rgba(123,92,255,.05)),
    linear-gradient(145deg,#080614,#140c2a 55%,#080614)!important;
  border:1px solid rgba(211,196,255,.11)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -24px 52px rgba(0,0,0,.25),
    0 0 34px rgba(168,132,255,.13)!important;
  animation:productBgMove 7s ease-in-out infinite alternate!important;
}

.product::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  pointer-events:none!important;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.08) 58%,transparent 100%)!important;
  transform:translateX(-135%) skewX(-18deg)!important;
  opacity:0!important;
}

.product:hover::after{
  animation:productShine .95s ease forwards!important;
  opacity:1!important;
}

@keyframes productBgMove{
  0%{
    filter:hue-rotate(0deg) brightness(1);
    transform:scale(1);
  }
  100%{
    filter:hue-rotate(10deg) brightness(1.08);
    transform:scale(1.018);
  }
}

@keyframes productShine{
  from{transform:translateX(-135%) skewX(-18deg)}
  to{transform:translateX(135%) skewX(-18deg)}
}

.product img{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:270px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:6px!important;
  background:transparent!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.28)) saturate(1.08) contrast(1.04)!important;
  transition:transform .28s ease,filter .28s ease!important;
}

.product:hover img{
  transform:scale(1.07) translateY(-2px)!important;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.36)) saturate(1.18) contrast(1.08) brightness(1.04)!important;
}

.product .badge,
.product h3,
.product p,
.product .price-row{
  position:relative!important;
  z-index:6!important;
}

.product h3{
  margin-top:18px!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product::before{
    height:250px!important;
  }
  .product img{
    height:250px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product::before{
    top:10px!important;
    left:10px!important;
    right:10px!important;
    height:235px!important;
  }
  .product img{
    height:235px!important;
    padding:4px!important;
  }
}


/* v4 clean hero + refined product image backgrounds */
.hero-image-wrap{
  background:#080614!important;
}

/* product cards */
.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.22)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.026) 48%,rgba(8,6,20,.94)),
    radial-gradient(circle at 50% -12%,rgba(168,132,255,.16),transparent 42%)!important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* clean professional frame behind product images */
.product::before{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  right:12px!important;
  height:270px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:22px!important;
  border:1px solid rgba(211,196,255,.12)!important;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    radial-gradient(circle at 50% 42%,rgba(178,145,255,.24),transparent 36%),
    radial-gradient(circle at 50% 96%,rgba(125,232,255,.08),transparent 26%),
    linear-gradient(145deg,#090616 0%,#120b27 54%,#070511 100%)!important;
  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto,
    auto!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -26px 54px rgba(0,0,0,.28),
    0 0 32px rgba(168,132,255,.12)!important;
}

/* subtle neon platform */
.product .badge::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
}

.product img{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:270px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:8px!important;
  border:0!important;
  border-radius:22px!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.34)) saturate(1.08) contrast(1.04)!important;
  transition:transform .24s ease,filter .24s ease!important;
}

/* product shine: softer, not noisy */
.product::after{
  content:""!important;
  position:absolute!important;
  inset:12px!important;
  height:270px!important;
  z-index:3!important;
  pointer-events:none!important;
  border-radius:22px!important;
  background:
    linear-gradient(115deg,transparent 8%,rgba(255,255,255,.04) 42%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.04) 58%,transparent 92%)!important;
  transform:translateX(-135%) skewX(-15deg)!important;
  opacity:0!important;
}

.product:hover::after{
  animation:v4SoftShine .85s ease forwards!important;
  opacity:1!important;
}

@keyframes v4SoftShine{
  from{transform:translateX(-135%) skewX(-15deg)}
  to{transform:translateX(135%) skewX(-15deg)}
}

.product:hover img{
  transform:scale(1.045) translateY(-2px)!important;
  filter:drop-shadow(0 22px 25px rgba(0,0,0,.38)) saturate(1.14) contrast(1.06) brightness(1.025)!important;
}

.product h3,
.product p,
.product .price-row,
.product .badge{
  position:relative!important;
  z-index:5!important;
}

.product h3{
  margin-top:18px!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product::before,
  .product::after{
    height:250px!important;
  }
  .product img{
    height:250px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product::before,
  .product::after{
    top:10px!important;
    left:10px!important;
    right:10px!important;
    height:235px!important;
  }
  .product img{
    height:235px!important;
    padding:6px!important;
  }
}


/* v5: transparent product image area + very light shine */
.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.20)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025) 48%,rgba(8,6,20,.90)),
    radial-gradient(circle at 50% -10%,rgba(168,132,255,.13),transparent 42%)!important;
  box-shadow:
    0 16px 46px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

.product::before{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  right:12px!important;
  height:270px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:22px!important;
  border:1px solid rgba(211,196,255,.08)!important;
  background:
    radial-gradient(circle at 50% 52%,rgba(168,132,255,.10),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.020),rgba(255,255,255,.006))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 24px rgba(168,132,255,.08)!important;
}

.product img{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:270px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:8px!important;
  background:transparent!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.30)) saturate(1.06) contrast(1.03)!important;
  transition:transform .22s ease,filter .22s ease!important;
}

.product::after{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  right:12px!important;
  height:270px!important;
  z-index:3!important;
  pointer-events:none!important;
  border-radius:22px!important;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.045) 46%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.045) 54%,transparent 82%)!important;
  transform:translateX(-130%) skewX(-14deg)!important;
  opacity:0!important;
}

.product:hover::after{
  animation:v5LightShine .78s ease forwards!important;
  opacity:1!important;
}

@keyframes v5LightShine{
  from{transform:translateX(-130%) skewX(-14deg)}
  to{transform:translateX(130%) skewX(-14deg)}
}

.product:hover img{
  transform:scale(1.035) translateY(-1px)!important;
  filter:drop-shadow(0 19px 20px rgba(0,0,0,.34)) saturate(1.10) contrast(1.04) brightness(1.02)!important;
}

.product h3,
.product p,
.product .price-row,
.product .badge{
  position:relative!important;
  z-index:5!important;
}

.product h3{
  margin-top:18px!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product::before,
  .product::after,
  .product img{
    height:250px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product::before,
  .product::after{
    top:10px!important;
    left:10px!important;
    right:10px!important;
    height:235px!important;
  }
  .product img{
    height:235px!important;
    padding:6px!important;
  }
}


/* v6: transparent product images + fixed soft shine + small stars */
.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.20)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022) 48%,rgba(8,6,20,.92)),
    radial-gradient(circle at 50% -12%,rgba(168,132,255,.12),transparent 42%)!important;
  box-shadow:
    0 16px 46px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* clean transparent stage behind product image */
.product::before{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  right:12px!important;
  height:270px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:22px!important;
  border:1px solid rgba(211,196,255,.07)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(168,132,255,.115),transparent 42%),
    radial-gradient(circle at 50% 92%,rgba(255,255,255,.035),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 22px rgba(168,132,255,.07)!important;
}

/* fixed tiny stars only, no line */
.product::after{
  content:""!important;
  position:absolute!important;
  top:40px!important;
  left:42px!important;
  width:3px!important;
  height:3px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.55)!important;
  box-shadow:
    42px 28px 0 rgba(215,203,255,.34),
    128px 12px 0 rgba(255,255,255,.30),
    205px 46px 0 rgba(168,132,255,.36),
    76px 112px 0 rgba(255,255,255,.24),
    182px 134px 0 rgba(215,203,255,.30)!important;
  opacity:.55!important;
}

.product img{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  height:270px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:8px!important;
  background:transparent!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 15px 18px rgba(0,0,0,.30)) saturate(1.07) contrast(1.03)!important;
  transition:transform .22s ease,filter .22s ease!important;
}

.product:hover img{
  transform:scale(1.035) translateY(-1px)!important;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.34)) saturate(1.10) contrast(1.04) brightness(1.02)!important;
}

.product h3,
.product p,
.product .price-row,
.product .badge{
  position:relative!important;
  z-index:5!important;
}

.product h3{
  margin-top:18px!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product::before{
    height:250px!important;
  }
  .product img{
    height:250px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product::before{
    top:10px!important;
    left:10px!important;
    right:10px!important;
    height:235px!important;
  }
  .product::after{
    top:34px!important;
    left:34px!important;
  }
  .product img{
    height:235px!important;
    padding:6px!important;
  }
}


/* v7 final cleanup */
.hero-image-wrap{
  background:#080614!important;
}

/* يغطي أي أثر فوق الهيرو نهائيًا بدون تشويش */
.hero-image-wrap::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:47%!important;
  height:21.5%!important;
  z-index:3!important;
  pointer-events:none!important;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px, transparent 1px),
    radial-gradient(circle at 14% 12%,rgba(92,65,176,.075),transparent 38%),
    linear-gradient(135deg,#070512 0%,#0a0719 52%,#0b081c 100%)!important;
  background-size:
    72px 72px,
    72px 72px,
    auto,
    auto!important;
}

.hero-image-wrap::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:43%!important;
  width:7%!important;
  height:23%!important;
  z-index:4!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,#0a0719,rgba(10,7,25,0))!important;
}

/* Products clean transparent stage */
.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.20)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022) 48%,rgba(8,6,20,.92)),
    radial-gradient(circle at 50% -12%,rgba(168,132,255,.12),transparent 42%)!important;
  box-shadow:
    0 16px 46px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* خلفية ثابتة شفافة ولمعة خفيفة خلف الصورة */
.product::before{
  content:""!important;
  position:absolute!important;
  top:10px!important;
  left:10px!important;
  right:10px!important;
  height:300px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:22px!important;
  border:1px solid rgba(211,196,255,.075)!important;
  background:
    radial-gradient(circle at 50% 54%,rgba(178,145,255,.14),transparent 43%),
    radial-gradient(circle at 50% 96%,rgba(255,255,255,.045),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.020),
    0 0 24px rgba(168,132,255,.075)!important;
}

/* نجوم بسيطة ثابتة فقط */
.product::after{
  content:""!important;
  position:absolute!important;
  top:44px!important;
  left:42px!important;
  width:3px!important;
  height:3px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.42)!important;
  box-shadow:
    50px 32px 0 rgba(215,203,255,.25),
    142px 14px 0 rgba(255,255,255,.22),
    226px 52px 0 rgba(168,132,255,.28),
    86px 132px 0 rgba(255,255,255,.18),
    206px 154px 0 rgba(215,203,255,.24)!important;
  opacity:.48!important;
}

/* صور أكبر وشفافة */
.product img{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  height:300px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:2px!important;
  background:transparent!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.28)) saturate(1.07) contrast(1.03)!important;
  transition:transform .22s ease,filter .22s ease!important;
}

.product:hover img{
  transform:scale(1.045) translateY(-1px)!important;
  filter:drop-shadow(0 19px 21px rgba(0,0,0,.32)) saturate(1.10) contrast(1.04) brightness(1.02)!important;
}

.product h3,
.product p,
.product .price-row,
.product .badge{
  position:relative!important;
  z-index:5!important;
}

.product h3{
  margin-top:20px!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product::before,
  .product img{
    height:280px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product::before{
    top:10px!important;
    left:10px!important;
    right:10px!important;
    height:250px!important;
  }
  .product::after{
    top:34px!important;
    left:34px!important;
  }
  .product img{
    height:250px!important;
    padding:2px!important;
  }
}


/* v8: clean hero top + refined product cards */
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
}

.hero-image-wrap{
  background:
    radial-gradient(circle at 16% 0%,rgba(126,86,230,.16),transparent 28%),
    linear-gradient(135deg,#100b2e,#090719 55%,#080614)!important;
}

/* product card background - remove ugly inner line */
.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.22)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.024) 50%,rgba(8,6,20,.92)),
    radial-gradient(circle at 50% -12%,rgba(168,132,255,.13),transparent 42%)!important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* خلف الصورة: لمعة ثابتة وناعمة، بدون خط داخل الكرت */
.product::before{
  content:""!important;
  position:absolute!important;
  top:10px!important;
  left:10px!important;
  right:10px!important;
  height:320px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:22px!important;
  border:1px solid rgba(211,196,255,.075)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(178,145,255,.18),transparent 42%),
    radial-gradient(circle at 50% 88%,rgba(255,255,255,.050),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 28px rgba(168,132,255,.09)!important;
}

/* نجوم قليلة ثابتة */
.product::after{
  content:""!important;
  position:absolute!important;
  top:42px!important;
  left:42px!important;
  width:3px!important;
  height:3px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.42)!important;
  box-shadow:
    62px 34px 0 rgba(215,203,255,.25),
    158px 18px 0 rgba(255,255,255,.22),
    250px 58px 0 rgba(168,132,255,.28),
    98px 150px 0 rgba(255,255,255,.18),
    230px 176px 0 rgba(215,203,255,.24)!important;
  opacity:.48!important;
}

/* صور أكبر */
.product img{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  height:320px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.28)) saturate(1.08) contrast(1.035)!important;
  transition:transform .22s ease,filter .22s ease!important;
}

.product:hover img{
  transform:scale(1.05) translateY(-1px)!important;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.33)) saturate(1.12) contrast(1.05) brightness(1.02)!important;
}

.product h3,
.product p,
.product .price-row,
.product .badge{
  position:relative!important;
  z-index:5!important;
}

.product h3{
  margin-top:20px!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product::before,
  .product img{
    height:295px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product::before{
    top:10px!important;
    left:10px!important;
    right:10px!important;
    height:265px!important;
  }
  .product::after{
    top:34px!important;
    left:34px!important;
  }
  .product img{
    height:265px!important;
  }
}


/* v9 final hero blend + clean product cards */
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
}

.hero-image-wrap{
  background:#0b0719!important;
}

/* product card */
.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(211,196,255,.22)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.024) 50%,rgba(8,6,20,.92)),
    radial-gradient(circle at 50% -12%,rgba(168,132,255,.13),transparent 42%)!important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* بديل الخط داخل الكرت: هالة ناعمة فقط */
.product::before{
  content:""!important;
  position:absolute!important;
  top:8px!important;
  left:8px!important;
  right:8px!important;
  height:335px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:22px!important;
  border:1px solid rgba(211,196,255,.060)!important;
  background:
    radial-gradient(circle at 50% 52%,rgba(178,145,255,.18),transparent 44%),
    radial-gradient(circle at 50% 88%,rgba(255,255,255,.045),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,.003))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.016),
    0 0 30px rgba(168,132,255,.09)!important;
}

/* نجوم ثابتة خفيفة */
.product::after{
  content:""!important;
  position:absolute!important;
  top:42px!important;
  left:42px!important;
  width:3px!important;
  height:3px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.42)!important;
  box-shadow:
    66px 36px 0 rgba(215,203,255,.24),
    168px 20px 0 rgba(255,255,255,.20),
    270px 62px 0 rgba(168,132,255,.26),
    106px 158px 0 rgba(255,255,255,.17),
    250px 190px 0 rgba(215,203,255,.22)!important;
  opacity:.45!important;
}

/* صور أكبر */
.product img{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  height:335px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.28)) saturate(1.08) contrast(1.035)!important;
  transition:transform .22s ease,filter .22s ease!important;
}

.product:hover img{
  transform:scale(1.045) translateY(-1px)!important;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.33)) saturate(1.12) contrast(1.05) brightness(1.02)!important;
}

.product h3,
.product p,
.product .price-row,
.product .badge{
  position:relative!important;
  z-index:5!important;
}

.product h3{
  margin-top:20px!important;
}

.products-grid{
  gap:18px!important;
}

@media(max-width:980px){
  .product::before,
  .product img{
    height:305px!important;
  }
}

@media(max-width:560px){
  .product{
    padding:10px!important;
  }
  .product::before{
    top:8px!important;
    left:8px!important;
    right:8px!important;
    height:275px!important;
  }
  .product::after{
    top:34px!important;
    left:34px!important;
  }
  .product img{
    height:275px!important;
  }
}


/* v10 hero top solid color fix */
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}

.hero-image-wrap{
  background:#0b0719!important;
}


/* v12 final hero transparency/line fix only */
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}
.hero-image-wrap img{
  background:#0b0719!important;
}


/* v13 only hero top color match */
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}
.hero-image-wrap{
  background:rgb(13,12,31)!important;
}


/* v14 exact hero color match only */
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}


/* v19 cart payment box */
.cart-payment{
  margin:14px 0 14px;
  padding:16px;
  border:1px solid rgba(211,196,255,.18);
  border-radius:20px;
  background:
    radial-gradient(circle at 18% 0%,rgba(168,132,255,.18),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.070),rgba(255,255,255,.025));
  box-shadow:0 12px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}

.cart-payment-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.cart-payment-head span{
  color:var(--muted);
  font-weight:900;
  font-size:14px;
}

.cart-payment-head strong{
  color:#fff;
  font-size:20px;
  font-weight:950;
}

.cart-payment p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}

.cart-iban{
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(8,6,20,.55);
  border:1px solid rgba(211,196,255,.12);
}

.cart-iban span{
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.3px;
  word-break:break-all;
}

.cart-iban button{
  flex:0 0 auto;
  border:0;
  cursor:pointer;
  color:#fff;
  font-weight:950;
  padding:9px 11px;
  border-radius:12px;
  background:linear-gradient(135deg,#d7cbff,#a884ff,#7b5cff);
  box-shadow:0 10px 24px rgba(168,132,255,.24);
}

.cart-iban button:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

@media(max-width:520px){
  .cart-iban{
    flex-direction:column;
    align-items:stretch;
  }
  .cart-iban button{
    width:100%;
  }
}


/* v21 payment page restore */
.cart-payment{display:none!important}

.payment-page{
  position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.68);
  opacity:0;visibility:hidden;transition:.22s ease;
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.payment-page.open{opacity:1;visibility:visible}
.payment-panel{
  position:relative;width:min(520px,96vw);
  border:1px solid rgba(211,196,255,.20);
  border-radius:30px;padding:28px;
  background:radial-gradient(circle at 18% 0%,rgba(168,132,255,.22),transparent 34%),linear-gradient(145deg,rgba(28,18,58,.96),rgba(7,5,16,.96));
  box-shadow:0 30px 100px rgba(0,0,0,.48),0 0 70px rgba(168,132,255,.18);
}
.payment-close{
  position:absolute;top:16px;inset-inline-start:16px;width:42px;height:42px;
  border-radius:14px;border:1px solid rgba(211,196,255,.20);
  background:rgba(255,255,255,.06);color:#fff;font-size:26px;cursor:pointer;
}
.payment-panel h2{margin:6px 0 10px;font-size:clamp(30px,4vw,46px)}
.payment-note{margin:0 0 18px;color:var(--muted);line-height:1.9}
.payment-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.payment-summary div,.payment-iban-card,.payment-order-list{
  border:1px solid rgba(211,196,255,.14);border-radius:20px;
  background:rgba(255,255,255,.045);padding:14px;
}
.payment-summary span,.payment-iban-card span{
  display:block;color:var(--muted);font-weight:900;margin-bottom:6px;font-size:13px;
}
.payment-summary strong{color:#fff;font-size:20px}
.payment-iban-card{direction:ltr;text-align:left;margin-bottom:14px}
.payment-iban-card strong{display:block;color:#fff;font-size:18px;word-break:break-all;letter-spacing:.4px}
.payment-iban-card button{
  margin-top:12px;border:0;cursor:pointer;color:#fff;font-weight:950;
  padding:11px 14px;border-radius:14px;
  background:linear-gradient(135deg,#d7cbff,#a884ff,#7b5cff);
  box-shadow:0 12px 30px rgba(168,132,255,.24);
}
.payment-order-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.payment-order-list div{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;font-weight:800}
.payment-order-list span{color:var(--muted)}
@media(max-width:520px){
  .payment-panel{padding:22px;border-radius:24px}
  .payment-summary{grid-template-columns:1fr}
}


/* v22 remove old cart payment box only */
.cart-payment{
  display:none!important;
}


/* v23 remove old payment details from cart drawer only */
.drawer .cart-iban{
  display:none!important;
}
.drawer .cart-footer > p{
  display:none!important;
}


/* v24 payment close button left fix only */
.payment-close{
  left:16px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  top:16px!important;
}


/* v25 force payment close button to physical left only */
.payment-panel .payment-close,
#paymentClose{
  position:absolute!important;
  top:16px!important;
  left:16px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  margin:0!important;
  transform:none!important;
}

html[dir="rtl"] .payment-panel .payment-close,
html[dir="rtl"] #paymentClose,
[dir="rtl"] .payment-panel .payment-close,
[dir="rtl"] #paymentClose{
  left:16px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
}


/* v26 absolute physical left close button */
body #paymentPage .payment-panel > #paymentClose.payment-close{
  position:absolute!important;
  top:16px!important;
  left:16px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  margin:0!important;
  transform:none!important;
  float:none!important;
}

html[dir="rtl"] body #paymentPage .payment-panel > #paymentClose.payment-close,
[dir="rtl"] body #paymentPage .payment-panel > #paymentClose.payment-close{
  left:16px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
}


/* v27 force payment close button physical left + cache bust */
#paymentPage .payment-panel{
  position:relative!important;
}

#paymentPage #paymentClose.payment-close,
#paymentPage .payment-panel #paymentClose.payment-close,
body #paymentPage .payment-panel > #paymentClose.payment-close{
  position:absolute!important;
  top:16px!important;
  left:16px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  margin:0!important;
  transform:none!important;
  z-index:50!important;
  float:none!important;
}

html[dir="rtl"] #paymentPage #paymentClose.payment-close,
[dir="rtl"] #paymentPage #paymentClose.payment-close{
  left:16px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
}


/* v28 payment topbar: X on visual far left */
.payment-panel{
  position:relative!important;
}

.payment-topbar{
  direction:ltr!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  margin:0 0 10px!important;
}

.payment-topbar .payment-close,
#paymentPage .payment-topbar #paymentClose.payment-close{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  transform:none!important;
  margin:0!important;
  order:0!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  border:1px solid rgba(211,196,255,.20)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  font-size:26px!important;
  cursor:pointer!important;
  z-index:3!important;
}

.payment-topbar .eyebrow{
  order:1!important;
  margin:0!important;
}


/* v29: cleaner product background + larger product visuals */
.product{
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.022) 52%,rgba(8,6,20,.93)),
    radial-gradient(circle at 50% 8%,rgba(154,120,255,.10),transparent 36%),
    linear-gradient(145deg,rgba(19,13,39,.95),rgba(9,7,21,.96))!important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.product::before{
  content:""!important;
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  right:14px!important;
  height:356px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:24px!important;
  border:1px solid rgba(214,198,255,.08)!important;
  background:
    radial-gradient(circle at 50% 44%, rgba(171,138,255,.22) 0%, rgba(171,138,255,.10) 18%, rgba(171,138,255,.04) 34%, transparent 56%),
    radial-gradient(circle at 50% 82%, rgba(130,96,255,.10) 0%, transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -20px 60px rgba(93,63,188,.08),
    0 0 26px rgba(119,84,255,.08)!important;
}

.product::after{
  content:""!important;
  position:absolute!important;
  top:46px!important;
  left:46px!important;
  width:3px!important;
  height:3px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.46)!important;
  box-shadow:
    86px 30px 0 rgba(220,210,255,.28),
    198px 18px 0 rgba(255,255,255,.20),
    284px 70px 0 rgba(163,127,255,.26),
    128px 164px 0 rgba(255,255,255,.17),
    262px 206px 0 rgba(220,210,255,.22)!important;
  opacity:.48!important;
}

.product img{
  position:relative!important;
  z-index:3!important;
  width:108%!important;
  max-width:none!important;
  height:356px!important;
  margin:0 auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:24px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.29)) saturate(1.08) contrast(1.04)!important;
  transition:transform .22s ease,filter .22s ease!important;
}

.product:hover img{
  transform:scale(1.06) translateY(-2px)!important;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.34)) saturate(1.12) contrast(1.06) brightness(1.02)!important;
}

/* give compact icons a bit more presence */
.product[data-id="snapchat3"] img,
.product[data-id="snapchat6"] img,
.product[data-id="watchit"] img,
.product[data-id="disney"] img,
.product[data-id="noorplay"] img,
.product[data-id="shahid"] img{
  transform:scale(1.16)!important;
}
.product[data-id="snapchat3"]:hover img,
.product[data-id="snapchat6"]:hover img,
.product[data-id="watchit"]:hover img,
.product[data-id="disney"]:hover img,
.product[data-id="noorplay"]:hover img,
.product[data-id="shahid"]:hover img{
  transform:scale(1.22) translateY(-2px)!important;
}

.product h3{margin-top:22px!important;}
.products-grid{gap:20px!important;}

@media(max-width:980px){
  .product::before{height:326px!important;}
  .product img{height:326px!important;width:108%!important;}
}

@media(max-width:560px){
  .product{padding:10px!important;}
  .product::before{
    top:10px!important;
    left:10px!important;
    right:10px!important;
    height:286px!important;
  }
  .product::after{
    top:34px!important;
    left:34px!important;
  }
  .product img{
    height:286px!important;
    width:108%!important;
  }
}


/* v30 luxury cards + premium product stage */
.section#products{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 14% 4%,rgba(165,126,255,.14),transparent 24%),
    radial-gradient(circle at 86% 10%,rgba(115,91,255,.10),transparent 22%),
    linear-gradient(145deg,rgba(24,16,48,.96),rgba(9,7,22,.97))!important;
  border-color:rgba(219,205,255,.18)!important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.26),
    0 0 56px rgba(107,76,235,.08)!important;
}

.section#products::before{
  content:""!important;
  position:absolute!important;
  inset:auto -8% -80px -8%!important;
  height:220px!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 20% 45%,rgba(172,137,255,.16),transparent 22%),
    radial-gradient(circle at 50% 65%,rgba(255,255,255,.05),transparent 20%),
    radial-gradient(circle at 82% 35%,rgba(112,88,255,.15),transparent 22%)!important;
  filter:blur(28px)!important;
  opacity:.9!important;
}

.section#products > *{
  position:relative!important;
  z-index:2!important;
}

.products-grid{
  gap:22px!important;
}

.product{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  padding:16px!important;
  border-radius:30px!important;
  border:1px solid rgba(223,210,255,.14)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.028) 42%,rgba(10,8,24,.97) 100%),
    radial-gradient(circle at 50% -6%,rgba(175,143,255,.12),transparent 34%),
    linear-gradient(145deg,#17102f 0%,#0e0a1f 58%,#0a0718 100%)!important;
  box-shadow:
    0 22px 64px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 34px rgba(115,82,240,.07)!important;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease!important;
}

.product:hover{
  transform:translateY(-8px)!important;
  border-color:rgba(223,210,255,.26)!important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 42px rgba(133,99,255,.14)!important;
}

.product::before{
  content:""!important;
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  right:14px!important;
  height:388px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:26px!important;
  border:1px solid rgba(220,208,255,.08)!important;
  background:
    radial-gradient(circle at 50% 26%,rgba(219,205,255,.08),transparent 26%),
    radial-gradient(circle at 50% 58%,rgba(176,144,255,.22),transparent 38%),
    radial-gradient(circle at 50% 88%,rgba(115,90,245,.20),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),
    linear-gradient(145deg,#120d25 0%,#0d0a1c 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -40px 80px rgba(0,0,0,.20),
    0 0 28px rgba(135,104,255,.08)!important;
}

.product::after{
  content:""!important;
  position:absolute!important;
  top:44px!important;
  left:46px!important;
  width:4px!important;
  height:4px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.46)!important;
  box-shadow:
    84px 24px 0 rgba(255,255,255,.18),
    192px 12px 0 rgba(222,210,255,.18),
    268px 60px 0 rgba(176,144,255,.18),
    110px 168px 0 rgba(255,255,255,.14),
    250px 196px 0 rgba(222,210,255,.15)!important;
  opacity:.55!important;
}

.product img{
  position:relative!important;
  z-index:3!important;
  width:112%!important;
  max-width:none!important;
  height:388px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:26px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.30)) saturate(1.10) contrast(1.05)!important;
  transition:transform .24s ease, filter .24s ease!important;
}

.product:hover img{
  transform:scale(1.065) translateY(-3px)!important;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.36)) saturate(1.14) contrast(1.06) brightness(1.02)!important;
}

.product[data-id="snapchat3"] img,
.product[data-id="snapchat6"] img,
.product[data-id="watchit"] img,
.product[data-id="disney"] img,
.product[data-id="noorplay"] img,
.product[data-id="shahid"] img{
  transform:scale(1.26)!important;
}
.product[data-id="snapchat3"]:hover img,
.product[data-id="snapchat6"]:hover img,
.product[data-id="watchit"]:hover img,
.product[data-id="disney"]:hover img,
.product[data-id="noorplay"]:hover img,
.product[data-id="shahid"]:hover img{
  transform:scale(1.34) translateY(-3px)!important;
}

.badge{
  top:16px!important;
  right:16px!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(215,203,255,.92),rgba(138,104,255,.86))!important;
  box-shadow:0 10px 24px rgba(140,108,255,.20)!important;
}

.product h3{
  margin:20px 0 8px!important;
  font-size:21px!important;
}

.product p{
  min-height:72px!important;
  color:#d9d1f0!important;
  font-size:14px!important;
  line-height:1.7!important;
}

.price-row{
  margin-top:16px!important;
}

.add{
  border-radius:16px!important;
  padding:11px 16px!important;
}

@media(max-width:980px){
  .products-grid{
    gap:18px!important;
  }
  .product::before{
    height:344px!important;
  }
  .product img{
    height:344px!important;
    width:110%!important;
  }
}

@media(max-width:560px){
  .product{
    padding:12px!important;
    border-radius:26px!important;
  }
  .product::before{
    top:12px!important;
    left:12px!important;
    right:12px!important;
    height:300px!important;
    border-radius:22px!important;
  }
  .product::after{
    top:36px!important;
    left:36px!important;
  }
  .product img{
    width:110%!important;
    height:300px!important;
    border-radius:22px!important;
  }
  .product h3{
    font-size:20px!important;
  }
}


/* ===== v31 premium card redesign ===== */
#products{
  position: relative;
  overflow: hidden;
}
#products::before,
#products::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  border-radius:50%;
  filter:blur(12px);
  opacity:.65;
}
#products::before{
  width:340px;height:340px;
  top:70px;left:-120px;
  background:radial-gradient(circle,rgba(145,111,255,.20),transparent 68%);
}
#products::after{
  width:300px;height:300px;
  bottom:80px;right:-80px;
  background:radial-gradient(circle,rgba(97,62,255,.18),transparent 70%);
}
.products-grid{
  gap:24px;
  align-items:stretch;
}
.product{
  position:relative;
  min-height:560px;
  padding:18px;
  border-radius:32px;
  border:1px solid rgba(202,183,255,.28);
  background:
    linear-gradient(180deg, rgba(16,10,34,.96), rgba(8,6,21,.94)),
    radial-gradient(circle at top, rgba(173,140,255,.12), transparent 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 55px rgba(25,12,59,.42),
    0 0 0 1px rgba(143,108,255,.10);
  overflow:hidden;
  isolation:isolate;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.product::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 22%, rgba(193,160,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%);
  z-index:0;
  pointer-events:none;
}
.product::after{
  content:"";
  position:absolute;
  left:22px; right:22px; bottom:22px; height:130px;
  border-radius:26px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.18));
  z-index:0;
  pointer-events:none;
}
.product:hover{
  transform:translateY(-8px);
  border-color:rgba(226,214,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 24px 70px rgba(39,17,87,.54),
    0 0 26px rgba(156,123,255,.18);
}
.product > *{position:relative;z-index:1}
.product-inner{
  height:100%;
  display:flex;
  flex-direction:column;
}
.badge{
  top:18px;
  right:18px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(237,229,255,.28);
  background:linear-gradient(135deg, rgba(176,130,255,.34), rgba(120,88,255,.22));
  box-shadow:0 8px 26px rgba(120,88,255,.18), inset 0 1px 0 rgba(255,255,255,.10);
  color:#f6f2ff;
  backdrop-filter:blur(10px);
}
.product-media{
  position:relative;
  min-height:265px;
  margin-bottom:12px;
  border-radius:30px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 18%, rgba(179,145,255,.18), transparent 44%),
    linear-gradient(180deg, rgba(19,12,39,.84), rgba(11,8,25,.58) 54%, rgba(10,8,23,.26));
}
.product-media::before{
  content:"";
  position:absolute;
  inset:16px 16px 44px;
  border-radius:28px;
  border:1px solid rgba(210,193,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    radial-gradient(circle at 50% 0%, rgba(164,127,255,.08), transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(124,92,255,.08);
}
.product-media::after{
  content:"";
  position:absolute;
  left:50%; bottom:28px;
  width:72%; height:56px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(227,163,255,.52) 0%, rgba(173,123,255,.30) 26%, rgba(124,92,255,.16) 48%, transparent 74%);
  box-shadow:
    0 0 24px rgba(196,153,255,.22),
    0 0 52px rgba(116,81,255,.16);
}
.product-orbit{
  position:absolute;
  left:50%; bottom:28px;
  border:1px solid rgba(205,190,255,.12);
  border-radius:50%;
  transform:translateX(-50%);
}
.product-orbit.orbit-1{ width:78%; height:66px; }
.product-orbit.orbit-2{ width:62%; height:44px; bottom:36px; opacity:.85; }
.product-spark{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background:#efe6ff;
  box-shadow:0 0 14px rgba(232,203,255,.95), 0 0 28px rgba(159,112,255,.45);
  opacity:.95;
}
.product-spark::before,
.product-spark::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:rgba(240,233,255,.88);
  border-radius:99px;
}
.product-spark::before{ width:16px; height:2px; }
.product-spark::after{ width:2px; height:16px; }
.spark-1{ top:34px; left:42px; transform:scale(.72); }
.spark-2{ top:54px; right:54px; transform:scale(.54); opacity:.74; }
.spark-3{ bottom:88px; left:72px; transform:scale(.48); opacity:.78; }
.product-image{
  position:relative;
  z-index:2;
  width:82%;
  max-width:220px;
  height:220px;
  object-fit:contain;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.32)) drop-shadow(0 0 18px rgba(174,137,255,.22));
}
.product-content{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:2px 8px 4px;
}
.product h3{
  margin:10px 0 8px;
  font-size:1.9rem;
  line-height:1.15;
  text-align:center;
  font-weight:900;
  letter-spacing:-.02em;
  background:linear-gradient(180deg, #ffffff 0%, #d6c6ff 56%, #a686ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 22px rgba(150,115,255,.08);
}
.product p{
  min-height:72px;
  margin:0;
  text-align:center;
  color:#d7cdee;
  line-height:1.72;
  font-size:15px;
}
.product-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px 0 12px;
}
.product-divider span{
  position:relative;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(150,122,255,.18) 20%, rgba(233,229,255,.55) 50%, rgba(150,122,255,.18) 80%, transparent);
}
.product-divider span::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:3px;
  background:linear-gradient(135deg,#f1e8ff,#b18bff);
  box-shadow:0 0 12px rgba(177,139,255,.45);
}
.price-row{
  margin-top:auto;
  align-items:center;
  gap:12px;
  padding-top:2px;
}
.price{
  font-size:2rem;
  white-space:nowrap;
  color:#efe9ff;
  text-shadow:0 0 20px rgba(175,138,255,.16);
}
.add{
  flex:1;
  min-height:56px;
  border:1px solid rgba(212,196,255,.28);
  color:#fefcff;
  background:
    linear-gradient(135deg, rgba(115,80,227,.46), rgba(67,43,149,.22));
  border-radius:18px;
  padding:13px 16px;
  cursor:pointer;
  font-weight:950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 28px rgba(90,54,194,.24);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.add:hover{
  transform:translateY(-2px);
  border-color:rgba(241,231,255,.42);
  background:linear-gradient(135deg, rgba(137,96,255,.62), rgba(86,53,195,.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 34px rgba(96,58,209,.34), 0 0 18px rgba(160,118,255,.16);
}
@media (max-width:1120px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .products-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .product{min-height:530px}
}
@media (max-width:560px){
  .products-grid{grid-template-columns:1fr;gap:16px}
  .product{min-height:unset;border-radius:26px;padding:16px}
  .product-media{min-height:230px;border-radius:24px}
  .product-media::before{inset:14px 14px 40px;border-radius:22px}
  .product-image{max-width:190px;height:190px;width:78%}
  .product h3{font-size:1.65rem}
  .price{font-size:1.8rem}
  .price-row{flex-direction:column;align-items:stretch}
  .add{width:100%}
}


/* ===== v33 premium product cards ===== */
#products.section{
  position:relative;
  padding:48px 34px 42px;
  border-radius:40px;
  background:
    radial-gradient(circle at 50% -10%, rgba(196,132,255,.18), transparent 26%),
    radial-gradient(circle at 0% 50%, rgba(131,88,255,.10), transparent 30%),
    radial-gradient(circle at 100% 30%, rgba(114,76,255,.10), transparent 26%),
    linear-gradient(180deg, rgba(14,9,29,.96), rgba(8,6,20,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 100px rgba(70,33,170,.26);
}
#products.section::before,
#products.section::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border:1px solid rgba(176,127,255,.12);
  border-radius:50%;
}
#products.section::before{
  width:680px;
  height:680px;
  right:-280px;
  top:-220px;
  transform:rotate(-12deg);
}
#products.section::after{
  width:520px;
  height:520px;
  left:-250px;
  bottom:-260px;
  transform:rotate(18deg);
}
#products .section-head{
  position:relative;
  z-index:1;
  margin-bottom:28px;
}
#products .section-head h2{
  font-size:clamp(34px,4.4vw,58px);
  background:linear-gradient(180deg, #fff, #e5d8ff 45%, #b892ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 30px rgba(164,118,255,.12);
}
#products .section-head p{
  color:#d9cff6;
  font-size:17px;
}
#products .filters{margin-bottom:30px;position:relative;z-index:1}
#products .filters button{
  padding:11px 18px;
  border-radius:999px;
  border:1px solid rgba(214,197,255,.18);
  background:rgba(255,255,255,.04);
  color:#ddd2ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#products .filters .active{
  background:linear-gradient(135deg, rgba(157,113,255,.38), rgba(80,57,180,.18));
  color:#fff;
  border-color:rgba(231,219,255,.32);
}
.products-grid{
  position:relative;
  z-index:1;
  gap:28px;
  align-items:stretch;
}
.product{
  min-height:710px;
  padding:18px;
  border-radius:34px;
  background:
    linear-gradient(180deg, rgba(40,23,82,.82), rgba(17,10,40,.94) 38%, rgba(8,6,20,.98));
  border:1px solid rgba(183,154,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(96,73,195,.26),
    0 18px 60px rgba(42,19,107,.46),
    0 0 55px rgba(168,113,255,.12);
}
.product::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(227,170,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
}
.product::after{
  left:18px;
  right:18px;
  bottom:18px;
  height:170px;
  border-radius:30px;
  background:linear-gradient(180deg, transparent, rgba(10,7,26,.38));
}
.badge{
  top:18px;
  right:18px;
  padding:10px 16px;
  font-size:14px;
  letter-spacing:0;
  border:1px solid rgba(235,226,255,.28);
  background:linear-gradient(135deg, rgba(173,118,255,.42), rgba(76,58,160,.22));
  box-shadow:0 8px 20px rgba(154,118,255,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.product-media{
  min-height:355px;
  margin-bottom:20px;
  border-radius:32px;
  background:
    radial-gradient(circle at 50% 16%, rgba(212,170,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 70%);
}
.product-media::before{
  display:none;
}
.product-media::after{
  width:80%;
  height:78px;
  bottom:30px;
  background:radial-gradient(circle at center, rgba(239,174,255,.62) 0%, rgba(169,114,255,.28) 26%, rgba(108,70,240,.18) 48%, transparent 72%);
  box-shadow:0 0 28px rgba(207,148,255,.28), 0 0 70px rgba(128,86,255,.18);
}
.product-orbit{
  border-color:rgba(223,209,255,.16);
  box-shadow:0 0 24px rgba(123,89,246,.08);
}
.product-orbit.orbit-1{ width:84%; height:74px; }
.product-orbit.orbit-2{ width:66%; height:52px; bottom:40px; }
.product-image{
  width:88%;
  max-width:250px;
  height:250px;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.18)) drop-shadow(0 0 20px rgba(185,145,255,.22));
}
.product-content{
  padding:0 10px 6px;
}
.product h3{
  margin:10px 0 10px;
  font-size:2.1rem;
  line-height:1.14;
  text-shadow:0 0 20px rgba(159,123,255,.12);
}
.product p{
  min-height:86px;
  font-size:16px;
  line-height:1.85;
  color:#e3daf8;
}
.product-divider{
  margin:18px 0 16px;
}
.product-divider span{
  background:linear-gradient(90deg, transparent, rgba(174,137,255,.2) 20%, rgba(239,234,255,.72) 50%, rgba(174,137,255,.2) 80%, transparent);
}
.product-divider span::before{
  width:12px;
  height:12px;
  border-radius:4px;
  box-shadow:0 0 16px rgba(177,139,255,.55);
}
.price-row{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}
.price-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.price-meta{
  font-size:14px;
  color:#dccfff;
  opacity:.9;
}
.price-line{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
}
.price-unit{
  font-size:.92rem;
  color:#f0e8ff;
  margin-bottom:6px;
}
.price{
  font-size:1.7rem;
  line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(180deg, #fff, #e4d4ff 54%, #a88dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
.add{
  min-height:46px;
  width:100%;
  border-radius:16px;
  font-size:.92rem;
  background:linear-gradient(135deg, rgba(114,78,228,.70), rgba(70,49,156,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 34px rgba(90,54,194,.28);
}
.add:hover{
  background:linear-gradient(135deg, rgba(142,101,255,.78), rgba(85,57,193,.38));
}
@media (max-width:1120px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .product{min-height:690px}
}
@media (max-width:980px){
  #products.section{padding:34px 20px 30px}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .product{min-height:660px}
  .product-media{min-height:320px}
}
@media (max-width:640px){
  #products.section{padding:28px 14px 22px;border-radius:28px}
  .products-grid{grid-template-columns:1fr;gap:18px}
  .product{min-height:auto;border-radius:28px;padding:16px}
  .product-media{min-height:290px;border-radius:26px}
  .product-media::before{display:none}
  .product-image{max-width:225px;height:210px;width:84%}
  .product h3{font-size:1.95rem}
  .price{font-size:1.55rem}
}

/* v36: remove the dark/black overlay shape inside product cards only */
.products-grid .product::before{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

.products-grid .product-media::before{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}


/* Added: framed background for طريقة الطلب heading */
.how .section-head{
  display:flex!important;
  justify-content:center!important;
}

.how-title-frame{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border:1px solid rgba(215,203,255,.24);
  border-radius:999px;
  background:rgba(168,132,255,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 10px 30px rgba(111,70,255,.18),
    0 0 28px rgba(168,132,255,.14);
  margin:0 auto 14px;
}

.how-title-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,0));
  pointer-events:none;
}

.how-title-frame h2{
  position:relative;
  z-index:1;
  margin:0!important;
}

@media(max-width:560px){
  .how-title-frame{
    padding:8px 18px;
  }
}


/* Final size adjustment for خطوات الطلب and وصف المتجر badges */
.section-badge-large{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px 30px!important;
  font-size:clamp(22px,2.1vw,30px)!important;
  line-height:1.15!important;
  font-weight:950!important;
  border-radius:999px!important;
  margin-bottom:18px!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 10px 28px rgba(111,70,255,.16),
    0 0 24px rgba(168,132,255,.12)!important;
}

.how .section-head,
.store-description-card{
  text-align:center!important;
}

.store-description-card > .section-badge-large{
  margin-bottom:20px!important;
}

@media(max-width:560px){
  .section-badge-large{
    padding:12px 22px!important;
    font-size:22px!important;
  }
}


/* Fix root cause: force خطوات الطلب badge to stay visible despite older hide rules */
.how .section-head .eyebrow.section-badge-large{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:2!important;
}


/* Products heading frame: remove mini badge and frame اختر اشتراكك */
#products .section-head{
  text-align:center!important;
}

#products .products-title-frame{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 30px;
  border:1px solid rgba(215,203,255,.24);
  border-radius:999px;
  background:rgba(168,132,255,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 10px 28px rgba(111,70,255,.16),
    0 0 24px rgba(168,132,255,.12);
  margin:0 auto 18px;
}

#products .products-title-frame h2{
  margin:0!important;
}

@media(max-width:560px){
  #products .products-title-frame{
    padding:12px 22px;
  }
}


/* Add press feel and shine to hero image action buttons */
.hero-hotspot{
  cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}

.hero-hotspot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.26),transparent);
  transform:translateX(-140%) skewX(-16deg);
  transition:transform .48s ease;
  pointer-events:none;
}

.hero-hotspot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 10px 30px rgba(168,132,255,.18), 0 0 20px rgba(215,203,255,.10);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}

.hero-hotspot:hover{
  transform:translateY(-2px);
  filter:brightness(1.05) saturate(1.06);
}

.hero-hotspot:hover::before{
  transform:translateX(140%) skewX(-16deg);
}

.hero-hotspot:hover::after{
  opacity:1;
}

.hero-hotspot:active{
  transform:translateY(0) scale(.975);
}

.hero-hotspot:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(8,6,20,.92),
    0 0 0 6px rgba(168,132,255,.55),
    0 14px 35px rgba(168,132,255,.24);
}


/* Root fix: make hero CTA buttons use the exact same interaction feel as the site buttons */
.hero-hotspot{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:0 18px!important;
  font-size:clamp(14px,1.2vw,20px)!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  -webkit-tap-highlight-color:transparent!important;
}

.hero-hotspot span{
  position:relative!important;
  z-index:2!important;
}

.hero-hotspot.primary{
  color:#fff!important;
  border:none!important;
  background:linear-gradient(135deg,#d7cbff,#a884ff,#7b5cff)!important;
  box-shadow:0 14px 45px rgba(168,132,255,.35)!important;
}

.hero-hotspot.secondary{
  color:#fff!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}

.hero-hotspot::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.24),transparent)!important;
  transform:translateX(-130%) skewX(-16deg)!important;
  transition:transform .48s ease!important;
}

.hero-hotspot::after{
  content:none!important;
}

.hero-hotspot:hover::before{
  transform:translateX(130%) skewX(-16deg)!important;
}

.hero-hotspot.primary:hover{
  transform:translateY(-3px)!important;
  filter:brightness(1.08) saturate(1.1)!important;
  box-shadow:
    0 18px 50px rgba(168,132,255,.38),
    0 0 26px rgba(215,203,255,.18)!important;
}

.hero-hotspot.secondary:hover{
  transform:translateY(-2px)!important;
  color:#fff!important;
  border-color:rgba(215,203,255,.42)!important;
  background:rgba(168,132,255,.16)!important;
  box-shadow:0 12px 34px rgba(168,132,255,.18)!important;
}

.hero-hotspot:active{
  transform:translateY(0) scale(.975)!important;
}

.hero-hotspot:focus-visible{
  outline:none!important;
  box-shadow:
    0 0 0 3px rgba(8,6,20,.92),
    0 0 0 6px rgba(168,132,255,.72),
    0 14px 45px rgba(168,132,255,.25)!important;
}


/* Ensure hero CTA buttons remain clickable above overlays */
.hero-hotspot{pointer-events:auto!important; user-select:none!important;}
.hero-hotspot span{pointer-events:none!important;}


/* Final hero fix: make hero image blend with site and use invisible click zones on the printed buttons */
.hero-image-section{
  margin:26px auto 24px!important;
  padding:0 18px!important;
}

.hero-image-wrap{
  background:linear-gradient(145deg,rgba(28,18,58,.88),rgba(7,5,16,.82))!important;
  border:1px solid rgba(211,196,255,.18)!important;
  border-radius:34px!important;
  box-shadow:0 24px 90px rgba(111,70,255,.22)!important;
}

.hero-image-wrap img{
  border-radius:34px!important;
  filter:saturate(1.04) brightness(1.03) contrast(1.02)!important;
}

/* Position hotspots exactly over the printed hero buttons */
.hero-products{
  left:24.6%!important;
  top:60.4%!important;
  width:17.0%!important;
  height:8.4%!important;
}

.hero-discord{
  left:6.8%!important;
  top:60.4%!important;
  width:17.0%!important;
  height:8.4%!important;
}

/* Hide the overlay visuals so only the printed buttons in the image are visible */
.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  padding:0!important;
  overflow:hidden!important;
  z-index:10!important;
}

.hero-hotspot span{
  opacity:0!important;
  visibility:hidden!important;
  font-size:0!important;
}

.hero-hotspot::before,
.hero-hotspot::after{
  content:none!important;
}

.hero-hotspot:hover,
.hero-hotspot:active,
.hero-hotspot:focus-visible{
  transform:none!important;
  filter:none!important;
  outline:none!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .hero-products{
    left:24.3%!important;
    top:60.2%!important;
    width:17.5%!important;
    height:8.9%!important;
  }
  .hero-discord{
    left:6.6%!important;
    top:60.2%!important;
    width:17.5%!important;
    height:8.9%!important;
  }
}


/* FINAL ROOT FIX: exact hero button hit areas + hero color harmony */
.hero-image-wrap{
  position:relative!important;
  isolation:isolate!important;
  background:linear-gradient(145deg,#1d143f,#0b0719 58%,#080614)!important;
  border:1px solid rgba(211,196,255,.18)!important;
  border-radius:34px!important;
  box-shadow:0 24px 90px rgba(111,70,255,.22)!important;
}

.hero-image-wrap img{
  position:relative!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  border-radius:34px!important;
  filter:saturate(.96) brightness(.98)!important;
}

.hero-image-wrap::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 15% 12%, rgba(168,132,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(125,92,255,.10), rgba(9,7,24,.02) 42%, rgba(9,7,24,0) 100%)!important;
}

.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  display:block!important;
  z-index:25!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  user-select:none!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

.hero-hotspot span,
.hero-hotspot::before,
.hero-hotspot::after{
  display:none!important;
  content:none!important;
}

/* Exact clickable zones over the printed buttons inside hero image */
.hero-discord{
  left:4.8%!important;
  top:59.4%!important;
  width:19.3%!important;
  height:11.8%!important;
}

.hero-products{
  left:25.0%!important;
  top:59.4%!important;
  width:18.0%!important;
  height:11.8%!important;
}

.hero-hotspot:hover,
.hero-hotspot:active,
.hero-hotspot:focus-visible{
  transform:none!important;
  filter:none!important;
  outline:none!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .hero-discord{
    left:4.4%!important;
    top:59.2%!important;
    width:20.2%!important;
    height:12.8%!important;
  }

  .hero-products{
    left:24.8%!important;
    top:59.2%!important;
    width:19.2%!important;
    height:12.8%!important;
  }
}


/* FINAL HERO REPLACEMENT: approved hero image + exact invisible click zones */
.hero-image-wrap{
  position:relative!important;
  isolation:isolate!important;
  background:#2b214a!important;
  border:1px solid rgba(211,196,255,.18)!important;
  border-radius:34px!important;
  box-shadow:0 24px 90px rgba(111,70,255,.22)!important;
}

.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
}

.hero-image-wrap img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  position:relative!important;
  z-index:0!important;
  border-radius:34px!important;
  filter:none!important;
  background:#2b214a!important;
}

.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  display:block!important;
  z-index:50!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  user-select:none!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

.hero-hotspot span,
.hero-hotspot::before,
.hero-hotspot::after{
  display:none!important;
  content:none!important;
}

/* clickable areas aligned with printed buttons inside the approved image */
.hero-discord{
  left:4.8%!important;
  top:59.7%!important;
  width:20.1%!important;
  height:9.9%!important;
}

.hero-products{
  left:25.9%!important;
  top:59.7%!important;
  width:22.6%!important;
  height:9.9%!important;
}

.hero-hotspot:hover,
.hero-hotspot:active,
.hero-hotspot:focus-visible{
  transform:none!important;
  filter:none!important;
  outline:none!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .hero-discord{
    left:4.2%!important;
    top:59.5%!important;
    width:21.0%!important;
    height:11.0%!important;
  }

  .hero-products{
    left:25.4%!important;
    top:59.5%!important;
    width:23.8%!important;
    height:11.0%!important;
  }
}


/* Final cleanup: remove any visible overlay from hero buttons completely */
.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  outline:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* Alinma Pay payment brand update */
.payment-method-brand{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin:4px 0 10px;direction:rtl}
.payment-method-brand img{width:58px;height:58px;object-fit:contain;border-radius:14px;background:linear-gradient(135deg,#19b8ee,#b591ff);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.payment-method-brand h2{margin:0!important}
@media (max-width:520px){.payment-method-brand{align-items:flex-start}.payment-method-brand img{width:50px;height:50px}}


/* Product package images update */
.products-grid{align-items:stretch}
.product-media{
  min-height:0 !important;
  aspect-ratio:4/5 !important;
  padding:0 !important;
  background:linear-gradient(180deg,rgba(18,13,37,.92),rgba(9,6,20,.94)) !important;
}
.product-media::before,
.product-media::after,
.product-orbit,
.product-spark{display:none !important}
.product-image{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:24px !important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.28)) !important;
}
.product.sold-out{opacity:.74}
.product.sold-out .add{
  cursor:not-allowed !important;
  background:linear-gradient(135deg,rgba(125,118,145,.45),rgba(67,61,82,.35)) !important;
  color:#d7cdee !important;
}
.product.sold-out .badge{background:rgba(120,110,140,.72) !important}


/* Updated product package card images */
.product-media{
  min-height:0 !important;
  aspect-ratio:4/5 !important;
  padding:0 !important;
  margin-bottom:14px !important;
  background:linear-gradient(180deg,rgba(18,13,37,.92),rgba(9,6,20,.94)) !important;
}
.product-media::before,
.product-media::after,
.product-orbit,
.product-spark{display:none !important}
.product-image,
.product img.product-image{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  aspect-ratio:4/5 !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:24px !important;
  background:#0b0718 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.28)) !important;
}
.product.sold-out{opacity:.78}
.product.sold-out .add{
  cursor:not-allowed !important;
  background:linear-gradient(135deg,rgba(125,118,145,.45),rgba(67,61,82,.35)) !important;
  color:#d7cdee !important;
}
.product.sold-out .badge{background:rgba(120,110,140,.72) !important}

/* remove extra dark stage around product artwork */
.product-media{min-height:0 !important;aspect-ratio:4/5 !important;padding:0 !important;margin-bottom:14px !important;background:transparent !important;box-shadow:none !important;border:none !important}.product-media::before,.product-media::after,.product-orbit,.product-spark{display:none !important}.product-image,.product img.product-image{width:100% !important;height:100% !important;aspect-ratio:4/5 !important;object-fit:cover !important;display:block !important;border-radius:24px !important;background:transparent !important;border:none !important;box-shadow:0 18px 30px rgba(0,0,0,.22) !important}


/* header typography refresh */
.topbar .brand span,
.topbar nav a,
.topbar .cart-btn,
.topbar .menu{
  font-family: Tahoma, Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.topbar .brand span{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-size: 1.15rem !important;
}
.topbar nav a{
  color: rgba(255,255,255,.97) !important;
  font-size: 1.02rem !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
}
.topbar nav a:hover,
.topbar nav a.active{
  color:#ffffff !important;
  background: rgba(255,255,255,.08) !important;
}
.topbar .cart-btn,
.topbar .menu{
  color:#ffffff !important;
  font-size: 1rem !important;
}
.topbar .cart-btn{
  padding: 11px 16px !important;
}


/* unified clean text styling for products, filters, badges, prices, and buttons */
.filters button,
.product .badge,
.product h3,
.product p,
.price-meta,
.price-unit,
.price,
.product .add,
.cart-item b,
.cart-item span,
.cart-total,
.cart-total strong,
.qty button{
  font-family: Tahoma, Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.filters{
  gap:10px !important;
}
.filters button{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:18px !important;
  box-shadow:none !important;
  padding:11px 18px !important;
}
.filters button.active,
.filters button:hover{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.24) !important;
}

.product .badge{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:rgba(168,132,255,.72) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.product h3{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-size:1.55rem !important;
}
.product p{
  color:rgba(255,255,255,.86) !important;
  font-weight:700 !important;
}

.price-meta,
.price-unit{
  color:rgba(255,255,255,.88) !important;
  -webkit-text-fill-color:rgba(255,255,255,.88) !important;
}
.price{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:none !important;
}

.product .add{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
  border-radius:16px !important;
}
.product .add:hover{
  background:rgba(255,255,255,.14) !important;
}
.product.sold-out .add{
  background:rgba(255,255,255,.07) !important;
  color:rgba(255,255,255,.78) !important;
  -webkit-text-fill-color:rgba(255,255,255,.78) !important;
}

/* Discord Nitro add button theme */
.add{background:linear-gradient(135deg, rgba(186,153,255,.92), rgba(118,79,236,.86)) !important; color:#fff !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 34px rgba(116,76,226,.32) !important}
.add:hover{background:linear-gradient(135deg, rgba(202,173,255,.95), rgba(132,92,245,.9)) !important}


/* Hero v8 clickable areas aligned with the new hero image */
.hero-hotspot{
  pointer-events:auto!important;
  user-select:none!important;
  z-index:20!important;
}
.hero-products{
  left:2.2%!important;
  top:58.7%!important;
  width:17.7%!important;
  height:7.9%!important;
}
.hero-discord{
  left:21.0%!important;
  top:58.7%!important;
  width:17.8%!important;
  height:7.9%!important;
}
@media(max-width:760px){
  .hero-products{
    left:2.2%!important;
    top:58.7%!important;
    width:17.7%!important;
    height:7.9%!important;
  }
  .hero-discord{
    left:21.0%!important;
    top:58.7%!important;
    width:17.8%!important;
    height:7.9%!important;
  }
}


/* v9 fix: remove black wrapper/background behind hero and product images */
.hero-image-section{
  background:transparent!important;
}
.hero-image-wrap{
  background:transparent!important;
  box-shadow:none!important;
  border-color:rgba(211,196,255,.16)!important;
}
.hero-image-wrap img{
  background:transparent!important;
  box-shadow:none!important;
}

/* keep click areas correctly aligned with the visible buttons in the hero image */
.hero-hotspot{
  pointer-events:auto!important;
  z-index:999!important;
  cursor:pointer!important;
}
.hero-products{
  left:2.1%!important;
  top:58.3%!important;
  width:18.2%!important;
  height:8.8%!important;
}
.hero-discord{
  left:21.0%!important;
  top:58.3%!important;
  width:19.6%!important;
  height:8.8%!important;
}

/* remove the black/dark blocks behind product artwork without changing products layout */
.products-grid .product{
  background:transparent!important;
  box-shadow:none!important;
}
.products-grid .product::before,
.products-grid .product::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}
.products-grid .product-media{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  overflow:hidden!important;
}
.products-grid .product-media::before,
.products-grid .product-media::after,
.products-grid .product-orbit,
.products-grid .product-spark{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
}
.products-grid .product-image,
.products-grid .product img.product-image{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:scale(1.045);
  transform-origin:center center;
}
@media(max-width:760px){
  .hero-products{
    left:2.1%!important;
    top:58.3%!important;
    width:18.2%!important;
    height:8.8%!important;
  }
  .hero-discord{
    left:21.0%!important;
    top:58.3%!important;
    width:19.6%!important;
    height:8.8%!important;
  }
}


/* v10 final fixes: remove black frame, premium buttons, reliable hero CTAs */
.hero-image-section{
  background:transparent!important;
  padding:0 18px!important;
}
.hero-image-wrap{
  position:relative!important;
  overflow:hidden!important;
  aspect-ratio:1672/858!important;
  background:transparent!important;
  border:1px solid rgba(205,186,255,.18)!important;
  border-radius:34px!important;
  box-shadow:0 18px 55px rgba(97,64,180,.16)!important;
}
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
}
.hero-image-wrap img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:top center!important;
  border-radius:34px!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* professional visible hero buttons over the image */
.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  z-index:1000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  user-select:none!important;
  border-radius:16px!important;
  font-size:clamp(12px,1.08vw,17px)!important;
  font-weight:900!important;
  line-height:1!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  padding:0 14px!important;
  overflow:hidden!important;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}
.hero-hotspot span{
  display:block!important;
  position:relative!important;
  z-index:2!important;
}
.hero-hotspot.primary{
  background:linear-gradient(135deg,rgba(187,151,255,.94),rgba(122,79,230,.92),rgba(84,55,180,.86))!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 36px rgba(128,78,240,.34),0 0 22px rgba(177,135,255,.22)!important;
}
.hero-hotspot.secondary{
  background:rgba(17,11,39,.52)!important;
  border:1px solid rgba(213,196,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 30px rgba(56,33,121,.24)!important;
  backdrop-filter:blur(5px)!important;
}
.hero-hotspot::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent)!important;
  transform:translateX(-135%) skewX(-16deg)!important;
  transition:transform .45s ease!important;
  pointer-events:none!important;
}
.hero-hotspot::after{
  content:none!important;
}
.hero-hotspot:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.08) saturate(1.08)!important;
}
.hero-hotspot:hover::before{
  transform:translateX(135%) skewX(-16deg)!important;
}
.hero-hotspot:active{
  transform:scale(.975)!important;
}

/* coordinates after cropping the bottom black band */
.hero-products{
  left:2.05%!important;
  top:59.2%!important;
  width:18.3%!important;
  height:9.0%!important;
}
.hero-discord{
  left:20.6%!important;
  top:59.2%!important;
  width:19.4%!important;
  height:9.0%!important;
}

/* remove black stage behind product images while keeping layout clean */
.products-grid .product{
  background:rgba(89,63,142,.12)!important;
  border-color:rgba(213,196,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 38px rgba(36,20,80,.18)!important;
}
.products-grid .product::before,
.products-grid .product::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.products-grid .product-media{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.products-grid .product-media::before,
.products-grid .product-media::after,
.products-grid .product-orbit,
.products-grid .product-spark{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.products-grid .product-image,
.products-grid .product img.product-image{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Add to cart: match store purple theme */
.products-grid .add,
.product .add,
.add{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:linear-gradient(135deg,#cbb8ff 0%,#9b70ff 38%,#704de2 72%,#4b35a8 100%)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:17px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 16px 34px rgba(112,77,226,.28),0 0 18px rgba(155,112,255,.18)!important;
  font-weight:950!important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease!important;
}
.products-grid .add:hover,
.product .add:hover,
.add:hover{
  filter:brightness(1.08) saturate(1.08)!important;
  transform:translateY(-2px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 20px 42px rgba(112,77,226,.34),0 0 24px rgba(180,140,255,.24)!important;
}
.products-grid .add:active,
.product .add:active,
.add:active{
  transform:scale(.98)!important;
}
.product.sold-out .add,
.products-grid .product.sold-out .add{
  background:linear-gradient(135deg,rgba(119,111,142,.42),rgba(64,57,83,.34))!important;
  color:rgba(255,255,255,.76)!important;
  -webkit-text-fill-color:rgba(255,255,255,.76)!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .hero-image-wrap{aspect-ratio:1672/858!important;border-radius:22px!important}
  .hero-image-wrap img{border-radius:22px!important}
  .hero-hotspot{font-size:clamp(9px,2.2vw,13px)!important;border-radius:12px!important}
  .hero-products{left:2.05%!important;top:59.2%!important;width:18.3%!important;height:9.0%!important}
  .hero-discord{left:20.6%!important;top:59.2%!important;width:19.4%!important;height:9.0%!important}
}


/* v15 hero resize: تكبير الواجهة وجعلها أعرض ومتناسقة */
main{
  max-width:1360px!important;
}

.hero-image-section{
  width:min(1320px, calc(100vw - 28px))!important;
  max-width:none!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  margin:22px 0 34px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.hero-image-wrap{
  --frame-pad:14px;
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:hidden!important;
  padding:var(--frame-pad)!important;
  border-radius:34px!important;
  border:1px solid rgba(218,199,255,.18)!important;
  background:
    radial-gradient(circle at 18% 0%, rgba(174,125,255,.16), transparent 38%),
    linear-gradient(145deg, rgba(31,20,67,.92), rgba(11,7,28,.94))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 22px 70px rgba(34,19,86,.30),
    0 0 0 1px rgba(118,82,230,.10)!important;
}

.hero-image-wrap::before{
  content:""!important;
  position:absolute!important;
  inset:var(--frame-pad)!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:26px!important;
  border:1px solid rgba(221,207,255,.28)!important;
  box-shadow:
    inset 0 0 34px rgba(179,136,255,.10),
    0 0 26px rgba(155,109,255,.14)!important;
  background:transparent!important;
  opacity:1!important;
  display:block!important;
}

.hero-image-wrap::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px)!important;
  background-size:62px 62px!important;
  opacity:.30!important;
  display:block!important;
}

.hero-image-wrap img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  border-radius:26px!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* أزرار شفافة فوق الأزرار المطبوعة في الصورة */
.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  z-index:20!important;
  display:block!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  font-size:0!important;
  padding:0!important;
  margin:0!important;
}

.hero-hotspot span,
.hero-hotspot::before,
.hero-hotspot::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}

/* مناطق الضغط بعد تكبير الصورة */
.hero-discord{
  left:calc(var(--frame-pad) + 8.0%)!important;
  top:calc(var(--frame-pad) + 57.0%)!important;
  width:18.5%!important;
  height:10.0%!important;
}

.hero-products{
  left:calc(var(--frame-pad) + 24.6%)!important;
  top:calc(var(--frame-pad) + 57.0%)!important;
  width:19.2%!important;
  height:10.0%!important;
}

@media(max-width:760px){
  main{
    max-width:100%!important;
  }
  .hero-image-section{
    width:calc(100vw - 18px)!important;
    margin-top:16px!important;
    margin-bottom:24px!important;
  }
  .hero-image-wrap{
    --frame-pad:8px;
    border-radius:20px!important;
  }
  .hero-image-wrap::before,
  .hero-image-wrap img{
    border-radius:16px!important;
  }
  .hero-discord{
    left:calc(var(--frame-pad) + 8.0%)!important;
    top:calc(var(--frame-pad) + 57.0%)!important;
    width:18.5%!important;
    height:10.0%!important;
  }
  .hero-products{
    left:calc(var(--frame-pad) + 24.6%)!important;
    top:calc(var(--frame-pad) + 57.0%)!important;
    width:19.2%!important;
    height:10.0%!important;
  }
}


/* v16 FIX: إزالة الغلاف الخارجي المحدد بالأحمر حول الهيرو */
main{
  max-width:1360px!important;
}

.hero-image-section{
  width:min(1320px, calc(100vw - 28px))!important;
  max-width:none!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  margin:22px 0 34px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.hero-image-section::before,
.hero-image-section::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

.hero-image-wrap{
  --frame-pad:0px!important;
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  isolation:auto!important;
}

.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

.hero-image-wrap img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
}

/* أزرار شفافة فوق أزرار الصورة نفسها */
.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  z-index:9999!important;
  display:block!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  font-size:0!important;
  padding:0!important;
  margin:0!important;
}

.hero-hotspot span,
.hero-hotspot::before,
.hero-hotspot::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}

/* مناطق الضغط بعد إزالة الغلاف الخارجي */
.hero-discord{
  left:8.0%!important;
  top:57.0%!important;
  width:18.5%!important;
  height:10.0%!important;
}

.hero-products{
  left:24.6%!important;
  top:57.0%!important;
  width:19.2%!important;
  height:10.0%!important;
}

@media(max-width:760px){
  main{max-width:100%!important}
  .hero-image-section{
    width:calc(100vw - 18px)!important;
    margin-top:16px!important;
    margin-bottom:24px!important;
  }
  .hero-image-wrap,
  .hero-image-wrap img{
    border-radius:0!important;
  }
  .hero-discord{
    left:8.0%!important;
    top:57.0%!important;
    width:18.5%!important;
    height:10.0%!important;
  }
  .hero-products{
    left:24.6%!important;
    top:57.0%!important;
    width:19.2%!important;
    height:10.0%!important;
  }
}


/* FINAL FIX: إزالة الأطراف الجانبية حول الهيرو + ضبط أزرار الهيرو */
main{
  max-width:1360px!important;
}

.hero-image-section{
  width:min(1320px, calc(100vw - 20px))!important;
  max-width:none!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  margin:18px 0 30px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.hero-image-section::before,
.hero-image-section::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

.hero-image-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  isolation:auto!important;
}

.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

.hero-image-wrap img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
}

/* أزرار شفافة فوق أزرار الصورة نفسها */
.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  z-index:999999!important;
  display:block!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  background:rgba(255,255,255,0)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  font-size:0!important;
  padding:0!important;
  margin:0!important;
}

.hero-hotspot span,
.hero-hotspot::before,
.hero-hotspot::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}

/* مناطق الضغط بعد قص الأطراف وتكبير الهيرو */
.hero-discord{
  left:7.0%!important;
  top:56.0%!important;
  width:21.0%!important;
  height:12.5%!important;
}

.hero-products{
  left:27.0%!important;
  top:56.0%!important;
  width:23.0%!important;
  height:12.5%!important;
}

@media(max-width:760px){
  main{max-width:100%!important}
  .hero-image-section{
    width:calc(100vw - 12px)!important;
    margin-top:14px!important;
    margin-bottom:22px!important;
  }
  .hero-discord{
    left:7.0%!important;
    top:56.0%!important;
    width:21.0%!important;
    height:12.5%!important;
  }
  .hero-products{
    left:27.0%!important;
    top:56.0%!important;
    width:23.0%!important;
    height:12.5%!important;
  }
}


/* v18 FIX: تكبير الهيرو وتنسيق الحجم والجودة */
main{
  max-width:1480px!important;
}

.hero-image-section{
  width:min(1460px, calc(100vw - 12px))!important;
  max-width:none!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  margin:12px 0 34px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.hero-image-section::before,
.hero-image-section::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

.hero-image-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  isolation:auto!important;
}

.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

.hero-image-wrap img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
}

/* مناطق ضغط شفافة ومتناسقة مع الأزرار بعد تكبير الصورة */
.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  z-index:999999!important;
  display:block!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  background:rgba(255,255,255,0)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  font-size:0!important;
  padding:0!important;
  margin:0!important;
}

.hero-hotspot span,
.hero-hotspot::before,
.hero-hotspot::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}

.hero-discord{
  left:6.3%!important;
  top:58.2%!important;
  width:19.8%!important;
  height:12.2%!important;
}

.hero-products{
  left:26.7%!important;
  top:58.2%!important;
  width:21.0%!important;
  height:12.2%!important;
}

@media(max-width:760px){
  main{max-width:100%!important}
  .hero-image-section{
    width:calc(100vw - 8px)!important;
    margin-top:10px!important;
    margin-bottom:22px!important;
  }
  .hero-discord{
    left:6.3%!important;
    top:58.2%!important;
    width:19.8%!important;
    height:12.2%!important;
  }
  .hero-products{
    left:26.7%!important;
    top:58.2%!important;
    width:21.0%!important;
    height:12.2%!important;
  }
}


/* direct-fix overrides */
.hero-image-section{
  width:min(1380px, calc(100vw - 28px))!important;
  max-width:1380px!important;
  margin:24px auto 26px!important;
  padding:0!important;
  background:transparent!important;
}
.hero-image-wrap{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border-radius:34px!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.hero-image-wrap img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  border-radius:30px!important;
  transform:scale(0.985)!important;
  transform-origin:center center!important;
  clip-path:inset(2.8% 4.6% 3.2% 4.6% round 28px)!important;
  filter:brightness(1.02) contrast(1.03) saturate(1.03)!important;
}
.hero-image-wrap::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(to right, rgba(29,21,56,.60) 0%, rgba(29,21,56,.22) 4.5%, rgba(29,21,56,0) 8.5%, rgba(29,21,56,0) 91.5%, rgba(19,15,43,.24) 95.5%, rgba(19,15,43,.60) 100%),
    linear-gradient(to bottom, rgba(48,36,86,.34) 0%, rgba(48,36,86,.10) 4.5%, rgba(48,36,86,0) 8.5%, rgba(23,18,47,0) 91.5%, rgba(23,18,47,.16) 96%, rgba(23,18,47,.42) 100%)!important;
}
.hero-image-wrap::after{display:none!important;}
.hero-hotspot{z-index:20!important;}
.hero-discord{left:8.3%!important; top:59.8%!important; width:16.5%!important; height:8.4%!important;}
.hero-products{left:25.0%!important; top:59.8%!important; width:17.2%!important; height:8.4%!important;}

@media (max-width: 900px){
  .hero-image-section{width:calc(100vw - 12px)!important; margin:10px auto 16px!important;}
  .hero-image-wrap{border-radius:24px!important;}
  .hero-image-wrap img{border-radius:20px!important; transform:scale(0.992)!important; clip-path:inset(2.4% 3.2% 2.8% 3.2% round 18px)!important;}
  .hero-discord{left:7.8%!important; top:60.0%!important; width:17.2%!important; height:9.0%!important;}
  .hero-products{left:25.0%!important; top:60.0%!important; width:17.8%!important; height:9.0%!important;}
}


/* final user fix: fully hide side cover as much as possible and give product cards more breathing room */
.hero-image-section{
  position:relative!important;
  width:min(1280px, calc(100vw - 18px))!important;
  max-width:1280px!important;
  margin:18px auto 26px!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
}
.hero-image-section::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  background:
    linear-gradient(to right,
      rgba(56,44,101,.98) 0%,
      rgba(56,44,101,.98) 6.4%,
      rgba(56,44,101,.92) 9.5%,
      rgba(56,44,101,0) 14%,
      rgba(56,44,101,0) 86%,
      rgba(22,24,60,.92) 90.5%,
      rgba(22,24,60,.98) 93.6%,
      rgba(22,24,60,.98) 100%),
    linear-gradient(to bottom,
      rgba(37,28,72,.28) 0%,
      rgba(37,28,72,0) 7.2%,
      rgba(37,28,72,0) 92.8%,
      rgba(20,16,45,.24) 100%)!important;
}
.hero-image-wrap{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border:none!important;
  border-radius:34px!important;
  background:transparent!important;
  box-shadow:none!important;
}
.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
}
.hero-image-wrap img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  position:relative!important;
  z-index:1!important;
  border-radius:32px!important;
  transform:scale(.955)!important;
  transform-origin:center center!important;
  clip-path:inset(2.8% 6.9% 3% 6.9% round 28px)!important;
  filter:brightness(1.03) contrast(1.03) saturate(1.03)!important;
}
.hero-hotspot{z-index:8!important;}
.hero-discord{left:9.2%!important; top:60.1%!important; width:16.6%!important; height:8.6%!important;}
.hero-products{left:26.2%!important; top:60.1%!important; width:18.0%!important; height:8.6%!important;}
@media (max-width: 900px){
  .hero-image-section{width:calc(100vw - 10px)!important; margin:8px auto 16px!important;}
  .hero-image-section::before{
    background:linear-gradient(to right, rgba(56,44,101,.98) 0%, rgba(56,44,101,.98) 5.2%, rgba(56,44,101,0) 12.6%, rgba(56,44,101,0) 87.4%, rgba(22,24,60,.98) 94.8%, rgba(22,24,60,.98) 100%)!important;
  }
  .hero-image-wrap{border-radius:24px!important;}
  .hero-image-wrap img{border-radius:21px!important; transform:scale(.968)!important; clip-path:inset(2.4% 4.2% 2.6% 4.2% round 18px)!important;}
  .hero-discord{left:8.6%!important; top:60.2%!important; width:17.2%!important; height:8.8%!important;}
  .hero-products{left:25.9%!important; top:60.2%!important; width:18.7%!important; height:8.8%!important;}
}


/* FINAL FINAL: hero transparent edges from actual PNG + cards pushed inward */
.hero-image-section{
  width:min(1320px, calc(100vw - 18px))!important;
  max-width:1320px!important;
  margin:18px auto 28px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.hero-image-section::before,
.hero-image-section::after{
  display:none!important;
  content:none!important;
}

.hero-image-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  isolation:auto!important;
}

.hero-image-wrap::before,
.hero-image-wrap::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

.hero-image-wrap img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:brightness(1.02) contrast(1.02) saturate(1.02)!important;
  transform:none!important;
  clip-path:none!important;
  border-radius:0!important;
}

.hero-hotspot,
.hero-hotspot.primary,
.hero-hotspot.secondary{
  position:absolute!important;
  display:block!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:999999!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  font-size:0!important;
  padding:0!important;
  margin:0!important;
}

.hero-hotspot span,
.hero-hotspot::before,
.hero-hotspot::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}

/* أوسع شوي عشان الأزرار تشتغل حتى بعد إدخال الصورة للداخل */
.hero-discord{
  left:13.5%!important;
  top:59.4%!important;
  width:18.0%!important;
  height:9.8%!important;
}

.hero-products{
  left:31.0%!important;
  top:59.4%!important;
  width:19.0%!important;
  height:9.8%!important;
}

@media(max-width:900px){
  .hero-image-section{
    width:calc(100vw - 8px)!important;
    margin:10px auto 18px!important;
  }
  .hero-discord{
    left:13.2%!important;
    top:59.0%!important;
    width:18.8%!important;
    height:10.4%!important;
  }
  .hero-products{
    left:30.8%!important;
    top:59.0%!important;
    width:20.0%!important;
    height:10.4%!important;
  }
}