:root{
  --sc:#441752; --ink:#1f1f1f; --mut:#6f6680; --bd:#E7DDF1; --fx:#F6F1FB; --wash:#f7f5fb; --white:#fff;
  --radius-lg:24px; --radius-md:16px;
  --shadow-1:0 2px 6px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.10);
  --shadow-2:0 1px 2px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.08);

  /* episodes sizing */
  --ep-thumb-h: 70px;     /* thumbnail height */
  --ep-vpad: 10px;        /* item vertical padding (top+bottom = 20px) */
  --ep-gap: 12px;         /* gap between items */
  --ep-visible: 6;        /* how many items visible before scroll */
}
.sc-surface{ font-family:Rubik,system-ui,sans-serif; color:var(--ink); }

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.2rem;border-radius:999px;border:1px solid var(--bd);font-weight:800;cursor:pointer;text-decoration:none}
.btn--filled{background:var(--sc);color:#fff;border-color:var(--sc)}
.btn--ghost{background:var(--fx);color:var(--sc)}

/* Layout */
.pro-videos{display:grid;grid-template-columns:2fr 1fr;gap:22px;background:var(--wash);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-1)}
@media (max-width:980px){.pro-videos{grid-template-columns:1fr}}

/* Player */
.pv-player{background:linear-gradient(180deg,#faf7ff 0,#fff 55%);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:14px;min-width:0}
.pv-now{display:flex;align-items:baseline;gap:10px}
.pv-kicker{font-size:.8rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#8b8393}
.pv-title{margin:0;color:var(--sc);font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:900}
.pv-aspect{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#e9e5f3;border:1px solid var(--bd)}
.pv-aspect iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pv-controls{display:flex;gap:8px;justify-content:center}

/* Episodes rail */
.pv-episodes{
  background:linear-gradient(180deg,#a88ab8,#8f74a1 70%);
  border:1px solid var(--bd); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2); color:#fff;
  display:flex; flex-direction:column; min-width:0;
  /* height is synced by JS on desktop; on small screens, list max-height governs */
}
.pv-head{
  padding:14px 16px 10px; position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg,#a88ab8,rgba(168,138,184,.96));
  border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
  backdrop-filter:saturate(110%) blur(1px)
}
.pv-headline{margin:0;font-weight:900;letter-spacing:.02em}

/* List + items */
.pv-list,.pv-list>li,.pv-item{list-style:none;margin:0;padding:0}
.pv-list{
  display:flex; flex-direction:column;
  row-gap: var(--ep-gap);
  padding:12px;
  overflow:auto; /* always vertical scroll if needed */
  /* Show at most 6 items before scroll (calc matches item height + gaps) */
  max-height: calc(
    ( /* item height */ (var(--ep-thumb-h) + (var(--ep-vpad)*2) + 2px) * var(--ep-visible) )
    + ( /* gaps */ (var(--ep-gap) * (var(--ep-visible) - 1)) )
  );
  /* Ensure the list itself can define height on mobile/tablet too */
}
.pv-item{scroll-snap-align:start}
.pv-item.is-active .pv-ep{outline:3px solid rgba(255,255,255,.65)}

.pv-ep{
  display:grid; grid-template-columns:112px 1fr; gap:12px; width:100%;
  border-radius:14px; padding:var(--ep-vpad) 10px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.38);
  color:#fff; cursor:pointer; text-align:left;
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease
}
.pv-ep:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12);background:rgba(255,255,255,.22)}

.pv-thumb{position:relative;display:block;width:100%;height:var(--ep-thumb-h);border-radius:12px;overflow:hidden;background:#7e6590}
.pv-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.pv-play{content:"";position:absolute;inset:auto 8px 8px auto;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 50%, #fff 48%, transparent 51%);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><polygon fill="black" points="18,12 38,24 18,36"/></svg>') center/54% no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><polygon fill="black" points="18,12 38,24 18,36"/></svg>') center/54% no-repeat;background-color:#fff;opacity:.92}

.pv-meta{display:flex;flex-direction:column;justify-content:center;min-width:0}
.pv-name{font-weight:900;letter-spacing:.02em;line-height:1.15}
.pv-sub{opacity:.95;line-height:1.15}

/* Tablet / Mobile: keep vertical list with same 6-item cap */
@media (max-width:980px){
  .pv-episodes{ /* stop equal-height on small screens; list drives height */ }
  .pv-list{ max-height: calc(
      ( (var(--ep-thumb-h) + (var(--ep-vpad)*2) + 2px) * var(--ep-visible) )
      + ( var(--ep-gap) * (var(--ep-visible) - 1) )
    );
  }
}

/* Remove theme bullets/markers inside the episodes rail */
.pro-videos .pv-list,
.pro-videos .pv-list li,
.pro-videos .pv-item{
  list-style: none !important;
}

/* Kill ::marker and any theme pseudo-bullets */
.pro-videos .pv-list li::marker{ content: none !important; }
.pro-videos .pv-list li:before,
.pro-videos .pv-list li::before{
  content: none !important;
  display: none !important;
}

/* Reset any left indent the theme adds to UL/LI */
.pro-videos .pv-list{ padding-left: 12px !important; } /* your desired inner padding */
.pro-videos .pv-list li{ margin-left: 0 !important; padding-left: 0 !important; }

/* Nudge items slightly right so content is visually centered after removing bullets */
.pro-videos .pv-item .pv-ep{ padding-left: 12px; } /* you can tweak 8–14px to taste */