/* Viewer profiles: deliberately isolated from the shared account views. */
.vp-route { position:fixed; top:88px; right:0; bottom:0; left:0; z-index:105; background:#171322; color:#f3f0f7; font:16px/1.5 'Aino-Regular',Arial,sans-serif; overflow:hidden; }
.vp-route *, .vp-quick-switch * { box-sizing:border-box; }
.vp-route account-panel { display:block; height:100%; }
.vp-route h1,.vp-route h2,.vp-route h3,.vp-route strong { font-family:'Aino-Bold',Arial,sans-serif; font-weight:600; }
.vp-route .vp-management h1 { font-size:32px; line-height:1.25; letter-spacing:-.3px; margin:0 65px 6px 0; }
.vp-route .vp-management h2 { font-size:25px; line-height:1.3; margin:0 0 4px; }
.vp-route .vp-management h3 { font-size:20px; margin:0 0 16px; }
.vp-route p { margin:0 0 14px; }
.vp-route .vp-lead { color:#bdb6cb; font-size:17px; line-height:1.55; margin:0; }
.vp-route .vp-muted { color:#b8b0c4; }
.vp-route button,.vp-quick-switch button { font-family:inherit; cursor:pointer; }
.vp-route button:disabled,.vp-quick-switch button:disabled { cursor:default; opacity:.48; }
.vp-route button:focus,.vp-route input:focus,.vp-route select:focus,.vp-route a:focus,.vp-quick-switch button:focus { outline:2px solid #74e6d4; outline-offset:3px; }
.vp-route .vp-button { display:inline-block; min-height:42px; padding:9px 22px; border:1px solid #63d9c7; border-radius:6px; background:#63d9c7; color:#102c2a; font:600 15px/22px 'Aino-Regular',Arial,sans-serif; text-align:center; text-decoration:none; vertical-align:middle; }
.vp-route .vp-button:hover { background:#7ae4d4; }
.vp-route .vp-button-secondary { background:transparent; color:#74e6d4; }
.vp-route .vp-button-secondary:hover { background:#233639; }
.vp-route .vp-button > i { font-size:20px; margin-right:9px; vertical-align:middle; }
.vp-route .vp-link { display:inline-block; padding:6px 0; border:0; border-radius:0; background:transparent; color:#74e6d4; font:inherit; font-size:15px; line-height:24px; text-decoration:none; }
.vp-route .vp-link:hover { color:#a3f4e7; text-decoration:underline; }
.vp-route .vp-danger { color:#ff969c; }
.vp-route .vp-button-danger { color:#27121c; border-color:#f6929c; background:#f6929c; }
.vp-route .vp-notice { padding:11px 14px; margin:16px 0; border:1px solid #3d615d; border-radius:5px; background:#20332f; color:#aff0db; font-size:14px; line-height:1.5; }
.vp-route .vp-error { border-color:#774653; background:#382332; color:#ffb8be; }
.vp-route .vp-status,.vp-route .vp-empty { padding:24px 0; color:#bdb6cb; font-size:15px; }
.vp-route .vp-warning-text { display:block; color:#e9c994; font-size:13px; line-height:1.5; }
.vp-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* The profile picker keeps the website header visible. */
.vp-route-picker { overflow:auto; -webkit-overflow-scrolling:touch; background:#151120; background:radial-gradient(ellipse at center,#1d192b 0,#151120 72%); }
.vp-picker { position:relative; min-height:100%; padding:74px 26px 36px; text-align:center; }
.vp-back { position:absolute; left:28px; top:22px; padding:6px 3px; border:0; background:transparent; color:#bdb6cb; font-size:14px; }
.vp-back i { margin-right:9px; }
.vp-picker-inner { max-width:860px; margin:0 auto; }
.vp-picker h1 { margin:0 0 8px; font-size:40px; line-height:1.25; letter-spacing:-.5px; }
.vp-picker .vp-lead { font-size:19px; }
.vp-picker-profiles { display:block; margin:42px 0 24px; text-align:center; }
.vp-picker-profile { position:relative; display:inline-block; width:190px; margin:0 12px 20px; padding:9px 7px 8px; border:0; background:transparent; color:#f3f0f7; text-align:center; vertical-align:top; border-radius:8px; }
.vp-picker-profile:hover { background:#252032; }
.vp-picker-avatar { display:block; width:142px; height:142px; margin:0 auto 14px; border:2px solid transparent; border-radius:50%; padding:4px; }
.vp-picker-avatar img { display:block; width:100%; height:100%; border-radius:50%; }
.vp-picker-profile:hover .vp-picker-avatar,.vp-picker-profile:focus .vp-picker-avatar,.vp-picker-profile.vp-is-current .vp-picker-avatar { border-color:#74e6d4; }
.vp-picker-profile strong { display:block; font-size:22px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vp-profile-role { display:block; margin-top:4px; color:#bdb6cb; font-size:15px; line-height:1.5; }
.vp-picker-lock { display:block; margin-top:10px; color:#bdb6cb; font-size:24px; line-height:26px; }
.vp-unavailable { display:block; margin-top:8px; color:#d1c5ab; font-size:12px; line-height:18px; }
.vp-add-profile .vp-picker-avatar { background:#231e30; border:1px dashed #62566f; }
.vp-add-profile .vp-picker-avatar > i { font-size:74px; line-height:128px; color:#aaa1b8; }
.vp-route .vp-manage-trigger { min-width:208px; margin-top:0; }
.vp-picker-hint { margin:19px 0 0 !important; color:#bdb6cb; font-size:14px; }
.vp-picker-hint i { margin-right:9px; font-size:20px; vertical-align:middle; }
.vp-picker-footnote { max-width:620px; margin:37px auto 0; padding:24px 8px 0; border-top:1px solid #393044; font-size:14px; line-height:1.75; }
.vp-picker-footnote span { color:#bdb6cb; }

/* Profile list and compact settings form. Table layout is a legacy-TV fallback. */
.vp-management { max-width:1220px; }
.vp-page-heading { position:relative; padding:0 0 22px; margin:0 0 24px; border-bottom:1px solid #393044; }
.vp-count { float:right; margin:9px 2px 0 20px; color:#c7c0d3; font-size:14px; }
.vp-management-layout { display:table; table-layout:fixed; width:100%; }
.vp-profile-list { display:table-cell; width:32%; padding-right:25px; vertical-align:top; }
.vp-list-profile { position:relative; display:table; width:100%; min-height:84px; margin:0 0 10px; padding:12px 30px 12px 14px; text-align:left; color:#f3f0f7; border:1px solid #342c40; border-radius:6px; background:transparent; }
.vp-list-profile:hover { background:#211b2d; }
.vp-list-profile.vp-is-selected { border-color:#45394f; background:#2b2239; border-left:4px solid #74e6d4; padding-left:11px; }
.vp-list-profile > img { display:table-cell; width:60px; height:60px; border-radius:50%; vertical-align:middle; }
.vp-list-copy { display:table-cell; padding-left:14px; vertical-align:middle; width:100%; }
.vp-list-copy strong { display:block; font-size:17px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.vp-list-copy > span { display:block; margin-top:1px; color:#bdb6cb; font-size:14px; line-height:1.5; }
.vp-list-copy i { color:#74e6d4; margin-left:6px; }
.vp-list-arrow { position:absolute; right:15px; top:33px; color:#ccc3da; font-size:16px; }
.vp-list-plus { display:table-cell; width:60px; height:60px; text-align:center; vertical-align:middle; border:1px dashed #61566e; border-radius:50%; color:#bdb6cb; }
.vp-list-plus > i { display:block; width:58px; font-size:42px; line-height:58px; }
.vp-list-add { border-style:dashed; }
.vp-route .vp-list-note { padding-top:17px; margin-top:20px; border-top:1px solid #393044; color:#a79eb8; font-size:13px; }
.vp-route .vp-list-switch { font-size:14px; }
.vp-list-switch i { margin-right:7px; }
.vp-editor { display:table-cell; width:68%; padding-left:28px; border-left:1px solid #393044; vertical-align:top; }
.vp-editor-self { display:block; width:100%; max-width:800px; padding-left:0; border-left:0; }
.vp-editor-heading { display:table; width:100%; padding:0 0 22px; }
.vp-editor-heading > img { display:table-cell; width:84px; height:84px; border-radius:50%; vertical-align:middle; }
.vp-editor-heading > div { display:table-cell; width:100%; padding-left:20px; vertical-align:middle; }
.vp-route .vp-editor-heading p { margin:0; color:#bdb6cb; font-size:16px; }
.vp-field-row { display:table; width:100%; padding:20px 0; border-top:1px solid #393044; }
.vp-field-row > label,.vp-field-label { display:table-cell; width:26%; padding:9px 14px 0 0; color:#f3f0f7; font-weight:normal; font-size:15px; vertical-align:top; }
.vp-field-content { position:relative; display:table-cell; width:74%; vertical-align:middle; }
.vp-route .vp-field-content input[type=text],.vp-route .vp-field-content input[type=password],.vp-route .vp-field-content select { display:block; width:100%; min-height:42px; padding:8px 12px; border:1px solid #4a4058; border-radius:5px; background:#130f1e; color:#f3f0f7; font:15px/24px 'Aino-Regular',Arial,sans-serif; }
.vp-field-content input[type=password] { max-width:240px; }
.vp-field-content small { display:block; margin-top:7px; color:#a99fb8; font-size:13px; line-height:1.5; }
.vp-field-content small.vp-warning-text { color:#e9c994; }
.vp-field-sub-label { display:block; margin:14px 0 6px; font-size:14px; font-weight:normal; }
.vp-avatar-field { padding-right:90px; min-height:52px; }
.vp-avatar-field > img { width:52px; height:52px; margin-right:12px; border-radius:50%; vertical-align:middle; }
.vp-avatar-field > span { color:#c7bfd3; font-size:15px; vertical-align:middle; }
.vp-route .vp-inline-action { position:absolute; right:0; top:5px; }
.vp-route .vp-avatar-field .vp-button { min-height:38px; padding:6px 18px; font-size:14px; }
.vp-pin-field { padding:5px 140px 0 0; font-size:15px; color:#c7bfd3; }
.vp-pin-field > i { margin-right:10px; font-size:27px; vertical-align:middle; color:#b8b0c4; }
.vp-route .vp-pin-field .vp-inline-action { font-size:14px; }
.vp-inline-action > i { margin-left:12px; font-size:12px; }
.vp-form-actions { margin:8px 0 28px; padding-top:14px; text-align:right; }
.vp-form-actions .vp-link { margin-left:24px; }
.vp-route .vp-section-title { padding-top:12px; }
.vp-account-note { display:table; width:100%; padding:18px 0; border-top:1px solid #393044; border-bottom:1px solid #393044; color:#bdb6cb; }
.vp-account-note > i { display:table-cell; width:34px; font-size:26px; vertical-align:middle; }
.vp-route .vp-account-note > p { display:table-cell; padding-left:8px; margin:0; font-size:14px; vertical-align:middle; }
.vp-route .vp-delete { margin-top:17px; font-size:14px; }
.vp-avatar-choices { margin:0 -5px 8px; overflow:hidden; }
.vp-avatar-choice { position:relative; float:left; width:25%; padding:10px 7px 8px; border:2px solid transparent; border-radius:7px; background:transparent; color:#c7bfd3; text-align:center; }
.vp-avatar-choice:hover { background:#282033; }
.vp-avatar-choice.vp-avatar-selected { border-color:#74e6d4; background:#263334; color:#e5fff8; }
.vp-avatar-choice img { display:block; width:72px; height:72px; max-width:100%; margin:0 auto 7px; border-radius:50%; }
.vp-avatar-choice span { display:block; font-size:13px; line-height:20px; }
.vp-avatar-check { position:absolute; right:8px; top:6px; font-size:13px; color:#74e6d4; }
.vp-channel-search { display:block; position:relative; margin:18px 0 12px; }
.vp-channel-search > i { position:absolute; top:7px; left:13px; font-size:25px; color:#a99fb8; }
.vp-route .vp-channel-search input[type=text] { width:100%; min-height:42px; padding:8px 12px 8px 43px; border:1px solid #4a4058; border-radius:5px; background:#130f1e; color:#f3f0f7; font-size:15px; }
.vp-channel-list { max-height:300px; overflow:auto; margin-bottom:14px; border-top:1px solid #393044; border-bottom:1px solid #393044; }
.vp-channel-option { position:relative; display:block; padding:13px 16px 13px 43px; margin:0; border-bottom:1px solid #30293b; font-size:14px; cursor:pointer; font-weight:normal; }
.vp-channel-option:hover { background:#282033; }
.vp-channel-option input { position:absolute; left:14px; top:15px; width:17px; height:17px; margin:0; }

/* PIN and owner checks never replace the shared account session. */
.vp-route.vp-route-dialog-open { z-index:10020; overflow:visible; }
.vp-dialog-backdrop { position:fixed; top:0; right:0; bottom:0; left:0; z-index:1200; background:#080610; background:rgba(7,5,13,.78); overflow:auto; padding:110px 20px 35px; text-align:center; }
.vp-dialog { position:relative; width:100%; max-width:450px; margin:0 auto; padding:32px; border:1px solid #4a4058; border-radius:10px; background:#1d1729; box-shadow:0 15px 50px rgba(0,0,0,.35); text-align:left; }
.vp-dialog-close { position:absolute; top:8px; right:10px; width:32px; height:32px; padding:0; border:0; background:transparent; color:#c7bfd3; }
.vp-dialog-close i { font-size:34px; line-height:30px; }
.vp-route .vp-dialog h2 { margin:5px 0 10px; font-size:25px; line-height:1.3; }
.vp-route .vp-dialog p { color:#bdb6cb; font-size:14px; line-height:1.6; }
.vp-dialog-avatar { display:block; width:84px; height:84px; margin:0 0 18px; border-radius:50%; }
.vp-dialog-icon { display:block; margin:0 0 12px; color:#74e6d4; font-size:35px; line-height:1; }
.vp-dialog label { display:block; margin:13px 0 6px; color:#dcd5e6; font-size:14px; font-weight:normal; }
.vp-route .vp-dialog input[type=password] { width:100%; min-height:44px; padding:10px 12px; border:1px solid #4a4058; border-radius:5px; background:#130f1e; color:#f3f0f7; font:16px/24px Arial,sans-serif; }
.vp-route .vp-dialog input.vp-pin-input { width:175px; font-size:24px; letter-spacing:14px; }
.vp-dialog .vp-or { margin:10px 0; text-align:center; font-size:13px; color:#a99fb8; }
.vp-dialog-actions { margin-top:24px; text-align:right; }
.vp-dialog-actions .vp-link { margin-left:18px; }
.vp-route .vp-dialog p.vp-dialog-error { margin-top:16px; color:#ffb8be; }

/* Compact header switcher follows the approved account-menu hierarchy. */
body.demo-header-layout .demo-account.vp-header-account { padding:0; overflow:hidden; background:transparent; }
.vp-header-avatar { display:block; width:48px; height:48px; border-radius:50%; }
body.live-blue-header-layout .account-area-trigger.vp-header-account .vp-header-initial { position:static; display:block; width:44px; height:44px; margin:0; padding:0; border-radius:50%; background:#62dbc9; color:#11342f; font:600 20px/44px 'Aino-Bold',Arial,sans-serif; text-align:center; }
.vp-quick-switch { color:#f3f0f7; }
.vp-quick-identity { position:relative; display:block; width:100%; min-height:80px; padding:15px 0 14px; border-bottom:1px solid #393044; }
.vp-current-avatar { position:absolute; top:6px; left:0; display:block; width:60px; height:60px; border:1px solid #74e6d4; border-radius:50%; }
.vp-current-avatar.vp-current-initial { padding:0; background:#62dbc9; color:#11342f; font:600 27px/58px 'Aino-Bold',Arial,sans-serif; text-align:center; }
.vp-quick-current { display:block; width:auto; margin-left:80px; margin-right:100px; }
.vp-quick-name-line { display:block; white-space:nowrap; }
.vp-quick-name-line > strong { display:inline-block; max-width:calc(100% - 27px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f3f0f7; font:600 18px/26px 'Aino-Bold',Arial,sans-serif; vertical-align:middle; }
.vp-quick-current > span { display:block; margin-top:2px; color:#b8b0c4; font-size:13px; line-height:18px; }
.vp-quick-edit { display:inline-block; width:24px; height:28px; margin-left:3px; padding:0; color:#b8b0c4; font-size:18px; line-height:28px; text-align:center; vertical-align:middle; }
.vp-quick-edit:hover { color:#74e6d4; }
.vp-single-profile-action { display:inline-block; min-height:28px; margin-top:3px; color:#74e6d4; font-size:13px; line-height:28px; text-decoration:none; white-space:nowrap; }
.vp-single-profile-action > i { margin-left:7px; font-size:19px; vertical-align:middle; }
.vp-profile-activation { display:table; table-layout:fixed; width:100%; padding:22px 0; border-bottom:1px solid #393044; box-sizing:border-box; }
.vp-profile-activation-art { display:table-cell; width:124px; padding-right:12px; vertical-align:middle; box-sizing:border-box; }
.vp-profile-activation-avatars { position:relative; display:block; width:112px; height:64px; }
.vp-profile-activation-avatars > img { position:absolute; top:8px; display:block; width:48px; height:48px; border-radius:50%; box-shadow:0 2px 7px rgba(0,0,0,.2); }
.vp-profile-activation-avatars .vp-activation-fox { left:0; z-index:3; }
.vp-profile-activation-avatars .vp-activation-owl { left:32px; z-index:2; }
.vp-profile-activation-avatars .vp-activation-penguin { left:64px; z-index:1; }
.vp-profile-activation-copy { display:table-cell; vertical-align:middle; }
.vp-profile-activation-copy > h3 { margin:0; padding:0; color:#f3f0f7; font:600 16px/22px 'Aino-Bold',Arial,sans-serif; }
.vp-profile-activation-copy > p { margin:6px 0 12px; padding:0; color:#b8b0c4; font:400 13px/18px 'Aino-Regular',Arial,sans-serif; }
.vp-profile-activation-cta { display:inline-block; width:100%; min-height:40px; margin:0; padding:9px 8px; border:1px solid #62dbc9; border-radius:5px; background:#62dbc9; color:#12342d; font:600 13px/20px 'Aino-Bold',Arial,sans-serif; text-align:center; text-decoration:none; white-space:normal; cursor:pointer; box-sizing:border-box; }
.vp-profile-activation-cta:hover { border-color:#85e5d7; background:#85e5d7; }
.vp-profile-activation-cta:focus { outline:2px solid #74e6d4; outline-offset:3px; }
.vp-profile-activation-cta[disabled] { opacity:.55; cursor:default; }
@media(max-width:360px) {
 .vp-profile-activation-art { width:100px; padding-right:10px; }
 .vp-profile-activation-avatars { width:90px; height:56px; }
 .vp-profile-activation-avatars > img { width:40px; height:40px; }
 .vp-profile-activation-avatars .vp-activation-owl { left:25px; }
 .vp-profile-activation-avatars .vp-activation-penguin { left:50px; }
 .vp-profile-activation-copy > p { font-size:12px; }
 .vp-profile-activation-cta { font-size:12px; }
}
.vp-quick-viewtime { position:absolute; top:20px; right:0; display:block; width:92px; margin:0; padding:0; text-align:right; }
.vp-quick-viewtime span { display:block; margin-top:2px; color:#b8b0c4; font-size:11px; line-height:15px; white-space:nowrap; }
.vp-quick-viewtime strong { display:block; color:#73e8d8; font:600 17px/23px 'Aino-Bold',Arial,sans-serif; }
.vp-quick-viewtime.vp-time-expired strong { font-size:15px; line-height:21px; }
.vp-strip-heading { position:relative; display:block; width:100%; height:36px; padding:0; }
.vp-strip-heading > strong { display:block; color:#f3f0f7; font:600 14px/36px 'Aino-Bold',Arial,sans-serif; }
.vp-strip-heading > a { position:absolute; top:0; right:0; display:block; height:36px; padding:0 0 0 8px; color:#d0c8dc; font-size:12px; line-height:36px; text-align:right; text-decoration:none; }
.vp-strip-heading > a > i { margin-left:8px; font-size:11px; }
.vp-strip-heading > a:hover { color:#74e6d4; }
.vp-profile-strip { display:block; width:100%; padding:1px 0 0; border-bottom:1px solid #393044; font-size:0; }
.vp-quick-row { position:relative; display:inline-block; width:33.333%; min-height:90px; margin:0; padding:0 3px 15px; border:0; background:transparent; color:#f3f0f7; border-radius:4px 4px 0 0; font-size:14px; text-align:center; vertical-align:top; }
.vp-quick-row:hover { background:#282133; }
.vp-quick-avatar { position:relative; display:block; width:58px; height:58px; margin:0 auto 7px; padding:3px; border:2px solid transparent; border-radius:50%; }
.vp-quick-avatar > img { display:block; width:48px; height:48px; border-radius:50%; }
.vp-is-current .vp-quick-avatar { border-color:#74e6d4; }
.vp-quick-avatar > i { position:absolute; right:-3px; bottom:-1px; width:21px; height:21px; border:1px solid #4a4058; border-radius:50%; background:#171322; color:#f3f0f7; font-size:16px; line-height:19px; text-align:center; }
.vp-profile-marker { position:absolute; bottom:5px; left:50%; width:50px; height:2px; margin-left:-25px; border-radius:2px; background:#74e6d4; }
.vp-profile-marker > i { position:absolute; top:-3px; left:50%; width:8px; height:8px; margin-left:-4px; color:#74e6d4; font-size:8px; line-height:8px; }
.vp-quick-copy { display:block; }
.vp-quick-copy > strong { display:block; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f3f0f7; font:600 14px/19px 'Aino-Bold',Arial,sans-serif; }
.vp-quick-copy > small { display:block; margin-top:2px; color:#b8b0c4; font-size:11px; line-height:17px; word-wrap:break-word; }
.vp-account-identity-avatar { display:table-cell; width:58px; height:58px; border-radius:50%; vertical-align:middle; }

/* Selected profile-strip design. All original account actions stay reachable. */
body.live-blue-header-layout .user-modal.account-dropdown.vp-profile-menu { left:auto; z-index:99999; width:360px; max-width:calc(100% - 24px); padding:20px 20px 7px; border:1px solid #494052; border-radius:12px; background:#1b1627; background:linear-gradient(180deg,#2a2039 0,#1b1627 120px); color:#f3f0f7; box-shadow:0 12px 35px rgba(0,0,0,.34); max-height:calc(100vh - 112px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.vp-profile-menu .account-dropdown-close { z-index:3; top:2px; right:2px; width:44px; height:44px; padding:0; color:#f3f0f7; }
.vp-profile-menu .account-dropdown-close > i { display:block; font-size:29px; line-height:44px; }
.vp-profile-menu .account-dropdown-nav { margin:0; padding:0; border:0; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a { position:relative; display:block; min-height:48px; padding:13px 23px 12px 37px; border-bottom:1px solid #393044; color:#f3f0f7; font-size:15px; line-height:22px; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a > i:first-child { position:absolute; top:12px; left:0; width:23px; color:#e3dded; font-size:24px; line-height:24px; text-align:center; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a > .account-nav-arrow { top:16px; right:4px; left:auto; width:auto; font-size:12px; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a small { display:block; margin:1px 0 0; color:#b8b0c4; font-size:12px; line-height:17px; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a[href="/#/myprofile"] { padding-top:12px; padding-bottom:11px; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a[href="/#/myprofile"] > i:first-child { top:20px; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a[href="/#/viewtime"]:before { content:""; position:absolute; top:12px; bottom:12px; left:-11px; width:2px; border-radius:2px; background:#74e6d4; }
body.live-blue-header-layout .vp-profile-menu .account-dropdown-nav a.account-logout { margin-top:0; border-bottom:0; }
.vp-profile-menu a:focus,.vp-profile-menu button:focus { outline:2px solid #74e6d4; outline-offset:2px; }
@media (max-width:700px) { body.live-blue-header-layout .user-modal.account-dropdown.vp-profile-menu { right:12px; max-height:calc(100vh - 140px); } }
@media (max-width:360px) {
 .vp-current-avatar { top:10px; width:48px; height:48px; }
 .vp-current-avatar.vp-current-initial { font-size:24px; line-height:46px; }
 .vp-quick-current { margin-left:58px; margin-right:80px; }
 .vp-quick-name-line > strong { font-size:16px; }
 .vp-quick-edit { width:24px; }
 .vp-quick-viewtime { width:72px; }
 .vp-quick-viewtime strong { font-size:15px; line-height:21px; }
 .vp-quick-viewtime span { font-size:9px; line-height:13px; }
}
body.live-blue-header-layout .user-modal.account-dropdown.vp-guest-menu { width:320px; padding:20px; }
.vp-guest-menu .account-dropdown-guest { padding:0; }
.vp-guest-menu .account-dropdown-guest h3 { margin:0 20px 7px 0; font:600 20px/27px 'Aino-Bold',Arial,sans-serif; color:#f3f0f7; }
.vp-guest-menu .account-dropdown-guest p { margin:0 0 16px; color:#b8b0c4; font-size:14px; line-height:21px; }
body.live-blue-header-layout .vp-guest-menu .account-button { display:inline-block; min-width:136px; min-height:40px; width:auto; margin:0; padding:9px 18px; border:1px solid #63d9c7; border-radius:5px; background:#63d9c7; color:#102c2a; font:600 15px/20px 'Aino-Bold',Arial,sans-serif; text-align:center; }

/* Four visual PIN cells share one native password input and its existing model. */
.vp-dialog.vp-dialog-unlock { max-width:300px; padding:20px; }
.vp-unlock-heading { display:block; width:100%; margin-bottom:16px; padding:0 22px 0 0; }
.vp-route .vp-unlock-heading h2 { margin:0 0 4px; font-size:20px; line-height:26px; word-wrap:break-word; }
.vp-route .vp-unlock-heading p { margin:0; font-size:14px; line-height:21px; }
.vp-pin-entry { position:relative; width:216px; height:48px; max-width:100%; margin:0 auto; }
.vp-route .vp-dialog input.vp-pin-input { position:absolute; z-index:2; top:0; left:0; width:100%; height:48px; min-height:48px; padding:0; margin:0; border:0; background:transparent; color:transparent; opacity:0; letter-spacing:0; cursor:text; }
.vp-pin-cells { display:table; table-layout:fixed; width:100%; height:48px; border-collapse:separate; border-spacing:5px 0; margin-left:-5px; pointer-events:none; }
.vp-pin-cells > span { display:table-cell; width:25%; height:48px; border:1px solid #4a4058; border-radius:5px; background:#130f1e; color:#f3f0f7; text-align:center; vertical-align:middle; }
.vp-pin-cells i { font-size:10px; }
.vp-pin-input:focus + .vp-pin-cells > span { border-color:#74e6d4; box-shadow:0 0 0 1px #74e6d4; }
.vp-dialog-unlock .vp-dialog-actions { margin-top:16px; text-align:center; white-space:nowrap; }
.vp-dialog-unlock .vp-dialog-actions .vp-link { margin-left:14px; }
.vp-dialog-unlock .vp-button { min-height:40px; padding:8px 16px; font-size:14px; line-height:22px; }
.vp-dialog-unlock .vp-link { min-height:40px; padding:8px 0; font-size:14px; line-height:22px; }

/* Only the selected child's header and account menu use tighter spacing. */
@media (min-width:1024px) {
 .blue-live-header.vp-child-header .main-nav { left:151px; right:150px; }
 .blue-live-header.vp-child-header .main-nav li:nth-child(n) { margin-right:12px; }
}
@media (max-width:1023px) {
 .blue-live-header.vp-child-header .main-nav li:nth-child(n) { margin-right:18px; }
}

@media (min-width:1600px) { .vp-picker { padding-top:100px; } .vp-picker-avatar { width:154px; height:154px; } .vp-picker-profiles { margin-top:45px; } }
@media (max-width:1250px) { .vp-profile-list { width:34%; padding-right:18px; } .vp-editor { width:66%; padding-left:20px; } .vp-list-profile { padding-right:24px; padding-left:10px; } .vp-list-profile > img { width:49px; height:49px; } .vp-list-copy { padding-left:10px; } .vp-list-copy strong { font-size:16px; } .vp-list-copy > span { font-size:12px; } .vp-list-arrow { right:10px; top:28px; } .vp-field-row > label,.vp-field-label { width:24%; } .vp-field-content { width:76%; } .vp-pin-field { padding-right:0; } .vp-route .vp-pin-field .vp-inline-action { position:static; display:block; text-align:left; margin:7px 0 0; } }
@media (max-width:950px) { .vp-management-layout,.vp-profile-list,.vp-editor { display:block; width:100%; } .vp-profile-list { padding:0 0 20px; border-bottom:1px solid #393044; margin-bottom:24px; } .vp-list-profile { display:inline-table; width:48%; margin-right:1%; vertical-align:top; } .vp-route .vp-list-note { margin-top:7px; padding-top:9px; border-top:0; } .vp-list-switch { float:right; margin-top:-44px; } .vp-editor { padding:0; border:0; } .vp-list-copy strong { max-width:140px; } .vp-editor-heading > img { width:70px; height:70px; } .vp-field-row > label,.vp-field-label { width:27%; } .vp-field-content { width:73%; } .vp-pin-field { padding-right:140px; } .vp-route .vp-pin-field .vp-inline-action { position:absolute; display:inline-block; margin:0; } }
@media (max-width:700px) { .vp-route { top:108px; overflow:auto; -webkit-overflow-scrolling:touch; } .vp-route account-panel { height:auto; min-height:100%; } .vp-picker { padding:78px 12px 30px; } .vp-back { left:20px; top:20px; } .vp-picker h1 { font-size:32px; } .vp-picker .vp-lead { font-size:16px; } .vp-picker-profiles { margin:28px 0 16px; } .vp-picker-profile { width:29%; min-width:100px; margin:0 0 16px; padding:7px 2px; } .vp-picker-avatar { width:94px; height:94px; margin-bottom:10px; padding:3px; } .vp-picker-profile strong { font-size:17px; } .vp-profile-role { font-size:12px; } .vp-picker-lock { margin-top:7px; font-size:21px; } .vp-add-profile .vp-picker-avatar > i { font-size:52px; line-height:85px; } .vp-picker-hint { max-width:300px; margin:19px auto 0 !important; font-size:13px; } .vp-picker-footnote { margin:28px 10px 0; padding-top:20px; font-size:13px; } .vp-route .vp-management h1 { font-size:29px; } .vp-route .vp-management h2 { font-size:23px; } .vp-route .vp-lead { font-size:15px; } .vp-count { margin-top:6px; font-size:12px; } .vp-page-heading { padding-bottom:18px; margin-bottom:20px; } .vp-list-profile { width:100%; margin-right:0; padding:10px 30px 10px 12px; min-height:68px; } .vp-list-profile > img { width:46px; height:46px; } .vp-list-copy strong { max-width:230px; font-size:16px; } .vp-list-copy > span { font-size:13px; } .vp-list-arrow { top:24px; right:15px; } .vp-route .vp-list-note { margin-bottom:4px; } .vp-list-switch { float:none; margin-top:0; } .vp-field-row { padding:17px 0; } .vp-field-row > label,.vp-field-label { display:block; width:auto; padding:0 0 9px; } .vp-field-content { display:block; width:auto; } .vp-avatar-field { padding-right:100px; } .vp-pin-field { padding-top:0; padding-right:0; } .vp-route .vp-pin-field .vp-inline-action { position:static; display:block; margin-top:8px; } .vp-form-actions { margin-bottom:24px; text-align:left; } .vp-form-actions .vp-link { margin-left:20px; } .vp-avatar-choice { padding:9px 4px; } .vp-avatar-choice img { width:62px; height:62px; } .vp-avatar-choice span { font-size:12px; } .vp-dialog-backdrop { padding:70px 14px 25px; } .vp-dialog { padding:28px 24px; } .vp-dialog-actions { text-align:left; } .vp-dialog-actions .vp-link { margin-left:14px; } .vp-header-avatar { width:42px; height:42px; } .vp-account-identity-avatar { width:44px; height:44px; } }
@media (max-width:360px) { .vp-picker-profile { width:31%; min-width:88px; } .vp-picker-avatar { width:82px; height:82px; } .vp-profile-role { font-size:11px; } .vp-picker-profile strong { font-size:16px; } .vp-count { float:none; display:block; margin:0 0 5px; } .vp-avatar-choice img { width:53px; height:53px; } }
@media (max-height:760px) and (min-width:701px) { .vp-picker { padding-top:47px; } .vp-picker h1 { font-size:34px; } .vp-picker-profiles { margin-top:24px; margin-bottom:10px; } .vp-picker-avatar { width:116px; height:116px; } .vp-picker-footnote { margin-top:24px; padding-top:18px; } }

/* Keep the count clear of the shared account close control. */
.vp-route .vp-count { margin-right:45px; }
@media (max-width:700px) { .vp-route .vp-count { margin-right:0; } }

/* Parent controls use the same compact rows; no modern layout API is required. */
.vp-child-activation { padding-right:0; }
.vp-child-state { display:inline-block; margin:5px 10px 0 0; padding:3px 10px; border:1px solid #61546f; border-radius:4px; color:#c6bed1; font-size:13px; line-height:21px; vertical-align:middle; }
.vp-child-state.vp-child-active { color:#8ce8d9; border-color:#39756e; background:#203934; }
.vp-route .vp-child-active-action { float:right; min-height:36px; padding:6px 14px; font-size:13px; }
.vp-child-activation > small { clear:both; padding-top:9px; }
.vp-activation-requirements { margin:11px 0 0; padding:0 0 0 18px; color:#d8c19d; font-size:13px; line-height:1.6; }
.vp-activation-requirements li { margin:0 0 3px; }
.vp-parent-pin-actions { padding-top:7px; }
.vp-parent-pin-actions .vp-link { display:block; padding:3px 0; font-size:13px; }
.vp-parent-pin-actions .vp-link i { margin-left:7px; font-size:11px; }
.vp-pin-toggle { display:block; margin:0 0 15px; font-size:14px; font-weight:normal; color:#e2dbe9; }
.vp-pin-toggle input { width:16px; height:16px; margin:0 8px 0 0; vertical-align:middle; }
.vp-route .vp-pin-required-note { margin:0 0 15px; font-size:13px; }
.vp-parent-locked { max-width:540px; padding:32px 0; }
.vp-parent-locked > i { display:block; margin-bottom:13px; color:#74e6d4; font-size:34px; }
.vp-parent-locked .vp-link { margin-left:20px; }
.vp-parent-locked > p { color:#bdb6cb; font-size:15px; }
.vp-child-view { height:100%; padding:72px 28px 35px; overflow:auto; }
.vp-child-inner { width:100%; max-width:650px; margin:0 auto; }
.vp-child-view .vp-editor-heading { padding-bottom:26px; }
.vp-child-view h1 { margin:0 0 4px; font-size:30px; line-height:1.25; }
.vp-child-view h2 { font-size:20px; margin:0 0 8px; }
.vp-child-summary { padding:24px 0; margin-bottom:22px; border-top:1px solid #393044; border-bottom:1px solid #393044; }
.vp-child-summary p { color:#bdb6cb; font-size:15px; }
.vp-child-channels { margin:19px 0 0; padding:0; list-style:none; }
.vp-child-channels li { display:inline-block; padding:5px 12px; margin:0 8px 8px 0; border:1px solid #393044; border-radius:4px; font-size:14px; color:#e2dbe9; }
.vp-child-footer { margin-top:30px; padding-top:18px; border-top:1px solid #393044; }
.vp-child-footer .vp-link { margin-right:27px; font-size:14px; }
.vp-child-footer i { margin-right:7px; }
@media (max-width:700px) {
 .vp-child-view { padding:78px 20px 30px; }
 .vp-child-view h1 { font-size:27px; }
 .vp-route .vp-child-active-action { float:none; display:block; margin-top:10px; }
 .vp-child-activation > small { padding-top:4px; }
 .vp-parent-locked { padding:20px 0; }
 .vp-parent-locked .vp-link { display:block; margin:12px 0 0; }
 .vp-child-footer .vp-link { display:block; margin:0 0 8px; }
}

body.live-blue-header-layout .account-area-trigger.vp-header-account{padding:0;overflow:hidden;background:transparent;}
body.live-blue-header-layout .vp-header-avatar{width:44px;height:44px;}

body.live-blue-header-layout .account-area-trigger.vp-header-account{padding:0;overflow:hidden;background:transparent;}
body.live-blue-header-layout .vp-header-avatar{width:44px;height:44px;}

/* Filmid: one continuous, real fanart canvas beneath the existing navigation. */
.blue-live-header .vp-movie-fanart-layer { display:none; position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; pointer-events:none; z-index:0; background:#171222; }
.blue-live-header.vp-movie-fanart-active { background:transparent; border-bottom-color:transparent; border-bottom-width:0; }
.blue-live-header.vp-movie-fanart-active .vp-movie-fanart-layer { display:block; }
.blue-live-header.vp-movie-fanart-active .header-top { z-index:1; }
.vp-movie-fanart-canvas { position:absolute; overflow:hidden; pointer-events:none; }
.vp-movie-fanart-canvas .film-feature-art { margin:0; }
.vp-movie-fanart-canvas .film-feature-shade { margin:0; }
.vp-movie-fanart-scrim { position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(10,8,17,.25); background:linear-gradient(180deg,rgba(10,8,17,.72) 0,rgba(10,8,17,.3) 62%,rgba(10,8,17,0) 100%); }
.blue-live-header.vp-movie-fanart-active .main-nav li:nth-child(n) a { color:#d6d0df; text-shadow:0 1px 3px rgba(0,0,0,.65); }
.blue-live-header.vp-movie-fanart-active .main-nav li:nth-child(n) a.active,
.blue-live-header.vp-movie-fanart-active .main-nav li:nth-child(n) a:hover,
.blue-live-header.vp-movie-fanart-active .main-nav li:nth-child(n) a:focus { color:#fff; }
.blue-live-header.vp-movie-fanart-active .main-nav { border-top-color:rgba(238,231,247,.1); }
.film-child-default-genres { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:8px 0 22px; color:#b9b1c6; font:13px/20px Aino,Arial,sans-serif; }
.film-child-default-genres .film-child-genres-label { margin-right:3px; }
.film-child-default-genres .film-child-genre { display:inline-block; padding:3px 9px; margin:0 3px 0 0; border:1px solid #3e354d; border-radius:14px; color:#d4d0df; background:rgba(98,219,201,.045); }
.kids-catalogue .vp-kids-feature { margin-left:0; margin-right:0; }
.kids-catalogue .vp-kids-feature .film-feature-content { padding-left:26px; padding-right:26px; }
@media(max-width:1024px) {
  .blue-live-header.vp-movie-fanart-active .main-nav { background:rgba(13,10,22,.64); }
  .blue-live-header.vp-movie-fanart-active .main-nav li:nth-child(n) a { color:#f0edf5; text-shadow:0 1px 3px rgba(0,0,0,.75); }
  .blue-live-header.vp-movie-fanart-active .main-nav li:nth-child(n) a.active { color:#fff; }
}
@media(max-width:1023px) {
  .kids-catalogue .vp-kids-feature .film-feature-content { padding-left:24px; padding-right:24px; }
}
@media(max-width:599px) {
  .film-child-default-genres { margin-top:2px; margin-bottom:20px; font-size:12px; }
  .film-child-default-genres .film-child-genres-label { width:100%; }
}

/* Shows, including children's programmes, share the film detail composition.
   Keep their existing actions, progress and recording list in the same flow. */
#movies-modal-parent.film-catalogue,
#movies-modal-parent.kids-catalogue,
#movies-modal-parent.film-catalogue #movie-shows-list-cont,
#movies-modal-parent.kids-catalogue #movie-shows-list-cont,
#movies-modal-parent.kids-catalogue #series-shows-list-cont,
#recording-program-details.film-detail-view,
#recording-program-details.show-detail-view { overscroll-behavior-y:none; }
#recording-program-details.film-detail-view .film-detail-content { width:100%; max-width:none; margin:0; padding:24px 48px 40px; box-sizing:border-box; }
#recording-program-details.show-detail-view .show-detail-content { max-width:none; padding:0 0 110px; }
#recording-program-details.show-detail-view .show-detail-hero { min-height:400px; margin:0; }
#recording-program-details.show-detail-view .show-detail-atmosphere { display:none; }
#recording-program-details.show-detail-view .show-detail-art { left:auto; right:0; width:75%; background-position:center top; }
#recording-program-details.show-detail-view .show-detail-art-shade {
  background:linear-gradient(0deg,#140d20 0%,rgba(20,13,32,.78) 10%,rgba(20,13,32,0) 48%),linear-gradient(90deg,#140d20 0%,#140d20 26%,rgba(20,13,32,.98) 34%,rgba(20,13,32,.86) 43%,rgba(20,13,32,.6) 54%,rgba(20,13,32,.2) 67%,rgba(20,13,32,0) 82%);
}
#recording-program-details.show-detail-view .show-detail-navigation { left:0; right:0; width:100%; max-width:none; margin:0; padding:0 48px; }
#recording-program-details.show-detail-view .show-detail-close { min-width:44px; min-height:44px; border-radius:6px; background:rgba(20,13,32,.68); color:#7be6d5; }
#recording-program-details.show-detail-view .show-detail-close:hover,
#recording-program-details.show-detail-view .show-detail-close:focus { background:rgba(20,13,32,.88); color:#a0f0e3; }
#recording-program-details.show-detail-view .show-detail-info { width:100%; max-width:none; margin:0; padding:80px 48px 28px; }
#recording-program-details.show-detail-view .show-detail-info > * { max-width:640px; }
#recording-program-details.show-detail-view .show-detail-info h1 { max-width:700px; font-family:Aino,Arial,sans-serif; font-size:40px; font-weight:700; line-height:1.12; }
#recording-program-details.show-detail-view .show-detail-actions { margin:0 0 18px; }
#recording-program-details.show-detail-view .show-detail-button { -webkit-flex:0 1 auto; -ms-flex:0 1 auto; flex:0 1 auto; min-width:190px; min-height:46px; margin:0 12px 8px 0; padding:11px 23px; font-size:15px; }
#recording-program-details.show-detail-view .show-detail-primary { min-width:210px; }
#recording-program-details.show-detail-view .show-detail-restart { -webkit-flex:0 0 100%; -ms-flex:0 0 100%; flex:0 0 100%; margin:0; text-align:left; }
#recording-program-details.show-detail-view .show-detail-recordings { width:100%; max-width:none; margin:0; padding:0 48px; }
#recording-program-details.show-detail-view .show-detail-no-wide { min-height:0; }
#recording-program-details.show-detail-view .show-detail-no-wide .show-detail-art,
#recording-program-details.show-detail-view .show-detail-no-wide .show-detail-art-shade { display:none; }
@media(max-width:1023px) and (min-width:768px) {
  #recording-program-details.film-detail-view .film-detail-content { padding:20px 24px 35px; }
  #recording-program-details.show-detail-view .show-detail-info { padding-left:24px; padding-right:24px; }
  #recording-program-details.show-detail-view .show-detail-info > * { max-width:60%; }
  #recording-program-details.show-detail-view .show-detail-info h1 { max-width:65%; font-size:34px; }
  #recording-program-details.show-detail-view .show-detail-navigation,
  #recording-program-details.show-detail-view .show-detail-recordings { padding-left:24px; padding-right:24px; }
}
@media(max-width:767px) {
  #recording-program-details.show-detail-view .show-detail-hero { min-height:0; }
  #recording-program-details.show-detail-view .show-detail-art { width:100%; height:230px; bottom:auto; }
  #recording-program-details.show-detail-view .show-detail-art-shade { height:270px; bottom:auto; background:linear-gradient(0deg,#140d20 0%,rgba(20,13,32,.65) 20%,rgba(20,13,32,0) 65%),linear-gradient(180deg,rgba(20,13,32,.35) 0%,rgba(20,13,32,0) 28%); }
  #recording-program-details.film-detail-view .film-detail-content { padding:14px 24px 28px; }
  #recording-program-details.show-detail-view .show-detail-navigation { padding:0 24px; }
  #recording-program-details.show-detail-view .show-detail-info { padding:232px 24px 24px; }
  #recording-program-details.show-detail-view .show-detail-info > * { max-width:none; }
  #recording-program-details.show-detail-view .show-detail-info h1 { max-width:none; font-size:29px; line-height:34px; }
  #recording-program-details.show-detail-view .show-detail-button { -webkit-flex:0 1 100%; -ms-flex:0 1 100%; flex:0 1 100%; width:100%; margin-right:0; font-size:14px; }
  #recording-program-details.show-detail-view .show-detail-recordings { padding:0 46px 0 24px; }
  #recording-program-details.show-detail-view .show-detail-no-wide .show-detail-info { padding-top:68px; }
}

/* Detail recommendations retain their native scrolling/arrows, with lighter
   poster cards. Catalogue card dimensions and their actions are unchanged. */
#recording-program-details.film-detail-view .film-related-posters { margin:-4px -8px 0; padding:8px 8px 16px; }
#recording-program-details.film-detail-view .film-related-card { width:150px; margin-right:18px; border:0; border-radius:8px; background:transparent; box-shadow:none; transition:transform .18s ease; }
#recording-program-details.film-detail-view .film-related-poster { height:0; padding-top:150%; border-radius:8px; overflow:hidden; background-color:#21182c; }
#recording-program-details.film-detail-view .film-related-card .film-card-title { min-height:44px; height:44px; max-height:44px; padding:8px 0 0; background:transparent; font-size:14px; line-height:18px; }
#recording-program-details.film-detail-view .film-related-card .film-card-title > span { display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:36px; overflow:hidden; }
#recording-program-details.film-detail-view .film-related-card:hover,
#recording-program-details.film-detail-view .film-related-card:focus { border:0; background:transparent; -webkit-transform:translateY(-2px); -ms-transform:translateY(-2px); transform:translateY(-2px); }
#recording-program-details.film-detail-view .film-related-card:focus { outline:2px solid #62dbc9; outline-offset:4px; }
#recording-program-details.film-detail-view .film-expiry { left:6px; right:6px; bottom:6px; padding:2px 4px; border-radius:3px; background:rgba(12,9,19,.8); font-size:11px; line-height:16px; }

/* The brand label is yellow; the numeric score stays light beside it. */
.film-catalogue .vp-imdb-label,
.kids-catalogue .vp-imdb-label,
.film-more-view .vp-imdb-label,
#recording-program-details .vp-imdb-label { display:inline-block; margin:0; padding:1px 4px; border:0; border-radius:3px; background:#f5c518; color:#171717; font:700 11px/15px Arial,sans-serif; letter-spacing:-.25px; vertical-align:middle; text-shadow:none; }
.film-catalogue .vp-imdb-score,
.kids-catalogue .vp-imdb-score,
.film-more-view .vp-imdb-score,
#recording-program-details .vp-imdb-score { display:inline-block; margin:0 0 0 5px; padding:0; border:0; background:transparent; color:#eeeaf5; font:inherit; font-weight:500; vertical-align:middle; text-shadow:none; }
.film-catalogue .vp-imdb-label:before,
.film-catalogue .vp-imdb-score:before,
.kids-catalogue .vp-imdb-label:before,
.kids-catalogue .vp-imdb-score:before,
#recording-program-details .vp-imdb-label:before,
#recording-program-details .vp-imdb-score:before { content:none; }
#movies-modal-parent .movie-imdb-rating,
#program-search-modal .movie-imdb-rating,
#recording-program-details .film-related-poster .film-rating { width:auto; min-width:0; padding:3px 4px; border:0; border-radius:4px; background:rgba(12,9,19,.78); color:#eeeaf5; font:400 12px/17px Aino,Arial,sans-serif; white-space:nowrap; }
#recording-program-details .film-meta a { display:inline-block; color:#eeeaf5; text-decoration:none; }
#recording-program-details .film-meta a:focus { outline:2px solid #62dbc9; outline-offset:3px; }
@media(max-width:767px) {
  #recording-program-details.film-detail-view .film-related-card { width:132px; margin-right:14px; }
  #recording-program-details.film-detail-view .film-related-card .film-card-title { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  #recording-program-details.film-detail-view .film-related-card { transition:none; }
}

/* Phone navigation stays solid; the artwork begins below the existing 104px
   header. Keep route/player offsets and the 44px control hit areas unchanged. */
@media(max-width:767px) {
  .blue-live-header.header,
  .blue-live-header.header.vp-movie-fanart-active { background:#171222; border-bottom:1px solid #30283f; }
  .blue-live-header .vp-movie-fanart-layer { display:none!important; }
  .blue-live-header.header .main-nav { padding-left:12px; padding-right:12px; background:#171222; }
  .blue-live-header.header .main-nav li:nth-child(n) { margin-right:16px; }
  .blue-live-header.header .main-nav li:nth-child(n):last-child { margin-right:0; }
  .blue-live-header.header .logo.header-menu-elem { width:118px; }
  .blue-live-header.header .blue-logo-word { font-size:22px; }
  .blue-live-header.header .header-top .nav-right.header-menu-elem { right:12px; width:132px; }
  .blue-live-header.header .nav-right .search-nav-action { right:88px; }
  .blue-live-header.header .nav-right .account-area-trigger { right:44px; padding:0; background:transparent; }
  .blue-live-header.header .nav-right .nav-trigger { right:0; }
  .blue-live-header.header .nav-right .search-nav-action,
  .blue-live-header.header .nav-right .nav-trigger { background:transparent; }
  .blue-live-header.header .nav-right .search-nav-action:before,
  .blue-live-header.header .nav-right .nav-trigger:before { content:''; position:absolute; top:4px; left:4px; width:36px; height:36px; border-radius:8px; background:#2b2437; }
  .blue-live-header.header .nav-right .nav-right-action .icon { position:relative; z-index:1; font-size:25px; }
  body.live-blue-header-layout .blue-live-header .vp-header-avatar { width:36px; height:36px; margin:4px; }
  body.live-blue-header-layout .blue-live-header .account-area-trigger .vp-header-initial,
  body.live-blue-header-layout .blue-live-header .account-area-trigger .blue-account-initials { width:36px; height:36px; margin:4px; border-radius:50%; background:#62dbc9; color:#12342d; font-size:14px; line-height:36px; }
  #recording-program-details.film-detail-view .film-detail-backdrop.wrapper { top:0; height:230px; }
}

/* Desktop account menu follows the avatar: 20px top + 44px button + 10px gap. */
@media(min-width:1024px) {
  body.live-blue-header-layout #header-user-menu.user-modal.account-dropdown { top:74px; right:24px; }
}
@media(min-width:1024px) and (max-width:1279px) {
  body.live-blue-header-layout #header-user-menu.user-modal.account-dropdown { right:12px; }
}

/* Short desktop viewports keep the recommendation shelf in view by removing
   spare gaps, while retaining full text and the existing Read More controls. */
@media(min-width:1024px) and (max-height:900px) {
  #recording-program-details.film-detail-view .film-detail-content { padding-top:16px; }
  #recording-program-details.film-detail-view .film-detail-information { margin-top:8px; margin-bottom:12px; }
  #recording-program-details.film-detail-view .film-detail-information h1 { margin-bottom:8px; }
  #recording-program-details.film-detail-view .film-progress { margin-bottom:12px; }
  #recording-program-details.film-detail-view .film-detail-actions { margin-bottom:12px; }
  #recording-program-details.film-detail-view .film-description { margin-bottom:10px; }
  #recording-program-details.film-detail-view .film-related-heading { margin-bottom:4px; }
  #recording-program-details.show-detail-view .show-detail-hero { min-height:360px; }
  #recording-program-details.show-detail-view .show-detail-no-wide { min-height:0; }
  #recording-program-details.show-detail-view .show-detail-info { padding-top:68px; padding-bottom:16px; }
  #recording-program-details.show-detail-view .show-detail-info h1 { margin-bottom:8px; }
  #recording-program-details.show-detail-view .show-detail-source { margin-bottom:8px; }
  #recording-program-details.show-detail-view .show-detail-meta { margin-bottom:8px; }
  #recording-program-details.show-detail-view .show-detail-genres { margin-bottom:8px; }
  #recording-program-details.show-detail-view .show-detail-progress { margin-bottom:8px; }
  #recording-program-details.show-detail-view .show-detail-actions { margin-bottom:10px; }
}

/* Pehme kinovari: scoped presentation layer, loaded after fanart-header.css.
   Plain block/inline-block layout and fixed-height text remain usable without
   CSS Grid, aspect-ratio, object-fit, line-clamp or custom properties. */

/* Film shelves and related films grow. Shows, Kids and shared More grids keep
   their existing widths, gutters and image ratios. */
#movies-modal-parent.film-catalogue.vp-poster-cards .movie-item {
  width:190px; min-width:190px; max-width:190px; margin-right:18px;
}
#recording-program-details.vp-poster-details.film-detail-view .film-related-card {
  position:relative; width:190px; margin-right:18px; overflow:hidden; border-radius:9px;
}

/* Existing caption elements become overlays; original links stay in place. */
.vp-poster-cards .movie-item-hover,
.vp-poster-cards .show-item-hover {
  position:relative; overflow:hidden; border-radius:9px; background:#171120;
}
.vp-poster-cards .movie-item-img,
.vp-poster-cards .show-item-img { overflow:hidden!important; border-radius:8px; }
.vp-poster-cards .movie-item-hover:after,
.vp-poster-cards .show-item-hover:after,
#recording-program-details.vp-poster-details .film-related-poster:after {
  content:''; display:block; position:absolute; left:0; right:0; bottom:0; height:62%;
  z-index:1; pointer-events:none; background:rgba(11,8,18,.66);
  background:-webkit-linear-gradient(top,rgba(11,8,18,0) 0%,rgba(11,8,18,.45) 45%,rgba(11,8,18,.97) 100%);
  background:linear-gradient(to bottom,rgba(11,8,18,0) 0%,rgba(11,8,18,.45) 45%,rgba(11,8,18,.97) 100%);
}
.vp-poster-cards .movie-item-inner,
.vp-poster-cards .movie-item-inner-main,
.vp-poster-cards .show-item-inner {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  min-height:0!important; height:auto!important; max-height:none!important;
  margin:0!important; padding:0!important; border:0!important; background:transparent!important;
}
.vp-poster-cards .movie-item h3,
.vp-poster-cards .show-item h3 {
  min-height:0!important; height:auto!important; max-height:none!important;
  margin:0!important; padding:28px 13px 13px!important;
  color:#fff; font:600 16px/20px Aino,Arial,sans-serif;
  white-space:normal; overflow:hidden; text-align:left; text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.vp-poster-cards .movie-item h3 a,
.vp-poster-cards .show-item h3 a {
  display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  max-height:40px; overflow:hidden; color:#fff; font:inherit; white-space:normal; text-align:left;
}
@media(min-width:768px) {
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-item h3 {
    padding:28px 13px 13px!important; font:600 16px/20px Aino,Arial,sans-serif!important;
  }
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-item h3 a {
    font:inherit!important; white-space:normal!important; max-height:40px!important;
  }
}
.vp-poster-cards .poster-fallback-title { display:none!important; }
.vp-poster-cards .movie-item-inner-cont {
  position:absolute; left:0; bottom:0; height:4px!important; max-width:100%; z-index:5;
}
.vp-poster-cards .movie-item-img .playthis,
.vp-poster-cards .show-item-img .playthis { z-index:2; }
.vp-poster-cards .movie-imdb-rating,
.vp-poster-cards .movie-more-imdb-rating,
.vp-poster-cards .film-rating,
#recording-program-details.vp-poster-details .film-related-poster .film-rating {
  position:absolute; top:8px; right:8px; left:auto; bottom:auto; z-index:4;
  width:auto; min-width:0; height:auto; margin:0; padding:3px 5px; border:0; border-radius:4px;
  background:rgba(12,9,19,.83); color:#f4f1f8; font:400 12px/16px Aino,Arial,sans-serif; white-space:nowrap;
}
.vp-poster-cards .movie-expiration,
#recording-program-details.vp-poster-details .film-expiry {
  top:8px; bottom:auto; left:8px; right:auto; max-width:65%; z-index:4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#recording-program-details.vp-poster-details .film-related-poster { position:relative; }
#recording-program-details.vp-poster-details.film-detail-view .film-related-card .film-card-title {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  min-height:0; height:auto; max-height:none; padding:28px 13px 13px; background:transparent;
  color:#fff; font:600 16px/20px Aino,Arial,sans-serif; text-align:left; text-shadow:0 1px 3px rgba(0,0,0,.8);
}
#recording-program-details.vp-poster-details.film-detail-view .film-card-title > span {
  display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  max-height:40px; overflow:hidden; white-space:normal;
}

/* Existing film DTO release year, shown only when its value is valid. It sits
   inside the caption/gradient; no extra footer or card dimensions are needed. */
.vp-poster-cards .vp-card-year,
#recording-program-details.vp-poster-details.film-detail-view .film-card-title > .vp-card-year {
  display:block; max-height:16px; margin:4px 0 0; padding:0;
  color:#c3bbce; font:400 12px/16px Aino,Arial,sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Shows use the same image size as before. Caption overlays the existing image. */
#channel-recording-modal.vp-poster-cards .shows-card-button { position:relative; border-radius:8px; }
#channel-recording-modal.vp-poster-cards .shows-card-caption {
  position:absolute; left:0; right:0; bottom:0; height:auto; min-height:0; z-index:3;
  padding:30px 12px 12px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8);
  background:rgba(11,8,18,.72);
  background:-webkit-linear-gradient(top,rgba(11,8,18,0),rgba(11,8,18,.97));
  background:linear-gradient(to bottom,rgba(11,8,18,0),rgba(11,8,18,.97));
}
#channel-recording-modal.vp-poster-cards .shows-card-title {
  font-weight:600; color:#fff; max-height:40px; line-height:20px;
}
#channel-recording-modal.vp-poster-cards .show-item-hover:after { display:none; }
#channel-recording-modal.vp-poster-cards .shows-card-play {
  top:36%; bottom:auto; left:50%; right:auto; margin-left:-17px; z-index:4;
}
#channel-recording-modal.vp-poster-cards .shows-card-progress { z-index:5; }
#channel-recording-modal.vp-poster-cards .show-card-img-channel-name { z-index:4; }

/* Otse fills its existing content pane rather than reserving a blank column.
   This class is added only to the overview, never to channel guide/player panes. */
.vp-live-overview #on-air-container.show-card-columns {
  display:block!important; width:100%!important; max-width:none!important; margin:0;
  padding:12px 12px 48px; box-sizing:border-box; font-size:0; white-space:normal;
}
.vp-live-overview #on-air-container .show-card {
  display:inline-block; float:none; vertical-align:top; position:relative;
  width:25%; min-width:0; max-width:none; height:auto; min-height:0;
  margin:0; padding:10px; box-sizing:border-box; border-radius:0; font-size:14px;
}
.vp-live-overview #on-air-container .show-card .show-item-hover {
  position:relative; display:block; height:auto; margin:0; padding:0;
  overflow:hidden; border:2px solid transparent; border-radius:10px; background:#100c1a;
  -webkit-transform:none; -ms-transform:none; transform:none;
  -webkit-transition:-webkit-transform .16s ease-out,box-shadow .16s ease-out,border-color .16s ease-out;
  transition:transform .16s ease-out,box-shadow .16s ease-out,border-color .16s ease-out;
}
.vp-live-overview #on-air-container .show-card .show-item-hover:hover {
  border-color:#62dbc9;
}
@media(min-width:768px) {
  .vp-live-overview #on-air-container .show-card .show-item-hover {
    width:94.5%; margin:0 auto; box-sizing:border-box;
  }
  .vp-live-overview #on-air-container .show-card:hover { z-index:20; }
  .vp-live-overview #on-air-container .show-card .show-item-hover:hover {
    -webkit-transform:translateY(-3px) scale(1.035);
    -ms-transform:translateY(-3px) scale(1.035);
    transform:translateY(-3px) scale(1.035);
    box-shadow:0 12px 24px rgba(0,0,0,.44);
  }
}
@media(prefers-reduced-motion:reduce) {
  .vp-live-overview #on-air-container .show-card .show-item-hover {
    -webkit-transition:none; transition:none;
  }
}
.vp-live-overview #on-air-container .show-card-img {
  position:relative; width:100%; height:0; padding-top:75%; margin:0;
  overflow:hidden; opacity:1; border-radius:8px;
}
.vp-live-overview #on-air-container .show-card-show-img {
  position:absolute; top:0; left:50%; width:auto; height:100%; max-width:none;
  margin:0; opacity:1!important; border-radius:0;
  -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
@supports(object-fit:cover) {
  .vp-live-overview #on-air-container .show-card-show-img {
    left:0; width:100%; height:100%; object-fit:cover;
    -webkit-transform:none; -ms-transform:none; transform:none;
  }
}
.vp-live-overview #on-air-container .show-card-body {
  position:absolute; left:0; right:0; bottom:4px; z-index:3; margin:0;
  padding:24px 13px 12px; border-radius:0; color:#fff; white-space:normal; pointer-events:none;
  font:400 13px/18px Aino,Arial,sans-serif; background:rgba(11,8,18,.72);
  background:-webkit-linear-gradient(top,rgba(11,8,18,0),rgba(11,8,18,.48) 32%,rgba(11,8,18,.94));
  background:linear-gradient(to bottom,rgba(11,8,18,0),rgba(11,8,18,.48) 32%,rgba(11,8,18,.94));
}
.vp-live-overview #on-air-container .show-card-body .row { display:block; margin:0; }
.vp-live-overview #on-air-container .show-card-body .col {
  display:block; width:100%; max-width:none; min-width:0; margin:0; padding:0;
}
.vp-live-overview #on-air-container .show-card-title {
  display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  max-height:40px; overflow:hidden; margin:2px 0 5px; color:#fff;
  font:600 16px/20px Aino,Arial,sans-serif; white-space:normal; text-shadow:0 1px 3px #000;
}
.vp-live-overview #on-air-container .show-card-time { color:#ddd7e7; font-size:12px; }
.vp-live-overview #on-air-container .show-card-title-next { color:#c5bdcf; font-size:12px; }
.vp-live-overview #on-air-container .show-card-body .row + .row {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:18px;
}
.vp-live-overview #on-air-container .show-card-img-channel-name {
  top:10px; left:10px; right:auto; z-index:5; max-width:62%; margin:0; padding:3px 7px;
  border-radius:4px; background:rgba(12,9,19,.76); color:#fff; opacity:1;
  font:400 12px/16px Aino,Arial,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vp-live-overview #on-air-container .show-card-img-channel-logo {
  top:10px; right:10px; left:auto; width:auto; height:auto; max-width:20%; max-height:34px;
  z-index:5; opacity:1!important;
}
.vp-live-overview #on-air-container .program-process-small {
  position:absolute; left:0; right:0; bottom:0; z-index:5; height:4px; margin:0;
  background:#494154; opacity:1!important;
}
.vp-live-overview #on-air-container .program-process-small > span { display:block; height:4px; background:#efbd5d; }
.vp-live-overview #on-air-container .playthis {
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:4; opacity:1!important; background:transparent!important;
}
.vp-live-overview #on-air-container .playthis:before {
  top:35%; left:50%; right:auto; bottom:auto; width:50px; height:50px; margin:-25px 0 0 -25px;
  padding:0 0 0 3px; border:2px solid #76e6d4; border-radius:50%;
  background:rgba(10,8,15,.48); color:#76e6d4; font-size:27px; line-height:46px;
  opacity:1; text-indent:0; box-sizing:border-box;
}
.vp-live-overview #on-air-container .playthis:focus,
.vp-poster-cards .playthis:focus,
.vp-poster-cards .inner-link:focus,
.vp-poster-details .film-related-card:focus { outline:2px solid #62dbc9; outline-offset:-2px; }

@media(min-width:768px) and (max-width:1279px) {
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-item { width:176px; min-width:176px; max-width:176px; }
  #recording-program-details.vp-poster-details.film-detail-view .film-related-card { width:176px; }
}
@media(min-width:1200px) and (max-width:1599px) {
  .vp-live-overview #on-air-container .show-card { width:33.3333%; }
}
/* Desktop content width is viewport minus the existing 190px channel sidebar
   and 24px container padding. Keep four generous cards at 1680px; the 4:3 image
   is then about 347x260px after gutters. Add columns on wider displays, keeping
   most desktop slots around 340-430px rather than growing four cards forever.
   Fractions round down; border-box gutters and non-scaling focus/hover keep the
   last column within the pane even with a visible vertical scrollbar. */
@media(min-width:2020px) {
  .vp-live-overview #on-air-container .show-card { width:20%; }
}
@media(min-width:2400px) {
  .vp-live-overview #on-air-container .show-card { width:16.6666%; }
}
@media(min-width:2800px) {
  .vp-live-overview #on-air-container .show-card { width:14.2857%; }
}
@media(min-width:3200px) {
  .vp-live-overview #on-air-container .show-card { width:12.5%; }
}
@media(min-width:3600px) {
  .vp-live-overview #on-air-container .show-card { width:11.1111%; }
}
@media(min-width:4000px) {
  .vp-live-overview #on-air-container .show-card { width:10%; }
}
@media(min-width:4800px) {
  .vp-live-overview #on-air-container .show-card { width:8.3333%; }
}
@media(min-width:5600px) {
  .vp-live-overview #on-air-container .show-card { width:7.1428%; }
}
@media(min-width:6400px) {
  .vp-live-overview #on-air-container .show-card { width:6.25%; }
}
@media(min-width:7200px) {
  .vp-live-overview #on-air-container .show-card { width:5.5555%; }
}
@media(min-width:600px) and (max-width:1199px) {
  .vp-live-overview #on-air-container .show-card { width:50%; }
}
@media(max-width:767px) {
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-item { width:158px; min-width:158px; max-width:158px; margin-right:14px; }
  #recording-program-details.vp-poster-details.film-detail-view .film-related-card { width:158px; margin-right:14px; }
  .vp-poster-cards .movie-item h3,
  .vp-poster-cards .show-item h3,
  #recording-program-details.vp-poster-details.film-detail-view .film-related-card .film-card-title { padding:24px 10px 10px!important; font-size:14px; line-height:18px; }
  .vp-poster-cards .movie-item h3 a,
  .vp-poster-cards .show-item h3 a,
  #recording-program-details.vp-poster-details.film-detail-view .film-card-title > span { max-height:36px; }
  #channel-recording-modal.vp-poster-cards .shows-card-caption { padding:25px 9px 9px; }
  #channel-recording-modal.vp-poster-cards .shows-card-title { max-height:36px; font-size:12px; line-height:18px; }
  .vp-live-overview #on-air-container.show-card-columns { padding:6px 6px 36px; }
  .vp-live-overview #on-air-container .show-card { padding:6px; }
}
@media(max-width:599px) {
  .vp-live-overview #on-air-container .show-card { width:100%; }
}

/* Compact the two catalogue views after their titles moved onto the artwork.
   Load after poster-cards.css. No live-channel, series or detail selectors.
   The existing shelf remains the horizontal scroller and owns its full width. */
#movies-modal-parent.film-catalogue.vp-poster-cards .movie-list-right-wrapper,
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper {
  padding-top:0; margin-top:0; margin-bottom:12px;
}
#movies-modal-parent.film-catalogue.vp-poster-cards .movie-genres,
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-genres {
  display:block; height:auto; min-height:30px; margin:0;
  padding-top:0; padding-bottom:0; line-height:30px; box-sizing:border-box;
}
#movies-modal-parent.film-catalogue.vp-poster-cards .movie-genres-title,
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-genres-title {
  padding-left:0;
}
#movies-modal-parent.film-catalogue.vp-poster-cards .movie-scroll,
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-scroll {
  display:block; height:auto!important; max-height:none!important;
  padding-top:16px; padding-bottom:18px; overflow-x:auto; overflow-y:hidden;
  white-space:nowrap; box-sizing:border-box; -webkit-overflow-scrolling:touch;
}
#movies-modal-parent.film-catalogue.vp-poster-cards .movie-scroll {
  margin:0 -18px; padding-left:18px; padding-right:18px;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-scroll {
  width:100%; max-width:100%; margin:0; padding-left:18px; padding-right:18px;
}

/* Estonian-language shelf: 155x200 becomes approximately 184x238. The image
   ratio is retained, both dimensions grow and the final card remains in the
   same scrollable element used by the existing 1024px arrow action. */
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper .movie-item {
  display:inline-block; float:none; vertical-align:top; position:relative; top:0;
  width:184px; min-width:184px; max-width:184px;
  height:auto!important; min-height:0!important; max-height:none!important;
  padding:0; margin:0 18px 0 0; white-space:normal; box-sizing:border-box;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper .movie-item-img {
  position:relative; width:100%; height:0!important; padding-top:129.0323%;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper .movie-item-img .main-img,
#movies-modal-parent.kids-catalogue.vp-poster-cards .shows-list-right-wrapper .movie-item-img .main-img {
  position:absolute; top:50%; left:50%; display:block;
  width:auto!important; height:auto!important;
  max-width:100%!important; max-height:100%!important;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
/* Proportional contain is the baseline for engines without object-fit.
   Supporting engines retain the current edge-to-edge cover composition. */
@supports(object-fit:cover) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper .movie-item-img .main-img,
  #movies-modal-parent.kids-catalogue.vp-poster-cards .shows-list-right-wrapper .movie-item-img .main-img {
    top:0; left:0; width:100%!important; height:100%!important;
    max-width:100%!important; max-height:none!important;
    -o-object-fit:cover; object-fit:cover;
    -webkit-transform:none; -ms-transform:none; transform:none;
  }
}

/* The Kids all-programme grid used 300px row slots around 200px artwork.
   Size each slot from its image instead, so removing a footer also removes
   that footer's former empty row space. Floats/percentage widths are the
   baseline layout; no Grid, flex-gap or aspect-ratio support is required. */
#movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont {
  float:none; width:100%; height:auto!important; min-height:0!important;
  max-height:none!important; margin-top:0!important; box-sizing:border-box;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .shows-list-right-wrapper {
  display:block!important; width:100%; height:auto!important; min-height:0;
  padding:0 16px 18px!important; margin:0; box-sizing:border-box;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .shows-list-right-wrapper:after {
  content:''; display:block; clear:both;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .movie-genres {
  clear:both; width:100%; margin:0 0 8px; padding:0 10px;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
  display:block; float:left; position:relative; top:0; vertical-align:top;
  width:50%!important; min-width:0!important; max-width:50%!important;
  height:auto!important; min-height:0!important; max-height:none!important;
  margin:0 0 8px; padding:8px 10px; box-sizing:border-box;
}
#movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item-img.movie-item-img {
  position:relative; width:100%; height:0!important; padding-top:110%;
}

@media(min-width:600px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:33.3333%!important; max-width:33.3333%!important;
  }
}
@media(min-width:768px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:25%!important; max-width:25%!important;
  }
}
@media(min-width:1024px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:20%!important; max-width:20%!important;
  }
}
@media(min-width:1440px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:16.6666%!important; max-width:16.6666%!important;
  }
}
@media(min-width:1600px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:14.2857%!important; max-width:14.2857%!important;
  }
}
@media(min-width:2000px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:12.5%!important; max-width:12.5%!important;
  }
}
@media(min-width:2400px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:11.1111%!important; max-width:11.1111%!important;
  }
}
@media(min-width:2800px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:10%!important; max-width:10%!important;
  }
}
@media(min-width:3200px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:8.3333%!important; max-width:8.3333%!important;
  }
}
@media(min-width:4000px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    width:7.1428%!important; max-width:7.1428%!important;
  }
}

@media(min-width:768px) and (max-width:1279px) {
  #movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper .movie-item {
    width:176px; min-width:176px; max-width:176px;
  }
}
@media(max-width:767px) {
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-list-right-wrapper,
  #movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper { margin-bottom:8px; }
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-genres,
  #movies-modal-parent.kids-catalogue.vp-poster-cards .movie-genres { min-height:28px; line-height:28px; }
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-scroll,
  #movies-modal-parent.kids-catalogue.vp-poster-cards .movie-scroll { padding:12px 12px 14px; }
  #movies-modal-parent.film-catalogue.vp-poster-cards .movie-scroll { margin:0 -12px; }
  #movies-modal-parent.kids-catalogue.vp-poster-cards .movie-list-right-wrapper .movie-item {
    width:158px; min-width:158px; max-width:158px; margin-right:14px;
  }
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .shows-list-right-wrapper {
    padding-left:8px!important; padding-right:8px!important;
  }
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .movie-genres { padding-left:6px; padding-right:6px; margin-bottom:6px; }
  #movies-modal-parent.kids-catalogue.vp-poster-cards #series-shows-list-cont .show-item.movie-item {
    padding:6px; margin-bottom:6px;
  }
}

/* Selected poster + information composition. Load after poster-cards.css.
   Film/show detail branches share the style; artwork/header logic is retained. */
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-content {
  width:100%; max-width:none; margin:0; padding:22px 48px 32px; box-sizing:border-box;
  font-family:Aino,Arial,sans-serif;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-back {
  display:inline-block; min-height:32px; margin:0 0 18px; padding:0; font-size:14px; line-height:32px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-hero {
  position:relative; min-height:420px; margin:0 0 8px; padding:0;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-poster {
  position:absolute; top:0; left:0; width:280px; height:420px; margin:0;
  overflow:hidden; border:1px solid rgba(201,195,216,.25); border-radius:7px;
  background:#1b1427; box-shadow:0 8px 24px rgba(0,0,0,.28);
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-poster img {
  position:absolute; top:0; left:50%; display:block; width:auto; max-width:none; height:100%; margin:0;
  -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
@supports(object-fit:cover) {
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-poster img {
    left:0; width:100%; height:100%; object-fit:cover;
    -webkit-transform:none; -ms-transform:none; transform:none;
  }
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-body {
  position:relative; margin:0 0 0 328px; max-width:760px; padding:36px 0 0;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-information {
  width:auto; max-width:680px; margin:0 0 16px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-information h1 {
  max-width:none; margin:0 0 14px; color:#f4f1f8; font-family:Aino,Arial,sans-serif;
  font-size:52px; font-weight:700; line-height:1.09; overflow-wrap:break-word; word-wrap:break-word;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-summary {
  display:block; max-width:100%;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-basics { display:block; white-space:normal; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-meta {
  display:inline; margin:0; color:#c7bfd3; font-size:16px; line-height:23px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-meta > span { margin-right:10px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-meta > span + span { padding-left:10px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-genres {
  display:inline; margin:0; padding:0; color:#c7bfd3; font-size:16px; line-height:23px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-genres > span { margin-right:12px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-channel { display:block; margin-top:7px; padding-left:0; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-source { display:block; margin:0; font-size:14px; line-height:21px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-source > img { display:none; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-source-text { display:block; padding:0; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-source-name { display:inline; margin-right:8px; color:#c7bfd3; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-source-date { display:inline; color:#bdb4cb; font-size:13px; line-height:21px; white-space:normal; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-source-date span { display:inline-block; margin-left:8px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-description {
  width:540px; max-width:100%; margin:0 0 14px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-description {
  display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  max-height:72px; margin:0; overflow:hidden; color:#eeeaf4; font-size:16px; line-height:24px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-description.is-expanded {
  display:block; max-height:none; overflow:visible; -webkit-line-clamp:unset;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-description-toggle {
  min-height:32px; margin:0; padding:3px 0; font-size:14px; line-height:26px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-refresh {
  max-width:540px; margin:0 0 12px; font-size:13px; line-height:20px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-actions {
  display:block; width:auto; max-width:760px; margin:0; padding:0; white-space:normal;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-progress {
  display:block; width:480px; max-width:100%; margin:0 0 16px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-progress-track { height:6px; margin:0 0 7px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-progress-track > span { background:#62dbc9; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-progress-label { margin:0; color:#c2b9cf; font-size:13px; line-height:20px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-progress-label > span { margin-left:10px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-button-primary {
  display:inline-block; width:auto; min-width:240px; min-height:52px; margin:0 14px 10px 0;
  padding:14px 23px; border-radius:28px; font-size:16px; line-height:22px; vertical-align:middle;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-button-secondary,
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-restart {
  display:inline-block; width:auto; min-width:0; max-width:100%; min-height:52px; margin:0 14px 10px 0;
  padding:0; border:0; border-radius:0; background:transparent; color:#f0ebf6!important;
  font:400 16px/22px Aino,Arial,sans-serif; text-align:left; text-decoration:none; vertical-align:middle;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-action-icon {
  display:inline-block; width:52px; height:52px; margin:0 9px 0 0; padding:0;
  border:1px solid rgba(121,201,193,.55); border-radius:50%; background:rgba(24,22,36,.8);
  color:#f0ebf6; font-size:27px; font-weight:400; line-height:50px; text-align:center; vertical-align:middle;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-action-label { display:inline; vertical-align:middle; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-button-secondary:hover .vp-movie-action-icon,
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-restart:hover .vp-movie-action-icon,
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-button-secondary.active .vp-movie-action-icon {
  border-color:#76e6d4; color:#76e6d4; background:#282336;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-button:focus,
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-restart:focus {
  outline:2px solid #76e6d4; outline-offset:3px;
}

/* User refinement: related names and years stay inside each poster gradient. */
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-related { margin:0; padding:0; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-heading { margin:0 0 4px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-related h2 { font:400 22px/36px Aino,Arial,sans-serif; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-posters { margin:-4px -8px 0; padding:8px 8px 16px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-card {
  width:190px; margin-right:18px; overflow:hidden; background:transparent; border-radius:7px;
}
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-poster { border-radius:7px; }
#recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-card .film-card-title > .vp-card-year {
  display:block; max-height:16px; margin-top:3px; color:#b9afc8; font:400 12px/16px Aino,Arial,sans-serif;
}

@media(min-width:768px) and (max-width:1199px) {
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-content { padding-left:28px; padding-right:28px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-poster { width:190px; height:285px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-body { margin-left:224px; padding-top:8px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-information h1 { font-size:36px; line-height:40px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-card { width:176px; }
}
@media(max-width:767px) {
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-content { padding:14px 20px 28px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-back { margin-bottom:14px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-hero { min-height:0; margin-bottom:18px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-poster { position:relative; float:left; width:112px; height:168px; margin:0 18px 14px 0; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-body { max-width:none; margin:0; padding:3px 0 0; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-information { width:auto; min-height:168px; max-width:none; margin:0 0 12px; overflow:hidden; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-information h1 { margin-bottom:9px; padding-right:44px; font-size:28px; line-height:32px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-meta,
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-genres { font-size:12px; line-height:20px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-meta > span { margin-right:6px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-meta > span + span { padding-left:6px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-genres > span { margin-right:8px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-source-name,
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-source-date { font-size:12px; line-height:18px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-source-date span { margin-left:0; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-description { clear:both; width:100%; max-width:none; margin-bottom:12px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-description { max-height:66px; font-size:14px; line-height:22px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-description.is-expanded { max-height:none; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-description-toggle { min-height:44px; padding:7px 0; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-button-primary { display:block; width:100%; min-width:0; margin:0 0 12px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-button-secondary,
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-restart { margin:0 12px 10px 0; font-size:13px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-action-icon { width:44px; height:44px; margin-right:8px; font-size:23px; line-height:42px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-progress { width:100%; margin-bottom:14px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-progress-label { font-size:12px; line-height:19px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-card { width:158px; margin-right:14px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-related h2 { font-size:20px; }
}
@media(max-width:479px) {
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-content { padding-left:16px; padding-right:16px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-poster { width:88px; height:132px; margin-right:12px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-information { min-height:132px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-detail-information h1 { font-size:25px; line-height:29px; }
}

/* Short desktop viewports keep the larger recommendations above the fold. */
@media(min-width:1200px) and (max-height:900px) {
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-poster { width:260px; height:390px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-body { margin-left:308px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-movie-detail-hero { min-height:390px; }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .film-related-card { width:184px; }
}

/* Shows and children using the show branch retain their existing hero artwork
   and recording list. Missing portrait data leaves information at the left. */
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-hero {
  min-height:474px; margin:0; padding:0;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info {
  position:relative; z-index:2; width:100%; max-width:none; min-height:445px;
  margin:0; padding:74px 48px 26px; box-sizing:border-box; font-family:Aino,Arial,sans-serif;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info * { box-sizing:border-box; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-hero.show-detail-no-wide { min-height:0; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-no-wide .show-detail-info { min-height:0; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-copy {
  position:relative; max-width:760px; margin:0; padding:36px 0 0;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster {
  position:absolute; top:74px; left:48px; width:280px; max-width:none; height:420px; margin:0;
  overflow:hidden; border:1px solid rgba(201,195,216,.25); border-radius:7px;
  background:#1b1427; box-shadow:0 8px 24px rgba(0,0,0,.28);
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster + .vp-show-detail-copy { margin-left:328px; min-height:420px; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster img {
  position:absolute; top:0; left:50%; display:block; width:auto; max-width:none; height:100%; margin:0;
  -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
@supports(object-fit:cover) {
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster img {
    left:0; width:100%; height:100%; object-fit:cover;
    -webkit-transform:none; -ms-transform:none; transform:none;
  }
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info h1 {
  width:auto; max-width:680px; margin:0 0 14px; color:#f4f1f8; font-family:Aino,Arial,sans-serif;
  font-size:52px; font-weight:700; line-height:1.09; overflow-wrap:break-word; word-wrap:break-word;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-meta,
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-genres {
  display:block; max-width:680px; margin:0 0 6px; padding:0; color:#c7bfd3; font-size:16px; line-height:23px;
  white-space:normal;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-meta > span { display:inline-block; margin:0 10px 0 0; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-meta > span + span { padding-left:10px; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-genres > span { display:inline-block; margin-right:12px; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-source {
  display:block; width:auto; max-width:680px; margin:0 0 16px; padding:0; color:#bdb4cb; font-size:14px; line-height:21px;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-source > img { display:none; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-source > span { margin:0; padding:0; border:0; font:inherit; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description-wrapper { width:540px; max-width:100%; margin:0 0 14px; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description {
  display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  max-height:72px; margin:0; overflow:hidden; color:#eeeaf4; font-size:16px; line-height:24px;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description.is-expanded {
  display:block; max-height:none; overflow:visible; -webkit-line-clamp:unset;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description-toggle {
  min-height:32px; margin:0; padding:3px 0; font-size:14px; line-height:26px;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-progress { width:480px; max-width:100%; margin:0 0 16px; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-progress-track { height:6px; margin:0 0 7px; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-progress-track > span { background:#62dbc9; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-progress-label {
  display:block; margin:0; color:#c2b9cf; font-size:13px; line-height:20px; overflow:hidden;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-progress-label > span + span { float:right; margin-left:8px; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions { display:block; width:auto; max-width:760px; margin:0; padding:0; white-space:normal; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .show-detail-button.show-detail-primary {
  display:inline-block; width:auto; min-width:240px; min-height:52px; margin:0 14px 10px 0;
  padding:14px 23px; border:1px solid #62dbc9; border-radius:28px;
  background:#62dbc9; color:#102b2a; font:700 16px/22px Aino,Arial,sans-serif; vertical-align:middle;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .show-detail-save,
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .show-detail-restart {
  display:inline-block; width:auto; min-width:0; max-width:100%; min-height:52px; margin:0 14px 10px 0;
  padding:0; border:0; border-radius:0; background:transparent; color:#f0ebf6;
  font:400 16px/22px Aino,Arial,sans-serif; text-align:left; text-decoration:none; vertical-align:middle;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .vp-movie-action-icon {
  display:inline-block; width:52px; height:52px; margin:0 9px 0 0; padding:0;
  border:1px solid rgba(121,201,193,.55); border-radius:50%; background:rgba(24,22,36,.8);
  color:#f0ebf6; font-size:27px; font-weight:400; line-height:50px; text-align:center; vertical-align:middle;
}
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-movie-action-label { display:inline; vertical-align:middle; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-save:hover .vp-movie-action-icon,
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-restart:hover .vp-movie-action-icon,
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-save.active .vp-movie-action-icon { border-color:#76e6d4; color:#76e6d4; background:#282336; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-primary:hover { border-color:#85e5d7; background:#85e5d7; }
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-button:focus,
#recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-restart:focus { outline:2px solid #76e6d4; outline-offset:3px; }

@media(min-width:768px) and (max-width:1199px) {
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info { padding-left:28px; padding-right:28px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster { left:28px; width:190px; height:285px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster + .vp-show-detail-copy { margin-left:224px; min-height:285px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-copy { padding-top:8px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info h1 { font-size:36px; line-height:40px; }
}
@media(max-width:767px) {
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-hero { min-height:0; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info { min-height:0; padding:242px 20px 20px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-no-wide .show-detail-info { padding-top:68px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-copy,
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster + .vp-show-detail-copy { max-width:none; min-height:0; margin:0; padding:0; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-show-detail-poster { display:none; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info h1 { max-width:none; margin-bottom:9px; font-size:28px; line-height:32px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-meta,
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-genres { max-width:none; font-size:12px; line-height:20px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-meta > span { margin-right:6px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-meta > span + span { padding-left:6px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-source { margin-bottom:12px; font-size:12px; line-height:18px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description-wrapper { width:100%; max-width:none; margin-bottom:12px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description { max-height:66px; font-size:14px; line-height:22px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description.is-expanded { max-height:none; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-description-toggle { min-height:44px; padding:7px 0; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-progress { width:100%; margin-bottom:14px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-progress-label { font-size:12px; line-height:19px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .show-detail-button.show-detail-primary { display:block; width:100%; min-width:0; margin:0 0 12px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .show-detail-save,
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .show-detail-restart { margin:0 12px 10px 0; font-size:13px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-actions .vp-movie-action-icon { width:44px; height:44px; margin-right:8px; font-size:23px; line-height:42px; }
}
@media(max-width:479px) {
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info { padding-left:16px; padding-right:16px; }
  #recording-program-details.vp-movie-detail-layout.show-detail-view .show-detail-info h1 { font-size:25px; line-height:29px; }
}

/* Load after movie-detail-layout.css. The unconditional slot belongs outside
   the existing ng-if description wrapper, so absent text reserves space too.
   Three collapsed lines + Read More row share one height in both branches. */
#recording-program-details.vp-movie-detail-layout .vp-detail-description-slot {
  display:block;
  clear:both;
  width:540px;
  max-width:100%;
  min-height:112px;
  margin:0;
  padding:0 0 8px;
  box-sizing:border-box;
  overflow:visible;
}

#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-description-slot > .film-description,
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-description-slot > .show-detail-description-wrapper {
  width:100%;
  max-width:100%;
  margin:0;
}

#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-description-slot .film-detail-description,
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-description-slot .show-detail-description {
  max-height:72px;
  margin:0;
  font-size:16px;
  line-height:24px;
  overflow-wrap:break-word;
  word-wrap:break-word;
}

#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-description-slot .film-description-toggle,
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-description-slot .show-detail-description-toggle {
  min-height:32px;
  height:32px;
  margin:0;
  padding:3px 0;
  border:0;
  box-sizing:border-box;
  line-height:26px;
}

/* Keep explicit expansion in normal flow. No fixed outer height or clipping
   can cover the expanded text, its collapse control or the playback actions. */
#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-description-slot .film-detail-description.is-expanded,
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-description-slot .show-detail-description.is-expanded {
  display:block;
  max-height:none;
  overflow:visible;
}

/* Watched and unwatched details keep the same space before their actions.
   The 56px slot includes the former progress bottom margin; do not add it twice. */
#recording-program-details.vp-movie-detail-layout .vp-detail-progress-slot {
  display:block;
  clear:both;
  width:480px;
  max-width:100%;
  min-height:56px;
  margin:0;
  padding:0;
  box-sizing:border-box;
  overflow:visible;
}

#recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-progress-slot > .film-progress,
#recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-progress-slot > .show-detail-progress {
  width:100%;
  max-width:100%;
  margin:0;
}

@media(max-width:767px) {
  #recording-program-details.vp-movie-detail-layout .vp-detail-description-slot {
    width:100%;
    max-width:none;
    min-height:110px;
    padding-bottom:0;
  }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-description-slot .film-detail-description,
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-description-slot .show-detail-description {
    max-height:66px;
    font-size:14px;
    line-height:22px;
  }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-description-slot .film-description-toggle,
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-description-slot .show-detail-description-toggle {
    min-height:44px;
    height:44px;
    padding:7px 0;
  }
  #recording-program-details.vp-movie-detail-layout.film-detail-view .vp-detail-description-slot .film-detail-description.is-expanded,
  #recording-program-details.vp-movie-detail-layout.show-detail-view .vp-detail-description-slot .show-detail-description.is-expanded {
    max-height:none;
  }
}

/* Route underline and keyboard focus are different states. Existing visible
   keyboard/TV outlines remain; this uses the app's established input modality
   instead of depending on newer browser focus-visible support. */
.blue-live-header[header-nav-focus] .main-nav li a:focus:not(.active) {
  border-bottom-color:transparent;
}
body.account-pointer-input .blue-live-header[header-nav-focus] .main-nav li a:focus {
  outline:0!important;
}