@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Vazirmatn:wght@300;400;500;600;700&display=swap');

.wsl{
  --wsl-font-title:'Noto Naskh Arabic','Vazirmatn',Tahoma,serif;
  --wsl-font-ui:'Vazirmatn',Tahoma,sans-serif;
  --wsl-bg:#e5dcd5;
  --wsl-ink:#16171c;
  --wsl-h:90vh;
  --wsl-dot:#ffffff;
  --wsl-dot-core:#282828;
  --wsl-dot-size:36px;
  --wsl-core-size:6px;
  --wsl-img-h:100%;
  --wsl-img-maxw:100%;
  --wsl-card-bg:#ffffff;
  --wsl-card-ink:#16171c;

  position:relative;
  width:100%;
  height:var(--wsl-h);
  background:var(--wsl-bg);
  color:var(--wsl-ink);
  direction:rtl;
  font-family:var(--wsl-font-ui);
  overflow:hidden;
  isolation:isolate;
}
.wsl *{ box-sizing:border-box; }

/* ---- تصویر و لایهٔ هات‌اسپات‌ها ---- */
.wsl__stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wsl__frame{
  position:relative;
  height:var(--wsl-img-h);
  max-width:var(--wsl-img-maxw);
  min-width:120px;
}

/* وقتی هنوز تصویری انتخاب نشده، جای تصویر باید ابعاد واقعی داشته باشد تا
   نقطه‌ها روی هم نیفتند و بشود موقعیتشان را تنظیم کرد. */
.wsl__ph{
  aspect-ratio:3/4;
  background:
    linear-gradient(0deg, rgba(0,0,0,.05), rgba(0,0,0,.05)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 12px, transparent 12px 24px);
  outline:1px dashed rgba(0,0,0,.18);
  outline-offset:-1px;
}
 /* !important لازم است: قالب‌ها و المنتور معمولاً به img قانون‌های
   height:auto و position:relative;z-index:1 می‌دهند که هم اندازهٔ تصویر را
   خراب می‌کند و هم تصویر را روی نقطه‌ها می‌اندازد. */
.wsl .wsl__img{
  display:block !important;
  height:100% !important;
  width:auto !important;
  max-width:100% !important;
  position:static !important;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.wsl--cover .wsl__frame{ width:100%; }
.wsl--cover .wsl__img{ width:100% !important; object-fit:cover; }

.wsl__spots{
  position:absolute !important;
  inset:0;
  z-index:900 !important;
  pointer-events:none;
}

.wsl .wsl__spot{
  position:absolute !important;
  z-index:901 !important;
  pointer-events:auto;
  left:var(--x,50%);
  top:var(--y,50%);
  transform:translate(-50%,-50%);
  width:var(--wsl-dot-size);
  height:var(--wsl-dot-size);
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:50% !important;
  background:var(--wsl-dot) !important;
  -webkit-appearance:none;
  appearance:none;
  opacity:1;
  visibility:visible;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .28s cubic-bezier(.19,1,.22,1), background .28s ease, box-shadow .28s ease;
}
.wsl .wsl__spot.is-active{ background:var(--wsl-dot-core) !important; }
.wsl .wsl__spot:hover{ transform:translate(-50%,-50%) scale(.9); }
.wsl__spot:focus-visible{ outline:2px solid var(--wsl-dot-core); outline-offset:3px; }

.wsl__spot-core{
  display:block;
  width:var(--wsl-core-size);
  height:var(--wsl-core-size);
  border-radius:50%;
  background:var(--wsl-dot-core);
  transition:background .28s ease;
}
.wsl__spot.is-active .wsl__spot-core{ background:var(--wsl-dot); }

.wsl--pulse .wsl__spot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--wsl-dot);
  animation:wsl-pulse 2.4s ease-out infinite;
}
@keyframes wsl-pulse{
  0%{ transform:scale(1); opacity:.7 }
  70%{ transform:scale(1.9); opacity:0 }
  100%{ transform:scale(1.9); opacity:0 }
}

/* ---- عنوان و لینک‌ها ---- */
.wsl__head{
  position:absolute;
  z-index:940;
  top:clamp(20px,7%,64px);
  inset-inline-start:clamp(18px,4%,56px);
  max-width:min(420px,60%);
  pointer-events:none;
}
.wsl__title{
  margin:0 0 14px;
  font-family:var(--wsl-font-title);
  font-weight:500;
  font-size:clamp(26px,3.2vw,46px);
  letter-spacing:.03em;
  line-height:1.25;
}
.wsl__sub{
  margin:0;
  font-size:clamp(12px,1.1vw,14px);
  line-height:1.9;
}

.wsl__all{
  position:absolute;
  z-index:940;
  bottom:clamp(18px,6%,46px);
  inset-inline-end:clamp(18px,4%,56px);
  color:inherit;
  font-size:clamp(12px,1.1vw,14px);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.wsl__all:hover{ border-bottom-color:currentColor; }

/* ---- کارت محصول ---- */
.wsl__card{
  position:absolute;
  z-index:950;
  bottom:clamp(18px,6%,46px);
  inset-inline-start:clamp(18px,4%,56px);
  width:min(360px, calc(100% - 36px));
  display:flex;
  gap:14px;
  padding:12px;
  background:var(--wsl-card-bg);
  color:var(--wsl-card-ink);
  box-shadow:0 12px 34px rgba(0,0,0,.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.19,1,.22,1), visibility 0s linear .35s;
}
.wsl__card.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .35s ease, transform .35s cubic-bezier(.19,1,.22,1), visibility 0s linear 0s;
}
.wsl--card-end .wsl__card{
  inset-inline-start:auto;
  inset-inline-end:clamp(18px,4%,56px);
}
.wsl--card-end .wsl__all{
  inset-inline-end:auto;
  inset-inline-start:clamp(18px,4%,56px);
}

.wsl__thumb{
  flex:0 0 84px;
  height:96px;
  background-color:#efeae6;
  background-size:cover;
  background-position:center;
  display:block;
}
.wsl__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-block:2px;
}
.wsl__name{
  color:inherit;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wsl__name:hover{ text-decoration:underline; }
.wsl__price{
  font-size:13px;
  opacity:.85;
}
.wsl__quick{
  margin-top:auto;
  color:inherit;
  text-decoration:none;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.wsl__quick::before{
  content:"+";
  font-size:14px;
  line-height:1;
  opacity:.7;
}
.wsl__quick:hover{ text-decoration:underline; }

.wsl__close{
  position:absolute;
  top:8px;
  inset-inline-end:8px;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s ease;
}
.wsl__close:hover{ opacity:1; }
.wsl__close::before,
.wsl__close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:15px;
  height:1.5px;
  background:currentColor;
}
.wsl__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.wsl__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }

@media (max-width:640px){
  .wsl__card{ width:calc(100% - 32px); gap:12px; }
  .wsl__thumb{ flex-basis:68px; height:80px; }
}

@media (prefers-reduced-motion: reduce){
  .wsl__spot,
  .wsl__spot-core,
  .wsl__card{ transition-duration:.01ms !important; }
  .wsl--pulse .wsl__spot::after{ animation:none; }
}