@layer components {
    /* ── Toggle button (shared with mega dropdown) ── */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        cursor: pointer;
        z-index: var(--z-local);
        transition: background var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
    }

    .mobile-menu-toggle:not(.button) {
        width: var(--mobile-toggle-size, 40px);
        height: var(--mobile-toggle-size, 40px);
        background: var(--mobile-toggle-bg, transparent);
        border-radius: var(--mobile-toggle-radius, 0);
        color: var(--mobile-toggle-color, var(--color-text));
    }

    .mobile-menu-toggle.button {
        border-radius: var(--button-radius, var(--radius-sm));
    }

    .mobile-menu-toggle:not(.button):hover {
        background: var(--button-hover-bg, transparent);
        color: var(--nav-hover-color, var(--color-muted));
    }

    .mobile-menu-toggle:not(.mobile-menu-toggle--icon) {
        flex-direction: column;
        justify-content: center;
        gap: var(--mobile-toggle-bar-gap, 5px);
        padding: 8px;
    }

    .mobile-menu-toggle.button:not(.mobile-menu-toggle--icon) {
        flex-direction: column;
        gap: var(--mobile-toggle-bar-gap, 5px);
        padding: 8px;
    }

    .mobile-menu-toggle__bar {
        display: block;
        width: var(--mobile-toggle-bar-width, 100%);
        height: var(--mobile-toggle-bar-thickness, 2px);
        background: currentColor;
        border-radius: var(--mobile-toggle-bar-radius, 0);
        transition: transform var(--transition-speed), opacity var(--transition-speed);
        transform-origin: center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .mobile-menu-toggle--icon {
        position: relative;
    }

    .mobile-menu-toggle__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--transition-speed), transform var(--transition-speed);
    }

    .mobile-menu-toggle__icon svg {
        width: var(--mobile-toggle-icon-size, 20px);
        height: var(--mobile-toggle-icon-size, 20px);
    }

    .mobile-menu-toggle__icon--close {
        position: absolute;
        opacity: 0;
        transform: rotate(-45deg);
    }

    /* ── Backdrop ── */
    .overlay-panel__backdrop {
        position: fixed;
        --backdrop-z: var(--z-overlay-panel-backdrop);
    }

    .overlay-panel__backdrop + .backdrop__blur {
        position: fixed;
        z-index: calc(var(--z-overlay-panel-backdrop) - 1);
    }

    /* ── Panel base ── */
    .overlay-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: var(--z-overlay-panel);
        background: var(--overlay-panel-bg, var(--color-background));
        color: var(--overlay-panel-color, var(--color-text));
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        margin: var(--overlay-panel-margin, 0);
        border-radius: var(--overlay-panel-radius, 0);
        visibility: hidden;
        --anim-slide-distance: 100%;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .overlay-panel.is-scrollable {
        overflow-y: auto;
    }

    .overlay-panel.is-open {
        visibility: visible;
    }

    html.overlay-panel-open {
        overflow: hidden;
    }

    /* ── Geometry: sidebar ── */
    .overlay-panel--panel {
        width: var(--overlay-panel-width, 300px);
        max-width: var(--overlay-panel-max-width, 85vw);
    }

    .overlay-panel--panel.overlay-panel--left,
    .overlay-panel--panel.overlay-panel--right {
        top: 0;
        bottom: 0;
    }

    .overlay-panel--panel.overlay-panel--left {
        left: 0;
        border-right: var(--rule-width, 1px) solid var(--color-border);
        padding-left: env(safe-area-inset-left, 0);
    }

    .overlay-panel--panel.overlay-panel--right {
        right: 0;
        border-left: var(--rule-width, 1px) solid var(--color-border);
        padding-right: env(safe-area-inset-right, 0);
    }

    .overlay-panel--panel.overlay-panel--floating {
        border: var(--rule-width, 1px) solid var(--color-border);
        max-width: calc(100vw - var(--overlay-panel-margin, 0px) * 2);
    }

    .overlay-panel--panel.overlay-panel--top,
    .overlay-panel--panel.overlay-panel--bottom {
        left: 0;
        right: auto;
    }

    .overlay-panel--panel.overlay-panel--top {
        top: 0;
        bottom: auto;
    }

    .overlay-panel--panel.overlay-panel--bottom {
        bottom: 0;
        top: auto;
    }

    /* ── Geometry: full ── */
    .overlay-panel--full {
        inset: 0;
    }

    /* ── Content max-width ── */
    .overlay-panel__content {
        width: 100%;
        max-width: var(--overlay-panel-content-max-width);
        margin-inline: auto;
    }

    /* Box itself hugs an edge instead of centering — content_horizontal
       controls this, not just the text/items inside it. */
    .overlay-panel--h-left .overlay-panel__content {
        margin-inline: 0 auto;
    }

    .overlay-panel--h-right .overlay-panel__content {
        margin-inline: auto 0;
    }

    /* ── Horizontal (multi-column grid) ── */
    .overlay-panel--horizontal {
        flex-direction: row;
    }

    .overlay-panel--horizontal > .overlay-panel__group {
        flex: 1;
        min-width: 0;
    }

    @media (max-width: 768px) {
        .overlay-panel--horizontal {
            flex-direction: column;
        }
    }

    /* ── Close button ── */
    .overlay-panel__close {
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xs);
        background: none;
        border: none;
        color: var(--overlay-panel-color, var(--color-text));
        cursor: pointer;
        z-index: 1;
    }

    .overlay-panel__close--hidden {
        display: none;
    }

    .overlay-panel__close--left {
        right: auto;
        left: var(--spacing-md);
    }

    .overlay-panel__close-label {
        font-size: var(--font-size-body-sm);
        margin-inline-end: var(--spacing-xs);
    }

    /* ── Vertical alignment ── */
    .overlay-panel--v-top {
        justify-content: flex-start;
    }

    .overlay-panel--v-center {
        justify-content: center;
    }

    .overlay-panel--v-space-between {
        justify-content: space-between;
    }

    .overlay-panel--v-bottom {
        justify-content: flex-end;
    }

    /* ── Horizontal alignment ── */
    .overlay-panel--h-left {
        text-align: left;
        align-items: flex-start;
    }

    .overlay-panel--h-center {
        text-align: center;
        align-items: center;
    }

    .overlay-panel--h-right {
        text-align: right;
        align-items: flex-end;
    }

    /* .overlay-panel__logo hardcodes justify-content:center (its own flex
       row, for centering an <img> logo vertically-ish within its line) —
       override the horizontal axis to follow content_horizontal instead. */
    .overlay-panel--h-left .overlay-panel__logo {
        justify-content: flex-start;
    }

    .overlay-panel--h-right .overlay-panel__logo {
        justify-content: flex-end;
    }

    .overlay-panel--h-right .overlay-panel__close {
        right: auto;
        left: var(--spacing-md);
    }

    /* ── Items: full width ── */
    .overlay-panel__logo,
    .overlay-panel__nav,
    .overlay-panel__toggle,
    .overlay-panel__search,
    .overlay-panel__group,
    .overlay-panel__footer {
        width: 100%;
    }

    /* ── Group ── */
    .overlay-panel__group {
        display: flex;
        flex-direction: column;
        gap: var(--overlay-panel-group-gap, var(--spacing-md));
        padding: var(--spacing-md) var(--overlay-panel-padding, var(--spacing-md));
    }

    .overlay-panel__group > .overlay-panel__logo,
    .overlay-panel__group > .overlay-panel__nav,
    .overlay-panel__group > .overlay-panel__toggle,
    .overlay-panel__group > .overlay-panel__search {
        padding: 0;
    }

    .overlay-panel__group--horizontal {
        flex-direction: row;
        align-items: center;
    }

    .overlay-panel__group--horizontal > .overlay-panel__logo,
    .overlay-panel__group--horizontal > .overlay-panel__nav,
    .overlay-panel__group--horizontal > .overlay-panel__toggle,
    .overlay-panel__group--horizontal > .overlay-panel__search {
        padding: 0;
        width: auto;
    }

    .overlay-panel__group--horizontal > .overlay-panel__search {
        flex: 1;
        min-width: 0;
    }

    /* ── Logo ── */
    .overlay-panel__logo {
        display: flex;
        justify-content: center;
        padding: var(--spacing-md) var(--overlay-panel-padding, var(--spacing-md));
        font-family: var(--font-heading);
        font-weight: var(--font-weight-heading);
        font-size: var(--overlay-panel-logo-size, var(--logo-font-size, 1.25rem));
        color: var(--overlay-panel-color, var(--color-text));
        text-transform: var(--logo-text-transform, none);
        letter-spacing: var(--logo-letter-spacing, normal);
        font-style: var(--logo-font-style, normal);
        transition: color var(--transition-speed), opacity var(--transition-speed);
    }

    .overlay-panel__logo:hover {
        opacity: var(--logo-hover-opacity, 1);
    }

    .overlay-panel__logo img {
        max-height: var(--logo-height, 60px);
        width: auto;
    }

    /* ── Nav ── */
    .overlay-panel__nav {
        position: relative;
        z-index: -1;
    }

    .overlay-panel__nav--flush {
        z-index: auto;
        margin-inline: calc(-1 * var(--overlay-panel-padding, var(--spacing-md)));
        width: calc(100% + 2 * var(--overlay-panel-padding, var(--spacing-md)));
    }

    .overlay-panel__nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .overlay-panel__nav a {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        /* Horizontal inset is a MARGIN, not padding — padding only pushes
           the text inward while the border-bottom/hover background still
           span full width to the panel edge. Margin insets the whole box
           (bg + border included), which is what "gutter like other items"
           actually means here. */
        padding-block: var(--overlay-panel-item-padding, var(--spacing-md));
        margin-inline: var(--overlay-panel-padding, var(--spacing-md));
        min-height: var(--overlay-panel-item-height, auto);
        color: inherit;
        font-weight: var(--overlay-panel-nav-font-weight, inherit);
        border-bottom: var(--rule-width, 1px) solid var(--color-border);
        transition: background var(--transition-speed), color var(--transition-speed);
    }

    .overlay-panel--nav-hover .overlay-panel__nav a:hover {
        color: color-mix(in oklch, currentColor var(--overlay-panel-nav-hover-mix, 70%), var(--color-background));
    }

    .overlay-panel--nav-borders .overlay-panel__nav li:first-child a {
        border-top: var(--rule-width, 1px) solid var(--color-border);
    }

    .overlay-panel:not(.overlay-panel--nav-borders) .overlay-panel__nav li:last-child > a {
        border-bottom: none;
    }

    .overlay-panel--expandable .overlay-panel__nav .sub-menu li:last-child a {
        border-bottom: var(--rule-width, 1px) solid var(--color-border);
    }

    .overlay-panel__nav a:hover {
        background: var(--color-surface);
    }

    /* ── Sub-menus ── */
    .overlay-panel:not(.overlay-panel--expandable) .overlay-panel__nav .sub-menu {
        display: none;
    }

    .overlay-panel--expandable .overlay-panel__nav .menu-item-has-children > a .overlay-panel__expand {
        margin-inline-start: auto;
    }

    .overlay-panel--expandable .overlay-panel__nav .overlay-panel__expand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--overlay-panel-expand-size, 2em);
        height: var(--overlay-panel-expand-size, 2em);
        flex-shrink: 0;
        background: var(--overlay-panel-expand-bg, transparent);
        border: var(--overlay-panel-expand-border, none);
        border-radius: var(--overlay-panel-expand-radius, var(--radius-full));
        color: var(--overlay-panel-expand-color, var(--color-muted));
        cursor: pointer;
        padding: 0;
        transition: background var(--transition-speed), color var(--transition-speed);
    }

    .overlay-panel--expandable .overlay-panel__nav .overlay-panel__expand:hover {
        background: color-mix(in oklch, var(--overlay-panel-expand-bg, var(--color-text)) 85%, var(--color-background));
        color: var(--overlay-panel-expand-color, var(--color-text));
    }

    .overlay-panel--expandable .overlay-panel__nav .overlay-panel__expand svg {
        width: 1em;
        height: 1em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform var(--transition-speed);
    }

    .overlay-panel--expandable .overlay-panel__nav .overlay-panel__expand.is-open svg {
        transform: rotate(180deg);
    }

    .overlay-panel--expandable .overlay-panel__nav .sub-menu {
        display: block;
        width: 100%;
        overflow: hidden;
        height: 0;
        opacity: 0;
        transition: height var(--transition-speed) ease, opacity var(--transition-speed) ease;
    }

    .overlay-panel--expandable .overlay-panel__nav .sub-menu.is-open {
        height: auto;
        opacity: 1;
    }

    .overlay-panel--expandable .overlay-panel__nav .sub-menu a {
        padding-inline-start: calc(var(--overlay-panel-padding, var(--spacing-md)) + var(--overlay-panel-sub-indent, var(--spacing-lg)));
        padding-block: var(--overlay-panel-sub-padding, var(--overlay-panel-item-padding, var(--spacing-md)));
        min-height: var(--overlay-panel-sub-height, var(--overlay-panel-item-height, auto));
        font-size: var(--overlay-panel-sub-font-size, inherit);
        color: var(--overlay-panel-sub-color, inherit);
    }

    .overlay-panel--expandable .overlay-panel__nav .sub-menu .sub-menu {
        display: none;
    }

    /* ── Toggle ── */
    .overlay-panel__toggle {
        display: flex;
        padding: var(--spacing-md) var(--overlay-panel-padding, var(--spacing-md));
    }

    .overlay-panel--h-center .overlay-panel__toggle {
        justify-content: center;
    }

    .overlay-panel--h-right .overlay-panel__toggle {
        justify-content: flex-end;
    }

    /* ── Footer ── */
    .overlay-panel__footer {
        padding: var(--spacing-md) var(--overlay-panel-padding, var(--spacing-md));
        font-size: var(--font-size-body-sm);
        font-weight: var(--overlay-panel-footer-font-weight, inherit);
        color: var(--color-muted);
    }

    .overlay-panel__footer p {
        margin: 0;
    }

    /* ── Search ── */
    .overlay-panel__search {
        display: flex;
        padding: var(--spacing-md) var(--overlay-panel-padding, var(--spacing-md));
        width: 100%;
    }

    .overlay-panel__search-form {
        width: 100%;
    }

    .overlay-panel__search-form--horizontal {
        display: flex;
        align-items: stretch;
    }

    .overlay-panel__search-form--horizontal .input {
        flex: 1;
    }

    .overlay-panel__search-form--horizontal .overlay-panel__submit {
        margin-block-start: 0;
        min-width: auto;
    }

    .overlay-panel__cat {
        display: none;
    }

    /* ── Search pills ── */
    .overlay-panel__pills-wrap {
        margin-block-start: var(--spacing-lg);
    }

    .overlay-panel__pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--overlay-pill-gap, var(--spacing-sm));
        max-width: var(--overlay-pills-max-width, none);
        margin-inline: auto;
    }

    .overlay-panel__pill {
        padding: var(--overlay-pill-padding, var(--spacing-xs) var(--spacing-md));
        border: var(--overlay-pill-border, var(--rule-width, 1px) solid var(--color-border));
        border-radius: var(--overlay-pill-radius, var(--radius-full));
        background: var(--overlay-pill-bg, transparent);
        color: var(--overlay-pill-color, inherit);
        font-family: var(--font-body);
        font-size: var(--font-size-body);
        cursor: pointer;
        transition: background var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
    }

    .overlay-panel__pill:hover {
        background: var(--overlay-pill-hover-bg, color-mix(in oklch, var(--color-background) var(--surface-hover-mix, 93%), var(--color-text)));
        border-color: color-mix(in srgb, var(--color-text) 30%, transparent);
    }

    .overlay-panel__pill--active {
        background: var(--overlay-pill-active-bg, var(--color-primary));
        border-color: var(--overlay-pill-active-bg, var(--color-primary));
        color: var(--overlay-pill-active-color, var(--color-on-primary));
    }

    .overlay-panel__pill--active:hover {
        background: var(--overlay-pill-active-bg, var(--color-primary));
        border-color: var(--overlay-pill-active-bg, var(--color-primary));
    }

    /* ── Search select/submit spacing ── */
    .overlay-panel__select {
        margin-block-start: var(--spacing-lg);
    }

    .overlay-panel__submit {
        margin-block-start: var(--spacing-lg);
        min-width: 160px;
        --button-radius: var(--overlay-pill-radius, var(--radius-sm));
        --button-pad-y: var(--overlay-pill-padding-block, var(--_pad-y));
        line-height: inherit;
    }

    /* ── Text ── */
    .overlay-panel__text {
        margin: 0;
        padding-inline: var(--overlay-panel-padding, var(--spacing-md));
        color: var(--color-text);
        font-family: var(--font-heading);
    }

    .overlay-panel__text--uppercase {
        text-transform: uppercase;
    }

    /* ── Divider ── */
    .overlay-panel__divider {
        border: none;
        border-top: var(--rule-width, 1px) solid var(--color-border);
        margin: var(--spacing-sm) var(--overlay-panel-padding, var(--spacing-md));
    }

    /* ── Background variants ── */
    .overlay-panel--bg-surface {
        background: var(--color-surface);
    }

    /* ── Docked ── */
    .overlay-panel--docked.overlay-panel--left {
        margin-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .overlay-panel--docked.overlay-panel--right {
        margin-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .overlay-panel--docked.overlay-panel--top {
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .overlay-panel--docked.overlay-panel--bottom {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* ── Stagger ── */
    .overlay-panel--stagger > *:not(.overlay-panel__close) {
        opacity: 0;
    }

    .overlay-panel--stagger.is-open > *:not(.overlay-panel__close) {
        animation: overlay-panel-stagger-in var(--overlay-panel-stagger-speed, 0.3s) ease forwards;
    }

    @keyframes overlay-panel-stagger-in {
        from {
            opacity: 0;
            transform: translateY(var(--overlay-panel-stagger-distance, 8px));
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Search bar in panel: force expanded ── */
    .overlay-panel__search .search-bar--force-expanded .search-bar__clear {
        padding-inline-start: 0;
        padding-inline-end: calc((var(--spacing-sm) + var(--spacing-md)) / 2);
    }

    .overlay-panel__search .search-bar--expand-right {
        margin-inline-start: 0;
    }

    /* ── Admin bar offset ── */
    .admin-bar .overlay-panel,
    .admin-bar .overlay-panel__backdrop {
        top: var(--wp-admin--admin-bar--height, 32px);
    }

    @media (max-width: 782px) {
        .admin-bar .overlay-panel,
        .admin-bar .overlay-panel__backdrop {
            top: 0;
        }
    }

    /* ── Toggle bar animation (reuses .mobile-menu-toggle markup) ── */
    body.overlay-panel-open .mobile-menu-toggle__bar:nth-child(1) {
        transform: translateY(calc(var(--mobile-toggle-bar-gap, 5px) + var(--mobile-toggle-bar-thickness, 2px))) rotate(45deg);
    }

    body.overlay-panel-open .mobile-menu-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    body.overlay-panel-open .mobile-menu-toggle__bar:nth-child(3) {
        transform: translateY(calc((var(--mobile-toggle-bar-gap, 5px) + var(--mobile-toggle-bar-thickness, 2px)) * -1)) rotate(-45deg);
    }

    /* Icon variant toggle */
    body.overlay-panel-open .mobile-menu-toggle__icon--menu {
        opacity: 0;
        transform: rotate(45deg);
    }

    body.overlay-panel-open .mobile-menu-toggle__icon--close {
        opacity: 1;
        transform: rotate(0deg);
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
        .overlay-panel,
        .overlay-panel__backdrop,
        .overlay-panel--stagger > * {
            transition-duration: 0.01ms;
            transition-delay: 0s;
            animation-duration: 0.01ms;
        }
    }

    /* ── Print ── */
    @media print {
        .overlay-panel,
        .overlay-panel__backdrop {
            display: none;
        }
    }
}