/* =========================================
   Best Sellers moving marquee
   Step 04: inline JS guaranteed + drag support
   Scope: Home best sellers only
========================================= */

.plx-best-sellers-marquee-section{
  overflow:hidden;
}

.plx-product-marquee{
  position:relative;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 0 14px;
  cursor:grab;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.plx-product-marquee::-webkit-scrollbar{
  display:none;
}

.plx-product-marquee.is-dragging{
  cursor:grabbing;
  user-select:none;
}

.plx-product-marquee.is-dragging a{
  pointer-events:none;
}

.plx-product-row-marquee{
  display:flex !important;
  width:max-content !important;
  max-width:none !important;
  grid-template-columns:none !important;
  gap:18px !important;
  animation:none !important;
  transform:none !important;
  will-change:auto;
}

.plx-product-row-marquee .plx-product-card{
  width:clamp(190px, 15vw, 235px);
  min-width:clamp(190px, 15vw, 235px);
  flex:0 0 auto;
}

@media (max-width:768px){
  .plx-product-marquee{
    padding-bottom:18px;
    -webkit-mask-image:none;
    mask-image:none;
  }

  .plx-product-row-marquee .plx-product-card{
    width:220px;
    min-width:220px;
  }
}