@layer components {

    /* ══════════════════════════════════════════
       Shared dropdown surface
       Used by: nav sub-menu, select, search, sort
       ══════════════════════════════════════════ */

    .dropdown {
        position: absolute;
        z-index: var(--z-dropdown);
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: var(--dropdown-padding-block, var(--spacing-sm)) var(--dropdown-padding-inline, var(--spacing-sm));
        gap: var(--dropdown-item-gap, 0px);
        list-style: none;
        background: var(--dropdown-bg, var(--color-surface));
        border: var(--dropdown-border, 1px solid var(--color-border));
        border-radius: var(--dropdown-radius, var(--radius-md));
        box-shadow: var(--dropdown-shadow, none);
        max-height: var(--dropdown-max-height, 400px);
        overflow-y: clip;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition:
            opacity var(--dropdown-speed, 200ms) ease,
            transform var(--dropdown-speed, 200ms) ease,
            visibility var(--dropdown-speed, 200ms);
    }

    .dropdown.is-open,
    .dropdown.is-visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Items ── */
    .dropdown .dropdown__item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--dropdown-item-padding-block, var(--spacing-sm)) var(--dropdown-item-padding-inline, var(--spacing-md));
        font-size: var(--dropdown-font-size, var(--font-size-body-sm));
        text-transform: var(--dropdown-text-transform, none);
        letter-spacing: var(--dropdown-letter-spacing, normal);
        color: var(--dropdown-item-color, var(--color-text));
        text-decoration: none;
        white-space: nowrap;
        border-radius: var(--radius-sm);
        cursor: pointer;
        background-color: transparent;
        transition:
            background-color var(--transition-speed),
            color var(--transition-speed);
    }

    .dropdown .dropdown__item .tag__icon {
        color: var(--dropdown-icon-color, currentColor);
        opacity: var(--dropdown-icon-opacity, 1);
    }

    /* ── Hover: color ── */
    .dropdown--hover-color .dropdown__item:hover,
    .dropdown--hover-color .dropdown__item:focus-visible {
        color: var(--dropdown-hover-color, var(--color-primary));
        outline: none;
    }

    /* ── Hover: background ── */
    .dropdown--hover-background .dropdown__item:hover,
    .dropdown--hover-background .dropdown__item:focus-visible {
        background-color: var(--dropdown-hover-bg, color-mix(in oklch, var(--color-background) var(--surface-hover-mix, 93%), var(--color-text)));
        color: var(--dropdown-hover-color, var(--color-text));
        outline: none;
    }

    /* ── Hover: pill ── */
    .dropdown--hover-pill .dropdown__item {
        position: relative;
        z-index: 1;
    }

    .dropdown--hover-pill .dropdown__item:hover,
    .dropdown--hover-pill .dropdown__item:focus-visible {
        color: var(--dropdown-hover-color, var(--color-text));
        background: transparent;
        outline: none;
    }

    .dropdown-pill {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        pointer-events: none;
        background: color-mix(in oklch, var(--color-background) var(--surface-hover-mix, 93%), var(--color-text));
        border-radius: var(--dropdown-pill-radius, var(--radius-sm));
        opacity: 0;
        transition:
            transform var(--dropdown-pill-speed, 150ms) var(--dropdown-pill-easing, ease),
            width var(--dropdown-pill-speed, 150ms) var(--dropdown-pill-easing, ease),
            height var(--dropdown-pill-speed, 150ms) var(--dropdown-pill-easing, ease),
            opacity var(--dropdown-pill-speed, 150ms);
        will-change: transform;
    }

    /* ── Hover: link-effect ── */
    .dropdown--hover-link-effect .dropdown__item {
        --link-effect-distance: 0px;
        --_dd-underline-y: calc(100% + 3px);
        padding-block: var(--dropdown-item-padding-block, var(--spacing-sm));
        color: var(--dropdown-item-color, var(--color-text));
        border-radius: 0;
        background-image: linear-gradient(var(--link-underline-color), var(--link-underline-color));
        background-repeat: no-repeat;
        background-origin: content-box;
        background-position: left var(--_dd-underline-y);
        background-size: 0% var(--link-effect-thickness, 2px);
        transition:
            background-size var(--link-effect-scale-speed, 250ms) var(--link-effect-easing, ease-out) var(--link-effect-scale-delay, 0ms),
            --link-underline-color var(--link-effect-fade-speed, 200ms) var(--link-effect-easing, ease-out) var(--link-effect-fade-delay, 0ms),
            color var(--transition-speed);
    }

    .dropdown--hover-link-effect .dropdown__item:hover,
    .dropdown--hover-link-effect .dropdown__item:focus-visible {
        --link-underline-color: currentColor;
        color: var(--dropdown-hover-color, var(--color-text));
        background-size: 100% var(--link-effect-thickness, 2px);
        background-position: left var(--_dd-underline-y);
        outline: none;
    }

    .dropdown > li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dropdown > li > .dropdown__item {
        width: 100%;
    }

    /* ── Dividers — class-based (nav menus: li > a.dropdown__item) ── */
    .dropdown--dividers {
        gap: 0;
        overflow-x: clip;
    }

    .dropdown--dividers > li + li {
        margin-top: var(--dropdown-item-gap, 0px);
    }

    .dropdown--dividers > li + li::before {
        content: '';
        display: block;
        border-top: 1px solid var(--color-border);
        margin: calc(var(--dropdown-item-gap, 0px) / 2) calc(-1 * var(--dropdown-padding-inline, var(--spacing-sm)));
    }

    .dropdown--flush.dropdown--dividers > li + li {
        margin-top: 0;
    }

    .dropdown--flush.dropdown--dividers > li + li::before {
        margin: 0;
    }


    /* ── Flush — items fill edge to edge ── */
    .dropdown--flush {
        padding: 0;
        overflow: hidden;
    }

    .dropdown--flush .dropdown__item {
        border-radius: 0;
    }

    .dropdown--flush > li:first-child .dropdown__item,
    .dropdown--flush > :first-child.dropdown__item {
        border-radius: var(--dropdown-first-radius, var(--dropdown-radius, var(--radius-md))) var(--dropdown-first-radius, var(--dropdown-radius, var(--radius-md))) 0 0;
    }

    .dropdown--flush > li:last-child .dropdown__item,
    .dropdown--flush > :last-child.dropdown__item {
        border-radius: 0 0 var(--dropdown-radius, var(--radius-md)) var(--dropdown-radius, var(--radius-md));
    }

    .dropdown--flush > li:only-child .dropdown__item,
    .dropdown--flush > :only-child.dropdown__item {
        border-radius: var(--dropdown-radius, var(--radius-md));
    }

    /* ── Slide animation ── */
    .dropdown--fade-slide,
    .dropdown--slide {
        transform: translateY(var(--dropdown-slide-distance, 8px));
    }


    .dropdown--fade-slide.is-open,
    .dropdown--fade-slide.is-visible,
    .dropdown--slide.is-open,
    .dropdown--slide.is-visible {
        transform: translateY(0);
    }

    /* ── Active item ── */
    .dropdown__item.is-active {
        font-weight: inherit;
    }

    /* ══════════════════════════════════════════
       Nav-specific: hover trigger + positioning
       ══════════════════════════════════════════ */

    .site-header__nav li.menu-item-has-children {
        position: relative;
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    /* Hover bridge — only covers the gap, not the dropdown */
    .site-header__nav li.menu-item-has-children::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: var(--dropdown-offset, 4px);
    }

    .site-header__nav .sub-menu {
        top: 100%;
        margin-top: var(--dropdown-offset, 4px);
        min-width: var(--nav-dropdown-width, 160px);
    }

    /* Position: above */
    .nav-dropdown--above .sub-menu {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: var(--dropdown-offset, 4px);
    }

    .nav-dropdown--above li.menu-item-has-children::after {
        top: auto;
        bottom: 100%;
    }

    /* Relative to row — JS sets --_dd-bridge on each li (distance from li bottom to row bottom) */
    .nav-dropdown--relative-row .sub-menu {
        margin-top: calc(var(--_dd-bridge, 0px) + var(--dropdown-offset, 0px));
    }

    .nav-dropdown--relative-row li.menu-item-has-children::after {
        height: calc(var(--_dd-bridge, 0px) + var(--dropdown-offset, 0px));
    }

    /* ══════════════════════════════════════════
       Dropdown portal — sub-menus moved to sibling container via JS
       Row z-index > portal → dropdown slides from behind row
       ══════════════════════════════════════════ */

    .site-header__row:has(.nav-dropdown--slide-down) {
        position: relative;
        z-index: 2;
        background: var(--header-bg, var(--color-background));
    }

    .site-header--transparent .site-header__row:has(.nav-dropdown--slide-down) {
        background: none;
    }

    .site-header__row:has(.nav-dropdown--slide-down) {
        border-bottom: none !important;
    }

    .site-header__row:has(.nav-dropdown--slide-down)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--color-border);
        z-index: 3;
        transition: opacity var(--transition-speed);
    }

    .site-header--transparent:not(.site-header--scrolled) .site-header__row:has(.nav-dropdown--slide-down)::after,
    .site-header--floating.is-floating .site-header__row:has(.nav-dropdown--slide-down)::after {
        opacity: 0;
    }

    .site-header:has(.nav-dropdown--slide-down):not(.site-header--no-border) {
        border-bottom: none;
    }

    .site-header:has(.nav-dropdown--seamless) .site-header__row:has(.nav-dropdown--slide-down)::after {
        display: none;
    }

    .site-header:has(.nav-dropdown--seamless) {
        border-bottom: none;
    }

    .dropdown-portal {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        pointer-events: none;
    }

    .dropdown-portal .sub-menu {
        position: absolute;
        top: var(--dropdown-offset, 0px);
        pointer-events: auto;
    }

    /* Flush: no offset → strip top border + radius for seamless join */
    .dropdown-portal--flush .sub-menu {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        transition:
            opacity var(--dropdown-speed, 200ms),
            transform var(--dropdown-speed, 200ms),
            visibility var(--dropdown-speed, 200ms),
            border-radius var(--transition-speed),
            border-top-color var(--transition-speed);
    }

    .site-header--transparent:not(.site-header--scrolled) .dropdown-portal--flush .sub-menu {
        border-top: 1px solid var(--color-border);
        border-top-left-radius: var(--dropdown-radius, var(--radius-md));
        border-top-right-radius: var(--dropdown-radius, var(--radius-md));
    }

    /* Slide-down animation */
    .dropdown-portal .sub-menu {
        transform: translateY(calc(-1 * var(--dropdown-slide-distance, 8px)));
    }

    .dropdown-portal .sub-menu.is-open {
        transform: translateY(0);
    }

    /* Mega overrides nav defaults */
    .menu-item--mega > .sub-menu {
        display: grid;
        min-width: auto;
    }

    /* Align */
    .nav-dropdown--align-left .sub-menu { left: 0; }
    .nav-dropdown--align-center .sub-menu {
        left: 50%;
        transform: translateX(-50%) translateY(var(--dropdown-slide-distance, 8px));
    }
    .nav-dropdown--align-right .sub-menu { right: 0; }

    /* Center + slide */
    .nav-dropdown--fade-slide.nav-dropdown--align-center .sub-menu,
    .nav-dropdown--slide.nav-dropdown--align-center .sub-menu {
        transform: translateX(-50%) translateY(var(--dropdown-slide-distance, 8px));
    }


    /* Show on hover/focus */
    .site-header__nav li.menu-item-has-children:hover > .sub-menu,
    .site-header__nav li.menu-item-has-children:focus-within > .sub-menu {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .nav-dropdown--slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:hover > .sub-menu,
    .nav-dropdown--slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:focus-within > .sub-menu,
    .nav-dropdown--fade-slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:hover > .sub-menu,
    .nav-dropdown--fade-slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:focus-within > .sub-menu {
        transform: translateY(0);
    }

    .nav-dropdown--align-center:not(.nav-dropdown--slide-down) li.menu-item-has-children:hover > .sub-menu,
    .nav-dropdown--align-center:not(.nav-dropdown--slide-down) li.menu-item-has-children:focus-within > .sub-menu {
        transform: translateX(-50%);
    }

    .nav-dropdown--align-center.nav-dropdown--slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:hover > .sub-menu,
    .nav-dropdown--align-center.nav-dropdown--slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:focus-within > .sub-menu,
    .nav-dropdown--align-center.nav-dropdown--fade-slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:hover > .sub-menu,
    .nav-dropdown--align-center.nav-dropdown--fade-slide:not(.nav-dropdown--slide-down) li.menu-item-has-children:focus-within > .sub-menu {
        transform: translateX(-50%) translateY(0);
    }

    /* Radius style: bottom only */
    .nav-dropdown--radius-bottom .sub-menu {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }


    /* Sub-menu items — reset WP list styles */
    .site-header__nav .sub-menu li {
        margin: 0;
        padding: 0;
    }

    /* Style: inline — no container background */
    .nav-dropdown--inline .sub-menu {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .nav-dropdown--inline .sub-menu a {
        background: var(--dropdown-bg, var(--color-surface));
        border-radius: var(--dropdown-radius, var(--radius-md));
    }

    .nav-dropdown--inline .sub-menu a:hover {
        background: var(--color-surface);
    }

    /* Nested submenus */
    .site-header__nav .sub-menu .sub-menu {
        top: 0;
        left: 100%;
        margin-top: 0;
        margin-left: var(--spacing-xs);
    }

    .site-header__nav .sub-menu .sub-menu.sub-menu--flip {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: var(--spacing-xs);
    }

    /* ══════════════════════════════════════════
       Mega dropdown — wide grid panel
       ══════════════════════════════════════════ */

    .menu-item--mega > .sub-menu {
        min-width: var(--mega-width, 400px);
        padding: var(--mega-padding-block, var(--spacing-lg)) var(--mega-padding-inline, var(--spacing-lg));
        display: grid;
        grid-template-columns: repeat(var(--mega-columns, 4), 1fr);
        gap: var(--mega-gap, var(--spacing-lg));
        overflow: visible;
        border-radius: var(--dropdown-radius, var(--radius-md));
    }

    /* Reset flush/dividers inside mega — mega has own layout */
    .menu-item--mega > .sub-menu > li {
        padding: 0;
        border: none;
    }

    .menu-item--mega > .dropdown.dropdown .dropdown__item,
    .menu-item--mega .dropdown .dropdown .dropdown__item {
        padding-inline: 0;
        margin-block: 0;
        border-radius: 0;
        background-position-x: 0;
    }

    .menu-item--mega > .dropdown.dropdown .dropdown__item:hover,
    .menu-item--mega .dropdown .dropdown .dropdown__item:hover {
        --link-underline-color: currentColor;
        background-size: 100% var(--link-effect-thickness, 2px);
    }

    .menu-item--mega > .sub-menu > li > .dropdown__item {
        font-weight: var(--font-weight-heading);
        font-size: var(--dropdown-font-size, var(--font-size-body-sm));
    }

    /* Heading styles */
    .mega-heading--underline > .sub-menu > li > .dropdown__item {
        border-bottom: 2px solid var(--color-border);
        padding-bottom: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }

    .mega-heading--uppercase > .sub-menu > li > .dropdown__item {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: var(--font-size-xs);
    }

    .mega-heading--accent > .sub-menu > li > .dropdown__item {
        color: var(--color-primary);
    }

    /* Depth-2 sub-items as column lists */
    .menu-item--mega .sub-menu .sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        max-height: none;
        overflow: visible;
        transform: none;
    }

    .menu-item--mega .sub-menu .sub-menu .dropdown__item {
        font-weight: normal;
    }

    /* Column dividers */
    .mega-dividers > .sub-menu > li + li {
        border-left: 1px solid var(--color-border);
        padding-left: var(--mega-gap, var(--spacing-lg));
    }


    /* Animation override — mega uses fade by default */
    .menu-item--mega > .sub-menu.dropdown--fade-slide,
    .menu-item--mega > .sub-menu.dropdown--slide {
        transform: none;
    }

    .menu-item--mega > .sub-menu.dropdown--fade-slide.is-visible,
    .menu-item--mega > .sub-menu.dropdown--slide.is-visible {
        transform: none;
    }

    /* Stagger animation */
    .mega-stagger > .sub-menu > li {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--dropdown-speed, 200ms) ease, transform var(--dropdown-speed, 200ms) ease;
    }

    .mega-stagger:hover > .sub-menu > li {
        opacity: 1;
        transform: none;
    }

    .mega-stagger > .sub-menu > li:nth-child(1) { transition-delay: 0ms; }
    .mega-stagger > .sub-menu > li:nth-child(2) { transition-delay: 50ms; }
    .mega-stagger > .sub-menu > li:nth-child(3) { transition-delay: 100ms; }
    .mega-stagger > .sub-menu > li:nth-child(4) { transition-delay: 150ms; }
    .mega-stagger > .sub-menu > li:nth-child(5) { transition-delay: 200ms; }
    .mega-stagger > .sub-menu > li:nth-child(6) { transition-delay: 250ms; }

    /* Hide mega on mobile */
    @media (max-width: 668px) {
        .menu-item--mega > .sub-menu {
            display: none;
        }
    }

    /* ── Stagger — items fade in sequentially ── */
    .dropdown--stagger.is-open,
    .dropdown--stagger.is-visible,
    li.menu-item-has-children:hover > .dropdown--stagger,
    li.menu-item-has-children:focus-within > .dropdown--stagger {
        opacity: 1;
        transition: transform var(--dropdown-speed, 200ms) ease, visibility 0s;
    }

    .dropdown.dropdown--stagger > li {
        opacity: 0;
        transform: translateY(var(--dropdown-stagger-distance, 0px));
        transition:
            opacity var(--dropdown-stagger-speed, 200ms) ease,
            transform var(--dropdown-stagger-speed, 200ms) ease;
    }

    .dropdown--stagger.is-open > li,
    .dropdown--stagger.is-visible > li,
    li.menu-item-has-children:hover > .dropdown--stagger > li,
    li.menu-item-has-children:focus-within > .dropdown--stagger > li {
        opacity: 1;
        transform: none;
    }

    .dropdown--stagger > li:nth-child(1) { transition-delay: var(--dropdown-stagger-base, 0ms); }
    .dropdown--stagger > li:nth-child(2) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms)); }
    .dropdown--stagger > li:nth-child(3) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 2); }
    .dropdown--stagger > li:nth-child(4) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 3); }
    .dropdown--stagger > li:nth-child(5) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 4); }
    .dropdown--stagger > li:nth-child(6) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 5); }
    .dropdown--stagger > li:nth-child(7) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 6); }
    .dropdown--stagger > li:nth-child(8) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 7); }

    /* Reset delay on close so items disappear instantly */
    .dropdown.dropdown--stagger > li:nth-child(n) {
        transition-delay: 0ms;
    }
    .dropdown--stagger.is-open > li:nth-child(1),
    .dropdown--stagger.is-visible > li:nth-child(1),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(1),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(1) { transition-delay: var(--dropdown-stagger-base, 0ms); }
    .dropdown--stagger.is-open > li:nth-child(2),
    .dropdown--stagger.is-visible > li:nth-child(2),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(2),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(2) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms)); }
    .dropdown--stagger.is-open > li:nth-child(3),
    .dropdown--stagger.is-visible > li:nth-child(3),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(3),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(3) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 2); }
    .dropdown--stagger.is-open > li:nth-child(4),
    .dropdown--stagger.is-visible > li:nth-child(4),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(4),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(4) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 3); }
    .dropdown--stagger.is-open > li:nth-child(5),
    .dropdown--stagger.is-visible > li:nth-child(5),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(5),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(5) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 4); }
    .dropdown--stagger.is-open > li:nth-child(6),
    .dropdown--stagger.is-visible > li:nth-child(6),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(6),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(6) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 5); }
    .dropdown--stagger.is-open > li:nth-child(7),
    .dropdown--stagger.is-visible > li:nth-child(7),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(7),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(7) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 6); }
    .dropdown--stagger.is-open > li:nth-child(8),
    .dropdown--stagger.is-visible > li:nth-child(8),
    li.menu-item-has-children:hover > .dropdown--stagger > li:nth-child(8),
    li.menu-item-has-children:focus-within > .dropdown--stagger > li:nth-child(8) { transition-delay: calc(var(--dropdown-stagger-base, 0ms) + var(--dropdown-stagger-delay, 30ms) * 7); }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
        .dropdown {
            transition: none;
        }
        .dropdown.dropdown--stagger > li {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
}