/* One 16:9 canvas: controls belong over the video, not in a second strip. */
body .tv-shell .tv-main #video-player:has(.plyr) {
  position: relative; width: 100%; height: auto; min-height: 0; max-height: none;
  flex: none; aspect-ratio: 16 / 9; padding: 0; box-sizing: border-box;
  background: #080b12; border: 0; border-radius: 14px;
}
body .tv-shell #video-player #player-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
body #player-wrap .plyr { width: 100%; height: 100%; }
body #player-wrap .plyr:not(.plyr--fullscreen-active) .plyr__video-wrapper {
  width: 100%; height: 100%; padding: 0 !important; margin: 0; aspect-ratio: auto;
}
body #player-wrap video { width: 100%; height: 100%; object-fit: contain; }
body #player-wrap .plyr > .plyr__controls {
  position: absolute; inset: auto 0 0; height: auto; min-height: 54px;
  padding: 18px 12px 8px; border: 0; gap: 6px;
  background: linear-gradient(transparent, rgb(0 0 0 / .7));
  box-shadow: none; transition: opacity .2s, transform .2s;
}
body #video-player .plyr.plyr--hide-controls:not(.wt-status-visible) > .plyr__controls {
  opacity: 0 !important; transform: translateY(100%) !important;
  pointer-events: none !important; visibility: hidden !important;
}
body #player-wrap .plyr__controls > .plyr__progress__container {
  position: absolute; left: 12px; right: 12px; top: 5px; width: auto;
}
body #player-wrap .plyr__volume { border: 0; padding-left: 0; }
body #player-wrap .wt-channel-label { border: 0; padding-left: 4px; }
body #player-wrap .plyr__control { background: transparent; }
body #player-wrap .plyr__control:hover { background: rgb(255 255 255 / .14); }
body #player-wrap .wt-ad-actions { bottom: 64px; left: 12px; right: 12px; }
body #player-wrap .wt-ad-label { padding: 4px 7px; border-radius: 4px; background: rgb(0 0 0 / .48); font-size: 11px; }
body #player-wrap .wt-ad-skip {
  min-height: 38px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / .4);
  border-radius: 5px; background: rgb(18 21 29 / .7); font-size: 12px;
}
/* Tablets and small laptops get the full video width, with panels below. */
@media (min-width:768px) and (max-width:1399px) {
  body header.site-header .site-navigation { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 4px; justify-content: center; }
  body header.site-header .site-navigation .nav-link { padding: 10px 8px; font-size: 12px; }
  body .tv-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; height: auto; min-height: 0; align-items: start; }
  body .tv-shell > .tv-main { display: block; width: 100%; min-width: 0; grid-column: 1 / -1; grid-row: 1; }
  body .tv-shell > .desktop-rail, body .tv-shell > .desktop-channel-list { display: none; }
  body .tv-shell > .tv-nav { display: flex; grid-column: 1; grid-row: 2; width: 100%; height: 520px; max-height: 520px; min-width: 0; box-sizing: border-box; }
  body .tv-shell > .desktop-guide { display: flex; grid-column: 2; grid-row: 2; width: 100%; min-width: 0; max-width: 100%; }
  body .tv-shell > .favorite-shelf { grid-column: 1 / -1; grid-row: 3; }
  body .tv-shell #favorite-channel-cards { grid-auto-columns: calc((100% - 28px) / 3); }
  body .tv-main .desktop-now { display: flex; }
  body:has(.tv-shell) main.container { padding: 18px 20px; }
}
@media (min-width:1400px) and (max-width:1799px) {
  body .tv-shell { grid-template-columns: 210px 210px minmax(480px, 1fr) 280px; gap: 16px; }
}
@media (max-width:767px) {
  body .tv-shell .tv-main #video-player:has(.plyr) { aspect-ratio: 16 / 9; padding: 0; min-height: 0; }
  body #player-wrap .plyr__controls { gap: 2px; padding-left: 6px; padding-right: 6px; }
  body #player-wrap .wt-ad-actions { bottom: 58px; left: 8px; right: 8px; }
  body #player-wrap .wt-channel-label { max-width: 24%; }
}