
.slpro-wrap{
  background:#0a0a0a;
  color:#fff;
  padding:20px 0 40px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.slpro-hero{
  max-width:1280px;
  margin:0 auto 14px;
  padding:0 16px;
}
.slpro-hero h2{margin:0;font-size:clamp(24px,3vw,40px);font-weight:800}
.slpro-hero p{margin:6px 0 0;color:#bdbdc7}

.slpro-row{max-width:1280px;margin:0 auto 18px;padding:0 10px}
.slpro-head{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 10px}
.slpro-head h3{margin:0;font-size:24px;font-weight:700}
.slpro-head a{color:#e5b94a;font-weight:600}

.slpro-track-wrap{position:relative}
.slpro-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:4px 36px;
  scrollbar-width:none;
}
.slpro-track::-webkit-scrollbar{display:none}

.slpro-card{
  flex:0 0 200px;
  background:#111;
  border:1.5px solid #cfa93a;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.slpro-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 14px 30px rgba(0,0,0,.6);
}
.slpro-thumb{
  display:block;
  aspect-ratio:1/1;
  background:#000;
}
.slpro-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.slpro-card-body{padding:10px}
.slpro-card-body h4{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.35;
  min-height:38px;
}
.slpro-card-body h4 a{color:#fff}
.slpro-buy{
  display:block;
  text-align:center;
  background:linear-gradient(180deg,#f3d26d,#cfa93a);
  color:#111;
  font-weight:700;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}

.slpro-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;height:46px;
  border:none;
  border-radius:8px;
  background:rgba(0,0,0,.6);
  color:#fff;
  cursor:pointer;
  z-index:3;
}
.slpro-nav:hover{background:rgba(0,0,0,.85)}
.slpro-nav.prev{left:2px}
.slpro-nav.next{right:2px}

/* alternate direction feel */
.slpro-row.dir-rtl .slpro-track{
  direction:rtl;
}
.slpro-row.dir-rtl .slpro-card,
.slpro-row.dir-rtl .slpro-card *{
  direction:ltr;
}

@media (max-width:768px){
  .slpro-head h3{font-size:18px}
  .slpro-card{flex-basis:150px}
  .slpro-track{padding:4px 28px}
}


/* center single product rows */
.slpro-row.single-item .slpro-track{
  justify-content:center;
  overflow-x:hidden;
  padding-left:0;
  padding-right:0;
}
.slpro-row.single-item .slpro-nav{
  display:none;
}
.slpro-row.single-item.dir-rtl .slpro-track{
  direction:ltr;
}


/* subscription / membership focus row */
.slpro-row.focus-row .slpro-head h3{
  color:#f1cd63;
  text-shadow:0 0 18px rgba(241,205,99,.25);
}
.slpro-row.focus-row .slpro-card{
  border-color:#f1cd63;
  box-shadow:0 12px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(241,205,99,.25) inset;
}
.slpro-row.focus-row .slpro-card:hover{
  transform:translateY(-8px) scale(1.05);
}

/* price */
.slpro-price{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
}
.slpro-old{
  color:#a0a0aa;
  text-decoration:line-through;
  opacity:.9;
}
.slpro-new{
  color:#f1cd63;
}

/* make subscription row slightly larger cards on desktop */
@media (min-width: 1024px){
  .slpro-row.focus-row .slpro-card{
    flex-basis:230px;
  }
}


/* V3 conversion enhancements */
.slpro-badge{
  display:inline-block;
  background:linear-gradient(180deg,#ff5a5a,#d72626);
  color:#fff;
  font-weight:800;
  font-size:11px;
  padding:5px 8px;
  border-radius:999px;
  margin:0 0 8px;
}
.slpro-live{
  font-size:11px;
  color:#ffcf66;
  margin:0 0 10px;
  opacity:.95;
}

/* make focus row first feel stronger */
.slpro-row.focus-row{
  position:relative;
}
.slpro-row.focus-row::before{
  content:"";
  position:absolute;
  inset:-6px 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,transparent,#f1cd63,transparent);
  opacity:.7;
}


/* V3.2: make subscription cards wider & price more visible */
@media (min-width: 1024px){
  .slpro-row.focus-row .slpro-card{
    flex-basis:280px !important;
  }
}
.slpro-row.focus-row .slpro-buy{
  padding:10px 12px;
  font-size:14px;
}

.slpro-price{
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  min-height:20px;
}
.slpro-price .amount{
  color:#f1cd63;
  font-weight:800;
}
.slpro-old .amount{
  color:#9da0aa;
  text-decoration:line-through;
  font-weight:700;
}

/* v3.3 hard visibility */
.slpro-card-body .slpro-price{display:flex !important;visibility:visible !important;opacity:1 !important;}
