/* Match the existing desktop header breakpoint. */
.movie-menu__toggle, .movie-menu__panel { display: none; }

@media (min-width: 1281px) {
    .header:has([data-movie-menu]) { position: relative; z-index: 100; }
    .movie-menu { position: relative; }
    .movie-menu__trigger { display: flex; align-items: center; gap: 6px; }
    .movie-menu__toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 28px; padding: 0; border: 0;
        color: #b9bcc6; background: none; cursor: pointer;
    }
    .movie-menu__toggle svg { transition: transform .15s; }
    .movie-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .movie-menu__toggle:focus-visible, .movie-menu__panel a:focus-visible {
        outline: 2px solid #ff6a2b; outline-offset: 3px;
    }
    .movie-menu__panel:not([hidden]) {
        display: block; position: absolute; top: 100%; right: 0;
        width: min(860px, calc(100vw - 48px)); padding-top: 14px; z-index: 20;
        font-family: 'Manrope', sans-serif; white-space: normal;
    }
    .movie-menu__body {
        padding: 24px 28px 20px; border-radius: 20px; background: #12141b;
        border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.6);
        max-height: calc(100vh - 190px); overflow-y: auto;
    }
    .movie-menu__columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) minmax(215px,1.2fr); gap: 24px; }
    .movie-menu__column { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .movie-menu__title {
        min-height: 20px; margin-bottom: 8px; font-size: 11px; line-height: 20px;
        font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ff6a2b;
    }
    .movie-menu .movie-menu__link {
        display: block; padding: 7px 10px; margin-left: -10px; border-radius: 8px;
        font-size: 14px; line-height: 20px; font-weight: 600; color: #c7c9d1; overflow-wrap: anywhere;
    }
    .movie-menu .movie-menu__link:hover, .movie-menu .movie-menu__link:focus-visible {
        color: #fff; background: rgba(255,255,255,.06);
    }
    .movie-menu__footer { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); }
    .movie-menu .movie-menu__all { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #ff6a2b; }
}