/* -----------------------------------------------------------------------------
   NAV GLASS PREVIEW — header rail + dropdowns.
   Resting rail = one fused capsule aligned with dropdown glass (not segmented tiles).
----------------------------------------------------------------------------- */

body.nav-glass-dropdown-preview {
    --glass-preview-gold: #c9a050;
    /* Noir-first glass: deep black readability + a thin cool edge — not a color wash */
    --glass-preview-panel: rgba(4, 5, 8, 0.57);
    --glass-preview-rail-h: 44px;
    --glass-dd-blur: 24px;
    --glass-dd-saturate: 108%;
    --glass-dd-radius: 16px;
    /* Desktop mega: tighter top corners so panel reads as continuation, not a floating pod */
    --glass-dd-radius-top: 10px;
    /* Cool accent: rim + hover only — stays whisper-quiet at rest */
    --glass-dd-ion: 125, 149, 255;
    --glass-dd-violet: 154, 100, 255;
    /* Panel rim tokens: mega menu stays quieter than Resources/chat ion. */
    --glass-dd-bar: rgba(var(--glass-dd-ion), 0.55);
    --glass-dd-glow: rgba(255, 255, 255, 0.018);
    --glass-dd-glow-outer: rgba(255, 255, 255, 0.01);
    /*
     * Row rail: cooler, less saturated than the panel rim so dropdown rows read as
     * quiet wayfinding, not a competing CTA or Resources rail.
     */
    --glass-dd-rail-ion: 116, 136, 214;
    --glass-dd-rail-violet: 138, 118, 198;
}

/* ── Unified main nav rail (idle) ─------------------------------------------- */

body.nav-glass-dropdown-preview .main-nav {
    gap: 0;
    padding: 5px 6px;
    border-radius: 999px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Frosted capsule — same family as `.dropdown-content` */
body.nav-glass-dropdown-preview .main-nav::before {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    height: var(--glass-preview-rail-h);
    transform: translateY(-50%);
    border-radius: 999px;
    background:
        linear-gradient(175deg, rgba(255, 255, 255, 0.068) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(10, 12, 17, 0.52), rgba(6, 7, 10, 0.42));
    border: 1px solid rgba(255, 255, 255, 0.099);
    box-shadow:
        0 0 0 1px rgba(201, 160, 80, 0.065),
        0 14px 36px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(18px) saturate(108%);
    backdrop-filter: blur(18px) saturate(108%);
}

/* Hairline separators — keeps one bar, readable columns */
body.nav-glass-dropdown-preview .main-nav > .nav-dropdown {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

/* Segments read as recessed into the capsule */
body.nav-glass-dropdown-preview .main-nav > a.nav-btn,
body.nav-glass-dropdown-preview .main-nav > .nav-dropdown > .nav-btn {
    /* HOME is <a>; others are <button> — anchors need explicit centering vs default button boxing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: var(--glass-preview-rail-h);
    padding: 0 22px;
    margin: 0;
    line-height: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    letter-spacing: 0.225em;
    font-size: 10px;
    font-weight: 700;
    color: rgba(228, 234, 244, 0.84);
    box-shadow: none;
    transition:
        color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

body.nav-glass-dropdown-preview .main-nav > .nav-btn:first-child,
body.nav-glass-dropdown-preview .main-nav > :first-child .nav-btn {
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.nav-glass-dropdown-preview .main-nav > .nav-dropdown:last-child > .nav-btn {
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* HOME — quiet “selected” carve, premium not loud */
body.nav-glass-dropdown-preview .main-nav > a.nav-btn.active {
    color: rgba(255, 252, 246, 0.98);
    background:
        radial-gradient(118% 85% at 50% -8%, rgba(201, 160, 80, 0.2), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -1px 0 rgba(201, 160, 80, 0.08);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    z-index: 2;
}

body.nav-glass-dropdown-preview .main-nav > a.nav-btn:hover:not(.active),
body.nav-glass-dropdown-preview .main-nav > .nav-dropdown > .nav-btn:hover:not(.active) {
    color: rgba(253, 250, 244, 0.96);
    background: rgba(255, 255, 255, 0.05);
}

body.nav-glass-dropdown-preview .main-nav .nav-btn:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 0 0 1px rgba(201, 160, 80, 0.4),
        0 0 0 2px rgba(5, 6, 8, 0.95);
}

/* ── Dropdown panel (unchanged language) ─----------------------------------- */

body.nav-glass-dropdown-preview .dropdown-content {
    position: absolute;
    min-width: 216px;
    padding: 10px;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--glass-dd-radius);
    border: 1px solid rgba(255, 255, 255, 0.075);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.014) 40%,
            rgba(255, 255, 255, 0) 58%
        ),
        linear-gradient(210deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 42%, transparent 58%),
        linear-gradient(180deg, rgba(10, 11, 14, 0.84), rgba(2, 3, 6, 0.76)),
        var(--glass-preview-panel);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.052),
        0 0 14px var(--glass-dd-glow),
        0 20px 50px rgba(0, 0, 0, 0.58),
        0 6px 20px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.085),
        inset 0 0 48px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(var(--glass-dd-blur)) saturate(var(--glass-dd-saturate)) brightness(0.97);
    backdrop-filter: blur(var(--glass-dd-blur)) saturate(var(--glass-dd-saturate)) brightness(0.97);
}

body.nav-glass-dropdown-preview .dropdown-content::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 48%;
    background: linear-gradient(
        185deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 255, 255, 0.03) 42%,
        transparent 100%
    );
    opacity: 0.4;
    pointer-events: none;
    border-radius: var(--glass-dd-radius) var(--glass-dd-radius) 0 0;
    z-index: 0;
}

/* Hairline rim — whisper of cool tint on black glass */
body.nav-glass-dropdown-preview .dropdown-content::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    padding: 1px;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.085) 0%,
        rgba(255, 255, 255, 0.048) 28%,
        rgba(255, 255, 255, 0.042) 52%,
        rgba(255, 255, 255, 0.028) 82%,
        rgba(255, 255, 255, 0.025) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.36;
}

body.nav-glass-dropdown-preview .dropdown-content a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    margin: 0;
    /* Wider left gutter: rail sits in first ~14px, label starts after ~26px (enterprise rhythm) */
    padding: 11px 17px 11px 26px;
    border: none !important;
    border-radius: 10px;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.17em;
    line-height: 1.35;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(238, 240, 245, 0.93);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    background: transparent;
    transition:
        color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        text-shadow 0.22s ease;
}

/* Straight accent rail (not an inset strip that wraps the row radius — reads cleaner) */
body.nav-glass-dropdown-preview .dropdown-content a::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: clamp(15px, 54%, 26px);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.24) 100%);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.075);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
    z-index: 0;
}

body.nav-glass-dropdown-preview .dropdown-content a + a {
    margin-top: 2px;
}

body.nav-glass-dropdown-preview .dropdown-content a:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 1px rgba(var(--glass-dd-rail-ion), 0.34),
        0 0 0 2px rgba(6, 8, 12, 0.9);
}

body.nav-glass-dropdown-preview .dropdown-content a:hover {
    color: rgba(252, 252, 254, 0.98);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.046) 0%,
        rgba(255, 255, 255, 0.022) 50%,
        rgba(0, 0, 0, 0.14) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.028);
}

body.nav-glass-dropdown-preview .dropdown-content a:hover::before {
    opacity: 0.78;
    filter: brightness(1.03);
}

body.nav-glass-dropdown-preview .dropdown-content a[aria-current='page'] {
    color: rgba(248, 249, 252, 0.98);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.024) 38%,
        rgba(6, 7, 10, 0.56) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.038);
}

body.nav-glass-dropdown-preview .dropdown-content a[aria-current='page']::before {
    opacity: 0.62;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.32) 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.09);
}

body.nav-glass-dropdown-preview .dropdown-content a[aria-current='page']:hover::before,
body.nav-glass-dropdown-preview .dropdown-content a[aria-current='page']:focus-visible::before {
    opacity: 0.9;
}

/* Hovering a mega parent — carve into the fused rail only */
body.nav-glass-dropdown-preview .nav-dropdown:hover > .nav-btn {
    color: rgba(253, 250, 244, 0.97);
    background: rgba(255, 255, 255, 0.055);
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

/* Fused-capsule “mobile tweak” conflicts with the mega-menu drawer; skip when resting rail preview is paired with nav-home-band-v6 */
@media (max-width: 768px) {
    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
        padding: 6px;
        border-radius: 16px;
    }

    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav::before {
        top: auto;
        left: -4px;
        right: -4px;
        bottom: -5px;
        height: auto;
        min-height: 44px;
        transform: none;
        border-radius: 16px;
    }

    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav > .nav-dropdown {
        border-left: none;
        border-top: none;
    }

    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav > a.nav-btn,
    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav > .nav-dropdown > .nav-btn {
        min-height: 40px;
        padding: 0 16px;
        font-size: 9.5px;
        letter-spacing: 0.19em;
    }

    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav > .nav-btn:first-child,
    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav > :first-child .nav-btn,
    body.nav-glass-dropdown-preview:not(.nav-home-band-v6) .main-nav > .nav-dropdown:last-child > .nav-btn {
        border-radius: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.nav-glass-dropdown-preview .dropdown-content::after {
        opacity: 0.42;
    }

    body.nav-glass-dropdown-preview .dropdown-content a {
        transition: none;
    }

    body.nav-glass-dropdown-preview .dropdown-content a:hover {
        transform: none;
    }

    body.nav-glass-dropdown-preview .dropdown-content a::before {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Nav row capsule preview — `nav-home-band-v6` anywhere the main site uses mega-nav.
   • `.main-header` is NOT touched here — ABC header stays baseline (HF + inline).
   • `.main-nav` has no nested “rail” slab; triggers are bare type unless pressed.
   • Pressed capsule = inset pill on active / hover / dropdown focus-within.

   Dropdown panels = fused-glass rules above unless extended here.
═══════════════════════════════════════════════════════════════════════════ */

/* Nav row: no nested plate behind the triggers */
body.nav-glass-dropdown-preview.nav-home-band-v6 .main-nav {
    gap: 0 28px;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* No !important — phone/tablet mega drawer needs HF glass background to win specificity */
    background: transparent;
    box-shadow: none;
}

body.nav-glass-dropdown-preview.nav-home-band-v6 .main-nav::before {
    content: none;
    display: none;
}

body.nav-glass-dropdown-preview.nav-home-band-v6 .main-nav > .nav-dropdown {
    border-left: none;
}

/* Inline-flex wrapper so HOME (<a>) and mega triggers (<button>) share the same row centerline */
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .main-nav > .nav-dropdown {
    display: inline-flex;
    align-items: center;
}

body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .main-nav > a.nav-btn,
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
    .main-nav
    > .nav-dropdown
    > .nav-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin: 0;
    min-height: 0;
    padding: 8px 4px;
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1;
    border-radius: 0 !important;
    border: none;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(186, 192, 204, 0.58);
    text-shadow: none;
    transition:
        color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease,
        padding 0.14s ease;
}

/* Single pressed capsule: hover, route-active HOME, or open dropdown trigger */
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .main-nav > a.nav-btn.active,
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .main-nav > a.nav-btn:hover,
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
    .nav-dropdown:hover
    > .nav-btn,
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
    .nav-dropdown:focus-within
    > .nav-btn {
    margin: 0;
    align-self: center;
    padding: 8px 20px;
    font-weight: 700;
    color: rgba(252, 250, 248, 0.96);
    border-radius: 999px !important;
    border: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 28%),
        linear-gradient(180deg, #1e1f23 0%, #151519 54%, #0e0f12 100%) !important;
    box-shadow:
        inset 0 5px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
    transform: none;
}

/* While a mega is hovered/open, mute route-active HOME so only one recessed pill reads */
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
    .main-nav:has(.nav-dropdown:hover)
    > a.nav-btn.active:not(:hover),
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
    .main-nav:has(.nav-dropdown:focus-within)
    > a.nav-btn.active:not(:hover) {
    padding: 8px 4px;
    font-weight: 600;
    border-radius: 0 !important;
    color: rgba(186, 192, 204, 0.58);
    background: transparent !important;
    box-shadow: none !important;
}

body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .main-nav > a.nav-btn:focus-visible,
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
    .main-nav
    > .nav-dropdown
    > .nav-btn:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 1px rgba(var(--glass-dd-ion), 0.45),
        0 0 0 2px rgba(5, 6, 8, 0.95);
}

body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .main-nav > a.nav-btn.active:focus-visible,
body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
    .nav-dropdown:focus-within
    > .nav-btn:focus-visible {
    box-shadow:
        inset 0 5px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02),
        inset 0 0 0 1px rgba(var(--glass-dd-ion), 0.55),
        0 0 0 2px rgba(5, 6, 8, 0.95) !important;
}

/* Mega hover: panel sits at header bottom band (gap under pill), not flush to capsule.
   Uses min-width 769px so in-flow header nav (e.g. 1024–1180 portrait) still gets the
   offset; phone/tablet drawer is excluded via :not(.product-phone-nav-open). */
body.nav-glass-dropdown-preview.nav-home-band-v6 {
    --glass-dd-header-offset: 39px;
}

@media (hover: hover) and (pointer: fine) and (max-width: 1180px) {
    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) {
        --glass-dd-header-offset: 22px;
    }
}


@media (min-width: 769px) {
    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .nav-dropdown::after {
        height: calc(var(--glass-dd-header-offset) + 48px);
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .nav-dropdown .dropdown-content {
        top: calc(100% + var(--glass-dd-header-offset));
        transform: none;
        transform-origin: center top;
        /* Visually attached to the header chrome without sinking into it. */
        border-radius: 9px 9px var(--glass-dd-radius) var(--glass-dd-radius);
        border-top: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.052),
            0 0 12px var(--glass-dd-glow),
            0 10px 28px rgba(0, 0, 0, 0.46),
            0 3px 12px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.095),
            inset 0 0 44px rgba(0, 0, 0, 0.26);
        transition:
            opacity 0.15s ease,
            visibility 0.15s ease,
            transform 0.15s ease;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .nav-dropdown
        .dropdown-content::before {
        border-radius: 9px 9px 0 0;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .nav-dropdown .dropdown-content {
        min-width: 204px;
        padding: 10px;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .dropdown-content a {
        padding: 9px 15px 9px 24px;
        border-radius: 9px;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .dropdown-content
        a[aria-current='page'] {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 24px;
        padding-right: 15px;
        border-radius: 9px;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .dropdown-content a::before {
        left: 12px;
        height: clamp(14px, 52%, 24px);
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .dropdown-content
        a[aria-current='page']::before {
        left: 12px;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .dropdown-content a + a {
        margin-top: 1px;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .dropdown-content
        a:not([aria-current='page']):hover {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.018) 48%,
            rgba(0, 0, 0, 0.16) 100%
        );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.034),
            inset 0 0 0 1px rgba(255, 255, 255, 0.024);
        transform: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .dropdown-content
        a:not([aria-current='page']):hover::before {
        opacity: 0;
    }
}

/* Desktop rim polish: keep the black/white glass theme without the gray box edge. */
@media (hover: hover) and (pointer: fine) {
    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open) .nav-dropdown .dropdown-content {
        border-color: rgba(255, 255, 255, 0.038);
        border-top-color: rgba(255, 255, 255, 0.038);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.007) 34%, rgba(255, 255, 255, 0) 66%),
            linear-gradient(180deg, rgba(5, 6, 9, 0.94) 0%, rgba(0, 1, 3, 0.985) 100%);
        box-shadow:
            0 30px 58px rgba(0, 0, 0, 0.76),
            0 0 34px rgba(255, 255, 255, 0.028),
            inset 0 1px 0 rgba(255, 255, 255, 0.052),
            inset 0 -18px 34px rgba(0, 0, 0, 0.18);
    }

    body.nav-glass-dropdown-preview .dropdown-content::after {
        opacity: 0.08;
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.018));
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .dropdown-content
        a[aria-current='page'] {
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 42%, rgba(0, 0, 0, 0.18) 100%),
            rgba(5, 6, 9, 0.82);
        box-shadow:
            0 10px 22px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.046),
            inset 0 -10px 18px rgba(0, 0, 0, 0.12);
    }

    body.nav-glass-dropdown-preview .dropdown-content a[aria-current='page']::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.22));
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.11);
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .dropdown-content
        a:not([aria-current='page']):hover {
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.012) 44%, rgba(0, 0, 0, 0.16) 100%),
            rgba(5, 6, 9, 0.72);
        box-shadow:
            0 8px 18px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.036),
            inset 0 -8px 16px rgba(0, 0, 0, 0.10);
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6:not(.product-phone-nav-open)
        .dropdown-content
        a:not([aria-current='page']):hover::before {
        opacity: 0;
        filter: none;
    }
}

/* -----------------------------------------------------------------------------
   Drawer polish (sandbox) — same breakpoints as product-header-footer.js /
   header-footer mega-menu. Keeps blurred scrim + gold-forward glass tray.
------------------------------------------------------------------------------ */
@media (max-width: 768px),
    (min-width: 768px) and (max-width: 960px),
    (min-width: 821px) and (max-width: 1024px) and (orientation: portrait),
    (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
    (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .scroll-root::after {
        -webkit-backdrop-filter: blur(16px) saturate(114%) brightness(0.72);
        backdrop-filter: blur(16px) saturate(114%) brightness(0.72);
        background:
            radial-gradient(96% 76% at 50% 18%, rgba(255, 255, 255, 0.072) 0%, rgba(255, 255, 255, 0.026) 36%, rgba(255, 255, 255, 0) 66%),
            radial-gradient(128% 94% at 16% 100%, rgba(255, 255, 255, 0.046) 0%, rgba(255, 255, 255, 0.016) 34%, rgba(255, 255, 255, 0) 68%),
            linear-gradient(180deg, rgba(2, 4, 8, 0.58) 0%, rgba(2, 3, 7, 0.78) 52%, rgba(1, 2, 5, 0.94) 100%),
            radial-gradient(140% 112% at 50% 100%, rgba(255, 255, 255, 0.022) 0%, rgba(9, 10, 14, 0.3) 32%, rgba(4, 5, 9, 0.72) 70%, rgba(1, 2, 5, 0.94) 100%);
        pointer-events: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav {
        -webkit-backdrop-filter: blur(26px) saturate(114%);
        backdrop-filter: blur(26px) saturate(114%);
        border-radius: 10px;
        background:
            linear-gradient(
                200deg,
                rgba(255, 255, 255, 0.07) 0%,
                rgba(255, 255, 255, 0.014) 18%,
                rgba(255, 255, 255, 0.006) 44%,
                rgba(10, 12, 17, 0) 72%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.018) 0%,
                rgba(255, 255, 255, 0.008) 14%,
                rgba(255, 255, 255, 0.006) 30%,
                rgba(10, 11, 15, 0) 62%
            ),
            rgba(2, 3, 5, 0.82);
        border: 1px solid rgba(255, 255, 255, 0.085);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.035),
            0 24px 52px rgba(0, 0, 0, 0.54),
            0 0 18px var(--glass-dd-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.085);
        isolation: isolate;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.38;
        background:
            radial-gradient(
                120% 72% at 50% -6%,
                rgba(255, 255, 255, 0.12),
                rgba(255, 255, 255, 0) 54%
            );
        mix-blend-mode: screen;
        z-index: 0;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open
        .main-nav
        > a.nav-btn,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open
        .main-nav
        > .nav-dropdown {
        position: relative;
        z-index: 1;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open
        .nav-dropdown.open
        .dropdown-content {
        border-radius: var(--glass-dd-radius);
        -webkit-backdrop-filter: blur(var(--glass-dd-blur)) saturate(var(--glass-dd-saturate)) brightness(0.97);
        backdrop-filter: blur(var(--glass-dd-blur)) saturate(var(--glass-dd-saturate)) brightness(0.97);
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.048) 0%,
                rgba(255, 255, 255, 0.012) 42%,
                transparent 70%
            ),
            linear-gradient(180deg, rgba(8, 9, 12, 0.72), rgba(3, 4, 7, 0.64)),
            var(--glass-preview-panel);
        border: 1px solid rgba(255, 255, 255, 0.065);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.024),
            0 0 12px var(--glass-dd-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.065),
            inset 0 0 36px rgba(0, 0, 0, 0.28);
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open
        .dropdown-content
        a[aria-current='page'] {
        color: rgba(246, 247, 250, 0.97);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
        background: transparent;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav::before {
        opacity: 0.28;
        mix-blend-mode: normal;
    }
}

/* Compact drawer hard lock: keep phone/tablet submenus in the drawer flow. */
@media (max-width: 768px),
    (min-width: 768px) and (max-width: 960px),
    (min-width: 821px) and (max-width: 1024px) and (orientation: portrait),
    (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
    (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        top: calc(100% + 4px);
        right: 8px;
        left: auto;
        width: min(clamp(236px, 68vw, 240px), calc(100vw - 22px));
        max-width: calc(100vw - 26px);
        max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px));
        padding: 7px 0 8px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav > a.nav-btn,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav > .nav-dropdown {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown {
        position: relative;
        overflow: visible;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav > a.nav-btn,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown > .nav-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: clamp(42px, 8.8svh, 48px);
        padding: 10px 18px;
        border-radius: 0 !important;
        text-align: left;
        font-size: 8.5px;
        letter-spacing: 0.145em;
        line-height: 1.15;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown .nav-btn.active,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown.open .nav-btn,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown.open .nav-btn.active,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown.open .nav-btn:not(.active) {
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.01) 58%, rgba(0, 0, 0, 0)),
            rgba(1, 2, 4, 0.34);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.034),
            inset 0 -1px 0 rgba(255, 255, 255, 0.028);
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav > a.nav-btn.active {
        color: rgba(244,248,255,0.86);
        background: transparent;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035);
        text-shadow: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown::after,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown:first-of-type.open::after,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown > .nav-btn::after {
        content: none;
        display: none;
        width: 0;
        height: 0;
        margin: 0;
        background: none;
        box-shadow: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open
        .nav-dropdown:first-of-type.open
        + .nav-dropdown {
        margin-top: 0;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .dropdown-content {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        display: none;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 2px 0 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown.open .dropdown-content {
        display: grid;
        gap: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown.open .dropdown-content::before,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .nav-dropdown.open .dropdown-content::after {
        content: none;
        display: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .dropdown-content a,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .dropdown-content a:last-child {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: clamp(32px, 7svh, 38px);
        margin: 0;
        padding: 8px 15px 8px 28px;
        border-radius: 0;
        font-size: 8.3px;
        letter-spacing: 0.145em;
        line-height: 1.2;
        transform: none;
        box-shadow: none;
        background: transparent;
        border-bottom: 0;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .dropdown-content a::before {
        left: 18px;
        width: 2px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.24) 100%);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.08);
        opacity: 0;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .dropdown-content a[aria-current='page'] {
        padding-left: 28px;
        color: rgba(255, 255, 255, 0.94);
        font-weight: 700;
        background: transparent;
        box-shadow: none;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .dropdown-content a[aria-current='page']::before {
        left: 18px;
        opacity: 0.58;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .dropdown-content a + a {
        margin-top: 0;
    }
}

@media (min-width: 769px) and (max-width: 1366px) and (pointer: coarse) {
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav {
        right: 8px;
    }
}

/* Touch overlay family lock: Menu, Resources, and Chat share the same outside
   black-glass scrim. Panel interiors keep only their local accent. */
@media (max-width: 768px),
    (min-width: 768px) and (max-width: 960px),
    (min-width: 821px) and (max-width: 1024px) and (orientation: portrait),
    (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
    (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product {
        --abc-touch-overlay-scrim:
            radial-gradient(96% 76% at 50% 18%, rgba(255, 255, 255, 0.072) 0%, rgba(255, 255, 255, 0.026) 36%, rgba(255, 255, 255, 0) 66%),
            radial-gradient(128% 94% at 16% 100%, rgba(255, 255, 255, 0.046) 0%, rgba(255, 255, 255, 0.016) 34%, rgba(255, 255, 255, 0) 68%),
            linear-gradient(180deg, rgba(2, 4, 8, 0.58) 0%, rgba(2, 3, 7, 0.78) 52%, rgba(1, 2, 5, 0.94) 100%),
            radial-gradient(140% 112% at 50% 100%, rgba(255, 255, 255, 0.022) 0%, rgba(9, 10, 14, 0.3) 32%, rgba(4, 5, 9, 0.72) 70%, rgba(1, 2, 5, 0.94) 100%);
        --abc-touch-overlay-filter: blur(16px) saturate(114%) brightness(0.72);
        --abc-touch-panel-filter: blur(38px) saturate(124%) brightness(0.98);
        --abc-touch-panel-bg:
            linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.012) 24%, rgba(255, 255, 255, 0) 58%),
            radial-gradient(140% 120% at 0% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 34%, rgba(0, 0, 0, 0) 68%),
            linear-gradient(180deg, rgba(3, 4, 7, 0.34) 0%, rgba(1, 2, 4, 0.18) 100%);
        --abc-touch-panel-border: rgba(255, 255, 255, 0.045);
        --abc-touch-panel-shadow:
            0 34px 64px rgba(0, 0, 0, 0.78),
            0 0 34px rgba(255, 255, 255, 0.032),
            inset 0 1px 0 rgba(255, 255, 255, 0.048),
            inset 0 -18px 34px rgba(0, 0, 0, 0.18);
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .scroll-root::after,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-support-open .mobile-support-sheet-backdrop,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.chat-open .chat-overlay {
        background: var(--abc-touch-overlay-scrim) !important;
        -webkit-backdrop-filter: var(--abc-touch-overlay-filter) !important;
        backdrop-filter: var(--abc-touch-overlay-filter) !important;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-support-open .mobile-support-sheet {
        background: var(--abc-touch-panel-bg) !important;
        background-color: transparent !important;
        border-color: var(--abc-touch-panel-border) !important;
        box-shadow: var(--abc-touch-panel-shadow) !important;
        -webkit-backdrop-filter: var(--abc-touch-panel-filter) !important;
        backdrop-filter: var(--abc-touch-panel-filter) !important;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.product-phone-nav-open .main-nav::before {
        opacity: 0.18 !important;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.chat-open .chat-panel {
        background: var(--abc-touch-panel-bg) !important;
        background-color: transparent !important;
        border-color: var(--abc-touch-panel-border) !important;
        box-shadow: var(--abc-touch-panel-shadow) !important;
        -webkit-backdrop-filter: var(--abc-touch-panel-filter) !important;
        backdrop-filter: var(--abc-touch-panel-filter) !important;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.chat-open .chat-messages {
        background: rgba(8, 9, 12, 0.52) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.036),
            inset 0 -14px 28px rgba(0, 0, 0, 0.16) !important;
    }

    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.chat-open .chat-thread-header,
    body.nav-glass-dropdown-preview.nav-home-band-v6.page-product.chat-open .chat-input-row {
        box-shadow:
            0 12px 26px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.042),
            inset 0 -10px 22px rgba(0, 0, 0, 0.14) !important;
    }
}