/* V5.0.193 — Rail Spotify Transport Premium Frame Polish. Follow-up to V5.0.190-V5.0.192: the visible Spotify rail transport shell now shares the main-control-panel hardware language while the Spotify iframe remains full-size, unscaled, unmasked, unclipped, and clickable. Frame-only polish: no rail authority, Spotify source/playback logic, API, OAuth, SDK, token flow, Browse/Menu behaviour, mobile player, colour-authority value, public shell radius, or jacket/sleeve geometry change. */ @media (min-width: 1161px) { html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__transport { overflow: visible !important; background: transparent; box-shadow: 0 14px 28px color-mix(in srgb, var(--v5-shadow) 24%, transparent), 0 0 28px color-mix(in srgb, var(--v5-accent) 7%, transparent); } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual { position: absolute; inset: 0 auto auto 0; z-index: 2; isolation: isolate; overflow: visible !important; contain: layout style; clip-path: none !important; width: 282px; max-width: 100%; height: 152px !important; min-height: 152px !important; max-height: 152px !important; padding: 0; line-height: 0; border-radius: 0; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 58%, transparent); background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--v5-proof) 12%, transparent), transparent 32%), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 6%, transparent) 0%, color-mix(in srgb, var(--v5-page) 96%, var(--v5-surface)) 46%, color-mix(in srgb, var(--v5-page) 92%, var(--v5-surface-2)) 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-page) 54%, transparent), 0 0 0 2px color-mix(in srgb, var(--v5-line) 20%, transparent), 0 0 24px color-mix(in srgb, var(--v5-accent) 13%, transparent), 0 15px 30px color-mix(in srgb, var(--v5-shadow) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 13%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 10%, transparent), inset 14px 0 22px rgba(0,0,0,.16), inset -14px 0 22px rgba(0,0,0,.14); } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before { content: ""; position: absolute; inset: -7px; z-index: 0; pointer-events: none; border-radius: 0; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 20%, transparent); background: linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--v5-proof) 9%, transparent) 18%, transparent 34%, color-mix(in srgb, var(--v5-accent) 7%, transparent) 72%, transparent 100%); box-shadow: 0 0 18px color-mix(in srgb, var(--v5-accent) 10%, transparent), 0 0 34px color-mix(in srgb, var(--v5-signal) 6%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent); opacity: .84; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after { content: ""; position: absolute; left: 8px; right: 8px; top: -1px; z-index: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-proof) 44%, transparent), color-mix(in srgb, var(--v5-accent) 24%, transparent), transparent); opacity: .86; box-shadow: 0 0 10px color-mix(in srgb, var(--v5-accent) 18%, transparent); } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe { position: absolute; left: 0 !important; top: 0 !important; z-index: 2; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; max-height: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip-path: none !important; transform: none !important; pointer-events: auto !important; background: transparent; scrollbar-width: none; -ms-overflow-style: none; outline: 0; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual:hover, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual:focus-within { border-color: color-mix(in srgb, var(--v5-line-strong) 68%, var(--v5-accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 20%, transparent), 0 0 26px color-mix(in srgb, var(--v5-accent) 18%, transparent), 0 0 42px color-mix(in srgb, var(--v5-signal) 9%, transparent), 0 17px 32px color-mix(in srgb, var(--v5-shadow) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 16%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 14%, transparent), inset 14px 0 22px rgba(0,0,0,.15), inset -14px 0 22px rgba(0,0,0,.13); } html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe { color: #fff !important; background: #fff !important; background-color: #fff !important; background-image: none !important; border-color: #fff !important; box-shadow: none !important; outline-color: #fff !important; filter: none !important; } } @media (prefers-reduced-motion: reduce) { html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after { transition: none !important; } } /* V5.0.194 — Rail Now Panel Premium Polish + Spotify Square Edge. Follow-up to V5.0.193: the Now/Section status panel receives the same premium main-control-panel hardware language as the rail selectors, track rows, and Spotify frame. Also squares the Spotify frame/iframe element edge where theme CSS can control it. Visual-only: no rail authority, Spotify source logic, iframe routing, API, OAuth, SDK, token flow, mobile player, colour-authority value, public shell radius, or jacket/sleeve geometry change. */ @media (min-width: 1161px) { .bhk-v5-playerRail__now { position: relative; isolation: isolate; overflow: visible; min-height: 84px; padding: 13px; border-radius: 0 !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 48%, transparent); background: radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--v5-proof) 8%, transparent), transparent 36%), radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--v5-accent) 11%, transparent), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent) 0%, color-mix(in srgb, var(--v5-page) 84%, var(--v5-surface-2)) 48%, color-mix(in srgb, var(--v5-page) 78%, var(--v5-surface)) 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-page) 42%, transparent), 0 0 0 2px color-mix(in srgb, var(--v5-line) 13%, transparent), 0 0 24px color-mix(in srgb, var(--v5-accent) 9%, transparent), 0 14px 28px color-mix(in srgb, var(--v5-shadow) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 11%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 8%, transparent), inset 13px 0 22px rgba(0,0,0,.16), inset -13px 0 22px rgba(0,0,0,.14); } .bhk-v5-playerRail__now::before { content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none; border-radius: 0 !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 17%, transparent); background: linear-gradient(118deg, transparent 0%, color-mix(in srgb, var(--v5-proof) 8%, transparent) 18%, transparent 34%, color-mix(in srgb, var(--v5-accent) 6%, transparent) 70%, transparent 100%); opacity: .78; } .bhk-v5-playerRail__now::after { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; z-index: 0; height: 1px; pointer-events: none; border-radius: 0 !important; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-proof) 42%, transparent), color-mix(in srgb, var(--v5-accent) 18%, transparent), transparent); opacity: .9; box-shadow: 0 0 10px color-mix(in srgb, var(--v5-accent) 12%, transparent); } .bhk-v5-playerRail__now > * { position: relative; z-index: 1; } .bhk-v5-playerRail__now .bhk-v5-playerRail__eyebrow, .bhk-v5-playerRail__now span:first-child { display: inline-flex; width: fit-content; min-height: 18px; align-items: center; justify-content: flex-start; padding: 4px 7px 3px; border-radius: 0 !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 20%, transparent); color: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-proof)); background: color-mix(in srgb, var(--v5-page) 74%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent), 0 0 12px color-mix(in srgb, var(--v5-signal) 7%, transparent); font-size: 9px; line-height: 1; letter-spacing: .18em; } .bhk-v5-playerRail__now strong { margin-top: 1px; color: var(--v5-proof); text-shadow: 0 0 12px color-mix(in srgb, var(--v5-accent) 14%, transparent), 0 1px 0 rgba(0,0,0,.34); font-size: 16px; line-height: 1; font-weight: 900; letter-spacing: -.018em; } .bhk-v5-playerRail__now span:last-child { display: inline-flex; width: fit-content; min-height: 16px; align-items: center; padding: 3px 0 0; color: color-mix(in srgb, var(--v5-muted) 74%, var(--v5-proof)); font-size: 10px; line-height: 1.1; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe { border-radius: 0 !important; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe { overflow: visible !important; clip-path: none !important; transform: none !important; pointer-events: auto !important; } html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail__now, html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail__now::before, html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail__now::after, html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail__now *, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe { color: #fff !important; background: #fff !important; background-color: #fff !important; background-image: none !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } } @media (prefers-reduced-motion: reduce) { .bhk-v5-playerRail__now, .bhk-v5-playerRail__now::before, .bhk-v5-playerRail__now::after { transition: none !important; } } /* V5.0.195 — Rail Spotify Dark Gasket Rounded Insert. Follow-up to V5.0.194: keep the V5 rail/Spotify hardware frame square, but stop fighting Spotify's branded internal rounded embed language. The iframe gets a dark rounded gasket mount so white corner artifacts disappear into a deliberate black-glass insert. Visual-only: no iframe source, rail routing, Spotify API/OAuth/SDK/token flow, mobile player, Browse/Menu behavior, colour authority value, public shell radius, or jacket/sleeve geometry change. */ @media (min-width: 1161px) { html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual { --v5-spotify-gasket-radius: 12px; --v5-spotify-gasket-edge: color-mix(in srgb, var(--v5-line-strong) 30%, transparent); --v5-spotify-gasket-surface: color-mix(in srgb, var(--v5-page) 92%, #000); border-radius: 0 !important; overflow: visible !important; background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--v5-proof) 8%, transparent), transparent 34%), radial-gradient(circle at 92% 105%, color-mix(in srgb, var(--v5-accent) 9%, transparent), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--v5-page) 92%, var(--v5-surface)) 0%, color-mix(in srgb, var(--v5-page) 88%, #000) 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-page) 58%, transparent), 0 0 0 2px color-mix(in srgb, var(--v5-line) 18%, transparent), 0 0 26px color-mix(in srgb, var(--v5-accent) 12%, transparent), 0 16px 32px color-mix(in srgb, var(--v5-shadow) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 9%, transparent), inset 14px 0 22px rgba(0,0,0,.17), inset -14px 0 22px rgba(0,0,0,.15); } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: var(--v5-spotify-gasket-radius) !important; border: 1px solid var(--v5-spotify-gasket-edge); background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 4%, transparent) 0%, transparent 18%, color-mix(in srgb, #000 18%, transparent) 100%), var(--v5-spotify-gasket-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 9%, transparent), inset 0 0 0 1px color-mix(in srgb, #000 32%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-accent) 9%, transparent), 0 0 18px color-mix(in srgb, var(--v5-accent) 8%, transparent); opacity: 1; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after { content: ""; position: absolute; left: 8px; right: 8px; top: -1px; z-index: 3; height: 1px; pointer-events: none; border-radius: 0 !important; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-proof) 42%, transparent), color-mix(in srgb, var(--v5-accent) 22%, transparent), transparent); opacity: .82; box-shadow: 0 0 10px color-mix(in srgb, var(--v5-accent) 15%, transparent); } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe { position: absolute; inset: 0 !important; z-index: 2; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--v5-spotify-gasket-radius) !important; background: var(--v5-spotify-gasket-surface) !important; transform: none !important; clip-path: none !important; pointer-events: auto !important; outline: 0; scrollbar-width: none; -ms-overflow-style: none; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual:hover, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual:focus-within { border-color: color-mix(in srgb, var(--v5-line-strong) 64%, var(--v5-accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 20%, transparent), 0 0 28px color-mix(in srgb, var(--v5-accent) 17%, transparent), 0 0 44px color-mix(in srgb, var(--v5-signal) 8%, transparent), 0 18px 34px color-mix(in srgb, var(--v5-shadow) 31%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 15%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 12%, transparent), inset 14px 0 22px rgba(0,0,0,.16), inset -14px 0 22px rgba(0,0,0,.14); } html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after, html[data-bhk-v5-mode="default-white"][data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe { color: #fff !important; background: #fff !important; background-color: #fff !important; background-image: none !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } } @media (prefers-reduced-motion: reduce) { html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual::after { transition: none !important; } } /* V5.0.317 — Spotify Player Insert Polish. Softens only the internal Spotify insert/gasket. Rail shell, public shell, Jacket, Sleeve, and section frames remain square. No iframe source, playback, API, OAuth, SDK, token, Browse/Menu, mobile player, or geometry change. */ @media (min-width: 1161px) { html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready { --v5-spotify-gasket-radius: 14px; border-color: transparent !important; border-radius: 0 !important; overflow: visible !important; background: radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--v5-proof) 5%, transparent), transparent 34%), radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--v5-accent) 6%, transparent), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--v5-page) 76%, transparent), color-mix(in srgb, var(--v5-page) 84%, transparent)) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--v5-accent) 7%, transparent), 0 10px 20px color-mix(in srgb, var(--v5-shadow) 10%, transparent), inset 10px 0 16px color-mix(in srgb, var(--v5-shadow) 5%, transparent), inset -10px 0 16px color-mix(in srgb, var(--v5-shadow) 5%, transparent) !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready::before { inset: 0 !important; z-index: 1 !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 16%, transparent) !important; border-radius: var(--v5-spotify-gasket-radius) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 3%, transparent) 0%, transparent 20%, color-mix(in srgb, #000 12%, transparent) 100%), color-mix(in srgb, var(--v5-page) 56%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 4%, transparent), inset 0 0 0 1px color-mix(in srgb, #000 20%, transparent), 0 0 14px color-mix(in srgb, var(--v5-accent) 5%, transparent) !important; opacity: .82 !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::after, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready::after { opacity: .28 !important; box-shadow: none !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual iframe, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready iframe, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyViewport iframe { border: 0 !important; border-radius: var(--v5-spotify-gasket-radius) !important; background: transparent !important; box-shadow: none !important; clip-path: none !important; transform: none !important; pointer-events: auto !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual:hover, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual:focus-within, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready:hover, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready:focus-within { border-color: transparent !important; box-shadow: 0 0 20px color-mix(in srgb, var(--v5-accent) 9%, transparent), 0 10px 22px color-mix(in srgb, var(--v5-shadow) 12%, transparent), inset 10px 0 16px color-mix(in srgb, var(--v5-shadow) 6%, transparent), inset -10px 0 16px color-mix(in srgb, var(--v5-shadow) 6%, transparent) !important; } } /* V5.0.318 — Spotify bottom edge purple polish source lane. Defines the intended rail-Spotify bottom accent in the Spotify frame lane. The late rail guard repeats the overlay so it wins older display:none guards. */ @media (min-width: 1161px) { html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready { --v5-spotify-bottom-edge-purple: color-mix(in srgb, var(--v5-signal) 62%, var(--v5-accent) 38%); } } /* V5.0.323 — Listen Spotify Premium Frame Fit Guard. Keeps the existing purple/navy hardware gasket but clips every visual layer to the same 152px transport height so no leftover lower band can render. */ @media (min-width: 901px) { html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready { width: 282px !important; height: 152px !important; min-height: 152px !important; max-height: 152px !important; overflow: hidden !important; isolation: isolate !important; border-radius: 0 !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready::before { inset: 0 !important; height: auto !important; max-height: 152px !important; overflow: hidden !important; border-radius: 0 !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::after, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready::after { bottom: 2px !important; height: 2px !important; border-radius: 0 !important; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--v5-accent) 32%, transparent) 14%, color-mix(in srgb, var(--v5-signal) 58%, var(--v5-proof)) 50%, color-mix(in srgb, var(--v5-accent) 32%, transparent) 86%, transparent 100%) !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual iframe, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready iframe, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 iframe[data-bhk-v5-rail-spotify-embed] { display: block !important; width: 100% !important; height: 100% !important; min-height: 152px !important; max-height: 152px !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } } /* V5.0.325 — Listen Spotify 282x152 Rounded Feature Exception. This final frame-layer guard permits rounding on the Spotify insert only and keeps the wrapper/iframe at the exact compact player footprint. */ @media (min-width: 901px) { html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready { --v5-spotify-insert-radius: 12px; width: 282px !important; height: 152px !important; min-height: 152px !important; max-height: 152px !important; overflow: hidden !important; border-radius: var(--v5-spotify-insert-radius) !important; clip-path: inset(0 round var(--v5-spotify-insert-radius)) !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready::before, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::after, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready::after { border-radius: var(--v5-spotify-insert-radius) !important; pointer-events: none !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual iframe, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual.is-spotify-api-ready iframe, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 iframe[data-bhk-v5-rail-spotify-embed] { width: 282px !important; height: 152px !important; min-height: 152px !important; max-height: 152px !important; border-radius: var(--v5-spotify-insert-radius) !important; overflow: hidden !important; } } /* V5.0.358 — Listen rail Spotify single-instance controller surface. The rail may show either the API controller host or the native fallback iframe, but never both as competing active players. Decorative frame layers remain behind the interactive media surface. */ @media (min-width: 901px) { html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual [data-bhk-v5-spotify-controller-host], html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual [data-bhk-v5-spotify-controller-host] iframe, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual [data-bhk-v5-spotify-single-instance="fallback"] { display: block !important; position: relative !important; z-index: 4 !important; width: 282px !important; height: 152px !important; min-width: 282px !important; max-width: 282px !important; min-height: 152px !important; max-height: 152px !important; border: 0 !important; border-radius: var(--v5-spotify-insert-radius, 12px) !important; overflow: hidden !important; background: transparent !important; pointer-events: auto !important; } html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::before, html[data-bhk-v5-rail="listen"] body.wp-theme-bhk-v5 .bhk-v5-playerRail__spotifyTransportVisual::after { z-index: 1 !important; pointer-events: none !important; } }