/* Search clear behavior is shared by mobile and desktop. */
#proSearchClearBtn {
    position: absolute;
    right: 2px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: background-color 180ms ease, opacity 120ms ease;
}
#proSearchClearBtn:not([data-has-query="true"]) { visibility: hidden !important; opacity: 0 !important; pointer-events: none; }
#proSearchClearBtn:hover,
#proSearchClearBtn:focus-visible { background: rgba(255, 255, 255, .16); border: 0; box-shadow: none; }
#proSearchClearBtn:active { background: rgba(0, 0, 0, .45); }
#proSearchInput::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Match the home hero's play mark, compensating for the PNG's transparent inset
   without expanding the button or moving its label. Other action icons stay unchanged. */
body[data-page="browse"] .pm-tag-hero-actions .pm-tag-primary img[src$="/playicono0003.png"] {
    width: clamp(38px, 2.05vw, 43px);
    height: clamp(38px, 2.05vw, 43px);
    margin: -6px -4px;
    flex-shrink: 0;
}
#heroInfoContent.pm-netflix-info-modal #modalPlayBtn img[src$="/playicono0003.png"] {
    width: 38px !important;
    height: 38px !important;
    margin: -5px -4px !important;
    flex-shrink: 0;
}
#floating-preview-card .pm-floating-preview-play-icon {
    width: calc(26 * var(--pm-preview-unit));
    height: calc(26 * var(--pm-preview-unit));
}

/* Mobile Browse and the shared JBV detail view. Desktop keeps its own layout. */
@media (max-width: 767px) {
    body[data-page="browse"] {
        --pm-mobile-browse-gutter: clamp(16px, 4vw, 24px);
    }

    body[data-page="browse"] #navbar { width: 100% !important; }
    body[data-page="browse"] #navbar .flex.items-center.gap-10 { min-width: 0; width: auto; gap: 10px !important; }
    body[data-page="browse"] #navbar .flex.items-center.gap-10 > .flex-shrink-0 { gap: 10px; }
    body[data-page="browse"] #navbar .flex.items-center.gap-4.z-10 { gap: 6px; }
    body[data-page="browse"] #navbar #mobileBrowseExploreBtn { display: inline-flex !important; min-height: 44px; padding-inline: 10px; font-size: 13px; }
    body[data-page="browse"] #navbar #proSearchWrapper { display: flex; flex: 0 0 36px; }
    body[data-page="browse"] #proSearchBox { height: 44px; }
    body[data-page="browse"] #proSearchBox > button { height: 44px; flex-shrink: 0; }
    body[data-page="browse"] #proSearchWrapper:has([data-pm-open="true"]) { position: absolute; inset: 16px 0 auto; z-index: 20; }
    body[data-page="browse"] #proSearchBox[data-pm-open="true"] { width: 100% !important; height: 46px; border-radius: 6px; background: #141414 !important; }
    body[data-page="browse"] #proSearchBox[data-pm-open="true"] #proSearchInput { width: 100% !important; min-width: 0; flex: 1; padding-right: 44px !important; font-size: 16px; }
    body[data-page="browse"] #proSearchClearBtn { width: 40px; height: 40px; }
    body[data-page="browse"] #mobileMenu {
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(10, 10, 10, .48);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
    body[data-page="browse"] #mobileMenu > .flex-1 { flex: 1 0 auto; gap: 14px; padding: 12px 20px max(88px, env(safe-area-inset-bottom)); }
    body[data-page="browse"] #mobileMenu .mobile-menu-link {
        margin-top: 0;
        min-height: 48px;
        padding: 10px 24px;
        border-radius: 8px;
        color: #f5f5f5;
        background: transparent;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.3;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    }
    body[data-page="browse"] #mobileMenu .mobile-menu-link[aria-current="page"],
    body[data-page="browse"] #mobileMenu .mobile-menu-link:hover,
    body[data-page="browse"] #mobileMenu .mobile-menu-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .12); }
    body[data-page="browse"] #mobileMenu .mobile-menu-link:active { background: rgba(0, 0, 0, .25); }
    body[data-page="browse"] #navbar img[src*="0099283letraslogo"] { max-width: clamp(96px, 25vw, 142px); }
    body[data-page="browse"] #proHeroSection { min-height: 470px !important; }
    body[data-page="browse"] #heroContentInner,
    body[data-page="browse"] #heroCopyBlock { width: 100%; min-width: 0; }
    body[data-page="browse"] #heroTitle { width: 100% !important; margin: 0 0 12px !important; }
    body[data-page="browse"] #heroTitle img { transform: none !important; }

    body[data-page="browse"] #heroMetaRow {
        display: flex !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center;
        gap: 6px 12px !important;
        margin: 0 0 16px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    body[data-page="browse"] #heroMetaRow.hidden { display: none !important; }
    body[data-page="browse"] #heroMetaRow .pm-hero-meta-dot { display: none; }
    body[data-page="browse"] #heroMetaRow .pm-hero-meta-item { flex: 0 0 auto; max-width: 100%; white-space: nowrap; }
    body[data-page="browse"] #heroMetaRow .pm-hero-quality-badge,
    body[data-page="browse"] #heroMetaRow .pm-hero-rating-badge {
        border: 1px solid #ffffff80;
        border-radius: 3px;
        padding: 0 5px;
        font-size: 11px;
        line-height: 18px;
    }
    body[data-page="browse"] #proHeroSection .pm-hero-live-status {
        justify-content: center !important;
        width: 100%;
        gap: 6px 8px !important;
        margin: 0 0 12px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    body[data-page="browse"] #proHeroSection .pm-hero-live-start { max-width: 100%; overflow-wrap: anywhere; }
    body[data-page="browse"] #heroPrimaryActions { width: 100%; min-width: 0; }
    body[data-page="browse"] #btnHeroPlay,
    body[data-page="browse"] #btnHeroMoreInfo { min-width: 0; white-space: nowrap; }
    body[data-page="browse"] #btnHeroPlay > :not(span),
    body[data-page="browse"] #btnHeroMoreInfo > :not(span) { flex-shrink: 0; }
    body[data-page="browse"] #btnHeroMoreInfo i,
    body[data-page="browse"] #btnHeroMoreInfo svg { width: 20px; height: 20px; }
    body[data-page="browse"] #heroMuteBtn:not(.hidden) { display: flex !important; position: absolute; top: 16px !important; right: 16px !important; bottom: auto !important; width: 32px !important; height: 32px !important; min-width: 32px; padding: 0 !important; z-index: 56; border: 0 !important; background: #3339; }
    body[data-page="browse"] #heroMuteBtn .pm-hero-control-icon { width: 18px; height: 18px; }
    body[data-page="browse"] #proRowsWrapper h3 { font-size: 18px !important; line-height: 1.3 !important; }
    body[data-page="browse"] #proRowsWrapper > .relative { margin-top: 0 !important; margin-bottom: 28px !important; }
    body[data-page="browse"] #proRowsWrapper .pm-row-heading { padding-inline: var(--pm-mobile-browse-gutter); margin-bottom: 12px; }
    body[data-page="browse"] #proRowsWrapper .pm-row-heading > h3 { padding: 0 !important; margin-bottom: 0 !important; }
    body[data-page="browse"] #proRowsWrapper .pm-row-heading > h3 > svg { flex-shrink: 0; }

    /* Section and tag pages use the same gutters and controls. */
    body[data-page="browse"] .pm-tag-view { --tag-pad: var(--pm-mobile-browse-gutter); }
    body[data-page="browse"] .pm-tag-heading { line-height: 1.2; }
    body[data-page="browse"] .pm-tag-hero-copy { left: var(--tag-pad); right: var(--tag-pad); min-width: 0; }
    body[data-page="browse"] .pm-tag-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 8px; }
    body[data-page="browse"] .pm-tag-hero-actions button { min-width: 0; min-height: 44px; padding: 8px; gap: 6px; font-size: 13px; white-space: normal; line-height: 1.3; }
    body[data-page="browse"] .pm-tag-hero-actions button img { width: 20px; height: 20px; flex-shrink: 0; }
    body[data-page="browse"] .pm-tag-mute { top: 94px; bottom: auto; right: var(--tag-pad); width: 32px; height: 32px; border: 0; background: #3339; }
    body[data-page="browse"] .pm-tag-mute img { width: 18px; height: 18px; }
    body[data-page="browse"] .pm-tag-view .pm-tag-cards > .pm-media-card,
    body[data-page="browse"] .pm-tag-view .pm-tag-cards > .pm-media-card:first-child {
        flex-basis: calc((100vw - var(--tag-pad) * 2 - 6px) / 2) !important;
        width: calc((100vw - var(--tag-pad) * 2 - 6px) / 2) !important;
    }

    /* One full-screen scroll surface, including the dynamic browser toolbar. */
    #heroInfoModal {
        padding: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overscroll-behavior: contain;
        scrollbar-width: none;
        background: #181818;
    }
    #heroInfoModal::-webkit-scrollbar { display: none; }
    #heroInfoContent.pm-netflix-info-modal {
        --pm-jbv-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
        --pm-jbv-media-space: clamp(160px, 43vw, 280px);
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0 !important;
        border: 0;
        border-radius: 0 !important;
        box-shadow: none;
        transform: none !important;
        /* A transform hint would make the fixed close button scroll with this card. */
        will-change: auto;
        transform-origin: top center;
    }
    #heroInfoContent.pm-netflix-info-modal > .pm-studio-close {
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    }
    #heroInfoContent.pm-netflix-info-modal .pm-netflix-modal-media {
        height: auto;
        min-height: 0;
        max-height: none;
        padding-top: calc(var(--pm-jbv-media-space) + env(safe-area-inset-top));
    }
    #heroInfoContent.pm-netflix-info-modal .pm-netflix-modal-actions {
        position: relative;
        width: 100%;
        min-width: 0;
        padding: 0 var(--pm-jbv-gutter) 20px !important;
    }
    #heroInfoContent.pm-netflix-info-modal .pm-jbv-title-slot { margin: 0 0 16px; }
    #heroInfoContent.pm-netflix-info-modal #modalHeroTitle { font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
    #heroInfoContent.pm-netflix-info-modal .pm-modal-title-treatment {
        display: block;
        width: auto;
        height: auto;
        max-width: min(70%, 260px);
        max-height: 110px;
        object-fit: contain;
        object-position: left bottom;
    }
    #heroInfoContent.pm-netflix-info-modal .pm-modal-watch-progress { width: 100%; min-width: 0; margin: 0 0 12px; gap: 10px; }
    #heroInfoContent.pm-netflix-info-modal .pm-watch-progress-track { flex: 1; min-width: 24px; }
    #heroInfoContent.pm-netflix-info-modal .pm-watch-progress-text { flex-shrink: 0; font-size: 12px; line-height: 1.4; white-space: nowrap; }
    #heroInfoContent.pm-netflix-info-modal .pm-jbv-action-row { display: flex; width: 100%; min-width: 0; gap: 10px; }
    #heroInfoContent.pm-netflix-info-modal .pm-jbv-action-row > .relative { flex: 0 0 auto; }
    #heroInfoContent.pm-netflix-info-modal #modalPlayBtn {
        flex: 1 1 0;
        min-width: 0 !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        gap: 6px;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    #heroInfoContent.pm-netflix-info-modal #modalPlayBtn i,
    #heroInfoContent.pm-netflix-info-modal #modalPlayBtn svg,
    #heroInfoContent.pm-netflix-info-modal #modalPlayBtn img { width: 24px !important; height: 24px !important; margin: 0 !important; flex-shrink: 0; }
    #heroInfoContent.pm-netflix-info-modal #modalAddMyListBtn,
    #heroInfoContent.pm-netflix-info-modal #modalShareBtn { flex: 0 0 44px; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
    #heroInfoContent.pm-netflix-info-modal .pm-netflix-modal-media .pm-jbv-action-row #modalHeroMuteBtn {
        position: static !important;
        inset: auto !important;
        flex: 0 0 44px;
        width: 44px !important; height: 44px !important;
    }
    #heroInfoContent.pm-netflix-info-modal #modalAdsDisclosure { margin-top: 14px; font-size: 12px; line-height: 18px; }
    #heroInfoContent.pm-netflix-info-modal #modalAdsDisclosure.hidden { display: none !important; }
    #heroInfoContent.pm-netflix-info-modal .pm-jbv-details-body { padding: 0 var(--pm-jbv-gutter) max(32px, env(safe-area-inset-bottom)); }
    #heroInfoContent.pm-netflix-info-modal .pm-jbv-details-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #heroInfoContent.pm-netflix-info-modal .pm-jbv-details-grid > * { min-width: 0; }
    #heroInfoContent.pm-netflix-info-modal #modalHeroMetadata .pm-modal-meta-line { line-height: 1.5; }
    #heroInfoContent.pm-netflix-info-modal #modalHeroMetadata .pm-modal-meta-primary > * { flex-shrink: 0; white-space: nowrap; }
    #heroInfoContent.pm-netflix-info-modal #modalHeroMetadata .pm-modal-meta-maturity { align-items: flex-start; }
    #heroInfoContent.pm-netflix-info-modal #modalHeroMetadata .pm-modal-maturity-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    #heroInfoContent.pm-netflix-info-modal #modalHeroDescription { margin-bottom: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
    #heroInfoContent.pm-netflix-info-modal #modalPremiereDateLine { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
    #heroInfoContent.pm-netflix-info-modal .pm-jbv-details-secondary { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
    #heroInfoContent.pm-netflix-info-modal .pm-modal-organization-button { min-height: 132px; gap: 12px; padding: 16px; }
    #heroInfoContent.pm-netflix-info-modal .pm-modal-organization-button .pm-sports-avatar-lg { width: 48px; height: 48px; flex-basis: 48px; }
    #heroInfoContent.pm-netflix-info-modal .pm-modal-organization-copy { min-width: 0; }
    #heroInfoContent.pm-netflix-info-modal .pm-modal-organization-copy strong { font-size: 17px; line-height: 1.4; }
    #heroInfoContent.pm-netflix-info-modal .pm-modal-organization-copy > span { font-size: 12px; line-height: 1.5; }
    #heroInfoContent.pm-netflix-info-modal #modalMetadataDetailsSection { margin-top: 32px; padding-top: 24px; margin-bottom: 32px; overflow-wrap: anywhere; }
    #heroInfoContent.pm-netflix-info-modal #modalMetadataDetailsSection > div > div { flex-wrap: wrap; gap: 4px 8px; }
    #heroInfoContent.pm-netflix-info-modal #modalSuggestedVideos { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-page="browse"] #proFullscreenSearchOverlay { padding-inline: var(--pm-mobile-browse-gutter); }
    body[data-page="browse"] #proFullscreenSearchOverlay h2 { font-size: 20px; overflow-wrap: anywhere; }
    body[data-page="browse"] #proSearchResultsGrid { gap: 12px; }

    body[data-page="browse"] #btnHeroPlay img[src$="/playicono0003.png"],
    #heroInfoContent.pm-netflix-info-modal #modalPlayBtn img[src$="/playicono0003.png"] {
        width: 32px !important;
        height: 32px !important;
        margin: -4px !important;
    }
    body[data-page="browse"] .pm-tag-hero-actions .pm-tag-primary img[src$="/playicono0003.png"] {
        width: 32px;
        height: 32px;
        margin: -6px;
    }
}