/* ===================================================
   Product Scroll Lock Section
   عنوان «محصولات وینو» و دکمه «مشاهده همه محصولات»
   جدا با المان/ویجت المنتور اضافه می‌شن (ثابت، بدون انیمیشن).
   این فایل فقط مسئول قفل‌شدن سکشن و اسکرول افقی کارته.
=================================================== */

.psl-section{
  --psl-gold:#FFD266;
  --psl-light:#E0E0E0;
  --psl-dark:#0A0A0A;
  --psl-gap:423px;
  --psl-product-w:347px;
  --psl-product-h:348px;
  --psl-banner-w:885px;
  --psl-banner-h:413px;

  position:relative;
}

.psl-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* پس‌زمینه‌ی دورنگ: 65% روشن، 35% تیره، افقی (از بالا به پایین) */
  background: linear-gradient(
    to bottom,
    var(--psl-light) 0%,
    var(--psl-light) 65%,
    var(--psl-dark) 65%,
    var(--psl-dark) 100%
  );
}

.psl-track-wrap{
  overflow:hidden;
  width:100%;
}

.psl-track{
  display:flex;
  align-items:center;
  gap:var(--psl-gap);
  padding-inline-start:6vw;
  padding-inline-end:6vw;
  will-change:transform;
  position:relative; /* تا اسکریپت بتونه موقعیت دقیق بنر رو نسبت به ترک اندازه‌گیری کنه */
  direction:ltr; /* چیدمان آیتم‌ها چپ‌به‌راست بماند، صرف‌نظر از rtl کلی صفحه؛ ترتیب خروجی تو PHP برعکس شده تا حرکت اسکرول به سمت راست باشه */
}

.psl-item{flex-shrink:0;}

/* فقط تصویر، بدون کادر/برچسب/دکمه */
.psl-item img{
  display:block;
  width:var(--psl-product-w);
  height:var(--psl-product-h);
  object-fit:cover;
}

.psl-banner-item img{
  display:block;
  width:var(--psl-banner-w);
  height:var(--psl-banner-h);
  object-fit:cover;
}

.psl-dots{display:flex;justify-content:center;gap:10px;margin-top:28px;}
.psl-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(128,128,128,0.45);
  transition:width .25s ease, border-radius .25s ease, background .25s ease;
}
.psl-dot.active{background:var(--psl-gold);width:22px;border-radius:5px;}