/* Scope everything to this section only */
#youMayLike{
  --lv-accent:#9871ff;
  --lv-chip:#23233a;
  --lv-chip-b:#2d3050;
  --lv-ink:#dde3ff;
}

/* Slider sizing like Home’s Live block */
#youMayLike .swiper-wrapper{ padding:4px 2px; align-items:stretch; }
#youMayLike .swiper-wrapper > .swiper-slide{
  width:427px !important; max-width:427px !important; flex:0 0 427px !important;
}
@media (max-width:1199.98px){
  #youMayLike .swiper-wrapper > .swiper-slide{ width:360px !important; flex:0 0 360px !important; }
}
@media (max-width:767.98px){
  #youMayLike .swiper-wrapper > .swiper-slide{ width:88vw !important; max-width:520px !important; flex:0 0 88vw !important; }
}

/* Card */
#youMayLike .lv-card{
  background:transparent; border:0; border-radius:14px; position:relative;
  display:block; text-decoration:none; color:inherit; transition:transform .18s ease;
}
#youMayLike .lv-card:hover{ transform:translateY(-2px); }

/* Artwork (gets thin purple border + overlay) */
/* WHITE canvas so transparent PNG logos show up */
#youMayLike .lv-art{
  position:relative; overflow:hidden; border-radius:14px;
  background:#fff center/cover no-repeat;   /* <- was #0e1220 */
  height:240px; min-height:240px;
  border:2px solid var(--lv-accent);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
/* softer darkening so the white canvas still reads */
#youMayLike .lv-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 100%);
  opacity:1; pointer-events:none; transition:opacity .25s ease;
}
#youMayLike .lv-card:hover .lv-art::after{ opacity:.55; }

/* Channel logo (optional) */
#youMayLike .lv-logo{
  position:absolute; left:14px; bottom:12px; height:28px; width:auto;
  border-radius:6px; background:#fff; border:1px solid rgba(0,0,0,.08);
  padding:4px 6px; display:block;
}

/* Badges */
#youMayLike .lv-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:#ff3b30; color:#fff; padding:4px 10px; border-radius:999px;
  font-size:.78rem; font-weight:800; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
#youMayLike .lv-badge .dot{
  width:8px; height:8px; border-radius:50%; background:#ffd24d; display:inline-block;
  animation:ylBlink 1s ease-in-out infinite;
}
#youMayLike .lv-badge.featured{ left:auto; right:10px; background:#ffad33; color:#1c1406; }
@keyframes ylBlink{ 0%,100%{opacity:.35; transform:scale(.9)} 50%{opacity:1; transform:scale(1)} }

/* Hover play button (purple core + white waves) */
#youMayLike .lv-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94);
  width:78px; height:78px; border-radius:50%; background:var(--lv-accent);
  box-shadow:0 0 0 6px rgba(152,113,255,.25), 0 10px 25px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:3;
}
#youMayLike .lv-card:hover .lv-play{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
#youMayLike .lv-play i{
  position:absolute; top:50%; left:50%; transform:translate(-36%,-50%);
  width:0; height:0; border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); z-index:2;
}
#youMayLike .lv-play::before, #youMayLike .lv-play::after{
  content:""; position:absolute; top:50%; left:50%; border-radius:50%; pointer-events:none; z-index:1;
  width:120px; height:120px; transform:translate(-50%,-50%) scale(.85);
  border:12px solid rgba(255,255,255,.65); opacity:.75; animation:ylRipple 1.8s ease-out infinite;
}
#youMayLike .lv-play::after{ width:160px; height:160px; opacity:.55; animation-delay:.5s; }
@keyframes ylRipple{ 0%{transform:translate(-50%,-50%) scale(.85);opacity:.75} 70%{opacity:.22} 100%{transform:translate(-50%,-50%) scale(1.6);opacity:0} }

/* Meta overlay on image (centered at bottom) */
#youMayLike .lv-meta{
  position:absolute;
  left:12px; right:12px; bottom:10px;
  z-index:3; pointer-events:none;
  display:flex; flex-direction:column; gap:6px;
  align-items:center; text-align:center;
}
#youMayLike .lv-title{
  margin:0;
  font-size:1.05rem; font-weight:800;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.85);
}
#youMayLike .lv-chips{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
}


#youMayLike .chip{
  background:rgba(35,35,58,.9);
  border:1px solid var(--lv-chip-b);
  color:#cfe2ff;
  padding:3px 8px; border-radius:999px; font-size:.74rem; font-weight:800;
}
#youMayLike .chip-ql{ background:var(--lv-accent); color:#fff; border-color:transparent; }

/* Make sure slider arrows are visible on top of slides */
#youMayLike{ position:relative; }
#youMayLike .slider-next, #youMayLike .slider-prev{
  z-index:5; /* above slides */
}